22届实体班A酱同学的作品总结复盘！

22届下半年的实体班完美收官！

同学们的作品都太过精彩

今天为大家带来的是实体班优秀毕业学员——A酱同学的作品《时之都市》

让我们一起看看A酱同学是如何对学习期间作品进行复盘的吧~~~

设计师： A酱

指导老师： 皮皮、23K

01

决定做一套二次元风格带有科技感的作品

收集资料

定立绘，参考图偏机甲方向，参考元素有卡扣、拼接元素，点线装饰较多。

定情绪版，偏向潮流感、科技全息投影方向。

-角色与前期素材感受

02

初级情绪版

大致确定参考图和主题元素后，开始制作最初的情绪版。先确定了世界观剧情：经过改造的机械少女保护都市的故事。

关键词：机甲、电池、电源接口、芯片、HUD面板、全息地图等。

另外还找了一些颜色参考，根据与角色的适配度，选定了几个方案整理，初步确定了要做的几个界面。

03

第一版

落地我首选了角色属性界面。

构图选择了以角色为中心的居中构图，角色属性界面是以UE为主的弱包装界面，能做的构成还是很有限，所以为了丰富界面的设计，我在两侧的UE排版上花了一点小心思。

第一版设计稿先确定了UE，根据情绪版的关键词和颜色参考，背景上做了弹框和科技点线面元素的装饰。为了突出轻薄感，底板和控件我选择做一些半透处理再装饰一点点的点线丰富层次。

完成后，发现以蓝色为主的界面主题色没有什么特点。按钮的选择状态和常态也没有作出区分，交互的层次没有拉开，界面效果并不是很理想。

第二版

分析完第一版的问题后，先针对颜色的问题进行了修改。

调整了几个版本的主色调，也相应修改了一些小控件的颜色搭配。根据立绘的用色，降低了点缀色的饱和度，以高级灰为主。

最终确定第一张绿色版本作为主色调，同时绿色给人生物科技的感受，很契合我的主题。

（内心Os：粉色的风格其实也不错，但是科技感略微有些弱，只好放弃。)

最终调色版

最终版

解决了颜色的问题之后，接下来就要解决层次没有拉开的问题。

按钮的选择状态和常态在轮廓上做了区分。

为了更突出科技感，右侧的信息改成了带小透视的HUD面板形式。结合原有的复古科技的感觉，装饰细节侧重于面与线的结合。增加了光感和倒影的处理。

关于细节部分点线面提取，很多同学会根据自己的初步感受直接生搬硬套而不是提前进行分析。除了分析包含哪些点线面造型外，面状装饰和线条的关系、距离、比例，点状装饰一般会出现在哪些结构附近等规律也需要总结出来。尽可能把原画作品内产生的装饰节奏应用到控件中去，才能保证产生有体系的视觉语言。从这个角度来看，这张图还是有非常多的提升空间的，在控件设计上和原画结合的不够紧密

抽卡界面

做好角色信息这张偏弱包装的界面，想尝试制作一张偏展示型的界面。

展示型界面可以在排版和构成上做更多变化，元素的使用上也有更多的选择。

第一版

做的比较简单，大致确定了构图，添加了一些元素。但效果不太好，有点松散，前后层次依然不是很分明。

第二版

修改前又收集了一些素材，想做成地铁屏幕的形式。也想在这个基础上加上HUD的元素。

调整了人物位置，拉开控件关系。修改后视觉观感上更整体了。

考虑到所有界面的适配性，上半部分取消了曲面屏的设计，只在下方做了透光和投影的设计。

一些小控件外形是根据机械立绘身上提取了一些图形元素，又在边角做了点线的处理，最后一版改出了想要的效果。

进行到这一步的时候，结合立绘的战斗感和绿色给人的感受，脑暴的第一联想就是军队和迷彩。

在作图的过程中并不是一开始就把所有的元素和可能性都确定好的，在这期间会不断地有新的想法涌出，我们只需要在这些想法中摘取最合适的方向进行推进即可。

情绪版的迷彩贴图参考

因为是现代科技，所以，挑选了几何图形的拼接迷彩。更加时尚，简洁，符合风格。

迷彩图形的应用

在开第一张图的时候，立绘本身所带的元素，可以尽量的多提取一些，除了分析角色身上装备的结构线产生的大量折线段的造型，圆角，以及色彩配比这些具体的图形外，我们还可以围绕角色所可能身处的环境，去想象这个世界中可能会出现的物件，思考这个世界的建筑感受，制造的工艺水平等等，从而拓展我们对轮廓、材质的想象空间，并将它们整理出来，选择其中适合作为视觉元素的关键词进行落地。-最终版

