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í

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.

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.

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.

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 các 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.