本文编译自Stripe的UI计划师Michaël Villar颁发在Medium的博文。Stripe是一家在线付出公司，可以或许辅佐开拓者其API快速搭建付出体系，本年1月得到了8000万美元融资，估值达17.5亿美元。

计划付出表单看似一件简朴的工作，可是假如细心思量一下，付出表单现实上是在线购置的关键一环，填写付出表单意味着凵フ叱腥夏愕拇κ隆Ｕ飧的应该做得尽也许好，而正确地行使动画可以明显晋升付出。

动画不该该仅仅为了悦目，而是应该辅佐用户更好地相识产生了什么，以及高效地行使产物。判定动画结果优劣的一个原则是：假如你打消动画结果，付出应该看起来是不完备的，不然，你的动画结果就是多余的。

这是 Stripe 团队对这个题目的同等观点，也是为什么我们耗费庞大的精神来改进付出流程的缘故起因。我们从第一天开始就存眷于动画结果的行使，由于我们信托这会大幅晋升用户付出体验。接下来我将几个例子来展示通过动画结果改进网站的付出体验。

通过动画结果输入内容

这个调动结果很是适用。在用户选择 ” 记着我 ” 时必要输入手机号，这时会自滚动出输入框。

动摇结果

用户在填写表单时很也许呈现输入错误的环境，这时，假如只是对他们说他输入的信息有题目，那么用户也许会感想很沮丧（进而也许分开付出界面）。而通过动摇结果，看起来像是表单在向你摇头，既可以奉告用户输入内容有误，又可以或许尽也许减罕用户的不快。

让用户感受速率快的小能力

人们在等某件事时，时刻过得很是慢。这个动画结果可以或许让用户在现实吸取短信时刻没有变革的环境下，感受上快许多。

按钮调动

按照填写信息步调，按钮从 ” 付款信息 “（Payment Info）滑动到 ” 付出 25 美元 “（Pay $25.00）。

当用户点击 ” 付出 “（Pay）时，呈现一个对勾，表白付出已经乐成。这个对勾可以或许让用户感想购置进程很是简朴，布满成绩感。

锦上添花的动画

这个动画结果有点多余，就像上面说的，去掉它也不影响整个付出流程。可是，我以为它对付晋升用户体验照旧有必然的结果的。

我不太信赖样式计划是 10 年前气魄威风凛凛的网站。这个动画结果看起来很炫，让用户感想开拓者追求美满并存眷细节，不由自主的会越发信托这家网站。

动画结果的应用场景远远不只限于音乐、照片和气候应用。上面这些例子揭示了在 UI 计划时插手一些动画结果对付晋升用户体验的结果。岂论你做什么样的产物，添加吻合的动画结果可以让界面越发明白，促进用户的赏识转化为购置，改变他们的对守候时刻的感受，让用户享受到更好的处事。