“叉歪” 同学由 “23K、业荣老师”指导，以下为学生复盘

01  幻梦的初始

我叫XYXYcoord，简称叉歪，曾创立过一款独立游戏项目。2019年毕业时从事平面设计，与GUI行业没有交集。但那一年的《明日方舟》吸引了我，产生了一丝当GUI的想法，但平时工作太忙，业余时间还在搞独立游戏，所以没采取什么行动。21年以策划背景进入了游戏行业，这时候《重返未来1999》开始宣发，平面设计与UI结合的运用更上一层楼。我太想钻研其中奥秘了，化学反应下，我抛弃了策划，决心成为一名GUI。然后在朋友的了解下，知道了叶子学堂，就报班了。

这套作品集的前身是2021年时我给朋友的独立游戏做的一套UI，现在来看这套UI真的很菜呢，问题种种。

游戏玩法是魔塔那种，剧情是走文艺路线。讲述一名少女逐渐自我救赎的故事（此处省略很多字）最终意向选用了蒲公英（代表女主）、书籍（女主的记事本）来展开设计。

02  入梦的懵懂

一开始立项的时候就沿用了这个方向，故事设定成了一名失忆少女一场大梦之中，遇到了过去的形色各异的人。蒲公英拓展到花，书籍拓展到纸制品，故事调性往古旧、回忆的方向走，便设计了最初的情绪板和方案

情绪版和初期方案

一开始我根本没有把角色当成UI的一部分。或许是玩FGO玩的，他角色画风不统一、风格不统一，所以从来没有觉得这两者之间会有关联（一些个人的拙见）。23k老师提出立绘不搭这点之后，我就开始找立绘并以立绘为主导进行了第二次大修改，重新根据立绘的蓝色蝴蝶、紫色花再加上纸制品的概念修改成了下图的样子。

此时恰好课也上到了关于UE的部分，让我明白了从一开始UE就有问题。之后参考1999和终末地，把旧UE整个换掉，同时把画面偏冷的情感往暖的方向去走。

现在的问题是画面被我调得太暖了，白平衡直接崩掉，显得画面特别闷，而且周围的UI元素都是放在桌面上的，这就显得角色也是一个放在桌面上的纸片，不符合逻辑。最终这个界面从角色信息界面改成了关卡选择的界面。期间23K老师给了我思路方向，把手账地图的概念结合到画面之中。

对画面的白平衡进行了调整，找了大量的手账元素做参考设计，同时关卡选择界面是地图铺在桌子上，也更有合理性了，看上去便协调了很多。

其中还有一个小细节，一开始作为关卡点的信封很简陋没有细节，而且拐角很锐利，不符合作品的柔和的调性，便进行了优化迭代，提高完成度。

就这样，这套作品集的风格稿定下来了，便以此作为参考进行延伸设计。

到此为止的这个阶段的最大的几个收获便是：

1、角色与UI是一体的，要相辅相成，两者毫无关系是不行的。

2、UE是UI相当重要的一部分，与UI的关系就好比骨骼与皮肤。

3、UI画面的疏密、起伏、明暗的节奏能打破画面死板的感受。

4、别搁着一天天的想搞原创，多找点优秀参考比什么都实在。

03  翩梦的轻触

风格稿完成后紧接着做的界面就是章节选择界面，因为我想做一些海报。《幻梦》、《春露轻语》、《暖夏回响》、《秋暮童话》、《深冬繁星》、《迈出》便是女主从入梦到走出阴霾的历程，我最喜欢的是《秋暮童话》篇章的故事（此处省略很多字）。话说回来，章节界面的布局是受到了1999的影响，所以初稿整个界面就是参考他来做的。

我又犯了空间上的问题：海报离墙太近、桌面延伸太浅，让画面显得很压抑，而且海报的标题都是在顶部，海报之间的节奏就变得平均、无聊。还有左上角阳光照射的光感没有做出来。

有个细节，我初稿挂牌的绳子连接处，视觉上感觉是在牌子后面的，如果是现实情况的话牌子就会翻下去，不太能这样稳稳挂住。这一刻我明白了，做设计最终还是在描绘现实，特别是拟物类的，更要符合现实的法则

在修改的时候，我把桌子移除，让牌子与墙的距离拉远，加了小牌子营造层次，都是为了让空间体现出来。至于初稿里的植物前景，因为我担心与海报抢视觉，便去掉了，但这却……

将再稿给23k老师看后，第一个反馈就是画面色调太油了，不透气，建议我把植物加回来，而我担心的抢视觉问题，其实海报被框住之后，它已经算是组件的一部分了，被限制在了框里，加上植物打破这种拘束反而是好的。然后便得到章节选择的最终稿件，把植物一加上，画面一下子就透气轻快了，之前那种沉闷感觉烟消云散。

做完这张界面最大的几个领悟是：

1、设计不能太一拍脑子脱离现实，特别拟物类的更要符合现实规律。

2、节奏感很关键，要避免过于平均，不然就绝对化的平均。

3、光很重要，永远要记得光。

04  长梦的深潜

章节界面完成后，我原本是想到了一开始废弃的角色信息界面，但奈何没有什么灵感，便打算从时装界面过渡一下。出门上街的时候，逛到了服装店，以此为灵感，就把时装界面设定在一个拍摄试衣间。便以胶片、舞台、时尚杂志封面为灵感大概做了个初稿。

