Thiết kế và xem trước biểu tượng ứng dụng

1. Giới thiệu

Lần cập nhật gần đây nhất: Ngày 4 tháng 8 năm 2022

Kể từ Android 13, người dùng có thể thiết lập giao diện cho biểu tượng trình chạy thích ứng. Với tính năng này, các biểu tượng ứng dụng trong trình chạy Android được hỗ trợ sẽ được phủ màu để kế thừa màu của hình nền và các giao diện khác mà người dùng đã chọn.

Dễ dàng tạo tất cả thành phần hệ thống cần thiết cho ứng dụng Android của bạn, bao gồm cả biểu tượng thích ứng mới.

Kiến thức bạn sẽ học được

• Hiểu rõ các loại biểu tượng ứng dụng và mẹo thiết kế cho từng loại.
• Cách sử dụng mẫu Figma của trình chạy Android.
• Cách sử dụng trình tạo thành phần của Android Studio.
• Cách xem trước biểu tượng trình chạy bằng trình mô phỏng Android Studio.

Điều kiện tiên quyết

• Có kiến thức cơ bản về Figma
• Không bắt buộc: Hình minh hoạ biểu tượng ứng dụng (nền trước, nền sau và đơn sắc)

Bạn cần có

• Một tài khoản Figma
• Một tệp Figma Designlab
• Không bắt buộc: Máy tính đã cài đặt Android Studio

2. Bắt đầu

Thiết lập

Để bắt đầu, bạn cần truy cập vào tệp Figma biểu tượng ứng dụng Android.

Trước tiên, hãy đăng nhập vào Figma hoặc tạo một tài khoản.

Sao chép qua trang Cộng đồng Figma

Chuyển đến tệp mẫu trình chạy Android hoặc tìm kiếm từ khoá Migrating to Variable fonts (Di chuyển sang phông chữ có thể thay đổi) trong Cộng đồng Figma. Nhấp vào Lấy bản sao ở góc trên cùng bên phải để sao chép tệp này vào các tệp của bạn.

Sử dụng mẫu

Mẫu biểu tượng Android bao gồm 2 trang:

• Trang bìa trình bày ngắn gọn các khái niệm liên quan và cách sử dụng mẫu.
• Trang mẫu có mọi thứ bạn cần để tạo các thành phần bắt buộc,được chia thành 3 khung (Màu sắc, Hình dạng, Cửa hàng Play).

Lưu ý: Trong Bảng điều khiển lớp ở bên trái, hầu hết các lớp và nhóm đều bị khoá; bạn nên giữ nguyên trạng thái khoá này. (Bạn có thể đặt hình minh hoạ trong các nhóm hình minh hoạ chưa khoá.)

Nhưng trước khi bắt đầu tạo tài sản, hãy xem những gì chúng ta sẽ tạo...

Xuất

Nếu bỏ qua bước này, bạn không cần phải đặt chế độ xuất riêng lẻ. Nếu không chọn gì, hãy chọn Xuất trong trình đơn Tệp. Thao tác này sẽ xuất tất cả biểu tượng và thành phần cửa hàng.

3. Biểu tượng hệ thống Android

Biểu tượng trình khởi chạy

Biểu tượng trình chạy (hay biểu tượng ứng dụng) đóng vai trò là một phần thiết yếu trong trải nghiệm khởi chạy ứng dụng của bạn. Biểu tượng trình chạy xuất hiện trên màn hình chính dưới dạng điểm truy cập vào ứng dụng.

Hình dạng thích ứng

Biểu tượng thích ứng (hay AdaptiveIconDrawable) có thể hiển thị theo nhiều cách tuỳ thuộc vào khả năng của từng thiết bị và giao diện của người dùng. Biểu tượng thích ứng chủ yếu được dùng cho trình chạy trên màn hình chính, nhưng cũng có thể được sử dụng trong các phím tắt, ứng dụng Cài đặt, hộp thoại chia sẻ và màn hình tổng quan.

