数极客首页

教你使用转场动画提升用户体验

教你运用转场动画提升用户体验

的确

,相比于绘制插画、创作专题页面、设计UI这些富有发明

性的设计活动而言,设计表单样式

似乎的确

是一件单调而苦逼的差事。但认真
想想,假定

你设 计的表单是支付流程中最重要的环节,那么状况

就又不一样了,由于
它将是用户选择你和你的企业的起点,也是用户信任的明证。所以这个环节的用户体验必需
精雕细琢,尽量臻于圆满
。除了设计好表格和UI样式

之外,合理地运用转场动画会让整个体验进步
许多。

这个中央
所用的动画并不是单纯的愉悦用户,更重要的目的是让用户明白这个环节是会发作
什么,并且怎样
高效地运用
这一产品。假定

这个环节短少

动画会令人感到缺陷
儿什么,那么这个动画是胜利

的。假定

移除了动画,用户觉得照样能够

凑合着用,则意味着这个动画是可有可无的。

作为Stripe Checkout这一支付应用的设计团队,我们在移动

支付的体验设计上中止

了大量的探求

,也耗费

了巨量的时间阅历
。关于
支付环节的动画设计,我们有着深化
的了解

。在着手设计Stripe Checkout的第一天,我们就开端
专注于运用
转场动画来强化交互,由于
我们置信
它会极大地进步
这款支付APP的用户体验。为了展示

它的运作原理,以下我将运用
几个动画案例来向你阐明

输入

教你运用转场动画提升用户体验

上图中的转场动画足矣阐明

动画关于
用户的适用
性。点击“Remenber me”的选框,输入联络
方式的选框随着转场动画逐步

展开。动画的发作
会强化用户明晰
地认识
到“单机选框”和“输入联络
方式”之间是有联络
的,并且是直接的因果关系。

哆嗦

教你运用转场动画提升用户体验

当我们在填写表单的时分
,经常容易疏忽

一些细小的错误,这也使得我们常常
需求
将可能出错的中央
从头到尾都梳理一遍。但是
很多时分
,系统提示
我们信息 错误的时分
(特别
是在支付环节中),报错信息会让用户感到懊丧
,检查的过程会令人无所适从,最终会有用户直接因而

而放弃继续填写表单。小幅震动的界面,配 合着错误内容的标识会明白
地通知
用户,信息有误。这种类

似摇头的交互行为会愈加
人性化,从而降低了用户流失率。

错觉

教你运用转场动画提升用户体验

用好转场动画,可能会让用户觉得
时间过的比理论

的更快。谁都明白,当用户在等候
的时分
,时间会慢如蜗牛。可是当等候
过程中有动画效果的时分
,即便

等候
时长不会改动
,人的留意
力会被吸收
过去,自但是
然地会觉得
时间一会儿就过去了。这种动画效果就是应用
了人关于
时间的错觉。

转换

教你运用转场动画提升用户体验

巧妙

的动画转变是我的最爱。上图中从Payment Info转换到Pay $25.00运用
了细微
的颜色
转变和滑动特效,提示
用户这个过程正在推进。而当支付完成之后,颜色
从蓝色转为绿色,转变显然
而醒目。在点击了Pay之后, 随同

颜色变化的还有一个显现
支付胜利

的短暂的动态图标,提示
用户支付完成。我特别喜欢这个设计,由于
它会让用户感到支付完成的快感,让他们觉得完成支付是 一件轻松愉悦的事情,

额外的设计

教你运用转场动画提升用户体验

这一转场动画其实有点多余,由于
删除它也不会影响整个操作流程,也不会影响运用
体验。但是它的存在,会提升操作流程的体验。

像他人

一样,我也不喜欢10年前的网站设计。但是这个转场动画会进步
用户的体验,让用户感遭到
设计的好意

,吸收
用户去留意
支付的细节并获取信任。

我的这些案例,都是在平常
大家不太在意的细节处增加了转场动画,改善了整体的用户体验。无论你在构建怎样的应用程序,合理地运用
动画效果,会让用户更明白操作的结果,改动
他们关于
时间的感知,并且令他们快乐

 

原文地址:Medium

优设网翻译:@陈子木(http://www.uisdc.com/animations-improve-payment-experience)

给大家举荐

我国新一代大数据用户行为剖析

与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合剖析

用户行为数据和业务数据,能够

自动监测网站、APP、小程序等多种渠道推行
效果剖析

,是增长黑客们必备的互联网数据剖析

软件。数极客支持实时多维剖析

、漏斗剖析

、留存剖析

、途径
剖析

等十大数据剖析

办法

以及APP数据剖析

网站统计网站剖析

小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据剖析

模型,是用户行为剖析

范畴
首款应用定量剖析

与定性剖析

办法

数据剖析

产品

发表评论

评论已关闭。

相关文章