一、基礎(chǔ)概念

概念最枯燥，但是不可或缺。

數(shù)據(jù)可視化主要旨在借助于圖形化手段，清晰有效地傳達(dá)與溝通信息。但是，這并不意味著數(shù)據(jù)可視化就一定因?yàn)橐獙?shí)現(xiàn)其功能用途而令人感到枯燥乏味，或者是為了看上去絢麗多彩而顯得極端復(fù)雜。為了有效地傳達(dá)思想概念，美學(xué)形式與功能需要齊頭并進(jìn)，通過(guò)直觀地傳達(dá)關(guān)鍵的方面與特征，從而實(shí)現(xiàn)對(duì)于相當(dāng)稀疏而又復(fù)雜的數(shù)據(jù)集的深入洞察。

大屏數(shù)據(jù)可視化同樣是以數(shù)據(jù)為載體?！按蟮拿娣e、酷的動(dòng)效、絢的色彩”為基本，給人們留下相對(duì)震撼的印象。

由于大屏的利用面積大，展示信息突出的特點(diǎn)，所以大致分為信息展示、數(shù)據(jù)分析及監(jiān)控預(yù)警三類。

二、設(shè)計(jì)原則

使用場(chǎng)景、項(xiàng)目光感、屏幕情況是要先考慮的一步，如此才能深入到下一步，根據(jù)場(chǎng)景的整體情況，燈光對(duì)屏幕的影響比較大，關(guān)系到最終呈現(xiàn)效果，藍(lán)色環(huán)境背景色，來(lái)決定設(shè)計(jì)的色調(diào)、純度和亮度。

視覺(jué)感受需求：

數(shù)據(jù)可視化在目標(biāo)用戶眼中大致歸為：“動(dòng)”字。頁(yè)面數(shù)字、餅圖、折線圖、柱狀圖……數(shù)據(jù)就應(yīng)該是動(dòng)的，這樣才可以表示“數(shù)據(jù)可視化”的基本需求。

但設(shè)計(jì)師需要考慮的是為了避免觀眾焦點(diǎn)迷失，通過(guò)對(duì)比來(lái)強(qiáng)調(diào)主次關(guān)系，先把核心數(shù)據(jù)展現(xiàn)在用戶眼前，在逐步將二、三級(jí)標(biāo)題展示，部分?jǐn)?shù)據(jù)也可以在溝通后選擇性隱藏。

三、設(shè)計(jì)流程

規(guī)范設(shè)計(jì)流程是每次設(shè)計(jì)任務(wù)的重點(diǎn)，如果自己沒(méi)有經(jīng)驗(yàn)，可找一個(gè)參考流程，逐一對(duì)比，重要的是找準(zhǔn)方向，然后步步為營(yíng)，可避免不必要的返工，保證設(shè)計(jì)質(zhì)量和項(xiàng)目計(jì)劃進(jìn)度。

1.   研究定位

每個(gè)產(chǎn)品都有屬于自己的“標(biāo)簽”，設(shè)計(jì)師要表達(dá)其特點(diǎn)，寫(xiě)真寫(xiě)實(shí)的手法還原用戶想要的效果。所以設(shè)計(jì)師下足功課滿足用戶的心理需求是第一步也是最重要的一步。

2.   根據(jù)業(yè)務(wù)提取關(guān)鍵詞

“我們想要xxx的效果，您看下怎么設(shè)計(jì)會(huì)炫一點(diǎn)？”

腦爆一般，設(shè)計(jì)師的腦子里應(yīng)該有一個(gè)完整的結(jié)構(gòu)體系，迸出相關(guān)系列的關(guān)鍵詞，提取出關(guān)鍵詞的關(guān)鍵詞進(jìn)行摘錄和標(biāo)記，防止其他信息干擾。

3.   規(guī)定模板

模板一般指根據(jù)成型風(fēng)格進(jìn)行顏色確定、文字排放位置確定、如果客戶提供自己的交互原型，也可對(duì)原型圖參考。模板初步確定后，大的視覺(jué)導(dǎo)向便有了，在進(jìn)行下一步初步稿會(huì)順手一些。

在選定圖標(biāo)的時(shí)候需要注意：易懂、易實(shí)現(xiàn)；

易懂指的是可視化數(shù)據(jù)最終考慮的還是用戶，應(yīng)該一看便明白，不需要理解和思考的過(guò)程，選擇圖形時(shí)需要理性對(duì)待，避免為了視覺(jué)的效果選擇一些對(duì)用戶不太友好的圖形。

