大家好，時常有設計師在內部群中反應說不清楚可視化實施的總體流程，什么節(jié)點該干什么？針對大家的疑問，小編今天詳細梳理了可視化設計的六大核心步驟，希望對大家能有所幫助。

一、需求對接

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

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

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

了解用戶：知道最終給誰用，來拍板設計人的特點（這個關系到設計幾搞能過），了解使用的群體，針對用戶用戶畫像。如果可以的話，可以讓甲方幫助分析客戶的直接需求是什么，做的產品優(yōu)勢特點。

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

二、需求原型

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

例如，產品 A 銷量增長主要來自北京和上海等用戶訂單量激增，同時退貨量減少、用戶對產品的評價槽點減少影響的。

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

三、交互設計

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

四、視覺/動畫設計

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

1. 界面設計

了解硬件及場景背景

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

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

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

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

界面設計中，區(qū)分版塊和內容的主次關系，能確保流程的合理性，同時使視覺區(qū)域更符合人類的生理習慣，使閱讀體驗更加輕松。

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

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

2. 配色設計

確定主色

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

明度

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

3. 圖表設計

圖表設計初衷是讓數(shù)據(jù)清晰的傳達信息，同時帶來美觀的視覺感受，

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

4. 主視覺設計

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

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

5. 三維設計

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

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

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

6. 動畫設計

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

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

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

六、測試驗收

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

作者：聶永真可視化設計實驗室