丰富细腻的 App 动效遍布移动端优秀应用界面中,为用户提供了良好的动态沉浸式体验,动效设计在产品研发过程中变得越来越成熟和规范,设计师们除了保证功能性和美观性的前提,也要精确地掌握元素的动态交互,从而提高用户体验和产品的竞争力。这里结合我们团队的实战工作经验,给大家进行一些简单的经验总结和技巧分享,希望能帮助大家在工作时制作UI动效变得更加得心应手。
一、动效的价值
动效在UI设计中具有重要的作用和价值。它可以帮助用户更好地理解界面的功能和交互方式,提高用户体验和满意度。
首先,动效可以使用户更好地理解界面的功能。通过动效,用户可以直观地了解某个元素的作用和效果,比如按钮的点击效果、菜单的展开效果等。这种直观的理解可以使用户更快速地掌握界面的使用方式,提高界面的易用性。
其次,动效可以提高用户的体验和满意度。通过动效的应用,可以让用户感受到界面的流畅性、舒适度和生动性。比如,在页面切换时添加动画效果,可以使用户感觉到过渡更自然流畅;在表单输入时添加反馈动画,可以让用户更加清晰地了解输入的结果。这些细节的处理可以提高用户对界面的好感度和满意度。
总之,动效在UI设计中扮演着重要的角色,它可以帮助用户更好地理解界面的功能和交互方式,提高用户体验和满意度。因此,在设计UI界面时,需要注重动效的应用,从而提高用户的使用体验。
二、避免动画生硬
运动曲线可以说是一个动画的灵魂,帮助我们创建平滑运动效果,通过控制图层属性,如位置,大小和透明度等,从而创建出不同的动画效果。通过调整运动的时间、速度和曲线,以获得最佳的动画效果。它直接影响了我们的动画是否流畅合理。
下图中的案例为美事电子工卡的入场动效,通过调节运动曲线使动画更自然。
1. 了解曲线
在移动端的动效设计中最常用的曲线有四种,分别是缓入、缓出以及缓入缓出和匀速曲线。
缓入即加速曲线,物体开始移动时速度较慢,随着时间的推移逐渐加速。加速曲线一般被用在一些离开就不会回来的对象上,譬如我们手机系统清除掉后台应用时的动画效果。
缓出即减速曲线,开始时运动速度较快,随时间推移速度逐渐减慢。物体在移动结束时速度逐渐减慢,形成减速的效果。减速曲线一般用在对象进入画面时,比如常见的弹窗入场效果。
缓入缓出曲线。二者的结合,先加速后减速一般用在对象在画面内的运动。譬如抽屉式菜单的出入场动画。
除了这三种曲线,还有一种没有速度变化的运动方式,以匀速运动。一般用在比较机械的动画上,通常会用于一些加载或者透明度以及颜色的变化上。
在视觉动效中比如一些 H5 动画、 KV 动画或者动态壁纸。如果只是常见的元素,进场和出场也依然可以遵循上面的法则。进入用减速曲线,离开用加速曲线。
2. 推荐脚本
调半天效果还是很难调出自己想要的丝滑效果?在理解了曲线工作原理的前提下,我们就可以借助这款自带多种曲线预设的 AE脚Flow进行快速的曲线调节了。我们可以借助这个脚本建立自己产品的动效曲线预设库Library,轻松地将自己的曲线预设应用到项目中。同时也可以导出动画曲线库并分享给其他设计师,或者从其他动画师导入曲线预设。希望可以帮助大家更快速地创建高质量的动画和过渡效果。
三、保持动效一致
很多C端产品都会通过等级和勋章制度,来增强用户的粘性。58同城的内部沟通协同产品美事也有着成就勋章系统,设计侧我们对50多个勋章做了精美设计的同时,还在展示页面增加了每个勋章的出场动效,其目的也是借助勋章增加用户的荣誉感和仪式感。在这个背景下如何保证勋章的动效一致性我们也沉淀了一套工作方法。
1. 一致性的关键
保持UI设计中动画效果的一致性,可以通过遵循以下步骤来实现:
确定动画的类型:要确定动画的类型,是什么形式,以及它们是如何运行的。
定义动画的参数:确定动画的参数,比如他们的时长,速度,弹性和位置。
编写动画的脚本:编写动画的脚本,比如编写动画的函数表达式等,确定动画的过程,比如动画的延迟,以及动画的参数。
测试动画:测试动画,确保动画的一致性,以及可以做出正确的结果。
2. 推荐脚本
这么多的动画要做如何保证一致性?推荐大家一款关键帧批量复制的AE脚本Motioner ,它支持层和关键帧多重选择,蒙版,父子级,表达式复制。你可以像在PS里录制动作一样录制关键帧属性,然后一键粘贴到其他动画元素中,高效便捷的保证了动画产出的一致性。
四、交互转场动效
移动端交互转场动效的作用是为了让用户感受到有趣的视觉体验。动效的持续时间可以根据使用场景的不同而有所不同,研究表明,动效的最佳持续时长为200毫秒到500毫秒之间。这个数字基于人类的认知方式和信息消化速度得出。动效持续时间低于100毫秒几乎无法被识别,而超过1秒则会让人感到迟缓。下面案例中美事电子工卡的动效持续时间为500毫秒。
五、落地及交付
一个动效是否能够落地实施,这里面牵扯了太多的因素。针对动效输出的选择正在变得越来越多,作为设计师我们要了解动效落地背后的原理才能更容易的对接和落地。目前动效输出常用的有两种方式:位图方式:PNG序列帧、APNG、GIF;矢量方式:Lottie、SVG动画。具体导出方式和每种格式的优劣在这里就不一一介绍。但是请记住一句话,山不向我走来 我便向山走去,以美事勋章项目为例,因为Lottie效果支持的局限性,我们选用了多种方式导出来实现最终的动画落地。
动效设计是通过动态手段提升产品用户体验的过程,也可以视其为界面设计(UI design)与动态设计(motion design)的交集。好的动效设计能够清晰的表达产品层级之间的关系、提升易用性与可用性、减少用户的认知成本,也能够彰显产品品牌特性与差异。动效设计的目的在于使用户在操作APP产品的时候让它过度的更加流畅,使得界面与界面之间、界面上元素的出现和消失都尽量的流畅,通过大小、位置和透明度的变化,使用户和产品的交互过程更流畅。
理解动效设计的原理:动效设计的核心是用户体验,通过动态视觉效果来引导用户操作,提高交互效率。通过学习,我深入理解了动效设计的原理,掌握了如何根据不同的场景和需求选择合适的动效。
1. 掌握基本工具:在学习动效设计的过程中,我掌握了一些基本的工具,如Adobe After Effects、Adobe XD等。这些工具能够用于制作动效视频、进行动效设计的前期规划和后期合成。
2. 实践经验:通过不断的实践,我逐渐掌握了动效设计的技巧和方法。我尝试了多种动效类型,如平滑过渡、缩放、旋转等,并了解了它们在不同场景下的适用性。
3. 团队协作:动效设计往往需要与其他设计元素和开发人员协同工作。通过这次学习,我学会了如何与团队成员沟通协作,确保动效设计能够与产品整体设计风格和用户体验相协调。
常规知识:
二、个人总结
1. 提升用户体验:动效设计能够通过动态视觉效果引导用户操作,提高交互效率。通过合理运用动效,我们可以提升用户体验,增强产品的吸引力。
2. 注重细节:动效设计需要注重细节,如动效时长、动效中的声音效果等。这些细节能够影响用户体验,因此我们需要不断尝试和调整,找到最佳的动效方案。
3. 不断学习和探索:动效设计是一个不断发展和变化的领域。我们需要不断学习和探索新的动效类型和技术,以保持竞争力。
4. 结合实际需求:在选择动效时,我们需要结合实际需求和场景。不同的动效适用于不同的用户群体和产品类型。我们需要深入了解用户需求,选择合适的动效方案。
5.成为AE高手,还需要熟练掌握快
捷键!
在此分享几个日常使用,且
极大提高工作效率的快捷键:
位置:P缩放:S旋转:R
不透明度:T
缓动关键帧:F9
展开/收起带关键帧的属性:U
展开/收起所有属性:UU