下圖是我們優秀的技術人員利用模版直接布局出來的頁面，也可以理解為需求頁面，接下里就需要我根據頁面的內容重新定義風格設計。

當我看到這個頁面，首先要知道他是干什么的？功能是什么？是純數據展示還是監測預警？通過這些了解基本就能知道有沒有交互行為，有交互和沒交互在數據可視化的設計思路上會有很多不同，還有功能不一樣設計方向也會不一樣。

其次要分析出主次數據與總分數據，還要剖析目前圖表運用的合理性和大屏的設計比例尺寸等等，最終可以通過分析對頁面有個合理的布局展示。

通過分析對頁面重新布局，如下圖：

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

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

1、關于板式風格元素

主題風格構思階段：

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

設計講究“你中有我，我中有你”所以這個頁面可以設定為以“線條”主題，盡可能的用纖細的效果設計其他元素，例如頁面中纖細的條形圖、柱狀圖、環形圖這樣的設計就能體現出元素間的關聯性，整體能達到一種視覺平衡和諧。

注：在思考用3D地球來設計時，我是提前跟開發溝通過，知道可以落地實現，然后才著手開始設計，所以工作中有拿不準的設計，要即時跟開發溝通。

元素設計階段：

但不是說所有產品標題都應該用斜體漸變色，要根據產品而定，例如政府類產品更多是要體現莊嚴的氛圍，中規中矩的形式就更為合適。

天氣溫度、空氣質量、時間是一定要加上的，原因是飛機在戶外飛行肯定會關注天氣，而對于北京機場來說關注空氣質量也尤為重要，再說說時間，既然是機場實時數據，那么當下的時間對比實時數據就非常有意義，所以時間要體現出來。

2、關于圖表設計

圖表一改版：

上面圖表雖然可以表達清楚全部數據，但圖表包含航班總數量，這樣的展現方式視覺上表現弱，同時不能夠直觀表達總量里面包含延誤航班和取消航班。

改版后從“出港量”“進港量”兩個維度出發，合并同類項：

出港量包含：出港延誤航班、出港取消航班

進港量包含：進港延誤航班、進港取消航班

用大字號重點突出進出總航班量，然后在下面分別羅列延誤航班數量、取消航班數量，這樣數據之間的關系表達就很清晰，一看就明白，同時兩個維度各個數據也可以互相比較。

用色說明：

延誤航班用黃色，黃色情緒映射為等待，延誤即等待；

取消航班用紅色，紅色情緒映射為停止，取消即停止。

圖表二改版：

上圖環形圖其實用的并不恰當，環形圖更適合總量的各個百分比呈現，標題“今日前五延誤進港機場”其實想表現前五名城市的延誤進港排名，排名用條形圖最為直觀。

但從頁面的整體看一下，已經有兩處用到了條形圖，柱狀圖，如果這里還是條形圖，那么頁面看起來會很單調，圖表也沒有表現的多樣性，所以現在設計要體現圖表的多樣性也能夠有排名的直觀呈現。

修改后依舊采用環形圖，把排名由高到低用注釋的形式呈現，倆者都能兼顧，這樣的設計思考方式就是設計思維，設計師既要考慮視覺，也要考慮功能目的，善于在兩者之間找到平衡。

3、標題和文案優化

第一處修改：

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

調整后的標題把重點區別的關鍵詞置前，觀者能夠快速識別。

第二處修改：

此圖表數據體現是延誤航班數據，所以標題的關鍵詞應該是“延誤”，延誤放在標題中間沒能起到快速識別數據類型作用。

再者就是圖表上的數據格式錯誤，航班數量不該有小數點，因為航班數都是整數呈現。

調整后關鍵詞置前“延誤進出港機場-今日前五”用橫杠隔開“今日前五”能夠過度信息，更直觀。

4、3D效果技法

3D地球效果：

原圖上進出港途中詳情是上下分開的：

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

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

調整后讓兩個數據都呈現在地球上，用兩種不同光線顏色表示進出港班次。

青色：北京擴散的方向代表出港

藍色：聚焦北京的方向代表進港

如果細心查看頁面會發現，所有關于進港的都是青色，例如進港總航班量、進港人數、即將進港航班；同樣關于出港的都是藍色，目的就是要建立觀者顏色對數據類型的認知。

3D地球技法教程：

3D地球動畫效果，純用C4D軟件完成：

• 1、地球用一個世界地圖貼圖
• 2、地球的凹凸效果用了材質的置換和凹凸
• 3、小飛機動畫用的是對齊曲線動畫
• 4、國家之間樣條生成用的是插件 LON—LAT Connection
  
• 5、光線粒子用的是插件 X-Particles

下面我們一一介紹：

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

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

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

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

上面教程說的很籠統，有基礎的同學肯定會明白，接下來我們來看如何開發落地。

3D地球效果開發落地：

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

上圖兩個地球路徑圖組件，都可以實現我們的效果，只需要我們把色調調整好的“球皮”給到開發人員，替換組件里面的圖片即可，組件生成的地球原理是一樣的，也是由一張圖包裹成球，地球數據光線顏色可更改，把色值給開發人員即可。

案例總結：

1、數據可視化設計，首先了解功能，分析數據之間的關系

2、構思主題，圍繞主題設計其他元素，特殊效果跟開發溝通

3、分析數據，合理選用圖表，對圖表能靈活運用

4、不要忽視文案的設計，提取關鍵詞

5、加強技法，了解數據可視化設計網站

最后

數據可視化大屏設計，對視覺表現、數據的合理呈現有一定的要求，這兩點都是由設計師為主導，所以設計前根據產品定義風格，了解數據之間的關系非常重要，切記不要太依賴原型圖。

作者：吳星辰

轉載請注明：學UI網》數據可視化大屏設計經驗分享【高級篇】

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( paul-jarrel.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司