編輯導語：結合數據看板，我們可以更精準地獲取數據信息，進而推動后續決策。那么，如何設計出有效的數據看板，降低團隊間的溝通成本，提高決策效率？本篇文章里，作者總結了可視化數據看板的設計方法，一起來看一下吧。

一、可視化數據看板的設計目的？

數據看板能精準地傳達某項數據或者某個板塊的數據，通過對數據的可視化設計，則能更有效地傳達數據信息。

• 對企業而言，傳統的數據報表工具部署周期長且耗費人力；
• 對決策者而言，想要了解業務狀況，需等待每周或每月的分析報告且體驗差；
• 可視化數據看板，通過圖形化有效設計，能更加直觀地感受到各個數據展現，為企業提供準確且及時有效的決策方案。

二、如何設計看板？

1. 溝通成本

在接到需求時，未進行有效溝通，針對需求的不確定性，作了簡單的溝通。隨后需求方表示希望能盡快看到頁面效果，本以為只是一個簡單的設計任務，所以就匆忙地進行設計，打開軟件不停地Ctrl+C/Ctrl+V，噼里啪啦一頓操作猛如虎…

時間已過去一天，設計稿已出具雛型，再加以修飾，然后發給領導審核，審核后作了幾處簡單的調整，隨即發給需求方去過稿。

等待的過程是漫長的，本以為任務已“圓滿結束”，但劇情往往會跟我們預期的不一樣，幾天后收到了需求方的反饋郵件：不是他們想要，希望能重新設計。這句話當時一直在腦子里回蕩，久久不能平靜下來，相信這個節點大部分設計師此時一定是不理智的。

時間慢慢的流逝，冷靜下來思考后會發現，其實在需求對接前期就已經埋下了“隱患”——未進行有效的溝通。

2. 如何有效溝通

時間一點點流逝，設計交付一步步臨近，接下來需要與時間賽跑。

隨后重新梳理設計思路，先跟需求方進行有效溝通，在雙方的溝通中，把梳理后設計思路與對方進行交流，希望通過有效的溝通，在設計思路以及設計風格上達成一致共識。

設計思路主要從以下兩個方向來進行（直切主題）：

1）有明確的設計方向

需求方知道自己想要什么樣的設計，這種情況是最省時省力的，節省很多原本需要我們花時間去做的事情。通常遇到這種情況，我們根據要求，通過自身的專業，便可快速完成符合需求方的設計稿。

2）沒有設計方向，不知道自己想要什么樣的設計？

對于這種情況，我們則采取主動引導的方式一步步去推導，流程大致如下：

首先，根據需求，弄清楚設計的是什么？干什么用？進一步了解需求的背景及使用場景，有助于設計師對后續風格的判斷。

其次，我們會找一些具有風格傾向的圖片或設計參考供需求方去做選擇，再對所選擇的圖片做分析、提煉圖片的特點、挖掘設計機會點。

最后，整理信息，提煉關鍵詞，找到設計突破口。

3. 如何去設計？

經過前期溝通，已清楚了解需求方的真正訴求，再回歸到我們的設計需求，通過需求方所選擇的圖片進行分析，得出的關鍵詞：科技、質感、炫酷等。

即需求方情緒版風格推導圖如下：

通過這一組情緒版風格推導圖，得出以下結論：

1. 以深藍色為主，可融入星空璀璨的視覺感；
2. 玻璃通透感的設計表達；
3. 對光影的炫酷呈現；
4. 需求方對地球元素的預期（多次強調）。

通過以上結論，加以設計后呈現出來的頁面效果如圖：

然后進入設計內審環節，期間提出以下問題：

1. 地球元素稍顯突兀，未能很好的融入頁面；
2. 背景小點點過多、太扎眼，會分散頁面視覺聚焦，可適當進行降噪處理；
3. 整個頁面的顏色對比不夠，過于冰冷。

針對以上問題，對頁面進行調整。在調整的過程中，通過不同形式的表現，都未能很好的處理地球的問題，在無意中去掉了地球元素，頁面反而顯得更加的協調，同時標題處加入高光的點綴，以及對光線的調整，整個頁面顯得更立體。

因此，在設計過程中，設計過程前期是在做加法，如何去有效布局則因人而異。但在設計后期，發現某些元素并不適合，如在沒有尋找到更好的方法之前，可以嘗試去做減法，同樣會有不一樣的收獲。

頁面最終效果如下圖：

接下來，我們將再一次把設計稿提交給需求方去審核，終于不負眾望，愉快地過稿了。

下面我們把整個設計流程再重新梳理一遍：

三、可視化數據看板設計方法？

上面我們已清楚的描述了整個看板的設計過程以及如何去設計的一些思考。通過這個案例，是否可以找到一定的“規律”。

規律是需要追根溯源的。我們則更多的是通過一些設計經驗、方法，尋找一定范圍內的共識，通過這個共識，在往后類似的需求設計，可以參考這個方法，在一定程度上有效提升我們的設計效率，這也是小編想要表達的核心內容。

下面將從以下三個層面來展開敘說：

1. 框架拆分

我們可以仔細去觀察，整個頁面其實是多個分子組成，然后每個分子里包含很多組件，組件又有很多元件，這樣一層層的嵌套進去。通過類似的方法，可視化數據看板頁面的框架大概可以概括為：背景層+容器層+內容層+標題欄。

2. 組件化

定義：是一種高效的處理復雜應用系統，更好的明確功能模塊做的方式。

上面我們已把頁面的框架拆分成：背景層+容器層+內容層+標題欄四個維度，然后我們再把對應的每個維度都以組件的方式來打包處理。

例如：背景層，可以把背景層以顏色為顆粒度，細分為紅色、橙色、黃色、綠色、藍色…，亦或者以類型為顆粒度，細分為科技、軍工、環保、節日等，然后把細分的各個顆粒度背景組件化。同理，容器層、內容層、標題欄是同樣的道理。

往后，無論我們面對什么類型的需求設計，只需要選擇對應的組件即可。當然，這里更多是說組件化的思路，至于組件庫的搭建，是一個長期的設計工作，需要我們平時一點點的搭建、積累。

3. 細節打磨

一幅好的設計作品，其細節起著至關重要的作用。細節表現力也是考驗我們設計師能力的一個重要指標。很多微小的設計，看似簡簡單單，卻是設計師對設計作品以及對使用要求的深層理解！

對于一副設計作品而言，極致的細節處理，不但能讓設計畫面呈現美感，而且還能提升設計的品質，這些都離不開對設計細節的推敲和研究。

以上就是我對可視化數據看板設計方法的探索以及思考，從頁面架構拆分、模塊組件化以及細節打磨三方面出發，層層“解剖”，形成這一套設計方法，希望能對大家有幫助。

四、總結

文章以設計師維度的視角，敘說了在設計可視化數據看板時遇到的問題及如何去展開設計。并且在完成設計之于，對于如何去尋找設計方法，進行了分析、總結。通過這篇文章，能對正在設計或有類似需求的小伙伴帶來幫助，同時也希望能成為小伙伴往后設計類似需求的一個敲門磚。

作者：WOWdesign，研究設計價值最大化，涉及用戶體驗、品牌體驗、空間體驗。

本文由 @WOWdesign 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基于 CC0 協議