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

一、可視化數(shù)據(jù)看板的設(shè)計目的？

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

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

二、如何設(shè)計看板？

1. 溝通成本

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

時間已過去一天，設(shè)計稿已出具雛型，再加以修飾，然后發(fā)給領(lǐng)導(dǎo)審核，審核后作了幾處簡單的調(diào)整，隨即發(fā)給需求方去過稿。

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

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

2. 如何有效溝通

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

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

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

1）有明確的設(shè)計方向

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

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

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

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

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

最后，整理信息，提煉關(guān)鍵詞，找到設(shè)計突破口。

3. 如何去設(shè)計？

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

即需求方情緒版風(fēng)格推導(dǎo)圖如下：

通過這一組情緒版風(fēng)格推導(dǎo)圖，得出以下結(jié)論：

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

通過以上結(jié)論，加以設(shè)計后呈現(xiàn)出來的頁面效果如圖：

然后進入設(shè)計內(nèi)審環(huán)節(jié)，期間提出以下問題：

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

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

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

頁面最終效果如下圖：

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

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

三、可視化數(shù)據(jù)看板設(shè)計方法？

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

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

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

1. 框架拆分

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

2. 組件化

定義：是一種高效的處理復(fù)雜應(yīng)用系統(tǒng)，更好的明確功能模塊做的方式。

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

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

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

3. 細節(jié)打磨

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

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

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

四、總結(jié)

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

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

本文由 @WOWdesign 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

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