這個(gè)地方所用的動(dòng)畫(huà)并不是單純的愉悅用戶(hù)，更重要的目的是讓用戶(hù)明白這個(gè)環(huán)節(jié)是會(huì)發(fā)生什么，并且如何高效地使用這一產(chǎn)品。如果這個(gè)環(huán)節(jié)缺少動(dòng)畫(huà)會(huì)令人感到缺點(diǎn)兒什么，那么這個(gè)動(dòng)畫(huà)是成功的。如果移除了動(dòng)畫(huà)，用戶(hù)覺(jué)得照樣可以湊合著用，則意味著這個(gè)動(dòng)畫(huà)是可有可無(wú)的。
作為Stripe Checkout這一支付應(yīng)用的設(shè)計(jì)團(tuán)隊(duì)，我們?cè)谝苿?dòng)支付的體驗(yàn)設(shè)計(jì)上進(jìn)行了大量的探索，也耗費(fèi)了巨量的時(shí)間經(jīng)歷。對(duì)于支付環(huán)節(jié)的動(dòng)畫(huà)設(shè)計(jì)，我們有著深入的理解。在著手設(shè)計(jì)Stripe Checkout的第一天，我們就開(kāi)始專(zhuān)注于使用轉(zhuǎn)場(chǎng)動(dòng)畫(huà)來(lái)強(qiáng)化交互，因?yàn)槲覀兿嘈潘鼤?huì)極大地提高這款支付APP的用戶(hù)體驗(yàn)。為了展示它的運(yùn)作原理，以下我將使用幾個(gè)動(dòng)畫(huà)案例來(lái)向你說(shuō)明。
輸入
上圖中的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)足矣說(shuō)明動(dòng)畫(huà)對(duì)于用戶(hù)的實(shí)用性。點(diǎn)擊“Remenber me”的選框，輸入聯(lián)系方式的選框隨著轉(zhuǎn)場(chǎng)動(dòng)畫(huà)逐漸展開(kāi)。動(dòng)畫(huà)的發(fā)生會(huì)強(qiáng)化用戶(hù)清晰地意識(shí)到“單機(jī)選框”和“輸入聯(lián)系方式”之間是有聯(lián)系的，并且是直接的因果關(guān)系。
抖動(dòng)
當(dāng)我們?cè)谔顚?xiě)表單的時(shí)候，經(jīng)常容易忽略一些細(xì)小的錯(cuò)誤，這也使得我們往往需要將可能出錯(cuò)的地方從頭到尾都梳理一遍。然而很多時(shí)候，系統(tǒng)提醒我們信息錯(cuò)誤時(shí)（尤其是在支付環(huán)節(jié)中），報(bào)錯(cuò)信息會(huì)讓用戶(hù)感到沮喪，檢查的過(guò)程會(huì)令人無(wú)所適從，最終會(huì)有用戶(hù)直接因此而放棄繼續(xù)填寫(xiě)表單。小幅震動(dòng)的界面，配合著錯(cuò)誤內(nèi)容的標(biāo)識(shí)會(huì)明確地告訴用戶(hù)，信息有誤。這種類(lèi)似搖頭的交互行為會(huì)更加人性化，從而降低了用戶(hù)流失率。
錯(cuò)覺(jué)
用好轉(zhuǎn)場(chǎng)動(dòng)畫(huà)，可能會(huì)讓用戶(hù)感覺(jué)時(shí)間過(guò)的比實(shí)際的更快。誰(shuí)都明白，當(dāng)用戶(hù)在等待的時(shí)候，時(shí)間會(huì)慢如蝸牛。可是當(dāng)?shù)却^(guò)程中有動(dòng)畫(huà)效果的時(shí)候，即使等待時(shí)長(zhǎng)不會(huì)改變，人的注意力會(huì)被吸引過(guò)去，自然而然地會(huì)感覺(jué)時(shí)間一會(huì)兒就過(guò)去了。這種動(dòng)畫(huà)效果就是利用了人對(duì)于時(shí)間的錯(cuò)覺(jué)。
轉(zhuǎn)換
微妙的動(dòng)畫(huà)轉(zhuǎn)變是我的最?lèi)?ài)。上圖中從Payment Info轉(zhuǎn)換到Pay $25.00使用了輕微的色彩轉(zhuǎn)變和滑動(dòng)特效，提醒用戶(hù)這個(gè)過(guò)程正在推進(jìn)。而當(dāng)支付完成之后，色彩從藍(lán)色轉(zhuǎn)為綠色，轉(zhuǎn)變明顯而醒目。在點(diǎn)擊了Pay之后，伴隨顏色變化的還有一個(gè)顯示支付成功的短暫的動(dòng)態(tài)圖標(biāo)，提醒用戶(hù)支付完成。我特別喜歡這個(gè)設(shè)計(jì)，因?yàn)樗鼤?huì)讓用戶(hù)感到支付完成的快感，讓他們覺(jué)得完成支付是一件輕松愉悅的事情。
額外的設(shè)計(jì)
這一轉(zhuǎn)場(chǎng)動(dòng)畫(huà)其實(shí)有點(diǎn)多余，因?yàn)閯h除它也不會(huì)影響整個(gè)操作流程，也不會(huì)影響使用體驗(yàn)。但是它的存在，會(huì)提升操作流程的體驗(yàn)。
像別人一樣，我也不喜歡10年前的網(wǎng)站設(shè)計(jì)。但是這個(gè)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)會(huì)提高用戶(hù)的體驗(yàn)，讓用戶(hù)感受到設(shè)計(jì)的善意，吸引用戶(hù)去注意支付的細(xì)節(jié)并獲取信任。
我的這些案例，都是在平時(shí)大家不太在意的細(xì)節(jié)處增加了轉(zhuǎn)場(chǎng)動(dòng)畫(huà)，改善了整體的用戶(hù)體驗(yàn)。無(wú)論你在構(gòu)建怎樣的應(yīng)用程序，合理地使用動(dòng)畫(huà)效果，會(huì)讓用戶(hù)更明白操作的結(jié)果，改變他們對(duì)于時(shí)間的感知，并且令他們愉快。
來(lái)源：優(yōu)設(shè)
起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門(mén)專(zhuān)項(xiàng)技能課
1300+專(zhuān)題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專(zhuān)業(yè)技能直播
會(huì)員專(zhuān)屬社群
榮耀標(biāo)識(shí)
bucuo