Biểu tượng thích ứng có thể hiển thị nhiều hình dạng trên nhiều mẫu thiết bị. Ví dụ: biểu tượng này có thể hiển thị hình tròn trên một thiết bị OEM và hiển thị hình vuông tròn trên một thiết bị khác. Mỗi nhà sản xuất thiết bị gốc phải cung cấp một mặt nạ mà hệ thống dùng để hiển thị tất cả biểu tượng thích ứng có cùng hình dạng.

Khả năng thích ứng với hình dạng cũng cho phép hệ thống áp dụng nhiều hiệu ứng động khi có lượt tương tác của người dùng.

Màu thích ứng

Giờ đây, biểu tượng thích ứng có thể dùng màu động để cho phép tạo biểu tượng ứng dụng theo chủ đề được cá nhân hoá.

Nếu người dùng đã bật tính năng biểu tượng ứng dụng theo giao diện (nói cách khác, đã bật nút biểu tượng Theo giao diện trong phần cài đặt hệ thống) và trình chạy có hỗ trợ tính năng này, thì hệ thống sẽ sử dụng màu của hình nền và giao diện mà người dùng chọn để xác định sắc thái màu.

Tương tự như biểu tượng thích ứng với hình dạng, biểu tượng thích ứng về màu sắc bao gồm nền trước và nền sau. Bạn chỉ cần cung cấp một thành phần biểu tượng đơn sắc cho nền trước, hệ thống sẽ xử lý nền sau và màu sắc bằng bảng phối màu đã trích xuất.

Bạn cũng có thể dùng cùng một biểu tượng đơn sắc cho biểu tượng thông báo.

Cũ

Lưu ý

"Biểu tượng cũ được cung cấp để hỗ trợ các phiên bản Android trước 7.0.

Bạn nên thêm các biểu tượng cũ để hỗ trợ những thiết bị chạy các phiên bản Android cũ hoặc không hỗ trợ các tính năng Thích ứng (trước phiên bản 8.0).

Chúng sẽ không có tài nguyên nền trước và nền sau, đồng thời có thể có hình dạng tuỳ ý. Nếu bạn đang sử dụng mẫu được cung cấp, thì hình minh hoạ cuối cùng của hình dạng thích ứng sẽ được xuất ở kích thước cần thiết cho biểu tượng cũ.

Biểu tượng thông báo

Thông báo là một tin nhắn mà Android hiển thị bên ngoài giao diện người dùng của ứng dụng để cung cấp cho người dùng lời nhắc, thông tin liên lạc từ những người khác hoặc thông tin kịp thời khác từ ứng dụng. Hệ thống hiển thị thông báo ở nhiều vị trí và định dạng, chẳng hạn như biểu tượng trong thanh trạng thái, mục nhập có thông tin chi tiết hơn trong ngăn thông báo, huy hiệu trên biểu tượng của ứng dụng và trên các thiết bị đeo được ghép nối.

Hình minh hoạ trên Cửa hàng Play

Bạn có thể dùng ảnh đầu trang, ảnh chụp màn hình, nội dung mô tả ngắn và video để làm nổi bật và quảng bá ứng dụng của mình trên Google Play cũng như trên các kênh quảng bá khác của Google.

Biểu tượng ứng dụng không thay thế biểu tượng trình chạy của ứng dụng mà phải là phiên bản có độ trung thực và độ phân giải cao hơn.

Tương tự như biểu tượng trình chạy, hình minh hoạ có thể chiếm toàn bộ không gian nội dung hoặc bạn có thể thiết kế và bố trí các thành phần minh hoạ (chẳng hạn như biểu trưng) vào lưới keyline.

Bạn phải cung cấp biểu tượng ứng dụng hình vuông có kích thước 512x512 px để có thể xuất bản trang thông tin trên Cửa hàng Play. Nếu bạn đang sử dụng mẫu biểu tượng ứng dụng Android, thì mẫu này sẽ được cung cấp khi xuất bằng hình minh hoạ Adaptive Shape.

4. Các phương pháp hay nhất về thiết kế

Biểu tượng trình chạy sẽ chạy ứng dụng cho người dùng. Là một mục nhập vào ứng dụng của bạn, chúng phải dễ nhận biết và dễ đọc. Sau đây là một số phương pháp hay nhất để đảm bảo những đặc điểm này trong biểu tượng trình chạy của bạn.

