Nút

Các nút giúp người dùng bắt đầu các thao tác hoặc luồng. Chọn trong số nhiều loại nút để tạo điểm nhấn.

Tài nguyên

Loại	Đường liên kết	Trạng thái
Thiết kế	Nguồn thiết kế (Figma)	Có
Triển khai	Jetpack Compose	Có

Tiêu điểm

• Chọn loại nút dựa trên mức độ quan trọng của hành động. Thao tác càng quan trọng thì nút này càng được nhấn mạnh.
• Các nút phải có nhãn rõ ràng để thể hiện hành động mà chúng thực hiện.
• Đặt các nút một cách hợp lý trên màn hình – nơi người dùng có thể muốn tìm thấy chúng.
• Đừng lạm dụng nút. Việc có quá nhiều nút trên một màn hình sẽ làm gián đoạn hệ phân cấp hình ảnh.

Biến thể

Có 6 loại nút:

1. Nút được tô màu nền
2. Nút có đường viền
3. Nút biểu tượng
4. Nút biểu tượng đường viền
5. Nút dài
6. Nút hình ảnh

Chọn loại nút dựa trên mức độ quan trọng của hành động. Hành động càng quan trọng thì nút càng phải nổi bật.

Nút có màu nền và đường viền

Các nút được tô màu nền có tác động trực quan nhất và nên được dùng cho các thao tác quan trọng, cuối cùng để hoàn thành một luồng, chẳng hạn như Lưu, Tham gia ngay, Xác nhận hoặc Tải xuống.

Các nút có đường viền là các nút nhấn trung bình. Các nút này chứa các thao tác quan trọng nhưng không phải là hành động chính trong một ứng dụng. Các nút có đường viền kết hợp tốt với các nút được tô màu nền để cho biết một thao tác phụ thay thế.

Phân tích

1. Vùng chứa
2. Nội dung nhãn
3. Biểu tượng (không bắt buộc)

Các trạng thái

Minh hoạ trạng thái của một thành phần bằng hình ảnh.

1. Mặc định
2. tập trung
3. Đã nhấn

Thông số kỹ thuật

Nút biểu tượng và đường viền

Sử dụng các nút biểu tượng để hiển thị các thao tác trong một bố cục nhỏ gọn. Các nút biểu tượng có thể đại diện cho các thao tác mở như mở một trình đơn mục bổ sung hoặc tìm kiếm, hoặc đại diện cho các thao tác nhị phân có thể bật và tắt, chẳng hạn như mục yêu thích hoặc dấu trang. Các màn hình này cũng dùng để phát hoặc tạm dừng nội dung nghe nhìn.

Các nút biểu tượng có thể được xác định theo 3 kích thước: nhỏ, trung bình và lớn.

Phân tích

1. Vùng chứa
2. Biểu tượng

Các trạng thái

1. Mặc định
2. tập trung
3. Đã nhấn

Trạng thái là các cách biểu diễn trực quan dùng để thông báo trạng thái của một thành phần hoặc phần tử tương tác.

Thông số kỹ thuật

Nút rộng

Nút rộng được dùng để có điểm nhấn cao hơn so với nút thông thường. Chúng chứa các hành động quan trọng. Các nút đại diện cho tuỳ chọn có liên quan được nhóm lại với nhau. Nhóm phải có một nền tảng chung.

Phân tích

1. Vùng chứa
2. Biểu tượng dẫn đầu
3. Tiêu đề
4. Phụ đề

Các trạng thái

1. Mặc định
2. tập trung
3. Đã nhấn

Trạng thái là các cách biểu diễn trực quan dùng để thông báo trạng thái của một thành phần hoặc phần tử tương tác.

Quy cách

Nút hình ảnh

Các nút hình ảnh thường dùng để hiển thị hình thu nhỏ của nội dung có trong cấp điều hướng tiếp theo. Các thao tác này thường được nhóm cùng với các thao tác liên quan và phải có chung một khu vực.

Phân tích

1. Vùng chứa
2. Biểu tượng dẫn đầu
3. Tiêu đề
4. Phụ đề
5. Lớp hình ảnh bao gồm:
   1. Màu đen (lớp phủ trạng thái)
   2. Chuyển màu (dựa trên màu bề mặt)
   3. Ảnh

Các trạng thái

1. Mặc định
2. tập trung
3. Đã nhấn

