游戏快报

一些头部产品的美术设计,已经卷到玩家很难察觉的地方了


编者按一个优秀的界面设计,会让游戏增色不少。


例如过去一段时间,葡萄君曾分享过《集合吧!动物森友会》《英雄联盟手游》《NIKKE》等游戏界面和动效设计的分析文章,在我们感叹这些设计流畅顺滑、细节满满时,却发现实际上更多厂商很难兼顾到这些东西。



《英雄联盟》特有的「海克斯科技」视觉风格


没办法,目前游戏界面动效的开发岗位稀缺,很多人不太了解完整游戏项目流程中动效的特有开发流程。其次,每个公司甚至项目组情况都不同,统一且能复用的动效开发流程标准基本不存在。


不过,动效自有其规律,这意味着动效开发流程其实是有一个「基础模型」的,并且所有已经在运行的动效开发流程,基本就是在这一「基础模型」上的魔改或者优化


因此,本文作者将基于这个「基础模型」,为大家介绍游戏界面动效开发的固有流程模式,并提出兼顾界面效果和工作效率的工作方法。


此外,如果讨论到的情况与项目实际情况有比较大的差异,那说明你所在的流程很可能有问题,或者你的开发环境有非常特殊的情况。





01 流程概览


在游戏项目开发流程中,相对标准或者大部分开发环境中的动效岗位,主要需要负责的工作,大致可人为划分为两块内容:


一个是界面动效的效果设计,产出物一般是视频。以往还有高保真可操作模型类产出物,不过主流上以视频为主,我们称其为动效预演。


另一个是引擎重构,即将设计好的效果原样复原在游戏引擎中。目前涉及到的主流引擎是Unity和虚幻4(虚幻5),少数厂商会使用Cocos和其他自研引擎等,根据实际情况会有比较大的差异。


从这一现实状况出发,客观上动效设计师除了需要掌握设计能力,还需要掌握引擎内动效还原的相关操作技术。


这两步相当于游戏界面设计师在PS等软件中产出界面设计稿和在游戏引擎中将其原样拼好(界面重构)


不过在条件允许的情况下,大部分项目中的游戏界面设计师一般不会被要求做重构工作。毕竟界面重构涉及到前端逻辑、节点结构等比较繁琐的问题,需要极大的沟通和理解成本,对设计师来说是一个不小的时间和精力成本。在成本、人力或者项管水平有限的情况下,一些项目要求设计师做重构的工作,看似节省成本,实际上造成一些隐性成本,总体上拉低了效率。


因此很多项目会设置专门的界面重构岗位来衔接设计师和前端之间的工作量,以提高整体工作效率。


简单地说,界面动效的预演产出物等同于界面设计师的静态设计稿,而动效重构则相当于界面重构产物。


目前的动效工作并不总保持上述两线并行,这是受项目周期客观规律影响的。


在效果设计中,动效设计师所设计制作的动效预演,并非只注重效果而不注重可落地性的“空中楼阁”。这些“设计稿”同界面设计稿起到同样的作用,那就是提前以最小成本让大家看到游戏运行起来时最可能的样貌。以及进行设计风格的探索和制定。


在“空中楼阁”和“可落地性”之间,是对引擎中界面结构和运行逻辑的深刻了解。设计师需明白什么样的结构拆解是可能被实现的,什么样的效果是在可接受的范围内的。以这个基点出发才有可能设计出切实可落地的方案。而不纯粹是单纯的效果视频。


在确保这一点的前提下,动效预演相对于直接在引擎内设计效果的效率优势非常明显:只需要界面设计稿的源文件就可以相对快速的产出一个操作流程效果。如果在引擎内直接设计,将会涉及到切图、程序逻辑以及版本打包等等流程,一整套流程下来涉及多个人力和时间上的协调工作,如果需要修改效果,整个流程可能还要跑一遍,这样的成本显然较高。


这是需要项目前期花费大量精力在动效预演上的根本原因。我们可以将效果确定好之后,再跑成本更高的流程,相对快捷很多。


因此项目前期动效设计的主要产出物就是动效预演。当动效和界面设计的风格趋于稳定时,动效设计师就可以着手将预演中的特定元素进行提取,制定出初步的动效设计规范,指导和规范后续的进版工作。


当项目进入到铺量阶段时,有了这些既定规范的指引,无需再花费时间在所谓“风格探索”上时,就可以直接套用既有的设计类型,在引擎内直接还原。遇到少数特殊页面时,才会单独去制作预演,探索特定的细节风格或者操作流程。


至此,我们以项目的整个开发周期为着眼点,可以看到动效进版流程的一个概览如下:




02 动效预演


上文提到,在游戏项目开发的初始阶段,动效的工作主要放在“动效预演”的设计和制作上。


这样做的目的是用最经济的方式去预览最终的效果。项目初期的动效预演工作可以大概概括为以下图表内容:



动效预演的目标有两个:探索动效的风格和制定初步的动效规范。如果界面视觉的迭代仍在继续,则始终围绕前者去做,直到视觉风格稳定。


假设视觉风格趋于稳定,则这两步应该按照以下次序渐次展开:


1. 探索动效的风格


这一阶段我们称为“第一阶段”,包括三步。


第一步是最初步的工作,这时候你拿到了最原始、最初步的设计稿,并在这种初始稿件的基础上设计动效效果。


此时主要考虑风格问题,即什么样的动效设计可以完美的延伸视觉设计要表达的情感,要营造的氛围等,属于“纯创作”阶段。可以比较少考虑最终的落地可能性,可以认为是一个复杂版本的动效脑暴。这一步的设计稿会经历最多频次的修改直到有比较满意的版本。


与此同时,界面设计稿也逐渐铺开。按照正常的项目开发阶段,此时项目应该已经完成了最小玩法循环的验证在有些公司里,最小玩法循环的验证在立项之前就应该完成,开始为项目定制对应的界面设计。最初的稳定风格版本的界面设计稿也首先是为最小玩法循环定制的。与此同时,在动效设计层面上,为了探索整体、系统性的风格,也需要设计出最小玩法循环的动效预演,这属于第二步。


这一步的动效预演的特点:拥有完整的玩法循环,包括主流控件、主要转场形式、一般应包括全部高中低情绪界面。这一套预演应该为完整的视频,有时会为有特点的分支操作专门再设计预演,以补充完整的动效风格材料。这些材料为后续迭代和抽离设计规范准备了充足素材。


下方视频就是一个最小玩法循环的动效预演,与实际项目相比还不是那么完整,但可以一窥“最小玩法循环预演”的大致样貌。


欧型兔


第三步是第二步的打磨,如果认为第二步是扩展的话,第三步就是收缩。对明显不可实现的、明显损耗过高的等不经济的设计进行剔除。然后通过取巧和其他设计形式进行替换后,制作出完整可实现的动效预演版本。


2. 梳理初步动效设计规范


在上述第二步和第三步过程中,动效设计师应同时有整理初步规范的意识。


此时的设计规范只是个初步的雏形。不要妄想一次性整理出完整、无懈可击的设计规范。这一点和界面设计过程中逐渐产生的设计规范有同样的规律。但主要应该包括开头图中展示的一些基本元素。


在整个动效开发流程模型中,我们将整理初步规范这一块工作,称为第二阶段。该阶段与第一阶段是交叉并行的。


在这两个阶段都已经基本完成后,就意味着项目开始进入到铺量阶段。动效工作就会进入到快节奏的满需求状态。如果前期的工作流程在此时打磨到位,后续的铺量效率将非常惊人。


应注意的几点:


1.如果前期界面设计经常迭代、推倒重来,动效就需要重复以上工作。作为后置流程,动效需要时刻关注前序流程的完成状态以及需求流转状态,以便随时调整工作状态。


