符文之地传说艺术测试设计思路分析

Hello 小伙伴们，这是去年时候我参与的Riot Game的ArtTest，非常高兴能参与它
对我来说它更像是一段旅途，从中我收获了很多，很感谢在那期间帮助我的任何人

特别感谢公司方批准我发布，因此想借此机会和大家简单分享一点在设计方面的思路
基于它是一个艺术测试，因此不便透露相关需求及细节，我只会分享关于我的部分(包含我所想的，所做的)，对此我很抱歉，希望大家见谅

在这个过程中，
有因为能做自己喜欢的美术效果而兴奋
也有为了从无到有的多方案设计而掉头发
总体来说过程体验是非常棒的，我可以专注的去做设计和实现
其中难度最大的部分来自于设计本身

对于游戏美术来说
美术的专注点通常在于如何表现和传达美
而设计的难点在于如何在半命题的框架下构思新颖的的同时不至于跳脱实际
就游戏而言，布局(UI)好看的同时还要兼顾玩家理解和学习的成本，动画特效在兼具华丽和仪式感同时又不会过于影响玩家流畅度体验(比如拖沓)

ok，我来share下整体的制作思路

首先，我会在设计动效之前，做一些准备：
1、从视觉维度和功能维度读懂UI（对于即将要做的界面）
2、了解特效，知道在实现层面可以给自己怎样的支持
3、从玩家角度出发设计交互体验，这是非常重要的一点

上面是一些基本需求，除此之外在制作之前，我还有一些个人预期
1、我希望特效和动画与UI联系紧密自然，而不是脱节的
2、我希望动效可以看起来很生动活泼，有生命力，让玩家感受到准确的交互反馈
3、我希望将效果推向新的高度


下面我会使用gif给大家预览(不会插入视频 - -)，但不是特别清楚，如果有需求看原视频请移步链接https://www.zcool.com.cn/work/ZNTYwMjQzNjA=.html

好了，开始，因为迭代了几个版本（version）,以下用V 数字代替

Design A
首先，我设计了一些添加卡牌，卡牌数量数字变化和鼠标停留在按钮的反馈特效，让玩家知道自己当前的行为，同时也可以烘托整体交互体验的氛围（对于视频来说），可以通过Design A视频看到这些细节

(上图)V1版本中，我试图使用卡牌飞过覆盖屏幕来转场，可以看到UI层的东西还是硬切消失

(上图)V2版本中，UI层的东西已经有淡入淡出了，加上前景的视觉聚焦，背景突兀的问题可以得到很好地解决。前景的卡牌我希望不只是划过屏幕，而是与即将出现的卡组有所关联，因此我想象卡牌从左侧飞出（UI层的卡组列表在左侧），然后汇聚到中间，像是飞进卡组（卡牌容器）

(上图)V3版本中，数量多且速度快的物体(这里是卡牌)会导致玩家视觉失焦，因此我添加一个识别度相对高的金色光，这样做有几点好处

1、光的颜色与卡牌对比强，很容易抓住视觉焦点，引导玩家的视觉路径，同时又与最终卡组的UI用色和光呼应，不会很突兀

2、光的出现增加了画面的空间感（可以从gif中看到），在造型上做了一些近大远小的处理

3、除了造型，光还可以很好的控制节奏，快出、慢绕、停留、飞进。利用起承转合减少动画的生硬和无聊，提升玩家的预期

这个元素做法很简单，就是个UV动画而已，但它(它的功能)对于这段动画的帮助是不可或缺性的

关于那些飞的卡牌做法，更简单了，就是撒粒子

到此，Design A的主体部分差不多就这些了

(上图)这是关于UI层的动画，UI层因为除了视觉元素，还有很多控件，因此动画通常要比较快，不能拖沓

这里我采用整体滑出滑入的方式切换，它们看起来几乎是同时的，这里有几点思考

1、它们不是视焦区域，相反它们应该为了突出前景的动画而被相对弱化

2、弱化的方式尽量柔和，因此淡入淡出是很好的选择，而位移的曲线也尽量平滑

3、方向尽量自然，例如左侧列表向左撤出，右侧区域出场方向全部向下，入场界面的UI元素也是向下运动的，避免冲突而引发错误的视觉误导

4、为此，在左侧卡组列表撤出之后我加入时间短且明度低的黄色光，一是在列表撤出后给予玩家反馈，并让玩家的目光短暂停留于此，二是可以和左侧即将出现的动画起点位置重合产生关联

