2020-11-27 資深UI設(shè)計(jì)者
Nathan Yau 在《數(shù)據(jù)之美》中寫到，可視化并不僅僅是一種工具，而更像是一種媒介，能最大化幫助我們挖掘數(shù)字背后的信息，讓數(shù)據(jù)「開口」講故事。
可視化設(shè)計(jì)將信息和數(shù)據(jù)轉(zhuǎn)化為用戶能夠理解的圖表、圖形和地圖等元素，通過色彩、樣式凸顯其中的變化，幫助用戶更的獲取信息、判斷趨勢、識別變化等。那么在可視化設(shè)計(jì)中怎么讓用戶能更好的看清看懂?dāng)?shù)據(jù)或信息、讓用戶快速感知數(shù)據(jù)變化、讓數(shù)據(jù)于用戶所處的情境相呼應(yīng)是微交互思考的方向。
通過可視化表達(dá)，將不易理解的信息呈現(xiàn)的更加清晰明了，幫助用戶理解吸收。
1. 支付寶-基金指數(shù)
運(yùn)用一般人對紅綠燈的理解，將其綠燈行紅燈停的概念，運(yùn)用在基金投資上，幫助新手能簡單理解指數(shù)估值的走勢，更容易去判斷該基金買賣的時(shí)機(jī)，綠燈為值得購買，紅燈為建議賣出。
2. 支付寶-基金收益
欲購買基金時(shí)，透過尺標(biāo)的形式選擇購買金額，同時(shí)下方展示購買該金額的預(yù)期收益，并用實(shí)際生活中的物品舉例，幫助用戶理解獲益的金額價(jià)值。
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)行更深層次的探究。
1. AirVisual-空氣質(zhì)量指標(biāo)
依據(jù)顏色與人臉圖形表達(dá)空氣質(zhì)量程度，顏色從綠黃橙紅紫暗紫色，人臉圖形從開心、難過的表情、戴口罩到戴防毒面具等，來表達(dá)空氣質(zhì)量從好到壞，讓用戶能直接看到顏色與圖形就能感知到當(dāng)前情況，且知道對應(yīng)的防范方式。
2. 我的天氣-3D地圖
日出日落的時(shí)間以動(dòng)態(tài)的地球展示，地球滑動(dòng)操作，讓用戶能實(shí)際感知到地球的光照情況。
3. 騰訊手機(jī)管家-充電狀態(tài)
手機(jī)充電時(shí)，以整個(gè)屏幕作為充電量的比例展示，以虛擬鴨子游水的有趣形象，透過水位的高低表達(dá)當(dāng)前已經(jīng)充電到達(dá)的數(shù)值。
在可視化中增加與用戶情境相關(guān)的元素，能夠讓用戶獲得更貼切，更直接的信息感知。
1. 高德-導(dǎo)航
當(dāng)開車導(dǎo)航的當(dāng)下，如果車速過快，在屏幕的雙側(cè)會(huì)顯示紅色的超速效果提示，比起左上角的車速展示，能更直接快速的感知到已經(jīng)超速了。
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í)間。
提供足夠便捷的篩選或操控組件，方便用戶查看更多視圖空間，快速定位想要的內(nèi)容。
1. 攜程-機(jī)票票價(jià)對比
運(yùn)用柱狀圖展示不同日期的機(jī)票票價(jià)，能直觀看出價(jià)格間的差異，點(diǎn)擊后，可切換到該日期，查看具體航班資訊。
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ì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com