B端Dashboard設(shè)計指南系列

2021-3-26    ui設(shè)計分享達人

Dashboard的含義

前言

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


什么是Dashboard?

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



B端常見Dashboard

2013年Stephen Few寫的《Information Dashboard Design》中指出“儀表盤是為了實現(xiàn)某些特定目標(biāo)而對重要信息進行的視覺傳達,對一屏上的內(nèi)容進行組織呈現(xiàn)使人一瞥便能掌握其所傳達的信息。簡單點來說就是:為用戶提供全局概覽,讓用戶快速掌握工作進展及進入工作狀態(tài)并可以訪問最重要的數(shù)據(jù),功能和控件。



Dashboard設(shè)計案例

以下是Dashboard常見4點設(shè)計不是很好的案例,現(xiàn)在帶大家一個個看下怎么才是更為合理。


案例一:右邊Dashboard上的信息做了層級的區(qū)分,相對左邊更加直觀。


案例二:左邊Dashboard顏色偏熒光色,色彩語言相對右邊不適合長期工作使用。


案例三:設(shè)計方案時沒有采用格柵格化解決適配對不齊等等問題


案例四:dashboard模塊之間間距沒有呼吸感。



B端Dashboard的功能分類

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

B端設(shè)計中,設(shè)計師要實時了解哪些是重要內(nèi)容以及核心數(shù)據(jù)。Dashboard可以直接傳遞出:“業(yè)務(wù)整體狀況如何?有哪些關(guān)鍵指標(biāo)?各指標(biāo)的運行情況分別如何?哪些指標(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ù)圖表,配合控件進行不同維度的數(shù)據(jù)分析。以數(shù)據(jù)為中心,并顯示盡可能多的相關(guān)數(shù)據(jù)視圖。


數(shù)據(jù)性Dashboard。數(shù)據(jù)概覽可視化展示為主。幫助用戶提供較為直觀數(shù)據(jù)維度,更好分析決策。


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


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

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



設(shè)計前分析

了解Dashboard的用戶

B端設(shè)計過程中每多了解一個維度分析就更有利于下一步Dashboard框架搭建。因此在對Dashboard有了一些簡單了解之后,我們再來了解下用戶場景。例如:用戶是財務(wù)人員審批商戶充值申請。工作人員進入dashboard之后先是進行充值打款申請。那么設(shè)計時可以考慮在Dashboard中加入常用功能:充值。并且需要給到相應(yīng)充值數(shù)據(jù)概覽:賬戶余額。每個B端產(chǎn)品都有自己特定工作場景。因此從用戶、場景和任務(wù)這三方面考慮,可以做到幫助設(shè)計師更清晰設(shè)計dashboard布局以及設(shè)計自查。

因此以上這些信息都是需要在設(shè)計Dashboard時弄清楚的內(nèi)容。



信息處理

當(dāng)弄清楚需要呈現(xiàn)信息內(nèi)容后,需要進一步對信息做處理。從用戶的角度,舉個例子在FMS財務(wù)系統(tǒng)記賬中,財務(wù)需要查看季度報表。那么數(shù)據(jù)的單位以默認季度呈現(xiàn)會更為符合使用用戶需求,準(zhǔ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.了解員工工作進度;

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

對于執(zhí)行者的角色來說使用Dashboard的訴求是:高效完成工作任務(wù)

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

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

2.了解自己的工作進度

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

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


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

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


卡片型

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



Dashboard的設(shè)計

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

國內(nèi)B端產(chǎn)品一般是由以下這幾個部分組成的。全局導(dǎo)航、數(shù)據(jù)概覽、待辦事項、常用功能、任務(wù)進展、平臺推送、數(shù)據(jù)圖表。下面帶大家仔細看下具體每個部分具體如何設(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)化合并來減少用戶使用負擔(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è)計為混合模式?;旌夏J骄褪菍⒐δ苋肟诜譃轫敳颗c側(cè)邊兩邊都有。這是因為側(cè)邊模式已經(jīng)無法層級擴展性已經(jīng)無法很好的滿足產(chǎn)品架構(gòu)了。

優(yōu)點:

層級拓展性強,可達四、五級導(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è)邊以及混合都要強,幾乎不會對于用戶的閱讀行為有干擾,因為Web也有頂部瀏覽器菜單。

缺點:

一級導(dǎo)航欄的欄數(shù)及字段內(nèi)容受限嚴(yán)重。國內(nèi)B端產(chǎn)品會有很多快捷功能就更不利用采用這種模式



1.3快捷功能導(dǎo)航

一般包含:消息通知、賬號信息、幫助中心、設(shè)置。在國內(nèi)B端產(chǎn)品中基本上都是在右上角







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

在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系列,來加強對比。



3.待辦事項

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

構(gòu)成:待辦事項名稱+數(shù)字+可點擊跳轉(zhuǎn)的鏈接

待辦事項的展示方式可以是數(shù)據(jù)可視化也可以是數(shù)據(jù)概覽。但是有一點,數(shù)據(jù)必須是要能夠點擊的,因為待辦事項就是要有入口去操作。同時也可以把待辦事項平鋪出來,平鋪幾個可以根據(jù)具體情況定。如果待辦樣式本身很多的情況下,可以采用tap切換的樣式全部展示出來。



4.常用功能

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



5.任務(wù)進展

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



6.平臺推送

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



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

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


7.1圖表

B端設(shè)計師需要準(zhǔn)確通過圖表來表達出用戶需要的維度信息。

7.1.1折線圖

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


7.1.2面積圖

面積圖和折線圖比較類似,針對只有單個數(shù)據(jù)類型有面積區(qū)域的表達效果比折線圖好。數(shù)據(jù)類型盡量不要超過2個,有2個數(shù)據(jù)類型時,注意調(diào)整面積區(qū)域的透明度以及色系保持統(tǒng)一



7.1.3柱狀圖

通常用來統(tǒng)計累積疊加數(shù)據(jù),數(shù)據(jù)之間能夠非常清晰直觀對比。柱狀圖的單位寬度不要是固定值,單位寬度之間間距在不同分辨率屏幕下的對比要合理。不用大圓角元素,不夠嚴(yán)謹,太活潑。最多使用兩種顏色,一種默認,一種hover或tap,保持界面統(tǒng)一性



7.1.4扇形圖

有共同的上一級層級作為統(tǒng)計總合,數(shù)據(jù)之間平級且有占比。數(shù)據(jù)必須是正整數(shù),至少兩個以上數(shù)據(jù),且用不同顏色表示




7.1.5環(huán)形圖

與扇形圖很相似,但是比扇形圖更加直觀瀏覽且不被搶視覺。避免過于太細太粗,控制好留白呼吸感




以上是常用的圖形圖表,絕不是全部。有興趣的同學(xué)可以到以下兩個網(wǎng)站可以利用碎片化時間擴展學(xué)習(xí)

EChart:

https://echarts.apache.org/examples/zh/index.html

AntV:

https://antv.gitee.io/zh](https://antv.gitee.io/zh




7.2輔助元素

卡片型圖表的第二部分也就是輔助元素。輔助元素里面還有很多細節(jié)元素組成:標(biāo)題、軸、提示信息、標(biāo)簽、氣泡信息、功能(篩選、導(dǎo)出、保存)。當(dāng)然在實際設(shè)計中,會根據(jù)場景去修飾刪減一些元素,以此來減少冗余信息,幫助用戶快速達成目標(biāo),在最少的時間內(nèi)獲取更多的信息。



7.2.1標(biāo)題

標(biāo)題是區(qū)分卡片信息,迅速讓用戶了解卡片圖表的重要元素。通常需要斟酌嚴(yán)謹不重復(fù),簡潔概括。



7.2.2軸

軸上最重要的內(nèi)容就是單位,將每個數(shù)據(jù)在同一軸上都是維持同種基準(zhǔn)。便于進行數(shù)據(jù)測量。



7.2.2.1軸的細節(jié)

現(xiàn)在知道了軸由哪幾部分構(gòu)成,那么接著了解細節(jié)



軸線

軸線細節(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ù)進行的內(nèi)容標(biāo)注。根據(jù)不同的圖表類型選擇使用。



7.2.5氣泡信息

當(dāng)標(biāo)簽?zāi)J不顯示,氣泡信息一般是鼠標(biāo)tap或者hover時,顯示該位置的數(shù)據(jù)。在簡潔的頁面中,也能讓用戶直觀看到信息對應(yīng)數(shù)據(jù)結(jié)果



