Dashboard的含義

前言

Dashboard在B端設(shè)計(jì)的工作中是一個(gè)繞不開(kāi)的話題，在此我根據(jù)自己工作中實(shí)際的一些經(jīng)驗(yàn)總結(jié)給大家歸納出一篇更符合工作場(chǎng)景中Web端的Dashboard設(shè)計(jì)內(nèi)容。

什么是Dashboard？

Dashboard的中文直譯是儀表盤(pán)，最初與dashboard相關(guān)在界面出現(xiàn)的是蘋(píng)果電腦系統(tǒng)Mac OS X v10.4 Tiger操作系統(tǒng)中的應(yīng)用程序，用作稱為“widget”的小型應(yīng)用程序之運(yùn)行基礎(chǔ)。

B端常見(jiàn)Dashboard

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ō)就是：為用戶提供全局概覽，讓用戶快速掌握工作進(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端Dashboard的功能分類

設(shè)計(jì)師需要了解的功能分類

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)異常？需要用戶做些什么？”。由此可知，B端Dashboard產(chǎn)品中大多數(shù)都以看為主，輔以功能控制。主要分為監(jiān)控操作、分析處理兩大場(chǎng)景。當(dāng)業(yè)務(wù)較為復(fù)雜時(shí)，可以用戰(zhàn)略概覽場(chǎng)景提供快速入口。

1.監(jiān)控操作：

使用戶可以一目了然地檢查其狀態(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ù)概覽可視化展示為主。幫助用戶提供較為直觀數(shù)據(jù)維度，更好分析決策。

綜合性Dashboard，既有提供數(shù)據(jù)全局概覽可視化，同時(shí)也能快速在頁(yè)面進(jìn)行操作完成工作。國(guó)內(nèi)B端產(chǎn)品最常出現(xiàn)的Dashboard功能模式。本篇文章也是著重介紹如何完成這個(gè)類型需求

3.戰(zhàn)略概覽：

在復(fù)雜的業(yè)務(wù)中，可以呈現(xiàn)業(yè)務(wù)分散的重點(diǎn)信息，用戶可以通過(guò)提供入口快速跳轉(zhuǎn)至相關(guān)模塊。

設(shè)計(jì)前分析

了解Dashboard的用戶

B端設(shè)計(jì)過(guò)程中每多了解一個(gè)維度分析就更有利于下一步Dashboard框架搭建。因此在對(duì)Dashboard有了一些簡(jiǎn)單了解之后，我們?cè)賮?lái)了解下用戶場(chǎng)景。例如：用戶是財(cái)務(wù)人員審批商戶充值申請(qǐng)。工作人員進(jìn)入dashboard之后先是進(jìn)行充值打款申請(qǐng)。那么設(shè)計(jì)時(shí)可以考慮在Dashboard中加入常用功能：充值。并且需要給到相應(yīng)充值數(shù)據(jù)概覽：賬戶余額。每個(gè)B端產(chǎn)品都有自己特定工作場(chǎng)景。因此從用戶、場(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ì)信息做處理。從用戶的角度，舉個(gè)例子在FMS財(cái)務(wù)系統(tǒng)記賬中，財(cái)務(wù)需要查看季度報(bào)表。那么數(shù)據(jù)的單位以默認(rèn)季度呈現(xiàn)會(huì)更為符合使用用戶需求，準(zhǔn)確且高效。具體可以從以下四個(gè)維度來(lái)做進(jìn)一步處理：覆蓋范圍、時(shí)間跨度、粒度、個(gè)性定制。一般核心指標(biāo)不超過(guò)7個(gè)，確定核心指標(biāo)的聯(lián)系及優(yōu)先級(jí)。

合理的信息結(jié)構(gòu)能夠幫助用戶高效閱讀，理解內(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ù)，客戶數(shù)據(jù)；

2.了解員工工作進(jìn)度；

3.處理急需解決的工作任務(wù)。

對(duì)于執(zhí)行者的角色來(lái)說(shuō)使用Dashboard的訴求是：高效完成工作任務(wù)

信息處理內(nèi)容：

