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