本文主要講述可視化全過(guò)程，并對(duì)各環(huán)節(jié)的關(guān)鍵點(diǎn)做了說(shuō)明，希望通過(guò)這篇文章能讓大家對(duì)可視化設(shè)計(jì)有一定的認(rèn)識(shí)。

什么是數(shù)據(jù)可視化

數(shù)據(jù)可視化是數(shù)據(jù)內(nèi)在價(jià)值的最終呈現(xiàn)手段，它利用各類圖表及圖形化的設(shè)計(jì)手段，將復(fù)雜不直觀的數(shù)據(jù)有邏輯的展現(xiàn)出來(lái)，使用戶找到內(nèi)在規(guī)律，發(fā)現(xiàn)問(wèn)題，從而指導(dǎo)經(jīng)營(yíng)決策，挖掘數(shù)據(jù)背后的商業(yè)價(jià)值。

數(shù)據(jù)可視化的使用場(chǎng)景

首先介紹下使用場(chǎng)景：

可視化應(yīng)用非常廣如ToC、ToB、ToG等都會(huì)存在，之前所看到的各種圖表僅以為是單純的數(shù)據(jù)統(tǒng)計(jì)，其不然它也是一種可視化的展示方式?，F(xiàn)階段更多的理解數(shù)據(jù)可視化是大屏展示，多屏幕拼接，展示諸多數(shù)據(jù)和圖表，效果一定是酷炫各種特效視覺(jué)于一身的才稱之為數(shù)據(jù)可視化，其實(shí)這只是其中一種可視化的表現(xiàn)方式。

下面基于應(yīng)用場(chǎng)景的不同，對(duì)可視化區(qū)分介紹。

第一類使用場(chǎng)景：

此類以使用為主，主要在電腦上操作的pc端可視化，用戶對(duì)它需長(zhǎng)時(shí)間使用，例如企業(yè)數(shù)據(jù)報(bào)表分析，各類BI等。在此類場(chǎng)景下，簡(jiǎn)潔簡(jiǎn)單高效的傳達(dá)數(shù)據(jù)內(nèi)容是非常必要的，更多的是數(shù)據(jù)分析師及業(yè)務(wù)部門在使用，他們需要長(zhǎng)時(shí)間停留在屏幕及數(shù)據(jù)上做分析統(tǒng)計(jì)比對(duì)等工作，精準(zhǔn)的傳達(dá)數(shù)據(jù)的同時(shí)也減少對(duì)眼睛的過(guò)度疲勞，利于用戶長(zhǎng)時(shí)間舒適閱讀，所以這類場(chǎng)景下以簡(jiǎn)潔為主。

（圖片來(lái)源于網(wǎng)絡(luò)）

第二類使用場(chǎng)景：

這類是以觀看為主，并以快速傳達(dá)核心數(shù)據(jù)信息的應(yīng)用場(chǎng)景。此類場(chǎng)景多應(yīng)用于指揮大廳、科技展館、數(shù)字展廳等，他的特點(diǎn)是多屏幕拼接，展示面積大、數(shù)據(jù)類型多，展現(xiàn)形式多元化，業(yè)內(nèi)也稱之為數(shù)據(jù)可視化大屏。

總之其主要就是核心數(shù)據(jù)通過(guò)視覺(jué)及動(dòng)畫的表現(xiàn)手法直觀的輸出給用戶，增加用戶的記憶達(dá)到過(guò)目不忘的效果，同時(shí)這對(duì)于數(shù)據(jù)信息的視覺(jué)傳達(dá)要求比較高。此應(yīng)用場(chǎng)景也是問(wèn)題疑問(wèn)比較多的，會(huì)關(guān)系到效果定位、數(shù)據(jù)信息傳達(dá)、表現(xiàn)方式、軟硬件結(jié)合等諸多情況。針對(duì)此應(yīng)用場(chǎng)景展開分析，其他可視化設(shè)計(jì)也是相通的。

大屏數(shù)據(jù)可視化該這樣設(shè)計(jì)

（1）精準(zhǔn)把握業(yè)務(wù)需求

設(shè)計(jì)終歸是助力業(yè)務(wù)的，準(zhǔn)確的理解業(yè)務(wù)需求是至關(guān)重要的，它將貫穿整個(gè)設(shè)計(jì)的始終，也是可視化設(shè)計(jì)開始的必要前提。如何解決用戶的問(wèn)題，完成既定目標(biāo)，都需要設(shè)計(jì)師對(duì)需求有一個(gè)比較準(zhǔn)確的理解。直接有效的方法就是“不懂就問(wèn)”。

（2）數(shù)據(jù)圖形化的選擇方法

需求及數(shù)據(jù)確立后，接下來(lái)是數(shù)據(jù)圖形化的選擇，不同的目標(biāo)不同的數(shù)據(jù)對(duì)于圖表展示的選擇也是有講究的，如：部分占總體的比例（占比）更適合選用餅圖、用來(lái)反映時(shí)間變化趨勢(shì)的圖形化更適合曲線圖等等，總之不同的數(shù)據(jù)展示維度，選擇的圖表是有差異的。