1.急需解決的工作任務(wù)：待發(fā)貨訂單，待退款，待跟進(jìn)客戶

2.了解自己的工作進(jìn)度

3.經(jīng)常使用的功能：發(fā)布商品，添加客戶，開(kāi)單

4.查看重要通知公告：公司發(fā)布的公告

了解Dashboard的表現(xiàn)設(shè)計(jì)類型

Dashboard表現(xiàn)結(jié)構(gòu)常見(jiàn)兩種類型：卡片型、流程型。

卡片型

最常見(jiàn)就是卡片型。即將有相關(guān)聯(lián)的內(nèi)容進(jìn)行分組呈現(xiàn)，讓Dashboard內(nè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)系。

Dashboard的設(shè)計(jì)

Dashboard的表現(xiàn)構(gòu)成

國(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)配不同客戶的LOGO。因此要考慮到區(qū)域的色彩是否適用各種不同LOGO。如果是OA或是定制化B端服務(wù)，那么就可以直接定制設(shè)計(jì)。

1.2功能入口導(dǎo)航

就是菜單導(dǎo)航，在B端Dashboard一般都是在側(cè)邊。建議最多不要超過(guò)9個(gè)，遵循7±2原則。盡量將同類型歸類，好好利用下二級(jí)分類。另外入口不要太深，用戶容易找不到入口。盡量設(shè)計(jì)優(yōu)化合并來(lái)減少用戶使用負(fù)擔(dān)。

在國(guó)內(nèi)B端產(chǎn)品中，最常就是將功能入口導(dǎo)航放在側(cè)邊。適用于更專注功能和快速操作的系統(tǒng)

優(yōu)點(diǎn)：

拓展性，一級(jí)導(dǎo)航的數(shù)目可以展示更多；

層級(jí)清晰，一二三級(jí)導(dǎo)航都可以流暢展示；

操作效率高，用戶在操作和瀏覽中可以快速定位和切換當(dāng)前位置。

缺點(diǎn)：

視覺(jué)動(dòng)線左右折回，比頂部導(dǎo)航更易疲勞，

內(nèi)容區(qū)的排版空間更小，需要考慮適配問(wèn)題。

在國(guó)內(nèi)B端結(jié)構(gòu)比較龐大的后臺(tái)中,通常會(huì)將功能入口導(dǎo)航設(shè)計(jì)為混合模式?；旌夏Ｊ骄褪菍⒐δ苋肟诜譃轫敳颗c側(cè)邊兩邊都有。這是因?yàn)閭?cè)邊模式已經(jīng)無(wú)法層級(jí)擴(kuò)展性已經(jīng)無(wú)法很好的滿足產(chǎn)品架構(gòu)了。

優(yōu)點(diǎn)：

層級(jí)拓展性強(qiáng)，可達(dá)四、五級(jí)導(dǎo)航。

缺點(diǎn)：

操作難度上升、視覺(jué)動(dòng)線更復(fù)雜。

還有一種模式：頂部模式，這種模式在國(guó)外產(chǎn)品中較多，在國(guó)內(nèi)的B端產(chǎn)品中較為少應(yīng)用。原因之一是起初最早的國(guó)內(nèi)B端產(chǎn)品就采用這種排版模式，在國(guó)內(nèi)形成了一種用戶操作習(xí)慣。國(guó)外最常見(jiàn)的B端頂部導(dǎo)航：saleforces、hubspot、zoho。

優(yōu)點(diǎn)：

沉浸感比側(cè)邊以及混合都要強(qiáng)，幾乎不會(huì)對(duì)于用戶的閱讀行為有干擾，因?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)品中基本上都是在右上角

2.數(shù)據(jù)概覽

在B端Dashboard中，數(shù)據(jù)概覽通常都是選取最關(guān)注的數(shù)據(jù)指標(biāo)來(lái)展示，而不是全部數(shù)據(jù)；選取最關(guān)注的時(shí)間段，而非全部時(shí)間段。

構(gòu)成：數(shù)據(jù)名稱+數(shù)字

