叶子学堂应届毕业生的英伦柴油朋克！

22届实体班作品复盘

~新的一期分享来了~

本期邀请的分享嘉宾是22届实体班的之之同学！

一位应届毕业生的卷王！

话不多说！上车！

设计师：之之   

指导老师：23K、皮皮 

收集资料

在学习期间非常想尝试一套与众不同的二次元科幻风格的作品。初期把目标放在了植物科技相关的科幻题材。

搜集素材期间找到了现在的这张立绘，就打算试试这张看上去有点像蒸汽朋克的风格。

素材来自网络

初期情绪版

通过观察发现背景和立绘人物本身的元素，尝试了解相关的时代背景。逐步完善并最终确定了柴油朋克风格。

筛选关键词

甚至还找了那个年代有关的招贴设计：苏联海报、二战海报等。

我们作为设计师，需要有一定程度对东西方艺术史的了解，才能在分析画面的时候，知道背后的风格描述，从更源头的角度去提取设计元素的特征，让我们的画面更有说服力。

寻找风格

优先制作了风格海报来辅助初期确定画面调性。

根据已有主题和刻画方式找到了另一套立绘并对他们进行了色调调整。增加角色丰富度。

素材来自网络

招贴作为关键词我决定以它作为视觉语言。

草图

抽卡界面

根据初步界面草图，决定从展示型界面开始细化。既有排版，又有控件，美貌和功能兼备。

控件细化

根据上课内容，发现控件的完成度对于整张界面的完成度来说很重要。所以我将重点和精力主要放在控件上，尝试将这些控件做得好看的同时又有意思。

皮皮老师建议我去看一些乙女类游戏和一些英伦复古风格的平面海报，去参考一下他们的排版和控件的层次。工业蓝图可以作为控件的一些点缀，丰富层次。

在十连抽按钮上则选择票据轮廓造型。我甚至脑补了一下动效表现，一个复古电影开场。

很多同学在做界面的时候常常把精力用在大块的背景和精致的人物立绘处理上，但其实控件作为我们界面里面最小的单位吗，它往往也是体现完成度的很重要的一个标准。

一个小小的控件里，也同样需要漂亮的排版，丰富层次和匹配的字体。

系统图标

也是根据工业蓝图关键词，做了一些元素的脑暴联想，用圆规，尺，刻度线、回形针等作为界面中的扁平图形和控件的设计灵感。

很多同学在做扁平图形的时候找不到元素，这个时候我们可以观察立绘，从人物服饰，发饰，甚至是所处的场景中，去做一些提取，这些都是你灵感的来源。也是你情绪版中不可或缺的。

适当的替换一些巧合的角度和图形。这些图形设计出来后，不只是你的扁平图标，还可以用作花纹，甚至替换一些LOGO的字体笔画。

一图多用，不浪费！

期间我想过丰富一下界面色彩，用了一点深橘色，效果并不是很理想，最终版去掉了。

细化对比

合适的才是最好的！

Ps.后续在做包装的过程中发现背景圆形的颜色对比还是过强了，做了调整。在十连抽的控件颜色选择上也做了调整。

角色属性

想趁着这套作品补一下自己的排版短板，所以找了大量参考，在一定程度上减少了我对排版的恐惧。有备不慌~

七日登录

我开始考虑做一张不一样一点的界面。好好利用我的关键词，增加风格感。

于是就有了这个符合时代背景的以老式电脑或者复古打字机为设计元素的想法。在有限的条件下玩出不一样的设计。

前期方案

初版本选择了一个最常规的构图方式，没有做过多的变化。

前期方案

这期间又有了新的想法：打印机打印出的纸张上放领取奖励。但我有一个困惑：按照常理是不是要选择竖版构图，这样打印逻辑才是对的。

老师给我的建议是逻辑对的前提下角度可以不这么死板，形式也可以多样化。

这个过程中我疏忽掉的一点是，已领取和未领取之间的状态对比。皮皮老师给到的建议已领取的换成打印在纸张上的效果从而作出区别。质感做旧斑驳感。这样做既有区别又符合风格的统一。

在奖励的排版上，也建议进行一些调整，有序中做出一些错落的变化，不至于呆板。

很多同学在界面的统一性上无从下手，如果做到统一又变化，最直观的方法就是资源的复用：可以是造型，可以是颜色，可以是刻画手法。都可以作为你的统一性方向。不光考虑到美观，我们做界面对于功能的区分也要明确，未领取和已领取的状态一定要很明显。

给用户一个直接明确的展示，降低用户的理解成本。

LOADING

进度条直接化身成画在纸上的一条延长线！

弹窗

23K老师建议作品里面加入弹窗界面，增加一些项目感。想了两个方向，一个是海报方向，一个是界面框方向。23K老师的建议是，结合关键词电影、做一个电影招贴的拟物弹窗。

字体的选择是美术字还是系统字也是困扰我的问题。

最终为了匹配招贴效果，做成了美术字。

LOGO

命名溯源到时代背景：柴油朋克，以内燃机为代表，于是在内燃机的相关词条下面找了一个词，赋予logo含义呼应主题。

一开始选择的字体，比较柔和，在皮皮老师的建议下，我将所有圆角的地方改成直方角并将“奥”字里面的“米”替换成角色身上的阀门元素。

字体设计，有时候为了更贴合主题风格，会使用一些手法，替换笔画就算是其中一种。把字体也当成一个图形来看，笔画的组合就是图形的组合。替换的图形，一定要直接或间接跟主题相关。并且跟文字的风格和繁简程度也要统一。

“循环”我们可以联想到和循环箭头做结合。增加图形感和设计感。

包装元素

最后包装时所有界面变成瀑布图之后，界面整体感觉更直观了，风格是否统一，细节刻画的程度是否统一，在这个阶段还能整体调整一次。在包装的时候复用一些界面小设计，包装也一样需要风格统一。

整套作品耗时3-4周，我个人很喜欢，把我想设计的点都做到了，达到了我的预期。

未来需要努力的方向：

1.效率：

更加深入的理解了老师说的“想明白”也就是是所谓的设计思路清晰的前提下，情绪版和参考图的收集会非常的精准。真的可以大大提高效率。

2.风格化：

在这套作品中，学到了很多艺术和历史方面的知识。认识到好的设计是需要一些人文支撑的。这套作品在这方面仍有不足。后续会多提升自己对艺术的认知。

3.图形的设计：

图形的复用还有一些不熟练。

字体设计也算是图形设计，也要多加练习。

4.其他工具的结合：

辅助3D建模或一些动态效果的设计能让作品更丰富，这也是我后续需要补习的一项技能。

最后非常感谢叶子学堂23K老师、皮皮老师和其他老师一直以来的帮助！

对顺利完成学业的我也要说一声：辛苦了~

之之同学的图感很好，找到的参考图每次都让我眼前一亮，但是在深度分析参考所运用的美术技法，点线面穿插构成时深度还不够。

在未来还需要反复练习，做到尽量还原味道的同时，保留界面功能的主次关系。

之之同学的设计敏感度非常好，情绪版的完整程度堪称班级小楷模~不愧是小卷王~

经过这一套作品的练习，相信他对于设计的理解更深了一个层次。希望她继续保持热情~对于字体的设计还需要多多练习哦~

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

你这么好看(♥∀♥)

务必留下赞赞~（压上了~）