新技能！教你使用轉(zhuǎn)場動畫提升用戶體驗

@陳子木 的確，相比于繪制插畫、創(chuàng)作專題頁面、設(shè)計UI這些富有創(chuàng)造性的設(shè)計活動而言，設(shè)計表單樣式似乎確實是一件單調(diào)而苦逼的差事。但仔細(xì)想想，如果你設(shè)計的表單是支付流程中最重要的環(huán)節(jié)，那么情況就又不一樣了，因為它將是用戶選擇你和你的企業(yè)的起點，也是用戶信任的明證。所以這個環(huán)節(jié)的用戶體驗必須精雕細(xì)琢，盡量臻于完美。除了設(shè)計好表格和UI樣式之外，合理地運用轉(zhuǎn)場動畫會讓整個體驗提高許多。

更多動效設(shè)計文章：
《漲姿勢！FACEBOOK PAPER新用戶引導(dǎo)背后的設(shè)計思路》
《漲姿勢！你應(yīng)該知道的UI動態(tài)設(shè)計規(guī)則》
《漲姿勢！巧用過場動畫提升用戶體驗》

這個地方所用的動畫并不是單純的愉悅用戶，更重要的目的是讓用戶明白這個環(huán)節(jié)是會發(fā)生什么，并且如何高效地使用這一產(chǎn)品。如果這個環(huán)節(jié)缺少動畫會令人感到缺點兒什么，那么這個動畫是成功的。如果移除了動畫，用戶覺得照樣可以湊合著用，則意味著這個動畫是可有可無的。

作為Stripe Checkout這一支付應(yīng)用的設(shè)計團(tuán)隊，我們在移動支付的體驗設(shè)計上進(jìn)行了大量的探索，也耗費了巨量的時間經(jīng)歷。對于支付環(huán)節(jié)的動畫設(shè)計，我們有著深入的理解。在著手設(shè)計Stripe Checkout的第一天，我們就開始專注于使用轉(zhuǎn)場動畫來強(qiáng)化交互，因為我們相信它會極大地提高這款支付APP的用戶體驗。為了展示它的運作原理，以下我將使用幾個動畫案例來向你說明。

輸入

上圖中的轉(zhuǎn)場動畫足矣說明動畫對于用戶的實用性。點擊“Remenber me”的選框，輸入聯(lián)系方式的選框隨著轉(zhuǎn)場動畫逐漸展開。動畫的發(fā)生會強(qiáng)化用戶清晰地意識到“單機(jī)選框”和“輸入聯(lián)系方式”之間是有聯(lián)系的，并且是直接的因果關(guān)系。

抖動

當(dāng)我們在填寫表單的時候，經(jīng)常容易忽略一些細(xì)小的錯誤，這也使得我們往往需要將可能出錯的地方從頭到尾都梳理一遍。然而很多時候，系統(tǒng)提醒我們信息錯誤的時候（尤其是在支付環(huán)節(jié)中），報錯信息會讓用戶感到沮喪，檢查的過程會令人無所適從，最終會有用戶直接因此而放棄繼續(xù)填寫表單。小幅震動的界面，配合著錯誤內(nèi)容的標(biāo)識會明確地告訴用戶，信息有誤。這種類似搖頭的交互行為會更加人性化，從而降低了用戶流失率。

錯覺

用好轉(zhuǎn)場動畫，可能會讓用戶感覺時間過的比實際的更快。誰都明白，當(dāng)用戶在等待的時候，時間會慢如蝸牛?？墒钱?dāng)?shù)却^程中有動畫效果的時候，即使等待時長不會改變，人的注意力會被吸引過去，自然而然地會感覺時間一會兒就過去了。這種動畫效果就是利用了人對于時間的錯覺。

轉(zhuǎn)換

微妙的動畫轉(zhuǎn)變是我的最愛。上圖中從Payment Info轉(zhuǎn)換到Pay $25.00使用了輕微的色彩轉(zhuǎn)變和滑動特效，提醒用戶這個過程正在推進(jìn)。而當(dāng)支付完成之后，色彩從藍(lán)色轉(zhuǎn)為綠色，轉(zhuǎn)變明顯而醒目。在點擊了Pay之后，伴隨顏色變化的還有一個顯示支付成功的短暫的動態(tài)圖標(biāo)，提醒用戶支付完成。我特別喜歡這個設(shè)計，因為它會讓用戶感到支付完成的快感，讓他們覺得完成支付是一件輕松愉悅的事情，

額外的設(shè)計

這一轉(zhuǎn)場動畫其實有點多余，因為刪除它也不會影響整個操作流程，也不會影響使用體驗。但是它的存在，會提升操作流程的體驗。

像別人一樣，我也不喜歡10年前的網(wǎng)站設(shè)計。但是這個轉(zhuǎn)場動畫會提高用戶的體驗，讓用戶感受到設(shè)計的善意，吸引用戶去注意支付的細(xì)節(jié)并獲取信任。

我的這些案例，都是在平時大家不太在意的細(xì)節(jié)處增加了轉(zhuǎn)場動畫，改善了整體的用戶體驗。無論你在構(gòu)建怎樣的應(yīng)用程序，合理地使用動畫效果，會讓用戶更明白操作的結(jié)果，改變他們對于時間的感知，并且令他們愉快。

原文地址：Medium
優(yōu)設(shè)網(wǎng)翻譯：@陳子木
本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量67萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：