可視化設(shè)計(jì)如何打動(dòng)人心?

2020-11-27    資深UI設(shè)計(jì)者

Nathan Yau 在《數(shù)據(jù)之美》中寫到,可視化并不僅僅是一種工具,而更像是一種媒介,能最大化幫助我們挖掘數(shù)字背后的信息,讓數(shù)據(jù)「開口」講故事。

可視化設(shè)計(jì)將信息和數(shù)據(jù)轉(zhuǎn)化為用戶能夠理解的圖表、圖形和地圖等元素,通過色彩、樣式凸顯其中的變化,幫助用戶更的獲取信息、判斷趨勢(shì)、識(shí)別變化等。那么在可視化設(shè)計(jì)中怎么讓用戶能更好的看清看懂?dāng)?shù)據(jù)或信息、讓用戶快速感知數(shù)據(jù)變化、讓數(shù)據(jù)于用戶所處的情境相呼應(yīng)是微交互思考的方向。

降低理解難度

通過可視化表達(dá),將不易理解的信息呈現(xiàn)的更加清晰明了,幫助用戶理解吸收。

可視化設(shè)計(jì)如何打動(dòng)人心?我總結(jié)了這4個(gè)方法

1. 支付寶-基金指數(shù)

運(yùn)用一般人對(duì)紅綠燈的理解,將其綠燈行紅燈停的概念,運(yùn)用在基金投資上,幫助新手能簡(jiǎn)單理解指數(shù)估值的走勢(shì),更容易去判斷該基金買賣的時(shí)機(jī),綠燈為值得購(gòu)買,紅燈為建議賣出。

可視化設(shè)計(jì)如何打動(dòng)人心?我總結(jié)了這4個(gè)方法

2. 支付寶-基金收益

欲購(gòu)買基金時(shí),透過尺標(biāo)的形式選擇購(gòu)買金額,同時(shí)下方展示購(gòu)買該金額的預(yù)期收益,并用實(shí)際生活中的物品舉例,幫助用戶理解獲益的金額價(jià)值。

可視化設(shè)計(jì)如何打動(dòng)人心?我總結(jié)了這4個(gè)方法

3. 手機(jī)淘寶-金幣小鎮(zhèn)

做任務(wù)簽到獲取能量,使用進(jìn)度條的形式,來表達(dá)能量與金幣值轉(zhuǎn)換的關(guān)系,如當(dāng)前獲取多少的能量,能兌換成多少金幣。

讓用戶感知變化

可視化中的變化凸顯能幫助用戶快速達(dá)成目標(biāo),在最少的時(shí)間內(nèi)獲取更多的信息,并引導(dǎo)用戶進(jìn)行更深層次的探究。可視化中的變化凸顯能幫助用戶快速達(dá)成目標(biāo),在最少的時(shí)間內(nèi)獲取更多的信息,并引導(dǎo)用戶進(jìn)行更深層次的探究。

可視化設(shè)計(jì)如何打動(dòng)人心?我總結(jié)了這4個(gè)方法

1. AirVisual-空氣質(zhì)量指標(biāo)

依據(jù)顏色與人臉圖形表達(dá)空氣質(zhì)量程度,顏色從綠黃橙紅紫暗紫色,人臉圖形從開心、難過的表情、戴口罩到戴防毒面具等,來表達(dá)空氣質(zhì)量從好到壞,讓用戶能直接看到顏色與圖形就能感知到當(dāng)前情況,且知道對(duì)應(yīng)的防范方式。

可視化設(shè)計(jì)如何打動(dòng)人心?我總結(jié)了這4個(gè)方法

2. 我的天氣-3D地圖

日出日落的時(shí)間以動(dòng)態(tài)的地球展示,地球滑動(dòng)操作,讓用戶能實(shí)際感知到地球的光照情況。

可視化設(shè)計(jì)如何打動(dòng)人心?我總結(jié)了這4個(gè)方法

3. 騰訊手機(jī)管家-充電狀態(tài)

手機(jī)充電時(shí),以整個(gè)屏幕作為充電量的比例展示,以虛擬鴨子游水的有趣形象,透過水位的高低表達(dá)當(dāng)前已經(jīng)充電到達(dá)的數(shù)值。

呼應(yīng)用戶所在情景

在可視化中增加與用戶情境相關(guān)的元素,能夠讓用戶獲得更貼切,更直接的信息感知。

可視化設(shè)計(jì)如何打動(dòng)人心?我總結(jié)了這4個(gè)方法

1. 高德-導(dǎo)航

當(dāng)開車導(dǎo)航的當(dāng)下,如果車速過快,在屏幕的雙側(cè)會(huì)顯示紅色的超速效果提示,比起左上角的車速展示,能更直接快速的感知到已經(jīng)超速了。

可視化設(shè)計(jì)如何打動(dòng)人心?我總結(jié)了這4個(gè)方法

2. 高德-用時(shí)預(yù)估

查看行程導(dǎo)航的預(yù)估用時(shí),運(yùn)用柱狀圖直觀展示不同出發(fā)時(shí)間到達(dá)目的地的所需時(shí)間,滑動(dòng)時(shí)有震動(dòng)的切換效果,同時(shí)上方地圖會(huì)顯示該時(shí)段路途上的擁堵情況,顯示預(yù)計(jì)到達(dá)時(shí)間。

提升數(shù)據(jù)操控感

提供足夠便捷的篩選或操控組件,方便用戶查看更多視圖空間,快速定位想要的內(nèi)容。

可視化設(shè)計(jì)如何打動(dòng)人心?我總結(jié)了這4個(gè)方法

1. 攜程-機(jī)票票價(jià)對(duì)比

運(yùn)用柱狀圖展示不同日期的機(jī)票票價(jià),能直觀看出價(jià)格間的差異,點(diǎn)擊后,可切換到該日期,查看具體航班資訊。

可視化設(shè)計(jì)如何打動(dòng)人心?我總結(jié)了這4個(gè)方法

2. 攜程-機(jī)票低價(jià)提醒

機(jī)票的價(jià)格是浮動(dòng)的,可透過低價(jià)提醒的設(shè)置,主動(dòng)提示用戶票價(jià)已到達(dá)該預(yù)期價(jià)位,設(shè)置時(shí)如果價(jià)格設(shè)置的過低,到達(dá)的可能性越低,因此以價(jià)格滑動(dòng)條操作,并以綠橙紅表達(dá)成功率的高低做提示。

文章來源:優(yōu)設(shè)   作者:AlibabaDesign

藍(lán)藍(lán)設(shè)計(jì)m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

日歷

鏈接

個(gè)人資料

存檔