很多產(chǎn)品經(jīng)理和設(shè)計(jì)師在設(shè)計(jì) B 端產(chǎn)品界面的時(shí)候不知道該怎么辦，今天筆者給大家匯總了一些 B 端典型界面及其設(shè)計(jì)原則，幫助大家從容應(yīng)對(duì)界面設(shè)計(jì)，不再不知所措。

Dashboard

Dashboard 頁(yè)通常作為產(chǎn)品的首頁(yè)出現(xiàn)，產(chǎn)品內(nèi)各種重要的數(shù)據(jù)和信息都會(huì)展現(xiàn)在 Dashboard 上。用戶可以通過(guò)點(diǎn)擊 Dashboard 上的卡片或卡片上某條數(shù)據(jù)，快速鏈接到詳情，這大大縮短了用戶獲取信息的路徑。產(chǎn)品團(tuán)隊(duì)也可以通過(guò) Dashboard 頁(yè)，向用戶傳遞產(chǎn)品迭代、運(yùn)營(yíng)活動(dòng)等內(nèi)容。

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

模塊獨(dú)立

Dashboard 是由承載不同內(nèi)容的卡片組成的，每塊卡片的內(nèi)容都要獨(dú)立，不該交叉。

有效統(tǒng)計(jì)

Dashboard 上所呈現(xiàn)的數(shù)據(jù)最重要的就是該數(shù)據(jù)是否為用戶真實(shí)所需，如果統(tǒng)計(jì)數(shù)據(jù)不對(duì)用戶產(chǎn)生任何價(jià)值，那還不如不統(tǒng)計(jì)，否則會(huì)干擾用戶。

短路徑導(dǎo)航

了解用戶需要使用 Dashboard 的核心目標(biāo)，為用戶通過(guò) Dashboard 達(dá)到數(shù)據(jù)詳情頁(yè)提供最短的路徑導(dǎo)航。

2. 工作臺(tái)

使用場(chǎng)景

將用戶需要待辦的事項(xiàng)、事項(xiàng)處理的進(jìn)度等都完整的展示出來(lái)，方便用戶隨時(shí)查看，提升用戶的工作效率。

核心功能

核心統(tǒng)計(jì)數(shù)據(jù)、待辦任務(wù)、快捷入口、通知公告等。

設(shè)計(jì)建議

• 展示與使用角色日常工作相關(guān)模塊，并且將重要模塊放在首屏。
• 總模塊數(shù)量盡量控制在 59 個(gè)。
• 不同的角色需求不同，應(yīng)提供基于角色的差異化視圖。

3. 新手引導(dǎo)

使用場(chǎng)景

當(dāng)新用戶第一次使用產(chǎn)品時(shí)，為了減少用戶的困難和快速完成用戶的任務(wù)，新手引導(dǎo)頁(yè)可以將核心操作鏈路展現(xiàn)給用戶。

核心功能

產(chǎn)品介紹、核心功能使用手冊(cè)、相關(guān)內(nèi)容指引。

設(shè)計(jì)建議

• 引導(dǎo)步驟盡量控制在 35 步。
• 引導(dǎo)語(yǔ)盡量簡(jiǎn)短并闡明要義。
• 可以添加視頻學(xué)習(xí)窗口，幫助用戶快速上手。

4. 監(jiān)控頁(yè)

使用場(chǎng)景

監(jiān)控頁(yè)是數(shù)據(jù)可視化頁(yè)面中的一種，它通過(guò)一系列對(duì)數(shù)據(jù)高度概括的圖表來(lái)展現(xiàn)系統(tǒng)的核心指標(biāo)。指標(biāo)監(jiān)控頁(yè)的使用者通常是管理者（即決策者），他們需要看到系統(tǒng)整體的運(yùn)行狀態(tài)，監(jiān)控全局?jǐn)?shù)據(jù)，從而調(diào)整自己的決策。

核心功能

關(guān)鍵指標(biāo)統(tǒng)計(jì)。

設(shè)計(jì)建議

