上次写了策划向的复盘，本篇是美术向的复盘，会把设计思路好好记录下来。美术的设计时间整体比游戏策划的时间段滞后一点，但是当时时间比较紧张，所以基本上算是同时进行，而且我也想用美术预研的方式给我们游戏策划一些设计启发。（下图还是时间进度图）
（图1 游戏设计流程和时间节点）
在美术开发的方面，同样也包括三个阶段吧，如下图。这篇还是一样像流水账的叙述方式，尽量面面俱到，但是也毫无重点，各位读者姥爷可以跳着阅读，捡需要的看哈~~
（图2 美术的三阶段）
注：其实交互文档应该算策划类的，但是因为这次游戏的界面UI还是比较简单的，而且和GUI的结合考虑会更多一点，于是我就把UI放到了这个部分~
一、美术风格预研&UI文档
1.1 美术风格预研
在实习的时候看了KM上的课程，了解了情绪量表这样的方法，我就寻思能不能活学活用下，刚好就参加了这次比赛，于是我就试了试，很简单地构建了量表，来对我们自己的游戏找到合适的美术方案。
因为我本身是UI背景的设计师，所以我主要是用从界面设计的角度来构建我们的情绪量表。首先是形态方面，我在pinterest找了不同类型的游戏界面，将这些游戏建立横向维度，分别为“圆润——锋利”和“写实——扁平”。
（图3 “圆润——锋利”）
（图4 “写实——扁平”）
最后再将这两个横向维度重新构建直角坐标系，并赋予他们形容词语义，如下图。
（图5 形态语义坐标系）
第二，是色彩方面，我直接沿用了色彩形容坐标系，来对我们游戏的配色进行辅助指导。
（图6 色彩形容坐标系）
在构建了这样两个坐标系基准后，我们就可以根据自己游戏的世界观来进行选择，我们想要做什么类型的游戏就可以去选择对应的形容词下的形态和配色，再接着进行具体的设计了。
但是这个时候我们的策划和美术属于并行的情况，我们游戏世界观还没确定下来，我们讨论过很多种风格方向，主要有活力的“复制派对”、无厘头的“厕纸大战”（此时还没有确定五行，所以游戏里都是白墙，看起来像厕纸）、科幻感的“复制实验”，这三个方向。我根据这三个游戏名，提取了不同游戏的关键词（可以视为seed的雏形，或者是设计基因），如下图。
（图7 三个游戏方向，提取关键词，并给出美术意向灵感图）
我把这些预研工作整理成ppt给我的团队小伙伴看，大家就会比较有直观的感受，我们游戏的美术最后可能是什么效果，怎样的倾向性了。比如程序同学就说，他会比较喜欢扁平化、锋利一点的UI，觉得那种比较酷。这样的方法和基此获得的团队意见也为我后续确定美术风格打下了比较好的基础。
1.2 UI文档
我先以“厕纸大战”这个游戏名为例，将玩家在信息获取方面进行了梳理，列出了需求点。主界面需求点：1.开始游戏的按钮；2.游戏操作说明（可选）；3.制作人员的按钮（可选）。对战界面需求点：1.游戏操作说明（可选）；2.玩家姓名；3.玩家血量；4.道具获取提示；5.游戏规则提示；6.道具栏（显示道具获得情况）。结算界面：1.玩家姓名；2.排名信息；3.退出/返回按钮。制作人员：1.制作人员信息；2.返回按钮。
接着，根据这些需求点，我做了UI文档初稿的界面说明，如下图。
（图8 界面说明）
在游戏中还包括“捡道具”和“死亡跳转”，此时还没有建立化鬼玩法，所以这里展示的是原本的死亡流程：死亡后跳转显示他人视角。后来沿用了这里的死亡界面布局，并增加了化鬼界面的设计，如下图。
（图9 “捡道具”和“死亡跳转”的小流程）
二、结合“五行”，确定主视觉
8.2日的时候我们进行了电话会议，讨论过程中我们决定用“五行”相生相克的特点加入到我们原本“复制墙”的游戏规则中，因此我们的游戏美术风格也需要和“五行”具有相关性。再结合我之前做的美术预研，我们的小伙伴倾向于扁平、科技感一点的UI风格，于是我对我们游戏进行了关键词总结如下：
（图10 游戏关键词）
接着我找了很多的参考图，或是风格图片，来为美术设计找灵感：
（图11 Pinterest上收藏的图片）
根据灵感图，我绘制了游戏主界面的插画。为了和标题《五行》贴合，主界面的边缘由五行元素环绕，左边画了松树代表“木”，右边的坚硬宝石代表“金”，下沉的海浪代表“水”，两侧燃烧的火焰代表“火”，最后背景居上的山峰代表“土”，画面居中靠上排版标题，我用书法字“五行”和左下角印章这两个元素来再次体现“国风感”，居中偏下留有一部分空白来放置开始游戏的button位置。
标题的书法字为了防止侵犯版权的问题，我特意是自己手写了好几版不同的“五行”，最后选择了目前呈现的这版字体。
（图12 不同区域代表的“五行”元素，草图的修改过程）
我先画了草图发到团队群里大家看效果，确定定好没有问题以后，我对一些元素的细节形状进行了草图修饰。根据传统“五行”中，黑水黄土红火青木白金这样的经典设定来配色，但是还是做了颜色的细微调整，比如把黑水的黑色会调得偏蓝偏紫，局部用些高饱和度的青色和玫红色，让画面兼具“科幻感”和“国风感”并保持画面的和谐。
（图13 配色的转换过程）
这张插画为我们其他美术构建做好了引导作用，包括之后的战斗UI设计，场景美术的配色等等都提供了很好的参考。
三、2D GUI&3D场景
3.1 2D GUI
这时候我根据自己之前做的UI文档里的框图进行界面美术设计。首先是战斗界面的道具栏和五行规则告知栏。因为不同元素相生、克和被克的元素是不同的，为了减少玩家的记忆难度。快速了解规则，这个规则告知栏和道具栏分别用五套元素进行设计，而这五套元素的设计图形源自于主界面设计，让视觉风格具有一致性。
（图14 战斗界面道具栏和规则提示栏的界面美术设计）
道具的icon设计也找了很多和我们游戏调性相似的图标做参考，并根据策划对道具的设定要求，我一一对应想出了符合功能又符合本游戏风格的形态载体，分别是闪现卷轴、腾云靴、凿墙锤和火药葫芦，根据我想出了4个道具文本进行了符合游戏风格和整体配色的icon设计，让icon也同样具备扁平、科幻和国风这三个美术关键词。
（图15 道具icon设计）
除了最主要的战斗界面和道具icon的GUI设计，还有包括几个流程阶段中短暂展示的界面设计，在这几个界面设计的过程中，我也始终保持界面美术符合游戏的三个关键词（扁平、科幻、国风）和配色基调。
（图16 其他界面设计）
为了让游戏的战斗画面更丰富，帮助场景同学丰富场景的效果，我简单地做了美化墙体的工作如下图，这种效果让人有“念经”的感觉，也是一种符合我们游戏世界观的设计~（其实就是给墙加了粒子特效，而且还加得非常廉价，这方面我真的不是我擅长的部分，抱头）
（图17 粒子特效gif）
除了出以上的UI切图，很重要是在游戏内的美术效果也要达到标准。所幸以前有过unity拼界面的经历，虽然这次用的引擎是莉莉丝的自研引擎，但是他们的UI思路是类似的。我会用引擎新建一个工程文件，在里面把UI的位置数值截图记录（如下图），发给程序同学，这样可以保证边缘绑定的适配方式是由我决定的，美术效果不会受到影响，也能减轻程序同学的工作量。
（图18 位置参数文件截图）
3.2 3D场景
这个部分不是我负责的，我主要给我们的场景同学提供了灵感图进行设计参考：
（图19 为场景同学在Pinterest上收藏的场景参考）
我们的界面也分为了以下的迭代修改的过程，通过一步步细化，反复调整模型的面数来让场景效果更好。
（图20 场景建模过程）
道具模型是根据我画好的道具icon作为参考，先建出白模，再放到引擎里配色进行细节调整。
（图21 道具建模过程）
四、遗憾和总结
作为一个交互背景的设计师，首先是我功能的局限性，在这次游戏开发中主要完成的是2D美术的方面，在3D场景给到游戏的帮助就十分有限，我只能提供灵感图来帮助我们的场景美术同学来进行设计。
第二，开发周期短，而我又同时在其他游戏公司实习上班，上班还是有工作压力的，所以能够投入到比赛的时间还是比较有限的，我只能在下班后的闲暇时间来参与制作，交互设计的基本功可以是信息的传递，所以玩家的行为反馈是十分重要的，在这个方面我即使做了很多的设计，但是最后因为时间限制，以及我自身对设计不够坚持，没有很强烈要求程序同学尽早完成UI开发，导致最后很多细节设计无法在游戏中开发出来，是非常可惜的。
之前我主要的UI设计经验来自于手游，手游其实是有设计规范的，一般界面的左右侧是操作区，屏幕的上方是信息区，如下图。
（图22 手游界面布局通识图）
但本次我设计的游戏是一款电脑游戏，电脑游戏不需要动态摇杆和转动视角的左右操作区，一般是用键鼠或者手柄进行操作，信息层和状态栏下沉设计，因此界面的布局和手机游戏也有所不同。如pc游戏《守望先锋》，它的主要信息展示区就位于界面下方，次要信息展示区位于界面左右上方，画面中间是临时提示区，一般闪现tips给玩家带来即时性的提示。关于pc游戏的界面布局
董晶晖：浅谈沉浸式 UI（ 二 ）https://zhuanlan.zhihu.com/p/166097802
这篇文章中也有谈到，大家感兴趣可以复制链接阅读~~
（图23 pc游戏的界面布局情况——推导到我的游戏的战斗界面布局）
这也算我在这次游戏设计中获得的小小经验吧，说不定之后可以对于手游和端游的界面设计上再做更详细的分析对比。
本篇美术向的设计复盘到此结束了~下一篇是“项目管理向”的经验总结，继承我去年实习时和我们项目组PM的交流，我试着模仿木子（俺之前项目组的PM）的工作内容，并且也用上了一点点在洛可可项目管理实习的经验，用了一些浅薄的方法，来保证游戏能在ddl前开发完成，工作流程的顺利，希望也能给一些小团队的管理带来小小启发吧~~
相关阅读：
《五行》从0到1设计游戏——策划向开发记录
文/姜姜
来源：GameTube
原文：https://mp.weixin.qq.com/s/xNL3MFb6i-f_HK7pOLyYCQ
| 
发表于 2021-4-26 13:25:25
