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

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

在移動應(yīng)用程序中，底部導(dǎo)航欄可以在目標(biāo)選項間自由切換。

用法

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

原則

人體工程學(xué)

底部導(dǎo)航欄在手持移動設(shè)備上容易觸及

一致性

使用時，底部導(dǎo)航欄顯示在每個屏幕底部

相關(guān)

底部導(dǎo)航欄上的選項必須同等重要

何時使用：

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

· 需在移動應(yīng)用程序任意位置訪問頂級目標(biāo)；

· 3至5個目標(biāo)選項；

· 僅限手機或平板電腦。

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

· 單個任務(wù)，例如查看單個電子郵件；

· 用戶首選項或設(shè)置。

少于三個目標(biāo)選項不要使用底部導(dǎo)航欄（使用標(biāo)簽選項卡替代）

避免使用超過5個目標(biāo)選項（這種情況，嘗試選項卡或抽屜導(dǎo)航）

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

剖析：

1. 導(dǎo)航欄；

2. 固定圖標(biāo)；

3. 固定文字；

4. 活動圖標(biāo)；

5. 活動文字。

目標(biāo)展示：

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

· 三個目標(biāo)：所有目標(biāo)選項用圖標(biāo)和文本標(biāo)簽展示；

· 四個目標(biāo)：活動目標(biāo)展示圖標(biāo)和文本標(biāo)簽、固定目標(biāo)展示圖標(biāo)，建議使用文本標(biāo)簽；

· 五個目標(biāo)：活動目標(biāo)展示圖標(biāo)和文本標(biāo)簽、固定目標(biāo)展示圖標(biāo)，空間允許則可顯示文本標(biāo)簽。

此底部導(dǎo)航有三個目標(biāo)，且每個都有圖標(biāo)和文本標(biāo)簽

圖標(biāo)：

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

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

文本標(biāo)簽：

文本標(biāo)簽使用對底部導(dǎo)航功能簡短而有意義的文字

使用短文本

避免截取文本，截取可能會掩蓋重要的目標(biāo)信息

避免縮小單行文本

避免文本折行顯示

圖標(biāo)和文本標(biāo)簽顏色：

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

底部導(dǎo)航活動標(biāo)簽使用應(yīng)用主題色或高強度被選中顏色顯示

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

行為：

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

Android：

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

IOS：

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

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

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

在IOS上，當(dāng)用戶重新訪問某個界面時，會返回到該界面停止的位置，例如詳細(xì)信息視圖界面。

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

肩標(biāo)：

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

1. 肩標(biāo)；

2. 帶有字符的肩標(biāo)；

3. 帶有最大字符的肩標(biāo)。

滾動：

滾動時，底部導(dǎo)航欄可以顯示或隱藏。

1. 向下滾動加載內(nèi)容時，隱藏底部導(dǎo)航欄；

2. 向上滾動回頂部時，重新顯示底部導(dǎo)航欄。

過渡：

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

使用淡入淡出動畫在活動和非活動底部導(dǎo)航目標(biāo)間過渡切換

避免使用橫向運動在視圖之間切換。橫向運動保留用于對等目標(biāo)間導(dǎo)航。

布局：

1. 覆蓋

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

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

2. 固定導(dǎo)航欄

底部導(dǎo)航欄目標(biāo)選項有固定位置，它們不會滾動或水平移動。

避免使用可滾動底部導(dǎo)航

3. 視覺優(yōu)化

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

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

狀態(tài)：

底部導(dǎo)航目標(biāo)可以是活動的、非活動的、聚焦或被選擇。

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

非活動目標(biāo)降低透明度，活動目標(biāo)則全部顯示。

1. 非活動目標(biāo)選項；

2. 活動選項。

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

1. 沒有文本的非活動目標(biāo)選項；

2. 帶有文本的活動目標(biāo)選項。

細(xì)則：

移動設(shè)備

標(biāo)注

最小寬度

最大寬度

布局

原創(chuàng)：?黎沫limo?

譯：行設(shè)視覺