Trạng thái là các cách biểu diễn trực quan dùng để thông báo trạng thái của một thành phần hoặc phần tử tương tác.

Thông số kỹ thuật

Cách sử dụng

Nút thường được dùng để truyền đạt những thao tác mà người dùng có thể thực hiện. Chúng thường có trong các thành phần trên giao diện người dùng như hộp thoại, cửa sổ phụ, biểu mẫu, thẻ và thanh công cụ.

Nút chỉ là một lựa chọn để thể hiện các thao tác trong giao diện người dùng. Đừng lạm dụng chúng. Quá nhiều nút trên màn hình sẽ làm gián đoạn hệ phân cấp hình ảnh.

1. Vùng chứa
2. Biểu tượng
3. Nội dung nhãn
4. Tiêu đề
5. Phụ đề
6. Ảnh

Vùng chứa

Các nút hiển thị một vùng chứa xung quanh nội dung. Vùng chứa điều chỉnh theo tỷ lệ 1,1 lần khi lấy tiêu điểm, duy trì khoảng đệm bên trong. Dưới đây là một số điểm cần cân nhắc đối với vùng chứa:

• Đặt chiều rộng vùng chứa dựa trên nội dung có khoảng đệm nhất quán.
• Đặt vị trí tương đối của vùng chứa thành lưới bố cục thích ứng.
• Sử dụng vùng chứa màu đồng nhất cho các nút được tô màu nền.
• Sử dụng nét vẽ và màu tô trên tiêu điểm cho các nút có đường viền. Là tâm điểm, vùng chứa sẽ nhận được màu nền cùng với đường viền.
• Đối với các nút rộng và hình ảnh, chiều rộng vùng chứa được đặt theo lưới bố cục.
• Kích thước, vị trí và căn chỉnh vùng chứa có thể thay đổi khi tỷ lệ vùng chứa gốc của nó.

Vùng chứa nút văn bản và biểu tượng có các góc bo tròn đầy đủ. Vùng chứa nút rộng và hình ảnh có vùng chứa bo tròn 12 dp.

Biểu tượng

Các biểu tượng truyền đạt trực quan hoạt động của nút và giúp thu hút sự chú ý. Quảng cáo nên được đặt ở phía trên cùng của nút. Các biểu tượng luôn được căn giữa theo chiều dọc trong vùng chứa.

Nội dung nhãn

Văn bản nhãn là thành phần quan trọng nhất của nút. Thuộc tính này mô tả hành động sẽ xảy ra khi người dùng nhấn vào một nút.

Sử dụng cách viết hoa đầu câu cho văn bản có nhãn của nút, viết hoa từ đầu tiên và danh từ thích hợp. Tránh xuống dòng tự động. Để tăng mức độ dễ đọc tối đa, văn bản nhãn phải nằm trên một dòng.

Ảnh

Các nút hình ảnh luôn có lớp phủ chuyển màu và màn chắn ở phía trên cùng của hình ảnh trong nền. Lớp phủ chuyển màu được đặt theo màu vùng chứa. Màn hình thay đổi theo trạng thái.

Nhóm nút

Các nút xuất hiện cùng nhau trong một hàng hoặc cột để duy trì sự nhất quán khi di chuyển giữa các thao tác. Các phần sau đây mô tả những điều cần cân nhắc.

Cung cấp thêm dữ liệu cho hệ phân cấp

Mỗi màn hình phải có một hành động chính được biểu thị bằng một nút nổi bật, thường rộng. Nút này phải dễ nhìn và dễ hiểu. Các nút khác phải ít nổi bật hơn và không được khiến người dùng mất tập trung khỏi thao tác chính.

Nút đầu tiên trong nhóm đóng vai trò là hành động chính vì tiêu điểm sẽ chuyển đến nút đó trước.

Duy trì bố cục tuyến tính

1. Bố cục hàng
2. Bố cục cột

Sử dụng biến thể một cách hợp lý

Trong bố cục cột, bạn nên duy trì các biến thể của nút đơn. Trong bố cục hàng, nhiều biến thể có thể được nhóm lại với nhau trong một nhóm nút nhưng logic phải rõ ràng. Bạn có thể dùng các nút được tô màu nền và có đường viền trong cùng một nhóm, nhưng hãy đảm bảo hệ phân cấp rõ ràng cho các thao tác.