B端通用界面設計法則——Dashboard、表格頁、表單頁、詳情頁

1、B端通用界面設計法則Dashboard、表格頁、表單頁、詳情頁編輯導語：產(chǎn)品經(jīng)理在日常工作中經(jīng)常會接觸到B端產(chǎn)品的界面設計，在B端產(chǎn)品中我們可以見到很多表格的頁面，對于這些頁面會有一定的設計原則以及組成部分；本文作者分享了關于B端通用界面的設計法則，我們一起來了解一下。 很多產(chǎn)品經(jīng)理和設計師在設計B端產(chǎn)品界面的時候不知道該怎么辦，今天筆者給大家匯總了一些B端典型界面及其設計原則，幫助大家從容應對界面設計。一、Dashboard Dashboard頁通常作為產(chǎn)品的首頁出現(xiàn)，產(chǎn)品內(nèi)各種重要的數(shù)據(jù)和信息都會展現(xiàn)在Dashboard上。 用戶可以通過點擊Dashboard上的卡片或卡片上某條數(shù)據(jù)，快速

2、鏈接到詳情，這大大縮短了用戶獲取信息的路徑；產(chǎn)品團隊也可以通過Dashboard頁，向用戶傳遞產(chǎn)品迭代、運營活動等內(nèi)容。1. 設計原則模塊獨立：Dashboard是由承載不同內(nèi)容的卡片組成的，每塊卡片的內(nèi)容都要獨立，不該交叉。有效統(tǒng)計：Dashboard上所呈現(xiàn)的數(shù)據(jù)最重要的就是該數(shù)據(jù)是否為用戶真實所需，如果統(tǒng)計數(shù)據(jù)不對用戶產(chǎn)生任何價值，那還不如不統(tǒng)計，否則會干擾用戶。短路徑導航：了解用戶需要使用Dashboard的核心目標，為用戶通過Dashboard達到數(shù)據(jù)詳情頁提供最短的路徑導航。 1）工作臺 使用場景： 將用戶需要待辦的事項、事項處理的進度等都完整的展示出來，方便用戶隨時查看，提升用戶

3、的工作效率。 核心功能： 核心統(tǒng)計數(shù)據(jù)、待辦任務、快捷入口、通知公告等。 設計建議：展示與使用角色日常工作相關模塊，并且將重要模塊放在首屏?？偰K數(shù)量盡量控制在 5-9 個。不同的角色需求不同，應提供基于角色的差異化視圖。 2）新手引導 使用場景： 當新用戶第一次使用產(chǎn)品時，為了減少用戶的困難和快速完成用戶的任務，新手引導頁可以將核心操作鏈路展現(xiàn)給用戶。 核心功能： 產(chǎn)品介紹、核心功能使用手冊、相關內(nèi)容指引。 設計建議引導步驟盡量控制在3-5步。引導語盡量簡短并闡明要義?？梢蕴砑右曨l學習窗口，幫助用戶快速上手。 3）監(jiān)控頁 使用場景： 監(jiān)控頁是數(shù)據(jù)可視化頁面中的一種，它通過一系列對數(shù)據(jù)高度概括

4、的圖表來展現(xiàn)系統(tǒng)的核心指標；指標監(jiān)控頁的使用者通常是管理者（即決策者），他們需要看到系統(tǒng)整體的運行狀態(tài)，監(jiān)控全局數(shù)據(jù)，從而調(diào)整自己的決策。 核心功能： 關鍵指標統(tǒng)計。 設計建議：展示決策者關注的核心指標，并將重要模塊靠前展示。使用合理的圖表展現(xiàn)數(shù)據(jù)。圖表配色要符合數(shù)據(jù)的特性，例如警示用黃色。允許用戶可以下鉆查看詳情。 4）分析頁 使用場景： 分析頁也是數(shù)據(jù)可視化頁面中的一種，它通過對系統(tǒng)多維度的詳細分析來展示系統(tǒng)的情況，從而使使用者可以發(fā)現(xiàn)問題，并盡早找出解決辦法。 監(jiān)控頁重在總覽，而分析頁重在明細，因此，分析頁的使用者通常是執(zhí)行者。 核心功能： 關鍵指標明細分析。 設計建議：展示執(zhí)行者關注的

