[ 平面理論教程 ] 如何從零開始做出數據可視化的動效圖---- 設計教程


教學主題: 如何從零開始做出數據可視化的動效圖

大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

今天的這個教學主題是: 如何從零開始做出數據可視化的動效圖

這教學的重點為這幾點 [ 數據,做出,開始,如何,用戶,我們,視覺,展示,內容,地圖, ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

58作為中國最大的分類信息網站,其服務覆蓋了生活的各個領域及中國所有大中城市。在58高速平穩發展的今天,我們希望用數據可視化的效果來整合展現58集團的數據資源,讓大家全方位了解58的價值。由此,我們啟動了“城市脈動”項目。

58作為中國最大的分類信息網站,其服務覆蓋了生活的各個領域及中國所有大中城市。在58高速平穩發展的今天,我們希望用數據可視化的效果來整合展現58集團的數據資源,讓大家全方位了解58的價值。由此,我們啟動了“城市脈動”項目。(註:文中附圖所有數據均非真實數據,僅為效果呈現)

視覺:溫六六 動效:軟餅乾

一、調研

我們對“城市脈動”項目的整體定位進行了思考,如何展現數據?展現場景是怎樣的?我們的用戶是誰?我們該給用戶怎樣的體驗?圍繞着這些問題,整個項目的核心目標也愈發清晰。

如何從零開始做出數據可視化的動效圖




數據是什麼?

是信息的表現形式和載體(定義中摘取)。那麼拋開狹義理解的數字本身,從表現形式和載體入手,只專註於各類數據應用於不同環境下最優的表現形式,讓展現更具有目標性,讓設計“有理有據”。

展現場景是怎樣的?我們的用戶是誰?

有展示場景才會有用戶,因而我們將用戶與展現場景放在一起進行分析。整體項目是利用大屏設備進行相關數據及圖表展示,我們預想將項目應用的場景分為兩種情況:

1.專業展示:參與商務活動、分享或為某些團體進行講解及展示使用。

2.普通展示:主辦公區域或前台大廳實時數據展示。

這樣我們則更能準確定位出我們的用戶是誰,並將用戶分為3類人群:

a.專業用戶:即參加商務活動、分享等,需了解具體數據內容的用戶。此類用戶會較為細緻的查看每項數據;

b.興趣用戶:即無論數據在何處展示,其對數據都有濃厚的興趣,會去駐足停留,仔細觀看及分析數據。

c.普通用戶:即匆匆過往的人群。這部分用戶可能只會在屏幕前短暫停留。




如何從零開始做出數據可視化的動效圖

我們該給用戶怎樣的體驗?

基於對整體項目的分析,數據部的同學對數據內容與表現形式進行了專業化的歸類,我們從用戶體驗及設計角度,與數據部同學進行探討並優化內容,最終為“城市脈動”定了三個關鍵詞:清晰、明確、迅捷。以確保給用戶更為良好的體驗。

a.清晰

目的是使繁雜多項的數據能夠清晰展現,達到圖與數據的完美結合;




b.明確

用視覺手段將各模塊內容區分開,使各模塊數據明確展示;

c.迅捷

再次明確用戶群體及展示內容,針對不同場景及用戶的差異化需求,讓用戶更加迅捷找到興趣內容.

通過分析定位,我們的目標也漸漸清晰:讓設計服務於數據內容,給各類用戶以最為清晰明確迅捷的數據展示。即,通過視覺與動效的結合,能夠給ab兩類細緻觀看的用戶良好的視覺呈現及專業的數據展示;能夠給c類用戶深刻的印象,從而轉化為a、b類用戶。真正達到讓每個人,全方位的了解58集團的價值。




如何從零開始做出數據可視化的動效圖

二、設計

“城市脈動”整個項目是以展示為主,在確保視覺效果的同時,信息的有效傳遞是設計重點。需構建清晰的層級關係,運用準確的視覺語言。就展示載體而言,因載體為大屏,如用淺色背景會有拖影的情況,因而在整體設計上,運用深色背景。

1. 色的視覺牽引

如何從零開始做出數據可視化的動效圖




色彩是最能給人直觀感受的,能夠直接的牽引用戶去尋找有效信息。在運用色彩的過程中,最初設計將數據的顏色與58logo的色彩相近,但是對於數據的同學來說,紅色代表數據異常,因而整體給人緊張感;而藍色數據則使人加以冷靜,從而給人良好的視覺感受。

整體色彩確定后,便運用色彩來劃分信息的層級關係,用主色調強調重點內容,以引導用戶能夠清晰、明確、迅捷的識別重要信息。

如何從零開始做出數據可視化的動效圖

2. 構圖的層級劃分與視覺平衡

除色彩的視覺牽引外,用構圖的方式來突出信息重點,用比例關係的手法來使視覺達到平衡,讓用戶在瞬間捕捉到視覺點,建立明確的信息層級,從而能夠使用戶迅捷的了解我們希望用戶感知到的信息。




如何從零開始做出數據可視化的動效圖

3. 形的感知與精準表達

形的樣式能夠使數據給用戶不一樣的感知效果,用準確的形態來給用戶準確的感知,減少用戶在視覺層面的思考和時間,直擊內容本身,使用戶在能夠在短時間內捕捉興趣內容。

如柱狀圖中,分格樣式的數據表達,則給人感受數據不夠精準,複雜且無意義的設計語言形成了對用戶的視覺干擾;而柱狀樣式的數據表達,則更為直觀準確。

如何從零開始做出數據可視化的動效圖




在三屏畫面中,地圖會在兩屏中出現,一屏為省/直轄市地圖,另一屏為中國地圖,且在畫面中的佔比都很重。在地圖樣式的選擇上,採用對比法來進行選擇。

如何從零開始做出數據可視化的動效圖

1.色塊形式。顏色過深或過淺都會使畫面顯得突兀,中度色則易於背景混淆,無法恰當的突出主體;

2.描邊形式則更加凸顯地圖,依附圖形自身與背景元素所產生的空間感,配合實時點擊的效果,整個畫面更加清晰伶俐,且精確的表達出實時點擊的效果。

4. 輔助圖形的視覺引導




輔助圖形的運用,對畫面和信息,都存在引導關係。在干擾視覺的同時,引導用戶對某些數據內容進行無意識的知識補給。如圖所示,左圖:在省/直轄市地圖為主的屏幕中,加一較小的中國地圖,意為讓用戶更明確的感知到此省在我國的位置(或此位置為我國哪省)。

中圖的時間軸形式則為統一相同時間內數據變化而設;右圖中,用標尺進行內容分割,使數據模塊的劃分更為清晰。

如何從零開始做出數據可視化的動效圖

5、動效的舒適體驗

整個項目中有許多數據都是實時變化的,為了減少數據變化刷新時的突然性,動效設計必不可少。在整個動效設計的過程中,除過場動畫、數據的變化外,動效還肩負起增添空間感、平衡畫面和整合信息的作用。




a.增添空間感:第一屏中內容較少,省/直轄市地圖佔據中心較大面積,但各省地圖形狀各具特點,大小不一,為平衡地圖形狀的不同,則在地圖後面加以多個虛線圈使畫面豐富,並使其轉動起來,增添了畫面的空間感。

如何從零開始做出數據可視化的動效圖

(省地圖動態展示)

b.平衡畫面:第三屏中可動數據為畫面中心的中國地圖及右下數據,為不忽視其它內容區,動效童鞋為左下及右上部分數據增添了光影效果,使整個畫面的動態視覺感受平衡;

c.整合信息:第二屏的右下部分數據為5個模塊的餅狀圖,若全部放於畫面中則過於累贅,用倒計時的模式將其進行切屏,使信息更加聚合。




如何從零開始做出數據可視化的動效圖

(餅圖切屏)

但是在增加動效的同時,仍需考慮服務器在承載大量數據湧入的同時,是否能夠承載較多的動效。因而在增加動效過後,我們與技術同學一同分析畫面與數據量,對動效部分進行適當取捨。使動效不必喧賓奪主,明確畫面中的重點進行展示。

三、呈現

註:文中附圖所有數據均非真實數據,僅為效果呈現。




如何從零開始做出數據可視化的動效圖
貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit/Undo )命令使
用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

