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

2021-3-24    資深UI設(shè)計(jì)者

Dashboard的含義

前言

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


什么是Dashboard?

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



B端常見Dashboard

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



Dashboard設(shè)計(jì)案例

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


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


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


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


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



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)控操作、分析處理兩大場景。當(dāng)業(yè)務(wù)較為復(fù)雜時(shí),可以用戰(zhàn)略概覽場景提供快速入口。



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

使用戶可以一目了然地檢查其狀態(tài),提供關(guān)鍵指標(biāo)實(shí)時(shí)監(jiān)測并且告知異常狀態(tài)。更重視實(shí)時(shí)觀看狀態(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ù)全局概覽可視化,同時(shí)也能快速在頁面進(jìn)行操作完成工作。國內(nèi)B端產(chǎn)品最常出現(xiàn)的Dashboard功能模式。本篇文章也是著重介紹如何完成這個(gè)類型需求


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

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



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

了解Dashboard的用戶

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

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



信息處理

當(dāng)弄清楚需要呈現(xiàn)信息內(nèi)容后,需要進(jìn)一步對信息做處理。從用戶的角度,舉個(gè)例子在FMS財(cái)務(wù)系統(tǒng)記賬中,財(cái)務(wù)需要查看季度報(bào)表。那么數(shù)據(jù)的單位以默認(rèn)季度呈現(xiàn)會更為符合使用用戶需求,準(zhǔn)確且高效。具體可以從以下四個(gè)維度來做進(jìn)一步處理:覆蓋范圍、時(shí)間跨度、粒度、個(gè)性定制。一般核心指標(biāo)不超過7個(gè),確定核心指標(biāo)的聯(lián)系及優(yōu)先級。

合理的信息結(jié)構(gòu)能夠幫助用戶高效閱讀,理解內(nèi)容。如何將信息碎片有邏輯地組合在一起,合理呈現(xiàn)和布局,選擇使用什么結(jié)構(gòu)視內(nèi)容而定。


舉個(gè)例子:

對于管理者的角色來說使用Dashboard的訴求是:及時(shí)把控業(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)設(shè)計(jì)類型

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)系。



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

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

國內(nèi)B端產(chǎn)品一般是由以下這幾個(gè)部分組成的。全局導(dǎo)航、數(shù)據(jù)概覽、待辦事項(xiàng)、常用功能、任務(wù)進(jìn)展、平臺推送、數(shù)據(jù)圖表。下面帶大家仔細(xì)看下具體每個(gè)部分具體如何設(shè)計(jì)。


1.全局導(dǎo)航

在B端Dashboard中,全局導(dǎo)航一般由三個(gè)部分組成。平臺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è)計(jì)。


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

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


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

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

拓展性,一級導(dǎo)航的數(shù)目可以展示更多;

層級清晰,一二三級導(dǎo)航都可以流暢展示;

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

缺點(diǎn):

視覺動線左右折回,比頂部導(dǎo)航更易疲勞,

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


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

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

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

缺點(diǎn):

操作難度上升、視覺動線更復(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)點(diǎn):

沉浸感比側(cè)邊以及混合都要強(qiáng),幾乎不會對于用戶的閱讀行為有干擾,因?yàn)閃eb也有頂部瀏覽器菜單。

缺點(diǎn):

一級導(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)注的時(shí)間段,而非全部時(shí)間段。

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

這個(gè)模塊在設(shè)計(jì)表現(xiàn)上最重要就是信息層級的設(shè)計(jì)處理。如何能夠讓用戶一眼就看到最關(guān)注的數(shù)據(jù)內(nèi)容指標(biāo)。設(shè)計(jì)時(shí)注意突出數(shù)據(jù)才是關(guān)鍵。設(shè)計(jì)時(shí)關(guān)鍵數(shù)字上就要字號大一點(diǎn),甚至可以采用特殊的數(shù)字字體,例如DIN系列,來加強(qiáng)對比。



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)平鋪出來,平鋪幾個(gè)可以根據(jù)具體情況定。如果待辦樣式本身很多的情況下,可以采用tap切換的樣式全部展示出來。