• 展示決策者關(guān)注的核心指標(biāo)，并將重要模塊靠前展示。
• 使用合理的圖表展現(xiàn)數(shù)據(jù)。
• 圖表配色要符合數(shù)據(jù)的特性，例如警示用黃色。
• 允許用戶可以下鉆查看詳情。

5. 分析頁(yè)

使用場(chǎng)景

分析頁(yè)也是數(shù)據(jù)可視化頁(yè)面中的一種，它通過(guò)對(duì)系統(tǒng)多維度的詳細(xì)分析來(lái)展示系統(tǒng)的情況，從而使使用者可以發(fā)現(xiàn)問(wèn)題，并盡早找出解決辦法。監(jiān)控頁(yè)重在總覽，而分析頁(yè)重在明細(xì)，因此，分析頁(yè)的使用者通常是執(zhí)行者。

核心功能

關(guān)鍵指標(biāo)明細(xì)分析。

設(shè)計(jì)建議

• 展示執(zhí)行者關(guān)注的明細(xì)指標(biāo)，并將重要模塊靠前展示。
• 使用合理的圖表展現(xiàn)數(shù)據(jù)。
• 明細(xì)數(shù)據(jù)模塊不宜過(guò)多，59 個(gè)為宜。

表格頁(yè)

表格頁(yè)可以處理大量的數(shù)據(jù)條目，同時(shí)可以導(dǎo)航至對(duì)應(yīng)數(shù)據(jù)的詳情頁(yè)。在表格頁(yè)中，用戶可以查詢自己所需要的數(shù)據(jù)條目，以及對(duì)比數(shù)據(jù)條目、新增數(shù)據(jù)條目、刪除數(shù)據(jù)條目等。

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

模塊清晰

表格頁(yè)通常由查詢區(qū)、按鈕區(qū)、表格區(qū)、分頁(yè)器等模塊組成，要保證模塊間層次合理與清晰。

數(shù)據(jù)格式

表格頁(yè)中最大的模塊為表格區(qū)，該區(qū)域由列組成，列由數(shù)據(jù)構(gòu)成，列中的數(shù)據(jù)格式展現(xiàn)要符合業(yè)務(wù)及用戶的需求，例如“星期三”不能表現(xiàn)成“星期 3”。

數(shù)據(jù)對(duì)齊

對(duì)齊方式合理的數(shù)據(jù)，有利于用戶定位數(shù)據(jù)、分析數(shù)據(jù)。通常數(shù)據(jù)對(duì)齊方式為數(shù)值右對(duì)齊，文本左對(duì)齊，特殊情況居中對(duì)齊。

2. 使用場(chǎng)景

全表格頁(yè)是最常見(jiàn)的產(chǎn)品界面，全表格頁(yè)主要由篩選條件、按鈕區(qū)、表格區(qū)、分頁(yè)器組成。表格區(qū)是表格頁(yè)中的主角，當(dāng)界面數(shù)據(jù)只需要一張表呈現(xiàn)的時(shí)候，使用全表格頁(yè)。

核心功能

多字段篩選、操作區(qū)、表格區(qū)、分頁(yè)器。

設(shè)計(jì)建議

• 將重要的字段和用戶使用頻率較高的字段放置在表格靠前的位置。
• 表格中重要的字段和數(shù)據(jù)保證讓用戶可以看完整。
• 表格中的時(shí)間、狀態(tài)、操作欄等，以及其他業(yè)務(wù)規(guī)定的字段，需保持完整展示。
• 表格上方的篩選條件一次性展示不宜過(guò)多，建議 3-8 個(gè)左右。

3. 左樹右表頁(yè)

使用場(chǎng)景

左樹右表頁(yè)的界面布局基本與全表格頁(yè)差不多，只不過(guò)其多了一顆左側(cè)的樹來(lái)幫助用戶導(dǎo)航。

核心功能

導(dǎo)航樹、多字段篩選、操作區(qū)、表格區(qū)、分頁(yè)器。

設(shè)計(jì)建議

• 導(dǎo)航樹上的文字盡量展示完整，便于用戶定位信息。
• 導(dǎo)航樹的層級(jí)不可太深，控制在 4 層以內(nèi)。

