“剑一” 同学由 “花花老师 & 23K老师”指导，以下为学生复盘

01  目标与立项

大家好，我是剑一，一名GUI设计师。关注叶子有一段时间了，当初看叶子老师直播，就感觉很专业，学生图也很棒。

我自己的问题是工作多年形成了路径依赖，思维打不开，还有很多坏习惯。老师们丰富独道的经验和眼光触动了我，为了能一针见血的发现问题，解决问题，我就下决定报班了。

我给自己定的大目标是：开拓设计思路，拔高自己天花板

具体到风格选择，因为玩主机游戏，很喜欢《喷射战士》的美术设计，就想尝试下这个风格。我之前没做过类似的选题，算是挑战自己，提升经验吧。

02  灵感梳理及素材收集

喷射战士的角色和武器设计非常前卫时尚。

分析拆解后发现整体轮廓设计圆润，“高饱和色彩搭配出的卡通造型”与“写实的材质表达”形成了强烈反差，视觉冲击力很强。

以这个分析为基础，我制作了一组游戏道具，再以道具为视觉制作了展示界面。在这个过程中，我请教了花花老师。在她的建议和帮助下最终的展示界面带有强烈的色彩风格，这让我打开了思路，为后面的整套界面做好了铺垫。

接着我想到普通的图形切割、板式构成可能和游戏调性不符。采用街头+酸性风格应该会更有趣，也更容易出彩。

同时，还要明确世界观：我设想了一个未来世界，人类利用装备水晶的自由喷气设备进行飞行和战斗。围绕这个设定，提取了关键词——酸性、街头、流动、竞技对战

配色方面，考虑到竞技，所以颜色的选取上是蓝色和紫色，蓝色为主，紫色为辅，2种颜色也对应游戏的2个对战的阵营。在收集素材时，我也会控制比重，酸性为主配以少量街头元素。

03  制作初版界面

既然选择了时尚街头方向，界面展示中肯定要增加盲盒、潮牌等包装元素和带有酸性经典图形、镭射渐变等特征的设计点。

制作过程中我发现，为了结合世界观背景，体现对抗的玩法。可以启用“气浪”这个Seed词，增强统一性。但这也会导致好多地方，出现边缘有些生硬的扁平轮廓。花花老师给到的建议是给大面积气浪做了弥散光式的处理，让画面过渡更加自然。

期间，我利用自己的3D技能，把2个道具进行了3D化制作。这能让界面上的视觉点精度提升，连带提升界面整体完成度。

以这样一个节奏，我在初版阶段制作了5张图，包含加载、角色、排等、道具、结算。期间花花老师对界面细节的设计和制作给予了大量指导意见。

04  全面细化制作

对于目前的进度，23K老师给的意见是：

1. 1. 人物换成是3d的，2d角色审美上并不讨喜

2. 2. 商业感和落地性不是很好

3. 3. 太注重特效和画面效果忽略了细节，如字体，图形，色彩的统一性。

   
   

逐条分析解决。首先是角色。在网上找潮酷感、造型圆润、设计时尚方向的3D模型素材。

接着是落地问题，是界面信息不足，玩法逻辑不完整。决定再新增一个主界面和战场界面制作。

色彩问题，原先以蓝色为主，紫色为辅。考虑到游戏主界面是蓝到黄绿渐变，选紫色为辅色画面会变花、失控。因此改蓝色为主、黄色为辅的配色，这样可以做到画面风格统一

最后是对字体，图形问题的修改

角色界面

角色换成3D后，我还对游戏的UE进行了修改，增加了角色职业等分类。调整图形节奏、控件描边，使字体和字体边距统一。

为了增加空间感，角色补充了投影。最后完成图如下。

道具界面给到的反馈是设计感略差，视觉引导不集中，增加图形明确切割

角色界面

结合游戏的seed元素，决定用气浪的起伏来形成正负空间，强化视觉的引导。最终制作效果如下，同时统一了字体规范。

主界面使用新的配色体系，同时调整了游戏功能入口。23K老师给到的反馈是主界面使用实际场景做底，UE空、控件大，不精致。

找了3个场景，最终确定了这张空间纵深感比较好的场景。然后新增了活动图标和调整了控件的大小，特别是四个角，重新对比其他控件后，调整效果如下：

对战等待界面，和主色匹配，亮度加深，强化了前后的关系。角色的卡牌用了时尚的吊牌设计，配合左右2色的起浪起伏，中间的vs简化设计，强化设计主体，弥散和波点作为衬底。

出现的问题是塑料的边太透了，导致前后关系没有拉开，然后是卡牌上黑色部分的图形节奏不是很好，还有同心圆的。

针对问题，塑料的边框的透明度进行了调整，并在卡牌和背景重叠的地方进行了模糊处理，卡牌黑色部分的图形节奏进行了优化，避免了等距设计，还有图标按同心圆规则进行放置。最终修改的效果如下：

战场按照3对3对战的ue进行了设计。操作的控件用了圆润角度，以符合游戏的卡通感觉。顶部计数条采用游戏的主辅2色设计，主色代表我方，副色代表敌方，中间放置游戏的对战logo核心图标。

出现的问题是控件的描边粗细差距过大，看起来风格不够统一，下方血条内的元素边距不统一。

最终修改的效果如下：

结算界面也进行了颜色修改。中间的win字上面的元素进行了简化，突出win字的主体。

问题是win的内部层次少了些，厚度，体积，光感差了一点，导致完成度不高。win的描边进行优化，粗细作出节奏，内部的颜色渐变进行了调整，做了win字的投影制作。下方控件的描边效果进行了优化。最终修改的效果如下：

由于采用了3D人物，所以把人物放置在画面中，背后配合斑驳的字体，大面积的弥散光，和少许喷溅，以及时尚吊牌的使用，强化视觉冲突，突出自由叛逆的感觉。

但问题是人物背景没拉开，喷溅元素有点脏，纹理素材拉伸出现模糊，导致画面的完成度不高。解决方式是，人物外轮廓艺术化处理拉开层次。对纹理素材进行图形处理，这样避免出现变糊。去掉后方喷溅元素，换为曲线、流体做图形切割，强化视觉引导。最后修改效果如下：

游戏LOGO，最初的字体基于控件刀形切角形状，进行了变形重组，然后增加厚度和体积，后面图形源于游戏的核心图形四叶草，颜色蓝紫配色，作出酸性的感觉，同时增加波点和手写体，增加时尚感和街头感。

后期换了3d人物后，游戏logo又进行了些许修改。字母O和游戏的核心图形相结合，配色采用蓝黄2色，表示游戏的对战的意义。然后配合游戏的seed流体起浪元素。

以下是完整成套作品：

05  经验总结

由于工作过忙，这套界面曾延误了一段时间。但完成后，我也切实学到了很多东西，开拓了新的思路，基本达成了预定目标。一些心得希望对大家有用：

1. 1. 确定seed元素后要反复使用，可以增强画面设计感，能使视觉统一。

2. 2. 记得要避免等比形状，会显得比较笨重，缺乏灵动感。

3. 3. 不同界面的控件风格和描边粗细不要做太大差异，画面容易不连贯。

4. 4. 素材纹理不要随意拉伸，这是懒惰体现。草图、预览可以，但出完成图时要全部用矢量制作，提高完成度。

   
   

感谢本期指导“花花老师、23K老师”，祝各位同学都有优质作品，爱你们~

Powered by Froala Editor