Tổng quan
Apple Wallet và Google Wallet hiển thị ảnh theo cách khác nhau. Mỗi vị trí ảnh trên thẻ có một khung riêng. Hệ thống co giãn ảnh của bạn theo đúng tỉ lệ, lấp đầy khung, rồi cắt phần thừa. Vì vậy, đúng tỉ lệ quan trọng hơn đúng từng pixel. Nếu ảnh sai tỉ lệ, ảnh sẽ bị cắt mất logo hoặc bị mờ. Bạn nhập ảnh trong tab Images của trình chỉnh sửa mẫu thẻ:- Apple Wallet: tab Apple Wallet → tab con Images (xem Thiết kế cho Apple Wallet)
- Google Wallet: tab Google Wallet → tab con Images (xem Thiết kế cho Google Wallet)
Bảng kích thước chuẩn
Apple Wallet
Apple dùng 3 mật độ điểm ảnh cho màn hình thường và Retina:1x, @2x, @3x. Bạn nên tải lên bản @3x (lớn nhất). XanhCard dùng bản đó để hiển thị trên mọi thiết bị.
Apple quy định khung logo tối đa là 160×50 điểm ảnh, nhưng bạn nên dùng ảnh hẹp hơn khung để hiển thị gọn. Ảnh strip và background có thể hiển thị hơi khác nhau tùy dòng iPhone và phiên bản iOS.
Google Wallet
Google chỉ cần một URL ảnh cho mỗi vị trí. Hệ thống của Google tự co giãn ảnh. Bạn chỉ cần đúng tỉ lệ và đủ độ phân giải.Trong XanhCard, ô nhập wide logo gợi ý 600×200 px. Tỉ lệ này tương đương chuẩn 1280×400 px của Google, nên bạn có thể dùng một trong hai kích thước.
Định dạng và dung lượng
- Định dạng: dùng PNG khi cần nền trong suốt (đặc biệt là logo). JPG dùng được cho ảnh strip và hero không cần trong suốt.
- Màu sắc: xuất ảnh với cấu hình màu sRGB để màu trên điện thoại giống với màu bạn thiết kế.
- Dung lượng: nén ảnh trước khi tải lên bằng TinyPNG hoặc Squoosh. Ảnh càng nhẹ, thẻ càng tải nhanh khi người dùng nhận qua email hoặc trang web.
- Không phóng to quá mức: ảnh lớn hơn bảng trên không nét hơn. Ảnh quá lớn chỉ làm file thẻ nặng và hiển thị chậm.
Vùng an toàn
Vùng an toàn là phần ảnh chắc chắn hiển thị, không bị cắt trên mọi thiết bị.Logo Apple: dùng bản ngang, crop sát
Khung logo Apple là hình chữ nhật rộng (3,2:1). Nếu bạn dùng logo vuông, logo sẽ co lại rất nhỏ và lọt thỏm giữa khoảng trống. Bạn nên:- Xuất một bản logo ngang (biểu tượng + tên thương hiệu nằm cạnh nhau)
- Crop sát vào nét vẽ, không chừa viền trắng
- Dùng PNG nền trong suốt để màu nền thẻ hiện qua tự nhiên
Logo Google: chừa lề vì bị cắt tròn
Google cắt logo vuông thành hình tròn. Bạn nên:- Chừa lề an toàn khoảng 15% quanh logo
- Không tự cắt tròn trước, giữ nguyên ảnh vuông nền đầy
- Đặt biểu tượng chính vào giữa ảnh
Strip và hero: giữ nội dung quan trọng ở giữa
Strip của Apple và hero của Google không cùng tỉ lệ. Nếu bạn dùng chung một file cho cả hai, Google sẽ cắt hai cạnh bên. Bạn nên:- Giữ chữ, logo và chi tiết quan trọng trong 80% chiều rộng ở giữa
- Để hai mép ngoài là nền trơn, mất đi cũng không sao
- Không đặt chữ hoặc mã vạch trong ảnh strip và hero, vì chữ có thể bị cắt hoặc hiển thị khác nhau tùy thiết bị
Logo trên nền thẻ
Logo PNG trong suốt được đặt trực tiếp lên màu nền thẻ, không phải lên nền trắng. Logo đen trên nền thẻ tối sẽ bị chìm và khó đọc. Trước khi xuất bản, bạn hãy xem trước logo trên đúng màu nền đã chọn trong tab General.Cách nhập ảnh trong XanhCard
1
Tải ảnh lên Assets
Mở Assets Management ở cuối thanh điều hướng bên trái, nhấn Upload Assets và chọn file đã chuẩn bị đúng kích thước.
2
Dán URL vào mẫu thẻ
Mở mẫu thẻ, vào tab Apple Wallet → Images hoặc tab Google Wallet → Images. Dán URL ảnh vào từng vị trí: Logo, Strip, Background, Thumbnail, Icon (Apple) hoặc Logo, Wide Logo, Hero (Google). Với Apple, bạn dán bản nét nhất vào ô
@3x.3
Xem trước và xuất bản
Nhập dữ liệu mẫu trong tab Preview Data để xem thẻ hiển thị thế nào. Kiểm tra trên cả iPhone và Android nếu có thể, sau đó nhấn Publish.
Lỗi thường gặp
Ảnh bị mờ hoặc vỡ
Ảnh bị mờ hoặc vỡ
Ảnh gốc nhỏ hơn khung hiển thị. Bạn hãy xuất lại ảnh theo cột
@3x (Apple) hoặc đúng kích thước pixel (Google) trong bảng trên, rồi tải lên lại.Logo Google bị cắt mất góc
Logo Google bị cắt mất góc
Đây là hành vi mặc định vì Google cắt logo vuông thành hình tròn. Bạn hãy chừa lề 15% quanh logo, hoặc chuyển sang dùng wide logo bản ngang.
Ảnh strip đẹp trên iPhone nhưng bị cắt cạnh trên Android
Ảnh strip đẹp trên iPhone nhưng bị cắt cạnh trên Android
Strip của Apple rộng hơn hero của Google. Bạn hãy giữ nội dung quan trọng trong 80% giữa ảnh và để hai mép là nền trơn.
Logo bị chìm vào màu nền thẻ
Logo bị chìm vào màu nền thẻ
Logo PNG trong suốt hiển thị trực tiếp trên màu nền bạn chọn. Bạn hãy thử bản logo màu sáng hơn, hoặc đổi màu nền trong tab General để đủ tương phản.
Thẻ Apple báo lỗi chung sau khi đổi ảnh
Thẻ Apple báo lỗi chung sau khi đổi ảnh
Apple từ chối file ảnh sai kích thước mà không chỉ rõ file nào. Bạn hãy xuất lại đúng pixel trong bảng Apple Wallet và thử lại.
Đổi icon nhưng ngoài màn hình khóa chưa đổi
Đổi icon nhưng ngoài màn hình khóa chưa đổi
Apple lưu icon trong bộ nhớ đệm. Bạn hãy tắt hẳn ứng dụng Wallet rồi mở lại, hoặc khởi động lại thiết bị để thấy icon mới.
Checklist trước khi xuất bản
- Logo có bản ngang cho Apple, bản vuông chừa lề cho Google
- Strip và hero đúng tỉ lệ, nội dung quan trọng nằm giữa ảnh
- File PNG cho logo, JPG hoặc PNG cho strip và hero
- Ảnh đã nén, màu sRGB
- Đã xem trước trên đúng màu nền thẻ
- Đã kiểm tra bản xem trước trên cả Apple Wallet và Google Wallet