Ô có chung một số phần tử thiết kế cơ bản. Sử dụng các mẫu và thành phần thẻ thông tin để tạo thẻ thông tin riêng biệt cho ứng dụng của bạn.
Các phần tử cơ bản
Bảng sau đây mô tả các phần tử cơ bản trong thiết kế ô.
|
|
|
|
|
|
Biểu tượng ứng dụngBiểu tượng ứng dụng do các nhà phát triển ứng dụng cung cấp và tạm thời xuất hiện trên màn hình. |
Vùng thiết kếMỗi mẫu thẻ thông tin có quy tắc riêng liên quan đến vùng nội dung chính. Hãy nhớ tham khảo hướng dẫn về bố cục. |
Nút dưới cùngNút là thành phần quan trọng để bật thao tác phụ trên thẻ thông tin. Đặt các nút cách mặt dưới màn hình 6,3%. |
Biểu tượng ứng dụng
Wear sẽ tự động hiển thị biểu tượng ứng dụng khi người dùng cuộn qua băng chuyền ô. Biểu tượng ứng dụng sẽ mờ đi và không được triển khai trong ô. Để biết thêm thông tin về cách tạo biểu tượng ứng dụng, hãy xem phần Biểu tượng sản phẩm.
Hình 1. Ví dụ về biểu tượng ứng dụng
Wear sẽ tự động hiện biểu tượng ứng dụng của bạn
Nên
Không nên
Nút
Chọn văn bản ngắn cho nội dung các nút. Sử dụng văn bản dành riêng cho hành động và vị trí xuất hiện của lời kêu gọi hành động. Hãy đảm bảo rằng bản dịch của văn bản nút phù hợp với số lượng ký tự. Nếu văn bản của nút được dịch quá dài, hãy đặt nút của bạn là Thêm.
|
|
|
Vị trí |
Thông số nút |
Loại |
| Đặt nút cách mặt dưới 6,3% nếu là mặt đồng hồ. | Để khoảng đệm là 12 dp từ cả hai phía. | Không thể thay đổi cỡ chữ. Đặt cỡ chữ tối thiểu là 9. Đối với ngôn ngữ không phải tiếng La-tinh, hãy sử dụng cỡ chữ tối thiểu là 7. |
Mẫu
Có 4 loại mẫu ô. Hãy tải Bộ công cụ thiết kế thẻ thông tin (Figma) để xem các ví dụ cũng như cung cấp ý kiến phản hồi về trải nghiệm của bạn khi sử dụng mẫu này.
Tập trung vào văn bản
Mẫu thẻ thông tin dựa trên văn bản được thiết kế để trình bày văn bản trên các thẻ thông tin (ví dụ: tin tức mới nhất, sự kiện sắp tới và lời nhắc). Mẫu thẻ thông tin này thường được dùng cho các trạng thái đăng nhập, báo lỗi và thiết lập để thông báo cho người dùng về những gì đang diễn ra cũng như đưa ra lời kêu gọi hành động rõ ràng.
Tập trung vào nút
Mẫu thẻ thông tin tập trung vào nút được thiết kế cho các thẻ thông tin có tối đa 5 thao tác chính. Hãy sử dụng mẫu này để nhanh chóng bắt đầu các tác vụ cụ thể.
Tập trung vào thông tin
Mẫu thẻ thông tin tập trung vào thông tin cho thấy tổng quan về các chỉ số và tiến trình. Điều này đặc biệt hữu ích đối với các thẻ thông tin liên quan đến sức khoẻ và thể hình. Mẫu thẻ thông tin này mang đến các lựa chọn linh hoạt để hiển thị nội dung. Để duy trì khả năng xem nhanh, hãy ưu tiên dữ liệu quan trọng và tránh nhồi quá nhiều vào mẫu.
Tập trung vào dữ liệu
Mẫu thẻ thông tin tập trung vào dữ liệu là một mẫu linh hoạt được thiết kế để trình bày biểu đồ và thành phần đồ hoạ tóm tắt thông tin định kỳ. Mẫu này làm cho quá trình trực quan hoá dữ liệu trở nên linh hoạt hơn, rất hữu ích trong việc tạo trạng thái trống dạng hình ảnh. Để đảm bảo xem nhanh được thẻ thông tin, bạn phải duy trì thành phần đồ hoạ đơn giản.
Màu
Để có thể xem nhanh các thẻ thông tin, chỉ nên sử dụng tối đa 3 màu.
Nên
Không nên
Kiểu chữ
Hãy sử dụng Roboto làm phông chữ chính trên Wear OS. Sử dụng Body 2 làm cỡ chữ mặc định và nhỏ nhất, và Display 2 làm cỡ chữ lớn nhất.
Để biết thêm thông tin về phông chữ, độ đậm và kích cỡ, hãy xem phần Kiểu chữ.
Thành phần
Sử dụng các thành phần để tạo thẻ thông tin của bạn. Tuỳ chỉnh màu sắc của thành phần để thể hiện thương hiệu của bạn bằng cách tuân theo nguyên tắc Dùng Material để tạo giao diện Wear.
Hãy tải Bộ công cụ thiết kế thẻ thông tin (Figma) để xem các ví dụ về thành phần.
| Thành phần | Biến thể | Ví dụ |
| Nút | Nút tiêu chuẩn | Kích thước hiện có: Chuẩn, Lớn và Cực lớn  |
| Nút | Nút văn bản chuẩn | Kích thước hiện có: Chuẩn, Lớn và Cực lớn  |
| Khối (chip) | Khối tiêu chuẩn chính |
 |
| Khối (chip) | Khối tiêu chuẩn phụ |
 |
| Khối (chip) | Khối hình đại diện nhỏ |
 |
| Khối (chip) | Khối hình đại diện lớn |
 |
| Khối (chip) | Khối nhỏ (dưới cùng) |
 |
| Chỉ báo tiến trình | Chỉ báo tiến trình chuẩn |
 |
| Chỉ báo tiến trình | Chỉ báo tiến trình có khoảng trống |
 |
Tài nguyên
Để biết thêm thông tin, hãy xem Nguyên tắc thiết kế Thẻ thông tin.