本文作者依據(jù)工作中項(xiàng)目實(shí)踐的所思所想，并結(jié)合案例等分享了數(shù)據(jù)看板設(shè)計(jì)過(guò)程中需要注意的一些問(wèn)題，供大家一同參考和學(xué)習(xí)。

寫在前面

說(shuō)來(lái)慚愧，最近在頁(yè)面設(shè)計(jì)上踩了不少的坑，于是想著把產(chǎn)品設(shè)計(jì)中遇到的問(wèn)題和心得拎出來(lái)講講，希望能給更多的新人產(chǎn)品經(jīng)理提供布局、內(nèi)容定位上的幫助。

本篇包含了數(shù)據(jù)看板的幾個(gè)內(nèi)容：

1. 什么是數(shù)據(jù)看板?
2. 為什么需要數(shù)據(jù)看板？
3. 數(shù)據(jù)看板分為哪幾類？
4. 數(shù)據(jù)看板包含哪些內(nèi)容？
5. 數(shù)據(jù)如何可視化？
6. 如何布局？

一、什么是數(shù)據(jù)看板?

提到“數(shù)據(jù)看板”就不得不先說(shuō)“數(shù)據(jù)可視化”，百度對(duì)“數(shù)據(jù)可視化”的定義是：

指將大型數(shù)據(jù)集中的數(shù)據(jù)以圖形圖像形式表示，并利用數(shù)據(jù)分析和開(kāi)發(fā)工具發(fā)現(xiàn)其中未知信息的處理過(guò)程。數(shù)據(jù)可視化主要旨在借助于圖形化手段，清晰有效地傳達(dá)與溝通信息。

而在此基礎(chǔ)上，“數(shù)據(jù)看板”是對(duì)“數(shù)據(jù)可視化”的載體，通過(guò)合理的頁(yè)面布局、效果設(shè)計(jì)來(lái)將可視化數(shù)據(jù)更好的展現(xiàn)。

二、為什么需要數(shù)據(jù)看板？

如果說(shuō)數(shù)據(jù)看板 ≈ 圖形化手段來(lái)展現(xiàn)數(shù)據(jù)的頁(yè)面，那么繞不開(kāi)第二個(gè)問(wèn)題就是：為什么需要數(shù)據(jù)看板？或者說(shuō)，數(shù)據(jù)看板的作用是什么？

私以為數(shù)據(jù)看板的作用包含三部分：掌握情況、解決問(wèn)題、匯報(bào)工作。

需求1. 掌握情況

在這三個(gè)需求中，“掌握情況”是每個(gè)人的基本需求，控制欲強(qiáng)的客戶尤其如此（對(duì)，公安的客戶爸爸控制欲MAX）。

但這種需求大多是一次性的，在你的管轄范圍內(nèi)有多少人日?；顒?dòng)、多少房屋建筑，都是基本固定的，在使用過(guò)程中越來(lái)越熟悉，就算不去看也能說(shuō)出個(gè)大概。

在這個(gè)需求中數(shù)據(jù)的展現(xiàn)就比較重要，但大部分都是數(shù)量的統(tǒng)計(jì)，不包含分析類的內(nèi)容。

需求2. 解決問(wèn)題

再說(shuō)到第二個(gè)需求“解決問(wèn)題”，對(duì)于一個(gè)長(zhǎng)時(shí)間使用中的系統(tǒng)來(lái)說(shuō)，這個(gè)才算是數(shù)據(jù)看板的核心。

能夠通過(guò)數(shù)據(jù)可視化，從動(dòng)態(tài)數(shù)據(jù)中提煉出規(guī)律，發(fā)現(xiàn)不符合預(yù)期的部分并給出指導(dǎo)意見(jiàn)，最后再通過(guò)看板來(lái)驗(yàn)證是否有效解決。

在前一個(gè)數(shù)量統(tǒng)計(jì)的基礎(chǔ)上，發(fā)現(xiàn)問(wèn)題的過(guò)程需要根據(jù)業(yè)務(wù)將動(dòng)態(tài)數(shù)據(jù)展現(xiàn)為趨勢(shì)，通過(guò)趨勢(shì)波動(dòng)來(lái)發(fā)展并驗(yàn)證問(wèn)題。

需求3. 匯報(bào)工作

最后一個(gè)需求“匯報(bào)工作”，通過(guò)比較酷炫直觀的方式讓領(lǐng)導(dǎo)了解近期的工作情況，所以需要一些結(jié)論性的內(nèi)容，如環(huán)比是否有提高？不需要再去思考圖表的含義就能一目了然，同時(shí)需要支持報(bào)表的導(dǎo)出。

三、數(shù)據(jù)看板分為哪幾類？

