Nút là chỉ báo trực quan chính cho các hành động của người dùng.
Nguyên tắc
Hướng đến hành động: Các nút phải truyền đạt rõ ràng rằng chúng kích hoạt một hành động.
Xoá ý kiến phản hồi: Giao diện của nút phải thay đổi rõ ràng ở các trạng thái tương tác khác nhau (di chuột, nhấn, lấy tiêu điểm) để cung cấp ý kiến phản hồi ngay lập tức.
Nhất quán: Tất cả các nút đều phải có một ngôn ngữ hình ảnh cốt lõi để người dùng có thể nhận ra ngay lập tức.
Linh hoạt: Thành phần nút phải phù hợp với các biến thể phổ biến, chẳng hạn như bao gồm biểu tượng và các kích thước khác nhau mà không làm giảm tính nhất quán.
Cách sử dụng và vị trí
Bạn nên đặt nút gần với nội dung có liên quan. Bạn có thể đặt các thành phần này một mình hoặc cùng với các thành phần khác, chẳng hạn như thẻ và danh sách.
Nên
Không nên
Nên
Không nên
Phân tích
Mặc định
1. Đã bật: Trạng thái mặc định.
2. Di chuột
3. Nhấn
Lớn
1. Đã bật: Trạng thái mặc định.
2. Di chuột
3. Nhấn
Tuỳ chỉnh
Các nút có một biến thể mặc định và một biến thể lớn, cùng với trạng thái mặc định, trạng thái được lấy tiêu điểm và trạng thái đã nhấn cho từng biến thể. Bạn có thể dùng biểu tượng để nhấn mạnh, làm rõ và giúp người dùng nhận biết nút dễ dàng hơn. Kích thước nút có thể giúp nhấn mạnh tầm quan trọng.
Mặc định
| Thuộc tính | Tuỳ chỉnh | Mặc định |
|---|---|---|
| Hình dạng | Có | Lớn, Hình tròn |
| Khoảng đệm | Có | 16 dp, 8 dp |
| Đường viền | Có | 2 dp, #606460 |
| Văn bản | Có | Nội dung nhỏ |
| Biểu tượng hàng đầu | Có | 40 dp |
| Biểu tượng ở cuối | Có | 40 dp |
| Kích thước | Có | Chiều cao tối thiểu là 56 dp |
| Chiều sâu | Có | 0 |
Lớn
| Thuộc tính | Tuỳ chỉnh | Mặc định |
|---|---|---|
| Hình dạng | Có | Lớn, Hình tròn |
| Khoảng đệm | Có | 20 dp, 8 dp |
| Đường viền | Có | 2 dp, #606460 |
| Văn bản | Có | Nội dung nhỏ |
| Biểu tượng hàng đầu | Có | 56 dp |
| Biểu tượng ở cuối | Có | 56 dp |
| Kích thước | Có | Chiều cao tối thiểu 72 dp |
| Chiều sâu | Có | 0 |
| Bề mặt | Không |