Cách bản địa hóa ảnh chụp màn hình App Store cho hơn 30 ngôn ngữ

Tại sao phải bản địa hóa ảnh chụp màn hình?

Nghiên cứu của chính nhóm phát triển Apple cho thấy người dùng có xu hướng cài đặt ứng dụng cao hơn đáng kể khi trang App Store hiển thị bằng ngôn ngữ mẹ đẻ. Điều tương tự cũng được ghi nhận trong danh sách kiểm tra bản địa hóa của Google: trang được bản địa hóa có tỷ lệ chuyển đổi cao hơn và xếp hạng tìm kiếm tốt hơn. Chỉ dịch các chuỗi metadata — tiêu đề, phụ đề, từ khóa — mà không dịch ảnh chụp màn hình là biện pháp nửa vời phổ biến nhất, và nó đánh mất tỷ lệ chuyển đổi thực tế vì hình ảnh chủ đạo vẫn còn bằng tiếng Anh.

Trở ngại với hầu hết các đội ngũ là vấn đề vận hành, không phải chiến lược. Dịch một bộ năm ảnh chụp màn hình sang 30 ngôn ngữ thủ công có nghĩa là 150 tệp thiết kế, 150 chu kỳ rà soát, và 150 cơ hội xảy ra lỗi chính tả. Cách khắc phục là xem ảnh chụp màn hình giống như mọi UI đã bản địa hóa khác: khóa nằm trong mã, chuỗi nằm trong TMS, bố cục được render bởi một bước build.

Bạn nên cấu trúc khóa dịch như thế nào?

Sử dụng cùng cấu trúc khóa với các bản dịch trong ứng dụng. Nhóm khóa theo ID ảnh chụp màn hình, sau đó theo vai trò của thành phần:

{
  "screenshots": {
    "01_home": {
      "headline": "Build faster.",
      "subhead": "Ship every store size in one API call.",
      "badge": "New"
    },
    "02_pricing": {
      "headline": "Plans for every team.",
      "cta": "Start free"
    },
    "03_api": {
      "headline": "Built for developers.",
      "subhead": "REST, Fastlane, and GitHub Actions out of the box."
    }
  }
}

Sau đó là tệp tiếng Đức tương ứng:

{
  "screenshots": {
    "01_home": {
      "headline": "Schneller bauen.",
      "subhead": "Alle Store-Formate mit einem API-Call.",
      "badge": "Neu"
    },
    "02_pricing": {
      "headline": "Pläne für jedes Team.",
      "cta": "Kostenlos starten"
    }
  }
}

Khóa không bao giờ thay đổi. Chỉ giá trị thay đổi. Người dịch làm việc trên cột giá trị trong TMS của họ mà không cần đụng tới template Screenshots.live.

Bạn nên dùng mã ngôn ngữ nào?

Sử dụng BCP-47 một cách nhất quán. Chỉ dùng thẻ con ngôn ngữ khi không có biến thể vùng (de, fr, ja) và chỉ thêm vùng khi các biến thể khác biệt rõ rệt (en-GB và en-US, pt-BR và pt-PT, zh-Hans và zh-Hant). Cả Apple và Google đều chấp nhận BCP-47, mặc dù mã nội bộ của họ hơi khác nhau — xem danh sách ngôn ngữ App Store Connect và các ngôn ngữ được hỗ trợ của Google Play. Ánh xạ chúng một lần trong script CI của bạn.

Bạn phân phối render qua các ngôn ngữ ra sao?

API nhận một ID template, một catalog dịch, và một mảng ngôn ngữ. Nó trả về một PNG đã render cho mỗi ngôn ngữ trên mỗi thiết bị:

curl -X POST https://api.screenshots.live/v1/renders \
  -H "Authorization: Bearer $SCREENSHOTSLIVE_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "templateId": "tpl_app_release_v3",
    "locales": ["en", "de", "es", "fr", "pt-BR", "it", "nl", "ja", "ko", "zh-Hans", "ar", "he"],
    "devices": ["iphone-6.7", "iphone-6.1", "ipad-12.9", "phone-android"],
    "translations": {
      "en": "@translations/en.json",
      "de": "@translations/de.json",
      "es": "@translations/es.json"
    }
  }'

Phía sau hậu trường, bộ render chạy song song theo ngôn ngữ và thiết bị. Một lần render 12 ngôn ngữ × 4 thiết bị — 48 tệp PNG — thường hoàn tất trong dưới 90 giây. Xem tài liệu API render để biết toàn bộ cấu trúc yêu cầu.