2.项目前期通常是一个非常“无头苍蝇”的状态,需要来回修改很多设计,这在无论哪家公司都是存在的,不用将其看做太大的问题。毕竟项目的初始阶段,大家对具象化的东西,认知都还比较模糊,很多都还停留在想像中,实际产出的东西未必都能符合想像。再加上通过少量的用户CE等市场数据检测,也会通过搜集玩家数据来进一步改善。


3.这一阶段如果持续过久,会导致非常严重的一系列问题。这可能透露出项目的设计者们没有明确的方向,有明确方向的项目往往会在短暂的混乱后迅速理清思路。


4.动效预演的目的是寻找风格的可能性以及为最终落地做准备。设计样式与设计规范都服务于这一最终目的。脱离这一目的的任何行为都将是无用功。


5.预演的设计和制作基本上集中在项目前期,中期与后期将不再是动效工作的主要工作内容。但一些特别的系统,如活动系统、BP更新等,在后续流程中仍需插入预演设计流程。


6.项目前期的工作除了技术性的探索之外,还需要设计师与诸多岗位配合,打磨出适合自己项目的工作流程,这一打磨过程应在项目进入铺量阶段之前完成。否则会造成项目中后期开发效率的严重折损。


7.预演的形式和内容都是根据项目、公司或设计师个人的实际情况决定的。主流上以AE等视频或特效软件制作预演,是因为在绝大部分情况下,这些软件的“效果VS时间”效率较高,如果设计师在某些特定的软件甚至是引擎使用上拥有同等或更高效率,则不必限于某些特定软件或形式。




03 流程打磨


这里的流程指的是最小需求单位内的流程。


这个流程是构成整个项目周期内动效开发流程的最小单位。如果这个流程一直没办法确立,将会导致全局更加混乱,效率更低。


根据动效工作的客观需要,我们可以推导这一最小需求单位的流程模型为下图所示:



毋庸置疑的,动效的工作需要以拼好的界面为基础来展开,因此动效的工作流程应该以“界面重构”的起始点为起始点。


客观上每个界面都需要前端进行基础设置,并将界面设计师设计好的设计稿“进版”,整个界面进版的过程简称为界面重构。而后才能交予动效进行界面动画的引擎内制作。


如果我们倾向于将整个流程设计为最高效的模式,那么上图所示的整个流程中,理想的情况下,拼界面应该由专人负责。


原因在于:


其一,拼界面需要将设计稿进行合理切图,这是一个需要理解设计稿和切图规范的工作,理论上界面设计师本人最了解这一工作,但通常界面设计师的工作侧重点不在此处,且较为繁琐的工作容易牵扯设计师大量精力,导致客观上并没有余力去高效平衡各项工作;


其二,拼界面需要对游戏引擎有一些了解。但游戏引擎的功能庞杂,每个岗位的理解深度都是基于各自岗位的需求的。前端、重构和动效所使用的功能块面完全不同。这是个不可忽略的学习成本。


为解决这一问题,通常会有几个解决方案,这些方案也可以看作是从低效到高效逐渐演进的几种模式:


第一种是界面设计师切图,然后由前端进行拼接。这种模式好处在于切图的规范出问题的概率极低,我们会默认为界面设计师在这方面是非常专业的。但问题是前端对设计的不敏感,会导致界面还原度偏低。设计师一侧需要输出大量辅助材料,如标注图甚至是图层结构示意图。在后续的走查并修复还原度上耗费大量时间精力;


第二种是由界面设计师或者交互设计师自己去引擎内拼接界面。这样做是对第一种模式的修正,界面和交互对视觉的敏感度高,可以大幅提升界面重构的还原度,但问题是需要两者花费时间去理解和学习引擎。并且在日常需求处理的基础上,额外增加了进版流程,会让他们的工作压力更大,这可能直接影响他们的单位时间产出质量;


