來自58的啟示：如何從零開始做出數據可視化的動效圖？
原作者：點點 - 知乎
今天來聊聊數據可視化，摘錄了這樣一篇美而帶有設計感的案例。雖說本應該談談數據分析、數據化管理的，但是可視化也是分析過程中很重要的一環，這裡就引用了58同程的案例。數據可視化大屏案例我在其他公司也見過，完全是當一個產品在做。
——正文——
58作為中國最大的分類信息網站，其服務覆蓋了生活的各個領域及中國所有大中城市。在58高速平穩發展的今天，希望用數據可視化的效果來整合展現58集團的數據資源，讓大家全方位了解58的價值。由此，58啟動了「城市脈動」項目。（註：文中附圖所有數據均非真實數據，僅為效果呈現）n
一、調研
58對「城市脈動」項目的整體定位進行了思考，如何展現數據？展現場景是怎樣的？用戶是誰？該給用戶怎樣的體驗？圍繞著這些問題，整個項目的核心目標也愈發清晰。
數據是什麼？
是信息的表現形式和載體（定義中摘取）。那麼拋開狹義理解的數字本身，從表現形式和載體入手，只專註於各類數據應用於不同環境下最優的表現形式，讓展現更具有目標性，讓設計「有理有據」。
展現場景是怎樣的？我們的用戶是誰？
有展示場景才會有用戶，因而將用戶與展現場景放在一起進行分析。整體項目是利用大屏設備進行相關數據及圖表展示，預想將項目應用的場景分為兩種情況：
1.專業展示：參與商務活動、分享或為某些團體進行講解及展示使用。
2.普通展示：主辦公區域或前台大廳實時數據展示。這樣則更能準確定位出我們的用戶是誰，並將用戶分為3類人群：
a.專業用戶：即參加商務活動、分享等，需了解具體數據內容的用戶。此類用戶會較為細緻的查看每項數據；
b.興趣用戶：即無論數據在何處展示，其對數據都有濃厚的興趣，會去駐足停留，仔細觀看及分析數據。 c.普通用戶：即匆匆過往的人群。這部分用戶可能只會在屏幕前短暫停留。
該給用戶怎樣的體驗？
基於對整體項目的分析，數據部的同學對數據內容與表現形式進行了專業化的歸類，58從用戶體驗及設計角度，與數據部同學進行探討並優化內容，最終為「城市脈動」定了三個關鍵詞：清晰、明確、迅捷。以確保給用戶更為良好的體驗。
a.清晰
目的是使繁雜多項的數據能夠清晰展現，達到圖與數據的完美結合；
b.明確
用視覺手段將各模塊內容區分開，使各模塊數據明確展示；
c.迅捷
再次明確用戶群體及展示內容，針對不同場景及用戶的差異化需求，讓用戶更加迅捷找到興趣內容。
通過分析定位，目標也漸漸清晰：讓設計服務於數據內容，給各類用戶以最為清晰明確迅捷的數據展示。即，通過視覺與動效的結合，能夠給ab兩類細緻觀看的用戶良好的視覺呈現及專業的數據展示；能夠給c類用戶深刻的印象，從而轉化為a、b類用戶。真正達到讓每個人，全方位的了解傳達的價值。
二、設計
「城市脈動」整個項目是以展示為主，在確保視覺效果的同時，信息的有效傳遞是設計重點。需構建清晰的層級關係，運用準確的視覺語言。就展示載體而言，因載體為大屏，如用淺色背景會有拖影的情況，因而在整體設計上，運用深色背景。
1. 色的視覺牽引
色彩是最能給人直觀感受的，能夠直接的牽引用戶去尋找有效信息。在運用色彩的過程中，最初設計將數據的顏色與58logo的色彩相近，但是對於數據的同學來說，紅色代表數據異常，因而整體給人緊張感；而藍色數據則使人加以冷靜，從而給人良好的視覺感受。
整體色彩確定後，便運用色彩來劃分信息的層級關係，用主色調強調重點內容，以引導用戶能夠清晰、明確、迅捷的識別重要信息。
2. 構圖的層級劃分與視覺平衡
除色彩的視覺牽引外，用構圖的方式來突出信息重點，用比例關係的手法來使視覺達到平衡，讓用戶在瞬間捕捉到視覺點，建立明確的信息層級，從而能夠使用戶迅捷的了解我們希望用戶感知到的信息。
3. 形的感知與精準表達
形的樣式能夠使數據給用戶不一樣的感知效果，用準確的形態來給用戶準確的感知，減少用戶在視覺層面的思考和時間，直擊內容本身，使用戶在能夠在短時間內捕捉興趣內容。
如柱狀圖中，分格樣式的數據表達，則給人感受數據不夠精準，複雜且無意義的設計語言形成了對用戶的視覺干擾；而柱狀樣式的數據表達，則更為直觀準確。
1.色塊形式。顏色過深或過淺都會使畫面顯得突兀，中度色則易於背景混淆，無法恰當的突出主體；
2.描邊形式則更加凸顯地圖，依附圖形自身與背景元素所產生的空間感，配合實時點擊的效果，整個畫面更加清晰伶俐，且精確的表達出實時點擊的效果。
4. 輔助圖形的視覺引導
輔助圖形的運用，對畫面和信息，都存在引導關係。在干擾視覺的同時，引導用戶對某些數據內容進行無意識的知識補給。如圖所示，左圖：在省／直轄市地圖為主的屏幕中，加一較小的中國地圖，意為讓用戶更明確的感知到此省在我國的位置（或此位置為我國哪省）。
中圖的時間軸形式則為統一相同時間內數據變化而設；右圖中，用標尺進行內容分割，使數據模塊的劃分更為清晰。
5、動效的舒適體驗
整個項目中有許多數據都是實時變化的，為了減少數據變化刷新時的突然性，動效設計必不可少。在整個動效設計的過程中，除過場動畫、數據的變化外，動效還肩負起增添空間感、平衡畫面和整合信息的作用。
a.增添空間感：第一屏中內容較少，省／直轄市地圖佔據中心較大面積，但各省地圖形狀各具特點，大小不一，為平衡地圖形狀的不同，則在地圖後面加以多個虛線圈使畫面豐富，並使其轉動起來，增添了畫面的空間感。
（省地圖動態展示）
b.平衡畫面：第三屏中可動數據為畫面中心的中國地圖及右下數據，為不忽視其它內容區，動效童鞋為左下及右上部分數據增添了光影效果，使整個畫面的動態視覺感受平衡；
c.整合信息：第二屏的右下部分數據為5個模塊的餅狀圖，若全部放於畫面中則過於累贅，用倒計時的模式將其進行切屏，使信息更加聚合。
（餅圖切屏）
但是在增加動效的同時，仍需考慮伺服器在承載大量數據湧入的同時，是否能夠承載較多的動效。因而在增加動效過後，產品與技術同學一同分析畫面與數據量，對動效部分進行適當取捨。使動效不必喧賓奪主，明確畫面中的重點進行展示。
三、呈現
註：文中附圖所有數據均非真實數據，僅為效果呈現。
第三屏電視
四、結語
從立項到如今的成功上線，收穫頗豐，在這個過程中，站在用戶的角度，提出問題，解決問題；再提出問題，再解決問題…本著通過自己的方案，減少用戶的觀看時間與思考成本為原則，共同探討解決方法，共同向著同一個方向努力。
推薦閱讀：
※航班延誤與飛行距離的關係
※數據同步神器，「同步寶」新版上線
※李星:政府大數據服務，跑馬圈地正當時
※帝都交通安全指南
※在大數據時代，每家公司都要有大數據部門嗎？