Bảng màu cho ảnh chụp màn hình App Store
Hầu hết bảng màu ảnh chụp màn hình App Store đều thất bại theo cùng một cách: trông đẹp trên màn hình 27 inch và trở thành mớ hỗn độn ở kích thước App Store thực sự hiển thị. Carousel hiển thị ở độ phân giải đầy đủ trên trang sản phẩm nhưng ở chiều rộng hình thu nhỏ trong kết quả tìm kiếm và trong các mục "More like this". Nếu bảng màu của bạn chỉ hoạt động ở một trong hai kích thước đó, bạn sẽ mất tỷ lệ chuyển đổi ở kích thước kia.
Ba ngữ cảnh xem
Hãy xem đây là ba ràng buộc thiết kế riêng biệt. Bảng màu thắng ở một ngữ cảnh có thể thua ở ngữ cảnh khác.
- Kích thước đầy đủ (1290 × 2796 trên iPhone). Hiển thị trên trang sản phẩm. Nơi người dùng đến sau khi nhấn vào. Các chuyển màu gradient tinh tế, văn bản mịn hơn, và màu sắc phân lớp phức tạp đều đọc được ở đây. Hầu hết nhà thiết kế chỉ kiểm tra ở kích thước này.
- Thumbnail tìm kiếm (~300 × 650). Ba bảng carousel đầu tiên được hiển thị cạnh icon ứng dụng cạnh tranh trong tìm kiếm App Store. Chi tiết mịn biến mất. Các khối màu tương phản cao đọc được; gradient tinh tế bị phẳng.
- Ngữ cảnh lân cận. Ảnh chụp màn hình của bạn không bao giờ xuất hiện riêng lẻ trong tìm kiếm. Bảy ứng dụng xung quanh có bảng màu riêng của họ. Nếu mọi người trong danh mục của bạn dùng tông ấm và bạn cũng dùng tông ấm, ảnh chụp màn hình của bạn sẽ hòa tan vào nền.
Quy tắc năm màu
Năm màu là giới hạn thô. Một màu nền chủ đạo (hoặc gradient giữa hai màu), một màu chữ chính, một màu nhấn cho điểm nhấn, cộng với bất kỳ màu nào đến từ ảnh chụp màn hình thực của ứng dụng. Thêm màu thứ sáu thường có nghĩa là mất đi một màu ở chỗ khác, không phải thêm vào.
Lý do không phải thẩm mỹ — mà là vì hình thu nhỏ nén thông tin hình ảnh rất mạnh, và bảng màu có quá nhiều màu trở thành mảng màu be nhạt nhòa. Bốn đến năm màu là dải mà mỗi màu vẫn còn rõ ràng ở 200px.
Độ tương phản: WCAG AA không phải tùy chọn
Văn bản chú thích trên nền bảng phải đạt WCAG AA (4,5:1 cho văn bản nội dung, 3:1 cho văn bản lớn 24pt+). Không phải vì Apple kiểm tra — họ không — mà vì ở kích thước hình thu nhỏ, bất cứ điều gì dưới AA trở nên không thể đọc được. Dùng công cụ kiểm tra độ tương phản trên màu chú thích cuối cùng so với màu nền cuối cùng trước khi xuất.
Lỗi thường gặp: văn bản xám đậm trên gradient xám đậm hơi sáng hơn. Trông tinh tế trong Figma. Biến mất hoàn toàn ở chiều rộng hình thu nhỏ.
Quy ước danh mục là điểm xuất phát, không phải quy tắc
Xem 20 ứng dụng hàng đầu trong danh mục App Store của bạn. Ghi lại màu bảng màu chủ đạo. Đó là quy ước danh mục — bảng màu người dùng liên kết với "ứng dụng đáng tin cậy trong danh mục này". Bạn có thể theo nó (rủi ro thấp, khác biệt hóa thấp) hoặc cố tình phá vỡ nó (rủi ro cao, khác biệt hóa cao nếu thành công).
Phá vỡ quy ước hiệu quả khi bạn có lý do cụ thể. Danh mục của Notion (năng suất) thiên về pastel sáng năm 2022; Notion đi theo gần đơn sắc với sắc ấm nhẹ và trông nghiêm túc hơn. Danh mục của Headspace (chăm sóc sức khỏe tâm thần) đông đúc với pastel mềm; gradient cam đậm của Headspace nổi bật mà không hung hăng. Theo-rồi-phá là trình tự an toàn: theo cho lần ra mắt sản phẩm đầu tiên, chỉ phá sau khi bạn có dữ liệu cài đặt để so sánh.
Kiểm tra "lân cận trong tìm kiếm"
Trước khi xuất, hãy làm thế này: tìm kiếm App Store với hai hoặc ba từ khóa mà ứng dụng của bạn xếp hạng (hoặc muốn xếp hạng). Xem dải ảnh chụp màn hình bên dưới ứng dụng hàng đầu cho những từ khóa đó. Bảng màu bạn thiết kế có nổi bật so với các ứng dụng xung quanh không, hay hòa tan cùng chúng?
Đây là bài kiểm tra ba mươi giây và hầu hết đội ngũ bỏ qua. Bảng màu ảnh chụp màn hình trông độc đáo khi đứng riêng có thể lại là cùng gradient xanh-tím như năm đối thủ phía trên và phía dưới bạn trong tìm kiếm. Cách khắc phục thường chỉ là đổi một màu nhấn.
Tối, sáng, hay không phải cả hai
Chọn một vị thế rõ ràng: nền tối chủ đạo, nền sáng chủ đạo, hoặc một họ gradient nhất quán trên các bảng. Pha trộn bảng tối và sáng trong một carousel là lỗi thường gặp nhất — trông như thiết kế không có người đạo diễn.
Xem dark mode vs light mode để biết khi nào mỗi chế độ thắng theo danh mục. Tóm tắt: tối thắng trong game, âm nhạc, ảnh/video, AI; sáng thắng trong năng suất, giáo dục, chăm sóc sức khỏe; còn lại là tung đồng xu và thương hiệu quyết định.
Màu sắc và bản địa hóa
Màu sắc mang ý nghĩa khác nhau ở các vùng. Màu đỏ mang ý nghĩa tốt đẹp ở các thị trường nói tiếng Trung (thịnh vượng), mang ý nghĩa tiêu cực hơn ở phần lớn châu Âu. Màu trắng gợi lên tang lễ ở phần lớn Đông Á. Xanh lá tươi là "bật" ở một số nơi và "ghen tuông" ở nơi khác. Đối với hầu hết ứng dụng, những sự thay đổi này quá tinh tế để vượt qua tính nhất quán thương hiệu — chọn một bảng màu và xuất ra toàn cầu. Chỉ lo về bảng màu theo locale khi bạn là thương hiệu mà biểu tượng màu sắc là phần quan trọng trong định vị (sang trọng, chăm sóc sức khỏe, tài chính) và bạn có dữ liệu để hành động.
Việc cần làm tuần này
- Kiểm tra ảnh chụp màn hình hiện tại của bạn ở chiều rộng 200px. Bất cứ điều gì không đọc được ở kích thước đó cần thay đổi.
- Xác minh độ tương phản WCAG AA trên mọi chú thích so với nền bảng.
- Tìm kiếm ba từ khóa hàng đầu và chụp ảnh ngữ cảnh xung quanh. Bảng màu của bạn có nổi bật không?
- Nếu bạn đang xuất thiết kế mới, giới hạn tối đa năm màu. Thêm màu thứ sáu nghĩa là bỏ một màu khác.