下圖是我們優(yōu)秀的技術(shù)人員利用模版直接布局出來的頁面，也可以理解為需求頁面，接下里就需要我根據(jù)頁面的內(nèi)容重新定義風(fēng)格設(shè)計(jì)。
當(dāng)我看到這個(gè)頁面，首先要知道他是干什么的？功能是什么？是純數(shù)據(jù)展示還是監(jiān)測(cè)預(yù)警？通過這些了解基本就能知道有沒有交互行為，有交互和沒交互在數(shù)據(jù)可視化的設(shè)計(jì)思路上會(huì)有很多不同，還有功能不一樣設(shè)計(jì)方向也會(huì)不一樣。
其次要分析出主次數(shù)據(jù)與總分?jǐn)?shù)據(jù)，還要剖析目前圖表運(yùn)用的合理性和大屏的設(shè)計(jì)比例尺寸等等，最終可以通過分析對(duì)頁面有個(gè)合理的布局展示。
通過分析對(duì)頁面重新布局，如下圖：
數(shù)據(jù)可視化頁面設(shè)計(jì)，如果頁面中有一個(gè)非常搶眼的主視覺圖，那么一般對(duì)其他的元素不會(huì)過度的設(shè)計(jì)，如果都是搶視覺的元素整個(gè)頁面太“花枝招展”了。
上圖左右兩邊的圖表只是簡(jiǎn)單的呈現(xiàn)出來，這樣整體視覺上更有呼吸感，有張力，如果每個(gè)圖表都加上邊框，頁面就會(huì)顯得局促，常見的3D地理城市，主視覺為3D模型，輔助元素一般都不過度修飾。
1、關(guān)于板式風(fēng)格元素
主題風(fēng)格構(gòu)思階段：
既然是“首都國(guó)際機(jī)場(chǎng)”那么用3D地球來展示最佳不過了，3D地球無疑是一個(gè)重磅視覺元素，飛機(jī)圍繞地球往返飛行形成光線，這樣看上去頁面會(huì)有很多線條。
設(shè)計(jì)講究“你中有我，我中有你”所以這個(gè)頁面可以設(shè)定為以“線條”主題，盡可能的用纖細(xì)的效果設(shè)計(jì)其他元素，例如頁面中纖細(xì)的條形圖、柱狀圖、環(huán)形圖這樣的設(shè)計(jì)就能體現(xiàn)出元素間的關(guān)聯(lián)性，整體能達(dá)到一種視覺平衡和諧。
注：在思考用3D地球來設(shè)計(jì)時(shí)，我是提前跟開發(fā)溝通過，知道可以落地實(shí)現(xiàn)，然后才著手開始設(shè)計(jì)，所以工作中有拿不準(zhǔn)的設(shè)計(jì)，要即時(shí)跟開發(fā)溝通。
元素設(shè)計(jì)階段：
但不是說所有產(chǎn)品標(biāo)題都應(yīng)該用斜體漸變色，要根據(jù)產(chǎn)品而定，例如政府類產(chǎn)品更多是要體現(xiàn)莊嚴(yán)的氛圍，中規(guī)中矩的形式就更為合適。
天氣溫度、空氣質(zhì)量、時(shí)間是一定要加上的，原因是飛機(jī)在戶外飛行肯定會(huì)關(guān)注天氣，而對(duì)于北京機(jī)場(chǎng)來說關(guān)注空氣質(zhì)量也尤為重要，再說說時(shí)間，既然是機(jī)場(chǎng)實(shí)時(shí)數(shù)據(jù)，那么當(dāng)下的時(shí)間對(duì)比實(shí)時(shí)數(shù)據(jù)就非常有意義，所以時(shí)間要體現(xiàn)出來。
2、關(guān)于圖表設(shè)計(jì)
圖表一改版：
上面圖表雖然可以表達(dá)清楚全部數(shù)據(jù)，但圖表包含航班總數(shù)量，這樣的展現(xiàn)方式視覺上表現(xiàn)弱，同時(shí)不能夠直觀表達(dá)總量里面包含延誤航班和取消航班。
改版后從“出港量”“進(jìn)港量”兩個(gè)維度出發(fā)，合并同類項(xiàng)：
出港量包含：出港延誤航班、出港取消航班
進(jìn)港量包含：進(jìn)港延誤航班、進(jìn)港取消航班
用大字號(hào)重點(diǎn)突出進(jìn)出總航班量，然后在下面分別羅列延誤航班數(shù)量、取消航班數(shù)量，這樣數(shù)據(jù)之間的關(guān)系表達(dá)就很清晰，一看就明白，同時(shí)兩個(gè)維度各個(gè)數(shù)據(jù)也可以互相比較。
用色說明：
延誤航班用黃色，黃色情緒映射為等待，延誤即等待；
取消航班用紅色，紅色情緒映射為停止，取消即停止。
圖表二改版：
上圖環(huán)形圖其實(shí)用的并不恰當(dāng)，環(huán)形圖更適合總量的各個(gè)百分比呈現(xiàn)，標(biāo)題“今日前五延誤進(jìn)港機(jī)場(chǎng)”其實(shí)想表現(xiàn)前五名城市的延誤進(jìn)港排名，排名用條形圖最為直觀。
但從頁面的整體看一下，已經(jīng)有兩處用到了條形圖，柱狀圖，如果這里還是條形圖，那么頁面看起來會(huì)很單調(diào)，圖表也沒有表現(xiàn)的多樣性，所以現(xiàn)在設(shè)計(jì)要體現(xiàn)圖表的多樣性也能夠有排名的直觀呈現(xiàn)。
修改后依舊采用環(huán)形圖，把排名由高到低用注釋的形式呈現(xiàn)，倆者都能兼顧，這樣的設(shè)計(jì)思考方式就是設(shè)計(jì)思維，設(shè)計(jì)師既要考慮視覺，也要考慮功能目的，善于在兩者之間找到平衡。
3、標(biāo)題和文案優(yōu)化
第一處修改：
上圖左右兩個(gè)標(biāo)題唯一的區(qū)別就是一個(gè)是“進(jìn)”字，一個(gè)是“出”字，這兩個(gè)字如果不仔細(xì)看很難一眼出左右的區(qū)別，所以我們?cè)谠O(shè)計(jì)標(biāo)題的時(shí)候，一定要提煉關(guān)鍵詞，把可以作為明顯區(qū)別的關(guān)鍵詞置前。
調(diào)整后的標(biāo)題把重點(diǎn)區(qū)別的關(guān)鍵詞置前，觀者能夠快速識(shí)別。
第二處修改：
此圖表數(shù)據(jù)體現(xiàn)是延誤航班數(shù)據(jù)，所以標(biāo)題的關(guān)鍵詞應(yīng)該是“延誤”，延誤放在標(biāo)題中間沒能起到快速識(shí)別數(shù)據(jù)類型作用。
再者就是圖表上的數(shù)據(jù)格式錯(cuò)誤，航班數(shù)量不該有小數(shù)點(diǎn)，因?yàn)楹桨鄶?shù)都是整數(shù)呈現(xiàn)。
調(diào)整后關(guān)鍵詞置前“延誤進(jìn)出港機(jī)場(chǎng)-今日前五”用橫杠隔開“今日前五”能夠過度信息，更直觀。
4、3D效果技法
3D地球效果：
原圖上進(jìn)出港途中詳情是上下分開的：
開始想用進(jìn)出港切換的方式呈現(xiàn)，就是一個(gè)大地球，一個(gè)小的縮略圖，可以點(diǎn)擊切換，也可以自動(dòng)輪播大小切。
后考慮到此產(chǎn)品是沒有任何交互操作的，這里設(shè)計(jì)交互行為是不合理的，所以要換一種形式。
調(diào)整后讓兩個(gè)數(shù)據(jù)都呈現(xiàn)在地球上，用兩種不同光線顏色表示進(jìn)出港班次。
青色：北京擴(kuò)散的方向代表出港
藍(lán)色：聚焦北京的方向代表進(jìn)港
如果細(xì)心查看頁面會(huì)發(fā)現(xiàn)，所有關(guān)于進(jìn)港的都是青色，例如進(jìn)港總航班量、進(jìn)港人數(shù)、即將進(jìn)港航班；同樣關(guān)于出港的都是藍(lán)色，目的就是要建立觀者顏色對(duì)數(shù)據(jù)類型的認(rèn)知。
3D地球技法教程：
3D地球動(dòng)畫效果，純用C4D軟件完成：
- 1、地球用一個(gè)世界地圖貼圖
- 2、地球的凹凸效果用了材質(zhì)的置換和凹凸
- 3、小飛機(jī)動(dòng)畫用的是對(duì)齊曲線動(dòng)畫
-
4、國(guó)家之間樣條生成用的是插件 LON—LAT Connection
- 5、光線粒子用的是插件 X-Particles
下面我們一一介紹：
首先找一張世界地圖，這里稱為“球皮”，ps調(diào)整色調(diào)，滿意為止。
把球皮放入材質(zhì)，表面的凹凸效果用置換和凹凸。
小飛機(jī)動(dòng)畫用的是對(duì)齊曲線動(dòng)畫，打關(guān)鍵幀轉(zhuǎn)一圈，記得勾選切線，不然飛機(jī)會(huì)橫的飛。
國(guó)家之間樣條生成用的是插件 LON—LAT Connection，這一步很關(guān)鍵，插件使用很簡(jiǎn)單就是選擇：洲-國(guó)家-城市～洲-國(guó)家-城市，tab切換有設(shè)置可以設(shè)置樣條曲線的高度弧度等。
上面教程說的很籠統(tǒng)，有基礎(chǔ)的同學(xué)肯定會(huì)明白，接下來我們來看如何開發(fā)落地。
3D地球效果開發(fā)落地：
首先我們要知道一個(gè)網(wǎng)站Echartsj 里面有個(gè)3D路徑圖，看下圖：
上圖兩個(gè)地球路徑圖組件，都可以實(shí)現(xiàn)我們的效果，只需要我們把色調(diào)調(diào)整好的“球皮”給到開發(fā)人員，替換組件里面的圖片即可，組件生成的地球原理是一樣的，也是由一張圖包裹成球，地球數(shù)據(jù)光線顏色可更改，把色值給開發(fā)人員即可。
案例總結(jié)：
1、數(shù)據(jù)可視化設(shè)計(jì)，首先了解功能，分析數(shù)據(jù)之間的關(guān)系
2、構(gòu)思主題，圍繞主題設(shè)計(jì)其他元素，特殊效果跟開發(fā)溝通
3、分析數(shù)據(jù)，合理選用圖表，對(duì)圖表能靈活運(yùn)用
4、不要忽視文案的設(shè)計(jì)，提取關(guān)鍵詞
5、加強(qiáng)技法，了解數(shù)據(jù)可視化設(shè)計(jì)網(wǎng)站
最后
數(shù)據(jù)可視化大屏設(shè)計(jì)，對(duì)視覺表現(xiàn)、數(shù)據(jù)的合理呈現(xiàn)有一定的要求，這兩點(diǎn)都是由設(shè)計(jì)師為主導(dǎo)，所以設(shè)計(jì)前根據(jù)產(chǎn)品定義風(fēng)格，了解數(shù)據(jù)之間的關(guān)系非常重要，切記不要太依賴原型圖。
作者：吳星辰
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》數(shù)據(jù)可視化大屏設(shè)計(jì)經(jīng)驗(yàn)分享【高級(jí)篇】
藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司