第三种是设置专门的界面重构岗位。这种岗位的基本要求就是既理解界面,拥有对界面设计的视觉敏感度,又具备比较熟练的引擎操作基础仅限界面这一模块。他需要具备界面设计师在切图方面的专业性,也同时需要具备前端在界面进版方面一部分的专业能力。是两者过渡部分的一个完美衔接。


目前看来第三种方式是解决界面重构质量和效率的最佳解决方案。但很多公司限于开发和人力成本,依然大量驱使界面和交互去做拼界面的工作,这使得有些公司或者项目中的动效流程有较大不同。


正如本文开篇所展示的动效工作流程模型所示。拼界面只是动效的准备工作,虽然其自身也要考虑还原度和程序逻辑挂接问题,但最主要的,那些视觉上不可见的,拼接的节点结构也会影响动效设计的表现。


最简单的,当你设计为拆分了的图形被以一个单独切片拼到引擎内后,动效就需要等待拼界面环节重新拆分拼接后才能开始工作。这也是整个流程内加入“确认”环节的主要原因:在一定的条件下,需要打回重做。


当我们预备建立一个高效流程时,就应该假设这种打回重做是频次较高的行为。此时如果不是一个专职的人员在执行拼界面的工作,那么他在高频次打回重做的过程中面临的不仅仅是大量沟通成本,还有极高的心理负荷。这对整体流程的提升是没有任何益处的。


当然,如果客观条件限制,动效不得不经常与非专门岗位的人去沟通类似的问题,就需要考虑去建立符合自己实际情况的流程。


比如,可以在界面重构开始之前就讨论好具体的节点结构,或者制作好动效预演,让大家直观的看到你所期待的界面层级拆分方式。


甚至于,动效可以参与到界面重构的流程中去。但是本文依然倡导的是专人专事,这样有利于整体效率的提升。只有效率的提升,才能给各个垂直岗位留出足够多的时间去打磨出更好的质量。虽然每个环节的质量提升加总不一定等于项目整体的质量提升,但至少我们可以快速落地方案,也就为快速试错准备好前提条件。这也是整体项目取得较高质量或者获取市场成功的基础。


另外需要明确的一个事情是,在每个项目的初期,尤其是在开发经验不足的团队中,这种基本的流程往往是不存在的。流程其实是靠打磨形成的。所谓的打磨其实就是依照理想的模型,在现实运作过程中去摩擦、沟通,通过数次失败逐渐建立的成本最小、效率最高的工作方式。


动效本身就是一个沟通上下游的工作:需要去跟界面设计师沟通界面设计的含义、去跟策划了解整个系统的功能、去跟前端聊低成本的实现方案、去跟PM协调时间安排等等。在不同的岗位和环节中去协商,本身就对动效设计师的沟通能力有很大的要求。


不仅要对流程设计的初衷,即高效,有所坚持。也要深刻领会各个岗位的工作特性、基本逻辑。更要能够长袖善舞,根据每个人的性格特性,去推进你的工作。


当然,流程是否能够落地还要看各个环节是否因此受益。如果你的流程并没有让每个人感觉事半功倍,那不仅无法推进,反而应该考虑方案是否周全,以及这一切是不是大家协商的结果。


04 设计规范


动效预演设计并不是空中楼阁,而是为后续的动效工作做准备的。


这些准备主要包括两点:动效风格探索和动效规范的制定。


其中动效的规范制定又包括两个方面:纯设计向的规范与进版规范。


纯设计向的规范包括当前所定风格中的细节。将感性的设计转化为理性可复制的元素,确定边界并且保证品质的稳定。


这类规范根据项目的具体情况和设计组自己的习惯,具体形式多变,但大致上都包括以下内容:


1.基本控件的动态形式;


基本控件包括了常见的和通用型控件,它们的动态形式比较固定,因此可以指定固定的动态样式。


比如“返回按钮”的进出场形式、弹窗、tip的入场形式等。由于这些控件并不一定是由单独的元素构成的,因此它们的动态规范往往相对复杂,会涉及其构成元素的动态次序以及对应的动态曲线等属性。


