App Store และ Play Store งานดีไซน์เดียว

แอป React Native อยู่ในสองระบบนิเวศร้านค้าโดยค่าเริ่มต้นเรื่องภาพหน้าจอมักต้องใช้ Detox สำหรับถ่ายภาพ simulator ดิบหรือออกแบบด้วยมือใน Figma โดยเปิด preset iPhone และ Android เคียงกัน Screenshotify สำหรับตอนที่ต้องการภาพหน้าจอ marketing ที่ออกแบบแล้วไม่ใช่ภาพดิบและต้องการสำหรับทั้งสองร้านในครั้งเดียว

วันทำงาน RN screenshot ทั่วไป

1. ถ่ายภาพหน้าต้นฉบับ จากแอปที่รันอยู่ Cmd+S ของ iOS Simulator ปุ่ม screenshot ของ Android Emulator หรือภาพหน้าจออุปกรณ์จริงผ่านการเชื่อมต่อ WebRTC ที่ Screenshotify สร้างไว้
2. เปิด Screenshotify สร้างคารูเซล 3-5 พาเนลแต่ละพาเนลใช้กรอบอุปกรณ์ต่างกันได้สามารถทำคารูเซลเดียวที่ผสม iPhone กับ Pixel ได้
3. เพิ่มคำบรรยาย ในภาษาต้นฉบับตัวจัดวางหลายพาเนลรักษาโครงสร้าง headline ให้สม่ำเสมอข้ามพาเนล
4. แปลภาษา แปลเป็นชุดด้วยคลิกเดียวครบ 39 ภาษา App Store ตรวจสอบภาษาที่ตลาดหลักของคุณอยู่ (มักเป็น EN, JP, DE, BR, KR, ES สำหรับแอป RN ระดับโลก)
5. ส่งออก ZIP เดียวพร้อมขนาด App Store ที่เปิดใช้งาน (6.9", iPad 13" เป็นต้น) และขนาด Play Store (1080 × 1920 ค่าเริ่มต้น)

ทางเลือกใน RN ecosystem

Detox หรือ react-native-testing-library พร้อม screenshot helpers จะให้ภาพจากการทดสอบ UI มีประโยชน์สำหรับภาพต้นฉบับแต่ไม่แทนขั้นตอนการจัดองค์ประกอบ marketing Fastlane snapshot ทำงานได้บนฝั่ง iOS ของแอป RN (โปรเจกต์ Xcode เป็น Xcode จริง)

ทีม RN ส่วนใหญ่ใช้: ถ่ายภาพต้นฉบับผ่าน simulator/อุปกรณ์ออกแบบคารูเซลใน Screenshotify จัดเวอร์ชัน JSON โปรเจกต์ใน repo เดียวกับ codebase

เคล็ดลับออกแบบ cross-platform

• เลือก design system เดียวต่อโปรเจกต์ แล้วใช้กับภาพหน้าจอทั้ง iOS และ Android อย่าสลับฟอนต์หรือ color scheme ระหว่างร้าน
• Status bar ต่างกัน iOS แสดง 9:41 ตาม convention Android แสดงเวลาจริง Screenshotify สลับ status bar iOS ต่อ device Android ใช้ status bar OS จากภาพหน้าจอตามที่เป็น
• Bottom nav กับ tab bar อย่าตัดออกนั่นคือส่วนที่ผู้ใช้สังเกตเห็นมากที่สุดในภาพขนาดย่อของคารูเซล
• iPhone ขนาด 5.5" ล้าสมัยแล้ว ถ้าแอป RN ของคุณไม่รองรับ iOS 13 (iPhone 6s Plus ขั้นต่ำ) ข้ามขนาด 5.5" ไปเลย

เรียนรู้: ฟีเจอร์ · คู่มือ · ราคา

เปิดเครื่องมือแก้ไข →