本文編譯自Stripe的UI設(shè)計師Michaël Villar發(fā)表在Medium的博文 Stripe是一家在線支付公司，能夠幫助開發(fā)者通過其API快速搭建支付系統(tǒng)，今年1月獲得了8000萬美元融資，估值達17.5億美元E9c北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
設(shè)計支付表單看似一件簡單的事情，但是如果仔細考慮一下，支付表單實際上是用戶在線購買的關(guān)鍵一環(huán)，填寫支付表單意味著消費者認可你的服務(wù) 這個過程的用戶體驗應(yīng)該做得盡可能好，而正確地使用動畫效果可以顯著提升支付體驗E9c北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
動畫效果不應(yīng)該僅僅為了好看，而是應(yīng)該幫助用戶更好地了解發(fā)生了什么，以及如何高效地使用產(chǎn)品 判斷動畫效果好壞的一個原則是 如果你取消動畫效果，支付過程應(yīng)該看起來是不完整的，否則，你的動畫效果就是多余的E9c北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
這是 Stripe 團隊對這個問題的一致看法，也是為什么我們花費巨大的精力來改善支付流程的原因 我們從第一天開始就關(guān) 于動畫效果的使用，因為我們相信這會大幅提升用戶支付體驗 接下來我將通過幾個例子來展示如何通過動畫效果改善網(wǎng)站的支付體驗E9c北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
通過動畫效果輸入內(nèi)容E9c北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
E9c北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
這個變換效果非常實用 在用戶選擇 " 記住我 " 時需要輸入手機號，這時會自動彈出輸入框E9c北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
搖動效果E9c北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
E9c北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
用戶在填寫表單時很可能出現(xiàn)輸入錯誤的情況，這時，如果只是對他們說他輸入的信息有問題，那么用戶可能會感到很沮喪（進而可能離開支付界面） 而通過搖動效果，看起來像是表單在向你搖頭，既可以告知用戶輸入內(nèi)容有誤，又能夠盡可能減少用戶的不快E9c北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
讓用戶感覺速度快的小技巧E9c北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
E9c北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
人們在等某件事時，時間過得非常慢 這個動畫效果能夠讓用戶在實際接收短信時間沒有變化的情況下，感覺上快很多E9c北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
按鈕變換E9c北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
E9c北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
根據(jù)填寫信息步驟，按鈕從 " 付款信息 "（Payment Info）滑動到 " 支付 25 美元 "（Pay $25.00）E9c北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
當(dāng)用戶點擊 " 支付 "（Pay）時，出現(xiàn)一個對勾，表明支付已經(jīng)成功 這個對勾能夠讓用戶感到購買過程非常簡單，充滿成就感E9c北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
錦上添花的動畫E9c北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
E9c北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
這個動畫效果有點多余，就像上面說的，去掉它也不影響整個支付流程 但是，我認為它對于提升用戶體驗還是有一定的效果的E9c北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
我不太信任樣式設(shè)計是 10 年前風(fēng)格的網(wǎng)站 這個動畫效果看起來很炫，讓用戶感到開發(fā)者追求完美并關(guān) 細節(jié)，情不自禁的會更加相信這家網(wǎng)站E9c北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
動畫效果的應(yīng)用場景遠遠不僅限于音樂、照片和天氣應(yīng)用 上面這些例子展現(xiàn)了在 UI 設(shè)計時加入一些動畫效果對于提升用戶體驗的效果 不論你做什么樣的產(chǎn)品，添加合適的動畫效果可以讓界面更加明了，促進E9c北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
