界面中的动效与特效

96
UXplayer
2016.08.16 15:51* 字数 2401

在日常工作中,对于游戏里那些所有会动的元素,可能我们大多会统称之为动画。
老板、玩家这么说当然没问题,然而作为设计师,我以为至少在意识上,还是应该细分一下:

动效:过渡动画
特效:反馈动画
模型:模型动画

由于模型与一般意义上的界面关联不大,这里不做讨论。只谈动效特效的区别


分工上与区别

  • 动效是用各种原型工具(Flash、Axure、Principle等)做出演示效果,给程序一些参数,最终完全由程序代码来实现的效果。

比如:透明度变化、放大缩小、旋转等,各种补间动画……

  • 特效则需要更美术向的工具(AE、Spine、Particle等)来制作序列帧特效文件,程序所做的通常只是控制这个特效文件如何播放(对于网页来说,可能由于JS和CSS3的动画太强大,还是由程序来做的……)。

比如:玩家升级时,一道亮瞎了的金光闪现……

设计目的上的区别

过渡

动效的主要目的是:过渡

要让玩家注意不到动效的存在

各种状态、界面之间的切换过渡时,通过加过渡动画,可以使这些过程更柔和、更自然。
拿出你的手机(最好是iPhone),仔细看看那些系统自带的功能,每一步操作带来的变化都会有(看起来)非常简单的过渡动画。

比如打开App时,这个App的界面会以该App在主屏上的图标为起点,有一个放大出现的过程。
你说这个效果太醒目了、早就注意到了?
苹果其实也意识到了,在「设置-通用-辅助功能」里有一个「减弱动态效果」的选项,减弱之后的效果是简单的淡入。注意,只是减弱而非取消,优秀的设计绝不会是完全没有动效。

由于这些动效的目的仅仅是为了过渡,因此在设计时需要低调,不宜抢眼。动效耗时也不宜太长,尽量控制在0.3秒以内。 (除非是加载、通信等时间可能会很长的过程,那就还需要在动效过程中考虑到loading的设计,这又是另一个可以展开很多很多的话题了)
如同界面设计的最高境界一般:只有当一个界面的体验不好时玩家才会注意到它,真正设计得当的界面在实际使用中是无形的存在。真正设计的好的动效也应该是无形的存在。

引导

除此之外,通过动效在视觉上对注意力的吸引力,还能起到一定功能引导的作用

典型例子:
新手引导中的移来移去的指示箭头。如果没有位移过程、直接出现,可能会导致玩家注意不到这个箭头。
(题外吐槽:很多软件、网页的引导经常犯这个错误,包括淘宝、百度这种公司的产品。在他们的页面改版引导中,有时这一步指着左上角、下一步瞬间到了右下角,然而由于缺少视线引导、没注意到引导位置的变化,还以为引导结束了、网页卡死了……)

奖励

特效的主要目的是:反馈奖励

需要吸引玩家的眼球,让玩家注意到

所有的操作都需要反馈,但某些操作的反馈,更需要玩家注意到。
一些非常需要注意到的提示信息,其实早已经从升级到一个独立的反馈界面了。
通过特效来传达的,通常是一些视觉奖励性质的反馈。
当玩家在获得奖励时,配合上抢眼的视觉特效,可以强化玩家对这个奖励的认知,放大奖励的价值。
这一点,其实我们国产页游做的是非(过)常(分)到位的:

完成任务,Duang一下
获得装备,Duang一下
人物升级,Duang一下
学习技能,Duang一下
总之就是Duang~ Duang~ Duang~ 各种特效

你可以吐槽这些特效的5毛品质,但他们确确实实能达到目的、让玩家意识到这些奖励有价值。
然而由于现在大多数游戏对这些特效使用得太泛滥了。原本应该是考试前划重点,结果划了一整本书,对学生而言,等于什么都没划,依旧一脸茫然。

趣味

除了奖励性,这些特效还可以增加游戏的趣味性。

最著名的要数炉石传说里那些广受好评的可点击的背景元素了。

并且现在越来越多的软件、网页也在增加这种趣味元素

比如 Twitter 大火的点赞反馈特效

开发优先级的区别

然而理想和现实是之间有着一条难以逾越的鸿沟。
这些动效与特效,都是需要开发成本的。对于时间、人力充裕的团队而已,可能不是什么问题。但对于我们这种赶时间的小团队而言,不得不考虑实际项目进度,做出很多取舍。
在前文中我把动效和特效又进一步各分了两类,这个分类也是考虑开发优先级时的一个重要因素。
在我看来,可以按这个优先级来进行开发。

引导性动效 > 奖励性特效 > 过渡性动效 >>> 趣味性特效

  1. 引导性动效
    这是最重要的一部分,尤其是对于游戏新手期玩家会接触到的一些系统。
    这部分动效往往起着教学的作用。在优化前期新手流失数据时,增加、改进一些引导性的动效,常常会起到不小的作用。
    因此这类引导性动效是首先需要完成的。
  2. 奖励性特效
    依然是考虑到新手期。游戏的体验讲究一个 Flow,像电影一样要有起有伏有高潮。
    获得新英雄、获得新的牛X武器,这种在都属于 Flow 中的大高潮,用特效来强化效果会更显著。
    完成一个任务、获得一个普通的物品,这种原本不算高潮的点,通过加特效,可以带来一些视觉上的刺激,形成一些小的高潮,使体验过程不会太平淡。
    但就像之前提过的划重点问题,这类特效虽然很重要,但也要适量。
  3. 过渡性动效
    这类动效,看起来是简单,但程序开发未必简单,经常会对界面的结构影响比较大。
    花费很大的精力添加这些动效,对玩家而言只是「就应该这样,没什么特别」的,在温饱线都尚未达到的时候,就让程序投入过多精力来做这些,确实有点奢侈。
    一个比较粗暴的折中方案是——只要程序开发时觉得有难度、比较耗时的动效,全部改成淡入淡出。至少会比没有动效强。
    只是一款游戏想要达到一个比较高品质,非常需要积累这些精心设计过的动效。只能说尽量去做吧,时间和品质,实在是一对难以调和的矛盾。
  4. 趣味性特效
    虽然这类特效是最适合给设计师来开脑洞、发挥创意的,因为没有特别功利性的目的。
    但也正因为没有功利性的目的,只是锦上添花的内容,优先级也只能放到最后了。

最后

如此细分特效与动效,不是为了咬文嚼字或是为了强行割裂这些不同类型的动画,而是为了更深入的去了解它们。
实际工作中,特效、动效更多的时候都是交织在一起的,需要结合起来考虑设计。
因此我们要考虑的那个最终展现给玩家的效果,确实就是整合后的动画。


更多我在「游戏/交互设计」副本中的捡到的战利品

Design Thinking
Web note ad 1