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