使用动画提升支付体验

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

设计表单很容易被看成是一件苦差事,耗费了我们可以用在其他更激动人心部分的时间。支付是结账流程的一部分,这时候用户正处于用信任你和产品的边缘,此时的体验应该是尽可能优秀的愉悦的,而正确使用动画可以真正提升用户体验。

动画的目的不仅仅是为了娱乐用户,相反应该帮助用户更好地理解即将发生什么事情,以及如何高效地使用你的产品。如果你禁用动画,那么流程体验将会大打折扣。如果不是这样,那么可能意味着你的动画是多余的。

这也正是Stripe Checkou背后的团队想要寻找的,这也是我们为什么会花大量时间和精力来打造Checkout。我们主要关注在Checkout中使用动画,因为我们相信它们会丰富应用的核心体验。为了阐明动画是如何工作的,我将用我们目前已经实现的动画作为示例。

动画添加内容

这个过渡演示了动画可以对用户有用。很明显,在我们要求用户添加电话号码作为Remember me步骤中一部分时,该动画展示很好地展示了电话号码输入部分。

晃动!晃动!晃动!

当创建表格的时候,很容易忽略用户出错时的体验。这个动画告诉用户他们提供了错误的信息,这也是用户倍感挫败的地方,也经常会导致很高的支付流失率。所以我们添加了这个简单的晃动效果。在事情出错时,它同时也可以减轻用户挫败感。上边这个设计是简单的晃动。

变戏法

动画可以让用户察觉到事情进展比他们想象中的要快很多。当你等待某个东西时,我们知道时间相对来说会慢的像蜗牛。上边这个小小的动画可以让等待变得更加流畅有趣,即便实际上时间并没有任何不同。值得注意的是,这个动画整体上来说是个幻觉–实际上我们并不知道什么时候你收到了信息。

按钮转换

微妙的动画是我的最爱。“Payment Info”和“Pay $25.00”两种状态之间的转换使用了滑动效果,呼应了上边支付细节的过渡。当你完成每个步骤的时候,突出了链接操作的按钮的改变。

当用户点击“Pay”时,在展示成功状态前会出现一个短时间持续的spinner。我非常喜欢这个checkmark动画,它让你觉得很简单就完成了购买。

加分项

这个动画看起来似乎有点多余,即便移除了也不会打断使用流程–这与本文的一般前提是矛盾的。但是我认为它在改进使用流程方面仍然是有用的。我和大多数人一样,不大相信那些用起来像是10年前做的网站一样。上边这个动画为整个用户体验赋予了优美的感觉,它对细节的关注让你忍不住信任它。

我用这些例子说明可以在意想不到的地方添加动画,从而提升用户体验。不管你的应用是什么类型的,正确使用动画可以让事情更加清晰,连接用户操作后的结果,改变他们对时间的知觉,更重要的是让用户感到愉悦。动画并不仅仅适用于音乐、照片或者天气类应用。

 

文章来源:CocoaChina

您的赞赏,是对我创作的最大鼓励。

评论( 4

登录后参与评论
  1. 不仅仅在支付啊,注册、搜索等都可以用到啊,H5做的吗?

    回复
    1. 回复

      传说中的动效设计?!

  2. 视觉体验是最直接的

    回复
  3. 支付环节的体验十分重要

    回复
加载中