Đảm bảo tính đơn giản cho hình minh hoạ. Tránh sử dụng nhiều lớp, nhiều hiệu ứng và văn bản. Những chi tiết này sẽ bị mất hoặc khó nhìn thấy ở kích thước nhỏ.

Tránh các hình dạng phức tạp. Quy định này áp dụng với cả biểu trưng. Nếu có thể, hãy sử dụng một biểu trưng đơn giản hoặc cân nhắc sử dụng biểu tượng mà người dùng liên kết với ứng dụng của bạn. Hình dạng dễ đọc và riêng biệt giúp tạo sự thống nhất để người dùng dễ dàng nhận ra ứng dụng của bạn trong nhiều bối cảnh (màu sắc thích ứng và thông báo).

Sử dụng lưới. Tận dụng lưới hoặc đường viền chính để đảm bảo hình minh hoạ ở nền trước sẽ hoạt động khi bị cắt, kể cả hình minh hoạ tràn lề.

Cân nhắc độ tương phản. Đối với biểu tượng có hình dạng thích ứng và biểu tượng cũ, hãy đảm bảo nền trước và nền sau của biểu tượng có độ tương phản dễ đọc. Tránh sử dụng hiệu ứng đổ bóng quá mức vì có thể bị nhầm lẫn với bóng đổ của hệ thống.

Giữ hình minh hoạ trong vùng an toàn. Giữ các thành phần trên nền trước trong phạm vi 72x72 px (trừ phi bạn đang sử dụng chế độ tràn viền). Giữ hình nền ở kích thước 108x108 px. Lưu ý: Khung hình minh hoạ của mẫu biểu tượng lớn hơn 72x72 px để bạn có thể tạo hình minh hoạ biểu tượng. Các thành phần sẽ được đổi kích thước để phù hợp với quy cách.

Định dạng vectơ. Hãy thử sử dụng ảnh minh hoạ ở định dạng vectơ (chẳng hạn như tệp SVG, AI, PDF và EPS) thay vì định dạng raster (chẳng hạn như tệp PNG, JPG và GIF). Điều này giúp đảm bảo tác phẩm nghệ thuật của bạn tương thích với các tính năng mới và dễ chỉnh sửa hơn.

Định dạng vectơ và định dạng đường quét là gì?

Vectơ là một định dạng đồ hoạ không tổn hao bao gồm các điểm, đường thẳng, đường cong và vùng tô màu dựa trên công thức. So với định dạng raster (định dạng bitmap dựa trên việc tạo hình ảnh trên một lưới pixel), đồ hoạ vectơ không bị giảm chất lượng nếu được điều chỉnh tỷ lệ.

5. Màu thích ứng và biểu tượng thông báo

Giờ đến lượt bạn tạo biểu tượng hệ thống Android của riêng mình.

1. Tìm tệp Figma về biểu tượng ứng dụng Android.
2. Trong tệp này, hãy tìm khung Màu thích ứng. Hãy tìm trong bảng điều khiển lớp bên trái để tìm Adaptive color (Màu thích ứng) > Components (Thành phần) > art (hình ảnh) > Icon artwork area (Khu vực hình ảnh biểu tượng) > Themed Icon art < add your icon (Hình ảnh biểu tượng theo chủ đề < thêm biểu tượng của bạn). Nếu bạn đã chuẩn bị sẵn một biểu tượng đơn sắc, hãy sao chép biểu tượng đó vào đây để thay thế biểu tượng bugdroid mẫu và chuyển đến bước 6.
3. Nếu bạn không có biểu tượng đơn sắc, hãy bắt đầu bằng một biểu trưng hoặc biểu tượng liên quan đến ứng dụng của bạn. Hãy tham khảo các mẹo thiết kế để cập nhật biểu tượng. Trước tiên, hãy đơn giản hoá và tránh các hình dạng phức tạp. Ví dụ: hình minh hoạ được dùng trong ứng dụng này được đơn giản hoá với các hình dạng lá ít phức tạp hơn. Bóng và chi tiết đường kẻ được mô phỏng bằng khoảng trắng.
4. Bây giờ, hãy cập nhật kích thước bằng cách sử dụng lưới đường viền chính. Ở đây, chúng tôi đã đặt chế độ đổi kích thước thành Scale (Tỷ lệ) và đảm bảo hình minh hoạ nằm trong vùng an toàn của lớp nền trước. Mẫu này được thiết lập với hình minh hoạ ở tỷ lệ 4x và tự động đổi kích thước để xuất, vì vậy, bạn có thể thiết kế các biểu tượng ở quy mô lớn hơn.
5. Tệp này được thiết lập để hoạt động với Material Theme Builder nhằm giúp bạn xem trước màu động. Kết nối kiểu màu biểu tượng nền trước với On-surface-variant.
6. Giờ đây, khi mở Material Theme Builder từ Bảng điều khiển trình bổ trợ,bạn có thể xáo trộn màu nguồn hoặc thêm hình ảnh để cập nhật màu bằng màu nguồn đã trích xuất.
7. Hình ảnh này sẽ trông như thế nào ở các độ phân giải khác nhau hoặc trên màn hình chính? Mẫu này được thiết lập sao cho tác phẩm nghệ thuật được đặt trong khung tác phẩm nghệ thuật sẽ xuất hiện trong nhiều bối cảnh xem trước.
8. Hệ thống sử dụng biểu tượng đơn sắc làm thông báo và hiển thị dưới dạng đó trong bản xem trước.

