看板具有監(jiān)控、分析、協(xié)作三個(gè)作用。通過合理的頁面布局，將可視化數(shù)據(jù)更直觀的展現(xiàn)出來，能夠讓使用者快速獲取信息，從而做出合理、有效的決策。那么設(shè)計(jì)師在做產(chǎn)品設(shè)計(jì)時(shí)該如何處理數(shù)據(jù)看板呢？本篇文章將以五個(gè)步驟處理數(shù)據(jù)看板需求，相信能對(duì)設(shè)計(jì)崗位的你有所幫助。

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

看板來源于日語，指的是傳遞信號(hào)控制生產(chǎn)的工具，數(shù)據(jù)看板就是數(shù)據(jù)可視化的載體。

通過合理的頁面布局、效果設(shè)計(jì)，將可視化數(shù)據(jù)更直觀、更形象的展現(xiàn)出來，能夠讓使用者快速獲取信息，從而做出合理、有效的決策。

通?？窗寰哂幸韵氯齻€(gè)作用：監(jiān)控、分析、協(xié)作。

1. 監(jiān)控：監(jiān)控關(guān)鍵數(shù)據(jù)指標(biāo)，了解整體情況。
2. 分析：分析數(shù)據(jù)，及時(shí)發(fā)現(xiàn)異常，處理異常。
3. 協(xié)作：快捷的處理日常事宜。

二、設(shè)計(jì)師如何處理數(shù)據(jù)看板類需求

設(shè)計(jì)師拿到看板需求可以遵循以下幾個(gè)步驟：

1. 了解用戶：用戶是誰？使用目的？應(yīng)用場(chǎng)景？需要關(guān)注哪些內(nèi)容？

B端設(shè)計(jì)中我們大多數(shù)產(chǎn)品是面向內(nèi)部的用戶使用，但是基于角色、目的和應(yīng)用場(chǎng)景的不一樣，用戶的要求也會(huì)不一樣。

例如：若看板是作為大屏形式供決策層查看，通常我們的設(shè)計(jì)需要更豐富、酷炫，體現(xiàn)產(chǎn)品的的專業(yè)性與高大上。但是若看板是嵌在應(yīng)用內(nèi)給執(zhí)行層每日使用，我們要注意不要過度視覺設(shè)計(jì)，導(dǎo)致應(yīng)用加載卡頓甚至奔潰，影響解決問題效率

每一類用戶都有自己固定的崗位職責(zé)?？窗逍枰ㄖ苹娘@示用戶關(guān)注的內(nèi)容，而不可以不區(qū)分場(chǎng)景和角色把所有關(guān)鍵信息放在一個(gè)頁面顯示，全是重點(diǎn)反而失去了重點(diǎn)。

例如：“車隊(duì)管理員”和“汽運(yùn)調(diào)度員”其實(shí)都是車隊(duì)的成員，但是崗位角色不同，各自負(fù)責(zé)的工作內(nèi)容也不同。

這時(shí)候若我們想用看板幫助他去快速查看和處理日常工作，就需要按照各自角色去設(shè)計(jì)。而不是把車隊(duì)管理和汽運(yùn)調(diào)度融合在一起設(shè)計(jì)，否則用戶從車隊(duì)看板的眾多內(nèi)容里找到自己關(guān)心的重點(diǎn)是比較費(fèi)勁的。

當(dāng)然若是對(duì)于整個(gè)車隊(duì)的領(lǐng)導(dǎo)，他可能既關(guān)心車隊(duì)管理相關(guān)內(nèi)容，也關(guān)心汽運(yùn)調(diào)度內(nèi)容。那么這時(shí)候就不存在“找重點(diǎn)”這個(gè)問題了，都是他關(guān)注的重點(diǎn)。所以提前搞清楚為誰設(shè)計(jì)非常重要。

注意：看板有多個(gè)不同的角色，但是關(guān)注內(nèi)容大體相同的時(shí)候。我們可以用一個(gè)頁面解決，然后控制模塊權(quán)限，給特定角色看特定的內(nèi)容，減少重復(fù)開發(fā)。

2. 數(shù)據(jù)分析：數(shù)據(jù)釋義、數(shù)據(jù)關(guān)聯(lián)與邏輯、查詢維度、使用場(chǎng)景

對(duì)于數(shù)據(jù)看板類需求，我們作為設(shè)計(jì)師可能拿到的是可能是一個(gè)EXCEL表格，一個(gè)簡(jiǎn)單的原型，是沒有辦法去執(zhí)行做有效設(shè)計(jì)的。

這時(shí)候需要發(fā)揮設(shè)計(jì)師“刨根問底”的能力，向產(chǎn)品不斷提問，進(jìn)一步了解業(yè)務(wù)，當(dāng)然如果有條件向產(chǎn)品的直接用戶調(diào)研是最好的。

產(chǎn)品原型-excel表格

產(chǎn)品超簡(jiǎn)單產(chǎn)品原型

