Thanh tab và điều hướng dưới cùng: Quy tắc thiết kế phù hợp
Cách thiết kế thanh tab và điều hướng dưới cùng trên iOS và Android: 3 đến 5 đích, điều hướng không phải hành động, nhãn, huy hiệu, khả năng hiển thị và trạng thái hoạt động.
Điểm chính
Sử dụng thanh tab hoặc điều hướng phía dưới cho ba đến năm đích đến cấp cao nhất chứ không phải cho hành động. Đặt cho mỗi tab một biểu tượng và nhãn, giữ cho thanh hiển thị khi mọi người di chuyển giữa các phần, tránh tràn các tab "Thêm" nếu có thể và sử dụng huy hiệu một cách tiết kiệm. Làm sinh động trạng thái hoạt động một cách tinh tế để mọi người biết họ đang ở đâu.
Nền tảng nói gì
Material Design 3 cho biết các thanh điều hướng cung cấp quyền truy cập vào ba đến năm đích, mỗi đích có một biểu tượng và nhãn và một đích luôn hoạt động. Nguyên tắc của Apple yêu cầu sử dụng thanh tab để điều hướng, không cung cấp hành động, để giữ cho nó hiển thị khi mọi người di chuyển giữa các phần (trừ khi một phương thức che nó) và để tránh các tab tràn.
Chọn các tab
Các tab thể hiện cấu trúc của ứng dụng:
- Chọn những phần mọi người sử dụng thường xuyên nhất, không phải mọi phần bạn có.
- Sử dụng danh từ cho đích đến ("Thư viện") chứ không phải động từ cho hành động ("Tải lên").
- Đặt các hành động ngay trên màn hình, trên thanh công cụ hoặc nút hành động nổi.
- Nếu bạn cần nhiều hơn năm, hãy xem xét lại cấu trúc của bạn trước khi thêm tab "Thêm".
Nhãn và phù hiệu
Các tab chỉ có biểu tượng sẽ tiết kiệm không gian nhưng buộc mọi người phải đoán. Nhãn giúp điều hướng rõ ràng hơn, đặc biệt đối với các biểu tượng ít phổ biến hơn. Huy hiệu nên báo hiệu điều gì đó mà mọi người cần hành động; một huy hiệu luôn hiện diện sẽ không được chú ý nữa.
Giữ nguyên trạng thái trên mỗi tab
Apple lưu ý rằng thanh tab cho phép mọi người chuyển đổi các phần trong khi vẫn duy trì trạng thái điều hướng hiện tại trong mỗi phần. Việc quay lại tab sẽ hiển thị nơi họ đã dừng lại chứ không phải đặt lại về đầu trang.
Cử động
Một chuyển đổi nhỏ trên chỉ báo đang hoạt động, chẳng hạn như viên thuốc trượt hoặc biểu tượng đổ đầy, sẽ giúp mọi người theo dõi vị trí của họ. Giữ tốc độ nhanh, dưới khoảng 250 mili giây, tránh nảy mọi biểu tượng trên mỗi lần nhấn và đơn giản hóa khi bật chế độ giảm chuyển động.
Nguyên tắc chính cần nhớ
- Ba đến năm điểm đến cấp cao nhất
- Điều hướng, không phải hành động
- Biểu tượng cộng với nhãn cho mỗi tab
- Giữ nó hiển thị và duy trì trạng thái của từng tab
- Chuyển động ở trạng thái hoạt động nhanh và tinh tế
Câu hỏi thường gặp
Nguồn
- Navigation bar guidelines — Material Design 3
- Tab bars — Nguyên tắc giao diện con người của Apple