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

寫在前面

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

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

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

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

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

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

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

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

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

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

需求1. 掌握情況

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

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

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

需求2. 解決問題

再說到第二個需求“解決問題”，對于一個長時間使用中的系統(tǒng)來說，這個才算是數(shù)據(jù)看板的核心。

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

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

需求3. 匯報工作

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

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

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

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

上大屏的

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

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

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

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

不上大屏的

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

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

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

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

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

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

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

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

舉個例子，頁面上統(tǒng)計的“人口數(shù)量”“房屋數(shù)量”等屬于“數(shù)據(jù)統(tǒng)計”，同時也是“靜態(tài)數(shù)據(jù)”（因為幾乎不變或變化很少），如下圖所示：

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

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

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

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

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

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

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

3. 分析結(jié)論

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

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

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

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

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

而遇到滿足不了的情況時，需要有一些特殊的圖表來輔助。下面推薦一些我用過的。

需要注意的是：雖然新的圖表從展現(xiàn)方式上更新穎，也更符合你所想要表達的，但請謹慎使用。因為并不是所有的用戶都能夠理解你的圖表，或者說絕大多數(shù)用戶都無法理解你的新圖表。

正如我們測試部的同事專門跑來問我面積圖里的中的值是什么含義時，我才知道這個問題有多么嚴重。

1. 雷達圖

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

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

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

2. 色塊圖

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

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

3. 南丁格爾玫瑰圖

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

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

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

4. 韋恩圖

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

六、如何布局？

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

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

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

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

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

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

2. 2塊內(nèi)容

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

3. 3塊內(nèi)容

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

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

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

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

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

4. 4塊內(nèi)容

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

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

5. 關(guān)于長頁面還是單頁面

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

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

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

6. 錯誤示范

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

結(jié)語

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

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

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