第一屏電視及其動效展示

如何從零開始做出數據可視化的動效圖
貼心提醒: 使用選框工具( Marquee Tools )的時候,按住Shift鍵可以劃出 正方形和正圓
的選區;按住Alt鍵將從起始點為中心勾劃選區。

第二屏電視

如何從零開始做出數據可視化的動效圖

第三屏電視

四、結語

從立項到如今的成功上線,收穫頗豐,在這個過程中,我們站在用戶的角度,提出問題,解決問題;再提出問題,再解決問題…本着通過自己的方案,減少用戶的觀看時間與思考成本為原則,共同探討解決方法,共同向著同一個方向努力。

我們期待通過我們的努力,讓每個人都能夠對58有新的了解與體驗。58在發展,LUX也在進步,我們會繼續本着用戶第一的原則,繼續腳踏實地的走好每一步。

在此特感謝數據、設計、動效、技術小夥伴們的共同努力和支持。

看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

希望我們所介紹的 如何從零開始做出數據可視化的動效圖 這教學會喜歡

文章標題: 骨子愛創意- 如何從零開始做出數據可視化的動效圖–轉載請註明來源處

本教學分類為平面理論教程中的 設計教程相關教學

文章相關關鍵字為: 數據,做出,開始,如何,用戶,我們,視覺,展示,內容,地圖,

本文永久連結 :如何從零開始做出數據可視化的動效圖

本文轉載自 :VIA

点赞

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *