Axure常用元件及使用規範：Bars篇（附原始檔下載）
作者對原型設計中的常用的一些通用元件進行了場景和規範整理，主要分為資訊欄Bars篇、檢視Views篇、控制元件Controls篇三章。本章主要介紹Bars篇，但原始檔已涵蓋所有篇元件，後續還會繼續更新迭代。
百度網盤下載地址
OA" target="_blank" rel="nofollow,noindex">https://pan.baidu.com/s/1M6OEK-adzNyNHyjIaSq6OA
一、頂部導航欄（Navigation Bars)
1. 使用場景
用於在層級資訊中的導航，也可以用來管理螢幕資訊。
2. 外觀
導航欄專案分為左中右三個區域，左側一般放置返回按鈕或左按鈕，右側放置右按鈕，中間則是提示資訊。
3. 通欄顯示
iOS：在iPhone上，導航是整屏通欄顯示的。在iPad上，導航欄可能會嵌在分欄中的某一欄裡，不會橫貫整屏。
Android：通欄顯示，當裝置尺寸發生變化時需進行自適展示，展示的資訊功能需根據尺寸大小對一些次要功能進行隱藏或露出。
4. 標題展示
iOS：使用當前檢視的標題作為導航欄的標題；標題左側出現返回按鈕，寫著前一級的標題。
Android：標題資訊可以根據上下文資訊實時轉換。
5. 原生規範【iOS Human Interface Guidelines】
- 考慮在程式的最頂一級的工具欄放置分段控制元件。
- 避免用過多的控制元件填滿導航欄，即使看起來空間足夠。
- 可以定義導航欄的顏色和透明度。
- 避免改變返回按鈕的外觀和行為。
- 不要建立分段的返回按鈕（比如麵包屑按鈕）。
- iPhone上需考慮由於裝置方向變化導致的導航欄自動改變。
6. 原生規範【Google Material Guidelines】
- 可定義上滑時隱藏頂部導航欄，下拉時展示頂部導航欄。
- 可定義導航欄的顏色，標題文案可根據上下文資訊實時轉換。
- 導航欄上的操作按鈕可以根據上下文需求進行轉換。
二、搜尋欄（Search Bars)
1. 使用場景
用於幫助使用者查詢內容或快速定位。
2. 外觀
- 不要增加額外的“搜尋”按鈕，利用手機提供的鍵盤的自帶“搜尋”按鈕。
- 放在頁面頂部位置，而不是頁面中部，更符合使用者的認知習慣。
3. 互動說明【搜尋過程】
- 預設狀態：預設展示搜尋提示詞；
- 獲取焦點：跳轉到搜尋頁，並展示熱門候選詞，最近搜尋記錄；
- 輸入中：根據輸入的內容展示聯想結果，如果候選詞包含在多個分類中，還需要提供分類展示頁面。
- 結果展示：用介面或者文字描述按照何種排序規則展示結果，如何展示。
4. 互動說明【呈現搜尋結果】
- 給使用者想要的預期結果，最吻合的結果排在最靠前；
- 保留使用者輸入的內容；
- 自動糾正使用者輸入的錯誤拼音，給出和錯誤拼音最貼切的（正確）結果。搜尋結果同理。
- 需要提示使用者輸入的內容無結果，比“無結果”更好的方式是“給使用者推薦其他內容”。
三、狀態列（Status Bars)
1. 使用場景
用於展示裝置和當前環境相關的重要資訊。
2. 外觀
總出現在螢幕頂部，包含網路連線、時間、電量等使用者需要的資訊。
3. 網路提示
iOS：在網路訪問的時候會顯示Loading的Indicator。
Android：會在開放使用者許可權或連線共享服務時顯示小箭頭。
4. 互動說明【返回頂部】
iOS：點選頂部狀態列後會返回頁面頂部。
Android：安卓不支援該互動。
5.互動說明【何時隱藏】
當用戶全屏觀看媒體或遊玩遊戲時，要將狀態列隱藏；否則最好不要隱藏。
四、底部導航欄（Tab/Bottom Bars)
1. 使用場景
用於切換子任務、檢視和模式。
2. 原生規範【iOS Human Interface Guidelines】
- 如果底部導航欄中的某個選項暫時不可用，不要將該選項置灰。在不可用而又點選了的情況下，頁面只要展示這個頁面為什麼沒有內容就可以了。
- 避免使用過多的選項。當然，如果選項過少也會有問題。一般在iPhone上，3到5個選項比較合適。在iPad上可以適量增加。
- 支援配置紅點或數字進行資訊提示。
3. 原生規範【Google Material Guidelines】
- 底部導航欄主要是為手機的導航設計的。如果是在較大的顯示屏上，比如桌面，則可以使用側邊導航。
- 僅展示最重要的3-5個功能。若低於3個，則使用標籤導航，不可超過5個，否則使用者會難以辨認選項。
- 底部導航是固定的，避免使用可橫滑的互動方式。
4. 互動說明【按鈕狀態】
按鈕分為預設態與選中態兩種狀態。
5. 互動說明【TAB點選】
- 當用戶選擇點選某個選項時，則應該直接展現相應的頁面，或者重新整理當前的頁面；注意不要在點選後展示選單或者彈出框，如果點選系統返回鍵，不會切換到底部導航欄上一次點選的頁面。
- 點選當前頁按鈕時，彈回當頁第一屏位置。
- 點選不同選項按鈕時，不需要橫滑切換動效。
6. 互動說明【是否固定】
- 如果涉及的APP層級簡單，不存在操作路徑和介面層級的路徑衝突，且下級介面不存在底部固定工具欄，那麼推薦使用固定處理。
- 如果涉及的APP介面資訊層級複雜，那麼推薦使用不固定方案。
五、工具欄（Tool Bars)
使用場景
用於操作/切換當前螢幕上的資訊。
外觀
工具欄一般放置於螢幕的底部，在iPad上也可能出現在頂部。工具欄上的控制元件等寬放置。
- 外觀1：圖示+文字
- 外觀2：純圖示
- 外觀3：純文字
原生規範【iOS Human Interface Guidelines】
- 工具欄上要放那些使用者能對當前內容所做的操作，不要用它來切換程式模式。
- 在工具欄上放置當前情景下使用者最常用的功能。
- 儘量避免在同一個工具欄上混合使用有邊框和無邊框的控制元件。
- 支援定義工具欄的顏色和透明度。
- iPhone上需考慮由於裝置方向變化導致的工具欄高度變化。
原生規範【Google Material Guidelines】
Google Material Guidelines中將Tool Bars作為WEB元件進行說明，而將上方的底部導航欄Bottom Bars作為移動端的元件使用，功能和場景同等於iOS的Tool Bars。
感謝閱讀，敬請期待後續Views篇和Controls篇。
文由 @愚者秦 原創釋出於人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議