如何设计出《逆水寒》手游那样独具特色的界面动效？

作者 | 瓜瓜

雷火艺术中心动效设计师

《逆水寒》手游从2019年11月立项到2023年6月正式上线，团队投入了大量的时间和精力去开发，才最终呈现出了今天被玩家津津乐道的游戏画面。

此前，我们已经分享过《逆水寒》手游在角色和时装方面总结出来的一些经验。而今天我们会把目光投向界面和动效领域，将游戏通用动效的迭代历程划分为功能、迭代和设计升华三个阶段，进行详细的复盘与分享。同时，还会详细介绍该如何通过动画节奏和设计元素等完成个性化的融入，以凸显《逆水寒》手游独具特色的“会呼吸的江湖”。

一、通用动效概述及案例分析

1.1 界面通用内容概述

从美术设计的角度出发，游戏界面中的通用内容，指的就是在游戏风格确立后，基于用户界面，提供界面基础功能与统一标准的控件及界面内容，其中包含但不限于设计规范、通用控件样式、通用界面样式等。而通用动效就是针对这些基础内容展开的动效设计。

设计规范就是类似游戏中使用的字体、字号、颜色、布局等关联性的设计标准。不同的色彩、字体都能够体现出不同游戏属于自己的风格基调和时代情绪。越是后期上线的游戏，其字体样式就会更加简约，色调饱和度也更清雅。而在这一层动效通常不会做效果，以免干扰字体识别。

通用控件则包含游戏中的各类各级别按钮、开关、菜单栏、滑动条等。鉴于手游画幅比较小，游戏内各类控件触面也会比较小，所以为了能提示玩家此处可点、并且在点击时接受到及时的信息，动效层面经常会在按钮控件中加入引导和点击效果，通过视觉刺激将物理按钮的点击手感视觉化，以此形成信息的反馈。

通用界面内容则比较杂，包括但不限于界面通用背景、弹窗、tips等。通过相同颜色、纹理、控件规范、布局排版等让不同的系统界面形成统一而又相对独立的个体。也能够让玩家在游戏中通过不断接触相同的元素，形成对游戏界面的整体印象。动效层面最直接有效的方式就是用节奏建立关联，例如界面的出现关闭、列表和信息的律动方式等，通过多次同频达到多界面的联动共振效果。

1.2 通用动效分类

通用动效由于以界面基础信息和基础操作为基点，其出现频率和操作次数贯穿整个游戏体验，所以恰当的动效设计能够为交互操作起到锦上添花的作用。根据设计要点和动效功能，可以初步将通用动效划分为以下四类：

一、引导提示及点击反馈动效

引导提示是通过视觉效果和动画表现来吸引玩家注意，引导玩家进行点击或特定操作。通常以常驻的形式用于item物品、按钮、标题栏上，在操作完成后消失，具备一定的功能性。

反馈动效则是在玩家点击特定按钮或者区域时，通过动画、音效或者震动等方式来提供瞬时可视或可感的反馈，以增加操作的响应性和交互的可感知性。常见的有按钮点击、鼠标点击、解锁等效果。

二、切换动效

切换动效是界面切换过程中使用的出现、消失、过渡效果。其中通用界面的切换动效往往有统一的律动形式，这个统一不是指具体数值完全一致，而是呈现给玩家的第一印象具有一致性。而重度包装的界面，则会使用个性化的切换动效。

三、氛围动效

游戏界面动效中的氛围动效是指通过视觉环境、动画来营造特定氛围或情绪的一种设计手法。在通用层面则可用局部的氛围起到增加细节、烘托情绪的作用。

从功能性上来讲，引导提示动效>反馈动效>切换动效>氛围动效。根据时间和性能要求，可以按重要性进行取舍。对于一些常驻的功能性界面，例如礼包签到等，适度的氛围动效可以用较少的成本实现较好的视觉效果。

1.3 端游案例分析

相较于纯手游而言，以端游为基础的游戏在移植到手游平台时，界面动效不仅要考虑端游原有的设计风格，也需要和手游自身美术风格相匹配，在吸引新的移动端玩家时，也满足原端游玩家对手游的诉求。《逆水寒》手游之前已有成功的端游，因此在正式制作之前，我们也要着重分析一下《逆水寒》端游的界面动效表现。

