Nút

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

Định hướng hành động: Các nút phải truyền tải rõ ràng rằng chúng kích hoạt một hành động.

Phản hồi rõ ràng: 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 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à nhiều kích thước mà không làm giảm tính nhất quán.

Cách sử dụng và vị trí

Nút phải được đặt gần 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.

check_circle

Nên

Sử dụng tính năng hiển thị từng bước để cho thấy những hành động ít liên quan hơn.

cancel

Không nên

Hiển thị quá nhiều nút khiến người dùng cảm thấy rối mắt. Hãy sử dụng một nhóm nút.

check_circle

Nên

Sử dụng các nút để nhắc người dùng thực hiện một hành động. Hoặc dùng một chip tiêu đề cho một phần tử tĩnh.

cancel

Không nên

Sử dụng nút làm phần tử trang trí tĩnh.

Nút biểu tượng

Các nút biểu tượng có sẵn để giảm mật độ nội dung. Sử dụng nút biểu tượng khi biểu tượng minh hoạ rõ ràng một hành động, nếu không, hãy thêm nhãn nút.

check_circle

Nên

Sử dụng nút biểu tượng cho các thao tác phổ biến, dễ nhận biết.

cancel

Không nên

Sử dụng nút biểu tượng cho các hành động rất khó hiểu.

Có thể bật/tắt

Đối với các thao tác có trạng thái boolean, chẳng hạn như thao tác yêu thích, bạn có thể dùng một biến thể bật/tắt cho từng loại nút. Việc hoán đổi biểu tượng giữa các trạng thái bật/tắt giúp người dùng dễ dàng nhìn thấy và tương tác.

check_circle

Nên

Sử dụng nút bật/tắt nếu có các lựa chọn boolean cho một hành động. Thích nút bắt đầu/dừng.

cancel

Không nên

Sử dụng nút bật/tắt cho các thao tác không phải là thao tác nhị phân.

Phân tích

Các nút bao gồm một nhãn và biểu tượng tuỳ chọn ở đầu hoặc cuối.

Nút biểu tượng chỉ bao gồm một biểu tượng dễ nhận biết.

Cả hai đều có một biến thể có thể bật/tắt.

Tùy chỉnh

Các nút có kiểu mặc định và kiểu lớn. Kích thước lớn có thể giúp nhấn mạnh tầm quan trọng.

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 ở vị trí đầu hoặc cuối.