本文翻譯了 Material Design 規(guī)范中對底部導航的規(guī)范總結(jié)，希望可以帶給你更多幫助。

本文翻譯了 Material Design 規(guī)范中對底部導航的規(guī)范總結(jié)，希望可以帶給你更多幫助。

備注：以下內(nèi)容在翻譯過程中根據(jù)閱讀習慣有相應的調(diào)整，如有不妥歡迎大家根據(jù)官網(wǎng)鏈接進行比對。

在移動應用程序中，底部導航欄可以在目標選項間自由切換。

用法

底部導航欄在屏幕底端展示3至5個目標選項，每一個選項由一個圖標和文字標簽展示，點擊底部導航圖標時，將帶領用戶前往與之關聯(lián)的視圖。

原則

人體工程學：底部導航欄在手持移動設備上容易觸及。

一致性：使用時，底部導航欄顯示在每個屏幕底部。

相關：底部導航欄上的選項必須同等重要。

何時使用

底部導航應用于：

• 需在移動應用程序任意位置訪問頂級目標
• 3至5個目標選項
• 僅限手機或平板電腦

底部導航不應用于：

• ·單個任務，例如查看單個電子郵件。
• ·用戶首選項或設置。

少于三個目標選項不要使用底部導航欄（使用標簽選項卡替代）。

避免使用超過5個目標選項（這種情況，嘗試選項卡或抽屜導航）。

組合使用底部導航和選項卡可能會引起混淆，因為他們與內(nèi)容關系不夠清楚，選項卡擁有相同的主題，而底部導航是頂級功能且彼此無關聯(lián)。

剖析

1. 導航欄
2. 固定圖標
3. 固定文字
4. 活動圖標
5. 活動文字

目標展示

展示底部導航目標選項的方式取決于目標選項使用數(shù)量：

• 三個目標：所有目標選項用圖標和文本標簽展示；
• 四個目標：活動目標展示圖標和文本標簽、固定目標展示圖標，建議使用文本標簽；
• 五個目標：活動目標展示圖標和文本標簽、固定目標展示圖標，空間允許則可顯示文本標簽。

此底部導航有三個目標，且每個都有圖標和文本標簽。

圖標

底部導航目標始終包含一個圖標，最好的方式是圖標結(jié)合文本標簽展示，尤其是如果圖標沒有明確含義。

圖標與文本標簽結(jié)合展示

文本標簽

文本標簽使用對底部導航功能簡短而有意義的文字。

使用短文本

避免截取文本，截取可能會掩蓋重要的目標信息

避免縮小單行文本

避免文本折行顯示

圖標和文本標簽顏色

活動、非活動圖標以及文本標簽應與導航欄底塊有明顯的對比，活動圖標應使用應用程序主題色或高強度被選中顏色展示，具體取決于組件的配色方案。非活動圖標和文本標簽可使用中強度的被選中顏色來展示。

底部導航活動標簽使用應用主題色或高強度被選中顏色顯示

避免使用不同的顏色或低強度被選中顏色來顯示圖標和文本標簽，因為這會使用戶難以區(qū)分活動圖標并導航到其他目標視圖。

行為

Android和iOS系統(tǒng)的底部導航會顯示不同，當你選擇底部導航選項時（當前未被選中），每個系統(tǒng)會有不同的顯示結(jié)果：

Android：

該應用導航到目標頂級視圖界面；重置任何先前的用戶交互和臨時屏幕狀態(tài)，例如滾動位置，選項卡選擇和內(nèi)聯(lián)搜索。

iOS：

目的地反映了用戶之前的交互。如果用戶先前訪問過應用程序的該部分，則會返回到上一次查看的最后一個視圖（如果可能，保留其先前狀態(tài)）；否則，應用程序會導航到頂級視圖。

可以在需要時覆蓋默認平臺導航以改善用戶體驗。例如，需要在各部分之間頻繁切換的Android應用程序可以保留每個部分的狀態(tài)?；蛘撸琲OS應用程序可以將用戶返回到頂級視圖（或重置其滾動位置），如果它更適合用例。

在Android上，重新訪問某個部分會重置該應用，將用戶返回到其頂級視圖。

在iOS上，當用戶重新訪問某個界面時，會返回到該界面停止的位置，例如詳細信息視圖界面。

當在應用程序的層次結(jié)構中向下移動時（從父屏幕到子屏幕），可以持久顯示底部導航欄，以便在應用程序的各個部分之間快速導航。

肩標：

底部導航圖標可以在其右上角使用肩標。這些標記可包含動態(tài)信息，例如一些待處理請求。

1. 肩標；
2. 帶有字符的肩標；
3. 帶有最大字符的肩標。

滾動：

滾動時，底部導航欄可以顯示或隱藏。

1. 向下滾動加載內(nèi)容時，隱藏底部導航欄；
2. 向上滾動回頂部時，重新顯示底部導航欄。

過渡：

建議使用淡入淡出的動畫在底部導航目標之間進行過渡。橫向運動（一側(cè)到另側(cè)）過渡可能意味著不存在的項目之間的對等關系，或誤導用戶認為他們可以使用手勢在各部分之間導航。

使用淡入淡出動畫在活動和非活動底部導航目標間過渡切換。

避免使用橫向運動在視圖之間切換。橫向運動保留用于對等目標間導航。

布局

1. 覆蓋

底部導航可以被對話框、底部表單、抽屜導航、屏幕鍵盤或完成流程所需的其他元素臨時覆蓋。它們不應在任何屏幕上永久顯示。

“Radio”屏幕的搜索功能觸發(fā)屏幕鍵盤，暫時覆蓋底部導航欄，直到搜索流程完成。

2. 固定導航欄

底部導航欄目標選項有固定位置，它們不會滾動或水平移動。

避免使用可滾動底部導航。

3. 視覺優(yōu)化

在移動設備（橫屏）或平板電腦上，底部導航目標可以保留縱向模式中使用的相同間距，而不是均勻分布在底部導航欄上。

在移動設備（橫屏）或平板電腦上，底部導航目的地可以水平放置而不是折行。在這種情況下，建議選項均勻分布在底部導航欄上。

狀態(tài)

底部導航目標可以是活動的、非活動的、聚焦或被選擇。

底部導航通過不透明度和文本來顯示選項何時處于活動狀態(tài)。狀態(tài)用于顯示按下、聚焦和未選擇狀態(tài)。

非活動目標降低透明度，活動目標則全部顯示。

1. 非活動目標選項；
2. 活動選項。

如果不始終顯示文本標簽，則只顯示活動目標的文字。

1. 沒有文本的非活動目標選項；
2. 帶有文本的活動目標選項。

細則

移動設備

標注：

最小寬度

最大寬度

布局

今天分享的內(nèi)容到此結(jié)束，更多相關延展內(nèi)容，大家可以在官網(wǎng)進行查看。

原文鏈接：https://material.io/design/components/bottom-navigation.html#behavior

譯文地址：https://mp.weixin.qq.com/s/Q1Pw0aw2nTCqdIhFYDY2Aw

編譯作者：黎沫limo，公眾號：行設視覺

本文由 @黎沫limo 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。