Nhiều biểu tượng và hình dạng riêng biệt

Mặc dù ứng dụng của bạn có thể dùng chung hình minh hoạ biểu tượng đơn sắc cho thông báo, nhưng bạn có thể dùng các hình minh hoạ khác nhau để truyền đạt thông tin rõ ràng hơn.

Nếu bạn có nhiều ứng dụng, hãy cân nhắc việc phân biệt bằng các hình dạng khác nhau, chỉ sử dụng màu sắc là không thể truy cập.

6. Biểu tượng cũ và hình dạng thích ứng

Giờ đây, chúng ta sẽ tạo hình dạng thích ứng và biểu tượng cũ để đảm bảo biểu tượng được hỗ trợ rộng rãi.

1. Trong tệp này, hãy tìm khung Hình dạng. Tìm trong bảng điều khiển lớp bên trái để tìm Nền biểu tượng < thêm biểu tượng của bạn*. Nếu bạn đã có sẵn một biểu tượng, hãy sao chép biểu tượng đó vào đây để thay thế biểu tượng bugdroid mẫu và chuyển sang bước 5.* Nếu bạn không có biểu tượng, hãy bắt đầu bằng một biểu trưng hoặc biểu tượng liên quan đến ứng dụng của bạn hoặc sử dụng lại biểu tượng đơn sắc.
2. Cập nhật biểu tượng trên nền trước, lưu ý đến các phương pháp hay nhất về biểu tượng. Ở đây, tôi đã khôi phục màu sắc minh hoạ ban đầu nhưng vẫn giữ các chi tiết ở mức tối thiểu.
3. Bây giờ, hãy cập nhật kích thước bằng cách sử dụng lưới đường viền chính. Ở đây, chúng ta đã đặt chế độ đổi kích thước thành Scale (Tỷ lệ) và đảm bảo rằng hình minh hoạ nằm trong vùng an toàn của nền trước.
4. Biểu tượng ứng dụng có hình dạng thích ứng cũng có thể có một nền riêng biệt. Điều này cho phép các lớp của biểu tượng được cắt một cách an toàn và mang lại hiệu ứng chuyển động tinh tế khi tương tác. Bạn cũng có thể sử dụng và xác định nền màu trơn trong Android Studio.
5. Bản xem trước sẽ cập nhật để cho biết giao diện của nền trước và nền sau khi kết hợp với nhau, trên màn hình chính, các hình dạng bị cắt khác nhau và dưới dạng biểu tượng cũ.

Bạn có thể cập nhật hình dạng dùng để cắt trong bản xem trước màn hình chính bằng cách chọn biểu tượng và thay đổi lựa chọn về biến thể hình dạng.

Vươn xa hơn

Vì biểu tượng có hình dạng thích ứng bao gồm một lớp nền trước và một lớp nền riêng biệt, nên điều này mang đến cơ hội tạo ra nhiều hiệu ứng biểu tượng thú vị hơn, chẳng hạn như sử dụng nền trước làm mặt nạ cho lớp nền hoặc nền tràn lề với hình minh hoạ nền trước riêng biệt.

