作为一名合格的育吹，提到射击游戏相关的动效设计，那肯定必须得把大哥抬出来吹一波啦。育碧是什么呀？能用马铃薯作为Web服务器，并且每秒钟可以处理0.2个页面请求的游戏厂商业界楷模！什么游戏不买免费送，限时原价活动，秋后算账等都只有老大哥阿育才能做出来的操作呀~我本身最爱的就是射击类的游戏，玩过的很多，但要说目前我觉得最完美的射击游戏那必定是阿育的《彩虹六号：围攻》，这款游戏甚至治好了我的3D眩晕！！！而游戏中的育碧独创QE偏头射击甚至是射击游戏上的史诗变革。（从今天起育碧就是我大哥.jpg）那么，今天我们就来分析一下大哥射击游戏中的UX动效吧。（本报告主要以第三人称射击类游戏的UX动效为主）

育碧FPS/TPS类游戏UX设计——动效分析

▲目录

• 动效分布概况总览(Part1)

• UI界面动效(Part1)

• HUD-游戏性枪械射击辅助动效（Part2）

• HUD-系统指引和其他功能性内嵌动效（Part2）

◆  动效分布概况总览

根据游戏中动效的运用划分为以下几类：UI界面动效、游戏性枪械辅助动效、系统指引内嵌动效；每一大类又可分为诸多方面，大概总览如下： 

◆  UI界面动效

⊙  Loding类加载动效

• 置于右下方的loding，17年的《幽灵行动：荒野》相比今年的《全境封锁2》略显简单，但是logo节奏感挺好（logo分切为三块向左下滑动，要点：速度曲线开始时慢，有一个速度递进过程）

• 全屏居中显示的loding，《全境封锁2》使用3D图标，加载时loding图标会偏向鼠标悬停方向，并投射阴影

• 增加故障艺术元素（科技+危机+朋克）

• loding下方添加游戏小Tips提示（tips分为三大知识板块，游戏性、信息、世界）每次切换到相应板块时显示该版块的随机内容，板块logo消失有一个缓出的过程，并且玩家左右选择时LB、RB键有半透明反馈

• 《彩虹六号：围攻》的上拉横条式loding(文字logo置于左下方)

• 《幽灵行动：断点》由于尚未发售，此方案为育碧E3实机演示（制作方法参考Periodic Table Motion的Vegas）

• 《彩虹六号：围攻》页面切换全屏居中式loding

• 《孤岛惊魂5》的这种风格式的loding界面比较偏向手游风格

• 可用Periodic Table Motion的TrimCircle、StepTime、RepeatTrim、RepeatScale、LineWeight等方法实现

⊙  大厅界面基本UI与动效布局

• 界面导航栏采用3D布局，视觉方向以人物为中心

• 选中区块颜色变化，位置往左偏移

• 部分区域还是有故障艺术元素

• 消息封面添加了动态波纹效果

• 选项框有回弹效果，配合音效有很好的交互

• 点击时中心能量点向外扩充效果，个人觉得指针效果还是简单为主相对好一点，而且这种圆形指针指向性弱于矩状类指针(制作方法可参考Periodic Table Motion的MaskWipe,结合蒙板即可实现)

• 所选图标会被放大，图标框下方有进度条（《幽灵行动：断点》由于尚未发售，此方案为育碧E3实机演示）

• 选中时，背板改变颜色，图标反转颜色

• 偏移节奏：整体往左下偏移，整体偏移结束后，内嵌icon单独偏移

• 不同需求时按钮的动效状态

• 普通型：除特殊功能性icon以外，其余选择状态都用这种方式表现

• 短暂型：功能主要为了防止玩家误点此类按钮（类似还有更改枪械配置等）制作方法可参考Periodic Table Motion的TrimCircle和RepeatTrim

• 缓慢型：当玩家需要进行重大决定时的读条（类似还有删除角色、重置存档等）制作方法可参考Periodic Table Motion的TrimCircle和RepeatTrim

• 《彩虹六号：围攻》大厅未点击状态/点击状态

⊙  枪械属性配置UI界面与动效布局

• 很简洁的动效，但是主光与余光的色调光感搭配很好，使用蒙板羽化即可实现（《幽灵行动：断点》由于尚未发售，此方案为育碧E3实机演示）

