Skip to main content
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →
Mẫu UXđọc 6 phút·Updated tháng 10 năm 2026·Đội ngũ ExodeUI

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.

Tóm tắt và định nghĩa

Đ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.

Màn hình điện thoại có thanh điều hướng phía dưới bốn tab, Trang chủ đang hoạt động, có ghi chú về điều hướng chứ không phải hành động và biểu tượng cùng với nhãn
Ba đến năm đích đến, mỗi đích có một biểu tượng và nhãn, một đích luôn hoạt động.

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

  1. Navigation bar guidelines — Material Design 3
  2. Tab bars — Nguyên tắc giao diện con người của Apple

Hướng dẫn và ví dụ liên quan

Thanh tab hoạt hình bạn có thể điều chỉnh

Mở thanh tab tương tác miễn phí và các thành phần điều hướng cũng như thay đổi chuyển động của chúng trong ExodeUI.

Duyệt các thành phần trực tiếp
Dùng thử miễn phí