Biểu tượng ứng dụng thích ứng với nền tảng.
Biểu tượng che mờ được là gì?
Nếu đã cài đặt một Ứng dụng web tiến bộ trên điện thoại Android gần đây, bạn có thể thấy biểu tượng xuất hiện trên nền trắng. Android Oreo đã ra mắt các biểu tượng thích ứng, hiển thị biểu tượng ứng dụng ở nhiều hình dạng trên các kiểu thiết bị. Các biểu tượng không tuân theo định dạng mới này sẽ có nền trắng.
Biểu tượng có thể che là định dạng biểu tượng mới mang lại cho bạn nhiều quyền kiểm soát hơn và cho phép Ứng dụng web tiến bộ dùng các biểu tượng thích ứng. Nếu bạn cung cấp một biểu tượng có thể che khuất, thì biểu tượng của bạn có thể lấp đầy toàn bộ hình dạng và trông đẹp mắt trên tất cả các thiết bị Android. Firefox và Chrome gần đây đã thêm tính năng hỗ trợ cho định dạng mới này và bạn có thể áp dụng định dạng này trong các ứng dụng của mình.
Các biểu tượng hiện tại của tôi đã sẵn sàng chưa?
Vì các biểu tượng có thể che khuất cần hỗ trợ nhiều hình dạng, nên bạn hãy cung cấp hình ảnh mờ có một số khoảng đệm mà trình duyệt có thể cắt theo hình dạng và kích thước bắt buộc. Tốt nhất là bạn không nên dựa vào bất kỳ hình dạng cụ thể nào, vì hình dạng cơ bản nhất sẽ khác nhau tuỳ theo trình duyệt và nền tảng.
Thật may là có một "vùng an toàn tối thiểu" được xác định rõ ràng và được chuẩn hoá mà tất cả nền tảng đều tôn trọng. Các phần quan trọng của biểu tượng, chẳng hạn như biểu trưng, phải nằm trong một vùng hình tròn ở giữa biểu tượng với bán kính bằng 40% chiều rộng của biểu tượng. Cạnh 10% bên ngoài có thể bị cắt.
Bạn có thể dùng Công cụ của Chrome cho nhà phát triển để kiểm tra xem phần nào của biểu tượng nằm trong vùng an toàn. Khi Ứng dụng web tiến bộ mở, hãy chạy Công cụ cho nhà phát triển và chuyển đến bảng điều khiển Ứng dụng. Trong phần Biểu tượng, bạn có thể chọn Chỉ hiển thị vùng an toàn tối thiểu cho các biểu tượng có thể che giấu. Các biểu tượng sẽ được cắt bớt để chỉ hiển thị vùng an toàn. Nếu biểu trưng của bạn xuất hiện trong vùng an toàn này thì bạn đã sẵn sàng.
Để kiểm thử biểu tượng có thể che giấu với nhiều hình dạng Android, hãy sử dụng công cụ Maskable.app do hổ tạo. Mở một biểu tượng, sau đó Maskable.app sẽ cho phép bạn thử nhiều hình dạng và kích thước, đồng thời chia sẻ bản xem trước với những người khác trong nhóm của mình.
Làm cách nào để sử dụng biểu tượng có thể che khuất?
Nếu muốn tạo biểu tượng có thể che dựa trên biểu tượng hiện có, bạn có thể sử dụng Maskable.app Editor (Trình chỉnh sửa mặt nạ). Tải biểu tượng lên, điều chỉnh màu sắc và kích thước, sau đó xuất hình ảnh.
Sau khi tạo một biểu tượng có thể che giấu và thử nghiệm biểu tượng đó trong Công cụ cho nhà phát triển, bạn sẽ cần cập nhật tệp kê khai ứng dụng web để trỏ đến nội dung mới. Tệp kê khai ứng dụng web cung cấp thông tin về ứng dụng web của bạn trong một tệp JSON và bao gồm một mảng icons.
Để thêm các biểu tượng có thể che giấu, trường purpose sẽ cho trình duyệt biết cách sử dụng biểu tượng. Theo mặc định, các biểu tượng sẽ có mục đích là "any". Các biểu tượng này sẽ được đổi kích thước trên nền trắng trên Android.
{
…
"icons": [
…
{
"src": "path/to/regular_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any"
},
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- New property value `"maskable"`
},
…
],
…
}
Các biểu tượng có thể che phủ phải sử dụng một giá trị khác cho purpose: "maskable". Việc này cho biết rằng hình ảnh được dùng với các mặt nạ biểu tượng, giúp bạn có nhiều quyền kiểm soát hơn đối với kết quả.
Bằng cách này, các biểu tượng của bạn sẽ không có nền trắng. Bạn cũng có thể chỉ định nhiều mục đích được phân tách bằng dấu cách (ví dụ: "any maskable") nếu muốn sử dụng biểu tượng có thể che giấu trên các thiết bị khác.
Bằng cách này, bạn có thể tiếp tục và tạo các biểu tượng che mờ của riêng mình, đảm bảo ứng dụng trông đẹp mắt khi hiển thị tràn viền (và phù hợp với giá trị của ứng dụng, từ hình tròn này đến hình tròn, hình bầu dục với hình bầu dục 😄).
Xác nhận
Bài viết này đã được Joe Medley đánh giá.