Các phương pháp hay nhất cho thẻ thông tin

Thiết kế trên nền đen

Việc thiết kế trên nền đen là rất quan trọng đối với Wear OS vì hai lý do chính:

  • Hiệu suất pin: Mỗi pixel được chiếu sáng trên màn hình đều tiêu thụ điện năng. Bằng cách sử dụng nền đen, bạn giảm thiểu số lượng pixel đang hoạt động, kéo dài thời lượng pin.
  • Tính thẩm mỹ liền mạch: Phông nền màu đen giúp giảm thiểu viền đồng hồ về mặt hình ảnh, tạo ảo giác về một bề mặt liên tục kéo dài đến cạnh thiết bị. Việc chứa các thành phần trên giao diện người dùng trong không gian này sẽ tăng cường hiệu ứng này.

Nên

Luôn đặt màu nền thành màu đen.

Không nên

Không đặt nền ở dạng hình ảnh tràn lề hoặc màu khối.

Chỉ bao gồm các phần tử cần thiết

Khi người dùng chọn sử dụng (ví dụ: sử dụng PrimaryLayout Material3 ProtoLayout), Wear OS sẽ tự động hiển thị biểu tượng ứng dụng cố định. Biểu tượng này sẽ tự động hiển thị khi người dùng cuộn qua băng chuyền Thẻ thông tin. Không được thiết kế và thêm biểu tượng ứng dụng vào Thẻ thông tin.

Đảm bảo biểu tượng ứng dụng được cung cấp là đơn sắc nếu bạn đang sử dụng giao diện động trên thẻ thông tin. Hãy xem nguyên tắc về biểu tượng sản phẩm Android để biết cách tạo biểu tượng ứng dụng cho thương hiệu của bạn.

Nên

Wear OS có thể tự động hiển thị biểu tượng ứng dụng khi người dùng cuộn qua băng chuyền Thẻ thông tin. Bạn không cần đặt biểu tượng ứng dụng trong thiết kế Thẻ thông tin.

Không nên

Không thêm biểu tượng ứng dụng vào thiết kế Thẻ thông tin vì biểu tượng này có thể xuất hiện hai lần/được chồng lên nhau nếu cũng hiển thị ở cấp hệ thống.

Ẩn tiêu đề ứng dụng để đảm bảo mục tiêu nhấn tối thiểu

Để đảm bảo có đủ không gian cho các thành phần tương tác trên màn hình nhỏ hơn, tiêu đề ứng dụng có thể bị ẩn khi Thẻ thông tin sử dụng hai hàng (và một phần dưới cùng). Điều này đảm bảo các hàng có chiều cao đủ (ít nhất là 48 dp). Tiêu đề có thể xuất hiện lại trên màn hình lớn hơn (225 dp trở lên).

Nên

Trên màn hình nhỏ, tiêu đề ứng dụng sẽ bị ẩn để đảm bảo hai hàng có chiều cao tối thiểu và mục tiêu nhấn là 48 dp.

Không nên

Nếu bạn không ẩn tiêu đề ứng dụng trên màn hình nhỏ và có hai hàng, thì chiều cao của các thành phần sẽ không tuân thủ các tiêu chuẩn hỗ trợ tiếp cận của chúng tôi và nhỏ hơn kích thước mục tiêu nhấn tối thiểu. Trong ví dụ này, không gian cho các nút nhỏ hơn 48 dp, vì vậy, các nút sẽ bị cắt bớt.

Chọn một trường hợp sử dụng chính để làm nổi bật

Để đảm bảo người dùng biết phải làm gì với từng Thẻ thông tin, cho dù đó là mở ứng dụng, bắt đầu một hoạt động hay tìm hiểu thêm, chúng ta cần người dùng đưa ít nhất một phần tử tương tác vào bố cục của họ.

Nên

Thẻ thông tin cụ thể này hiệu quả vì cung cấp một bộ sưu tập nhỏ các lựa chọn, sau đó có thể xem thêm

Không nên

Giải pháp này ít hữu ích cho người dùng vì nó gây ra tình trạng tê liệt quyết định do có quá nhiều lựa chọn

Bao gồm (ít nhất) một vùng chứa