5、明細指標，并將重要模塊靠前展示。使用合理的圖表展現(xiàn)數(shù)據(jù)。明細數(shù)據(jù)模塊不宜過多，5-9個為宜。 二、表格頁 表格頁可以處理大量的數(shù)據(jù)條目，同時可以導航至對應數(shù)據(jù)的詳情頁；在表格頁中，用戶可以查詢自己所需要的數(shù)據(jù)條目，以及對比數(shù)據(jù)條目、新增數(shù)據(jù)條目、刪除數(shù)據(jù)條目等。1. 設計原則模塊清晰：表格頁通常由查詢區(qū)、按鈕區(qū)、表格區(qū)、分頁器等模塊組成，要保證模塊間層次合理與清晰。數(shù)據(jù)格式：表格頁中最大的模塊為表格區(qū)，該區(qū)域由列組成，列由數(shù)據(jù)構(gòu)成，列中的數(shù)據(jù)格式展現(xiàn)要符合業(yè)務及用戶的需求，例如“星期三”不能表現(xiàn)成“星期3”。數(shù)據(jù)對齊：對齊方式合理的數(shù)據(jù)，有利于用戶定位數(shù)據(jù)、分析數(shù)據(jù)。通常數(shù)據(jù)對齊方式為數(shù)值右對

6、齊，文本左對齊，特殊情況居中對齊。 1）全表格頁 使用場景： 全表格頁是最常見的產(chǎn)品界面，全表格頁主要由篩選條件、按鈕區(qū)、表格區(qū)、分頁器組成；表格區(qū)是表格頁中的主角，當界面數(shù)據(jù)只需要一張表呈現(xiàn)的時候，使用全表格頁。 核心功能： 多字段篩選、操作區(qū)、表格區(qū)、分頁器。 設計建議：將重要的字段和用戶使用頻率較高的字段放置在表格靠前的位置。表格中重要的字段和數(shù)據(jù)保證讓用戶可以看完整。表格中的時間、狀態(tài)、操作欄等，以及其他業(yè)務規(guī)定的字段，需保持完整展示。表格上方的篩選條件一次性展示不宜過多，建議3-8個左右。 2）左樹右表頁 使用場景： 左樹右表頁的界面布局基本與全表格頁差不多，只不過其多了一顆左側(cè)的樹

7、來幫助用戶導航。 核心功能： 導航樹、多字段篩選、操作區(qū)、表格區(qū)、分頁器。 設計建議：導航樹上的文字盡量展示完整，便于用戶定位信息。導航樹的層級不可太深，控制在4層以內(nèi)。 3）上下表格頁 使用場景： 上下表格頁是表格嵌套表格幻化過來的，通常上表格為主表，下表格為子表，子表展示了主表中某條數(shù)據(jù)的詳情。 核心功能： 多字段篩選、操作區(qū)、表格區(qū)、分頁器。 設計建議：主表數(shù)據(jù)對應的子表數(shù)據(jù)需要符合邏輯且展現(xiàn)清晰。若主表和子表均數(shù)據(jù)量大，則需要都加入篩選條件。 4）左右表格頁 使用場景： 左右表格頁與上下表格頁有異曲同工之妙，左右表格頁通常左表為主表，右表為子表。 核心功能： 多字段篩選、操作區(qū)、表格區(qū)

8、、分頁器。 設計建議：由于表格左右布局，表格列不宜過多，盡量不出現(xiàn)滾動條。左右表格區(qū)分要明顯，保證信息正確歸屬。 5）折疊表格頁 使用場景： 折疊表格頁的出現(xiàn)通常是頁面上表格的信息需要分組，每一張表格展現(xiàn)一類信息。 核心功能： 分組、操作區(qū)、表格區(qū)、分頁器。 設計建議：建議加上分組的標題及描述信息。每個表格為一個模塊，建議模塊可全部展開與全部折疊。 三、表單頁 表單頁是用于信息添加和錄入的頁面類型，用戶根據(jù)系統(tǒng)的要求將必填字段信息填寫完成，從而提交給系統(tǒng)，由系統(tǒng)接收并輸出信息。1. 設計原則控件合理：通過選擇合理的數(shù)據(jù)錄入控件，及通過合理的信息組織形式，幫助用戶可以快速完成數(shù)據(jù)錄入的任務。明確