《逆水寒》端游是在2018年6月上线的，相较于同时期的竞品它更重视玩家的游戏体验。在界面美术风格方面，采用了简约而细腻的设计风格，主要以“竹”与“水墨”为设计元素，并根据界面类型采用多个色彩体系，通用以深蓝、深褐的低饱和色调为主，付费、活动类则多采用高饱和彩色系，以此将元素和系统结构进行风格统一，凸显游戏的古风美学。

在动效设计上，端游也延续界面的设计调性，围绕“竹”与“墨”为设计元素，将其以氛围和晕染的形式进行运用。除了常规的反馈动效，《逆水寒》是端游中少有的重视切换动效和氛围动效的游戏。

首先说竹元素。在很多通用面板中的标题会有竹子的装饰，动效会重点表现与竹子相关的氛围，给予微弱的扫光和飘落动画，可以让相对深色的面板在局部有动态点缀，让界面上静态的竹叶有一种被风吹动的感觉，带有自然、呼吸的意味。

墨的使用范围则比较广了，首先是含有墨元素本身的设计，例如logo文字的出现、地点提示等等，会着重表现墨的笔触纹理。而非墨元素的界面，例如活动界面的打开，则会用墨的晕染样式作为过渡。

端游很少有全屏的界面，基本都是半屏，所以在界面按钮放置的侧边栏，大部分都是非静态的，而是设计有氛围动画。相较于静态界面，动态的内容让界面更生动，同时也能让玩家注意到按钮分页的内容。

引导提示和反馈提示的设计上通常比较简洁，以光效和点状粒子为主，光效主要以各型线性扫光为主，强调动态变化。

使用频率较高的界面都加入了切换动画，并且配有一定的氛围动效，使界面在切换时更为流畅，不会出现界面加载卡顿的问题。而在动画节奏上，则是根据界面功能进行区分。通用界面的出现及消失采用了模仿空间折叠的形式，常规活动界面和部分系统界面则是小幅度的缩放渐隐渐显，重点活动界面则单独制作更为复杂的切换动画。

1.4 小结

通过分析可以发现，在一些通用内容上加入动效具有一些显著的效用：

1. 功能上可以展示交互原型，引导用户操作，并且在用户操作后给予有效的信息反馈；
2. 审美上可以将静态的界面进行设计延伸，使界面更生动有趣，辅助进行品牌塑造；
3. 资源上复用性高，还可以针对不同机型性能，进行分级优化，提高高配设备的游戏美术效果。

但我们在进行通用动效设计之前，也一定要考虑到它的设计必要性：是否在加入动效后能起到1+1>2的效果，是否会画蛇添足？对于动效设计师而言，通用内容在结构上会比较简单，考虑到性能问题，设计上往往需要简而精，所以如何用简单的效果体现出设计的层次感，也是动效设计师需要考虑的问题。

二、《逆水寒》手游通用动效迭代历程

其实手游的通用动效也是经历过多次迭代，才有了如今玩家看到的上线效果。根据手游的版本迭代周期和动效比较集中迭代的阶段，我初步将alpha里程碑前归为第一个功能阶段；beta期间因为对外一测有一波小调整，归为迭代阶段；第二次外测后上线前的C1里程为升华阶段：

2.1 第一阶段：功能阶段

和端游相比，手游的美术风格相对一致，还是以简约清雅为主，但在基本色调上饱和度有做调整，整体更时尚、年轻。前期界面的通用内容在设计上相对简约，以大面积色块为主，局部有一些晕染的纹理。

因为手游一直想表现的主题是“会呼吸的江湖”，所以在动效设计上也是契合界面风格，以轻盈为主，提取晕染的材质去表现过渡时轻薄的质感，并延续使用了竹叶的元素去进行氛围渲染。前期的动效在设计上会在精简的基础上尽量细致地去做氛围上的表现，不过动效还未铺量，大多还是以功能性为主。

例如通用背景的设计上采用了无框的透明度过渡，比较柔和，所以动效设计的出现采用了比较舒缓的节奏。半屏和全屏在背景上都有比较明显的竹叶，为了体现细节，竹叶也有做微微晃动的动态。

信息的出现方式上，整体列表以从下到上为主，节奏相对紧凑一些。但也可以看到，不同分页间的节奏和出现方式并没有完全统一。

