2021-3-24 資深UI設計者
Dashboard在B端設計的工作中是一個繞不開的話題，在此我根據自己工作中實際的一些經驗總結給大家歸納出一篇更符合工作場景中Web端的Dashboard設計內容。
Dashboard的中文直譯是儀表盤，最初與dashboard相關在界面出現的是蘋果電腦系統Mac OS X v10.4 Tiger操作系統中的應用程序，用作稱為“widget”的小型應用程序之運行基礎。
2013年Stephen Few寫的《Information Dashboard Design》中指出“儀表盤是為了實現某些特定目標而對重要信息進行的視覺傳達，對一屏上的內容進行組織呈現使人一瞥便能掌握其所傳達的信息。簡單點來說就是：為用戶提供全局概覽，讓用戶快速掌握工作進展及進入工作狀態并可以訪問最重要的數據，功能和控件。
Dashboard設計案例
以下是Dashboard常見4點設計不是很好的案例，現在帶大家一個個看下怎么才是更為合理。
案例一：右邊Dashboard上的信息做了層級的區分，相對左邊更加直觀。
案例二：左邊Dashboard顏色偏熒光色，色彩語言相對右邊不適合長期工作使用。
案例三：設計方案時沒有采用格柵格化解決適配對不齊等等問題
案例四：dashboard模塊之間間距沒有呼吸感。
B端設計中，設計師要實時了解哪些是重要內容以及核心數據。Dashboard可以直接傳遞出：“業務整體狀況如何？有哪些關鍵指標？各指標的運行情況分別如何？哪些指標出現異常？需要用戶做些什么？”。由此可知，B端Dashboard產品中大多數都以看為主，輔以功能控制。主要分為監控操作、分析處理兩大場景。當業務較為復雜時，可以用戰略概覽場景提供快速入口。
1.監控操作：
使用戶可以一目了然地檢查其狀態，提供關鍵指標實時監測并且告知異常狀態。更重視實時觀看狀態。
2.分析處理：
通過數據圖表，配合控件進行不同維度的數據分析。以數據為中心，并顯示盡可能多的相關數據視圖。
數據性Dashboard。數據概覽可視化展示為主。幫助用戶提供較為直觀數據維度，更好分析決策。
綜合性Dashboard，既有提供數據全局概覽可視化，同時也能快速在頁面進行操作完成工作。國內B端產品最常出現的Dashboard功能模式。本篇文章也是著重介紹如何完成這個類型需求
3.戰略概覽：
在復雜的業務中，可以呈現業務分散的重點信息，用戶可以通過提供入口快速跳轉至相關模塊。
B端設計過程中每多了解一個維度分析就更有利于下一步Dashboard框架搭建。因此在對Dashboard有了一些簡單了解之后，我們再來了解下用戶場景。例如：用戶是財務人員審批商戶充值申請。工作人員進入dashboard之后先是進行充值打款申請。那么設計時可以考慮在Dashboard中加入常用功能：充值。并且需要給到相應充值數據概覽：賬戶余額。每個B端產品都有自己特定工作場景。因此從用戶、場景和任務這三方面考慮，可以做到幫助設計師更清晰設計dashboard布局以及設計自查。
因此以上這些信息都是需要在設計Dashboard時弄清楚的內容。
信息處理
當弄清楚需要呈現信息內容后，需要進一步對信息做處理。從用戶的角度，舉個例子在FMS財務系統記賬中，財務需要查看季度報表。那么數據的單位以默認季度呈現會更為符合使用用戶需求，準確且高效。具體可以從以下四個維度來做進一步處理：覆蓋范圍、時間跨度、粒度、個性定制。一般核心指標不超過7個，確定核心指標的聯系及優先級。
合理的信息結構能夠幫助用戶高效閱讀，理解內容。如何將信息碎片有邏輯地組合在一起，合理呈現和布局，選擇使用什么結構視內容而定。
舉個例子：
對于管理者的角色來說使用Dashboard的訴求是：及時把控業務情況
信息處理內容：
1.掌握重要業務數據：經營數據，訂單數據，客戶數據；
2.了解員工工作進度；
3.處理急需解決的工作任務。
對于執行者的角色來說使用Dashboard的訴求是：高效完成工作任務
信息處理內容：
1.急需解決的工作任務：待發貨訂單，待退款，待跟進客戶
2.了解自己的工作進度
3.經常使用的功能：發布商品，添加客戶，開單
4.查看重要通知公告：公司發布的公告
Dashboard表現結構常見兩種類型：卡片型、流程型。
卡片型
最常見就是卡片型。即將有相關聯的內容進行分組呈現，讓Dashboard內容歸類而不雜亂無章。
流程型
內容相互之間具有一定的邏輯關系，如地理位置關系、數字包含關系、對象父子關系等，這種結構可以讓對象之間的邏輯關系十分直觀。很直觀的呈現了資源對象之間的相互關系。
國內B端產品一般是由以下這幾個部分組成的。全局導航、數據概覽、待辦事項、常用功能、任務進展、平臺推送、數據圖表。下面帶大家仔細看下具體每個部分具體如何設計。
1.全局導航
在B端Dashboard中，全局導航一般由三個部分組成。平臺LOGO、功能入口導航、快捷功能導航。
1.1平臺LOGO
一般這里都會放LOGO，對于一些壁壘標準化B端服務，這里通常是給好標準規則，后臺自動配不同客戶的LOGO。因此要考慮到區域的色彩是否適用各種不同LOGO。如果是OA或是定制化B端服務，那么就可以直接定制設計。
1.2功能入口導航
就是菜單導航，在B端Dashboard一般都是在側邊。建議最多不要超過9個，遵循7±2原則。盡量將同類型歸類，好好利用下二級分類。另外入口不要太深，用戶容易找不到入口。盡量設計優化合并來減少用戶使用負擔。
在國內B端產品中，最常就是將功能入口導航放在側邊。適用于更專注功能和快速操作的系統
優點：
拓展性，一級導航的數目可以展示更多；
層級清晰，一二三級導航都可以流暢展示；
操作效率高，用戶在操作和瀏覽中可以快速定位和切換當前位置。
缺點：
視覺動線左右折回，比頂部導航更易疲勞，
內容區的排版空間更小，需要考慮適配問題。
在國內B端結構比較龐大的后臺中,通常會將功能入口導航設計為混合模式。混合模式就是將功能入口分為頂部與側邊兩邊都有。這是因為側邊模式已經無法層級擴展性已經無法很好的滿足產品架構了。
優點：
層級拓展性強，可達四、五級導航。
缺點：
操作難度上升、視覺動線更復雜。
還有一種模式：頂部模式，這種模式在國外產品中較多，在國內的B端產品中較為少應用。原因之一是起初最早的國內B端產品就采用這種排版模式，在國內形成了一種用戶操作習慣。國外最常見的B端頂部導航：saleforces、hubspot、zoho。
優點：
沉浸感比側邊以及混合都要強，幾乎不會對于用戶的閱讀行為有干擾，因為Web也有頂部瀏覽器菜單。
缺點：
一級導航欄的欄數及字段內容受限嚴重。國內B端產品會有很多快捷功能就更不利用采用這種模式
1.3快捷功能導航
一般包含：消息通知、賬號信息、幫助中心、設置。在國內B端產品中基本上都是在右上角
在B端Dashboard中，數據概覽通常都是選取最關注的數據指標來展示，而不是全部數據；選取最關注的時間段，而非全部時間段。
構成：數據名稱+數字
這個模塊在設計表現上最重要就是信息層級的設計處理。如何能夠讓用戶一眼就看到最關注的數據內容指標。設計時注意突出數據才是關鍵。設計時關鍵數字上就要字號大一點，甚至可以采用特殊的數字字體，例如DIN系列，來加強對比。
待辦事項模塊通常是應用在執行角色的Dashboard中。節省工作人員尋找任務的時間，避免遺漏任務。
構成：待辦事項名稱+數字+可點擊跳轉的鏈接
待辦事項的展示方式可以是數據可視化也可以是數據概覽。但是有一點，數據必須是要能夠點擊的，因為待辦事項就是要有入口去操作。同時也可以把待辦事項平鋪出來，平鋪幾個可以根據具體情況定。如果待辦樣式本身很多的情況下，可以采用tap切換的樣式全部展示出來。
用戶高頻操作快捷入口，點擊跳轉相應操作頁面。這個模塊每個b端產品都不一樣，需要仔細反復斟酌是否是用戶需要的高頻功能。
用戶當前最關心的任務，常用進度條或者時間軸的形式表示。
平臺用來觸達企業的信息，一般有產品更新動態，學習培訓，客服，廣告推送，活動消息（這個一般比較常出現在平臺類的b端產品中）
卡片式數據圖表可以拆分成圖表+輔助兩種組成部分
7.1圖表
B端設計師需要準確通過圖表來表達出用戶需要的維度信息。
7.1.1折線圖
隨時間（連續內容）而變化的連續數據，適合表現趨勢。Y 軸刻度值選擇要合理，以數據波動要最大化的顯示
7.1.2面積圖
面積圖和折線圖比較類似，針對只有單個數據類型有面積區域的表達效果比折線圖好。數據類型盡量不要超過2個，有2個數據類型時，注意調整面積區域的透明度以及色系保持統一
7.1.3柱狀圖
通常用來統計累積疊加數據，數據之間能夠非常清晰直觀對比。柱狀圖的單位寬度不要是固定值，單位寬度之間間距在不同分辨率屏幕下的對比要合理。不用大圓角元素，不夠嚴謹，太活潑。最多使用兩種顏色，一種默認，一種hover或tap，保持界面統一性
7.1.4扇形圖
有共同的上一級層級作為統計總合，數據之間平級且有占比。數據必須是正整數，至少兩個以上數據，且用不同顏色表示
7.1.5環形圖
與扇形圖很相似，但是比扇形圖更加直觀瀏覽且不被搶視覺。避免過于太細太粗，控制好留白呼吸感
以上是常用的圖形圖表，絕不是全部。有興趣的同學可以到以下兩個網站可以利用碎片化時間擴展學習
EChart：
https://echarts.apache.org/examples/zh/index.html
AntV:
https://antv.gitee.io/zh](https://antv.gitee.io/zh
7.2輔助元素
卡片型圖表的第二部分也就是輔助元素。輔助元素里面還有很多細節元素組成：標題、軸、提示信息、標簽、氣泡信息、功能（篩選、導出、保存）。當然在實際設計中，會根據場景去修飾刪減一些元素，以此來減少冗余信息，幫助用戶快速達成目標，在最少的時間內獲取更多的信息。
7.2.1標題
標題是區分卡片信息，迅速讓用戶了解卡片圖表的重要元素。通常需要斟酌嚴謹不重復，簡潔概括。
7.2.2軸
軸上最重要的內容就是單位，將每個數據在同一軸上都是維持同種基準。便于進行數據測量。
7.2.2.1軸的細節
現在知道了軸由哪幾部分構成，那么接著了解細節
軸線
軸線細節一般只考慮是否顯示，在有網格線的情況下，可以考慮隱藏x/y軸線。通常顯示數據的軸作為隱藏，突出視覺重點，減少不必要的線條。
軸刻度
軸刻度是軸線上的間距不宜過密，確保信息可讀性以及呼吸感，根據 7±2 法則，在可見的卡片內盡量保持這個規則，可以利用抽樣顯示的手段來優化軸標簽重疊的問題，這種一般是在連續性內容上可以使用。若軸上單位信息確實過多，雖然是連續性內容例如展示30天單位，由于本身卡片信息不是過于最重要層級，設計在相對狹小空間尺寸中，那么建議考慮在軸線上安排滾動條，并將重看單位放置前位。設計特別注意點，將滾動條設計作為輔助元素不宜搶視覺。
網格線
網格線是用來輔助圖表數據直觀對比的，增加數據更快速的閱讀性。舉個例子：數據展示軸線在左邊。那么離左邊最近的數據圖形可能不需要網格線就能立即對應到相應數字。但是越靠近右邊的數據圖形就相對比左邊的數據圖形就比較難一眼識別。因此網格線也擔任了刻度尺的功能。在設計網格線時要注意網格線更多是輔助的角色。表現類型可以選擇虛線或是實線。但是要把握好顏色選用不搶視覺重點又能看到。
7.2.3提示信息
以對照的方式來理解可視化對象的項目歸類信息，總結圖形形狀和文本組成內容。
7.2.4標簽
在圖表中，標簽是對當前的一組數據進行的內容標注。根據不同的圖表類型選擇使用。
7.2.5氣泡信息
當標簽默認不顯示，氣泡信息一般是鼠標tap或者hover時，顯示該位置的數據。在簡潔的頁面中，也能讓用戶直觀看到信息對應數據結果
7.2.6功能
這個模塊涉及的內容偏多，在表單頁面更常出現，以后有機會可以單獨說。一般常用功能如篩選、導出、保存?？梢宰層脩艨刂坪陀押玫捏w驗
確定B端產品的設計風格
首先tob的產品dashboard說到底還是給使用用戶所使用，也就是“人”。所以通常情況下dashboard除了傳遞出用戶想要的數據信息，還要傳遞服務于人。此外最重要的是B端設計師需要理解項目背景。例如某個財務應用平臺不屬于科技未來感，而是突出一種安全，高效，具有客戶親和力的商業產品特性。那么關鍵詞：服務、輕松、高效、親和、精致。那么一個干凈、相對輕量、統一的Dashboard UI界面就提煉出來。
色彩
常說色彩是一種情緒版，在Dashboard設計中，色彩也是映射關鍵詞的非常重要一個環節
字體
B端產品一般都是以數據為主要信息源，針對一些關鍵信息指標時，可以采用特殊的數字字體。由于本身數字字體包內存不大，所以也方便調用。例如DIN系列等等
設計稿尺寸
本篇內容都是針對pc端內容，具體移動端以后有機會會分享。大多數B端設計師都知道以1440x900設計，但是在工作中會以埋點數據了解到事實上真實場景還是以1920x1080的尺寸為多數。畢竟時代不一樣了。以1440做設計主要還是考慮從上下兼容的角度的。B端與C端不同，C端往往照顧大多數的用戶群體或是主要消費力群體。但是B端一般不會放棄任何一個用戶，哪怕定制化。這個在C端是不太現實的。因此適配對于B端產品來說也是尤為重要。
設計原則
上面的內容更多是闡述每個部分的內容，實際工作中設計Dashboard時不一定按照那個順序進行，因此在此再強調下設計Dashboard的設計順序以及原則。要先弄清楚目標用戶以及使用場景，確定好關鍵的大約7個核心指標。將用戶整個流程梳理流暢之后，再開始考慮Dashboard設計執行。
同時在設計執行上也要特別注意幾個點：
1.突出核心指標（7個左右）
2.信息層級區分
3.減少用戶選擇，盡可能默認給到用戶需要的數據維度
4.界面簡潔嚴謹
5.避免過多顏色與不統一
6.數據維度正確圖表選擇
設計的注意事項以及建議
1.tob的設計師要了解業務所處的周期在什么樣的階段。在探索期建議dashboard的設計應用于市面上現成的組件進行搭建，以便與研發團隊一起為業務助力。更好更快的發展。
2.在tob的dashboard設計中，設計師要特別注意數據表現的落地效果
3.當dashboard只在設計層面改版，并且改版內容過大時，推薦保留舊版入口，提前進行埋點用戶以便應對用戶對于大版本適應緩解焦慮。如果有新功能或功能調整要及時加入一些引導設計，以便減少用戶的學習成本。關于引導設計的內容歡迎參考我的上一篇文章：《B端必看的引導設計（一）》
4.允許用戶定制和共享dashboard，雖然不適用于所有的B端產品，如果類似于團隊協作中多種角色共用一套的dashboard平臺，可以考慮引入這個功能。幾組定制模塊可以滿足于不同角色的用戶需求，并且能夠增加dashboard的使用率
5.dashboard關鍵信息數據盡量設計在一屏以內，作為數據可視化，內容快速瀏覽獲知全局，并且完成任務是比較重要的。
6. 突出統計數據的變化并對異常情況作出反應
7.數字設置不一定要設置為右對齊，但是單位是金額，那么要將金額設置為右對齊，為了使用用戶識別方便，快速比較。
8.設計完Dashboard一定要自查一遍，是否真的符合工作人員的使用場景。有沒有理解不準確的地方。
為什么b端設計師要懂得Dashboard，在很多b端業務場景中，有個特點，設計師常常會接到大量數據展示要求。如果設計師對dashboard缺乏認知，就有很大的可能性會造成信息雜亂，并且在Dashboard的界面中充斥著一些無關緊要的指標，這就是失去了Dashboard存在的意義。另一方面在b端產品中，Dashboard往往是以首頁的形式出現的,是非常重要的。
文章來源：站酷 作者：一九互七
藍藍設計( paul-jarrel.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務