Bạn xử lý các ngôn ngữ phải-sang-trái như thế nào?

Tiếng Ả Rập (ar), tiếng Hebrew (he), tiếng Ba Tư (fa), và tiếng Urdu (ur) cần đảo ngược toàn bộ bố cục — căn lề văn bản, vị trí hình ảnh, biểu tượng mũi tên, thậm chí cả thứ tự các nhóm gồm nhiều thành phần. Đảo nửa chừng (chỉ lật văn bản nhưng không lật bố cục) trông sai với người đọc bản ngữ và làm giảm độ tin cậy.

Trong Screenshots.live, đánh dấu template với direction: "auto" và bộ render sẽ tự động lật bố cục, căn lề văn bản, và các dấu mũi tên trang trí khi render các ngôn ngữ RTL. Ghi đè từng phần tử riêng lẻ với direction: "ltr" khi cần giữ trái-sang-phải (số điện thoại, URL, khối mã).

Còn ghi đè văn bản theo từng ngôn ngữ thì sao?

Một số ngôn ngữ đơn giản là không vừa cùng một khung chú thích. Danh từ ghép trong tiếng Đức có thể dài hơn tiếng Anh tới 40%; tiếng Nhật và tiếng Trung có thể ngắn hơn tới 50%. Cho phép ghi đè văn bản theo từng ngôn ngữ mà không cần tách template:

{
  "screenshots.01_home.headline": {
    "en": "Build faster.",
    "de": "Schneller bauen.",
    "fi": "Rakenna nopeammin.",
    "ja": "もっと速く。"
  },
  "screenshots.01_home.subhead": {
    "en": "Ship every store size in one API call.",
    "de": "Alle Formate mit einem Aufruf.",
    "ja": "ワンコールで全サイズ対応。"
  }
}

Còn về phông chữ và ký tự CJK thì sao?

Các phông chữ Latin (Inter, SF Pro, Roboto) thường thiếu ký tự CJK, Cyrillic, Devanagari, hoặc Ả Rập — văn bản hiển thị thành các ô tofu. Cấu hình phông chữ dự phòng cho từng hệ chữ:

• Latin / Cyrillic / Hy Lạp: Inter, SF Pro, Roboto
• CJK (Nhật / Hàn / Trung): Noto Sans CJK
• Ả Rập / Ba Tư / Urdu: Noto Sans Arabic, IBM Plex Sans Arabic
• Devanagari (Hindi): Noto Sans Devanagari
• Thái: Noto Sans Thai, Sarabun

Họ phông Noto bao phủ mọi hệ chữ mà Apple và Google hỗ trợ. Đặt nó làm chuỗi dự phòng trong template — bộ render sẽ chọn đúng phông cho từng điểm mã, không cần can thiệp thủ công.

Bạn QA bố cục ở quy mô lớn như thế nào?

Rà soát thủ công 30 ngôn ngữ không thể mở rộng được. Tự động hóa các kiểu lỗi rõ ràng:

• Tràn văn bản: render ở độ phân giải một phần tư, OCR kết quả, đối chiếu với chuỗi nguồn. Sai khác đồng nghĩa với việc văn bản bị cắt.
• Thiếu ký tự: đếm số ô tofu trong PNG đã render bằng mô hình thị giác hoặc histogram pixel trên ký tự thay thế Unicode.
• Bản dịch trống: thất bại bản build nếu bất kỳ ngôn ngữ nào thiếu hơn 5% khóa so với tiếng Anh.
• Ngân sách độ dài: đặt giới hạn độ dài cứng cho mỗi khóa. Nếu bản dịch tiếng Đức vượt quá, hãy thất bại bản build thay vì để tràn được phát hành.

Bạn tải lên ảnh chụp màn hình theo từng ngôn ngữ ra sao?

Cả App Store Connect và Google Play đều chấp nhận ảnh chụp màn hình theo từng ngôn ngữ. Fastlane deliver đọc từ fastlane/screenshots/<locale>/ và Fastlane supply đọc từ fastlane/metadata/android/<locale>/images/phoneScreenshots/. Ánh xạ đầu ra của bộ render tới các đường dẫn đó và phần còn lại chỉ là fastlane deliver / fastlane supply --skip_upload_apk.

Tiếp theo bạn nên làm gì?

Kết hợp điều này với hướng dẫn tự động hóa CI/CD của chúng tôi để bản địa hóa chạy trên mọi lần phát hành. Sử dụng tính năng hỗ trợ đa nền tảng để phân phối tới iOS, Android, và các cửa hàng web từ cùng một catalog.