在安防領(lǐng)域的業(yè)務(wù)系統(tǒng)中數(shù)據(jù)看板一般分兩類：上大屏的和不上大屏的。

這樣說(shuō)可能有點(diǎn)土氣，但事實(shí)上是由于展現(xiàn)的位置不同，其內(nèi)容的側(cè)重點(diǎn)也不同。

上大屏的

“上大屏的”通常指掛在指揮大廳的大屏上的頁(yè)面，也是一個(gè)系統(tǒng)的核心頁(yè)面。

所以會(huì)在動(dòng)態(tài)效果上花費(fèi)較多的精力，不適合將所有的數(shù)據(jù)都堆疊上去，需要對(duì)圖表取舍。

數(shù)據(jù)時(shí)效性上也更偏重于實(shí)時(shí)數(shù)據(jù)，能夠在第一時(shí)間預(yù)警。就像這樣：

圖源花瓣(https://huaban.com/pins/1666060700/)

不上大屏的

“不上大屏的”通常指的是業(yè)務(wù)模塊中的統(tǒng)計(jì)頁(yè)面，主要針對(duì)系統(tǒng)日常使用中的某一部分的業(yè)務(wù)指標(biāo)進(jìn)行分析。

不像頁(yè)面一樣有很多的動(dòng)效，更注重的是簡(jiǎn)明扼要的數(shù)據(jù)可視化展現(xiàn)，盡可能的展現(xiàn)更飽滿的內(nèi)容。

從數(shù)據(jù)的時(shí)效性上更多的是趨勢(shì)數(shù)據(jù)，而不會(huì)有很多實(shí)時(shí)的數(shù)據(jù)需要盯著。這一類頁(yè)面旨在通過(guò)趨勢(shì)發(fā)現(xiàn)問(wèn)題、解決問(wèn)題。就像這樣：

圖源花瓣(https://huaban.com/pins/2610517700/)

四、數(shù)據(jù)看板包含哪些內(nèi)容？

在上面兩個(gè)部分中已經(jīng)有提到一些：

• 從作用上分為“數(shù)據(jù)統(tǒng)計(jì)”“數(shù)據(jù)分析”“分析結(jié)論”；
• 從時(shí)效性上分為“靜態(tài)數(shù)據(jù)”和“動(dòng)態(tài)數(shù)據(jù)”，動(dòng)態(tài)數(shù)據(jù)又分為“實(shí)時(shí)”和“態(tài)勢(shì)”。

1. 數(shù)據(jù)統(tǒng)計(jì)

舉個(gè)例子，頁(yè)面上統(tǒng)計(jì)的“人口數(shù)量”“房屋數(shù)量”等屬于“數(shù)據(jù)統(tǒng)計(jì)”，同時(shí)也是“靜態(tài)數(shù)據(jù)”（因?yàn)閹缀醪蛔兓蜃兓苌伲?，如下圖所示：

像統(tǒng)計(jì)“人臉抓拍”的數(shù)量時(shí)，也屬于“數(shù)據(jù)統(tǒng)計(jì)”，只不過(guò)數(shù)據(jù)是動(dòng)態(tài)的，而且是在很短的時(shí)間內(nèi)會(huì)更新（每隔幾秒），這一類屬于“實(shí)時(shí)”的，如下圖所示：

而像統(tǒng)計(jì)“人流量”時(shí)，雖然都是“數(shù)據(jù)統(tǒng)計(jì)”，也是“動(dòng)態(tài)”的，但因?yàn)檎故窘Y(jié)果更偏重于看發(fā)展趨勢(shì)，以時(shí)間為維度來(lái)看，所以歸為“態(tài)勢(shì)”，如下圖所示：

2. 數(shù)據(jù)分析

“數(shù)據(jù)統(tǒng)計(jì)”中展示的幾乎都是不經(jīng)過(guò)加工的數(shù)據(jù)，將元數(shù)據(jù)直接讀取展現(xiàn)。簡(jiǎn)單的業(yè)務(wù)中能夠滿足使用，但在一些復(fù)雜的業(yè)務(wù)系統(tǒng)或需要深層次挖掘時(shí)，就需要根據(jù)目標(biāo)將元數(shù)據(jù)加工。

如果從出行時(shí)段的角度來(lái)看，不經(jīng)過(guò)加工的元數(shù)據(jù)僅僅知道你每天在什么時(shí)間出門，可以統(tǒng)計(jì)出每個(gè)時(shí)間點(diǎn)的出行次數(shù)。

但僅僅將這個(gè)數(shù)據(jù)展示出來(lái)并不足以說(shuō)明什么問(wèn)題，所以需要二次加工，將工作日和非工作日分開(kāi)，并且按時(shí)間段進(jìn)行區(qū)分，如下圖所示：