在这个阶段第一张角色属性界面中提到的元素和造型已经被复用到这个界面里。那么就出现了一个问题，大量重复图形的组合比例，疏密关系，很多同学往往在这个阶段控制不住疯狂的做加法，但是对于这套的风格来说，应该是偏简洁干净的扁平效果，所以尽量避免图形的大面积应用。

圆角的大小尽量不要太大，要配合立绘的风格。避免过大造成的Q版感过强。还有斜切的角度，做到统一。增加科技感。

所谓的科技感是来自于一定的秩序感，工业化的批量生产。如果斜切角度不统一，圆角尺寸不一致，半个像素等降低品质的细节问题，会出现较强的手工感。

同时在斟酌控件造型时，需要避免装饰过多产生的负空间平均，抢了主体造型的识别度，也就是我们常说的“碎”。

LOADING界面

一开始是想延续角色属性的风格，背景用都市的剪影来点题，最终展现的效果比较平庸。字体的设计有些碎，没有带着复古科技味道。

新的一版中加了HUD的元素，尽量实现各界面的元素统一。

重新设计了字体，笔画做粗了一点，单个字瘦长一点，在复古简约的同时又有科技感。

第一版

第二版

LOGO对于一套作品来说还是占有一定分量的。

对于这个LOGO，字体设计不一定非要面目全非的设计才是好的设计，结合立绘给你的干净简洁感，字体也可以适当的做一些减法，只对笔画的首尾部分做一些小的设计，根据立绘适当做一些斜切，机械的接口切割，再添加一些小的直线丰富点线面即可。

关于背景部分还是有点不满意。

背后的电脑视觉元素稍微有点抢了标题字体。左上角部分点线面装饰密度较重，令画面的重心稍显不平衡。可以考虑给右下角增加一点类似左上角的数据装饰作为呼应。同时弱化背景，让标题显得更清晰。

关卡地图界面

我想结合地图做成界面，一开始没有做的很复杂，还是延续了前几个界面，做了平面的HUD方案。

在对比了之前的界面后，想要与之前的界面作出颜色明暗上的变化，在点缀色不变的情况下做个暗调子。

于是有了第二版，做成了全息投影的方案。

信息层根据地图角度做了透视。但因为建筑的矢量化工程太大，考虑到时间问题先搁置了这个方案。

折中后，选择了第三版作为落地版本，最终呈现出的效果也还不错。

第一版

第二版

最终版

单纯的平面地图形式使用较多，带透视和景深的视角可以增加界面的沉浸感，同时丰富全套作品构成多样性。

在这个过程中大家可以根据自己制作素材的能力量力而行，如果会使用3D辅助，可以利用置换贴图制作地面，并用材质制作发光全息图。如果还没有掌握3D软件，尽量去搜寻一些质量较好的素材。

不要用PS的矢量工具死磕！！！

弹窗界面

弹窗界面就选择了常规的排版方式，主要是在一些弱层次上做了设计。

底板上的迷彩元素也是贯穿了每个界面，还做了一些小控件的设计。

整合包装

最后将所有界面放在一起对比之后，对元素、主题色等统一进行了调整。使作品更加统一。

整套作品从定稿到完成时间一个半月，在作图过程中感觉比第一套流畅很多。

虽然有些方案需要比较长的工期并没有继续下去，

但是最终完成稿也达到了我的预期。

我总结了之后需要努力的方向

1.效率

第一张定整体风格的设计稿上花了很多时间。

一些小控件会很纠结，导致时间的拖延。

接下来的制作过程中，会给自己定一个时限，先以整体为主，避免无意义的时间浪费。

2.风格化

希望下一套作品时可以对主题选择有更多的想法和突破。

对风格的选择上更放飞自我，产出更亮眼的高精度视觉亮点。

在之后的工作与学习过程中，多接触各种风格，提高自己的审美。

3.扁平图标设计

扁平图标的设计是我很感兴趣但相对比较薄弱的项目。

之后会加强这方面练习，在自己的作品中丰富一些扁平图标的设计作品。

4.字体设计

我希望之后可以在字形的创意上做更多突破。

字体的材质细节上做的更丰富一些。

5.其他工具的结合

目前也在做一些3D的练习，希望之后的作品中可以结合3D做一些场景化的界面。

而且在之后的UI工作中动效也是我想要学习的一环，可以让作品的流程更加完整。

最终点评：

很棒！非常好！很大的进步！

时间规划上比我预期的要久，以后要牢记UI设计是为了项目服务，时间节点是非常重要的事情，在规划创意方案的时候要结合制作成本考虑。

寻找视觉和落地的平衡点~

那么本次的分享到此结束~撒花✿✿ヽ(°▽°)ノ✿

你这么好看(♥∀♥)

务必留下赞赞~

Powered by Froala Editor