中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

案例解析

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

原圖

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

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

通過(guò)分析對(duì)頁(yè)面重新布局，如下圖：

重新布局圖

最終設(shè)計(jì)稿

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

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

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

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

既然是“首都國(guó)際機(jī)場(chǎng)”那么用3D地球來(lái)展示最佳不過(guò)了，3D地球無(wú)疑是一個(gè)重磅視覺(jué)元素，飛機(jī)圍繞地球往返飛行形成光線，這樣看上去頁(yè)面會(huì)有很多線條。

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

注：在思考用3D地球來(lái)設(shè)計(jì)時(shí)，我是提前跟開(kāi)發(fā)溝通過(guò)，知道可以落地實(shí)現(xiàn)，然后才著手開(kāi)始設(shè)計(jì)，所以工作中有拿不準(zhǔn)的設(shè)計(jì)，要即時(shí)跟開(kāi)發(fā)溝通。

元素設(shè)計(jì)階段：

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

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

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

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

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

2. 關(guān)于圖表設(shè)計(jì)

圖表一改版：

總航班量圖表截圖

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

改版后

改版后從“出港量”“進(jìn)港量”兩個(gè)維度出發(fā)，合并同類項(xiàng)：

• 出港量包含：出港延誤航班、出港取消航班；
• 進(jìn)港量包含：進(jìn)港延誤航班、進(jìn)港取消航班。

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

用色說(shuō)明：

• 延誤航班用黃色，黃色情緒映射為等待，延誤即等待；
• 取消航班用紅色，紅色情緒映射為停止，取消即停止。

圖表二改版：

問(wèn)題圖表

上圖環(huán)形圖其實(shí)用的并不恰當(dāng)，環(huán)形圖更適合總量的各個(gè)百分比呈現(xiàn)，標(biāo)題“今日前五延誤進(jìn)港機(jī)場(chǎng)”其實(shí)想表現(xiàn)前五名城市的延誤進(jìn)港排名，排名用條形圖最為直觀。

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

改版后圖表

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

3. 標(biāo)題和文案優(yōu)化

第一處修改：

問(wèn)題標(biāo)題

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

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

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

第二處修改：

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

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

再者就是圖表上的數(shù)據(jù)格式錯(cuò)誤，航班數(shù)量不該有小數(shù)點(diǎn)，因?yàn)楹桨鄶?shù)都是整數(shù)呈現(xiàn)。

調(diào)整后

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

4. 3D效果技法

3D地球效果：

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

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

初稿

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

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

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

• 青色：北京擴(kuò)散的方向代表出港
• 藍(lán)色：聚焦北京的方向代表進(jìn)港

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

3D地球技法教程：

3D地球動(dòng)畫效果，純用C4D軟件完成：

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

下面我們一一介紹：

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

調(diào)色球皮

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

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

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

飛機(jī)繞地球動(dòng)畫

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

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

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

光線渲染

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

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

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

Echartsj網(wǎng)站截圖

上圖兩個(gè)地球路徑圖組件，都可以實(shí)現(xiàn)我們的效果，只需要我們把色調(diào)調(diào)整好的“球皮”給到開(kāi)發(fā)人員，替換組件里面的圖片即可，組件生成的地球原理是一樣的，也是由一張圖包裹成球，地球數(shù)據(jù)光線顏色可更改，把色值給開(kāi)發(fā)人員即可。

案例總結(jié)：

1. 數(shù)據(jù)可視化設(shè)計(jì)，首先了解功能，分析數(shù)據(jù)之間的關(guān)系；
2. 構(gòu)思主題，圍繞主題設(shè)計(jì)其他元素，特殊效果跟開(kāi)發(fā)溝通；
3. 分析數(shù)據(jù)，合理選用圖表，對(duì)圖表能靈活運(yùn)用；
4. 不要忽視文案的設(shè)計(jì)，提取關(guān)鍵詞；
5. 加強(qiáng)技法，了解數(shù)據(jù)可視化設(shè)計(jì)網(wǎng)站。

最后

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

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

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

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