Nút

Sử dụng thành phần Nút cho các thao tác mà người dùng hiểu rõ và không cần có nhãn văn bản. Các nút được phân biệt với khối bằng hình tròn.

Phân tích

A. Nội dung

Các nút có một khe duy nhất dành riêng cho biểu tượng hoặc văn bản. Chọn một biểu tượng liên quan đến hành động mà nút thực hiện. Bạn có thể sử dụng văn bản có tối đa 3 ký tự nếu một biểu tượng không thể mô tả hành động có liên quan. Hãy cân nhắc việc sử dụng thành phần Khối nếu một biểu tượng không thể mô tả rõ ràng thao tác

B. Vùng chứa

Các vùng chứa của nút bị giới hạn ở một màu đồng nhất.


Các loại nút

Nút bật tắt

Nút bật tắt cho phép người dùng chuyển đổi giữa hai trạng thái.

Các nút thu gọn

Các nút thu gọn hiển thị nhỏ hơn nhưng có vùng nhấn lớn hơn. Vùng có thể nhấn mặc định là 48x48 dp.

Hệ phân cấp

Dùng màu tô khác nhau để biểu thị hệ phân cấp nút.

Nhấn mạnh

Các nút nhấn mạnh chứa những thao tác chính dành cho ứng dụng. Đối với các nút nhấn mạnh, hãy sử dụng màu Primary (Màu chính) hoặc Primary (Màu phụ) cho vùng chứa, đồng thời sử dụng màu On Primary (Màu chính) và màu On secondary (Màu phụ) cho nội dung. Để biết thêm thông tin, hãy xem bài viết Tuỳ chỉnh giao diện Wear Material.

Nhấn trung bình

Các nút nhấn trung bình được phân biệt bằng màu tô ít tương phản hơn. Chúng chứa các hành động ít quan trọng hơn các hành động chính. Sử dụng màu Surface cho vùng chứa và màu On Surface cho nội dung.

Ngoài ra, hãy sử dụng thành phần OutlinedButton tuỳ chỉnh cho nút nhấn trung bình. Thành phần này có nền trong suốt, nét vẽ màu biến thể chính có độ mờ 60% và nội dung được tô màu chính.

Nhấn thấp (chỉ dùng cho biểu tượng)

Các nút nhấn thấp được phân biệt bằng cách không tô màu. Các nút này phù hợp nhất với những khu vực nhỏ trên mặt đồng hồ, cần được sắp xếp gọn gàng. Sử dụng màu On Surface cho nội dung.

Kích thước

Hãy sử dụng các nút có kích thước khác nhau để nhấn mạnh hoặc giảm nhẹ các hành động.

Lớn

Biểu tượng (30 x 30 dp)
Vùng chứa (60 x 60 dp)

Mặc định

Biểu tượng (26 x 26 dp)
Vùng chứa (52 x 52 dp)

Nhỏ

Biểu tượng (24 x 24 dp)
Vùng chứa (48 x 48 dp)

Rất nhỏ

Biểu tượng (24 x 24 dp)
Vùng chứa (32 x 32 dp)

Bạn nên thêm khoảng đệm bổ sung xung quanh nút này để tạo đích nhấn có kích thước ít nhất là 48 dp. Đây là kích thước đích nhấn tối thiểu của chúng tôi để hỗ trợ tiếp cận.

Cách sử dụng

Sử dụng các nút tiêu chuẩn để cho phép người dùng thực hiện một thao tác như chấp nhận hoặc từ chối cuộc gọi, hoặc bắt đầu hẹn giờ.

Sử dụng các nút bật tắt để cho phép người dùng bật hoặc tắt một lựa chọn, chẳng hạn như chọn và bỏ chọn các ngày trong tuần hoặc tạm dừng và khởi động lại đồng hồ hẹn giờ.

Bố cục thích ứng (Adaptive Layouts)

Hành vi thích ứng

1 nút

Khoảng đệm bên trong sẽ giữ nguyên và lề phải là tỷ lệ phần trăm để ngăn các nút kéo dài quá xa và duy trì kích thước tương đối.

2 nút

Khi có 2 nút, tỷ lệ phần trăm lề bên trong sẽ được thêm vào để nút này không kéo dài quá mức và giữ nguyên kích thước tương đối.

IME

1 hoặc 2 Nút

Các IME có 2 hoặc một nút khoá luôn kéo dài hết cỡ sang lề bên bất kể kích thước màn hình.

3 nút

Trên màn hình nhỏ hơn 225 dp, các nút vẫn ở dạng hình tròn và không kéo giãn. Trên màn hình lớn hơn, 225 dp trở lên, các nút sẽ kéo dài hết cỡ sang lề bên.