易實(shí)現(xiàn)指的是考慮到開(kāi)發(fā)是否能夠?qū)崿F(xiàn)。一般可視化效果開(kāi)發(fā)是可以用代碼實(shí)現(xiàn)，效果接近視覺(jué)稿，但設(shè)計(jì)師用Ps/Ai/Ae這些工具時(shí)會(huì)出現(xiàn)視覺(jué)偏差，所以與開(kāi)發(fā)的溝通是比較重要的，需要明確哪些設(shè)計(jì)可以盡情發(fā)揮和適可而止，不鉆牛角尖。

4.   進(jìn)行初步稿設(shè)計(jì)

初步稿的設(shè)計(jì)會(huì)相對(duì)繁瑣，每個(gè)客戶對(duì)都自己的產(chǎn)品有一定見(jiàn)解和想法，也許你的設(shè)計(jì)稿會(huì)經(jīng)過(guò)“駁駁駁回-初步確定”的過(guò)程，其實(shí)這個(gè)時(shí)候客戶的基本預(yù)計(jì)設(shè)計(jì)師應(yīng)該已經(jīng)掌握。

5.   頁(yè)面布局劃分

初步稿確定后，會(huì)根據(jù)固有的頁(yè)面進(jìn)行主次劃分，主要根據(jù)的是業(yè)務(wù)指標(biāo)，核心業(yè)務(wù)放中間，占比面積較大，其余按照優(yōu)先級(jí)在核心業(yè)務(wù)周圍分布展開(kāi)。一般將有管理的業(yè)務(wù)、圖標(biāo)相近的業(yè)務(wù)放一起，減少人們認(rèn)知負(fù)擔(dān)并提高信息有效傳遞性。

6.   風(fēng)格確定

布局確定后，接下來(lái)的每版設(shè)計(jì)會(huì)在與業(yè)務(wù)和開(kāi)發(fā)的溝通下逐步完善和精致起來(lái)，避免一下子走到終點(diǎn)，然后大的修改。

7.   所有設(shè)計(jì)稿完成輸出

“溝通”是一個(gè)比較重要的環(huán)節(jié)，這也是我認(rèn)為大屏和其他設(shè)計(jì)不同的地方。大屏有自己的特點(diǎn)、屬性、結(jié)構(gòu)、分辨率、屏幕組成、色彩顯示、運(yùn)行和展示環(huán)境，往往只有在真實(shí)的測(cè)試環(huán)境才可以找到問(wèn)題，在開(kāi)發(fā)出測(cè)試后需要反復(fù)的測(cè)試才能達(dá)到最終的成果，這是大屏本身?yè)碛械镊攘Α?/p>

8.   提交開(kāi)發(fā)、切圖

頁(yè)面開(kāi)發(fā)階段并不是到設(shè)計(jì)接近尾聲的時(shí)候才開(kāi)始，實(shí)際上后臺(tái)的數(shù)據(jù)準(zhǔn)備工作在定義好業(yè)務(wù)指標(biāo)后就已經(jīng)在開(kāi)始進(jìn)行了，提交給前端開(kāi)發(fā)之后，后臺(tái)會(huì)將數(shù)據(jù)返回到前段，用設(shè)計(jì)樣式呈現(xiàn)。

切圖：哪些元素需要切圖？

一般用代碼寫(xiě)不出的復(fù)雜樣式需要設(shè)計(jì)師提供樣式：比如數(shù)據(jù)邊框、頁(yè)面整體背景、小元素、部分圖標(biāo)。按正常網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn)切就可以。

9.   溝通視覺(jué)還原測(cè)試

這部分是開(kāi)發(fā)完后，將真實(shí)的場(chǎng)景投到測(cè)試環(huán)境后，有無(wú)需要調(diào)整，主要分為兩個(gè)方面：視覺(jué)方面和性能數(shù)據(jù)方面。

視覺(jué)方面：字體字號(hào)、視覺(jué)元素、頁(yè)面動(dòng)效、圖形圖表、間隔、行距是否錯(cuò)位、變形。

性能數(shù)據(jù)方面：頁(yè)面加載的時(shí)候是否有卡頓現(xiàn)象;圖形元素的屬性是否有異常；后臺(tái)是否能正常切換到前端頁(yè)面。

四、總結(jié)

數(shù)據(jù)可視化是一門龐大的科學(xué)系統(tǒng)，涉獵的可能是其中一部分，還請(qǐng)各位互通有無(wú)，歡迎大家討論交流。