女性向游戏UI设计-作品复盘

​​大家好，我是叶子学堂24B的学员思思！

很荣幸受到文文老师邀请，在叶子学堂的公众号上分享我的作品，这也是我转行后完成的第一套作品。

 我是一个很不典型的“工科生”，22年计算机专业毕业后，陆续在实习与工作中尝试了PM、用研、品牌咨询和系统策划这些职业；因为小时候积累了大概十年的美术基础，在这期间也给4A广告做过外包设计，给公益公众号画过漫画，还参与设计了一款腕表最终在小米有品商城上架，这也为我转行到GUI打下了基础。 

而促使我决定报名叶子学堂的契机，也是看到公众号上叉歪同学的复盘分享，他跟我一样也是策划转UI，给了我很大的启发和动力，于是来到叶子学堂进行系统的学习。

  这次复盘我想主要分享三个模块，是我回顾这次创作过程后觉得比较有意义的三个节点：

 

关于「关键词」

 

「确定风格」是我一开始画这套作品就知道，并且后续花了较多精力去攻克的难题。因为是第一次画，又是跨行进入，经验不多，基础的UI规范、用色技巧、细化方法等等，这些都是我在「确定风格」途中迈过的一个个坎。期间感谢文文老师的陪伴和指导，让我快速冲出新手村，把之前关于美术的积累在短时间内发挥出来。

 

确定风格的过程，我事后总结，就是经过一张张图，不断填充和完善「关键词」的过程。

第一张图是课程中的一次作业练习，这里我就有意识地开始探索作品集的风格了。在刚报班的时候，我就决定接下来要做一套「女性向」风格的作品，所以第一张图，尽管很多地方都画得不成熟，也没想好风格的全貌，但定下来了

。

第二张图是在上一张的基础上重新画的，找了新的立绘，确定了紫色的暗色调，同时受到《世界之外》的影响，加入了

。

 这张图中我用比较多「线条」的元素去勾勒形状，补充装饰。给老师反馈后也有一些问题，比如界面里的线有点细碎，缺乏层次；背景光有些单调等。

由于是作业练习，这张图到这里就没有后续修改了，我把问题理解消化后就开始画下一界面。

 第三张图是一个活动界面，受到《闪耀暖暖》某套服装系列的启发，想给画面一些场景氛围，就有了

。

我想表达的情绪是宇宙空间的幽暗寂静，所以画面中大面积都是暗色，并加了少量点睛的亮光来烘托氛围。（当时想的还有一个元素是「音乐」，所以界面中间用了一些音符，但随后这个元素就被我迭代掉了，这里不多提。）

 

同样，这张图也延续了之前「线」的关键词，奖励框体用线表达了相纸、回形针这些实物，界面中间的曲线、标题字的背景装饰，同样出现了线。

 但这张图也有不少问题，跟文文老师沟通后，有以下要注意的点：

 

* 界面中纯白较多，应当避免，需要给一些色相

* 界面中间的曲线，层次有点弱，显得单薄

* 奖励框的比例可以细长一点，现在显得有点木讷

* 奖励框的亮起特效，目前有点粗糙，可以多一些层次

* 奖励框的标题字需要和背景拉开差距，现在不太明显

* 最右侧奖励框，亮部太亮，显得过曝

 

其实这里最主要的问题是对于「线」这一关键词理解不够，导致界面里的线条显得苍白单调，这一问题在下面几张图中同样存在。

 第四张图，主线选择界面。一开始对于它的构思，是想在构图上做些好玩的东西，所以选择了俯视视角，会觉得比较有冲击力。

期间又完善了作品的世界观，所以这张主线选择界面的设计就是：一颗奇迹石照亮了三扇门，每个门通往不同的世界。这张图其实画到这里我也觉得看起来怪怪的，于是就问了指导老师——文文老师，这才发现原来存在很多细节上的问题：

 

* 光影不合适。图中最亮的地方打在了地上，而需要突出的中间的控件却是暗的

* 文字透视推进的不彻底。画面因为构图的原因就是要重表现的，文字部分的透视做的不彻底，反而会破坏整个画面的感受

* 颜色方面，显灰：重没重下去，轻没轻上来；显脏：细碎的线比较多，地面纹理也需要再干净点

这张的构图我觉得继续画下去可能有点驾驭不了，所以就到此中断，试了一个新的构图。