Khắc phục sự cố

• Đặt các quy tắc ràng buộc cho hình minh hoạ thành Scale (Tỷ lệ). Nếu không, việc xem trước và xuất biểu tượng có thể dẫn đến vị trí hoặc kích thước không chính xác.
• Đảm bảo không có mục nào được chọn khi xuất.

7. Xuất

Tuyệt vời! Giờ đây, bạn đã cập nhật mẫu bằng biểu tượng ứng dụng của mình! Hãy xuất các thành phần này để triển khai.

1. Đảm bảo bạn không chọn đối tượng nào trên canvas.
2. Chuyển đến trình đơn Figma > Tệp > Xuất (Shift + Cmd + E).
3. Trong trình đơn xuất, hãy xác nhận xuất. Thao tác này sẽ tải các thành phần xuống từ mẫu.

Nội dung trong tệp xuất

Các thành phần đã xuất có tất cả các tệp cần thiết để triển khai biểu tượng ứng dụng, như sau

• Figma xuất biểu tượng đơn sắc ở nền trước cho màu thích ứng dưới dạng tệp SVG, cùng với cả nền trước và nền sau cho biểu tượng có hình dạng thích ứng.
• Figma cũng cung cấp các biểu tượng cũ trong nhiều thư mục mipmap được sắp xếp theo độ phân giải.

Vậy là xong! Biểu tượng của bạn đã sẵn sàng để gửi cho nhóm phát triển.

Ngoài ra, nếu bạn muốn xem trước các biểu tượng trong Android Studio và chuyển đổi những SVG đó thành định dạng tài sản cuối cùng, hãy chuyển sang bước tiếp theo.

Độ phân giải trên Android

Các thành phần (hoặc tài nguyên) Android được nhóm thành nhiều độ phân giải để phân phối thành phần phù hợp cho từng độ phân giải thiết bị mục tiêu.

mdpi [1.0 x mdpi]

hdpi [1,5 x hdpi]

xhdpi [2.0 x xhdpi]

xxhdpi [3.0 x xxhdpi]

xxxhdpi [4,0 x xxxhdpi]

anydpi [có thể dùng cho mọi độ phân giải]

Sử dụng mật độ cơ sở (mdpi) để thiết kế giao diện người dùng, bao gồm cả thành phần.

8. Sử dụng Image Asset Studio

Bắt đầu dùng Android Studio

1. Tải xuống và cài đặt Android Studio.
2. Mở Android Studio.

Android Studio sẽ nhắc bạn chọn các lựa chọn để bắt đầu một dự án mới hoặc chọn các dự án hiện có.

3. Chọn một dự án mới. Các màn hình sau đây sẽ hướng dẫn bạn thiết lập dự án mới.
4. Chọn một mẫu bất kỳ trong số các mẫu bắt đầu, vì chúng ta sẽ chỉ xem xét các biểu tượng khởi chạy.
5. Sau đó, hãy đặt tên cho dự án mới rồi chọn Hoàn tất. Dự án mới sẽ mất vài phút để tạo.

Sử dụng Image Asset Studio

Giờ đây, chúng ta có thể thêm các biểu tượng vào dự án bằng một công cụ hữu ích là Asset Studio.

1. Để truy cập vào công cụ này, hãy chọn File menu > New > Image Asset (Trình đơn Tệp > Mới > Thành phần hình ảnh).
2. Khi Image Asset Studio mở ra, hãy thêm lớp nền trước bằng cách chọn biểu tượng thư mục trong Path (Đường dẫn). Chọn tệp SVG đã xuất làm drawable-anydpi/ic_launcher.svg
3. Chọn thẻ Lớp nền rồi chọn lớp nền đã xuất. Hoặc chọn Loại tài sản: Màu để thay vào đó có nền trình chạy là một màu đồng nhất.
4. Quay lại lớp nền trước và kiểm tra kỹ để đảm bảo hình ảnh nằm trong vùng an toàn. Thay đổi kích thước biểu tượng sao cho phù hợp nhất về mặt thị giác.
5. Khi hoàn tất, hãy nhấp vào Next (Tiếp theo). Thao tác này sẽ hỏi vị trí đặt các biểu tượng trong dự án của bạn (để nguyên giá trị mặc định hoặc chuyển sang Main (Chính)). Sau đó, nhấp vào Kết thúc. Bạn có thể tìm thấy các thành phần của trình chạy trong res > drawable. Khi nhấp đúp, bản xem trước của đồ hoạ vectơ cuối cùng sẽ mở ra.

