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 →
使用者體驗模式6 分鐘閱讀·Updated 2026 年 10 月·ExodeUI 團隊

標籤列和底部導覽:有效的設計規則

如何在 iOS 和 Android 上設計標籤列和底部導航:3 到 5 個目的地、導航而不是操作、標籤、徽章、可見性和動畫活動狀態。

直接總結與定義

核心要點

使用標籤列或底部導覽來顯示三到五個頂級目的地,而不是操作。為每個選項卡提供一個圖標和標籤,當人們在各個部分之間移動時保持欄可見,盡可能避免溢出“更多”選項卡,並謹慎使用徽章。巧妙地設定活動狀態的動畫,以便人們看到他們的位置。

平台怎麼說

Material Design 3 表示,導覽列提供三到五個目的地的訪問,每個目的地都有一個圖示和標籤,其中一個目的地始終處於活動狀態。蘋果的指導方針說,使用標籤欄進行導航,而不是提供操作,當人們在部分之間移動時保持其可見(除非模式覆蓋它),並避免溢出標籤。

帶有四個選項卡底部導航列的手機螢幕,主頁處於活動狀態,帶有有關導航而非操作的註釋以及圖標加標籤
三到五個目的地,每個目的地都有一個圖示和標籤,其中一個始終處於活動狀態。

選擇選項卡

選項卡代表應用程式的結構:

  • 選擇人們最常使用的部分,而不是您擁有的每個部分。
  • 使用名詞表示目的地(“庫”),而不使用動詞表示操作(“上傳”)。
  • 將操作放在螢幕本身、工具列或浮動操作按鈕中。
  • 如果您需要五個以上,請在新增「更多」標籤之前重新考慮您的結構。

標籤和徽章

僅圖標選項卡節省空間,但迫使人們猜測。標籤使導航更加清晰,尤其是對於不太常見的圖示。徽章應該表明人們需要採取行動;始終存在的徽章不會被注意到。

保留每個選項卡的狀態

蘋果指出,標籤列可以讓人們切換部分,同時保留每個部分中目前的導航狀態。返回選項卡應顯示他們離開的位置,而不是重置到頂部。

運動

活動指示器上的小過渡,例如滑動的藥丸或填充的圖標,可以幫助人們追蹤他們所在的位置。保持快速,大約 250 毫秒以內,避免每次點擊時彈跳每個圖標,並在啟用減少運動時簡化它。

要記住的關鍵 Principle

  • 三到五個頂級目的地
  • 導航,而不是操作
  • 每個選項卡的圖示加標籤
  • 保持其可見並保留每個選項卡的狀態
  • 微妙、快速的活動狀態運動

常見問題解答

來源

  1. Navigation bar guidelines — Material Design 3
  2. Tab bars — Apple 人機介面指南

相關指南和範例

您可以調整的動畫標籤欄

打開免費的互動式標籤列和導航元件並在 ExodeUI 中更改它們的動作。

瀏覽即時組件
免費試用