手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

數(shù)據(jù)可視化大屏設計經(jīng)驗分享【高級篇】

2022-12-5    seo達人

案例解析

下圖是我們優(yōu)秀的技術(shù)人員利用模版直接布局出來的頁面,也可以理解為需求頁面,接下里就需要我根據(jù)頁面的內(nèi)容重新定義風格設計。

原圖

 

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

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

通過分析對頁面重新布局,如下圖:

重新布局圖

 

最終設計稿

 

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

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

 

1、關(guān)于板式風格元素

主題風格構(gòu)思階段:

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

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

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

 

元素設計階段:

標題設計

 

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

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

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

 

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

 

2、關(guān)于圖表設計

圖表一改版:

總航班量圖表截圖

 

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

改版后

 

改版后從“出港量”“進港量”兩個維度出發(fā),合并同類項:

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

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

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

 

用色說明:

延誤航班用黃色,黃色情緒映射為等待,延誤即等待;

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

 

圖表二改版:

問題圖表

 

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

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

改版后圖表

 

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

 

3、標題和文案優(yōu)化

第一處修改:

問題標題

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

調(diào)整后標題

 

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

 

第二處修改:

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

 

此圖表數(shù)據(jù)體現(xiàn)是延誤航班數(shù)據(jù),所以標題的關(guān)鍵詞應該是“延誤”,延誤放在標題中間沒能起到快速識別數(shù)據(jù)類型作用。

再者就是圖表上的數(shù)據(jù)格式錯誤,航班數(shù)量不該有小數(shù)點,因為航班數(shù)都是整數(shù)呈現(xiàn)。

調(diào)整后

 

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

 

4、3D效果技法

3D地球效果:

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

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

初稿

 

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

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

 

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

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

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

如果細心查看頁面會發(fā)現(xiàn),所有關(guān)于進港的都是青色,例如進港總航班量、進港人數(shù)、即將進港航班;同樣關(guān)于出港的都是藍色,目的就是要建立觀者顏色對數(shù)據(jù)類型的認知。

 

3D地球技法教程:

3D地球動畫效果,純用C4D軟件完成:

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

下面我們一一介紹:

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

調(diào)色球皮

 

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

材質(zhì)設置

 

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

飛機繞地球動畫

 

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

城市鏈接樣條設置

 

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

 

上面教程說的很籠統(tǒng),有基礎的同學肯定會明白,接下來我們來看如何開發(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ù)據(jù)之間的關(guān)系

2、構(gòu)思主題,圍繞主題設計其他元素,特殊效果跟開發(fā)溝通

3、分析數(shù)據(jù),合理選用圖表,對圖表能靈活運用

4、不要忽視文案的設計,提取關(guān)鍵詞

5、加強技法,了解數(shù)據(jù)可視化設計網(wǎng)站

 

最后

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


作者:吳星辰

轉(zhuǎn)載請注明:學UI網(wǎng)》數(shù)據(jù)可視化大屏設計經(jīng)驗分享【高級篇】

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


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍藍設計www.88yangsc.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://www.88yangsc.com

存檔