大家好，時(shí)常有設(shè)計(jì)師在內(nèi)部群中反應(yīng)說(shuō)不清楚可視化實(shí)施的總體流程，什么節(jié)點(diǎn)該干什么？針對(duì)大家的疑問(wèn)，小編今天詳細(xì)梳理了可視化設(shè)計(jì)的六大核心步驟，希望對(duì)大家能有所幫助。

一、需求對(duì)接

業(yè)務(wù)需求：正確了解需求，要干什么事，同時(shí)熟悉業(yè)務(wù)，這些都是最重要的一步，這將決定未來(lái)的設(shè)計(jì)。

了解品牌：首先是甲方的品牌相關(guān)內(nèi)容，包括品牌的名稱，品牌介紹。品牌 LOGO 樣式，是否有注冊(cè)過(guò)商標(biāo)。品牌的優(yōu)勢(shì)，包括品牌文化等等一些資料

行業(yè)競(jìng)品：了解行業(yè)相關(guān)的信息，主要是了解客戶的產(chǎn)品的行業(yè)屬性，有哪些競(jìng)爭(zhēng)對(duì)手，競(jìng)爭(zhēng)對(duì)手都是怎么玩的。先了解他們，然后在決定后續(xù)的設(shè)計(jì)策略。

了解用戶：知道最終給誰(shuí)用，來(lái)拍板設(shè)計(jì)人的特點(diǎn)（這個(gè)關(guān)系到設(shè)計(jì)幾搞能過(guò)），了解使用的群體，針對(duì)用戶用戶畫像。如果可以的話，可以讓甲方幫助分析客戶的直接需求是什么，做的產(chǎn)品優(yōu)勢(shì)特點(diǎn)。

使用場(chǎng)景：大屏與其他設(shè)計(jì)使用場(chǎng)景不同，變化多端，受外界影響比較大。不像 ui 設(shè)計(jì)，在 web 與手機(jī)端使用居多。可視化經(jīng)常被應(yīng)用于智慧大廳、展會(huì)會(huì)展、電腦、電視、手機(jī)等，同時(shí)觀看距離也是各不相同，有一米的有十多米的，千變?nèi)f化。別頭疼后續(xù)我會(huì)詳細(xì)的針對(duì)性介紹。

二、需求原型

每個(gè)需求都有它想對(duì)外傳達(dá)的故事，作為設(shè)計(jì)師也要了解清楚，整個(gè)故事線事怎樣的，這樣有利于設(shè)計(jì)去分析，應(yīng)該怎樣表達(dá)每一個(gè)數(shù)據(jù)的展示，同時(shí)也有助于了解數(shù)據(jù)之間的關(guān)聯(lián)性，更加合理的表達(dá)數(shù)據(jù)。

例如，產(chǎn)品 A 銷量增長(zhǎng)主要來(lái)自北京和上海等用戶訂單量激增，同時(shí)退貨量減少、用戶對(duì)產(chǎn)品的評(píng)價(jià)槽點(diǎn)減少影響的。

所以在設(shè)計(jì)上就可以采用地圖空間分布的的手段去表達(dá)，并且體現(xiàn)北京和上海增量，及全國(guó)各省市的銷量情況。這樣可以有效的通過(guò)設(shè)計(jì)的手法去表達(dá)故事。

三、交互設(shè)計(jì)

交互設(shè)計(jì)可以有效的把產(chǎn)品的構(gòu)思更細(xì)化的通過(guò)交互原型表達(dá)出來(lái)，包括信息層級(jí)、大屏的交互方式都會(huì)有初步的雛形，為設(shè)計(jì)提供數(shù)據(jù)信息層級(jí)及大屏初步交互方式，這里建議設(shè)計(jì)師多參與大屏交互方式的梳理，可視化設(shè)計(jì)師其實(shí)對(duì)設(shè)計(jì)有更多的見(jiàn)解，可從視覺(jué)的維度輔助交互完善。讓交互更加趣味性、視覺(jué)性、感染性。

四、視覺(jué)/動(dòng)畫設(shè)計(jì)

這部分也是設(shè)計(jì)師的主要領(lǐng)域，發(fā)揮最多的地方，同時(shí)對(duì)設(shè)計(jì)師的要求相比 UI 設(shè)計(jì)會(huì)更高，知識(shí)廣度上要求也更全面，正對(duì)可視化中常用的技能方向大致羅列如下。

1. 界面設(shè)計(jì)

了解硬件及場(chǎng)景背景

首先要根據(jù)場(chǎng)景確定硬件，布局時(shí)一定要考慮硬件，例如：拼接屏要考慮拼接縫，避免拼接縫與數(shù)據(jù)文字等穿插，拼接封把一個(gè)文字劈成兩半在兩個(gè)屏幕中展示，想想都丑。

還要考慮屏幕材質(zhì)，如果是 led 屏幕就要多考慮顯示虛不虛，偏不偏色。（可視化大屏便色、發(fā)虛出現(xiàn)在 led 屏幕上的居多）

同時(shí)還有觀看距離，現(xiàn)場(chǎng)燈光，現(xiàn)場(chǎng)光線等情況都會(huì)對(duì)屏幕有不小的影響。

依數(shù)據(jù)界面布局

界面設(shè)計(jì)中，區(qū)分版塊和內(nèi)容的主次關(guān)系，能確保流程的合理性，同時(shí)使視覺(jué)區(qū)域更符合人類的生理習(xí)慣，使閱讀體驗(yàn)更加輕松。

可視化中常用的布局方式，左右側(cè)次，中間主、左主右次，等等具體依照數(shù)據(jù)自行排布。