界面按钮在设计上比较场景化，动效并没有加额外的设计防止信息干扰，只是在出现方式上做了左到右的统一。包括主界面上UI控件的功能性提示，也是尽量以简约为主，只用了扫光和粒子做点缀，没有加太多的纹理信息。

2.2 第二阶段：迭代阶段

在第二阶段，因为要对外一测，为了能带给玩家更加整体化的印象，所以针对现有的设计做了铺量。一方面对旧的效果进行精细化调整，另一方面根据用户体验增加了新的设计。

先展示下GUI迭代后的控件样式，增加了按钮形态，使用标准上做了进一步规范。所以一开始也是先对按钮做了动效上的调整。

在原有的切换上新增了一级tab按钮的点击和常驻效果。出现采用了晕染的形式，并在常驻根据纹理特征加入了轻微的扰动效果。然后统一了不同界面列表、信息的出现方向和时间。

动效细节上的调整主要偏向轻量化，例如技能按钮上的动效将纹理质感处理得更轻薄，减弱纹理的复杂度，节奏上也做了调整。按钮的CD结束提示，考虑到玩家操作的频率，减少了点击后的残留效果，节奏也更干脆。

背景上弱化了墨的厚重感，强调水在晕染时候轻盈的质感，并将出现方式由中心扩散调整为从左到右。

与此同时也开始进行性能测试，并将任务栏的动效进行分级。尝试取消粒子节点，对材质的使用层级进行限制。同期也对性能消耗较大的系统界面进行了动效方向的大幅优化。

2.3 第三阶段：设计升华

在对外一测后我们也收到了很多玩家的反馈，梳理了一部分关于UI的评价，例如按钮小容易误触、字体颜色花、按钮质感轻等。通过内部复盘，总结确实有层级引导性弱，系统界面风格差异大，UI设计质感不够等问题。

所以针对于此，我们也希望后续的优化中能够将UI层级功能划分得更明确，将不同系统间无论是元素还是色调都做得更统一，包括设计元素本身的存在感，都更强调《逆水寒》会呼吸的特征。

由于通用是界面中占比最大，玩家感受最多的内容，所以首先针对界面风格做了预演尝试。考虑到迭代效率和功能的推进，选取了任务和组队界面先进行控件和层级上的优化。下图展示到的是任务界面迭代前后的视觉效果，在设计上突出“竹”、“水”两个元素的特征，特别将竹节的造型纹理运用在按钮样式中。功能区域的划分还是比照三大分区，各级tab从颜色量感上进行划分，强调玩家需要点击操作的按钮层级，界面背景的视觉重心也不在集中在左侧，而是分摊到信息比较集中的UI部分。

替代前后对于动效来讲，设计上的变化并不是非常强烈，更多是在细节上的调整，例如水墨元素的使用。所谓墨分五色，浓淡干湿焦，源于墨里面水分含量不同，以及画画时笔锋上所含墨量的差异，造就了层次丰富，变化万千的水墨形态。很多游戏里使用的墨趋向于浓墨，更注重水墨纹理的表现，质感偏厚重。我们在后续设计中希望将湿墨晕染的质感和水的清透相结合，突出墨的轻盈感，强调水的涟漪质感。在动态规律上，也参考竹叶的摆动方式，还原竹叶的实际律动。

左图为11 Bit Studios的《冰汽时代》，右图为CDPR的《巫师》

按上述思路选取任务界面进行了预演尝试，整体设计在节奏上以干净利落，先快后滞缓为主；氛围上沿用粒子、光斑，尝试表现竹子投影在水面波光粼粼的质感。同时也有尝试新的表现方式，例如按钮点击效果也试着将竹子上丝状的纹理进行放大处理（终版未采用，还是希望更多强调水和墨的质感）；材质上在晕染溶解的基础上加入随机的涟漪效果。

终版效果如下，基本可以确立后续的修改方向：

1. 水墨加在出现动效上，采用更柔和的水墨纹理，避免太刺状的形态；
2. 常驻氛围加入涟漪的运用，线性涟漪纹理不要太细碎；
3. 节奏强调快到滞缓，统一不同页面信息的出现方向和频率；
4. 层级划分后，不同层级的按钮针对性加入点击和氛围做强调。

