游戏界面动效的4项专业职能

用户头像
深圳/交互设计师/6年前/1987浏览
游戏界面动效的4项专业职能

先清楚做什么,再聊怎么能做好。


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


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


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


阅读之后可能带来收获:


· 团队管理者:业务逻辑更清晰;

· UEDC成员:与动效设计师合作更紧密;

· 动效设计师:建立更高岗位价值目标。



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

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



职能一,交互效果动态预演

针对一些创新性较强交互效果,制作一系列动态演示。


用于帮助项目对设计交付物的判断,同时也给前端程序提供更准确的制作参考。


2014 | 《无双》交互演示



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


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


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


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



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


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


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


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


行云流水的界面体验,谁不向往呢?



职能二,“控件层”特效

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


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


条形按钮效果

    


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


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


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


1,沟通需求,明确特效等级诉求;

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


常驻状态效果



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


实际工作中的错误案例:




职能三,“氛围层”特效

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


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



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


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



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


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




职能四,界面动效制作

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


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

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



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


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



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


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




★ 动画分镜能力

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


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



★ 空间想象力

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


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




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




总结

游戏界面动效设计,该做些什么?


· 交互效果动态预演

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


· “控件层”特效

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


· “氛围层”特效

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


· 界面动效制作

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




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


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


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




关于作者

杨曦 · 游族网络UEDC

专注游戏用户体验设计10年 | 曾任职网易、腾讯、畅游


52
举报
|
78
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
海底世界插画
金色颗粒质地的平面
古风平面仕女与瓷器
空的平台平面和自然景观
课程海报,平面素材
平面书法字手写
金色颗粒质地的平面
平面插画设计女孩喝咖啡
城市园林平面布局航拍
金色颗粒质地的平面
平面设计 吊牌设计
空的平台平面和自然景观
倒计时,海报,平面
平面男孩喝咖啡插画设计
牛奶乳液层次梯田平铺平面
平面花卉图案扁平简约无缝拼接插画
“知识宅急送”外卖,快递,平面,海报,素材,教育
金色颗粒质地的平面
学习,优惠券,平面,海报
中国传统纹样创新图案设计
玄关入门地毯印花图案红地毯
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
牛奶乳液层次平面平铺平面
城阙凡花
水蜜桃和李子的平面水果图案
你可能喜欢
相关收藏夹
大家都在看
登录注册