到了第五张，还是主线选择界面，重新出了两版构图方案，想法是宇宙空间中漂浮着三扇门，每个门中有象征着星球的球体。

  从中选择了一版进行细化。

画到这里，会觉得之前「女性向」的关键词有所丢失，并且遇到了一个瓶颈：不知道如何深入。

 

大家也能看出来，画面有了初步的氛围，但是每个模块的细节似乎只有单调的轮廓线。这时课上老师正好讲到了「图案」的重要性（下个模块会展开讲），于是我就以这一点为突破口，专门花时间琢磨框体纹样的设计，这才挣扎出来，有了下一张图。

第六张，在补充图案设计的过程中，定下了第四个关键词：塔罗，界面里用了星/月/日这些图案元素，并且用复杂但有规律的线条将线组合成面，构成完整的装饰模块。

 构图方面，原本三个框体零散排列看起来有点乱，所以更改了构图透视，让中央三个框体的排列变得有规律。除此之外，拿掉了原本左下角的星石，交互上换成了左右滑动，更直观。

 

虽然这张图有了一些完成度，但其实当时还没有办法完全确定下来风格。你会发现这张图远端的背景里，我用了一些写实风格的碎石点缀，但其实这些点缀与画面近端所呈现的梦境、奇幻是有所不搭的。

 当时我也意识到了这个细节，但没有想到更好的解决方案，就先开始了下一张新图。

第七张，这张图想画的是主界面，将「线」关键词拓展，用了较多「曲线」元素。画面主体是暗色调，右上和左下有亮光相呼应，协调平衡。在处理画面中央每个点击模块代表的实物时，想到1999的风格，就把它们做的有点复古风（用了比较明显的波点和异色手写体等）。

 但做到这里我意识到，这种复古风（起码是1999那种程度的复古）跟我前面界面想要传达的女性向的闪耀精致是不太搭的，但一时间也没想好这张图现在要怎么改，所以也先搁置住，希望在下一张图上，能把之前的这些对于风格的顾虑和摇摆做好统一。

 第八张图，角色卡界面，终于确定了风格。这张沿用了前面积累下来的元素：女性向、线、宇宙的幽暗（紫色暗调）等，在画的过程中，也补充了一些新的元素来统一前面几张图想表达的感受，于是有了

。

 用极亮的光束与暗色的背景产生对比，能让暗的部分显得更暗，也让画面有了一些「闪耀梦幻」的情绪。画面在竖直方向上做了倾斜处理，希望能打破原有网格界面的枯燥，增加一些趣味。

 

通过这张定下来了作品集的风格之后，我开始着手调整前面几个界面，把风格向这个方向靠齐。

 主线选择界面，做了如下调整：

 

* 调整色相为紫色，加强中央区域的亮部，让整体氛围和整套作品更搭

* 细化了画面下方的选择提示条和右下角按钮的背景曲线

* 远端背景的写实碎石换成飞鸟，更符合梦幻的气质

* 画面右上角加了一些闪烁的虹光，增加氛围感 

主界面，做了如下调整：

 

* 去除原有的复古调调，旋转木马等实物改用模型（原来是我用AI生的图，能看出来马腿处有一些瑕疵）

* 增加画面主体曲线的层次。原本的曲线有点硬，修改后给曲线整体加了点发光效果，在一些比较硬的边缘周围新增虚化的曲线层次，再用蒙版擦出一些清透的感觉

* 强化右上角「开始」模块的层次。原本的按钮周围有很多杂物（卡片框、星球等），会分散走核心按钮的注意力，所以这次修改就弱化了这些装饰，强化主体

* 背景提亮，并增加丰富度。原来的背景看着很暗，也比较单一，所以就把背景的星球稍微提亮了一点，背景中增加一些有动势的流星点缀，不至于看起来太空旷

* 增强光影氛围，原本左下角的亮光区域有些单一，修改版增加了一些光晕效果

 

而后，又根据角色卡界面的风格，延展出了剩下的五张图，这套作品就算完成了。

 本模块到这里就结束了，总结下来，我觉得风格的确定是靠一些维度的限制来实现的，这些维度可以是关键词，也可以是其他，重点都是告诉自己，告诉读者，这是怎样的一个画面，这个画面要用何种方式填充细节。在画的期间我总结了一套方法，意在提供一些维度来更好地做限制，见下图：

 如果把这套风格对应填进去，就是这样的：

 