接着就是大面积的铺量，这边展示到一些有代表性的迭代案例：

①背景类：出现+常驻氛围

通用全屏和通用半屏

通用横屏弹窗和二次确认弹窗

②按钮类：点击、氛围

Tab按钮

一、二级按钮和异形按钮背景氛围

按钮点击提示

可以看到按钮和背景上都强化了涟漪和水的概念，节奏和纹理都有一致性，通过相同元素的多次运用，让整体在细节上形成风格上的统一。并在细节处增加动态表现，例如静态按钮上添加轻微扫光纹理、点击刷新按钮时，将按钮的反馈操作可视化等。

③任务栏（功能向）

④Loading

常规场景loading有两类，一类是可点击滑动产生实时动态涟漪效果，但是无常驻氛围的，一类是无交互但带有常驻氛围的，以优化玩家枯燥的等待时间。

同时针对一些由于场景切换，有较长等待时间的内容，例如选角转捏脸、外观转捏脸等，由于其系统风格相对独立，也制作了单独的风格化loading。而这个风格化切换形式对于一些只需要略微等待几秒、加载实际场景模型的界面，其效果适配性也很高。例如武功特质界面和组队界面的切换，若在点击后加入常规loading多少会有中断感，快速的风格化转场给玩家的体验会更好。

三、设计总结

3.1 设计思路总结

通用的迭代，多是在整体风格已有的情况下，先将通用内容铺量统一，再进行风格的打磨。具体来讲就是先将动效核心的节奏和设计元素把握住，再将概念贯穿到各个内容。

首先是动画节奏如何进行统一关联，主要内容包括：

1. 每个界面的信息出现方式需要统一，例如列表、返回按钮等，它们的出现方式和节奏需要具有一致性；
2. 通用界面的进场和切换也需要统一；
3. 部分点击反馈效果可以采用统一的形式，例如item领取提示；
4. 部分活动界面的统一，例如手游呼吸活动界面，每个分页的出现有各自的氛围和出现细节，但其出现方式皆为从大到小的镜头缩放。

风格上如何去表现差异性，主要是体现在细节的设计上，用元素进行呼应，在一些细节设计上做与通用有关联但是表现形式又不同的内容。包括但不限于：

1. 通用背景的氛围与同色系界面的氛围、元素和设计方向类似；
2. 鼠标的点击反馈和loading这种高频出现的内容，采用动效统一核心seed元素，但拥有各自的表现形式；
3. 在不影响操作的前提下，界面可以适当加入一些趣味性效果，进行元素上的关联，例如背包新物品提示，采用动效来代替红点等。

另外，通用动效的优势就是用最高的性价比去实现界面中风格的刻画和运用。当整体基调已定，后续的制作也可以有迹可循，节省了同类型内容的制作成本。

3.2 迭代历程总结

考虑到通用动效的复用性和可持续性，迭代期间，经常会在性能、适配上花费较多的时间。相较于不加通用动效的界面，加上动效肯定会额外增加性能的消耗，所以如何尽可能地减少消耗，保留最优质的效果，也是我们在后期迭代过程中工作的大头。

在性能优化上我们主要做了两点：一方面在效果上先做最高配效果，审稿通过后，再去拉数据测试，做删减优化。删减方向主要包含部分层级删减、图片合并、效果合并、粒子限制等。另一方面划分高低配两个等级，高配采用高配效果，低配单独制作低配效果，将动效表现减到最低，满足基本需求即可。

下图展示的是全屏背景的高低配动效对比。相较于高配表现，低配去掉了光效和粒子，仅保留了设计出现效果的晕染层级，并且在整体合并后层级大幅减少。

由于通用动效在迭代前已经在界面上有引用，所以在修改通用文件后会有可能出现适配性的问题。例如动效文件内部适配不同，导致外层修改尺寸后出现适配异常。还有不同设备尺寸不同，导致不同机型安全区适配有误。最后就是引用检查遗漏，导致个别界面没有同步到新的动效文件。因此在通用动效修改后，也需要谨慎对引用界面进行检查，防止遗漏。

以上便是个人在《逆水寒》手游的通用动效设计过程中总结出来的一些小小心得，希望能给各位带来一些帮助——