下圖是我們優秀的技術人員利用模版直接布局出來的頁面,也可以理解為需求頁面,接下里就需要我根據頁面的內容重新定義風格設計。
當我看到這個頁面,首先要知道他是干什么的?功能是什么?是純數據展示還是監測預警?通過這些了解基本就能知道有沒有交互行為,有交互和沒交互在數據可視化的設計思路上會有很多不同,還有功能不一樣設計方向也會不一樣。
其次要分析出主次數據與總分數據,還要剖析目前圖表運用的合理性和大屏的設計比例尺寸等等,最終可以通過分析對頁面有個合理的布局展示。
通過分析對頁面重新布局,如下圖:
數據可視化頁面設計,如果頁面中有一個非常搶眼的主視覺圖,那么一般對其他的元素不會過度的設計,如果都是搶視覺的元素整個頁面太“花枝招展”了。
上圖左右兩邊的圖表只是簡單的呈現出來,這樣整體視覺上更有呼吸感,有張力,如果每個圖表都加上邊框,頁面就會顯得局促,常見的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網》數據可視化大屏設計經驗分享【高級篇】
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( ssll180.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司