這個(gè)模塊在設(shè)計(jì)表現(xiàn)上最重要就是信息層級(jí)的設(shè)計(jì)處理。如何能夠讓用戶一眼就看到最關(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ì)比。

3.待辦事項(xiàng)

待辦事項(xiàng)模塊通常是應(yīng)用在執(zhí)行角色的Dashboard中。節(jié)省工作人員尋找任務(wù)的時(shí)間，避免遺漏任務(wù)。

構(gòu)成：待辦事項(xià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)。

4.常用功能

用戶高頻操作快捷入口，點(diǎn)擊跳轉(zhuǎn)相應(yīng)操作頁(yè)面。這個(gè)模塊每個(gè)b端產(chǎn)品都不一樣，需要仔細(xì)反復(fù)斟酌是否是用戶需要的高頻功能。

5.任務(wù)進(jìn)展

用戶當(dāng)前最關(guān)心的任務(wù)，常用進(jìn)度條或者時(shí)間軸的形式表示。

6.平臺(tái)推送

平臺(tái)用來(lái)觸達(dá)企業(yè)的信息，一般有產(chǎn)品更新動(dòng)態(tài)，學(xué)習(xí)培訓(xùn)，客服，廣告推送，活動(dòng)消息（這個(gè)一般比較常出現(xiàn)在平臺(tái)類的b端產(chǎn)品中）

7.卡片式數(shù)據(jù)圖表

卡片式數(shù)據(jù)圖表可以拆分成圖表+輔助兩種組成部分

7.1圖表

B端設(shè)計(jì)師需要準(zhǔn)確通過(guò)圖表來(lái)表達(dá)出用戶需要的維度信息。

7.1.1折線圖

隨時(shí)間（連續(xù)內(nèi)容）而變化的連續(xù)數(shù)據(jù)，適合表現(xiàn)趨勢(shì)。Y 軸刻度值選擇要合理，以數(shù)據(jù)波動(dòng)要最大化的顯示

7.1.2面積圖

面積圖和折線圖比較類似，針對(duì)只有單個(gè)數(shù)據(jù)類型有面積區(qū)域的表達(dá)效果比折線圖好。數(shù)據(jù)類型盡量不要超過(guò)2個(gè)，有2個(gè)數(shù)據(jù)類型時(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)減少冗余信息，幫助用戶快速達(dá)成目標(biāo)，在最少的時(shí)間內(nèi)獲取更多的信息。

7.2.1標(biāo)題

標(biāo)題是區(qū)分卡片信息，迅速讓用戶了解卡片圖表的重要元素。通常需要斟酌嚴(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é)

軸線

軸線細(xì)節(jié)一般只考慮是否顯示，在有網(wǎng)格線的情況下，可以考慮隱藏x/y軸線。通常顯示數(shù)據(jù)的軸作為隱藏，突出視覺(jué)重點(diǎn)，減少不必要的線條。

軸刻度

軸刻度是軸線上的間距不宜過(guò)密，確保信息可讀性以及呼吸感，根據(jù) 7±2 法則，在可見(jiàn)的卡片內(nèi)盡量保持這個(gè)規(guī)則，可以利用抽樣顯示的手段來(lái)優(yōu)化軸標(biāo)簽重疊的問(wèn)題，這種一般是在連續(xù)性內(nèi)容上可以使用。若軸上單位信息確實(shí)過(guò)多，雖然是連續(xù)性內(nèi)容例如展示30天單位，由于本身卡片信息不是過(guò)于最重要層級(jí)，設(shè)計(jì)在相對(duì)狹小空間尺寸中，那么建議考慮在軸線上安排滾動(dòng)條，并將重看單位放置前位。設(shè)計(jì)特別注意點(diǎn)，將滾動(dòng)條設(shè)計(jì)作為輔助元素不宜搶視覺(jué)。

網(wǎng)格線

