AfterEffects移动UI交互动效设计与制作（全彩慕课版）（第2版）课件 模块1　UI动效设计基础

模块1

UI动效设计基础了解UI动效什么是UI动效

UI动效，全称用户界面动效设计，是动态效果设计在用户界面（UI）中的具体应用。它指的是在UI设计中，通过运用动画、过渡效果等动态元素，以增强用户体验、引导用户操作、提供视觉反馈和创造吸引人的界面交互效果的设计过程。UI动效设计是界面设计与动态设计的交集，是现代UI设计中不可或缺的一部分。了解UI动效什么是UI动效为什么现在的产品越来越注重动效设计？我们可以先从人们对于产品元素的感知顺序来看。不难看出人们对于产品动态信息的感知力是最强的，其次是产品的颜色，最后才是产品的形状，也就是说对动态效果的感知力要明显高于对产品界面的感知力。在产品的交互操作过程中恰当地加入精心设计的动效，能够向用户有效地传达当前的操作状态，增强用户对于直接操纵的感知，通过视觉化的方式向用户呈现操作结果。了解UI动效UI动效的发展

MaterialDesign语言是一种现代UI设计语言，它旨在帮助开发者创建美观、易用和跨平台的移动应用及Web应用。MaterialDesign语言的一部分作用是解决过于扁平化设计所带来的问题，即复杂层级关系如何展现、用户如何被吸引和引导。为了解决这些问题，MaterialDesign语言通过分层设计与动效设计相结合的方式，在扁平化的基础上为用户提供更容易理解的层级关系，为UI赋予情感，增强用户在产品使用过程中的参与度。了解UI动效动效在UI中的作用

1．吸引用户注意力人类天生就对运动的物体格外注意，因此界面中的动效自然是吸引用户注意力的一种很有效的形式。通过动效来提示用户操作比传统的“点击此处开始”这样的提示更直接，也更美观。

了解UI动效动效在UI中的作用

2．为用户提供操作反馈在移动设备屏幕上点击虚拟元素，不像按下实体按钮一样能够感觉到明确的触觉反馈。此时，交互动效就成为一种很重要的反馈途径。有些动效反馈非常细微，但是组合起来却能传达很复杂的信息。了解UI动效动效在UI中的作用

3．加强指向性当用户在界面之间切换，例如查看照片、进入聊天状态等时，合理的动效能够帮助用户建立很好的方向感，就像设计合理的路标能够帮助人们认路一样。了解UI动效动效在UI中的作用

4．传递深度信息动效不仅可以展示界面上元素位置与大小的变化，它更是一个强有力的工具，能够生动地揭示元素之间的层级结构与相互关系。借助陀螺仪和加速度传感器，让界面元素之间产生微小的距离，从而产生视差效果，这样可以将不同层级的元素区分开来。UI交互设计用户青睐的交互设计模式从用户角度来说，交互设计本质上是一种如何让产品易用、有效且让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在与产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。UI交互设计提升产品转化率

1．将重要功能操作选项放置在底部区域在UI设计中，通常会将一些重要的功能操作按钮或图标放置在界面底部区域，底部区域因其可达性和重要性而被赋予了特殊的关注。例如：在电商类App界面中，会将“加入购物车”“立即购买”等按钮放置在界面底部，而这些按钮都是涉及到转化率的重要功能操作按钮。2．不要在界面中上区域放置关键功能操作按钮通过观察不同尺寸手机屏幕的手势点击范围可以发现，屏幕中上方的点击容易度为一般或困难，所以在界面的中上方位置不适合放置关键功能操作按钮。如果一定要设置关键操作功能，可以考虑搭配交互动效。UI交互设计提升产品转化率

3．将返回功能点击困难化，有利于用户留存通常情况下，在界面设计中都会将“返回”功能操作按钮放置在界面的左上角位置，因为该位置属于点击困难区域，用户单手操作时不容易轻易点击，这样可以使用户留在当前界面中的时间更久一些。如果将“返回”功能按钮放置在界面的底部左下角位置。该区域属于最容易触发的点击区域，加上误操作的可能，非常不利于用户留存。UI交互设计提升产品转化率

