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

一、什么是數據看板

看板來源于日語，指的是傳遞信號控制生產的工具，數據看板就是數據可視化的載體。

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

通?？窗寰哂幸韵氯齻€作用：監控、分析、協作。

1. 監控：監控關鍵數據指標，了解整體情況。
2. 分析：分析數據，及時發現異常，處理異常。
3. 協作：快捷的處理日常事宜。

二、設計師如何處理數據看板類需求

設計師拿到看板需求可以遵循以下幾個步驟：

1. 了解用戶：用戶是誰？使用目的？應用場景？需要關注哪些內容？

B端設計中我們大多數產品是面向內部的用戶使用，但是基于角色、目的和應用場景的不一樣，用戶的要求也會不一樣。

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

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

例如：“車隊管理員”和“汽運調度員”其實都是車隊的成員，但是崗位角色不同，各自負責的工作內容也不同。

這時候若我們想用看板幫助他去快速查看和處理日常工作，就需要按照各自角色去設計。而不是把車隊管理和汽運調度融合在一起設計，否則用戶從車隊看板的眾多內容里找到自己關心的重點是比較費勁的。

當然若是對于整個車隊的領導，他可能既關心車隊管理相關內容，也關心汽運調度內容。那么這時候就不存在“找重點”這個問題了，都是他關注的重點。所以提前搞清楚為誰設計非常重要。

注意：看板有多個不同的角色，但是關注內容大體相同的時候。我們可以用一個頁面解決，然后控制模塊權限，給特定角色看特定的內容，減少重復開發。

2. 數據分析：數據釋義、數據關聯與邏輯、查詢維度、使用場景

對于數據看板類需求，我們作為設計師可能拿到的是可能是一個EXCEL表格，一個簡單的原型，是沒有辦法去執行做有效設計的。

這時候需要發揮設計師“刨根問底”的能力，向產品不斷提問，進一步了解業務，當然如果有條件向產品的直接用戶調研是最好的。

產品原型-excel表格

產品超簡單產品原型

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

其實每一個發問背后都帶有自己隱藏的設計思考，但是我們不能設計結束拿著方案直接問產品說這樣可不可以。要有理有據，先了解業務，從實際業務場景出發做設計。

比如下面數據，從產品的原型其實我們看不太出來數據之間的關系與重要層級。通過和產品溝通我了解到，用戶其實主要想看準點率有沒有異常，且：

晚點次數/運行次數=準點率

那我們首先在設計上就得突出準點率，并且呈現數據之間的關系（具體表現如下圖），且用不同顏色區分準點率正常和異常的情況，讓用戶做到一目了然：

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

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

注：對于比較復雜的數據，分類比較困難的情況下，可以采用卡片分類法，讓用戶協助進行分類，保證分類的準確性。

4. 可視化設計：圖表選擇、顏色確定

確定好整體頁面布局后，需要對模塊內的內容進行視覺優化，包含了圖表選擇和顏色確定。

圖表選擇。需要考慮數據之間的關系、用戶認知；不要追求好看忽視圖表閱讀性和可實現性（開發一般常用echart網站上的開源圖表進行開發，沒有特殊視覺要求時，可以進行參考選擇）。

圖片引用自作者Yalebobo，侵權刪

顏色確定。通常企業都有自己定義的顏色規范，可以從中選擇進行使用，但是需要注意以下幾點：

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

5. 測試

做完方案我們可以先做簡單的瞇眼測試和用戶測試，看看自己和用戶能不能真的get到自己設計的重點，以及重點是否正確。

• 瞇眼測試。瞇眼測試方法可用來研究產品界面架構,判斷布局是否合理、層次是否清晰、視覺流是否流暢、重要元素是否突出。實踐方式是閉上一只眼睛，瞇著另一只眼睛看屏幕，看看哪些元素突出，哪些元素模糊，哪些元素看上去分組了(親密性和區塊)。
• 用戶測試?？梢阅弥O計稿在開發之前尋求真實用戶意見，看看是否滿足用戶使用需求