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