本期分享的是工作中實際案例——首都國際機場數(shù)據(jù)可視化大屏設(shè)計，下面將從板式風(fēng)格元素、圖表、文案、3D效果技法、以及開發(fā)落地等方面，進(jìn)行層層分析講解。

案例解析

下圖是我們優(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è)計稿

數(shù)據(jù)可視化頁面設(shè)計，如果頁面中有一個非常搶眼的主視覺圖，那么一般對其他的元素不會過度的設(shè)計，如果都是搶視覺的元素整個頁面太“花枝招展”了。

上圖左右兩邊的圖表只是簡單的呈現(xiàn)出來，這樣整體視覺上更有呼吸感，有張力，如果每個圖表都加上邊框，頁面就會顯得局促，常見的3D地理城市，主視覺為3D模型，輔助元素一般都不過度修飾。

1. 關(guān)于板式風(fēng)格元素

主題風(fēng)格構(gòu)思階段：

既然是“首都國際機場”那么用3D地球來展示最佳不過了，3D地球無疑是一個重磅視覺元素，飛機圍繞地球往返飛行形成光線，這樣看上去頁面會有很多線條。

設(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è)計階段：

標(biāo)題設(shè)計

左邊的標(biāo)題中規(guī)中矩看起來比較死板，不太符合這個產(chǎn)品頁面整體調(diào)性，右邊的標(biāo)題用了斜體和輕微的漸變色，能夠渲染頁面飛機動感的氛圍，所以右邊的設(shè)計形式更合適。

但不是說所有產(chǎn)品標(biāo)題都應(yīng)該用斜體漸變色，要根據(jù)產(chǎn)品而定，例如政府類產(chǎn)品更多是要體現(xiàn)莊嚴(yán)的氛圍，中規(guī)中矩的形式就更為合適。

天氣、空氣質(zhì)量、時間元素

天氣溫度、空氣質(zhì)量、時間是一定要加上的，原因是飛機在戶外飛行肯定會關(guān)注天氣，而對于北京機場來說關(guān)注空氣質(zhì)量也尤為重要，再說說時間，既然是機場實時數(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)港機場”其實想表現(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)題

上圖左右兩個標(biāo)題唯一的區(qū)別就是一個是“進(jìn)”字，一個是“出”字，這兩個字如果不仔細(xì)看很難一眼出左右的區(qū)別，所以我們在設(shè)計標(biāo)題的時候，一定要提煉關(guān)鍵詞，把可以作為明顯區(qū)別的關(guān)鍵詞置前。

調(diào)整后標(biāo)題

調(diào)整后的標(biāo)題把重點區(qū)別的關(guān)鍵詞置前，觀者能夠快速識別。

第二處修改：

問題標(biāo)題和數(shù)據(jù)格式問題

此圖表數(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)整后

調(diào)整后關(guān)鍵詞置前“延誤進(jìn)出港機場-今日前五”用橫杠隔開“今日前五”能夠過度信息，更直觀。

4. 3D效果技法

3D地球效果：

原圖上進(jìn)出港途中詳情是上下分開的：

開始想用進(jìn)出港切換的方式呈現(xiàn)，就是一個大地球，一個小的縮略圖，可以點擊切換，也可以自動輪播大小切。

初稿

后考慮到此產(chǎn)品是沒有任何交互操作的，這里設(shè)計交互行為是不合理的，所以要換一種形式。

定稿（數(shù)據(jù)15分鐘刷新一次）

調(diào)整后讓兩個數(shù)據(jù)都呈現(xiàn)在地球上，用兩種不同光線顏色表示進(jìn)出港班次。

• 青色：北京擴散的方向代表出港
• 藍(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. 小飛機動畫用的是對齊曲線動畫
4. 國家之間樣條生成用的是插件 LON—LAT Connection
5. 光線粒子用的是插件 X-Particles

下面我們一一介紹：

首先找一張世界地圖，這里稱為“球皮”，ps調(diào)整色調(diào)，滿意為止。

調(diào)色球皮

把球皮放入材質(zhì)，表面的凹凸效果用置換和凹凸。

材質(zhì)設(shè)置

小飛機動畫用的是對齊曲線動畫，打關(guān)鍵幀轉(zhuǎn)一圈，記得勾選切線，不然飛機會橫的飛。

飛機繞地球動畫

國家之間樣條生成用的是插件 LON—LAT Connection，這一步很關(guān)鍵，插件使用很簡單就是選擇：洲-國家-城市～洲-國家-城市，tab切換有設(shè)置可以設(shè)置樣條曲線的高度弧度等。

城市鏈接樣條設(shè)置

最后就是用插件 X-Particles 渲染光線粒子效果，光線效果利用毛發(fā)渲染，第一條光線走完凍結(jié)，后面小光線依次循環(huán)發(fā)射。

光線渲染

上面教程說的很籠統(tǒng)，有基礎(chǔ)的同學(xué)肯定會明白，接下來我們來看如何開發(fā)落地。

3D地球效果開發(fā)落地：

首先我們要知道一個網(wǎng)站Echartsj 里面有個3D路徑圖，看下圖：

Echartsj網(wǎng)站截圖

上圖兩個地球路徑圖組件，都可以實現(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. 加強技法，了解數(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)系非常重要，切記不要太依賴原型圖。

作者：吳星辰，微信公眾號：互聯(lián)網(wǎng)設(shè)計幫

本文由 @吳星辰 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議