4．交互动效的触发区域最好位于容易点击区域在界面设计中加入交互动效，能够使用户更方便、快捷地使用产品中的相关功能，所以交互动效的触发难度也十分关键，通常需要将能够触发交互动效的元素放置在界面中容易点击的区域。UI动效设计的要点与作用增强用户体验

UI动效设计的精髓聚焦于“时间点”的精准把控与“空间幅度”的巧妙安排。通过对“时间点”和“空间幅度”的精心设计，不仅展示了产品功能的交互操作流程，更在无形中建立了用户对动效合理性的认知。这种视觉上的真实感与可信度，使用户能够直观且深刻地理解产品的操作逻辑与使用方法。在这样的互动过程中，用户不仅能够更加自信地操作产品，更能在享受流畅体验的同时，感受到产品所传递的情感温度。UI动效设计的要点与作用提升产品气质没有添加动效的产品会给人一种死气沉沉的感觉，所有内容平铺直叙、毫无生机，即使界面设计得非常美，也会缺乏一种灵动细腻的气质。如果把产品比作人，那么界面就是人的外表，动效就是人的肢体语言。合理的动效能够将信息更立体、更富有关联性地传递出去，提高产品的“表达能力”，增强产品的亲和力和趣味性，也有利于品牌的建立。UI动效设计的要点与作用还原设计亮点设计师通过制作高保真动效Demo展示设计思路和创意，可以大大提高设计提案交接率，降低设计师与开发人员的沟通成本，提高动效的还原度，体现专业性。

UI设计行业已经趋于饱和，并且产品设计流程逐渐实现体系化和模块化的今天，设计师如果只会利用组件重复地“拼凑”界面而无法实现更大的价值，被替代的可能性将会增大。如何设计动效首先需要有一个想法

1．结合产品去设计在设计动效之前，需要结合产品进行思考，设计思路要以提升产品的用户体验为目的，要细致思考，不要盲目。2．了解动效的基本常识在进行动效设计之前，需要了解动效的基本常识，这些常识包括运动基本常识（如基本的运动规律、节奏等）、动效开发的基本常识、不同的动效的实现方法、实现成本。只有理解并掌握这些基本常识，才能够确保动效设计顺利进行。如何设计动效首先需要有一个想法

3．观察生活人们对于美的认知大部分来自于日常的生活经历，比如什么样的运动是温柔的、激烈的、具有震撼性的。当我们对于需要构思的动效有性质定位的时候，可以从生活中这些相同的自然事物中寻找灵感，汲取精华。4．多看多思考除了观察生活，我们还需要多看一些优秀的动效，在观看的过程中，需要思考它为什么要这么设计、是通过哪些技巧和方法完成这个动效设计的，以及动效的整体节奏等。时刻与自己对类似事物的想法进行对比，找差距、补不足，这就是经验技巧积累的过程。如何设计动效首先需要有一个想法

5．学会拆解大多数的动效都是由基础变化组合而成的，我们要通过多看多观察，慢慢学会怎么去拆解别人复杂的动效，从中总结经验，然后通过合理的编排设计出自己的动效。6．紧跟设计潮流我们要时刻保持对设计行业和动效设计领域的关注，了解当下新的设计趋势、设计方式和表现手法等。如何设计动效实现想法

1．动手尝试，熟能生巧理解了理论知识，一定要亲自动手进行尝试，不断尝试才能够不断锻炼自己的技术，只有尝试才能够真正地验证你的设计。2．多临摹，多练习学习任何东西，特别是在设计行业中，临摹都是一个非常有效的入门方法，动效设计也是如此。临摹的过程其实就是你与优秀设计师交流的过程，从中仔细了解和学习他的设计思路和表现手法，在临摹的过程中结合自身经验对原有设计手法进行优化升级，是很好的提升技巧的方法。如何设计动效实现想法

