数极客首页

新技能!教你使用转场动画提升用户体验

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

这个环节短少

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

的。假定

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

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

新技艺!教你运用转场动画提升用户体验

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

这个环节短少

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

的。假定

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

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

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

支付的体验设计上中止

了大量的探求

,也耗费

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

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

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

输入

 

新技艺!教你运用转场动画提升用户体验

 

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

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

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

 

哆嗦

 

新技艺!教你运用转场动画提升用户体验

 

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

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

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

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

 

错觉

 

新技艺!教你运用转场动画提升用户体验

 

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

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

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

 

转换

 

新技艺!教你运用转场动画提升用户体验

 

巧妙

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

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

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

 

额外的设计

 

新技艺!教你运用转场动画提升用户体验

 

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

 

像他人

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

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

 

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

 

来源:优设

给大家举荐

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

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

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

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

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

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

、漏斗剖析

、留存剖析

、途径
剖析

等十大数据剖析

办法

以及APP数据剖析

网站统计网站剖析

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

模型,是用户行为剖析

范畴
首款应用定量剖析

与定性剖析

办法

数据剖析

产品

发表评论

评论已关闭。

相关文章