后面就是美术向表现，与交互关联不大，就不多说了

可能存在的风险评估

这个设计其实总体时间稍微有点长，从点击Done后大概有3.5秒，个人认为其实Design B和C的时间长度比较合适

不过考虑到玩家可以通过代码导入卡组，所以创建全新卡组的频率应该很低，而且可以设置成点击可跳过动画（这个未来有机会展开讲），因此暂时保留这个长度

这只是测试，可以show idea，真正在项目中需要根据具体情况来调整

Design B(上图)

在这个设计中，我希望利用分割UI界面来产生区域和层次感，它的感觉就像"拉抽屉"

(上图)首先，根据UI功能，我将整个屏幕分割成3块区域，黄色区域为功能区，玩家只有需要的时候才会查看这里，大多数时间玩家的视线会停留在青色区域和紫色区域，玩家的常规操作是点击按钮Done后即完成卡组构筑的创建，视觉随即从青色区域转移到紫色区域（因为新创建的卡组会在紫色区域显示）

(上图)这里有一个对于动效来说很重要的概念，对预期值的把控

简而言之，不论我们是做UI界面，UX，还是动效，都是为了带给用户体验上的感受，玩家通过视觉会对触觉（交互）听觉(音效)等产生一个预期，因此对于玩家不易预判到的事物我们应该尝试解释和铺垫，以降低玩家预期与实际体验之间的差距

举例说明，现在有一个金属材质的宝箱等玩家开启，玩家通过视觉可以判断出它是个刚体，对它的材质属性，应有的音效类型，运动的基本规律是有一个常识性的认知的，因此对于它的动效呈现也有一定的预期框架

回到动效，在最开始我使用一条金色线条(这个线条特效当时游戏中也有)分割开左右两个界面区域，当它垂直下来的时候，给玩家一个区域分别开来的铺垫和预期，如果没有它，界面同时被滑动难免容易产生一些混乱和失焦。另一个作用是这道光虽然有强度变化，但在下来后并未完全消失，而是低明度的存在一小段时间，它的滞后消失承接了界面滑出和滑入两个部分，并且更容易使玩家的视线在此停留，为后面从左到右的滑出动画做视觉起点

(上图)同样为了顺应界面元素的滑入方向，我使用一个纹理快速飘过，将视觉中心重新引导到卡组区域(紫色区域)，使玩家看清新生成的卡组，以强调玩家完成卡组构筑这个行为的反馈和仪式感，同时速度需要比较快，不要阻挡玩家操作

(上图)这里我做了一个拟物化的处理，我把卡组想象成一个实体的卡包或卡盒（事实上我是注意到UI应该是如此设计的，可以看到上面有一个出入口），为此我添加了一个卡片塞入卡包的动画，我希望在一定程度上弥补数字卡牌游戏对于玩家拥有实体卡牌的那种拥有感方面的不足

Design C(上图)

这个设计思路比较抽象，想象成卡牌列表中的卡牌以能量的存在方式被抽出汇聚到屏幕中央“炸”出新卡组，然后直接飞到新卡组的位置，整个过程一气呵成

因为这只是个草稿，用来表达idea，因此显得很粗糙，无论是设计上还是制作上都有很多可优化的空间，这里就不过多赘述了

到这里，基本分享完了，可能有人会觉得，上面说了那么多，但看最终结果就是很简单的东西，对大佬们来说就是"一看就会，有手就行"系列

其实设计就是这样，我们看现在的手机外壳到app软件，每一条边的长度，角的弧度，都是有讲究和美学依据的，只在呈现的时候看起来那么的自然而然，自然到可能会被忽视

这就是侧重点的不同，做动画、特效，都是为了强调视觉，引人关注（这里指的包括但不限于UI动画、特效）

而做交互相关的内容（UI、UX、动效），则是做体验和感受，强弱没有定式，玩家体验第一

相比之下，设计需要更多时间在头脑风暴环境，目的是为了让我们的用户(玩家)少做大脑运动，尽可能降低学习成本，让用户（玩家）得到更舒适的体验是我们的目标

结语

虽然做了3个，但其中有在制品和草稿，并非完成品，所以完成度不算太高

拿出来就是想分享给有兴趣的或准备做动效的小伙伴

时隔一年，再回头看，细节问题还是不少，个人感觉没有半年前做那个狗头的UI精细度高，不过当时也算尽力了

最后的最后，

致我们热爱的艺术和设计