3．注重细节动效设计和做单纯的视觉设计一样，一定要注重动效细节的表现。要做到全面思考，认真实践。4．使动效富有节奏感动效设计应以提升用户体验为核心，避免过度复杂或干扰用户操作的动效。动效应富有节奏感和视觉吸引力，能够吸引用户的注意力并提升界面的美观度。5．先加后减当你不太明确如何丰富自己的设计想法，或者不太清楚应该使用何种技巧达到自己设想的感觉时，可以先尝试确定哪些地方可以动态化，可以这样运动，是否也可以那样运动，寻找出可能性和突破，然后对这些可能性和突破做减法，去除多余部分，保留精华。动效的类型有哪些转场过渡人们的大脑会对动态事物（例如对象的移动、变形、变色等）保持敏感，在界面中加入一些平滑舒适的转场过渡动效，不仅能够让界面显得更加生动，更能够帮助用户理解界面变化前后的逻辑关系。动效的类型有哪些层级展示在现实的三维空间中，物体遵循着自然的视觉规律。距离观察者越近的物体显得越大，而越远的则相应缩小。当物体在空间中运动时，距离较近的物体运动速度在视觉上显得更快，而远处的物体则显得移动得较为缓慢。UI动效以其独有的动态语言，不仅能够捕捉并展现物体间的微妙空间差异，还能赋予整个界面以生动的空间感和层次感。动效的类型有哪些空间扩展在移动界面中，有限的屏幕空间难以承载大量的信息内容，通过动效的形式，可以在界面中通过折叠、翻转、缩放等方式拓展出附加内容的界面空间，以渐进展示的方式来减轻用户的认知负担。动效的类型有哪些聚焦重点聚焦重点是指在界面中通过元素的动态变化，提醒用户关注界面中特定的信息内容。这种提醒方式不仅可以降低视觉元素的干扰，使界面更加清爽简洁，还能够在用户使用过程中自然地吸引其注意力。动效的类型有哪些内容呈现界面中的内容和元素按照一定的秩序和规律逐级呈现，能够引导用户视觉焦点移动方向，帮助用户更好地感知界面布局、层级结构和重点内容，同时也能够让界面的操作更加流畅，增添界面的活力。动效的类型有哪些操作反馈在界面中进行点击、长按、拖曳、滑动等交互操作时，都应该得到系统的即时反馈，以视觉动效的形式表现操作反馈，能够帮助用户了解当前系统对用户交互操作过程的响应情况，为用户带来安全感。基础变化类型移动、旋转和缩放

1．移动移动，顾名思义，就是将一个对象从位置A移动到位置B。这是最常见的一种动态效果，像滑动、弹跳、振动这些动态效果都是从移动扩展而来的。

2．旋转旋转是指通过改变对象的角度，使对象产生转动的效果。通常在界面加载或点击某个按钮触发一个较长时间操作时，经常使用到的Loading效果和一些菜单图标的变换都会使用旋转动态效果。基础变化类型移动、旋转和缩放

3．缩放缩放动态效果在UI设计中被广泛地使用。例如，点击一个App图标，打开该App全屏界面时，就是以缩放的方式展开的，还有通过点击一张缩略图查看具体内容时，通常也会以缩放的方式从缩略图过渡到全屏的大图。基础变化类型属性变化属性变化其实就是指元素的不透明度、形状、颜色等属性在运动过程中的变化。属性变化也是一种基础变化，例如可以通过改变元素不透明度来实现元素淡入/淡出的动画效果等。同时还可以通过改变元素的大小、颜色、位置等几乎所有属性来实现动画效果。基础变化类型变化节奏自然界中大部分物体的运动都不是线性的，而是按照物理规律呈非线性的。通俗地说，就是物体运动的响应变化与运动物体本身的质量有关。动效应该反映真实的物理现象，如果动效想要表现的对象是一个沉甸甸的物体，那么它的起始动画响应的变化会比较慢。反之，对象如果是轻巧的，那么其起始动画响应的变化会比较快。基础变化类型基础变化的组合应用大多数场景，需要同时使用2种以上的基础变化，将它们有效地组合在一起，以达到更好的动态效果。另外我们仍然需要让动效遵循普遍的物理规律，这样才能使所制作的动效更容易被用户接受。UI动效设计软件

