<menuitem id="fbl3r"></menuitem>
      <var id="fbl3r"><ol id="fbl3r"><nobr id="fbl3r"></nobr></ol></var>
      <menuitem id="fbl3r"></menuitem>

        <var id="fbl3r"><ol id="fbl3r"></ol></var>
          <meter id="fbl3r"><ol id="fbl3r"></ol></meter>

          <menuitem id="fbl3r"></menuitem>
              <var id="fbl3r"><ol id="fbl3r"><nobr id="fbl3r"></nobr></ol></var>
              <menuitem id="fbl3r"></menuitem>

                <var id="fbl3r"><ol id="fbl3r"></ol></var>
                  <meter id="fbl3r"><ol id="fbl3r"></ol></meter>

                  <menuitem id="fbl3r"></menuitem>
                      <var id="fbl3r"><ol id="fbl3r"><nobr id="fbl3r"></nobr></ol></var>
                      <menuitem id="fbl3r"></menuitem>

                        <var id="fbl3r"><ol id="fbl3r"></ol></var>
                          <meter id="fbl3r"><ol id="fbl3r"></ol></meter>

                          案例分享:數據可視化大屏設計經驗分享(高級篇)

                          AI浪潮襲來,產品經理如何應對?15天系統化入門AI產品經理,先人一步搶占時代紅利。了解一下>>

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

                          案例解析

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

                          數據可視化大屏設計經驗分享【高級篇】

                          原圖

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

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

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

                          數據可視化大屏設計經驗分享【高級篇】

                          重新布局圖

                          數據可視化大屏設計經驗分享【高級篇】

                          最終設計稿

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

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

                          1. 關于板式風格元素

                          主題風格構思階段:

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

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

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

                          元素設計階段:

                          數據可視化大屏設計經驗分享【高級篇】

                          標題設計

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

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

                          數據可視化大屏設計經驗分享【高級篇】

                          天氣、空氣質量、時間元素

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

                          2. 關于圖表設計

                          圖表一改版:

                          數據可視化大屏設計經驗分享【高級篇】

                          總航班量圖表截圖

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

                          數據可視化大屏設計經驗分享【高級篇】

                          改版后

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

                          • 出港量包含:出港延誤航班、出港取消航班;
                          • 進港量包含:進港延誤航班、進港取消航班。

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

                          用色說明:

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

                          圖表二改版:

                          數據可視化大屏設計經驗分享【高級篇】

                          問題圖表

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

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

                          數據可視化大屏設計經驗分享【高級篇】

                          改版后圖表

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

                          3. 標題和文案優化

                          第一處修改:

                          數據可視化大屏設計經驗分享【高級篇】

                          問題標題

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

                          數據可視化大屏設計經驗分享【高級篇】

                          調整后標題

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

                          第二處修改:

                          數據可視化大屏設計經驗分享【高級篇】問題標題和數據格式問題

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

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

                          數據可視化大屏設計經驗分享【高級篇】

                          調整后

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

                          4. 3D效果技法

                          3D地球效果:

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

                          數據可視化大屏設計經驗分享【高級篇】

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

                          數據可視化大屏設計經驗分享【高級篇】

                          初稿

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

                          數據可視化大屏設計經驗分享【高級篇】

                          數據可視化大屏設計經驗分享【高級篇】

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

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

                          • 青色:北京擴散的方向代表出港
                          • 藍色:聚焦北京的方向代表進港

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

                          3D地球技法教程:

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

                          數據可視化大屏設計經驗分享【高級篇】

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

                          下面我們一一介紹:

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

                          數據可視化大屏設計經驗分享【高級篇】

                          調色球皮

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

                          數據可視化大屏設計經驗分享【高級篇】

                          材質設置

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

                          數據可視化大屏設計經驗分享【高級篇】

                          飛機繞地球動畫

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

                          數據可視化大屏設計經驗分享【高級篇】

                          城市鏈接樣條設置

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

                          數據可視化大屏設計經驗分享【高級篇】

                          光線渲染

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

                          3D地球效果開發落地:

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

                          數據可視化大屏設計經驗分享【高級篇】

                          Echartsj網站截圖

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

                          案例總結:

                          1. 數據可視化設計,首先了解功能,分析數據之間的關系;
                          2. 構思主題,圍繞主題設計其他元素,特殊效果跟開發溝通;
                          3. 分析數據,合理選用圖表,對圖表能靈活運用;
                          4. 不要忽視文案的設計,提取關鍵詞;
                          5. 加強技法,了解數據可視化設計網站。

                          最后

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

                           

                          作者:吳星辰,微信公眾號:互聯網設計幫

                          本文由 @吳星辰 原創發布于人人都是產品經理。未經許可,禁止轉載。

                          題圖來自Unsplash,基于CC0協議

                          評論
                          歡迎留言討論~!
                          1. 產品為什么要更新迭代?
                            對于自己也是一樣
                            美好掌握在自己手里
                            更新迭代成為更好的自己
                            加油??

                            回復
                          2. 厲害,學習了,謝謝分享

                            回復
                          用手机怎么挣钱靠谱的 72| 498| 153| 591| 576| 765| 540| 177| 603| 924| 897| 633| 435| 816| 678| 363| 297| 540| 981| 423| 3| 84| 447| 15| 96| 6| 186| 885| 795| 318| 84| 120| 465| 324| 801| 312|