Mỗi thẻ thông tin trong ứng dụng phải chứa ít nhất một phần tử vùng chứa và có thể nhấn toàn bộ, liên kết đến một màn hình tương ứng trong ứng dụng. Thông tin của Thẻ thông tin, cho dù nằm trong vùng chứa hay được trình bày riêng biệt, phải truyền đạt rõ ràng nội dung được liên kết hoặc hành động có thể thực hiện.

Nếu sử dụng nút, bạn phải tuân thủ các quy ước thiết kế tiêu chuẩn và cung cấp thông tin rõ ràng về chức năng của nút.

Nên

Thẻ thông tin này hoạt động tốt vì người dùng có thể thực hiện hành động trên từng chức năng được cung cấp vì các chức năng này có các thao tác nhấn rõ ràng

Không nên

Thẻ thông tin này kém hiệu quả vì không nêu rõ rằng người dùng có thể nhấn vào nội dung để xem thêm thông tin

Giúp người dùng hiểu được các hành động ngay lập tức

Trải nghiệm trên đồng hồ không có nhiều không gian để truyền đạt ý nghĩa, vì vậy, Thẻ thông tin hiệu quả nhất có các thành phần tương tác dễ dự đoán.

Nên

Thẻ thông tin thành công tận dụng tối đa không gian có sẵn để truyền đạt rõ ràng kết quả của từng hành động

Không nên

Các thao tác trong Thẻ thông tin này không rõ ràng – vùng chứa có ảnh bìa đĩa nhạc sẽ đưa người dùng đến đâu và có khác với nút "Phát" không?

Ưu tiên các thao tác một cách trực quan

Để giúp người dùng hiểu được hành động quan trọng nhất trên Thẻ thông tin, bạn nên ưu tiên các vùng chứa tương tác về mặt hình ảnh.

  • Sử dụng màu chính trên các nút hành động chính.
  • Sử dụng màu phụ/màu thứ ba cho các thao tác phụ

Nên

Thẻ thông tin này sử dụng kết hợp giữa màu được tô (với vai trò màu chính và màu phụ) với vai trò nút dưới cùng thứ ba rõ ràng, sử dụng kiểu tô màu sắc độ

Không nên

Thẻ thông tin này chứa quá nhiều nút kiểu được tô màu, ngoài ra tất cả đều sử dụng vai trò màu chính

Đơn giản hoá thành ít vùng chứa hơn

Bạn nên hạn chế sử dụng nhiều thành phần tương tác để kích hoạt một hành động cụ thể, thay vào đó, hãy cố gắng đơn giản hoá bố cục tổng thể thành ít vùng chứa hơn.

Nên

Thẻ thông tin này đang sử dụng một số vùng chứa và mỗi vùng chứa đóng vai trò là một nút để thực hiện một hành động cụ thể như bắt đầu hẹn giờ hoặc tạo một hẹn giờ mới

Không nên

Bạn không cần sử dụng 4 vùng chứa ở đây vì tất cả thông tin sẽ chuyển đến cùng một vị trí

Sử dụng vùng chứa cho mục đích chức năng

Để đảm bảo người dùng có thể dự đoán được chức năng của từng thành phần trong Thẻ thông tin, bạn không nên sử dụng vùng chứa cho mục đích trang trí hoặc cấu trúc để tránh các thao tác nhấn không có tác dụng.

Nên

Giải pháp này hoạt động vì thao tác duy nhất của Thẻ thông tin là một quy trình tạo và tất cả nội dung khác đều nổi trên nền đen

Không nên

Thẻ thông tin này gây nhầm lẫn hơn vì có vẻ như người dùng có thể tương tác với tất cả vùng chứa

Cho thấy các bản trình bày giúp xem nhanh biểu đồ và đồ thị

Khả năng xem nhanh là yếu tố then chốt trong thiết kế Wear OS. Với thời gian hiển thị trên màn hình có hạn (khoảng 7 giây), hãy ưu tiên thông tin thiết yếu ở định dạng rõ ràng, dễ hiểu ngay từ đầu.

Hãy nhớ rằng đồng hồ bổ sung cho trải nghiệm điện thoại, giúp bạn truy cập nhanh vào các thông tin chi tiết chính.

Nên

Cho thấy các bản trình bày giúp xem nhanh thông tin dạng số hoặc thống kê và cho phép người dùng nhấn để xem thêm trong ứng dụng nếu cần

Không nên

Trình bày thông tin chi tiết dạng số hoặc số liệu thống kê trên Thẻ thông tin