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

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

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


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


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


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


阅读之后可能带来收获:


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

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

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



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

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



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

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


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


2014 | 《无双》交互演示



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


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


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


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



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


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


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


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


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



职能二,“控件层”特效

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


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


条形按钮效果

    


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


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


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


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

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


常驻状态效果



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


实际工作中的错误案例:




职能三,“氛围层”特效

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


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



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


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



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


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




职能四,界面动效制作

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


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

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



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


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



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


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




★ 动画分镜能力

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


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



★ 空间想象力

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


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




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




总结

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


· 交互效果动态预演

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


· “控件层”特效

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


· “氛围层”特效

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


· 界面动效制作

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




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


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


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




关于作者

杨曦 · 游族网络UEDC

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


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