Hướng dẫn thực hành về biểu tượng ứng dụng Android: Giải thích về biểu tượng thích ứng (và cách tạo biểu tượng của bạn một cách chính xác)
Đó là một điều ngạc nhiên chung đối với những nhà phát triển Android lần đầu tiên: bạn đánh bóng một PNG hình vuông duy nhất cho biểu tượng ứng dụng của mình, xuất nó ở kích thước 512x512 gọn gàng và nó trông thật hoàn hảo trong trình chỉnh sửa hình ảnh của bạn. Sau đó, bạn cài đặt bản gỡ lỗi trên điện thoại Samsung và biểu tượng đột nhiên trông bị cắt và hơi lệch tâm, như thể một phần của logo đã bị cắt đi. Không có gì sai với chính tập tin đó. Vấn đề là một hình ảnh vuông sẽ không bao giờ tồn tại khi tiếp xúc với thế giới thực của các trình khởi chạy Android, mỗi hình ảnh sẽ cắt, tạo mặt nạ và định hình lại các biểu tượng một cách khác nhau. Nếu bạn chưa gặp phải vấn đề này thì việc bạn làm điều đó chỉ là vấn đề thời gian, vì vậy hãy cùng tìm hiểu những gì đang diễn ra bên dưới và cách thực hiện đúng ngay lần đầu tiên.
Tại sao một PNG hình vuông không còn đủ nữa
Trong những năm đầu tiên của Android, các biểu tượng ứng dụng trông giống hệt như: một PNG hình vuông (hoặc đôi khi có hình dạng tự do) mà mọi trình khởi chạy đều hiển thị nguyên trạng. Điều đó hoạt động tốt cho đến khi các nhà sản xuất bắt đầu tạo sự khác biệt cho điện thoại của họ về mặt hình ảnh và một trong những nơi dễ dàng nhất để làm điều đó là màn hình chính. Samsung muốn có các hình vuông tròn, một số giao diện OEM của Trung Quốc muốn có các cách xử lý góc khác nhau và Android gốc cuối cùng đã chuyển sang hình tròn. Đột nhiên, cùng một tệp biểu tượng trông khác biệt đáng kể và đôi khi còn tệ hơn rõ ràng, tùy thuộc vào điện thoại của ai.
Câu trả lời của Google, được giới thiệu cùng với Android 8.0 Oreo, chính là hệ thống biểu tượng thích ứng (Adaptive Icons). Thay vì cung cấp một hình dạng cố định, các nhà phát triển cung cấp tác phẩm nghệ thuật xếp lớp mà chính hệ điều hành che giấu thành bất kỳ hình dạng nào mà trình khởi chạy nhất định thích. Nhận dạng hình ảnh vẫn nhất quán; chỉ có hình bóng bên ngoài thay đổi.
Biểu tượng thích ứng chính xác là gì?
Biểu tượng thích ứng được tạo từ hai lớp riêng biệt, mỗi lớp chiếm một khung vẽ 108dp x 108dp: lớp nền và lớp nền trước. Android kết hợp cả hai lại với nhau rồi áp dụng bất kỳ hình dạng mặt nạ nào mà trình khởi chạy hiện tại sử dụng, cho dù đó là hình tròn, hình vuông tròn, hình giọt nước hay thứ gì đó hoàn toàn khác. Cấu trúc hai lớp cũng cho phép Android thêm các hiệu ứng chuyển động và thị sai tinh tế vì các lớp có thể dịch chuyển độc lập khi bạn chạm hoặc kéo biểu tượng.
Trong tài nguyên của ứng dụng, điều này thường được xác định thông qua tệp XML như mipmap-anydpi-v26/ic_launcher.xml, tệp này chỉ trỏ đến các đối tượng có thể vẽ ở nền và nền trước thay vì chứa chính dữ liệu pixel. ic_launcher.png phẳng truyền thống vẫn được giữ lại như một phương án dự phòng cho các thiết bị chạy Android 7.1 trở xuống, vốn hoàn toàn có trước hệ thống biểu tượng thích ứng.
Tại sao vùng an toàn lại quan trọng
Đây là phần khiến mọi người cảm thấy khó chịu nhất. Mặc dù khung vẽ cho mỗi lớp là 108dp x 108dp, nhưng chỉ có vòng tròn 66dp x 66dp bên trong, được căn giữa trong khung vẽ đó, được đảm bảo hiển thị bất kể hình dạng mặt nạ nào được áp dụng. Vùng bên trong này thường được gọi là vùng an toàn. Bất cứ thứ gì bên ngoài nó có thể được hiển thị trên mặt nạ hình tròn và sau đó đột ngột được cắt bớt trên mặt nạ hình tròn hoặc hình giọt nước hung hãn hơn hoặc ngược lại.
Đây chính xác là loại vấn đề xuất hiện khi logo được vẽ gần các cạnh của khung vẽ để tối đa hóa kích thước hình ảnh của nó: nó có thể trông hoàn hảo trên mặt nạ hình tròn nhưng bị cắt bớt không đều trên mặt nạ hình tròn của Samsung. Bản sửa lỗi không phải là thiết kế lại mà chỉ thu nhỏ tác phẩm nghệ thuật một chút để nội dung có ý nghĩa vẫn nằm trong vùng an toàn cho dù cuối cùng hình dạng nào được áp dụng.
Hình dạng trình khởi chạy bạn sẽ gặp
| Hình dạng | Bạn sẽ thấy nó ở đâu |
|---|---|
| Vòng tròn | Stock Android, Pixel launcher (mặc định từ lâu) |
| Hình tròn (hình vuông tròn) | Giao diện người dùng Samsung One và một số giao diện Android khác |
| Hình vuông tròn (siêu elip) | iOS, được hệ thống tự động áp dụng mà không có sự kiểm soát của nhà phát triển |
| Giọt nước mắt | Được cung cấp dưới dạng tùy chọn có thể lựa chọn trên một số phiên bản phần mềm của Samsung |
| Hình vuông với các góc mềm mại | Nhiều giao diện launcher khác của nhà sản xuất |
Điều rút ra thực tế là bạn không được chọn hình dạng nào trong số những hình dạng mà biểu tượng của bạn sẽ mặc. Người dùng trên các trình khởi chạy Android gốc thậm chí có thể chọn hình dạng ưa thích của họ từ menu cài đặt. Đòn bẩy thực sự duy nhất của bạn là đảm bảo bản thân tác phẩm nghệ thuật vẫn tồn tại một cách duyên dáng, đó chính xác là điều mà vùng an toàn cần đảm bảo.
Xây dựng tài sản: Kích thước và mật độ bạn cần
| Xô mật độ | Kích thước biểu tượng trình khởi chạy |
|---|---|
| mdpi | 48 x 48 pixel |
| hdpi | 72 x 72 pixel |
| xhdpi | 96 x 96 pixel |
| xxhdpi | 144 x 144 px |
| xxxhdpi | 192 x 192 px |
| Biểu tượng danh sách Cửa hàng Play | 512 x 512 px |
Nếu bạn cũng đang vận chuyển ứng dụng trên iOS, hãy thêm một bộ hoàn toàn khác vì yêu cầu biểu tượng App Store của Apple cao nhất là 1024x1024 và sử dụng định dạng hoàn toàn khác, không phân lớp và không có độ trong suốt nào cả.
Cách thủ công và sử dụng máy phát điện
Bạn hoàn toàn có thể tạo từng kích thước trong số này bằng tay trong trình chỉnh sửa hình ảnh hoặc thông qua Image Asset Studio tích hợp sẵn của Android Studio, xử lý tỷ lệ mật độ và xem trước mặt nạ một cách hợp lý cho một dự án. Điều này trở nên tẻ nhạt khi bạn đang duy trì một hệ thống thiết kế trên nhiều ứng dụng, cần kết hợp các bản xuất iOS từ cùng một tác phẩm nghệ thuật chính hoặc đơn giản là muốn có một cách nhanh chóng để kiểm tra kỹ cách thiết kế hoạt động trên mọi hình dạng trước khi thực hiện.
Tạo mọi kích thước từ một hình ảnh chính
Trình tạo biểu tượng ứng dụng của chúng tôi lấy một hình ảnh nguồn có độ phân giải cao và tạo ra bộ đầy đủ các nhóm mật độ Android, cấu trúc nền trước/nền của biểu tượng thích ứng và kích thước danh sách Cửa hàng Play, tất cả chỉ từ một lần tải lên, do đó, bạn không phải xuất và đổi tên hàng tá tệp theo cách thủ công.
Trích xuất biểu tượng từ APK hiện có
Đôi khi nhu cầu lại đi theo hướng ngược lại. Có thể bạn đã kế thừa một dự án mà không có tệp thiết kế ban đầu hoặc bạn muốn biết chính xác cách đối thủ cạnh tranh cấu trúc biểu tượng của họ trước khi thiết kế biểu tượng của riêng bạn hoặc bạn chỉ cần kéo biểu tượng ra khỏi APK đã tạo để sử dụng lại biểu tượng đó trong công cụ hoặc nội dung tiếp thị có liên quan. Vì APK thực sự là một kho lưu trữ có cấu trúc chứa tất cả tài nguyên của ứng dụng nên các tệp biểu tượng trình khởi chạy của nó hiện diện vật lý bên trong APK và có thể được trích xuất trực tiếp thay vì được xây dựng lại từ đầu.
Trình trích xuất biểu tượng của chúng tôi lấy chính xác các tệp này ra khỏi bất kỳ APK nào bạn tải lên, cung cấp cho bạn nội dung biểu tượng thô ở bất kỳ độ phân giải nào mà nhà phát triển ban đầu đã cung cấp, đây thường là cách nhanh nhất để khôi phục tệp nguồn bị mất hoặc nghiên cứu cách một ứng dụng khác tiếp cận vấn đề thiết kế tương tự.
Các lỗi biểu tượng phổ biến bị gắn cờ khi đánh giá
- Nướng trong phần đệm thêm hoặc giao diện người dùng chrome. Hiệu ứng đổ bóng, đường viền hoặc góc tròn được thêm thủ công bên trong hình ảnh sẽ xung đột với lớp che phủ của chính hệ thống và thường trông bị gấp đôi hoặc bị lệch.
- Sử dụng nền trắng tinh không có viền rõ ràng. Trên các trình khởi chạy có chủ đề ánh sáng, biểu tượng có thể gần như vô hình trên nền màn hình chính.
- Chi tiết quá tốt. Văn bản và đường nét phức tạp trông sắc nét ở 512px thường biến thành vết nhòe không thể đọc được khi thu nhỏ xuống 48px, đây là cách mà hầu hết người dùng nhìn thấy hàng ngày.
- Biểu tượng danh sách Cửa hàng Play không khớp với biểu tượng cài đặt. Người đánh giá và người dùng đều nhận thấy khi hai điều này không khớp và nó được coi là cẩu thả hoặc tệ hơn là đáng ngờ.
- Quên hoàn toàn dự phòng cũ. Nếu ứng dụng của bạn vẫn hỗ trợ các phiên bản Android trước 8.0, việc bỏ qua dự phòng PNG phẳng có thể khiến những người dùng đó có biểu tượng bị hỏng hoặc trông giống chung.
Kiểm tra biểu tượng của bạn trên nhiều hình dạng trước khi giao hàng
Trước khi hoàn thiện một biểu tượng, bạn nên xem trước biểu tượng đó dưới ít nhất một mặt nạ hình tròn và một mặt nạ hình tròn cạnh nhau, thay vì cho rằng nó sẽ dịch rõ ràng. Image Asset Studio của Android Studio bao gồm bản xem trước trực tiếp trên một số hình dạng trình khởi chạy vì lý do chính xác này và chỉ mất một phút để phát hiện sự cố vốn chỉ xuất hiện sau khi xuất bản, khi người dùng sử dụng hình dạng trình khởi chạy "sai" báo cáo lại rằng có điều gì đó không ổn.
Bài học chính
- Biểu tượng thích ứng sử dụng hai lớp, nền và nền trước, trên khung vẽ 108dp, hệ thống sẽ che dấu thành các hình dạng khác nhau trên mỗi trình khởi chạy.
- Only the inner 66dp safe zone is guaranteed visible across every mask shape; giữ tác phẩm nghệ thuật có ý nghĩa bên trong nó.
- Bạn vẫn cần biểu tượng kế thừa phẳng cho các thiết bị chạy Android 7.1 trở xuống.
- Trình tạo có thể tạo ra mọi mật độ cần thiết và kích thước danh sách Cửa hàng Play từ một hình ảnh chính, giúp tiết kiệm đáng kể công việc xuất thủ công.
- Các biểu tượng có thể được trích xuất trực tiếp từ APK hiện có khi tệp nguồn bị mất hoặc bạn cần nghiên cứu nội dung của ứng dụng khác.
Câu Hỏi Thường Gặp (FAQ)
Kích thước pixel thực tế cần thiết cho biểu tượng danh sách Cửa hàng Play là bao nhiêu?
512x512 pixel, PNG 32 bit với kênh alpha. Điều này tách biệt với kích thước biểu tượng trình khởi chạy được gói bên trong APK.
Lớp nền của biểu tượng thích ứng của tôi có cần phải có màu đồng nhất không?
Không nhất thiết phải là màu phẳng nhưng nhìn chung nó phải mờ và đơn giản vì nó có thể bị dịch chuyển, thu nhỏ hoặc bị che theo những cách mà bạn không hoàn toàn kiểm soát được. Nền phức tạp hoặc trong suốt có xu hướng trông không nhất quán trên các trình khởi chạy.
Tôi có thể sử dụng lại trực tiếp thiết kế biểu tượng thích ứng Android của mình cho iOS không?
Không trực tiếp. iOS sử dụng một hình ảnh vuông phẳng duy nhất với hệ thống làm tròn các góc thay vì các lớp riêng biệt, do đó, bạn thường xuất phiên bản phẳng đơn giản của cùng một tác phẩm nghệ thuật cho iOS.
Tại sao biểu tượng của tôi trông đẹp trên điện thoại nhưng lại bị mờ trên danh sách Cửa hàng Play?
Điều này thường xảy ra khi biểu tượng danh sách được phóng to từ một hình ảnh nguồn nhỏ. Luôn bắt đầu từ tệp chính có kích thước tối thiểu 1024x1024 pixel và xuất từng kích thước được yêu cầu xuống từ tệp đó.
Điều gì xảy ra nếu tôi bỏ qua dự phòng biểu tượng cũ cho các phiên bản Android cũ hơn?
Các thiết bị chạy Android 7.1 trở xuống không hỗ trợ biểu tượng thích ứng có thể quay lại biểu tượng hệ thống chung hoặc hiển thị biểu tượng của bạn không chính xác. Bạn chỉ có thể bỏ qua nếu phiên bản Android được hỗ trợ tối thiểu của ứng dụng là 8.0 trở lên.
Bạn không cần kiến thức nền tảng về lý thuyết thiết kế cho bất kỳ điều nào trong số này, chỉ cần nhận thức được rằng biểu tượng của bạn sẽ được định hình lại theo những cách mà bạn không kiểm soát được thời điểm nó rời khỏi tay bạn. Thiết kế cho vùng an toàn, duy trì dự phòng cũ, tạo mọi kích thước cần thiết từ một tệp chính sạch và biểu tượng của bạn sẽ giữ nguyên bất kể nó chạy trên trình khởi chạy nào.