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

應(yīng)用于當(dāng)前狀態(tài)表達(dá),幫助快速判斷

「醫(yī)鹿-新冠疫苗熱力圖」隨著新冠疫情的反復(fù), 新冠疫苗集中接種導(dǎo)致的排隊情況比較突出,用戶查詢適合接種點的需求比較旺盛,希望可以快速找距離近,有苗可約、排隊時間短的接種點;該熱力圖給用戶提供一款可以快速查詢附近可約苗、少排隊的接種點工具,并通過人流量可視化來高效輔助用戶選擇合適的接種點。

大廠出品!7 個值得學(xué)習(xí)的可視化設(shè)計細(xì)節(jié)

「雪球股票」在 list 頁面中,每條 item 的背景顏色會隨著實時的漲跌情況閃現(xiàn)紅色或綠色,在 list 頁做到實時狀態(tài)前置。通過可視化中變化的凸顯,幫助用戶快速達(dá)成目標(biāo),在最少的時間內(nèi)獲取更多的信息,并引導(dǎo)用戶進(jìn)行更深層次的探究。

大廠出品!7 個值得學(xué)習(xí)的可視化設(shè)計細(xì)節(jié)

應(yīng)用于復(fù)雜商家后臺設(shè)計,幫助提效

「餓了么商家端」數(shù)據(jù)指標(biāo)形象化:利用動效描述數(shù)據(jù)指標(biāo)含義,幫助商戶更好解讀。例如下方案例:對于加購轉(zhuǎn)化這個數(shù)據(jù)指標(biāo)的解釋,設(shè)計師利用動態(tài)的加購商品示意圖來演示對應(yīng)操作的界定。

大廠出品!7 個值得學(xué)習(xí)的可視化設(shè)計細(xì)節(jié)

「餓了么商戶端」數(shù)據(jù)切換和頁面聯(lián)動:借助 C 端頁面展示 B 端數(shù)據(jù),做到一一對應(yīng)且更有畫面感。

大廠出品!7 個值得學(xué)習(xí)的可視化設(shè)計細(xì)節(jié)

「餓了么商家端」利用集合符號所見即所得拖拽標(biāo)簽圈選人群。將商家后臺系統(tǒng)復(fù)雜的人群圈選操作變得更加簡便且更容易幫助商家端的運營人員理解復(fù)雜運營規(guī)則。

大廠出品!7 個值得學(xué)習(xí)的可視化設(shè)計細(xì)節(jié)

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

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

大廠出品!7 個值得學(xué)習(xí)的可視化設(shè)計細(xì)節(jié)

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

大廠出品!7 個值得學(xué)習(xí)的可視化設(shè)計細(xì)節(jié)

歡迎關(guān)注作者的微信公眾號:「AlibabaDesign」

大廠出品!7 個值得學(xué)習(xí)的可視化設(shè)計細(xì)節(jié)

收藏 61
點贊 32

復(fù)制本文鏈接 文章為作者獨立觀點不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。