【游戏动效】动效在UI交互中的作用(下)

1461天前
转载文章 / UI / 动效设计 (本文章为转载文章,如果若您的权利被侵害,请联系管理员删除的)
7296
0
4
 | 
作者:鸭鸭鸭鸭 鸭鸭鸭鸭爷有话说

2-2

·持续时长


持续时间不宜过长,以避免浪费时间,影响阅读和操作效率。


下面有两方面会具体影响持续时间的取值


一方面会受到元素的大小,动效的复杂程度影响。


另一方面也会受到动效的目标和运行动效的设备影响。


小元素的轻微变化效果(如渐隐渐现,大小变化等小范围的变化)一般在200-300毫秒之内。


较大元素的复杂变化效果(如包含大范围缓动位移)可长达400-500毫秒。


1666771465583451_16.png


1666784227382692_0 (1).gif


较快的动效更容易吸引玩家注意力,也更节省时间。


为了吸引玩家注意,可使用在短时间内变化较大的动效(如发生位移或者速率改变)


较慢的动效较少分散玩家的注意力,更适用于非直接触发类的。


若动效不是玩家直接触发的,不希望玩家注意力被转移,可使用在长时间内变化较小的动画。


1666771467249435_18.gif

(口袋铁拳)


1666771467789153_19.gif

(WatchDog2)


另外,不同设备的屏幕尺寸不同,理想的持续时间也不一样。对于移动设备而言,屏幕越大往往动画的位移也偏大,因此持续时间也应该越长。


1666771468167141_20.gif


出场动画一般比入场动画更快。

(如当入场动画为230毫秒时,出场动画可设置为200毫秒)


这是因为入场时玩家需要阅读和处理一些信息过渡,而出场时一般表明玩家已达成目的,不需要再关注了,快速出场可以给玩家节约更多的时间。


1666771469423144_21.gif

(P5)


1666771470164914_22.gif

(Gigantic)


3

自然流畅


保持视觉连贯性,缓动过渡,做到不卡,不闪,不跳。


在动画中常用的属性变化有


位置(Position)大小(Scale)旋转(Rotation)透明度(Opacity)这四种基本属性变化。


而要做到具有连贯性,缓动过渡的话,就要涉及到这两种运动模式。

线性(LINER)

曲线(CURVES)



3-1

线性变化


线性变化有均速和骤停这两个特征,一般适用于与物理属性无关的过渡动画或者是有规律的加载动画。


在与物理参数有关的变化中(特别是位置变化)尽量避免使用线性变化,否则很容易很人带来僵硬不自然的感觉。


1666771470581577_23.png



3-2

曲线变化


在交互动画中,缓动曲线(Easing)的应用范围最广,效果最自然,对玩家的干扰也较小,多用于与物理属性相关的属性变化中。


166677147070438_24.gif

(通过曲线变化来 模拟不同物体的 运动规律)


1666771470795346_25.png


1666771471393825_26.gif


1666771471395262_27.png


1666785524325181_0 (1).gif


1666771471671099_29.png


1666785687616566_0 (1).gif


还有其他的一些常用手段。


比如有:偏移与延迟、父子关系、视差、维度变化、景深等



为什么要做特效


反馈性


保证玩家与游戏之间有一定的交流,即使是最基本的操作。所以,一定程度上来讲,这类动画是模仿真实世界中人类与物件之间互动的一种方式。


比如:按钮,按下去的作用力和反作用力。



趣味性

没有功能性的目的,提升画面精致度与丰富度。


效果upup


1666771472921766_31.gif


1666771473607671_32.gif


1666771475603631_33.gif




总结交互动效的作用


交互动效以功能性为主,须遵循克制有度、清晰聚焦、自然流畅这三个核心设计原则、加上特效辅助。



在设计前,思考希望如何影响用户的注意力、动效的目标是什么、动效出现的频率和触发机制是怎样的。



在设计时选择合适动效类型和持续时间并关注反馈的响应时间,做到有理有据、令人信服。



— End —


声明:乐魔UI(Lemooui)内网友所发表的所有内容及言论仅代表其本人,并不反映任何UI(Lemooui)之意见及观点。
举报
收藏
文章-动效设计
7296
0
4
标签
没有标签
全部评论
发表评论
设置密码
注册会员
我已阅读并接受《乐魔UI协议》
微信登录
二维加载中...

使用微信扫一扫登录

“乐魔UI”

建议反馈
提交取消
举报
提交取消