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