一本大道无码人妻精品专区,亚洲欧美日韩尤物AⅤ一区,亚洲精品乱码久久久久久按摩

搜索

APP

起點課堂會員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會特權(quán)

個人IP打造特權(quán)

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導直播

12場專業(yè)技能直播

會員專屬社群

榮耀標識

發(fā)布

注冊 | 登錄

產(chǎn)品設計心法：數(shù)據(jù)看板篇

Hugh Dong

2019-09-02

4 評論 41786 瀏覽 349 收藏

18 分鐘

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

寫在前面

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

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

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

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

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

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

而在此基礎上，“數(shù)據(jù)看板”是對“數(shù)據(jù)可視化”的載體，通過合理的頁面布局、效果設計來將可視化數(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)不符合預期的部分并給出指導意見，最后再通過看板來驗證是否有效解決。

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

需求3. 匯報工作

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

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

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

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

上大屏的

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

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

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

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

不上大屏的

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

不像頁面一樣有很多的動效，更注重的是簡明扼要的數(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è)務中能夠滿足使用，但在一些復雜的業(yè)務系統(tǒng)或需要深層次挖掘時，就需要根據(jù)目標將元數(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)常混跡Github（明明是GayHub~）的老板們應該很熟悉，提交代碼之后會有個綠色小格子統(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來完成布局和設計了。但是因為有4張數(shù)據(jù)看板畫廢了42頁的布（can）局（tong）經(jīng)（jiao）驗（xun）就講講自己遇到的的坑。這里需要把上大屏的和不上大屏的分開來講，側(cè)重點不同。