大廠值得學習的可視化設計細節！

Nathan Yau 在《數據之美》中寫到，可視化並不僅僅是一種工具，而更像是一種媒介，能最大化幫助我們挖掘數字背後的信息，讓數據“開口”講故事。可視化設計將信息和數據轉化為用户能夠理解的圖表、圖形和地圖等元素，通過色彩、樣式凸顯其中的變化，幫助用户更高效的獲取信息、判斷趨勢、識別變化等。那麼在可視化 UI設計 中怎麼讓用户能更好的看清看懂數據或信息、讓用户快速感知數據變化、讓數據於用户所處的情境相呼應是微交互思考的方向。

應用於當前狀態表達，幫助快速判斷

「醫鹿-新冠疫苗熱力圖」隨着新冠疫情的反覆， 新冠疫苗集中接種導致的排隊情況比較突出，用户查詢適合接種點的需求比較旺盛，希望可以快速找距離近，有苗可約、排隊時間短的接種點；該熱力圖給用户提供一款可以快速查詢附近可約苗、少排隊的接種點工具，並通過人流量可視化來高效輔助用户選擇合適的接種點。

「雪球股票」在 list 頁面中，每條 item 的背景顏色會隨着實時的漲跌情況閃現紅色或綠色，在 list 頁做到實時狀態前置。通過可視化中變化的凸顯，幫助用户快速達成目標，在最少的時間內獲取更多的信息，並引導用户進行更深層次的探究。

應用於複雜商家後台設計，幫助提效

「餓了麼商家端」數據指標形象化：利用動效描述數據指標含義，幫助商户更好解讀。例如下方案例：對於加購轉化這個數據指標的解釋，設計師利用動態的加購商品示意圖來演示對應操作的界定。

「餓了麼商户端」數據切換和頁面聯動：藉助 C 端頁面展示 B 端數據，做到一一對應且更有畫面感。

「餓了麼商家端」利用集合符號所見即所得拖拽標籤圈選人羣。將商家後台系統複雜的人羣圈選操作變得更加簡便且更容易幫助商家端的運營人員理解複雜運營規則。

利用 3D 可視化，多維度展示商品

「淘寶」商品賣點的用户參與式互動表達 ：利用不同的手勢滑動屏幕控制序列幀圖片。例如案例左一圖中為了讓用户更直觀地瞭解攝像頭長焦模式下的拍攝效果，用手勢操作結合畫面變化模擬了真實長焦影像的效果。其他兩個也是利用 3D 模擬工作原理，用户可看到寵物洗澡機可拆卸演示以及烤箱的微蒸烤箱技術實現效果。

「淘寶」3D 化商品外觀展示：720 度及任意縮放查看商品 3D 模型以及不用款式和顏色的切換查看，增加線上商品的真實感和功能細節查看。

作者微信公眾號：「AlibabaDesign」

Powered by Froala Editor