網(wǎng)格線是用來(lái)輔助圖表數(shù)據(jù)直觀對(duì)比的，增加數(shù)據(jù)更快速的閱讀性。舉個(gè)例子：數(shù)據(jù)展示軸線在左邊。那么離左邊最近的數(shù)據(jù)圖形可能不需要網(wǎng)格線就能立即對(duì)應(yīng)到相應(yīng)數(shù)字。但是越靠近右邊的數(shù)據(jù)圖形就相對(duì)比左邊的數(shù)據(jù)圖形就比較難一眼識(shí)別。因此網(wǎng)格線也擔(dān)任了刻度尺的功能。在設(shè)計(jì)網(wǎng)格線時(shí)要注意網(wǎng)格線更多是輔助的角色。表現(xiàn)類型可以選擇虛線或是實(shí)線。但是要把握好顏色選用不搶視覺(jué)重點(diǎn)又能看到。

7.2.3提示信息

以對(duì)照的方式來(lái)理解可視化對(duì)象的項(xiàng)目歸類信息，總結(jié)圖形形狀和文本組成內(nèi)容。

7.2.4標(biāo)簽

在圖表中，標(biāo)簽是對(duì)當(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í)，顯示該位置的數(shù)據(jù)。在簡(jiǎn)潔的頁(yè)面中，也能讓用戶直觀看到信息對(duì)應(yīng)數(shù)據(jù)結(jié)果

7.2.6功能

這個(gè)模塊涉及的內(nèi)容偏多，在表單頁(yè)面更常出現(xiàn)，以后有機(jī)會(huì)可以單獨(dú)說(shuō)。一般常用功能如篩選、導(dǎo)出、保存。可以讓用戶控制和友好的體驗(yàn)

確定B端產(chǎn)品的設(shè)計(jì)風(fēng)格

首先tob的產(chǎn)品dashboard說(shuō)到底還是給使用用戶所使用，也就是“人”。所以通常情況下dashboard除了傳遞出用戶想要的數(shù)據(jù)信息，還要傳遞服務(wù)于人。此外最重要的是B端設(shè)計(jì)師需要理解項(xiàng)目背景。例如某個(gè)財(cái)務(wù)應(yīng)用平臺(tái)不屬于科技未來(lái)感，而是突出一種安全，高效，具有客戶親和力的商業(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ù)的用戶群體或是主要消費(fèi)力群體。但是B端一般不會(huì)放棄任何一個(gè)用戶，哪怕定制化。這個(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)用戶以及使用場(chǎng)景，確定好關(guān)鍵的大約7個(gè)核心指標(biāo)。將用戶整個(gè)流程梳理流暢之后，再開(kāi)始考慮Dashboard設(shè)計(jì)執(zhí)行。

同時(shí)在設(shè)計(jì)執(zhí)行上也要特別注意幾個(gè)點(diǎn)：

1.突出核心指標(biāo)（7個(gè)左右）

2.信息層級(jí)區(qū)分

3.減少用戶選擇，盡可能默認(rèn)給到用戶需要的數(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)用戶以便應(yīng)對(duì)用戶對(duì)于大版本適應(yīng)緩解焦慮。如果有新功能或功能調(diào)整要及時(shí)加入一些引導(dǎo)設(shè)計(jì)，以便減少用戶的學(xué)習(xí)成本。關(guān)于引導(dǎo)設(shè)計(jì)的內(nèi)容歡迎參考我的上一篇文章：《B端必看的引導(dǎo)設(shè)計(jì)（一）》

4.允許用戶定制和共享dashboard，雖然不適用于所有的B端產(chǎn)品，如果類似于團(tuán)隊(duì)協(xié)作中多種角色共用一套的dashboard平臺(tái)，可以考慮引入這個(gè)功能。幾組定制模塊可以滿足于不同角色的用戶需求，并且能夠增加dashboard的使用率

5.dashboard關(guān)鍵信息數(shù)據(jù)盡量設(shè)計(jì)在一屏以內(nèi)，作為數(shù)據(jù)可視化，內(nèi)容快速瀏覽獲知全局，并且完成任務(wù)是比較重要的。

6. 突出統(tǒng)計(jì)數(shù)據(jù)的變化并對(duì)異常情況作出反應(yīng)

7.數(shù)字設(shè)置不一定要設(shè)置為右對(duì)齊，但是單位是金額，那么要將金額設(shè)置為右對(duì)齊，為了使用用戶識(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.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)