起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識B端通用組件使用法則（三）
編輯導語：在上篇文章里，作者對B端產品的表格和樹形控件做了詳細闡述，《B端通用組件使用法則（二）》。本篇文章作者繼續(xù)對導航類組件和反饋類組件進行介紹，讓我們一起來看一下吧。
一、導航
導航類組件用來告知用戶當前處于什么位置，可以去哪里。
1. 設計原則
1）分組合理
如果導航具有層級性，那要保證導航之間的分組是合理的，且符合用戶使用路徑。
2）多接入點
對于同一個目的，合理提供用戶多個鏈接進行導航。
3）返回有序
要讓用戶在頁面上返回的時候具有連貫性，而不應該忽然回不去了。
2. 頁頭（帶返回）
通常的頁頭只帶頁面標題，告知用戶當前處于什么位置。而帶返回按鈕的頁頭，允許用戶返回上一層級。一般來說，使用帶返回的頁頭時，不推薦使用面包屑。
3. 標題
標題組件服務于頁面內的內容信息，起到為內容信息分組的作用，幫助用戶更快速的查找信息。
4. 可折疊標題
當頁面內容信息較多，在簡單分組的情況下，用戶依然需要通過滾動條查找處于頁面底部的信息，使用可折疊標題來收納內容。允許用戶關注重要信息，將不重要的信息折疊起來。
5. 下拉菜單
當頁面上的操作命令過多時，用此組件可以收納操作元素。點擊或移入觸點，會出現(xiàn)一個下拉菜單?？稍诹斜碇羞M行選擇，并執(zhí)行相應的命令。
6. 面包屑
當系統(tǒng)擁有兩級以上的層級結構時，面包屑能顯示當前頁面在系統(tǒng)層級結構中的位置，并能向上返回（返回非只有上層，而是任意層級）。
7. 標簽頁
提供平級的區(qū)域將大塊內容進行收納和展現(xiàn)，保持界面整潔。
8. 可編輯標簽頁
標簽頁可以被重命名、排序、刪除的時候使用。
9. 步驟類標簽頁
該標簽頁帶有步驟條屬性，但步驟之間可以隨意切換，不具有前后關聯(lián)的強制約束性。
10. 更多標簽頁
當標簽頁很多的時候，可以置入“更多”按鈕。
11. 步驟條
當任務復雜或者存在先后關系時，將其分解成一系列步驟，從而簡化任務。
12. 表格分頁器
功能齊全，可以改變表格每頁顯示條目數(shù)，可以快速跳轉到某一頁。
13. 迷你分頁器
在彈框和下拉面板中，使用迷你分頁器可以節(jié)省地方。
14. 錨點
當頁面上同一層級的分塊信息很多，需要頁面滾動條支撐查看更多信息的時候，使用可供跳轉的錨點鏈接，達到快速在錨點之間跳轉的作用。
二、反饋
反饋類組件用于在必要時向用戶反饋操作結果，做到合理有效的信息傳達。
1. 設計原則
1）反饋一致
對于同一類型的消息反饋，使用同一類型的組件。
2）符合場景
不同的場景，使用不同的反饋組件，例如系統(tǒng)主動推送消息類型的使用通知提醒框。
3）描述精確
合理而精確的消息提示文案描述，可以幫助用戶高效理解。
1. 告警提示
當某個頁面需要向用戶提供告警信息時，使用告警提示。通常告警提示在頁面上不會自己消失，用戶可以手動關閉。
2. 全局提示
在當前頁面以輕量級提示方式告知用戶操作的結果，使用全局提示。通常提示框在頁面頂部居中顯示并且會自動消失，不打斷用戶的其他操作行為。
3. 通知提醒框
一般在系統(tǒng)主動推動通知的情況下使用。
- 在界面四個角上都可顯示通知提醒，但在同一系統(tǒng)中需保持一致；
- 帶有較為復雜的內容；
- 提醒框中可以顯示下一步的行動點。
4. 內容型彈出框
內容型彈出框為模態(tài)彈框，需要用戶處理事務，又不希望跳轉頁面以致打斷工作流程時使用。
5. 提示型彈出框
提示型彈出框為模態(tài)彈框，提醒用戶完成當前工作流之外的重要操作（例如提醒用戶他即將刪除一條重要的數(shù)據(jù)，是否還要繼續(xù)）。
6. 氣泡確認框
氣泡確認框為非模態(tài)彈框，它以輕量級不打斷用戶工作心流的方式提醒用戶完成當前工作流之外的重要操作。通常它在目標元素附近彈出浮層提示，詢問用戶。
7. 進度條
在操作需要較長時間才能完成時，為用戶顯示該操作的當前進度和狀態(tài)。
8. 加載中
頁面局部處于等待異步數(shù)據(jù)或正在渲染過程時，合適的加載動效會有效緩解用戶的焦慮。通常用于頁面和區(qū)塊的加載中狀態(tài)。
作者：知果；公眾號：知果日記
本文由 @知果 原創(chuàng)發(fā)布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協(xié)議。
1