使用者體驗模式6 分鐘閱讀·Updated 2026 年 10 月·ExodeUI 團隊
標籤列和底部導覽:有效的設計規則
如何在 iOS 和 Android 上設計標籤列和底部導航:3 到 5 個目的地、導航而不是操作、標籤、徽章、可見性和動畫活動狀態。
直接總結與定義
核心要點
使用標籤列或底部導覽來顯示三到五個頂級目的地,而不是操作。為每個選項卡提供一個圖標和標籤,當人們在各個部分之間移動時保持欄可見,盡可能避免溢出“更多”選項卡,並謹慎使用徽章。巧妙地設定活動狀態的動畫,以便人們看到他們的位置。
平台怎麼說
Material Design 3 表示,導覽列提供三到五個目的地的訪問,每個目的地都有一個圖示和標籤,其中一個目的地始終處於活動狀態。蘋果的指導方針說,使用標籤欄進行導航,而不是提供操作,當人們在部分之間移動時保持其可見(除非模式覆蓋它),並避免溢出標籤。
選擇選項卡
選項卡代表應用程式的結構:
- 選擇人們最常使用的部分,而不是您擁有的每個部分。
- 使用名詞表示目的地(“庫”),而不使用動詞表示操作(“上傳”)。
- 將操作放在螢幕本身、工具列或浮動操作按鈕中。
- 如果您需要五個以上,請在新增「更多」標籤之前重新考慮您的結構。
標籤和徽章
僅圖標選項卡節省空間,但迫使人們猜測。標籤使導航更加清晰,尤其是對於不太常見的圖示。徽章應該表明人們需要採取行動;始終存在的徽章不會被注意到。
保留每個選項卡的狀態
蘋果指出,標籤列可以讓人們切換部分,同時保留每個部分中目前的導航狀態。返回選項卡應顯示他們離開的位置,而不是重置到頂部。
運動
活動指示器上的小過渡,例如滑動的藥丸或填充的圖標,可以幫助人們追蹤他們所在的位置。保持快速,大約 250 毫秒以內,避免每次點擊時彈跳每個圖標,並在啟用減少運動時簡化它。
要記住的關鍵 Principle
- 三到五個頂級目的地
- 導航,而不是操作
- 每個選項卡的圖示加標籤
- 保持其可見並保留每個選項卡的狀態
- 微妙、快速的活動狀態運動
常見問題解答
來源
- Navigation bar guidelines — Material Design 3
- Tab bars — Apple 人機介面指南