• 了解清楚每個(gè)字段是什么意思。
• 了解清楚數(shù)據(jù)之間的關(guān)聯(lián)性、計(jì)算邏輯、跳轉(zhuǎn)邏輯：只有了解清楚之后我們才知道使用什么圖表去表示，以及怎么去進(jìn)行信息的有效分類。例如：如果兩個(gè)數(shù)據(jù)之前有關(guān)聯(lián)且數(shù)據(jù)占比相加是100%，那么我們就可以用餅圖去做可視化處理。若信息具有層級(jí)關(guān)系，那么需要考慮用視覺上的對(duì)比、大小等手法去表現(xiàn)出來，讓用戶能夠直觀的重點(diǎn)分明。
• 了解清楚用戶查詢維度：包含時(shí)間維度，類型維度、狀態(tài)維度等等。例如時(shí)間維度我們需要思考是整個(gè)頁面有一個(gè)統(tǒng)一的時(shí)間進(jìn)行查詢，還是每個(gè)模塊或者字段有各自的取值時(shí)間段。
• 了解使用場(chǎng)景：了解清楚原子級(jí)別的字段的相關(guān)內(nèi)容，我們需要結(jié)合數(shù)據(jù)分類從分子角度了解用戶怎么去應(yīng)用這些數(shù)據(jù)。例如：用戶利用***能夠幫助他解決什么問題呢？他通常怎么看的呢？看的頻率和重要程度是怎么樣的呢？

其實(shí)每一個(gè)發(fā)問背后都帶有自己隱藏的設(shè)計(jì)思考，但是我們不能設(shè)計(jì)結(jié)束拿著方案直接問產(chǎn)品說這樣可不可以。要有理有據(jù)，先了解業(yè)務(wù)，從實(shí)際業(yè)務(wù)場(chǎng)景出發(fā)做設(shè)計(jì)。

比如下面數(shù)據(jù)，從產(chǎn)品的原型其實(shí)我們看不太出來數(shù)據(jù)之間的關(guān)系與重要層級(jí)。通過和產(chǎn)品溝通我了解到，用戶其實(shí)主要想看準(zhǔn)點(diǎn)率有沒有異常，且：

（運(yùn)行次數(shù)-晚點(diǎn)次數(shù)）/運(yùn)行次數(shù)=準(zhǔn)點(diǎn)率

那我們首先在設(shè)計(jì)上就得突出準(zhǔn)點(diǎn)率，并且呈現(xiàn)數(shù)據(jù)之間的關(guān)系（具體表現(xiàn)如下圖），且用不同顏色區(qū)分準(zhǔn)點(diǎn)率正常和異常的情況，讓用戶做到一目了然：

3. 信息組織與分類：頁面布局

了解清楚用戶是誰，怎么使用數(shù)據(jù)之后，我們需要對(duì)信息進(jìn)行模塊分類，然后再對(duì)模塊按照用戶關(guān)注程度進(jìn)行排序。

注：對(duì)于比較復(fù)雜的數(shù)據(jù)，分類比較困難的情況下，可以采用卡片分類法，讓用戶協(xié)助進(jìn)行分類，保證分類的準(zhǔn)確性。

4. 可視化設(shè)計(jì)：圖表選擇、顏色確定

確定好整體頁面布局后，需要對(duì)模塊內(nèi)的內(nèi)容進(jìn)行視覺優(yōu)化，包含了圖表選擇和顏色確定。

圖表選擇。需要考慮數(shù)據(jù)之間的關(guān)系、用戶認(rèn)知；不要追求好看忽視圖表閱讀性和可實(shí)現(xiàn)性（開發(fā)一般常用echart網(wǎng)站上的開源圖表進(jìn)行開發(fā)，沒有特殊視覺要求時(shí)，可以進(jìn)行參考選擇）。

圖片引用自作者Yalebobo，侵權(quán)刪

顏色確定。通常企業(yè)都有自己定義的顏色規(guī)范，可以從中選擇進(jìn)行使用，但是需要注意以下幾點(diǎn)：

• 是顏色選擇盡量不要超過3種。
• 不要選擇高飽和度的顏色，容易刺激眼睛疲勞。
• 注意實(shí)際業(yè)務(wù)中的顏色與定義的顏色有沒有矛盾。例如：對(duì)大多數(shù)人來說，紅色代表“停止”或“壞”，綠色代表“好”或“開始”，金融行業(yè)卻相反。

5. 測(cè)試

做完方案我們可以先做簡(jiǎn)單的瞇眼測(cè)試和用戶測(cè)試，看看自己和用戶能不能真的get到自己設(shè)計(jì)的重點(diǎn)，以及重點(diǎn)是否正確。

• 瞇眼測(cè)試。瞇眼測(cè)試方法可用來研究產(chǎn)品界面架構(gòu),判斷布局是否合理、層次是否清晰、視覺流是否流暢、重要元素是否突出。實(shí)踐方式是閉上一只眼睛，瞇著另一只眼睛看屏幕，看看哪些元素突出，哪些元素模糊，哪些元素看上去分組了(親密性和區(qū)塊)。
• 用戶測(cè)試。可以拿著設(shè)計(jì)稿在開發(fā)之前尋求真實(shí)用戶意見，看看是否滿足用戶使用需求