Kiểu

Việc tạo kiểu cho các tiện ích một cách hiệu quả là điều quan trọng để mang lại trải nghiệm người dùng nhất quán và bắt mắt. Phần này đi sâu vào các khái niệm và kỹ thuật chính để xác định màu sắc và kiểu chữ nhằm tạo ra các tiện ích Android hữu ích và hấp dẫn nhất.

Màu

Sử dụng màu sắc để thể hiện phong cách và truyền tải ý nghĩa. Việc đặt màu sắc phù hợp cho các tiện ích là điều quan trọng để đảm bảo khả năng đọc, cá nhân hoá và tất nhiên là thể hiện bản sắc thương hiệu của ứng dụng.

Sử dụng các vai trò và mã hiệu màu Material để đáp ứng các nguyên tắc về độ tương phản hỗ trợ tiếp cận và hỗ trợ các tính năng màu động, chẳng hạn như màu do người dùng tạo và các giao diện tối hoặc sáng.

Khám phá hệ thống phân cấp trực quan thông qua các vai trò nhấn mạnh để tạo độ tương phản sống động trong các phần tử hoặc khám phá một giao diện tuỳ chỉnh thú vị hơn thể hiện thương hiệu của bạn.

Tiện ích có mã màu được gọi ra.
Sử dụng màu sắc để xác định một hệ thống phân cấp trực quan cho nội dung mới để tiện ích biểu đạt hơn.

Hãy tham khảo hướng dẫn về màu sắc trong Material Design để tìm hiểu thêm về vai trò của màu sắc.

Hình dạng

Hình dạng của tiện ích sẽ tạo nên cảm xúc cho tiện ích. Đối với các tiện ích hình chữ nhật, hãy sử dụng thuộc tính bán kính góc hệ thống. Thuộc tính này tạo ra sự nhất quán trên nhiều thiết bị và giúp ngăn nội dung tiện ích bị cắt.

Nếu tiện ích của bạn hiển thị nội dung dữ liệu tối thiểu, chẳng hạn như ảnh, thời tiết hoặc bài hát đang phát, hãy thử tạo cho toàn bộ tiện ích một hình dạng biểu cảm để mang đến một luồng năng lượng thú vị cho màn hình chính của người dùng. Nếu bạn có bố cục và dữ liệu phức tạp hơn, hãy cân nhắc sử dụng các hình dạng biểu cảm cho hệ thống phân cấp trực quan, làm nổi bật nội dung mới hoặc lời kêu gọi hành động.

Các tiện ích sử dụng nhiều hình dạng
Một tiện ích có hình dạng biểu cảm và một tiện ích hình chữ nhật sử dụng các hình dạng biểu cảm cho hệ phân cấp trực quan.

Để tìm hiểu thêm, hãy xem phần Triển khai các góc bo tròn.

Giao diện động

Kể từ Android 12, một tiện ích có thể sử dụng màu giao diện của thiết bị cho các nút, nền và các thành phần khác. Điều này giúp đảm bảo tính nhất quán về mặt hình ảnh giữa các tiện ích, biểu tượng trên màn hình chính và hình nền, mang đến cho người dùng Android trải nghiệm nhất quán hơn. Việc sử dụng các mã thông báo màu được cung cấp sẽ giúp tiện ích của bạn trông được tích hợp trên các giao diện thiết bị do nhiều nhà sản xuất thiết bị cung cấp và các giao diện động do người dùng đặt.

Hình ảnh về một tiện ích có mã màu được gọi ra.

Giao diện sáng và tối

Giao diện tối là phiên bản ánh sáng yếu của giao diện người dùng trên thiết bị, hiển thị hầu hết các màu bề mặt tối. Ngày càng có nhiều người dùng chuyển sang giao diện tối để cải thiện thời lượng pin và giảm mỏi mắt. Nếu không thích ứng với giao diện tối, thì tiện ích của bạn sẽ xuất hiện không đúng chỗ và có thể khiến người dùng khó chịu.

Một tiện ích ở chế độ sáng trên màn hình bên trái và chế độ tối trên màn hình bên phải.

Kiểu chữ

Kiểu chữ giúp nội dung trở nên dễ đọc và đẹp mắt. Sử dụng cỡ chữ và độ đậm của chữ để thiết lập một hệ thống phân cấp rõ ràng, hướng mắt người dùng đến các phần tử quan trọng nhất. Chú ý đến khoảng cách dòng và khoảng cách chữ (kerning) để cải thiện khả năng đọc, đặc biệt là đối với những màn hình hiển thị văn bản nhỏ trong không gian hạn chế của một tiện ích.

Hệ phân cấp

Hệ thống phân cấp (hierarchy) được thể hiện thông qua mức chênh lệch về độ dày phông chữ, kích thước, chiều cao dòng và khoảng cách giữa các chữ cái. Thang kiểu chữ được cập nhật sẽ sắp xếp các kiểu văn bản thành 5 vai trò với tên gọi mô tả mục đích của vai trò đó. Năm kiểu văn bản là hiển thị, dòng tiêu đề, tiêu đề, phụ đề và nội dung. Các vai trò mới không phụ thuộc vào thiết bị, giúp áp dụng dễ dàng hơn trong nhiều trường hợp sử dụng.

Một tiện ích cho thấy cách sử dụng các tỷ lệ kiểu chữ khác nhau.

Mặc dù các tiện ích dùng phông chữ hệ thống, nhưng bạn vẫn có thể thêm các chi tiết biểu cảm bằng thang kiểu chữ ấn tượng: trở nên nổi bật hơn với tiêu đề, nhãn và dữ liệu.

Một tiện ích kết hợp các kỹ thuật biểu đạt và sử dụng kiểu chữ biểu đạt lớn.