界面元素應(yīng)按照視覺(jué)運(yùn)動(dòng)的規(guī)律進(jìn)行布局和組合，形成界面脈絡(luò)，引導(dǎo)用戶從主到次再到整體的視線移動(dòng)規(guī)律。同時(shí)這也與我們前面了解到的業(yè)務(wù)故事線是一致的，讓設(shè)計(jì)輔助業(yè)務(wù)講故事，為故事增光添彩。

2. 配色設(shè)計(jì)

確定主色

早期的大屏以科技藍(lán)為主，而現(xiàn)如今，大屏可以說(shuō)是五彩斑斕，需要注意的是，在做大屏的時(shí)候，首先需要確定的是大屏的主色，需要考慮到客戶的品牌要求，以及項(xiàng)目業(yè)務(wù)的所屬行業(yè)，比如：我們做安全的系統(tǒng)，多數(shù)以綠色為主色；做黨建，會(huì)以紅色為主色；金融行業(yè)，以黑金相輔；做水務(wù)、城市等等業(yè)務(wù)則多以藍(lán)色為主，確定了主色調(diào)以后，還需要找到輔助色，一個(gè)大屏上大面積的顏色建議不超過(guò) 5 種。

明度

其次就是顏色的明度，和做 B 端是同樣的道理，一整個(gè)版面上，我們需要根據(jù)信息的重要程度，和人類閱讀的習(xí)慣，把文字和圖形按照有明到暗有所區(qū)分，這樣會(huì)使我們的版本更富有空間感和層次感，更易閱讀。

3. 圖表設(shè)計(jì)

圖表設(shè)計(jì)初衷是讓數(shù)據(jù)清晰的傳達(dá)信息，同時(shí)帶來(lái)美觀的視覺(jué)感受，

圖表要承載業(yè)務(wù)上的大量數(shù)據(jù)信息，同時(shí)視覺(jué)元素較多，圖表設(shè)計(jì)考量也是很多的，統(tǒng)一性、坐標(biāo)軸、圖例、多圖表視覺(jué)重量感，不能憑借設(shè)計(jì)師的審美喜好進(jìn)行視覺(jué)設(shè)計(jì)，根據(jù)業(yè)務(wù)屬性及數(shù)據(jù)狀態(tài)綜合考慮，做到用色符合業(yè)務(wù)符合狀態(tài)，沒(méi)有整體信息讀取考量，可能會(huì)導(dǎo)致重要信息未能凸顯，降低用戶讀取效率。

4. 主視覺(jué)設(shè)計(jì)

主視覺(jué)顧名思義也是設(shè)計(jì)作品中最核心的內(nèi)容。需要兼顧整體的美感，同時(shí)符合環(huán)境場(chǎng)景使用，持續(xù)地強(qiáng)化用戶對(duì)品牌的感知，并能打造視覺(jué)記憶統(tǒng)一性。

常見(jiàn)的主視覺(jué)主要分為幾類，平面、2.5D、三維。平面主要以視覺(jué)排班為主更簡(jiǎn)潔的表達(dá)數(shù)據(jù)，三維更容易表達(dá)視覺(jué)效果，各有千秋。

5. 三維設(shè)計(jì)

平面大家比較熟悉了，本次主要以三維為主，三維也是可視化設(shè)計(jì)的大趨勢(shì)。首先了要了解有哪些三維軟件，例如 3dmax、c4d、Blender 等等，不同的軟件建模邏輯有所不同，不管采用什么軟件最終的成果要符合自然界中的認(rèn)知，任何物理自然界存在的東西都可以用三維模型表示。

如果是地理相關(guān)的數(shù)據(jù)，要考慮他的真實(shí)性，制作其實(shí)是通過(guò)三維虛擬的形式還原真實(shí)物理世界。通常針對(duì)地理數(shù)據(jù)分為幾大類包括建筑、道路、路網(wǎng)、河流、湖泊等。

數(shù)據(jù)應(yīng)該怎樣獲得，可以通過(guò) gis 數(shù)據(jù)、人工建模、傾斜攝影等，不同的數(shù)據(jù)直接關(guān)系到后期設(shè)計(jì)的可控性，比如傾斜攝影效果局限性非常大。

6. 動(dòng)畫設(shè)計(jì)

動(dòng)畫結(jié)合故事情節(jié)，在二維或者三維空間中用動(dòng)畫更生動(dòng)的串聯(lián)故事串聯(lián)數(shù)據(jù)。讓數(shù)據(jù)更富有靈性，形成獨(dú)特的視覺(jué)藝術(shù)。

五、對(duì)接研發(fā)輸出

這部分也是比較復(fù)雜難度比較高的，比較常見(jiàn)的對(duì)接參數(shù)、烘培等等方式。后續(xù)單獨(dú)細(xì)說(shuō)，這里僅做流程說(shuō)明。

六、測(cè)試驗(yàn)收

這一步關(guān)系到設(shè)計(jì)還原度問(wèn)題，我們的設(shè)計(jì)是否真正被高質(zhì)量的還原，有沒(méi)有還原度不夠，或者直接沒(méi)有實(shí)現(xiàn)的效果，都要通過(guò)這個(gè)環(huán)節(jié)梳理出來(lái)，形成測(cè)試文件，提交 BUG。待開(kāi)發(fā)修改后還要跟進(jìn)復(fù)驗(yàn)，最終達(dá)到高質(zhì)量的設(shè)計(jì)落地。

作者：聶永真可視化設(shè)計(jì)實(shí)驗(yàn)室