2.基本曲线使用规范;


与通用控件比较类似的,常用的和通用的动作曲线也可以作为一种规范元素。这样做的好处是可直接复用,从而节省重新探索的成本。但动画曲线的使用情境极为复杂,基本曲线的规范不可能完全覆盖系统内所有界面中所有元素的所有使用情境。这类规范一般只覆盖到通用的情境,可以与通用控件(基本控件)的动态规范混合制定。


3.基本布局动态形式;


界面的不同的布局形式本质上是由界面的交互功能决定的。因此类似的界面布局理论上有类似的功能需求。由类似的功能需求生发的动态设计也是相似的甚至是完全相同的。为这类相似的布局形式制定动态规范也是必要的。


实际上,除了一些极为特殊的案例之外,游戏界面系统内的界面布局基本上是固定的几大类构成的,如顶栏构成、左右布局、左中右布局等等。通过制定这些比较通用布局的动态规范,可以覆盖到绝大部分的布局形式动态设计。


4.转场形式与使用要求;


游戏界面系统内的转场形式与各自页面间的跳转关系、功能表现以及情绪表达都有直接关系。这些都生发自原本的功能设计。因此一个游戏内绝对不止一种转场形式。但是一定是分属不同类型的,动效的设计规范就一定需要去严格根据不同的功能设计去制定对应的转场形式。不管是项目初期的铺量还是后续的延展,依据这样的设计规范,即可有理有据的展开设计。


5.全局使用禁止项。


在一些特殊情况下,设计师可以在设计规范的范畴外进行自由发挥,创造出特殊类型设计。典型的如活动类界面、BP的外围包装等。但整体上应该符合游戏本身的调性。这种调性是由游戏本身的美术风格、动态层面的曲线与节奏设计共同构成的。因此严格来说,这种自由发挥也是在设计规范的范畴之内的。但如何区分设计规范的边界,就需要指定一些全局禁止项。


进版规范则根据项目不同有很大的差异。包括但不限于程序侧的节点规范甚至有比较详细的节点命名规范、材质命名规范、资源路径规范以及跟具体落地技术强相关的一些细则。通常来说进版规范不会形成规模庞大的文档系统,而是会被分散在不同职能部门的相关工作规范中。


进版规范目的有两个,一个是保证设计还原度。这需要根据纯设计规范中提到的相关元素去把控。如曲线和节奏次序,在引擎内就需要严格按照设计规范提到的数值进行设置。


另一个是保证项目的资产管理有序,提高基于此的工作效率。有些项目中会严格规定相关资产的路径,如贴图、材质和预设等都有固定的路径。这一方面会方便查找,另一方面,程序会设置一些固定的引用脚本,这里边的路径一旦发生改变,甚至只是没有按照规范去对相关资产进行命名,都会导致引用失效,从而报错。


对应的,节点的命名规范也是类似的道理。既方便检索,又方便程序按照固定的命名方式去引用。即便出现问题,也可根据命名去定位问题。


具体的规范制定是一个逐渐演化的过程。也是项目内部人员磨合的一个过程。从来不存在一个一蹴而就,瞬间完成的规范。因此在这种事情上,设计师们也应该有一定的心里准备,这是一个持久战,而且是需要足够细心的持久战。


05 流程规范


在动效开发流程中,一些成文形成文档和详细的指导手册类的设计规范可以辅助整个流程参与环节搞清楚品质的下限。但是脱离开具体的执行流程,一切都会成为泡影,所有的文档都会成为一纸空文。


因此团队的协作过程需要约定俗成的流程规范。尤其在开发量极大,工作量极多的阶段,依赖成熟的流程规范,可以节省大量沟通成本,在保证品质的基础上,可以成倍提高团队协作效率和开发效率。


