“法法”同学来自网络班，由“23K老师”指导，以下为作品复盘总结。

01  立项与风格确定

1.收集资料

开始决定做这个作品的时候，脑海中第一个想法就是想做一套二次元风格的比较具有潮流感的作品。于是在定情绪板时，收集的参考图都是以扁平化、潮流化为主。此外还包含很多比较酷的二次元角色。

在整理和分析它们时，我发现偏现代科技感的角色更符合我个人的喜好。因此作品的大方向就落在了“二次元+赛博风”这个定位上。

2.初级情绪版

最开始的情绪版非常简单。我先是写了一个基础的世界观剧情，大概内容讲述的是：在一个虚拟的网络世界中玩家要与AI进行抗争的故事。围绕这个故事我设定了几个关键词：

3.定调海报

确定关键词后，我开始在网上大量寻找参考图和素材图，并把关联度较高的素材单独进行了一个分类。接着便开始根据参考图制作第一版“风格定调海报”。

做“风格定调海报”的时候，思路其实没有完全放开，平面版式设计也比较简单。

·初版海报

经过老师指点后，我在初版的基础上又进行了一次优化，更加大胆的去叠了一些素材，最后呈现的效果有了不小的提升。

·修改后效果

沿着这个思路，我后续又出了两个版本。虽然我觉得这两个版本的效果尚可，美感达标了，但整体上总是感觉乱乱的。

·第二版

·第三版

因为说不出具体原因，便跑去“骚扰”老师了。

沟通后，我明确了问题：角色和背景元素之间的关联度低；画面不够整体、太碎；找的参考范围太窄，太受局限。其中对我启发最大的就是：做游戏UI设计可以从海报、美宣等其他视觉领域找灵感。

4.完善情绪版

我对世界观、配色、元素筛选等内容比较有底，但是对于最终想要呈现的效果还不是太明确。在这个过程中，正好课程讲到了情绪板，所以上完课后，我立刻把欠缺的部分做了填补和完善。同时以此为基础，补充了一些参考图。

5.拓展海报设计

之后的课程是一节P图课。学完后我感到自己似乎领悟到了一丝精髓，这让我能够更加大胆灵活地去运用我看到的参考图。以下为部分素材图：

首先是对之前的第三版进行优化。接着我依靠头脑风暴快速P了4个版本。我做了很大的改变和尝试，可以看出每个版本在构成上的差异还是比较明显的。

·第三版 改

·第四版

·第五版                             

·第六版

·第七版

有了这么多的风格海报后，我心里就有底了，可以开始思考如何将UI落地了。

02  第一张UI图的制作

1.方案图 版本v1.0

首先思考的是我应该做哪一个界面。由于前面做的海报都是以角色为中心，所以第一个界面自然是选“带有角色的界面”。再细分一下，从“抽卡（带角色）界面”和“角色信息界面”中，我选择了前者。因为在我看来，抽卡界面的构成可以更多变，元素也更丰富。

我选择以第七版为基础作图——因为它的构成比较有张力且不常见。第四版我也比较喜欢，但自我判断落地难度较大。

在加入UE后问题很快就出现了。角色背景与UI的层次没有拉开，并且画面依然有拼凑感。

2.方案图 版本v2.0

为了解决这些问题，我尝试通过添加一些氛围光、以及结合其他版本海报的处理方式对画面层次进行优化，这就形成了过渡版本1.5

这个版本的背景层次依然存在问题，为了避免自己陷入思维钝性。我决定建立一个设计分支，这样既可以解决问题，也可以和之前的设计作对比。

其实我们在设计过程中，大脑会一直出现各式各样的想法。但做出选择后，往往要抛掉大部分。

而分支设计恰好可以提供一个捕捉灵感的机会。我以永动机、人类追求无限的能量为次主题，并加上“∞”作为关键元素。紧接着我调整了情绪版，补充了部分世界观剧情。沿着这个主题的关联元素，我融合出了第二个版本。

3.方案图 版本v3.0

对比之后，我确定第二版相较第一版在完成度上有较大提升。但我意外发现设计感低了，画面的构成变普通了，元素运用也过于简单直接。于是针对这几个问题我又开始了新一轮的优化。

·优化过程

自从学会23K老师的“混沌P图大法”后，我感觉设计过程流畅了很多。比如我把烟雾的效果进行了加强，使其不仅仅是气氛作用，还能起到分割画面，改变节奏，引导视觉焦点的作用。配色也使用“混沌叠色法”，在主色调下添加补色和装饰色。

为了平衡视觉感受，加强动感，我把原立绘替换成一个天然带有动态效果的新立绘，她跟背景的烟雾效可以更好的融合。之后是减弱底纹，补充点、线等装饰细节。最终敲定了这个版本作为UI落地的方案稿。

4.细化完成

