UI动效设计的常见类型详解,揭秘其设计方法

UI设计出了静态的效果之外经常会加入一些动态效果，因为这样可以让整个UI设计变得更加动感，让人感觉充满生机，下面我们跟随小编一起来了解一下UI动效设计的相关资料吧。

UI动效设计常见类型

　　1、旋转。旋转动效是我们在操作界面的过程中比较常见的动效类型，它主要是切换过程中图标或其中元素的角度旋转，是针对具体图标做的巧妙设计。很多app的图标设计中都使用了旋转的效果来模拟实物的晃动感觉，让用户觉得亲切自然。

　　2、填充。填充的主要内容就是填充图标颜色，这种效果适用于选中后过渡到面性的图标样式，可以是局部色块的填充，也可是填充整体，切换过程都可以做到自然流畅。若只有线性图标的样式，图标面积偏单薄，不易出效果一般不建议使用。

　　3、形状变化。形状变化动效一般具有较强的趣味性，它也是需要针对图标形状元素定制化设计的一种。它的自由度较高，供设计师发挥的空间大，能产生许多有趣的效果。比如QQ的消息图标，每次双击都切换不同的表情，给用户留下深刻的印象。

　　4、缩放。缩放动效是比较适合新手设计师选择的一种动效类型。它是简单稳重、包容性好的一种动效，既有动式又不会太复杂夸张。对于视觉引导和明确反馈完全够用，所以它的应用比较广泛，适合大多数产品，是比较保守不易出错的选择。

（图片来自网络）

　　UI动效设计方法

　　一、从哪里开始

　　动效主要的作用通过动态演示 UI元素的变化来引导用户操作，动画也有能力通过图标，Logo，插图为一款应用塑造性格，但不管怎样，动画易用性的优先级肯定是要高于增加设计创意形式。在展示你的动画能力之前，让我们先回到最核心的 UI动效基础上来，去关注 UI中的导航和转换。

　　二、转换模式

　　当设计一个导航转换时，简单和统一就是2个最关键的点。为了实现这一点，我们选择了2种类型的动效模式：

　　1. 基于容器的转换

　　如果界面中涉及到一个容器，比如按钮、卡片或者列表，那么转换就是基于容器的动画。容器通常很容易根据它们的可见边识别出来，但是要记住，它们也可以是在转换之前不可见，就是没有分割线的列表一样。这种模式过程分为三个步骤来做：

　　先使用 Material标准的缓动动画让容器动起来(先快速开始，然后缓慢结束)。在下面这个例子中，容器的大小和圆角半径发生了改变，从一个圆形按钮变化到一个填充屏幕的矩形。

　　容器中的元素以适配容器宽度进行缩放，元素被固定在顶部并隐藏在容器内，这样就在容器和内部元素之间创建了清晰的联系。

　　在转换过程中消失的内容元素会随着容器的加速而淡出，当容器减速时，新的内容元素会淡入。当元素快速移动时，通过淡入淡出元素来实现无缝的转换效果。

（图片来自网络）

把这个设计模式应用于所有容器转换上，将会建立一致的效果。它还能明确开始和结束之间的关系，因为是用容器动画进行引导的。为了展示这种模式的灵活性，有些容器只是使用 Material动画的标准缓动从屏幕外滑入， 它滑动的方向取决于与之关联的组件的位置。 例如，点击左上角的抽屉导航图标，菜单将从左侧滑入容器。

　　如果容器是从屏幕边界进入，则它会淡入并放大。 动画不是从0%的比例开始出现，而是从95%开始，以避免过度弹跳。 缩放动画使用 Material动画的减速规范，这意味着它以最大速度开始并轻轻地减速并停止。 当元素要退出时，容器会在没有缩放的情况下淡出， 退出动画设计会比进入时更微妙，以便让用户将注意力集中在新内容上。

　　2. 没有容器的过渡

　　有些界面并不会基于容器进行转换，例如点击底部导航中的图标，将用户带去一个新界面。 在这些情况下，使用两步模式：

　　开始元素以淡出的方式消失，结束元素以淡入的方式进入。随着最终元素的淡入，它也会使用 Material动画缓动规律进行细微的放大。如果在开始和结束元素之间有一个很清晰的空间和层级关系，共享动画就可以强化这种关系。例如，在导航步骤上，开始和结束组件共享一个垂直滑动动画，这种方式加强了在垂直方向上的信息内容。当按下步骤中的下一个按钮时，组件元素之间共享了一个水平滑动动画，从左向右的滑动强化了步骤进行的概念。共享动画也是运用了谷歌 Material动画的标准缓动。

（图片来自网络）

　　三、最佳实践

　　1. 保持简单

　　考虑到导航转换的高频率和易用性的特点，导航的切换更倾向于引导功能而不是炫酷的效果。这也并不是说动画的形式永远都不要个性化，只是要确保动画是符合品牌风格的。能吸引用户眼球的动画通常都在一些像小图标，logo，加载状态或者空状态等元素中。下面最左边的简单动画可能不会在 Dribbble 上得到太多的点赞，但是它会使应用变得更好用。

　　2. 选择合适的持续时间和缓动形式

　　导航的切换是需要优先考虑功能实用性，所以需要优化持续时间，速度上要快一些，但是也不要快到让用户完全注意不到。持续时间是根据动画在屏幕中所占的位置来决定的。由于导航切换通常会占据屏幕的大部分面积，所以根据经验建议300ms会是一个不错的时间选择。相比之下，像开关这样的小控件使用的时间就会很短，只需要100ms。如果一个过渡动画你感觉太快或者太慢，建议以25ms的增量来调整它的持续时间，直到最终达到一个比较舒服的状态。

　　Easing(缓动)描述了动画的加速和减速速率，大多数导航的切换使用 Material动画的标准缓动，这是一种非对称类型的缓动形式。这意味着元素在开始阶段以很大的加速度进行加速运动，然后再以很小的加速度去减速，目的是将用户注意力集中在过渡结束的位置。这种类型的缓动使得动画看起来非常自然，因为现实世界中的物体是不会立即开始或者停止运动的。如果过渡看起来很僵硬、不自然，很可能是因为错误的选择了对称性或者线性速率。

（图片来自网络）

　　以上就是小编为你整理的关于UI动效设计的相关资料，希望可以帮助你更好的掌握UI设计的动效类型和设计的技巧，让你在做ui交互设计的时候更轻松哦!