6. Sao chép và dán thành phần lớp đơn sắc vào res/drawable hoặc res/drawable-v24 theo cách thủ công hoặc nhập lớp đơn sắc theo cách thủ công bằng cách nhấp chuột phải vào thư mục res rồi chọn New > Vector Asset (Mới > Thành phần vectơ).
7. Trong res/mipmap-anydpi-v26/ic_launcher.xml và res/mipmap-anydpi-v26/ic_launcher_round.xml, hãy thêm hoặc thay đổi android:monochrome="path/to/monochrome/asset hiện có để trỏ đến tài sản đơn sắc chính xác.

Vectơ vẽ được là gì?

VectorDrawable là một đồ hoạ vectơ được xác định trong tệp XML ở dạng nhóm điểm, đường thẳng và đường cong cùng với thông tin màu sắc có liên quan. Ưu điểm chính của việc sử dụng vectơ vẽ được là khả năng mở rộng quy mô hình ảnh.

9. Bản xem trước và tài nguyên

Xem trước trong trình mô phỏng

Chúng tôi đã thực hiện việc này để thêm các thành phần đó vào dự án ứng dụng, cho phép chúng tôi xem trước trên một thiết bị thực hoặc trình mô phỏng! Hãy xem các biểu tượng của chúng ta sẽ trông như thế nào trên thực tế.

Theo mặc định, bạn sẽ có một trình mô phỏng được thiết lập, nhưng nếu không, hãy Tạo một Thiết bị Android ảo. Nhấp vào nút phát màu xanh lục. Thao tác này sẽ tạo dự án và mở trình mô phỏng.

Thành phần cuối cùng

Tuyệt vời! Bạn đã có thể kiểm tra giao diện của biểu tượng trình chạy trên thiết bị bằng trình mô phỏng và thêm biểu tượng đó vào một dự án ứng dụng. Khi đó, các thành phần này sẽ được chuyển đổi thành dạng sản xuất cuối cùng! Nhưng chúng ở đâu?

Thành phần tồn tại dưới dạng tài nguyên trong ứng dụng Android và có thể được xác định bằng cách mở bảng Tài nguyên (thường ở bên trái). Đi sâu vào ứng dụng, sau đó tìm thư mục Res. Nhấp chuột phải để mở trình đơn rồi chọn Open in Finder (Mở trong Finder) (trên máy Mac). Thao tác này sẽ mở một cửa sổ Finder. Bạn có thể tiết kiệm thời gian phát triển và kiểm thử chất lượng bằng cách chuyển đổi và kiểm thử các thành phần còn lại của ứng dụng bằng một quy trình tương tự. Nếu bạn đã chuyển đổi các thành phần còn lại của ứng dụng, thì bạn có thể chia sẻ thư mục này với quá trình phát triển.

10. Xin chúc mừng

Bạn làm tốt lắm! Bạn đã tìm hiểu về các biểu tượng Hệ thống Android cần thiết để tạo một ứng dụng Android, thiết kế biểu tượng của riêng mình, khám phá tài nguyên mẫu biểu tượng và có thể đã đi xa hơn bằng cách tìm hiểu Android Studio để xem trước và chuyển đổi các thành phần cho bản phát hành công khai!

Các bước tiếp theo

• Tham khảo nguyên tắc về kiểu chữ của Material 3.
• Đọc cách triển khai biểu tượng thích ứng trong ứng dụng của bạn.

Nếu bạn có thắc mắc, cứ thoải mái hỏi chúng tôi bất cứ lúc nào qua @MaterialDesign trên X.

Hãy theo dõi để biết xem nội dung và hướng dẫn về thiết kế trên youtube.com/MaterialDesign