动效“反馈”设计方法

发表于2023-01-09
评论0 7k浏览
640?wx_fmt=gif

 

640?wx_fmt=png


 


 

​游戏界面中的“反馈”指的是游戏界面针对玩家的每个细微操作所做的反应和无操作状态下的主动唤起动作,以期待玩家有所反应的动态设计。即分为主动式反馈和被动式反馈两种形式。


 

在进行反馈式动效的设计时,有很多具体的设计方法,本文列举其中几种常见且有效的形式。简单的说是:抖、炸、摔、碎、光、拆七种形式。


 

抖,指的是抖动。这是一种常见的主动式反馈动效。通常会配合特效进行设计。基本上使用如下图所示的曲线,使主体保持规律的旋转抖动。协同的特效一般是闪动的光效,和抖动动作保持同一循环节奏。这种效果在整个界面内比较显眼,容易引起玩家注意从而会引导玩家去点击。因此这类动态效果往往用于“满足一定条件后领取”的交互节点上,其模型效果如下下图所示。


 

640?wx_fmt=png


 

640?wx_fmt=gif


 

炸,指的是原地释放。即图形元素本身不会发生大的变化,但会用周围或者震出的方式表现炸裂的感觉。这种效果往往需要配合特效光去表现。整个的节奏显得比较有力量感。常用语表现“获得”类的提示。其模型效果如下下图所示。


 

640?wx_fmt=gif


 

摔,指的是从画外摔入。这个画外往往指的是玩家的眼前。有时候则是画面上方。这种用法和上一个性质一样,只是同种情绪的两种表现形式。其主体的曲线如下图所示,模型效果如下下图所示。


 

640?wx_fmt=png


 

640?wx_fmt=gif


 

碎,指的是原地破碎。但未必是本体破碎,而是想像本体有一层玻璃包裹,在特定情况下这层包裹炸开破碎。它一般被用来表示解锁,突破等含义。这种效果一般会配合粒子使用,粒子会向四周炸开,保持初速度很快,但速度逐渐衰减的运动效果,如果想要一些细节的话,还可为粒子增加细腻的透明度变化和重力,以使它们的出生和灭亡都比较自然,且运动方式比较真实。模型效果如下图所示。
 


 

640?wx_fmt=gif


 

光,就是合理使用光效。上述列举的几个效果都可以和这一效果配合使用。但此处单列一条指代的是单纯使用光效去表现一些效果,比如流光。这种效果一般表示刷新,或者新的物件,一般会用循环态,直到玩家有相应的交互行为后才会结束动态效果。相比于“抖”,是一种相对较弱的形态。其模型效果如下图所示。
 


 

640?wx_fmt=gif


 

拆,从字面理解是拆开,但这里的含义正好相反,指的是将一整个控件以零碎的方式重新进行组合。这个效果比较特殊,它看起来会比较像入场动画。但如果在整个界面中,只有一个部件拥有比较复杂的拆解动画的话,它的持续时间就会相对别的部件较久一些,综合起来就会更加引人注目,从而增强它的视觉重要性。所以此处将它归类为主动反馈类型的动效中。它主要用于徽章类的效果,没有固定的模型效果,但可看复杂的范例如下图所示。
 


 

640?wx_fmt=gif

手游《机动都市阿尔法》S2赛季的logo入场动画,就是对logo图形的一种拆解重组动画,也组合了“光”的表现手法。


 

上图这种动态表现实际上可以非常丰富细腻,毕竟属于内嵌视频类型。在引擎内界面动效虽然很难做到同样的效果,不过基本的结构拆解和流光、粒子等效果还是能表现出来的,比如下图所示的《使命召唤手游》S4赛季界面右侧,在界面转场时的拆解动效。其实,如果放宽各项性能限制,这类动态在引擎内做到视频的设计效果也不是不可能。


 

640?wx_fmt=gif

 

闪,就是突然出现。通过制造突然性来引起用户注意。较常出现在科技类的界面中,如下图所示。


 

640?wx_fmt=gif

《赛博朋克2077》中的“新联系人添加”tip,基本由闪动动画构成,效果极其显眼
 


 

也有一些不太突然的,但“情理之中意料之外”的效果也可以认为是这类效果,如模仿镜头转场效果的动态效果。这种效果虽然在表面上并不具备突然性,但在预期上造成了突然性。典型的范例如下图所示。


 

640?wx_fmt=gif

《使命召唤手游》中的一个新皮肤宣传弹窗,这个弹窗通过几个面片的运动虚构了一个镜头转场的效果,构建了简单的有故事性画面,是一种“闪”的提示效果。


 

这就是七种较常用的反馈动效的设计形式,根据具体情况的不同,有单独使用也会混合使用。希望能给你带来帮助。

 

 

640?wx_fmt=gif
  • 允许他人重新传播作品,但他人重新传播时必须在所使用作品的正文开头的显著位置,注明用户的姓名、来源及其采用的知识共享协议,并与该作品在磨坊上的原发地址建立链接
  • 不可对作品做出任何形式的修改
  • 不可将作品进行商业性使用

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

标签: