作者對(duì)原型設(shè)計(jì)中的常用的一些通用元件進(jìn)行了場(chǎng)景和規(guī)范整理，主要分為信息欄Bars篇、視圖Views篇、控件Controls篇三章。本章主要介紹Bars篇，但源文件已涵蓋所有篇組件，后續(xù)還會(huì)繼續(xù)更新迭代。

百度網(wǎng)盤下載地址

https://pan.baidu.com/s/1M6OEK-adzNyNHyjIaSq6OA

一、頂部導(dǎo)航欄（Navigation Bars)

1. 使用場(chǎng)景

用于在層級(jí)信息中的導(dǎo)航，也可以用來(lái)管理屏幕信息。

2. 外觀

導(dǎo)航欄項(xiàng)目分為左中右三個(gè)區(qū)域，左側(cè)一般放置返回按鈕或左按鈕，右側(cè)放置右按鈕，中間則是提示信息。

3. 通欄顯示

iOS：在iPhone上，導(dǎo)航是整屏通欄顯示的。在iPad上，導(dǎo)航欄可能會(huì)嵌在分欄中的某一欄里，不會(huì)橫貫整屏。

Android：通欄顯示，當(dāng)設(shè)備尺寸發(fā)生變化時(shí)需進(jìn)行自適展示，展示的信息功能需根據(jù)尺寸大小對(duì)一些次要功能進(jìn)行隱藏或露出。

4. 標(biāo)題展示

iOS：使用當(dāng)前視圖的標(biāo)題作為導(dǎo)航欄的標(biāo)題；標(biāo)題左側(cè)出現(xiàn)返回按鈕，寫著前一級(jí)的標(biāo)題。

Android：標(biāo)題信息可以根據(jù)上下文信息實(shí)時(shí)轉(zhuǎn)換。

5. 原生規(guī)范【iOS Human Interface Guidelines】

1. ?考慮在程序的最頂一級(jí)的工具欄放置分段控件。
2. ?避免用過(guò)多的控件填滿導(dǎo)航欄，即使看起來(lái)空間足夠。
3. ?可以定義導(dǎo)航欄的顏色和透明度。
4. ?避免改變返回按鈕的外觀和行為。
5. ?不要?jiǎng)?chuàng)建分段的返回按鈕（比如面包屑按鈕）。
6. ?iPhone上需考慮由于設(shè)備方向變化導(dǎo)致的導(dǎo)航欄自動(dòng)改變。

6. 原生規(guī)范【Google Material Guidelines】

1. ?可定義上滑時(shí)隱藏頂部導(dǎo)航欄，下拉時(shí)展示頂部導(dǎo)航欄。
2. ?可定義導(dǎo)航欄的顏色，標(biāo)題文案可根據(jù)上下文信息實(shí)時(shí)轉(zhuǎn)換。
3. ?導(dǎo)航欄上的操作按鈕可以根據(jù)上下文需求進(jìn)行轉(zhuǎn)換。

二、搜索欄（Search Bars)

1. 使用場(chǎng)景

用于幫助用戶查找內(nèi)容或快速定位。

2. 外觀

1. ?不要增加額外的“搜索”按鈕，利用手機(jī)提供的鍵盤的自帶“搜索”按鈕。
2. ?放在頁(yè)面頂部位置，而不是頁(yè)面中部，更符合用戶的認(rèn)知習(xí)慣。

3. 交互說(shuō)明【搜索過(guò)程】

1. ?默認(rèn)狀態(tài)：默認(rèn)展示搜索提示詞；
2. ?獲取焦點(diǎn)：跳轉(zhuǎn)到搜索頁(yè)，并展示熱門候選詞，最近搜索記錄；
3. ?輸入中：根據(jù)輸入的內(nèi)容展示聯(lián)想結(jié)果，如果候選詞包含在多個(gè)分類中，還需要提供分類展示頁(yè)面。
4. ?結(jié)果展示：用界面或者文字描述按照何種排序規(guī)則展示結(jié)果，如何展示。

4. 交互說(shuō)明【呈現(xiàn)搜索結(jié)果】

1. ?給用戶想要的預(yù)期結(jié)果，最吻合的結(jié)果排在最靠前；
2. ?保留用戶輸入的內(nèi)容；
3. ?自動(dòng)糾正用戶輸入的錯(cuò)誤拼音，給出和錯(cuò)誤拼音最貼切的（正確）結(jié)果。搜索結(jié)果同理。
4. ?需要提示用戶輸入的內(nèi)容無(wú)結(jié)果，比“無(wú)結(jié)果”更好的方式是“給用戶推薦其他內(nèi)容”。

三、狀態(tài)欄（Status Bars)

1. 使用場(chǎng)景

用于展示設(shè)備和當(dāng)前環(huán)境相關(guān)的重要信息。

2. 外觀

總出現(xiàn)在屏幕頂部，包含網(wǎng)絡(luò)連接、時(shí)間、電量等用戶需要的信息。

