随着玩家审美的提升，很多研发团队细分了界面动效的设计岗位，开始越来越重视游戏界面中动效和特效的体验细节。

这是一个对专业敏感性要求非常高的岗位，目前相关的知识分享也比较少。

本篇分享，我想先从工作职能部分，讲清楚动效设计师都该做些什么。

阅读之后可能带来收获：

1，团队管理者：业务逻辑更清晰；

2，UEDC成员：与动效设计师合作更紧密；

3，动效设计师：建立更高岗位价值目标。

2013年 | 在腾讯组建了国内第一支界面动效团队

- 感谢J姐当时的大力支持 -

交互效果动态预演 

针对一些创新性较强交互效果，制作一系列动态演示。 用于帮助项目对设计交付物的判断，同时也给前端程序提供更准确的制作参考。 

 2014 | 《无双》交互演示 

交互动态预演流程的加入，为设计构思到最终落地中的各个环节都提供了保障。

对于创意设计成功率与开发迭代率都有很好的价值体现。

将预演效果举一反三，能够帮助项目制定一系列的动效规范，以便于统一调用。当后期出现新的优化点时，也方便全局替换效果，节省迭代时间。

全局调用的动效规范 | 后续篇章详述 

有时候，当设计师有一些新创意点时，游戏制作人一般不敢直接采纳。

在加入预演流程后，通过演示内容来召集更多的人参与决策。当大家面对真实的互动画面后，对效果也有了更具象的判断。

我们都渴望拥有能够让玩家眼前一亮的体验，预演流程可以帮助设计在“创新”与“保守”之间去寻求平衡。在这个流程下，还能激活设计师和策划的设计灵感，主动思考的积极性也会随之提高。

追求创意的精品之路，这个环节不可或缺。

行云流水的界面体验，谁不向往呢？ 

“控件层”特效 

控件层特效指附着于按钮、图标等控件上，持续或触发显示。

目的是通过特效吸引玩家对控件进行交互行为。

条形按钮效果 

面对界面特效需求，设计师要保持“配重”意识，并不是所有需求都要花哨、华丽。

我会要求团队优先做视觉强度的拆解，针对同一类需求的“强”、“中”、“弱”效果做出明确的使用情景定义，以此来保证信息传达的准确性。

做好“配重”的准备工作有很多好处：

1，沟通需求，明确特效等级诉求；

2，体验验收，针对情感反馈，提出调优标准。

常驻状态效果 

制作控件层特效时，还需要注意玩家的交互意识问题。同是一类交互行为的控件特效，效果必须一致。

实际工作中的错误案例：

“氛围层”特效 

氛围特效指对界面“背景层”与“前景层”做出氛围渲染。

背景层特效会常用在全屏界面中，因为是常驻状态，要注意分布的范围与强度，避免影响主体内容的阅读体验。

除了常规界面背景，一些情景化的场景氛围也需要界面特效支持。

例如在《山海镜花》的登录系统中，氛围是由下雨特效与火车蒸汽特效组成。

前景层特效，效果更多依附在UI上，与控件特效最大的区别是仅作氛围渲染，没有可交互状态。

所以要注意的是，视觉表现手法要与控件特效有明确区分。不能传达出可交互的含义，使玩家产生迷惑。

界面动效制作 

界面动效对设计师的能力要求最高，需要具备较强的“转场节奏感”、“动画分镜能力”以及“空间想象力”。

★ 转场节奏感 - 什么是转场

转场就是界面内容之间衔接的方式，为了让内容切换过渡的更加自然连贯。

转场效果在国产手游中应用较少，大部分游戏在切换内容时还是硬切的方式。

这主要是因为界面信息过多、游戏引擎开发成本较大等原因导致。

不过，随着扁平化UI的设计发展，未来的游戏界面中，作为体验品质提升的突破口，转场效果将会有更多机会得到充分的体现。

这方面需要多去参考优秀的APP动效设计。

★ 动画分镜能力

由平面素材联想到切镜呈现的设计能力。

这种能力十分考验设计师对参考素材的日常积累，当面对需求时，是否能够马上联想到丰富的切镜效果，并且通过沟通去协调上下游资源（例如角色动作、镜头设计等）。

★ 空间想象力

由平面素材联想到3D空间展现的设计能力。

当拓宽一个空间维度后，从动效的呈现效果上会得到明显的提升。

在我们的《少年三国志·零》中，抽卡系统经过了多次的迭代，由一开始的普通平面转场拓展到现在的3D空间概念。视听角度上，体验明显更精进了一步。 

总结 

游戏界面动效设计，该做些什么？

1， 交互效果动态预演

帮助从创意到落地的核心流程

2，“控件层”特效

思考元素一致性与设计配重

3，“氛围层”特效

不影响内容阅读，不混淆交互状态

4，界面动效制作

“转场节奏感”、“动画分镜能力”以及“空间想象力”

以上，希望能对你有所帮助。

这是我的动效专题第一篇，未来会围绕如何才能做好界面动效继续分享。

所以，欢迎关注公众号，也感谢多多转发，阅读量是我更新第二篇的动力。

杨曦  游族网络UEDC

微信：un-magic

专注游戏用户体验设计10年

曾任职网易、腾讯、畅游

Powered by Froala Editor