App Store và Play Store, một thiết kế.
Ứng dụng React Native tồn tại trong hai hệ sinh thái store mặc định. Câu chuyện ảnh chụp màn hình thường liên quan đến Detox-driven UI test để chụp simulator thô, hoặc thiết kế thủ công trong Figma với cả preset iPhone lẫn Android mở cạnh nhau. Screenshotify dành cho thời điểm bạn muốn ảnh chụp màn hình marketing được thiết kế — không phải chụp thô — và bạn muốn cho cả hai store cùng lúc.
Một ngày làm ảnh chụp màn hình RN điển hình
- Chụp các khung nguồn từ ứng dụng đang chạy — Cmd+S trên iOS Simulator, nút chụp màn hình trên Android Emulator, hoặc ảnh chụp màn hình thiết bị thực qua kết nối WebRTC tích hợp.
- Mở Screenshotify, xây dựng carousel 3–5 bảng. Mỗi bảng có thể dùng khung thiết bị khác nhau, nên bạn có thể tạo một carousel pha trộn iPhone và Pixel về mặt hình ảnh.
- Thêm chú thích bằng ngôn ngữ gốc. Trình soạn đa bảng giữ cấu trúc tiêu đề nhất quán qua các bảng.
- Bản địa hóa. Dịch một cú click sang toàn bộ 39 ngôn ngữ App Store. Xem lại các ngôn ngữ nơi thị trường hoạt động của bạn tập trung (thường là EN, JP, DE, BR, KR, ES cho ứng dụng RN toàn cầu).
- Xuất. Một ZIP với các kích thước App Store bạn đã bật (6.9", iPad 13", v.v.) và kích thước Play Store (1080 × 1920 mặc định).
Các lựa chọn thay thế trong hệ sinh thái RN
Detox hoặc react-native-testing-library với các helper ảnh chụp màn hình sẽ cho bạn ảnh chụp khung thô từ UI test. Hữu ích cho ảnh nguồn; không thay thế bước soạn marketing. Fastlane snapshot hoạt động trên phía iOS của ứng dụng RN (dự án Xcode là Xcode thực).
Hầu hết nhóm RN chọn: chụp nguồn qua simulator/thiết bị, thiết kế carousel trong Screenshotify, quản lý phiên bản dự án JSON trong cùng repo với codebase.
Mẹo thiết kế đa nền tảng
- Chọn một hệ thống thiết kế cho mỗi dự án và áp dụng cho cả ảnh chụp màn hình iOS lẫn Android — đừng chuyển đổi font hay bảng màu giữa các store.
- Thanh trạng thái khác nhau. iOS hiển thị 9:41 theo quy ước; Android hiển thị giờ thực tế. Screenshotify bật/tắt thanh trạng thái iOS theo thiết bị; Android giữ thanh trạng thái OS trong ảnh chụp màn hình.
- Thanh điều hướng dưới vs tab bar. Đừng cắt bỏ những thứ này — đó là phần ứng dụng mà hầu hết người dùng chú ý trong thumbnail carousel.
- iPhone 5.5" đã lỗi thời. Trừ khi ứng dụng RN của bạn nhắm tới iOS 13 (minimum iPhone 6s Plus), hãy bỏ qua hoàn toàn kích thước 5.5".