3. 網(wǎng)絡(luò)提示

iOS：在網(wǎng)絡(luò)訪問(wèn)的時(shí)候會(huì)顯示Loading的Indicator。

Android：會(huì)在開放用戶權(quán)限或連接共享服務(wù)時(shí)顯示小箭頭。

4. 交互說(shuō)明【返回頂部】

iOS：點(diǎn)擊頂部狀態(tài)欄后會(huì)返回頁(yè)面頂部。

Android：安卓不支持該交互。

5.交互說(shuō)明【何時(shí)隱藏】

當(dāng)用戶全屏觀看媒體或游玩游戲時(shí)，要將狀態(tài)欄隱藏；否則最好不要隱藏。

四、底部導(dǎo)航欄（Tab/Bottom Bars)

1. 使用場(chǎng)景

用于切換子任務(wù)、視圖和模式。

2. 原生規(guī)范【iOS Human Interface Guidelines】

1. ?如果底部導(dǎo)航欄中的某個(gè)選項(xiàng)暫時(shí)不可用，不要將該選項(xiàng)置灰。在不可用而又點(diǎn)擊了的情況下，頁(yè)面只要展示這個(gè)頁(yè)面為什么沒(méi)有內(nèi)容就可以了。
2. ?避免使用過(guò)多的選項(xiàng)。當(dāng)然，如果選項(xiàng)過(guò)少也會(huì)有問(wèn)題。一般在iPhone上，3到5個(gè)選項(xiàng)比較合適。在iPad上可以適量增加。
3. ?支持配置紅點(diǎn)或數(shù)字進(jìn)行信息提示。

3. 原生規(guī)范【Google Material Guidelines】

1. ?底部導(dǎo)航欄主要是為手機(jī)的導(dǎo)航設(shè)計(jì)的。如果是在較大的顯示屏上，比如桌面，則可以使用側(cè)邊導(dǎo)航。
2. ?僅展示最重要的3-5個(gè)功能。若低于3個(gè)，則使用標(biāo)簽導(dǎo)航，不可超過(guò)5個(gè)，否則用戶會(huì)難以辨認(rèn)選項(xiàng)。
3. ?底部導(dǎo)航是固定的，避免使用可橫滑的交互方式。

4. 交互說(shuō)明【按鈕狀態(tài)】

按鈕分為默認(rèn)態(tài)與選中態(tài)兩種狀態(tài)。

5. 交互說(shuō)明【TAB點(diǎn)擊】

1. ?當(dāng)用戶選擇點(diǎn)擊某個(gè)選項(xiàng)時(shí)，則應(yīng)該直接展現(xiàn)相應(yīng)的頁(yè)面，或者刷新當(dāng)前的頁(yè)面；注意不要在點(diǎn)擊后展示菜單或者彈出框，如果點(diǎn)擊系統(tǒng)返回鍵，不會(huì)切換到底部導(dǎo)航欄上一次點(diǎn)擊的頁(yè)面。
2. ?點(diǎn)擊當(dāng)前頁(yè)按鈕時(shí)，彈回當(dāng)頁(yè)第一屏位置。
3. ?點(diǎn)擊不同選項(xiàng)按鈕時(shí)，不需要橫滑切換動(dòng)效。

6. 交互說(shuō)明【是否固定】

1. ?如果涉及的APP層級(jí)簡(jiǎn)單，不存在操作路徑和界面層級(jí)的路徑?jīng)_突，且下級(jí)界面不存在底部固定工具欄，那么推薦使用固定處理。
2. ?如果涉及的APP界面信息層級(jí)復(fù)雜，那么推薦使用不固定方案。

五、工具欄（Tool Bars)

使用場(chǎng)景

用于操作/切換當(dāng)前屏幕上的信息。

外觀

工具欄一般放置于屏幕的底部，在iPad上也可能出現(xiàn)在頂部。工具欄上的控件等寬放置。

• 外觀1：圖標(biāo)+文字
• 外觀2：純圖標(biāo)
• 外觀3：純文字

原生規(guī)范【iOS Human Interface Guidelines】

1. ?工具欄上要放那些用戶能對(duì)當(dāng)前內(nèi)容所做的操作，不要用它來(lái)切換程序模式。
2. ?在工具欄上放置當(dāng)前情景下用戶最常用的功能。
3. ?盡量避免在同一個(gè)工具欄上混合使用有邊框和無(wú)邊框的控件。
4. ?支持定義工具欄的顏色和透明度。
5. ?iPhone上需考慮由于設(shè)備方向變化導(dǎo)致的工具欄高度變化。

原生規(guī)范【Google Material Guidelines】

Google Material Guidelines中將Tool Bars作為WEB元件進(jìn)行說(shuō)明，而將上方的底部導(dǎo)航欄Bottom Bars作為移動(dòng)端的元件使用，功能和場(chǎng)景同等于iOS的Tool Bars。

感謝閱讀，敬請(qǐng)期待后續(xù)Views篇和Controls篇。

文由 @愚者秦?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議