BottomNavigation（底部導(dǎo)航欄）

底部導(dǎo)航欄是一個應(yīng)用程序主要目標界面之間導(dǎo)航的控件。

image

開發(fā)文檔

目錄

• 使用
• 剖析
• 行為
• 位置
• 狀態(tài)
• 主題
• 規(guī)格

使用

底部導(dǎo)航欄一般在屏幕底部，有3～5個目標。每一個目標有一個圖標和一可選的文本標簽借帘。當(dāng)點擊底部導(dǎo)航圖標時，用戶將被帶到與該圖標關(guān)聯(lián)的頂級導(dǎo)航目標褐筛。

原則

何時使用

底部導(dǎo)航欄應(yīng)用于：

• 需要從應(yīng)用程序中的任何位置訪問的頂級目標
• 三到五個目標
• 僅限手機或平板電腦

底部導(dǎo)航欄不應(yīng)用于：

• 單個任務(wù)龄坪，例如查看單個電子郵件
• 用戶首選項或設(shè)置
  
  不要將底部導(dǎo)航欄用于少于三個標（請使用標簽）。
  
  相關(guān)主題
  標簽
  導(dǎo)航抽屜
  注意
  
  不要使用五個以上的目標羹唠。在這種情況下奕枢，請嘗試使用標簽頁或?qū)Ш匠閷稀?/div>

  
  

剖析

image

1. 容器
2. 非活動狀態(tài)圖標
3. 非活動狀態(tài)標簽
4. 活動狀態(tài)圖標
5. 活動狀態(tài)標簽

如何顯示

底部導(dǎo)航的顯示方式取決于所使用的數(shù)量：

• 三個目標：顯示所有的圖標和文本標簽。
• 四個目標：活動狀態(tài)時顯示圖標和文本標簽佩微。非活動狀態(tài)時顯示圖標或文本標簽缝彬。建議使用文本標簽。
• 五個目標：活動狀態(tài)時顯示圖標和文本標簽哺眯。非活動狀態(tài)使用圖標谷浅，如果空間允許，則使用文本標簽奶卓。
  
  此底部導(dǎo)航中有三個目標一疯，每個目標都有一個圖標和文本標簽。

圖標

底部導(dǎo)航目標始終包含一個圖標夺姑。最好將圖標與文本標簽配對墩邀，尤其是在圖標沒有明顯含義的情況下。

圖標與底部導(dǎo)航中的文本標簽配對

文本標簽

文本標簽提供了對底部導(dǎo)航目標的簡短有意義的描述瑟幕。

建議這樣做：使用短文字標簽磕蒲。

不要這樣做：不要截斷文本留潦。截斷可能會使重要的目標信息模糊不清只盹。

不要這樣做：不要縮小文本以使其僅占一行。

應(yīng)盡量避免換行兔院。

圖標和標簽顏色

活動與非活動狀態(tài)的圖標以及文本標簽應(yīng)與容器形成足夠的對比殖卑。根據(jù)組件的配色方案，活動狀態(tài)目標的圖標和標簽應(yīng)使用應(yīng)用程序的“主要”或“強調(diào)”的“開”顏色坊萝。非活動狀態(tài)的圖標和標簽可以使用中等強調(diào)的“打開”顏色孵稽。

在底部導(dǎo)航欄中许起，為活動狀態(tài)目標使用“主要”或“重點增強”顏色。

不要這樣做：請勿在底部導(dǎo)航欄中使用多種或低對比度的顏色菩鲜，因為它們會使用戶更難區(qū)分活動項目并導(dǎo)航到其他目標园细。

行為

導(dǎo)航

底部導(dǎo)航在Android和iOS上的行為有所不同。選擇底部導(dǎo)航目標（當(dāng)前未選擇的一項）時接校，每個平臺顯示不同的結(jié)果：

• 在Android上： 該應(yīng)用程序?qū)Ш降侥康牡氐捻敿壠聊幻推怠Ｈ魏蜗惹暗挠脩艚换ズ团R時屏幕狀態(tài)都會重置，例如滾動位置蛛勉，選項卡選擇和嵌入式搜索鹿寻。
• 在iOS上： 目的地反映了用戶的先前交互。如果用戶以前訪問過該應(yīng)用程序的該部分诽凌，則他們將返回上一次查看的屏幕（如果可能毡熏，保留其先前狀態(tài)）。否則侣诵，該應(yīng)用程序?qū)?dǎo)航到頂級屏幕痢法。