通過(guò)這張圖表，可以相對(duì)直觀的看出在工作日和非工作日出行規(guī)律是否一致，各自規(guī)律如何。

3. 分析結(jié)論

如果僅僅將數(shù)據(jù)統(tǒng)計(jì)、圖表分析放在頁(yè)面上，靠用戶自己去理解的話，難免使用起來(lái)會(huì)比較吃力，所以需要有結(jié)論性的內(nèi)容來(lái)更直觀的告訴他結(jié)果。

正如數(shù)據(jù)分析中舉得那個(gè)例子中所描述的“工作日與非工作日是否規(guī)律相同”，從理解圖表到轉(zhuǎn)化為結(jié)論“一致性高/低”需要有一個(gè)思考的過(guò)程，為了用戶的“do not make me think”，就需要我們將結(jié)論直接輸出給他，如下面的雷達(dá)圖所示：

五、數(shù)據(jù)如何可視化？

數(shù)據(jù)看板常用的四類圖表大家都已經(jīng)非常熟悉了，而且也能夠滿足絕大部分的使用場(chǎng)景，

柱狀圖（或堆積柱狀圖）、折線圖（或曲線）、面積圖和餅圖（或環(huán)圖），如下圖所示：

而遇到滿足不了的情況時(shí)，需要有一些特殊的圖表來(lái)輔助。下面推薦一些我用過(guò)的。

需要注意的是：雖然新的圖表從展現(xiàn)方式上更新穎，也更符合你所想要表達(dá)的，但請(qǐng)謹(jǐn)慎使用。因?yàn)椴⒉皇撬械挠脩舳寄軌蚶斫饽愕膱D表，或者說(shuō)絕大多數(shù)用戶都無(wú)法理解你的新圖表。

正如我們測(cè)試部的同事專門跑來(lái)問(wèn)我面積圖里的中的值是什么含義時(shí)，我才知道這個(gè)問(wèn)題有多么嚴(yán)重。

1. 雷達(dá)圖

雷達(dá)圖可以展示由多個(gè)維度組成的能力衡量，適用于展示性能數(shù)據(jù)。

通常適用范圍：維度≥4個(gè)，多邊形≤2個(gè)

并不是說(shuō)一定要在這個(gè)范圍內(nèi)，如果多邊形過(guò)多或維度過(guò)少的話，展示效果會(huì)大打折扣

2. 色塊圖

經(jīng)?；燠EGithub（明明是GayHub~）的老板們應(yīng)該很熟悉，提交代碼之后會(huì)有個(gè)綠色小格子統(tǒng)計(jì)上傳頻次的。不同的顏色深淺代表次數(shù)不同，縱向是周一至周日，橫向是一年12個(gè)月份，很合統(tǒng)計(jì)長(zhǎng)時(shí)間范圍內(nèi)的頻次規(guī)律。比如在一年內(nèi)哪一段時(shí)間頻繁出現(xiàn)，出現(xiàn)的頻次多少。

需要注意的是能夠統(tǒng)計(jì)的維度比較單一，而且盡量不要出現(xiàn)最高值非常高且只有一兩天，其他值都很低，處在僅有最高值10%左右甚至更低的狀態(tài)。

3. 南丁格爾玫瑰圖

南丁格爾玫瑰圖初看上去很像餅圖，但一定要搞清楚的是南丁格爾玫瑰圖與餅圖所表達(dá)的核心完全不同！餅圖展現(xiàn)的是各類數(shù)據(jù)的占比，而南丁格爾玫瑰圖統(tǒng)計(jì)的是數(shù)據(jù)量的多少，可以理解為變形的柱狀圖。

同時(shí)，因?yàn)槊倒鍒D的形狀特點(diǎn)，一張圖中統(tǒng)計(jì)30個(gè)左右的數(shù)量也毫無(wú)壓力，同數(shù)量下的柱狀圖就要占很大的位置了。而且如果數(shù)據(jù)項(xiàng)數(shù)量不固定的話（比如有時(shí)30個(gè)柱子，有時(shí)10個(gè)柱子這種情況），使用玫瑰圖展示效果會(huì)更好一些。

需要注意的是：數(shù)據(jù)項(xiàng)盡可能多，如果小于10個(gè)，還是老老實(shí)實(shí)用柱狀圖吧。

4. 韋恩圖

韋恩圖相對(duì)來(lái)說(shuō)容易理解，但使用的場(chǎng)景較小，通常用來(lái)表示兩個(gè)數(shù)據(jù)集相關(guān)聯(lián)的多少。

六、如何布局？

講了這么多，到了最后終于該講布局了。