• 所选装备有信息介绍弹窗（下方进度条读满时弹出）

• 界面整体根据指针位置有变动（《幽灵行动：断点》由于尚未发售，此方案为育碧E3实机演示）

• 指针悬停区域闪烁，换枪时缓入缓出

• 新内容标签有一个高光从左往右的推散，枪械数值有明显对比

• 所选选项有一个透明度变化的闪烁

• 带升级空缺能量槽闪烁

• 双重缩放白色矩形框渐变消失（元素消失必须有一个时间差，切记同时出现同时消失）

• 扁平化玻璃高光平移（注：高光有一个不太明显的拖尾动态模糊细节！这一点很重要）

• 风格与RepeatTransform类似，可参照制作

• 《全境封锁2》大多动效都是围绕故障艺术来表现的，参考当前市场上较火的一些游戏（赛博朋克2077就是最好的例子），可以预测到未来几年内赛博朋克风格很可能成为主流，而故障艺术则会是朋克元素中很好的一种表现方式

• 不规则资料框的出入，字体和LOGO的RGB分离

• 选中时触发动态模糊效果（运用Noise叠加制作）

• 跟前面讲到的角色装备一样，枪械装配也是已装备项用中括号标注

• 配件装备时，配件槽显示填充矩形，并有配件介绍语言框，取消配件时填充矩形变成比他大一点的描边空白矩形框

• 《孤岛惊魂5》中给武器选择装备配置，鼠标悬停时有动态光晕围绕旋转

• 点击购买后跳出已购买提示，新解锁物品的物品框背景高亮（高亮是在装备背后而不是在主体之上）

• 选中时为矩形框，切换目标后变为虚化向外扩散消失

• 根据武器涂装的稀有度等级来改变框的颜色（Periodic Table Motion的Glow效果）

• 《彩虹六号：围攻》的枪械配置UI布局相对简洁，装备也比较硬核，这种更符合第一人称类射击游戏的风格

⊙  系统提示Tips

• 弹性节奏（注：红绯色矩形有一个扩大形变的弹性过程）

• 节奏可以参考Periodic Table Motion的TrimLine和Slide

• 《彩虹六号：围攻》奇美拉行动模式，系统任务提示Tips(logo周围有红色迷雾，与游戏模式主题生化、感染相应)

• 大文字与小文字从相反反向进入，有效提升视觉冲击

• 粒子Size、Life、Opacity变化呈正态分布

• 粒子背后有黄色烟雾外扩（烟雾可用FumeFX、TFD实现）

• 《全境封锁2》的系统性提示多样性很大，功能相差不多提示在细节上也有区别

• 中间运用Periodic Table Motion的Mosaic可以做出此类效果

• 文字信息随机可以运用Periodic Table Motion的Text来制作

• 经验值处的额外变化（节奏：出现时先往反向慢速移动少许，之后快速往左，结束时减速）

• 《幽灵行动：荒野》的系统提示基本都大同小异，制作也很简单，这里就不做赘述了

• 要注意速度曲线不是匀速，必须有一个由慢加速的过程

• 《幽灵行动：断点》动效上相比上作有了很大提升，不仅仅是填充色调类似提示了，加入了很多光感很好的元素，提示性有了提高（《幽灵行动：断点》由于尚未发售，此Demo为育碧E3实机演示）

• 不同品级的物品光条数量和颜色都有所区分，物品放大的时候，能量汇聚中心，之后物品确定后能量延展开

• 可以添加Periodic Table Motion的Scatter类似效果来做出传输信号不稳定的那种感觉

• 《孤岛惊魂5》由于是偏向剧情类的FPS游戏，所以提示类信息动效比较简答直接，好多Tips都是以单纯的文字直接提示玩家

• 提示类型主要用颜色区分，此条为警告性提示

• 注意：制作烟花的时候一定要考虑时间差，这个动效是不同时间出现同时间消失，同时消失是为了与文字内容消失方式保持一个统一的联系

• 五星中间那颗往上跃进拉出文字内容，其余消失

• 《全境封锁1》的等级提升动效要素不多，文字内容出现后，文字所属区域虚化渐变

• 可以给光柱添加随机值来改编位置、粗细数值来闪烁