9、好用：表單頁面中，每個表單項都要做到自身體驗的明確與好用，例如針對一些有通用值的表單項建議設置默認值，針對必填項要明確標明，針對表單項標題、錯誤提示要明確傳達含義。清晰反饋：表單錄入完后，允許用戶進行返回、取消、清空、保存等操作，并且操作后提供明確的反饋，例如保存成功、保存失敗等。 1）基礎表單頁 使用場景： 表單項較少，表單信息直接平展即可，表單錄入任務簡單且快速。 核心功能： 表單項、填寫說明、操作按鈕區(qū)。 設計建議：表單項盡量單行縱向排列，引導用戶縱向閱讀。在界面空間有限時，表單項可多個組合在一行中，進行多列排列，建議不超過3列。表單項對齊方式一致，保證用戶視線流舒適，高效完成數(shù)據(jù)錄入。

10、表單整體要保持在用戶合理操作范圍，居左或居中。 2）高級表單頁 使用場景： 高級表單頁通常需要用戶填寫大量的信息，這樣大型而復雜的數(shù)據(jù)錄入任務需要被拆解為多個部分進行。 核心功能： 分組/卡片分組、表單項、操作按鈕區(qū)。 設計建議：任務的分組需要有層層遞進關系，而不是無序的分組。如果任務分組過多，最好不要超過5組，在2-5組之間較為合適，可以采用錨點定位的方式來幫助用戶定位信息。 3）分步驟表單頁 使用場景： 當表單填寫有相應的步驟順序時，采用分步驟表單較為合適。 核心功能： 步驟條、表單項、操作按鈕區(qū)。 設計建議：若步驟間有很明確的順序關系，需在相關位置進行明確的提示。若有些步驟為非必填，建議

11、也做出合理的展現(xiàn)。步驟不宜過多，在2-5項為宜。 4）帶樹表單頁 使用場景： 當表單塊歸屬不同的分類時，需要使用帶樹表單頁去處理。 核心功能： 導航樹、表單項、操作按鈕區(qū)。 設計建議：分類超過10項，且分類標題內(nèi)容較長時，建議使用樹導航。分類帶有層級時，建議使用樹導航。 四、詳情頁 詳情頁的作用是向用戶展示一個對象的完整信息，它的主要作用是幫助用戶信息瀏覽，同時允許對詳情頁整體的數(shù)據(jù)或某部分數(shù)據(jù)發(fā)起編輯等操作。1. 設計原則層次分明：針對信息較少的詳情，平鋪展示即可；針對信息量大的詳情，需進行合理組織，保證層級分明。結(jié)構(gòu)相近：針對詳情信息的模塊化組織，要求盡量模塊的結(jié)構(gòu)相似，減少復雜性，降低用戶的理解成本。 1）基礎詳情頁 使用場景： 基礎詳情頁信息量較少，信息復雜度低，直接平鋪展示即可。 核心功能： 詳情信息。 設計建議：建議呈現(xiàn)在一張卡片中，直接通過標題進行區(qū)分。字段與內(nèi)容要明顯區(qū)分，不可糊在一起。 2）高級詳情頁 使用場景： 高級詳情頁需要展示的內(nèi)容量較大，且復雜度高，需要拆分為多組來幫助用戶瀏覽信息。 核心功能： 卡片、分組、詳情信息。 設計建議：分組維度要合理，保證一個維度講一件事情。若分組模塊大于5項，建議使用錨點定位。 3）可編輯詳情頁 使用場景： 詳情頁中有部分字段由于業(yè)務