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

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

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

用法

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

原則

人體工程學(xué)

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

一致性

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

相關(guān)

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

何時(shí)使用：

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

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

· 3至5個(gè)目標(biāo)選項(xiàng)；

· 僅限手機(jī)或平板電腦。

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

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

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

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

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

組合使用底部導(dǎo)航和選項(xiàng)卡可能會(huì)引起混淆，因?yàn)樗麄兣c內(nèi)容關(guān)系不夠清楚，選項(xiàng)卡擁有相同的主題，而底部導(dǎo)航是頂級(jí)功能且彼此無(wú)關(guān)聯(lián)。

剖析：

1. 導(dǎo)航欄；

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

3. 固定文字；

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

5. 活動(dòng)文字。

目標(biāo)展示：

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

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

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

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

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

圖標(biāo)：

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

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

文本標(biāo)簽：

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

使用短文本

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

避免縮小單行文本

避免文本折行顯示

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

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

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

避免使用不同的顏色或低強(qiáng)度被選中顏色來(lái)顯示圖標(biāo)和文本標(biāo)簽，因?yàn)檫@會(huì)使用戶難以區(qū)分活動(dòng)圖標(biāo)并導(dǎo)航到其他目標(biāo)視圖

行為：

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

Android：

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

IOS：

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

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

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

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

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

肩標(biāo)：

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

1. 肩標(biāo)；

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

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

滾動(dòng)：

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

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

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

過(guò)渡：

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

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

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

布局：

1. 覆蓋

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

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

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

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

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

3. 視覺優(yōu)化

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

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

狀態(tài)：

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

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

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

1. 非活動(dòng)目標(biāo)選項(xiàng)；

2. 活動(dòng)選項(xiàng)。

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

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

2. 帶有文本的活動(dòng)目標(biāo)選項(xiàng)。

細(xì)則：

移動(dòng)設(shè)備

標(biāo)注

最小寬度

最大寬度

布局

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

譯：行設(shè)視覺