同樣一組數(shù)據(jù)，存在多個(gè)圖表同可展示，怎樣選擇最恰當(dāng)?shù)膱D表是至關(guān)重要的，合適有效的圖表有助于信息有效的傳達(dá)。遇到具體的數(shù)據(jù)要根據(jù)數(shù)據(jù)的維度，和要表達(dá)的業(yè)務(wù)目標(biāo)，選擇一種最佳的圖表呈現(xiàn)。

（圖片來(lái)源于網(wǎng)絡(luò)）

這是可視化圖表選擇比較確切的一個(gè)方法，可以作為數(shù)據(jù)可視化圖表的選擇依據(jù)，有助于準(zhǔn)確快速的把數(shù)據(jù)圖形化。

首先根據(jù)業(yè)務(wù)目標(biāo)結(jié)合數(shù)據(jù)維度確定大的關(guān)系（比較、分部、構(gòu)成、聯(lián)系），隨后選擇合適的圖表，填充數(shù)據(jù)設(shè)計(jì)排版即可。到這一步圖表基本成型，但是比較基礎(chǔ)，為了視覺(jué)效果和數(shù)據(jù)的傳達(dá)，也會(huì)在此基礎(chǔ)上進(jìn)行優(yōu)化設(shè)計(jì)。

優(yōu)化設(shè)計(jì)之前要注意幾點(diǎn)：

1. 切忌設(shè)計(jì)時(shí)不要過(guò)度裝飾圖表，喧賓奪主造成數(shù)據(jù)不直觀，對(duì)觀者獲取數(shù)據(jù)產(chǎn)生障礙。
2. 圖形化要友好，不能一味的追求視覺(jué)效果，造成圖形識(shí)別度降低、友好度下降。
3. 圖形化后一定要利于理解。所有的設(shè)計(jì)一定是為業(yè)務(wù)服務(wù)的，數(shù)據(jù)圖形化后更不利于業(yè)務(wù)信息傳達(dá)，那就失去了圖形化設(shè)計(jì)的意義
4. 開發(fā)可實(shí)現(xiàn)，設(shè)計(jì)師常遇到，酷炸炫的效果讓開發(fā)落地非常困難，務(wù)必要多溝通，懂取舍。設(shè)計(jì)之初就要考慮全面。

設(shè)計(jì)尺寸與大屏的拼接方式

可視化大屏一般都是多屏拼接或者LEDLCD等材質(zhì)屏幕。不同的屏幕像素是不相同的，顯示像素、物理像素都不同，包括硬件設(shè)備的不同導(dǎo)致輸出像素也不相同，例如同樣是3X2的拼接屏，輸出像素可以是X1*Y1也可以是X2*Y2，這就造成了很多潛在問(wèn)題，設(shè)計(jì)之初屏幕硬件及拼接方式需要提前確定。

基本有兩個(gè)方法，簡(jiǎn)單的說(shuō)：

• 方法一、拼接屏可以按照拼接后的橫縱像素總和設(shè)計(jì)（拼接屏像素超大可等比例縮放）。LED/LCD屏幕設(shè)計(jì)也是同樣的原理。
• 方法二、按照硬件輸出像素設(shè)計(jì)，硬件設(shè)備的輸出像素一定是和整個(gè)拼接屏成比例或者是吻合的。所以按照輸出像素設(shè)計(jì)是可以的。

頁(yè)面設(shè)計(jì)及布局思路

屏幕的拼接方式及屏幕材質(zhì)確定后，就可以進(jìn)行頁(yè)面的設(shè)計(jì)及數(shù)據(jù)的布局，頁(yè)面的布局主要是依據(jù)業(yè)務(wù)及數(shù)據(jù)的重要程度來(lái)布局，可視化中會(huì)把核心的數(shù)據(jù)或業(yè)務(wù)的要點(diǎn)放中間。

一方面中間是視覺(jué)的中心，二來(lái)也是數(shù)據(jù)和業(yè)務(wù)最容易傳達(dá)給觀眾的核心位置。其他的數(shù)據(jù)放兩側(cè)排列，排列數(shù)據(jù)一定要考慮數(shù)據(jù)的關(guān)聯(lián)性及聯(lián)動(dòng)性，應(yīng)該有意識(shí)的把他們放一起或就近，讓他們有關(guān)聯(lián)系，當(dāng)一組數(shù)據(jù)變化時(shí)聯(lián)動(dòng)效果更凸顯，容易傳達(dá)數(shù)據(jù)的價(jià)值。

最后插播一句，如果是拼接屏記得把數(shù)據(jù)避開拼接縫，頁(yè)面布局時(shí)就要考慮屏幕拼接方式，盡量把數(shù)據(jù)有序的展示在屏幕內(nèi)，合理避開拼接縫減少對(duì)用戶觀感的影響。

