編輯導(dǎo)語(yǔ)：在上篇文章里，作者對(duì)B端產(chǎn)品的表格和樹(shù)形控件做了詳細(xì)闡述，《B端通用組件使用法則（二）》。本篇文章作者繼續(xù)對(duì)導(dǎo)航類組件和反饋類組件進(jìn)行介紹，讓我們一起來(lái)看一下吧。

一、導(dǎo)航

導(dǎo)航類組件用來(lái)告知用戶當(dāng)前處于什么位置，可以去哪里。

1. 設(shè)計(jì)原則

1）分組合理

如果導(dǎo)航具有層級(jí)性，那要保證導(dǎo)航之間的分組是合理的，且符合用戶使用路徑。

2）多接入點(diǎn)

對(duì)于同一個(gè)目的，合理提供用戶多個(gè)鏈接進(jìn)行導(dǎo)航。

3）返回有序

要讓用戶在頁(yè)面上返回的時(shí)候具有連貫性，而不應(yīng)該忽然回不去了。

2. 頁(yè)頭（帶返回）

通常的頁(yè)頭只帶頁(yè)面標(biāo)題，告知用戶當(dāng)前處于什么位置。而帶返回按鈕的頁(yè)頭，允許用戶返回上一層級(jí)。一般來(lái)說(shuō)，使用帶返回的頁(yè)頭時(shí)，不推薦使用面包屑。

3. 標(biāo)題

標(biāo)題組件服務(wù)于頁(yè)面內(nèi)的內(nèi)容信息，起到為內(nèi)容信息分組的作用，幫助用戶更快速的查找信息。

4. 可折疊標(biāo)題

當(dāng)頁(yè)面內(nèi)容信息較多，在簡(jiǎn)單分組的情況下，用戶依然需要通過(guò)滾動(dòng)條查找處于頁(yè)面底部的信息，使用可折疊標(biāo)題來(lái)收納內(nèi)容。允許用戶關(guān)注重要信息，將不重要的信息折疊起來(lái)。

5. 下拉菜單

當(dāng)頁(yè)面上的操作命令過(guò)多時(shí)，用此組件可以收納操作元素。點(diǎn)擊或移入觸點(diǎn)，會(huì)出現(xiàn)一個(gè)下拉菜單?？稍诹斜碇羞M(jìn)行選擇，并執(zhí)行相應(yīng)的命令。

6. 面包屑

當(dāng)系統(tǒng)擁有兩級(jí)以上的層級(jí)結(jié)構(gòu)時(shí)，面包屑能顯示當(dāng)前頁(yè)面在系統(tǒng)層級(jí)結(jié)構(gòu)中的位置，并能向上返回（返回非只有上層，而是任意層級(jí)）。

7. 標(biāo)簽頁(yè)

提供平級(jí)的區(qū)域?qū)⒋髩K內(nèi)容進(jìn)行收納和展現(xiàn)，保持界面整潔。

8. 可編輯標(biāo)簽頁(yè)

標(biāo)簽頁(yè)可以被重命名、排序、刪除的時(shí)候使用。

9. 步驟類標(biāo)簽頁(yè)

該標(biāo)簽頁(yè)帶有步驟條屬性，但步驟之間可以隨意切換，不具有前后關(guān)聯(lián)的強(qiáng)制約束性。

10. 更多標(biāo)簽頁(yè)

當(dāng)標(biāo)簽頁(yè)很多的時(shí)候，可以置入“更多”按鈕。

11. 步驟條

當(dāng)任務(wù)復(fù)雜或者存在先后關(guān)系時(shí)，將其分解成一系列步驟，從而簡(jiǎn)化任務(wù)。

12. 表格分頁(yè)器

功能齊全，可以改變表格每頁(yè)顯示條目數(shù)，可以快速跳轉(zhuǎn)到某一頁(yè)。

13. 迷你分頁(yè)器

在彈框和下拉面板中，使用迷你分頁(yè)器可以節(jié)省地方。

14. 錨點(diǎn)

當(dāng)頁(yè)面上同一層級(jí)的分塊信息很多，需要頁(yè)面滾動(dòng)條支撐查看更多信息的時(shí)候，使用可供跳轉(zhuǎn)的錨點(diǎn)鏈接，達(dá)到快速在錨點(diǎn)之間跳轉(zhuǎn)的作用。

二、反饋

反饋類組件用于在必要時(shí)向用戶反饋操作結(jié)果，做到合理有效的信息傳達(dá)。

1. 設(shè)計(jì)原則

1）反饋一致

對(duì)于同一類型的消息反饋，使用同一類型的組件。

2）符合場(chǎng)景

不同的場(chǎng)景，使用不同的反饋組件，例如系統(tǒng)主動(dòng)推送消息類型的使用通知提醒框。

3）描述精確

合理而精確的消息提示文案描述，可以幫助用戶高效理解。

1. 告警提示

當(dāng)某個(gè)頁(yè)面需要向用戶提供告警信息時(shí)，使用告警提示。通常告警提示在頁(yè)面上不會(huì)自己消失，用戶可以手動(dòng)關(guān)閉。

2. 全局提示

在當(dāng)前頁(yè)面以輕量級(jí)提示方式告知用戶操作的結(jié)果，使用全局提示。通常提示框在頁(yè)面頂部居中顯示并且會(huì)自動(dòng)消失，不打斷用戶的其他操作行為。

3. 通知提醒框

一般在系統(tǒng)主動(dòng)推動(dòng)通知的情況下使用。

• 在界面四個(gè)角上都可顯示通知提醒，但在同一系統(tǒng)中需保持一致；
• 帶有較為復(fù)雜的內(nèi)容；
• 提醒框中可以顯示下一步的行動(dòng)點(diǎn)。

4. 內(nèi)容型彈出框

內(nèi)容型彈出框?yàn)槟B(tài)彈框，需要用戶處理事務(wù)，又不希望跳轉(zhuǎn)頁(yè)面以致打斷工作流程時(shí)使用。

5. 提示型彈出框

提示型彈出框?yàn)槟B(tài)彈框，提醒用戶完成當(dāng)前工作流之外的重要操作（例如提醒用戶他即將刪除一條重要的數(shù)據(jù)，是否還要繼續(xù)）。

6. 氣泡確認(rèn)框

氣泡確認(rèn)框?yàn)榉悄B(tài)彈框，它以輕量級(jí)不打斷用戶工作心流的方式提醒用戶完成當(dāng)前工作流之外的重要操作。通常它在目標(biāo)元素附近彈出浮層提示，詢問(wèn)用戶。

7. 進(jìn)度條

在操作需要較長(zhǎng)時(shí)間才能完成時(shí)，為用戶顯示該操作的當(dāng)前進(jìn)度和狀態(tài)。

8. 加載中

頁(yè)面局部處于等待異步數(shù)據(jù)或正在渲染過(guò)程時(shí)，合適的加載動(dòng)效會(huì)有效緩解用戶的焦慮。通常用于頁(yè)面和區(qū)塊的加載中狀態(tài)。

作者：知果；公眾號(hào)：知果日記

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

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