創(chuàng)新互聯(lián)分享：58作為中國大的分類信息網(wǎng)站，其服務覆蓋了生活的各個領域及中國所有大中城市。在58高速平穩(wěn)發(fā)展的今天，我們希望用數(shù)據(jù)可視化的效果來整合展現(xiàn)58集團的數(shù)據(jù)資源，讓大家全方位了解58的價值。由此，我們啟動了“城市脈動”項目。(注：文中附圖所有數(shù)據(jù)均非真實數(shù)據(jù)，僅為效果呈現(xiàn))

一、調(diào)研

我們對“城市脈動”項目的整體定位進行了思考，如何展現(xiàn)數(shù)據(jù)?展現(xiàn)場景是怎樣的?我們的用戶是誰?我們該給用戶怎樣的體驗?圍繞著這些問題，整個項目的核心目標也愈發(fā)清晰。

數(shù)據(jù)是什么?

是信息的表現(xiàn)形式和載體(定義中摘取)。那么拋開狹義理解的數(shù)字本身，從表現(xiàn)形式和載體入手，只專注于各類數(shù)據(jù)應用于不同環(huán)境下最優(yōu)的表現(xiàn)形式，讓展現(xiàn)更具有目標性，讓設計“有理有據(jù)”。

展現(xiàn)場景是怎樣的?我們的用戶是誰?

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

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

2.普通展示：主辦公區(qū)域或前臺大廳實時數(shù)據(jù)展示。

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

a.專業(yè)用戶：即參加商務活動、分享等，需了解具體數(shù)據(jù)內(nèi)容的用戶。此類用戶會較為細致的查看每項數(shù)據(jù);

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

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

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

基于對整體項目的分析，數(shù)據(jù)部的同學對數(shù)據(jù)內(nèi)容與表現(xiàn)形式進行了專業(yè)化的歸類，我們從用戶體驗及設計角度，與數(shù)據(jù)部同學進行探討并優(yōu)化內(nèi)容，最終為“城市脈動”定了三個關鍵詞：清晰、明確、迅捷。以確保給用戶更為良好的體驗。

a.清晰

目的是使繁雜多項的數(shù)據(jù)能夠清晰展現(xiàn)，達到圖與數(shù)據(jù)的好結合;

b.明確

用視覺手段將各模塊內(nèi)容區(qū)分開，使各模塊數(shù)據(jù)明確展示;

c.迅捷

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

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

二、設計

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

1. 色的視覺牽引

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

整體色彩確定后，便運用色彩來劃分信息的層級關系，用主色調(diào)強調(diào)重點內(nèi)容，以引導用戶能夠清晰、明確、迅捷的識別重要信息。

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

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

3. 形的感知與精準表達

形的樣式能夠使數(shù)據(jù)給用戶不一樣的感知效果，用準確的形態(tài)來給用戶準確的感知，減少用戶在視覺層面的思考和時間，直擊內(nèi)容本身，使用戶在能夠在短時間內(nèi)捕捉興趣內(nèi)容。

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

在三屏畫面中，地圖會在兩屏中出現(xiàn)，一屏為省/直轄市地圖，另一屏為中國地圖，且在畫面中的占比都很重。在地圖樣式的選擇上，采用對比法來進行選擇。

1.色塊形式。顏色過深或過淺都會使畫面顯得突兀，中度色則易于背景混淆，無法恰當?shù)耐怀鲋黧w;

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

4. 輔助圖形的視覺引導

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

中圖的時間軸形式則為統(tǒng)一相同時間內(nèi)數(shù)據(jù)變化而設;右圖中，用標尺進行內(nèi)容分割，使數(shù)據(jù)模塊的劃分更為清晰。

5、動效的舒適體驗

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

a.增添空間感：第一屏中內(nèi)容較少，省/直轄市地圖占據(jù)中心較大面積，但各省地圖形狀各具特點，大小不一，為平衡地圖形狀的不同，則在地圖后面加以多個虛線圈使畫面豐富，并使其轉(zhuǎn)動起來，增添了畫面的空間感。

(省地圖動態(tài)展示)

b.平衡畫面：第三屏中可動數(shù)據(jù)為畫面中心的中國地圖及右下數(shù)據(jù)，為不忽視其它內(nèi)容區(qū)，動效童鞋為左下及右上部分數(shù)據(jù)增添了光影效果，使整個畫面的動態(tài)視覺感受平衡;

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

(餅圖切屏)

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

三、呈現(xiàn)

注：文中附圖所有數(shù)據(jù)均非真實數(shù)據(jù)，僅為效果呈現(xiàn)。

第一屏電視及其動效展示

第二屏電視

第三屏電視

四、結語

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

我們期待通過我們的努力，讓每個人都能夠?qū)?8有新的了解與體驗。58在發(fā)展，LUX也在進步，我們會繼續(xù)本著用戶第一的原則，繼續(xù)腳踏實地的走好每一步。

本文標題：如何從零開始做出數(shù)據(jù)可視化的動效圖
URL網(wǎng)址：http://aaarwkj.com/news/172916.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、企業(yè)網(wǎng)站制作、域名注冊、網(wǎng)站設計、網(wǎng)站排名、虛擬主機

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)