嚴(yán)格意義上來(lái)說(shuō)布局不屬于產(chǎn)品經(jīng)理的工作范圍，在你羅列好需要展示哪些內(nèi)容、展示方式、優(yōu)先級(jí)、哪幾個(gè)歸一類之后，就可以交由UED來(lái)完成布局和設(shè)計(jì)了。但是因?yàn)橛?張數(shù)據(jù)看板畫廢了42頁(yè)的布（can）局（tong）經(jīng)（jiao）驗(yàn)（xun）就講講自己遇到的的坑。這里需要把上大屏的和不上大屏的分開(kāi)來(lái)講，側(cè)重點(diǎn)不同。

1. 需要先確定的：有幾塊內(nèi)容

在設(shè)計(jì)布局之前一定一定要先想清楚的就是內(nèi)容分為幾塊，基本上是2-4塊，三四塊的情況會(huì)比較多，再多的話就會(huì)顯得太散。

數(shù)據(jù)看板后可以用4*N的格子來(lái)劃開(kāi)，往里面填充內(nèi)容，如果是單頁(yè)面的話，則是4*3的格子。

需要注意的是：并不是劃了4*N的格子，就要嚴(yán)格按這個(gè)長(zhǎng)寬來(lái)設(shè)計(jì)，根據(jù)內(nèi)容和重要性調(diào)整長(zhǎng)和寬。

2. 2塊內(nèi)容

內(nèi)容如果劃分為兩塊，大多數(shù)的情況是零散的圖表（#02）環(huán)繞著一個(gè)核心部分（左上角C位 #01）

3. 3塊內(nèi)容

大多數(shù)的數(shù)據(jù)看板都是分為三塊，第一種布局方式非常通用，無(wú)論是否是大屏頁(yè)面都可以。

如果是大屏頁(yè)，則#01和#03放數(shù)據(jù)統(tǒng)計(jì)，#02放置地圖一類的。

如果不是大屏頁(yè)，#01放數(shù)量統(tǒng)計(jì)的較多，#02作為C位放置核心內(nèi)容，#03放剩余的部分

第二種布局方式也同樣，是否為大屏均可。這種布局方式下的大屏，#03的位置有很大的空間，可以用tab的方式來(lái)切換各種類型的數(shù)據(jù)，充分利用起來(lái)，#02仍然是地圖的核心位置。

第三種布局下就不適合作為大屏使用了，但優(yōu)點(diǎn)是#01作為足夠長(zhǎng)的C位，可以放按時(shí)間統(tǒng)計(jì)的態(tài)勢(shì)圖（如果足夠重要的話）。

4. 4塊內(nèi)容

四塊內(nèi)容的話最常見(jiàn)的一種就是如下圖所示，是否為大屏均可，#02放置地圖，#04放置一些實(shí)時(shí)的圖表（如人臉墻、實(shí)時(shí)曲線圖等），#01和#03則可以放很多數(shù)據(jù)統(tǒng)計(jì)的內(nèi)容。

#02和#04倒過(guò)來(lái)同理，但這種方式不能用在大屏上，#02放置曲線圖時(shí)間態(tài)勢(shì)一類的內(nèi)容。

5. 關(guān)于長(zhǎng)頁(yè)面還是單頁(yè)面

說(shuō)到布局就肯定會(huì)需要考慮做單屏頁(yè)還是長(zhǎng)屏頁(yè)，和UED討論之后得到的結(jié)論是只需要考慮內(nèi)容一屏內(nèi)是否放得下即可，并不需要抉擇是B端還是C端就要偏重于用哪種方式。

縱使長(zhǎng)頁(yè)面可以放得下更多的內(nèi)容，用戶的大部分注意力也會(huì)停留在第一頁(yè)，其他的內(nèi)容反而有些藏得深了。

大部分的長(zhǎng)屏頁(yè)都講數(shù)據(jù)統(tǒng)計(jì)以“塊”的形式羅列在最上面，下面按行來(lái)劃分內(nèi)容。

6. 錯(cuò)誤示范

在設(shè)計(jì)的過(guò)程中有一個(gè)很典型的錯(cuò)誤示例就是如下圖，2:4:4的布局。
#01是數(shù)量的羅列，#02-03 是兩個(gè)餅圖，#04-06展示的是三張曲線圖，#07-08展示的是類型統(tǒng)計(jì)，包含了餅圖、柱狀圖等等。這種布局沒(méi)有重點(diǎn)，感覺(jué)像圖表的平鋪羅列，如下圖所示：

結(jié)語(yǔ)

到了這一步，數(shù)據(jù)看板就可以從產(chǎn)品經(jīng)理手里交給UED設(shè)計(jì)樣式了。如果有不同的見(jiàn)解或建議，多多交流~

本文由 @Hugh Dong 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議