2022-4-20 周周
很多產(chǎn)品經(jīng)理和設(shè)計師在設(shè)計 B 端產(chǎn)品界面的時候不知道該怎么辦，今天筆者給大家匯總了一些 B 端典型界面及其設(shè)計原則，幫助大家從容應(yīng)對界面設(shè)計，不再不知所措。
Dashboard 頁通常作為產(chǎn)品的首頁出現(xiàn)，產(chǎn)品內(nèi)各種重要的數(shù)據(jù)和信息都會展現(xiàn)在 Dashboard 上。用戶可以通過點擊 Dashboard 上的卡片或卡片上某條數(shù)據(jù)，快速鏈接到詳情，這大大縮短了用戶獲取信息的路徑。產(chǎn)品團隊也可以通過 Dashboard 頁，向用戶傳遞產(chǎn)品迭代、運營活動等內(nèi)容。
模塊獨立
Dashboard 是由承載不同內(nèi)容的卡片組成的，每塊卡片的內(nèi)容都要獨立，不該交叉。
有效統(tǒng)計
Dashboard 上所呈現(xiàn)的數(shù)據(jù)最重要的就是該數(shù)據(jù)是否為用戶真實所需，如果統(tǒng)計數(shù)據(jù)不對用戶產(chǎn)生任何價值，那還不如不統(tǒng)計，否則會干擾用戶。
短路徑導(dǎo)航
了解用戶需要使用 Dashboard 的核心目標(biāo)，為用戶通過 Dashboard 達到數(shù)據(jù)詳情頁提供最短的路徑導(dǎo)航。
使用場景
將用戶需要待辦的事項、事項處理的進度等都完整的展示出來，方便用戶隨時查看，提升用戶的工作效率。
核心功能
核心統(tǒng)計數(shù)據(jù)、待辦任務(wù)、快捷入口、通知公告等。
設(shè)計建議
使用場景
當(dāng)新用戶第一次使用產(chǎn)品時，為了減少用戶的困難和快速完成用戶的任務(wù)，新手引導(dǎo)頁可以將核心操作鏈路展現(xiàn)給用戶。
核心功能
產(chǎn)品介紹、核心功能使用手冊、相關(guān)內(nèi)容指引。
設(shè)計建議
使用場景
監(jiān)控頁是數(shù)據(jù)可視化頁面中的一種，它通過一系列對數(shù)據(jù)高度概括的圖表來展現(xiàn)系統(tǒng)的核心指標(biāo)。指標(biāo)監(jiān)控頁的使用者通常是管理者（即決策者），他們需要看到系統(tǒng)整體的運行狀態(tài)，監(jiān)控全局?jǐn)?shù)據(jù)，從而調(diào)整自己的決策。
核心功能
關(guān)鍵指標(biāo)統(tǒng)計。
設(shè)計建議
使用場景
分析頁也是數(shù)據(jù)可視化頁面中的一種，它通過對系統(tǒng)多維度的詳細分析來展示系統(tǒng)的情況，從而使使用者可以發(fā)現(xiàn)問題，并盡早找出解決辦法。監(jiān)控頁重在總覽，而分析頁重在明細，因此，分析頁的使用者通常是執(zhí)行者。
核心功能
關(guān)鍵指標(biāo)明細分析。
設(shè)計建議
表格頁可以處理大量的數(shù)據(jù)條目，同時可以導(dǎo)航至對應(yīng)數(shù)據(jù)的詳情頁。在表格頁中，用戶可以查詢自己所需要的數(shù)據(jù)條目，以及對比數(shù)據(jù)條目、新增數(shù)據(jù)條目、刪除數(shù)據(jù)條目等。
模塊清晰
表格頁通常由查詢區(qū)、按鈕區(qū)、表格區(qū)、分頁器等模塊組成，要保證模塊間層次合理與清晰。
數(shù)據(jù)格式
表格頁中最大的模塊為表格區(qū)，該區(qū)域由列組成，列由數(shù)據(jù)構(gòu)成，列中的數(shù)據(jù)格式展現(xiàn)要符合業(yè)務(wù)及用戶的需求，例如“星期三”不能表現(xiàn)成“星期 3”。
數(shù)據(jù)對齊
對齊方式合理的數(shù)據(jù)，有利于用戶定位數(shù)據(jù)、分析數(shù)據(jù)。通常數(shù)據(jù)對齊方式為數(shù)值右對齊，文本左對齊，特殊情況居中對齊。
全表格頁是最常見的產(chǎn)品界面，全表格頁主要由篩選條件、按鈕區(qū)、表格區(qū)、分頁器組成。表格區(qū)是表格頁中的主角，當(dāng)界面數(shù)據(jù)只需要一張表呈現(xiàn)的時候，使用全表格頁。
核心功能
多字段篩選、操作區(qū)、表格區(qū)、分頁器。
設(shè)計建議
使用場景
左樹右表頁的界面布局基本與全表格頁差不多，只不過其多了一顆左側(cè)的樹來幫助用戶導(dǎo)航。
核心功能
導(dǎo)航樹、多字段篩選、操作區(qū)、表格區(qū)、分頁器。
設(shè)計建議
使用場景
上下表格頁是表格嵌套表格幻化過來的，通常上表格為主表，下表格為子表，子表展示了主表中某條數(shù)據(jù)的詳情。
核心功能
多字段篩選、操作區(qū)、表格區(qū)、分頁器。
設(shè)計建議
使用場景
左右表格頁與上下表格頁有異曲同工之妙，左右表格頁通常左表為主表，右表為子表。
核心功能
多字段篩選、操作區(qū)、表格區(qū)、分頁器。
設(shè)計建議
使用場景
折疊表格頁的出現(xiàn)通常是頁面上表格的信息需要分組，每一張表格展現(xiàn)一類信息。
核心功能
分組、操作區(qū)、表格區(qū)、分頁器。
設(shè)計建議
表單頁是用于信息添加和錄入的頁面類型，用戶根據(jù)系統(tǒng)的要求將必填字段信息填寫完成，從而提交給系統(tǒng)，由系統(tǒng)接收并輸出信息。
控件合理
通過選擇合理的數(shù)據(jù)錄入控件，及通過合理的信息組織形式，幫助用戶可以快速完成數(shù)據(jù)錄入的任務(wù)。
明確好用
表單頁面中，每個表單項都要做到自身體驗的明確與好用，例如針對一些有通用值的表單項建議設(shè)置默認(rèn)值，針對必填項要明確標(biāo)明，針對表單項標(biāo)題、錯誤提示要明確傳達含義。
清晰反饋
表單錄入完后，允許用戶進行返回、取消、清空、保存等操作，并且操作后提供明確的反饋，例如保存成功、保存失敗等。
使用場景
表單項較少，表單信息直接平展即可，表單錄入任務(wù)簡單且快速。
核心功能
表單項、填寫說明、操作按鈕區(qū)。
設(shè)計建議
使用場景
高級表單頁通常需要用戶填寫大量的信息，這樣大型而復(fù)雜的數(shù)據(jù)錄入任務(wù)需要被拆解為多個部分進行。
核心功能
分組/卡片分組、表單項、操作按鈕區(qū)。
設(shè)計建議
使用場景
當(dāng)表單填寫有相應(yīng)的步驟順序時，采用分步驟表單較為合適。
核心功能
步驟條、表單項、操作按鈕區(qū)。
設(shè)計建議
使用場景
當(dāng)表單塊歸屬不同的分類時，需要使用帶樹表單頁去處理。
核心功能
導(dǎo)航樹、表單項、操作按鈕區(qū)。
設(shè)計建議
詳情頁的作用是向用戶展示一個對象的完整信息，它的主要作用是幫助用戶信息瀏覽，同時允許對詳情頁整體的數(shù)據(jù)或某部分?jǐn)?shù)據(jù)發(fā)起編輯等操作。
層次分明
針對信息較少的詳情，平鋪展示即可；針對信息量大的詳情，需進行合理組織，保證層級分明。
結(jié)構(gòu)相近
針對詳情信息的模塊化組織，要求盡量模塊的結(jié)構(gòu)相似，減少復(fù)雜性，降低用戶的理解成本。
使用場景
基礎(chǔ)詳情頁信息量較少，信息復(fù)雜度低，直接平鋪展示即可。
核心功能
詳情信息。
設(shè)計建議
使用場景
高級詳情頁需要展示的內(nèi)容量較大，且復(fù)雜度高，需要拆分為多組來幫助用戶瀏覽信息。
核心功能
卡片、分組、詳情信息。
設(shè)計建議
圖
使用場景
詳情頁中有部分字段由于業(yè)務(wù)需要，會進行修改。
核心功能
詳情信息、可編輯信息。
設(shè)計建議
我們?nèi)绻茏龅綄?B 端通用型界面了然于胸，那么在面對用戶需求時才能從容應(yīng)對，舉一反三。不斷總結(jié)和抽象，是我們應(yīng)對各種需求的不二法寶。
文章來源：優(yōu)設(shè)網(wǎng) 作者：知果日記
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.cqzjtgb.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://m.cqzjtgb.com