关于「图案」

 

还记得老师在一堂课上讲过：“UI工种和原画工种拉开差距最主要的是图案（图形）设计能力”，之后他又强调了图案设计能力考察在求职过程中的重要性，所以我在后续画界面的过程中就有意识地关注了这一块，也尽量多留出图案设计的空间以供练习。

 前文说到在画主线选择界面的时候，是「图案设计」帮我突破了瓶颈，这里详细聊下。

 

图中的框体，一开始是下图的样子，可以看到，有点简陋，装饰的东西只是简单常见的星、月，组合形式也是直给的矩形框。后面课上老师讲到进行图案设计之前要先明确风格要素，顺着这个思路，我开始了接下来的设计。

一开始，我对于这个框体最终呈现的效果是有构想的，不想要太厚重，所以主体是由轻盈的「线」所构成。可是只有这一点并不能支撑我进行接下来的设计，所以就要寻找其他的风格化要素，来给这个框体层层加码，最终让它变得丰富有看头。我后面想到的关键词是「西方」和「塔罗」，于是就找了很多欧式画框，和一些带有塔罗要素的装饰线，尝试从中提取设计语言。

 最后的效果就是上图展示的那样，框体上下两端用曲线缠绕成比较优美的形状，然后加入「星」和「泪滴」这些轮廓形状点缀；框体左右两侧借鉴了参考中的某个画框，用密集排列的竖线搭配「点」来填充空白部分；框体中间区域觉得有点空，就借鉴塔罗常见的方形+圆形的嵌套组合，再用点状的虚线填充四角，让框体四周也有细节但不至于太闷。

 

接下来趁热打铁，用类似的表达方式做了三个地点的图形徽章：

 

为了丰富表达，三个徽章中又都加入了点状虚线作为装饰。

 

这套图标风格确定后，后面的设计也沿用了这一标准。

总结来看，「图案设计」真的在填充细节上帮了我不少忙，最开始画的界面会显得单薄、没东西看，多半是图案设计没到位。我觉得每个图案其实都是一副小型的画作，也应该五脏俱全，也该被郑重对待。一幅幅小型画作聚集在一个界面里，整体完成度自然就高了。这一点在众多商业游戏上均有非常好的体现，值得我们后续多多研究，好好学习。

关于「素材应用」

 

说起「营造氛围感」，其实是我在画图过程中偶然间悟到的技巧。

还是这张图。当时画到一半（图中上半部分），会觉得图案什么的也加了，为什么看起来完成度还是不够。分析原因，我也知道是背景看起来单调，都是黑黑的一片，没有变化，可问题是接下来要如何增加变化呢？

 

带着这个困惑和文文老师沟通的过程中，她发的一张《世界之外》的宣传图给了我启发，于是细细研究一番。

乍一看这张图，会发现同样是暗色背景，它就不会显得单调，反而很有氛围和意境。研究过后发现，图中会出现很多用来营造氛围的「素材」，比如光束、光斑、虹光、噪点肌理、光粒子等等，正是这些素材，让画面丰富了起来。（当然，「素材」也可以自己去画，我对素材的定义是易用性较高的装饰元素，这些东西完全可以自己从零去画，只是选择现成的「素材」效率更高~）

 

有了这个收获，我就尝试给原有界面中加了一些「光」的素材（上上图的下半部分），画面立刻变得有了氛围感，完成度也提高不少。

 

可以看到，之后的几张图中也试着继续沿用这一方法去完善氛围。

还有一个感悟也可以借此分享下：多多利用AI。在叶子学堂前面的课程中，业荣老师花了很大功夫去讲AI的知识，也强调了AI的强大和重要性，所以在画作品的时候，我也尽量多试着用用AI。下面这张图没有用到太复杂的AI技巧，只是用了一个扩图，但我觉得效果很好。

原来的卡面资源是接近4:3比例的竖版图，在登录奖励界面中，我一开始想把这张最终奖励的卡面放大处理，但试了几版效果都不理想。后面就想到，能不能营造一个更沉浸的环境，让整个卡面都变成界面的背景，卡面中的人物就置身于这个环境中。于是就用AI出了几张扩图，将左边的咖啡厅区域延申，变成左侧标题和奖励框体的背景，再处理下明暗和光影，就完成了。

 