4.常用功能

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



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

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



6.平臺推送

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



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

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


7.1圖表

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

7.1.1折線圖

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


7.1.2面積圖

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



7.1.3柱狀圖

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



7.1.4扇形圖

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




7.1.5環(huán)形圖

與扇形圖很相似,但是比扇形圖更加直觀瀏覽且不被搶視覺。避免過于太細(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ì)中,會根據(jù)場景去修飾刪減一些元素,以此來減少冗余信息,幫助用戶快速達(dá)成目標(biāo),在最少的時(shí)間內(nèi)獲取更多的信息。



7.2.1標(biāo)題

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



7.2.2軸

軸上最重要的內(nèi)容就是單位,將每個(gè)數(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ù)的軸作為隱藏,突出視覺重點(diǎn),減少不必要的線條。


軸刻度

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


網(wǎng)格線

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




7.2.3提示信息

以對照的方式來理解可視化對象的項(xiàng)目歸類信息,總結(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í),顯示該位置的數(shù)據(jù)。在簡潔的頁面中,也能讓用戶直觀看到信息對應(yīng)數(shù)據(jù)結(jié)果



7.2.6功能

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



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

首先tob的產(chǎn)品dashboard說到底還是給使用用戶所使用,也就是“人”。所以通常情況下dashboard除了傳遞出用戶想要的數(shù)據(jù)信息,還要傳遞服務(wù)于人。此外最重要的是B端設(shè)計(jì)師需要理解項(xiàng)目背景。例如某個(gè)財(cái)務(wù)應(yīng)用平臺不屬于科技未來感,而是突出一種安全,高效,具有客戶親和力的商業(yè)產(chǎn)品特性。那么關(guān)鍵詞:服務(wù)、輕松、高效、親和、精致。那么一個(gè)干凈、相對輕量、統(tǒng)一的Dashboard UI界面就提煉出來。



色彩

常說色彩是一種情緒版,在Dashboard設(shè)計(jì)中,色彩也是映射關(guān)鍵詞的非常重要一個(gè)環(huán)節(jié)



字體

B端產(chǎn)品一般都是以數(shù)據(jù)為主要信息源,針對一些關(guān)鍵信息指標(biāo)時(shí),可以采用特殊的數(shù)字字體。由于本身數(shù)字字體包內(nèi)存不大,所以也方便調(diào)用。例如DIN系列等等



設(shè)計(jì)稿尺寸

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



設(shè)計(jì)原則

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


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

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

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

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

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

5.避免過多顏色與不統(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)容過大時(shí),推薦保留舊版入口,提前進(jìn)行埋點(diǎn)用戶以便應(yīng)對用戶對于大版本適應(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平臺,可以考慮引入這個(gè)功能。幾組定制模塊可以滿足于不同角色的用戶需求,并且能夠增加dashboard的使用率

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

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

7.數(shù)字設(shè)置不一定要設(shè)置為右對齊,但是單位是金額,那么要將金額設(shè)置為右對齊,為了使用用戶識別方便,快速比較。

8.設(shè)計(jì)完Dashboard一定要自查一遍,是否真的符合工作人員的使用場景。有沒有理解不準(zhǔn)確的地方。



最后

為什么b端設(shè)計(jì)師要懂得Dashboard,在很多b端業(yè)務(wù)場景中,有個(gè)特點(diǎn),設(shè)計(jì)師常常會接到大量數(shù)據(jù)展示要求。如果設(shè)計(jì)師對dashboard缺乏認(rèn)知,就有很大的可能性會造成信息雜亂,并且在Dashboard的界面中充斥著一些無關(guān)緊要的指標(biāo),這就是失去了Dashboard存在的意義。另一方面在b端產(chǎn)品中,Dashboard往往是以首頁的形式出現(xiàn)的,是非常重要的。


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

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)

日歷

鏈接

個(gè)人資料

存檔