7.2.6功能

這個模塊涉及的內(nèi)容偏多,在表單頁面更常出現(xiàn),以后有機會可以單獨說。一般常用功能如篩選、導(dǎo)出、保存??梢宰層脩艨刂坪陀押玫捏w驗



確定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)容,具體移動端以后有機會會分享。大多數(shù)B端設(shè)計師都知道以1440x900設(shè)計,但是在工作中會以埋點數(shù)據(jù)了解到事實上真實場景還是以1920x1080的尺寸為多數(shù)。畢竟時代不一樣了。以1440做設(shè)計主要還是考慮從上下兼容的角度的。B端與C端不同,C端往往照顧大多數(shù)的用戶群體或是主要消費力群體。但是B端一般不會放棄任何一個用戶,哪怕定制化。這個在C端是不太現(xiàn)實的。因此適配對于B端產(chǎn)品來說也是尤為重要。



設(shè)計原則

上面的內(nèi)容更多是闡述每個部分的內(nèi)容,實際工作中設(shè)計Dashboard時不一定按照那個順序進行,因此在此再強調(diào)下設(shè)計Dashboard的設(shè)計順序以及原則。要先弄清楚目標(biāo)用戶以及使用場景,確定好關(guān)鍵的大約7個核心指標(biāo)。將用戶整個流程梳理流暢之后,再開始考慮Dashboard設(shè)計執(zhí)行。


同時在設(shè)計執(zhí)行上也要特別注意幾個點:

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

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

3.減少用戶選擇,盡可能默認給到用戶需要的數(shù)據(jù)維度

4.界面簡潔嚴(yán)謹

5.避免過多顏色與不統(tǒng)一

6.數(shù)據(jù)維度正確圖表選擇



設(shè)計的注意事項以及建議

1.tob的設(shè)計師要了解業(yè)務(wù)所處的周期在什么樣的階段。在探索期建議dashboard的設(shè)計應(yīng)用于市面上現(xiàn)成的組件進行搭建,以便與研發(fā)團隊一起為業(yè)務(wù)助力。更好更快的發(fā)展。

2.在tob的dashboard設(shè)計中,設(shè)計師要特別注意數(shù)據(jù)表現(xiàn)的落地效果

3.當(dāng)dashboard只在設(shè)計層面改版,并且改版內(nèi)容過大時,推薦保留舊版入口,提前進行埋點用戶以便應(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)品,如果類似于團隊協(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缺乏認知,就有很大的可能性會造成信息雜亂,并且在Dashboard的界面中充斥著一些無關(guān)緊要的指標(biāo),這就是失去了Dashboard存在的意義。另一方面在b端產(chǎn)品中,Dashboard往往是以首頁的形式出現(xiàn)的,是非常重要的。

文章來源:站酷   作者:一九互七

藍藍設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://sillybuy.com

存檔