4. 上下表格頁(yè)

使用場(chǎng)景

上下表格頁(yè)是表格嵌套表格幻化過(guò)來(lái)的，通常上表格為主表，下表格為子表，子表展示了主表中某條數(shù)據(jù)的詳情。

核心功能

多字段篩選、操作區(qū)、表格區(qū)、分頁(yè)器。

設(shè)計(jì)建議

• 主表數(shù)據(jù)對(duì)應(yīng)的子表數(shù)據(jù)需要符合邏輯且展現(xiàn)清晰。
• 若主表和子表均數(shù)據(jù)量大，則需要都加入篩選條件。

4. 左右表格頁(yè)

使用場(chǎng)景

左右表格頁(yè)與上下表格頁(yè)有異曲同工之妙，左右表格頁(yè)通常左表為主表，右表為子表。

核心功能

多字段篩選、操作區(qū)、表格區(qū)、分頁(yè)器。

設(shè)計(jì)建議

• 由于表格左右布局，表格列不宜過(guò)多，盡量不出現(xiàn)滾動(dòng)條。
• 左右表格區(qū)分要明顯，保證信息正確歸屬。

6. 折疊表格頁(yè)

使用場(chǎng)景

折疊表格頁(yè)的出現(xiàn)通常是頁(yè)面上表格的信息需要分組，每一張表格展現(xiàn)一類信息。

核心功能

分組、操作區(qū)、表格區(qū)、分頁(yè)器。

設(shè)計(jì)建議

• 建議加上分組的標(biāo)題及描述信息。
• 每個(gè)表格為一個(gè)模塊，建議模塊可全部展開(kāi)與全部折疊。

表單頁(yè)

表單頁(yè)是用于信息添加和錄入的頁(yè)面類型，用戶根據(jù)系統(tǒng)的要求將必填字段信息填寫完成，從而提交給系統(tǒng)，由系統(tǒng)接收并輸出信息。

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

控件合理

通過(guò)選擇合理的數(shù)據(jù)錄入控件，及通過(guò)合理的信息組織形式，幫助用戶可以快速完成數(shù)據(jù)錄入的任務(wù)。

明確好用

表單頁(yè)面中，每個(gè)表單項(xiàng)都要做到自身體驗(yàn)的明確與好用，例如針對(duì)一些有通用值的表單項(xiàng)建議設(shè)置默認(rèn)值，針對(duì)必填項(xiàng)要明確標(biāo)明，針對(duì)表單項(xiàng)標(biāo)題、錯(cuò)誤提示要明確傳達(dá)含義。

清晰反饋

表單錄入完后，允許用戶進(jìn)行返回、取消、清空、保存等操作，并且操作后提供明確的反饋，例如保存成功、保存失敗等。

2. 基礎(chǔ)表單頁(yè)

使用場(chǎng)景

表單項(xiàng)較少，表單信息直接平展即可，表單錄入任務(wù)簡(jiǎn)單且快速。

核心功能

表單項(xiàng)、填寫說(shuō)明、操作按鈕區(qū)。

設(shè)計(jì)建議

• 表單項(xiàng)盡量單行縱向排列，引導(dǎo)用戶縱向閱讀。
• 在界面空間有限時(shí)，表單項(xiàng)可多個(gè)組合在一行中，進(jìn)行多列排列，建議不超過(guò) 3 列。
• 表單項(xiàng)對(duì)齊方式一致，保證用戶視線流舒適，高效完成數(shù)據(jù)錄入。
• 表單整體要保持在用戶合理操作范圍，居左或居中。

3. 高級(jí)表單頁(yè)

使用場(chǎng)景

高級(jí)表單頁(yè)通常需要用戶填寫大量的信息，這樣大型而復(fù)雜的數(shù)據(jù)錄入任務(wù)需要被拆解為多個(gè)部分進(jìn)行。

核心功能

分組/卡片分組、表單項(xiàng)、操作按鈕區(qū)。

設(shè)計(jì)建議

