可視化設計6大核心步驟,看完就明白了!
大家好,時常有設計師在內部群中反應說不清楚可視化實施的總體流程,什么節(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ā)修改后還要跟進復驗,最終達到高質量的設計落地。
作者:聶永真可視化設計實驗室
想了解更多網(wǎng)站技術的內容,請訪問:網(wǎng)站技術