本次的指导老师皮总：

案例来源于我们的学员“大雁”，她在来叶子学堂之前做了2年的服装陈列展示工作。是一位效率高，手速快，有韧劲，努力认真，对自己要求非常严格的小姐姐。

这套带有神秘、奇幻色彩的卡通风格作品，从元素的运用到文字的选择都有了很大进步。作品设计过程中不断的追求完美，将这种神秘的气息都非常准确的传达了出来。上对比图！

左After、右Befor

其实，这套作品的设计过程也并非一帆风顺。大雁在经历了几个版本的迭代后，才得到现在这个效果。所以我们在作图的时候，一定要放平心态“慢工出细活”。

确定主题风格出了几版风格稿（下面为筛选后的A、B方案）并与皮皮老师讨论后，最终决定在方案A的基础上继续推进。因为方案A的“神秘”气息更浓，故事感更强。

方案A

方案B

通常的登陆界面一般是由场景图+LOGO组成的，如《阴阳师》《忘川风华录》《哈利波特》等。也有一些以LOGO为主，背景做极简处理，如《明日方舟》《原神》等。

好的UI作品对文字都有较高要求。这里还有个趣事：我们不定时会和大厂的团队做交流访问。恰好一次某美的UI负责人来我们这里想了解学生作品，结果一下子就看中了我们4位学员的作品图。这些图打动他的原因就是文字的设计~甚至把一些效果为卖点的图都比下去了~可见文字设计对界面设计的重要性~

当然，游戏不止登录、Banner这些展示型界面，还有一些列表型界面，这些界面里的标题字（标题字在设计上比系统字高一个层级）和系统字同样也需要符合我们的主题风格。在传达信息的同时，还可以为主题气质加持，那叫一个“般配”！

你可能会问，字体种类这么多要怎么选择才合适呢？今天我们就带大家认识一下字体。

我们大体上可以把字体归纳为3个种类：

1. 衬线体（中文的代表是宋体）

字形特点是笔画上会有装饰，笔画粗细对比明显；衬线体是在书写体的基础上发展起来的，所以它自带一种历史感。特点与感受如下表：

（以上来自网络）

（以上来自往届学员作品）

2. 非衬线体（中文的代表是黑体）

字形特点是去掉了衬线体的装饰，笔画粗细基本一致，变得简洁很多。因为源于现代，所以更简洁易读。特点与感受如下表：

（以上来自网络）

（以上来自往届学员作品）

3. 手写体：

相对于前面两种类型，手写体更加有个性。手写体因为书写工具的不同风格感受也不同。特点与感受如下表：

以毛笔书写感觉为代表的手写体：

（以上来自网络）

（以上来自往届学员作品）

其他书写感觉的手写体：

（以上来自网络）

（以上来自往届学员作品）

以上三种字体在“感受”上是不同的，是什么感受呢？你感受一下。

回到大雁的这套图，根据前面讲的知识点，选择衬线体最为合适~是不是挺简单的？

图中为选择不同的字体，感受一下衬线体和非衬线体的气质。

那么字体选好了，问题也来了。设计感不足，完成度不够。怎么办？

要点1：不要面目全非，只要按需调整

a.在自己的字体库中找个合适的现成字体，之后在其基础上做设计。因为现成字体本身已经过设计，视觉感舒适，以它为基础会更高效~

Tips：平时多留意好看的字体，积累自己的字体库，避免“字到用时方恨少”。

b.找到一个符合界面气质的海报或视觉作品中的字体做参考。把参考的风格特点用到自己的字体中并替换文案。这是叶子学堂训练营里的方法，非常好用。（悄悄告诉大家：叶子学堂各位老师的花瓣分享里有大量优秀的素材，还不快关注一波？）

大雁就是用这个方法参考了下图这个字体。

要点2：添加符合风格的装饰

通常我们会在参考中提取关键元素，然后让它从你界面的全世界路过……无孔不入的那种！文字作为重要内容同样需要。在这里我们提取的元素是“荆棘”。我们需要先对荆棘的轮廓造型进行加工，使他的生长特征可以匹配文字中你想要替换的笔画走势。

画！

换！

Piapiapia就完成啦~ 拿起我手中的小皮鞭！

很简单有没有？如此简单、高效又出效果的方法交给你，应该学会了吧~

来看看效果：

但是！简单的办法也有禁忌：

1. 1.不要雨露均沾！要把他们看成一个整体，选取个别进行重点刻画即可~海王没有好下场！

2. 2.设计虽重要，但文字传达信息的基本作用不要忘。识别度仍然是不可忽略的。如果你加了设计识别度却下降了，那你做文字是干嘛嘞？

   

要点3：整体的排版节奏

简单来说就是位置、大小等排版上的处理。这是一个即便你的文字没有做设计，也能通过排版的节奏感提升字体整体逼格的方法！

a.突出你要表达的词汇，确定你心中的“C”位。注意英文的断句处理~不要为了C而C，强扭的瓜不甜。

b.整体大感觉做好后，再微调字间距。

c.调整“C”位节奏，做出前凸后翘的曲线美，让它更闪耀！

d.上点小质感！加点小气氛！补充点装饰文字丰富层次。到这里基本就完成啦。~撒花~

最后看一下对比效果~

除了文字之外，这种对轮廓造型的修改思路，能不能用到界面的其他内容中呢？当然可以啦！让我们再次祭起前面提到的“从你界面的全世界路过”大法。

1.角色界面的头像区，之前大雁只考虑到了功能，而缺少元素的结合。荆棘的造型在这里就可以为功能服务一下，还可以与其他界面作整体呼应。

2.在组队界面中也同样利用荆棘替代原本的造型特征——可以说荆棘的使用无处不在。背景暗纹、信息框、交互控件等等。这种方式会极大加深观看者对界面统一性的感受。

Tips：在一个界面里字体最好不要超过3个，但Logo这种特殊字体除外。

3.只要能想到的地方都可以使用关联元素。在和大雁沟通的时候，皮皮老师给到的建议是要根据界面功能和需求去做设计，发挥自己的想象力。可以做一些有趣的小设计，让原本比较刻板的控件与主题之间的联系更紧密。

其实对于荆棘造型的利用，不只限于控件这些小东西。在界面背景的处理上同样可以运用起来。在这个过程中，皮皮老师给到大雁的建议是尽量打开思路，多做尝试。

如果我们作图遇到了思路卡壳，可以去叶子学堂各位老师的花瓣里找灵感~ 前面辛苦画的素材可不能浪费，用起来！（再次提醒，作图时需要根据特定的界面需求做相应的设计。不可以无脑的复制粘贴）

除了背景和界面的功能底图中出现的荆棘元素外，“雾气”作为另外的设计元素也起到了烘托气氛的作用。是不是神秘感MAX！！

这里文字“WIN”的设计思路同前面讲到的一样。结合荆棘图形，保证界面的统一性。

最后一张是活动banner图。只要确保符合整套界面的主题，那么在处理上就可以更跳脱一些。比如我们要做一个万圣节活动。那么僵尸手臂、南瓜灯、小蝙蝠，月圆之夜都是万圣节必不可少的元素！

在皮皮老师的帮助下，大雁通过这套作品的迭代也完成了一次在UI设计道路上的蜕变。思考方式、解决问题的方式都有了进步，思路也更开阔，对整体的把控也有了显著的提升。

那么本次分享到这里就结束了，也欢迎大家随时联系叶子学堂，我们一直都在这里等你哦~~

Powered by Froala Editor