以上，就是这次复盘的全部。再回顾一下：

 

* 用「关键词」锚定风格。这趟确定风格的过程实在不容易，经历了很多张图，才用一些关键词将风格要素确定下来。我总结了一套确定风格的脑图，后续实践过程中也一定会再去完善这套方法。

* 用「图案」填充细节。图形设计能力对于GUI工种来说十分重要，也很大程度上影响着界面的完成度，在这一点上值得深挖。

* 用「素材」完善氛围。我觉得氛围感大多是光与影的功劳，搞定这两块，再提高自己运用现成素材的能力，就能更好地运用技巧影响氛围，再用氛围传递情绪。

 

希望对大家有所帮助（鞠躬）。

  

 

前几天看到游科创始人冯骥老师的一句话，分享给大家：“优先打动自己，再找市场交集。”

 

我职业生涯的选择是「找到自己」的过程，画这套作品每一张图的过程，无不都是在「打动自己」。冯骥老师说得对，只有先让自己喜欢上所从事的行当，所费心纠结的每个日夜，这个过程打动了自己，成果才有可能影响别人，才有可能创造出有价值的事物来。

 

画这套图的时候我最常听那英在今年歌手舞台上唱的《一颗星的夜》，我觉得和这套作品的风格莫名有点搭，也和我当时的心境有所牵连。

 

“就在明天 告诉世界 告诉自己没辜负这黑夜”

 

“所有付出换我自由的路 所有付出换我梦中的路”

 

感谢今年与叶子学堂邂逅，感谢叶子学堂的每位授课老师，他们真的十分专业，又平易近人、真诚十足；感谢一直陪我完成这套作品的文文老师，她在我迷茫困惑时鼓励我良多，又在我困难的节点给予指导和帮助，感谢你们！

 

最后，来看一下这套作品的汇总吧，谢谢你花时间看完这篇复盘，希望我们未来都能快快进步，越来越好~

  

 

思思同学是一个很努力也很认真的同学，作为一名转行的学员，思思同学在做这套作品的时候需要兼顾上课，工作和作图三个方面，虽然进度稍微的有点缓慢，但正所谓功不唐捐，念念不忘必有回响。

 

每周我都能看到思思同学在作品上的进步，也总能给老师带来不同的惊喜。

 因为是跟课程一起做的，所以很多综合性的问题没有很好的融合，前面的一张界面做了比较多的尝试，也为他这套作品最终稿奠定了一定的基础；

 

在做到 主线选择界面的时候，思思当时给这个作品的一些设定不是很能说服我，对于选中态我们之间产生了一些分歧，思思第一版用到的是投影（暗色）选中，未选中反而是亮光的，对于整体色调是暗色的界面来说，非常的违背交互逻辑和用户习惯，所以我当时给他快速的p了个效果图（选中态为亮光）；然后再后面的细化方案中，思思同学通过版式课程学习后，一个界面做了多种方案的排版方式，尽量的让界面有创意

 当时思思受到《世界之外》的影响比较大，导致做出来的作品很难摆脱对标作品的现有框架。

 

这其实也是很多同学都存在的问题，即只看到了市场上成熟产品所呈现出来的视觉效果，却忽视了影响这种视觉感受的内因。

 

所以为了跟《世界之外》区分开，我给到很多关于曲线的设计点（世界之外的曲线设计不多，更多的是透视），让这套作品尽量的“脱离”世界之外的影子，当时正好是王者荣耀的元流之子赛季更新，里面很多的流线设计引人注目，所以就把这个想法给到思思，在后续的界面中也都有体现；

 

至于改进的地方，比如角色卡界面，整个界面的流线感觉不是很多，基本都是倾斜的块，如果能改成流线的可能会更好。

 

除此之外标题、七日登录等活动的标题字体设计，也有很大提升空间。

 不过，作为一个策划转GUI的新人设计师，在不脱产的情况下，依旧坚持学习，并逐步实现作品的构建和迭代，其实是特别的不容易。

 

虽然目前来看，作品中依旧存在不成熟的地方，但如果能给思思同学更多的时间，多跟老师交流沟通，多经历落地项目，我想他一定会做的更好，在游戏ui设计的道路上也能走的更远！

 

最后也预祝思思能进入自己心仪的公司和项目~​​​​