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

寫在前面

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

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

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

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

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

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

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

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

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

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

需求1. 掌握情況

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

但這種需求大多是一次性的，在你的管轄范圍內有多少人日?；顒印⒍嗌俜课萁ㄖ?，都是基本固定的，在使用過程中越來越熟悉，就算不去看也能說出個大概。

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

需求2. 解決問題

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

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

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

需求3. 匯報工作

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

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

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

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

上大屏的

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

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

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

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

不上大屏的

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

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

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

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

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

在上面兩個部分中已經有提到一些：

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

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

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

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

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

2. 數(shù)據分析

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

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

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

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

3. 分析結論

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

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

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

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

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

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

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

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

1. 雷達圖

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

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

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

2. 色塊圖

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

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

3. 南丁格爾玫瑰圖

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

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

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

4. 韋恩圖

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

六、如何布局？

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

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

1. 需要先確定的：有幾塊內容

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

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

需要注意的是：并不是劃了4*N的格子，就要嚴格按這個長寬來設計，根據內容和重要性調整長和寬。

2. 2塊內容

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

3. 3塊內容

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

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

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

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

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

4. 4塊內容

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

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

5. 關于長頁面還是單頁面

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

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

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

6. 錯誤示范

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

結語

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

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

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