在细化过程中还是会有些问题要处理。如：明暗反差过大；一些视觉点过重；元素融合不够等。这里面最令我纠结的是页签样式和字体处理，修改了很多版本。最终我还是觉得采用轻量化的设计会更符合现在的审美。

至此第一张图就算完成了。它经历了多次打磨和迭代。虽然代价不低，但后续界面可以站在它的肩膀上，将它作为标杆。而且很多元素、图素都可以再利用，进而提升其他界面的制作效率，方便风格的统一。从这个角度看，还是非常值得的。

03  后续界面的延展设计

1.章节选择界面

在开始做情绪版的时候，弱包装界面原本锚定的是角色属性界面。既然我已经有一张角色展示型界面，那为了避免重复，我把它更换为章节选择界面。一开始思考比较简单，就是做个平面的纯版式方案。但在加上了机械质感和氛围效果后，成图效果一般，问题也多。以至于被老师一票否决重新设计。

·初版

既然如此，我便启用了一个没被落地的思路——做成HUD的形式。了解游戏的都知道，当前章节、已完成章节和未解锁章节是需要明显区分的内容，我沿着这个思路收集了一批新的参考图。让我惊喜的是这类参考还是挺多的，思路也就很快打开了。

·改版

因为有好的素材，所以整个过程比较顺利，很快就做出了我心中想要的效果。

2.日常任务界面

任务界面属于列表型界面。一开始我也就是简单做了个列表构图，结果做着做着发现排版不好看。

页签部分的样式太直白，左右分割很硬，给人很厚重的感觉。于是我想到在这个界面添加主体，使其成为界面的核心刻画点。围绕这个刻画点也能做一些版式上的节奏设计。

在找参考图的过程中，一个不断散发能量的巨大岩石吸引了我。它非常贴合我的设计主题的。并且其自身的打光效果也为了我提供了灵感。使我在处理主体和场景关系时，有了更好的方案。最后实现的效果也是非常棒的。

3.七日签到界面

七日签到是游戏中的常见功能。我最开始选择了很常规的构图——左侧是角色，右侧是奖品，非常稳妥。但考虑到是个人作品，不是项目图。我告诉自己应该做些不一样的东西。

我的想法是从角色下手，结合角色搭建一个带有视觉的背景。我翻遍了自己收集的近百张立绘，一个坐在军备箱里的少女吸引了我的注意。

这张图是少见的俯视角度构图，更妙的是它还带有一定的透视感。凭借着这两条特色我可以有很大的发挥空间。

把它加入画面，使用自带的透视做出背景空间感。填入UE控件，保持周围有较多的留白。这样调整下来视觉感受还是不错的。此外我也试着在冷色基调的画面里加入一束金色光效，氛围感就起来了。最后再添加一些暗纹和装饰元素，就完成了。

4. LOGO 界面

我希望在LOGO的设计中尽可能的将“∞”符号、镭射、科技感的点线面表达都融入进去，使其整体气质更加贴合游戏主题。于是我找了一张符合思路的参考图。

考虑到整套UI的气质多为方形和尖角，所以图形也是围绕此特征做的设计。最后将背后的图案换成了六芒星的造型，赋予科幻元素。

但做完后发现图形在层次上有些抢标题字，还会导致整体过重。于是更换了形体特征，进行了减弱处理和节奏优化。

5.整合调整

在完成了全套图的细化工作后，我把它们排在一起又做了一轮审视。考虑到最终会形成瀑布图展示出来，便调整了细节元素，统一了光感和颜色。

04  学员采访

Q：你好法法，先自我介绍一下吧~

A：大家好，荣哥好，我是法法。本身是做GUI的，随着年龄的增长逐渐感受到了压力，需要拼一把，所以就来叶子学习了。

Q：听你的指导“23K老师”说，这套图前后也做了6~7周的时间。平时工作很忙吧。如何坚持下来呢？

A：因为很想拔高一下自己的水平，而且二次元是我喜欢的品类之一，所以动力较足。还有一个原因是上个月刚离职，做个人作品时间多了些。

Q：原来如此，那做完这套作品后，你有感悟吗可以分享吗？

A：前期在定风格时，因为需要反复尝试会花比较长的时间。但这也会让后面更加顺利。另外多了解一些有特色的风格，提高自己对艺术的认知，有助于出好作品。

图形设计方面，可以多借用参考图，这能让作图有依托。但最终还是要提升自己的原创设计能力。另外设计工具并不仅限于PS，结合建模或动效后，往往可以实现更加高级的效果，这也是后续的学习方向。

Q：感谢法法同学的分享。课程结束只是开始，我们要继续保持联系哦~~

A：非常感谢叶子学堂各位老师的悉心指导和23K老师一直以来的帮助，这让我学到了很多很多。

我肯定会一直关注叶子学堂，在之后的工作中如果有问题我会来“骚扰”老师的，哈哈~

Powered by Froala Editor