需要改善用戶體驗時，可以覆蓋默認平臺導(dǎo)航杜顺。例如疯暑，需要在部分之間頻繁切換的Android應(yīng)用可以保留每個部分的狀態(tài)⊙剖妫或者妇拯，如果一個iOS應(yīng)用更適合用例，則它可以使用戶返回到頂級屏幕（或重置其滾動位置）洗鸵。
示例
在Android上越锈，重新訪問版塊會重置應(yīng)用程序，使用戶返回到其頂級屏幕膘滨。（視頻示例）
在iOS上甘凭，當(dāng)用戶重新訪問某個部分時，他們將返回到該部分中的上一步火邓，例如詳細信息屏幕丹弱。
在應(yīng)用程序的層次結(jié)構(gòu)中向下移動（從父屏幕到子屏幕）時，可以持續(xù)顯示底部導(dǎo)航欄铲咨，以便在應(yīng)用程序的各個部分之間快速導(dǎo)航躲胳。
導(dǎo)航到專輯時，此音樂應(yīng)用程序的底部導(dǎo)航欄仍保持在視圖中纤勒。

角標

底部導(dǎo)航圖標的右上角可以包含角標坯苹。這些角標可以包含動態(tài)信息，例如許多待處理的請求摇天。

image

1. 角標
2. 帶有數(shù)字的角標
3. 帶有最大字符數(shù)的角標

滾動

滾動時粹湃，底部導(dǎo)航欄可以顯示或消失恐仑，以留出更多空間容納內(nèi)容。：

• 向下滾動隱藏底部導(dǎo)航欄
• 向上滾動顯示它
  視頻

轉(zhuǎn)場

建議在底部導(dǎo)航目標之間進行過渡時使用就地淡入淡出動畫为鳄。橫向（從一側(cè)到另一側(cè)）過渡可能意味著不存在的項目之間存在對等關(guān)系裳仆，或者誤導(dǎo)用戶以為他們可以使用手勢在各個部分之間導(dǎo)航。
視頻
不建議使用視頻

運動介紹

位置

海拔

對話框孤钦，底部工作表鉴逞，導(dǎo)航抽屜，屏幕鍵盤或其他完成流程所需的元素可以暫時覆蓋底部導(dǎo)航司训。請勿在任何屏幕上永久阻塞它們构捡。
視頻示例

固定大小的導(dǎo)航欄

底部導(dǎo)航欄目標位置固定。它們不會滾動或水平移動壳猜。

不要這樣做：底部導(dǎo)航欄目標不會滾動勾徽。

橫屏視圖

在移動設(shè)備（橫向模式）或平板電腦上，底部導(dǎo)航目標可以保留縱向模式下使用的相同間距统扳，而不是在底部應(yīng)用欄上平均分配喘帚。

在移動設(shè)備（橫向模式）或平板電腦上，底部導(dǎo)航目標可以水平放置而不是堆疊放置咒钟。在這種情況下吹由，建議將目的地均勻分布在整個欄上。

狀態(tài)

底部導(dǎo)航目標可能處于活動狀態(tài)朱嘴，非活動狀態(tài)倾鲫，獲取焦點或處于按下狀態(tài)。

底部導(dǎo)航使用不透明度和文本來顯示目標何時處于活動狀態(tài)或用于顯示按下萍嬉，獲取焦點和未活動的狀態(tài)乌昔。

處于不活動狀態(tài)的目標具有較小的不透明性；活動狀態(tài)具有完全不透明性壤追。

image

1. 非活動狀態(tài)目標
2. 活動狀態(tài)目標
   狀態(tài)
   如果不始終使用文本標簽（始終）磕道，則僅為活動目標指定文本標簽。

image

1. 沒有文本標簽的非活動目標
2. 具有文本標簽的活動目標

主題

示例
貓頭鷹
色彩系統(tǒng)
將顏色應(yīng)用于UI

顏色

Owl的底部導(dǎo)航欄在三個元素上使用自定義顏色：容器行冰，活動的項目和不活動的項目溺蕉。

image

排版

了解排版
Owl的底部導(dǎo)航欄對文本標簽使用自定義排版悼做。

image

規(guī)格

手機

豎屏

image

image

image

image