具体到游戏界面动效的开发流程中。我们主要基于几个环节的客观工作流转的需要,制定相应的工作流程。这种流程在具体的执行层面有很大的不同。但是可以根据客观需要总结出可套用的模式如下:


所有的版本内界面都是以界面设计稿为基础开始的。所以动效开发流程的第一步就是界面的进版。


界面进版需要规范的切图,基于前端的基本逻辑架构去“拼界面”。高效的工作流程中,进版是由专门的岗位完成的。


此后前端会检查界面进版后的问题,如有无节点影响程序逻辑等。检查无误后就会交给动效设计师去进行动效进版的工作。动效根据相应的设计规范或者现成的预演,将动效进版之后,再次交给前端检查。此时检查内容与界面第一次进版时类似,额外增加检查因为动效进版而修改新增的内容。


偶尔情况下,在动效进版时或者之前,需要动效根据设计效果去给TA提请相关的材质需求。这一般涉及一些特殊效果或者项目初期的一般效果,如流光材质、粒子效果等。如果进版速度过快,TA验证相关方案不及时时,可以动效先行,待TA问题解决后再行解决剩余问题。


前端检查无误后就需要运行游戏,进一步检查进版的界面和动效有无其他问题。这时除了涉及一些设计预期与实际操作体验之间的差距,从而需要一定程度修正设计方案之外的基本问题外,还可能涉及性能问题。但一般性能类的问题综合了前端、TA和其他技术类岗位的工作,且都一般集中在项目的前期。如果遵循固定的工作模式、相关规范,则越到后期这类问题越少,大家越能集中精力在具体的小细节修正上。整体的效率会越高,流程就会越来越通畅。


如果此一阶段检查出相关问题,就需要将相关问题打回重新处理。还有问题就继续循环此一流程。


以上流程的跑通,乃至于进一步形成流程规范,需要基于以下基本设施建设:


1,标准的提单流程。这一点由PM全程掌握,且需明确各环节的处理时间与产能上限,以便据此安排环节时间节点。任何问题都可以提单进入相应环节的排期表,也即可以自动化流转需求与问题单。无形中提高协作效率。


2,单个环节排期有序。这是非常基础的要求,单个环节内应按照需求优先级进行合理有序的排期,以便以此为单位处理项目级海量需求。如果单个环节的需求管理是混乱的,不仅需求处理人自己会手忙脚乱,还会造成整体项目混乱。


3,验证类先行。包括效果方案、性能基准要求,都要在项目初期有完整验证,并提出规范和详细的要求文档。这些细则会成为相关环节有关规范的指导性原则。若与其他需求并行,在不影响基准效果或功能时,可滞后入版。


4,遵守细则规范。流程的畅通是为提升效率的,但高效率不能基于低质量产出物,不然工作都是白费。高质量的流程化工作依托的正是各个环节上制定好的规范。举例来说,界面进版就至少需要遵守严格的切图规范、动效进版则需要遵守严格的动效设计规范等等。


5,迭代思维。严格的流程规范并不代表每项任务都必须在单次流程中完全完成。必要的时候,需要根据实际情况优先完成一部分。可以是主体的部分,也可以是当前可以实现的部分。


对动效来说,遇到的最多的情况是某些未经验证的效果暂时无法进版,那么就需要在客观条件允许的情况下进版一部分,这个部分往往是纯动效的部分,剩下的特效或者需要特别技术支持的、需要特别技术验证的部分可以进行切割后,在后续流程中再行进版。


从整体上讲,这可以视作是动效进版的一个特点,即可能需要多轮打磨后,最终才能呈现理想的效果。


本文转载自 COTA五号 ,作者欧型兔。


作者介绍:欧型兔,站酷推荐设计师,著有《游戏UI设计原则与实例指导手册》一书。公众号“COTA五号”作者。曾任职于游戏蜗牛、CCP 和腾讯,现为心动资深游戏界面动效设计师。游戏行业10余年从业经验,在游戏界面设计和游戏动效设计方面都有丰富的项目经验。