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

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

數(shù)據(jù)看板能精準(zhǔn)地傳達(dá)某項(xiàng)數(shù)據(jù)或者某個(gè)板塊的數(shù)據(jù)，通過對(duì)數(shù)據(jù)的可視化設(shè)計(jì)，則能更有效地傳達(dá)數(shù)據(jù)信息。

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

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

1. 溝通成本

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

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

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

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

2. 如何有效溝通

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

頁面最終效果如下圖：

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

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

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

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

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

下面將從以下三個(gè)層面來展開敘說：

1. 框架拆分

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

2. 組件化

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

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

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

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

3. 細(xì)節(jié)打磨

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

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

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

四、總結(jié)

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

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

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

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