1.AdobeAfterEffectsAfterEffects，简称AE，作为当前炙手可热的交互动效设计制作软件，其强大功能几乎覆盖了创作者的所有想象。AfterEffects的功能非常强大，基本上想要的功能都有，UI交互动效其实只使用到了该软件中很小一部分功能。事实上，众多震撼人心的电影巨制均依赖于AfterEffects进行精细的后期合成与特效制作。当AfterEffects与Photoshop、Illustrator等Adobe家族中的软件协同工作时，无论是细腻入微的UI交互动效，还是震撼视觉的影视特效，都能得心应手。UI动效设计软件

2．CINEMA4DC4D是近几年比较火的一款三维动画制作软件，其特点是拥有极高的运算速度和强大的渲染插件。与众所周知的其它3D软件一样（如Maya、3DMax等），CINEMA4D同样具备高端3D动画软件的所有功能。所不同的是在研发过程中，CINEMA4D的工程师更加注重工作流程的流畅性、舒适性、合理性、易用性和高效性。因此，使用CINEMA4D会让设计师在创作设计时感到非常轻松愉快，赏心悦目，在使用过程中更加得心应手，有更多的精力置于创作之中，即使是新用户，也会感觉到CINEMA4D的上手非常容易。UI动效设计软件

3．PixatePixate是一款专注于图层交互的原型设计利器，其独特魅力在于其高度的交互性与强大的共享功能，能够轻松实现设计思路的即时反馈与团队间的无缝协作。值得一提的是，Pixate与Sketch软件的深度整合，为用户提供了从设计到交互原型构建的流畅体验，极大地提升了工作效率。此外，Pixate对GoogleMaterialDesign的深入支持，通过内置丰富的MD预设，使得设计师能够轻松遵循这一现代设计语言，创造出既美观又符合用户期待的交互界面。Pixate的著短板在于缺乏直观的时间轴功能，这在处理复杂动画序列时可能稍显不便。同时，层级管理界面的设计或许不够直观明了，当项目中的图层数量激增时，可能会给设计师带来一定的困扰，使得界面显得杂乱无章，增加了管理难度。UI动效设计软件

4.HypeHype，被誉为无代码动效神器，其引入了类似于AfterEffects的时间轴，让动画设置变得前所未有的直观与高效。无论是PC、移动设备还是平板，Hype都能确保动画效果的无缝预览，让设计作品的每一个细节都能在不同平台上完美呈现。此外，Hype还支持将动画作品轻松导出为视频或GIF格式，无论是用于项目展示、社交媒体分享还是产品演示，都能满足多样化的需求。Hype3.0版本新增的物理特性和弹性曲线功能，为动画注入了更加生动自然的动态美感，使得每一次滑动、弹跳或是形变都仿佛遵循着物理世界的规律，展现出令人叹为观止的视觉效果。UI动效设计软件

5.PrinciplePrinciple是一款功能强大的原型设计工具，其布局与操作逻辑与Sketch相似，被业界称为Sketch的理想伴侣。Principle专注于界面之间流畅的过渡转场效果以及单元素动画等细微之处的动态呈现，为设计作品增添了细腻而生动的生命力。Principle的优点很明显，上手快、效率高、质感好，缺点就是不易做整套交互流程。UI动效设计软件

6.FlintoFlinto的界面与Sketch也非常相似，使得用户能够迅速跨越学习门槛，轻松驾驭各种滚动、转场及点击反馈等动态效果的实现。这款工具尤为擅长模拟多界面、场景错综复杂的交互流程，为设计师提供了强大的支持，让创意能够自由驰骋于复杂的交互设计中。然而，Flinto