【科普向】动效在游戏UI交互中的作用
现如今游戏UI设计越来越专业化，多元化。怎么才能做到领先不倒？就先从动效开始聊起
在提高自身专业设计能力之外，想要更有市场竞争力，那还需要具备沟通协调能力、动效设计能力、技术规范能力（基础的英文和程序逻辑能力）、市场判断能力等等。
那在今天我们来说说拥有动效设计能力，能在UI交互设计中起到一些什么样的作用
本篇文章来自个人总结。
——————————————————————————————————————————————
为什么需要动效
为什么需要动效？
关键字：扁平化/移动端/交互/表现/PC/主机/街机
装饰？反馈？
动效设计并不只是为了装饰，重要性在于玩家遇到问题的时候，动效能够用易于玩家接受的方式帮助玩家。
动效同时还可以提供和完善信息的关联形式，还可以与玩家产生互动，产生共鸣。
现在各类型的apps界面都在往偏平化走（当然今年2020微软的新icon有立体趋势，但市场上整体还是偏平居多），同时又有那么多的移动端用户群。
无论是从表现形式上，还是交互方式上，还是趋向于简约直接。有点击有反馈这种一来一往双向沟通模式。再加上现在用户对手势体感需求的增加，各种手势反馈的需求量将大大增加。
另外，从主机和街机类游戏所取得的经验来讲（同样都是用最少的按键/触屏，达到最高效的游戏性），一定量优秀流畅的动效视觉反馈，会大大增加玩家用户的视觉留存和体验欲望。
（未知）
（Wonderland Wars）
动效设计并不只是为了装饰，重要性在于玩家遇到问题的时候，动效能够用易于被接受的方式帮助玩家。
同时还可以提供和完善信息的关联形式，还可以与玩家产生互动，产生共鸣。
我的动效启蒙
对，就是街机。
街机在整个机房里就是一个个互相竞争的关系，通过音乐、灯光以及视觉效果吸引玩家的目光。
所以他的节奏感，阶段性的奖赏画面，或多或少都能让我们学习和总结。
（FGO）
什么是动效
顾名思义，就是 动画 和 特效 这两部分。
动画与特效就是血与骨的关系。没有动画的特效没有生命，没有特效的动画没有灵魂。
在游戏UI动效这里也同理。
所以动效首先得要有动画，动画到位，加上特效，才称得上完美。
那这两者之前到底有什么区别？
动画，一般以常用的四种基本属性，来控制数值变化所产生的运动效果。
（后面会提到这四种属性）
特效，加之一些粒子系统，或者序列图素，或者图层的叠加模式等产生的气氛渲染效果。
（网络图-动画为主）
（风暴英雄-动效结合）
为什么要做动画
做动画的原因总结下来主要有三点。
清晰焦点。
重点突出，符合逻辑，给予玩家充足的阅读时间。
克制有度。
控制时长和出现频率，不增加额外操作，不干扰玩家。
自然流畅。
保持视觉连贯性，缓动过渡，做到不卡，不闪，不跳。
—1—
清晰焦点
重点突出，符合逻辑，给予玩家充足的阅读时间。
引导玩家注意力，思考是否需要玩家一下子就能注意到动效并立即采取行动过渡，使特定元素在不同状态间转换，保持视觉连续性。
（过程尽可能柔和，自然。让玩家注意不到过渡的存在。）
如上图，每当部件信息切换的时候，右边Robot的视角角度也会产生变化，让当前详情对应的部件放大局部展示。这种过渡形式就非常的清晰自然，降低了理解成本。
如上图，一个对战界面分为三步分别交代清楚了，是某个奖杯赛事，双方是谁，是对战关系。不拖沓，短短时间内，玩家就通过出场的顺序理清了整屏的信息量。
—2—
克制有度
控制时长和出现频率，不增加额外操作，不干扰用户。
时间，在动画中显得尤为重要。
太快，会造成玩家来不及反应，停留思考那一瞬间所发生的事，对玩家造成干扰。
太慢，挑战玩家的耐心，稍有不当造成玩家流失。
所以，时间是动效的核心元素，设计动效时需要考虑两类时间。
响应时间
持续时长
—2-1—
响应时间
响应时间是指，从玩家执行操作到反馈出现的间隔时间。
触发机制不同，响应时间的限制也不同。
触发机制有以下两种：
玩家直接操作触发（如HOVER按钮上，按钮的颜色发生了改变）
玩家直接操作触发（如切页，或玩家拨动页面滚动条时，触发了新内容的加载动效）
（用户直接操作触发）
（用户间接操作触发）
对于玩家直接触发的反馈，理想的响应时间应该控制在100毫秒内。100毫秒=0.1秒
（Robert B.Miller在《人机对话的响应时间》提出，因为人体最快的潜意识动作，一次眨眼的平均持续时间是100到150毫秒，100毫秒的间隔给人的感觉就是瞬间）
一般直接触发的反馈会用在按钮的类别上。因为进行了操作，需要即时看出变化。
（用户直接操作触发）
对于玩家间接触发的反馈，响应时长可允许达到1秒左右，不可超过2秒无反馈。
（JAKAB NIELSEN在《响应时间：3个重要限制》提出，在完成一项操作1秒左右的时间，用户会短暂进入心流状态，专注于获取响应，而超过2秒用户就会觉得自己丧失了控制权。）
一般表现在全屏切换，或者出现弹出框等事件上。
（英雄战境）
当超过2秒才能获取反馈结果时，需启动加载动画（loading），反馈时间超过10秒时，使用带有进度指示的加载样式。
如过场Loading，加载动画等情况。
（P5）
（英雄战境）
—2-2—
持续时长
持续时间不宜过长，以避免浪费时间，影响阅读和操作效率。
下面有两方面会具体影响持续时间的取值
一方面会受到元素的大小，动效的复杂程度影响。
另一方面也会受到动效的目标和运行动效的设备影响。
小元素的轻微变化效果（如渐隐渐现，大小变化等小范围的变化）一般在200-300毫秒之内。
较大元素的复杂变化效果（如包含大范围缓动位移）可长达400-500毫秒。
较快的动效更容易吸引玩家注意力，也更节省时间。
为了吸引玩家注意，可使用在短时间内变化较大的动效（如发生位移或者速率改变）
较慢的动效较少分散玩家的注意力，更适用于非直接触发类的。
若动效不是玩家直接触发的，不希望玩家注意力被转移，可使用在长时间内变化较小的动画。
（口袋铁拳）
（WatchDog2）
另外，不同设备的屏幕尺寸不同，理想的持续时间也不一样。对于移动设备而言，屏幕越大往往动画的位移也偏大，因此持续时间也应该越长。
出场动画一般比入场动画更快。
（如当入场动画为230毫秒时，出场动画可设置为200毫秒）
这是因为入场时玩家需要阅读和处理一些信息过渡，而出场时一般表明玩家已达成目的，不需要再关注了，快速出场可以给玩家节约更多的时间。
（P5）
（Gigantic）
—3—
自然流畅
保持视觉连贯性，缓动过渡，做到不卡，不闪，不跳。
在动画中常用的属性变化有
位置（Position）大小（Scale）旋转（Rotation）透明度（Opacity）这四种基本属性变化。
而要做到具有连贯性，缓动过渡的话，就要涉及到这两种运动模式。
线性（LINER）
曲线（CURVES）
—3-1—
线性变化
线性变化有均速和骤停这两个特征，一般适用于与物理属性无关的过渡动画或者是有规律的加载动画。
在与物理参数有关的变化中（特别是位置变化）尽量避免使用线性变化，否则很容易很人带来僵硬不自然的感觉。
—3-2—
曲线变化
在交互动画中，缓动曲线（Easing）的应用范围最广，效果最自然，对玩家的干扰也较小，多用于与物理属性相关的属性变化中。
（通过曲线变化来 模拟不同物体的 运动规律）
还有其他的一些常用手段。
比如有：偏移与延迟、父子关系、视差、维度变化、景深等
在这里推荐一个网站：https://gameanimation.info/
可以去学习和参考用。
为什么要做特效
反馈性
保证玩家与游戏之间有一定的交流，即使是最基本的操作。所以，一定程度上来讲，这类动画是模仿真实世界中人类与物件之间互动的一种方式。
比如：按钮，按下去的作用力和反作用力。
趣味性
没有功能性的目的，提升画面精致度与丰富度。
效果upup
总结交互动效的作用
交互动效以功能性为主，须遵循克制有度、清晰聚焦、自然流畅这三个核心设计原则、加上特效辅助。
在设计前，思考希望如何影响用户的注意力、动效的目标是什么、动效出现的频率和触发机制是怎样的。
在设计时选择合适动效类型和持续时间并关注反馈的响应时间，做到有理有据、令人信服。
今天笼统的分析了一下UI动效交互的作用，和基本的知识点，下次有机会还将会仔细整理分享，在动效细节上的问题。
——————————————————————————————————————————————
有兴趣的童鞋还可以关注下我的公众号：鸭酱杂记