• 任務(wù)的分組需要有層層遞進(jìn)關(guān)系，而不是無(wú)序的分組。
• 如果任務(wù)分組過(guò)多，最好不要超過(guò) 5 組，在 25 組之間較為合適，可以采用錨點(diǎn)定位的方式來(lái)幫助用戶定位信息。

4. 分步驟表單頁(yè)

使用場(chǎng)景

當(dāng)表單填寫有相應(yīng)的步驟順序時(shí)，采用分步驟表單較為合適。

核心功能

步驟條、表單項(xiàng)、操作按鈕區(qū)。

設(shè)計(jì)建議

• 若步驟間有很明確的順序關(guān)系，需在相關(guān)位置進(jìn)行明確的提示。
• 若有些步驟為非必填，建議也做出合理的展現(xiàn)。
• 步驟不宜過(guò)多，在 25 項(xiàng)為宜。

5. 帶樹表單頁(yè)

使用場(chǎng)景

當(dāng)表單塊歸屬不同的分類時(shí)，需要使用帶樹表單頁(yè)去處理。

核心功能

導(dǎo)航樹、表單項(xiàng)、操作按鈕區(qū)。

設(shè)計(jì)建議

• 分類超過(guò) 10 項(xiàng)，且分類標(biāo)題內(nèi)容較長(zhǎng)時(shí)，建議使用樹導(dǎo)航。
• 分類帶有層級(jí)時(shí)，建議使用樹導(dǎo)航。

詳情頁(yè)

詳情頁(yè)的作用是向用戶展示一個(gè)對(duì)象的完整信息，它的主要作用是幫助用戶信息瀏覽，同時(shí)允許對(duì)詳情頁(yè)整體的數(shù)據(jù)或某部分?jǐn)?shù)據(jù)發(fā)起編輯等操作。

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

層次分明

針對(duì)信息較少的詳情，平鋪展示即可；針對(duì)信息量大的詳情，需進(jìn)行合理組織，保證層級(jí)分明。

結(jié)構(gòu)相近

針對(duì)詳情信息的模塊化組織，要求盡量模塊的結(jié)構(gòu)相似，減少?gòu)?fù)雜性，降低用戶的理解成本。

2. 基礎(chǔ)詳情頁(yè)

使用場(chǎng)景

基礎(chǔ)詳情頁(yè)信息量較少，信息復(fù)雜度低，直接平鋪展示即可。

核心功能

詳情信息。

設(shè)計(jì)建議

• 建議呈現(xiàn)在一張卡片中，直接通過(guò)標(biāo)題進(jìn)行區(qū)分。
• 字段與內(nèi)容要明顯區(qū)分，不可糊在一起。

3. 高級(jí)詳情頁(yè)

使用場(chǎng)景

高級(jí)詳情頁(yè)需要展示的內(nèi)容量較大，且復(fù)雜度高，需要拆分為多組來(lái)幫助用戶瀏覽信息。

核心功能

卡片、分組、詳情信息。

設(shè)計(jì)建議

• 分組維度要合理，保證一個(gè)維度講一件事情。
• 若分組模塊大于 5 項(xiàng)，建議使用錨點(diǎn)定位。

圖

4. 可編輯詳情頁(yè)

使用場(chǎng)景

詳情頁(yè)中有部分字段由于業(yè)務(wù)需要，會(huì)進(jìn)行修改。

核心功能

詳情信息、可編輯信息。

設(shè)計(jì)建議

• 可編輯字段通常有兩種情況，一種為常顯編輯，一種為點(diǎn)擊編輯。用戶對(duì)常顯編輯字段操作時(shí)，頁(yè)面需要對(duì)是否編輯過(guò)做出適當(dāng)反饋。
• 可編輯樣式盡量統(tǒng)一，減輕用戶認(rèn)知負(fù)擔(dān)。

我們?nèi)绻茏龅綄?duì) B 端通用型界面了然于胸，那么在面對(duì)用戶需求時(shí)才能從容應(yīng)對(duì)，舉一反三。不斷總結(jié)和抽象，是我們應(yīng)對(duì)各種需求的不二法寶。

文章來(lái)源：優(yōu)設(shè)網(wǎng)    作者：知果日記