具體設(shè)計(jì)要根據(jù)項(xiàng)目確定使用的工具做調(diào)整，如web、u3d、ue4等等。項(xiàng)目用什么開發(fā)工具很大程度決定了設(shè)計(jì)方法方式，各種工具自有不同的優(yōu)劣勢(shì)，像web輕量化圖表控件多，效果相比u3d會(huì)弱很多。u3d對(duì)三維支持好，粒子等效果有優(yōu)勢(shì)。了解這些大致可知道設(shè)計(jì)思路。

字體：

選擇識(shí)別性高的，字體不要太細(xì)，同時(shí)要注意版權(quán)，不要選擇太圓潤(rùn)的字體。

顏色：

顏色明度飽和度要高些，遠(yuǎn)距離觀更利于信息清晰傳達(dá)。顏色不要過(guò)于相近，大屏顏色相近更不易于數(shù)據(jù)間的區(qū)分，降低閱讀舒適感。大屏背景選擇深色系，內(nèi)容選擇亮色系。保持內(nèi)容與背景有一定的對(duì)比關(guān)系，便于業(yè)務(wù)信息傳達(dá)。（同時(shí)深色系也省電）

布局示例（以1920*1080尺寸，布局示例）

設(shè)計(jì)風(fēng)格的確定

風(fēng)格的確定也是至關(guān)重要的，首先要確定應(yīng)用場(chǎng)景是怎樣的（室內(nèi)、室外、光照如何、燈光照射如何、硬件如何等等），要充分考慮，以及目標(biāo)用戶是誰(shuí)，給誰(shuí)用等等。都會(huì)對(duì)風(fēng)格有不小的影響，設(shè)計(jì)是相通的，可用UI的方式來(lái)定義可視化設(shè)計(jì)風(fēng)格，AB測(cè)試、情緒版等等，差異比較大的一點(diǎn)是應(yīng)用場(chǎng)景的環(huán)境。

通過(guò)對(duì)數(shù)據(jù)圖表的選擇，屏幕布局及風(fēng)格設(shè)計(jì)，一張初步作品已經(jīng)完成。

此時(shí)最好結(jié)合業(yè)務(wù)目標(biāo)及數(shù)據(jù)，設(shè)計(jì)內(nèi)部先自檢：

1. 現(xiàn)在的設(shè)計(jì)布局是否合理
2. 配色是否合理并能通過(guò)色彩傳達(dá)數(shù)據(jù)的意義
3. 整體設(shè)計(jì)是否符合之初的業(yè)務(wù)目標(biāo)
4. 是否存在其他問(wèn)題等等

接下來(lái)就是各個(gè)相關(guān)人員及領(lǐng)導(dǎo)確認(rèn)階段。

現(xiàn)場(chǎng)硬件設(shè)備校對(duì)

當(dāng)風(fēng)格頁(yè)確定后先別急于后面的頁(yè)面設(shè)計(jì)，如果有可能的話，此時(shí)最好拿設(shè)計(jì)圖去現(xiàn)場(chǎng)實(shí)地測(cè)試（補(bǔ)充一句，設(shè)計(jì)開始前最好是能到現(xiàn)場(chǎng)測(cè)試硬件顯示，顏色等，應(yīng)最大程度的減少隱藏問(wèn)題）。確定現(xiàn)場(chǎng)硬件是否存在偏色問(wèn)題、文字大小在合適的觀看距離是否清晰可見(jiàn)、現(xiàn)場(chǎng)燈光光照等是否對(duì)設(shè)計(jì)有影響、拼接縫和數(shù)據(jù)是否有穿插、硬件設(shè)備輸出是否和設(shè)計(jì)匹配等等。確認(rèn)無(wú)誤后在開展后面的頁(yè)面設(shè)計(jì)工作。

開發(fā)落地及再次現(xiàn)場(chǎng)校對(duì)（含性能）

開發(fā)工具不同（如web、u3e、ue4等等），對(duì)接方式也會(huì)有差異。相同相似之處有如標(biāo)注規(guī)范，顏色，字體字號(hào)等等。對(duì)于一些三維場(chǎng)景需要提供三維文件，如obj、FBX等。

主要提供：設(shè)計(jì)規(guī)范（標(biāo)注）、切圖、三維文件（示項(xiàng)目需求并不一定設(shè)計(jì)提供），特殊動(dòng)效可提供范例。

補(bǔ)充一點(diǎn)，拼接屏到8K左右甚至更高，輸出像素不必達(dá)到8K，稍微加點(diǎn)效果，會(huì)卡到懷疑人生。一般會(huì)降低到4k左右，對(duì)硬件要求下降的同時(shí)也能保證整體效果和流暢度。

開發(fā)結(jié)束后，要拿到演示文件去現(xiàn)場(chǎng)測(cè)試，測(cè)試輸出是否有問(wèn)題，有無(wú)拉伸問(wèn)題，測(cè)試有無(wú)卡頓現(xiàn)象，拼接縫與內(nèi)容有無(wú)穿插，如有控制端（控制屏）需聯(lián)調(diào)測(cè)試。確定整體無(wú)誤后，才是設(shè)計(jì)的最后交接棒。

本文@聶永真 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，不得轉(zhuǎn)載。

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