初稿被指出的一个问题是，背景显得很3D，角色太2D了，而且背后文字的穿插会显得很诡异，感觉是浮空的，而且UE部分左边太乱太花，交互也不对。

在思考怎么修改的时候，听了23k老师的公开课，讲到了设计的目的是要考虑用户需求。我意识到这套作品集在一开始并没有想这些，甚至被剧情框架给束缚住。我改变策略，把这个时装界面改成了任务界面和主界面这两个较为常见的界面。换个思考方式思路就清晰了很多。

这张界面的问题是，和左边平滑节奏相比，右边节奏平均又笨重，画面不舒服。“故事”、“邂逅”的控件底衬不够实，背景透过来会显得画面很花。此外，主界面角色下方为了压边，加了一抹暗色，被业荣老师指出显得很脏。

最终定稿，控件更小巧精致。给“故事”、“邂逅”的控件底衬加了模糊，透过它看到背景之外又不显得眼花。同时把背景拉远了一些（加了一层光），让层次更分明。

接着来到活动弹窗的环节。

其实活动弹窗的灵感比主界面更早产生，但没有主界面做背景的话，活动弹窗就空洞洞的。这个弹窗一开始被老师指出和我整套作品风格不搭，因为我做这个弹窗的时候风格并没有跟着作品走，而是跟着立绘走了，所以色调选了较深的暗色。

这个初稿给业荣老师看过之后，被指出颜色太黯淡了，看上去灰灰的。之后老师帮我调整了一个大方向，把背景压暗，还将弹窗内的颜色丰富、提亮了很多。

在业荣老师调整之后，画面效果一下子就出来了。这其中最让我思路打开的是，老师居然大幅优化了立绘原本色调。在我之前的认知里立绘是不敢改的。但其实在GUI工作中立绘也是素材的一部分，根据需求调整色调是项目里很常见的需求。此外，业荣老师还提出，尽可能避免立绘暗部出现大面积死黑色，这会让画面显脏。暗部带有色相，会让画面色彩丰富起来。

到此为止，我最大的感受就是：

1、节奏感是从大到小由里至外都要有的，不仅仅是宏观层面，微观层面也要注意。

2、元素尺寸很重要，大一些小一些的感受就会非常不一样。

3、立绘、素材最终还是要为画面服务，只要是画面上的东西都可以根据需求调整。

05  大梦的苏醒

到此为止，所记录的都是我创作过程中的思考，关于技法并没有记录太多，但其中还是用到了很多以前没用过的技法，特别是AI（图像生成）相关的

作品集里贯穿始终的植物们其实都是AI生成然后手绘修正的，这在效率上提高了很多，整个主界面背景也是AI参与的。在找不到素材卡手的时候，AI真的能帮很大忙。

我最后制作的界面，就是登录界面了，是这套作品集最开始想好的画面，为什么放到这里讲？因为登录界面也用了AI参与。

故事里主角一入梦就是在一片花海，所以登录界面就选定了花海，在花海之上我加了许多能勾起回忆的元素，千纸鹤、胶卷、旧书桌、老窗户，还有记录过去的书。因为是梦里，所以真实性就不那么重要了，物体的尺寸我就给的很夸张。

到具体执行的时候本来我想试试看能不能用AI出个大概的方案，结果因为不同的东西多了，而且是以这种奇妙的方式组合在一起，AI根本理解不了要生成什么，所以我只用AI生成了一片花海，至少这个效果是很好的。

至于花海上的物体，我选择了用3D辅助一下，稍微搓了点简单玩意输出放到花海里，再用AI跑一下统一画风。

最后调个色、处理一下物体的穿插细节和光影，就得到登录界面的背景了。

最后加上UI和标题。

以上就是这套作品的全部界面了，来整体看一看吧。

（注：以上作业为个人原创UI作品，角色立绘与道具图标来源与网络，仅做练习素材，不进行商业使用。感谢原作者，如有冒犯，请联系删除或署名。）

06  梦境的回响

作品完成体和最初的想法有很多不同。过程中收获很多，感悟也很多。最大的感悟是，好的作品必定有一个完备的设定、一个明确的用户目标、一个确立的情感表达。有了这些在铺开设计的时候会非常顺畅，可能不用想太多灵感就会自己冒出来。

记得23K老师在一开始说过“苦干八小时，不如思考三小时”，大意如此。“人是一支有思想的芦苇”。如果没有思想，人和芦苇真就没区别了。而且最好是能有一位优秀老师指引，让思考方式契合到轨道上。

只能说我很感谢那位推荐我报叶子学堂的人，也很感谢叶子学堂的老师们。以上，便是我与这套作品集的故事，感谢你能看到这里，愿您能安享好梦。

指导评语：

叉歪同学对细节极其注重，虽然他是转行学员，但我感觉他简直就像是先天UI圣体。每次反馈修改后都有意料之外的惊喜。希望他可以继续保持对细节的追求，随着行业经验的积累不断进步～

指导评语：

叉歪同学作为一名转行学员，真的非常努力。而这也证明了，认清自己现状，全力以赴，一定能获得巨大进步。虽然行业竞争进入了深水区。但你只要清楚自己的目标，并为之努力，我们叶子学堂一定能帮你加速！

Powered by Froala Editor