新手学插画入门指南

插画在UI设计中是不可或缺的一部分，插画师也成为设计行业中比较受欢迎的职业之一，今天我们就来具体谈谈学插画入门知识。

插画应用

1

界面头部

用户进入UI界面之后，都会阅读大量的信息，所以我们需要在UI界面头部使用插画进行概括，这是插画应用的一个重要场景。

UI界面头部插画可以将重点信息列出来，并添加相关的行为，最后以再现、隐喻、重构的方式对文字信息进行最精炼的概括性叙述，就能达到点题的效果，并吸引用户阅读。

应用场景：文章头部、应用功能介绍板块等。

2

活动内容

当产品中出现新活动、重要信息需要告知用户，或者吸引用户点击时，就需要插画了，这是目前的主流UI设计中最为人所熟知的插画适用场景之一，插画的主要目的在于吸引用户关注和触发点击行为。

应用场景：Banner、启动页、活动页面等。

3

整体感需求

插画有着不同风格，所以很多插画师会在颜色、形态、艺术风格方面制作单一品牌的插画作品，现在越来越多的产品都是基于这种需求，使用插画在各个层面制作出属于自己的产品体系。

应用场景：ICON设计、同品类等。

4

新手引导

用户第一次打开应用时，通常会出现新手指导让我们了解应用的基本操作，这里可以将插画放到合适位置进行叙述，让新用户快速了解应用操作，提高用户认可。

应用升级带来新功能时，也可使用这个方法。

应用场景：新上线功能提示、应用更新功能解释等。

5

其他UI界面

插画还可以在一些页面中引导用户情绪，任务完成、操作执行成功等页面，可以使用一些欢快的插画;功能无法执行、网络失去连接、等待与加载等页面，可以使用有趣但能够提醒用户的插画，让用户减少负面情绪。

应用场景：状态空白页、操作成功状态显示、网络断开提示页面等。

插画落地

插画的落地大致分为：基本规范、风格探索、风格确立、画面绘制、检查交付。

1

基本规范

插画师在制作插画之前，先与甲方沟通，了解甲方需求：产品的企业形象、市场定位、体量等，这样可以有效规避偏离设计目标等风险，并提高设计效率。

2

风格探索

与甲方沟通确认插画设计的基本规范之后，就需要根据产品内容等信息，探索需要的风格元素，给插画中的元素赋予整体感。

首先需要找到各种不同风格进行对比，寻找到合适的插画风格，再进行简单的设计，制作出基本的设计稿。在风格测试中我们都需要在于用什么元素作为视觉传达符号更好。

造型风格：

造型风格是设计资产中重要的一部分，以人物素材为例，无论是进行哪种风格测试都需要给起建立统一的比例构造，这是动画人物设计中老生常谈的话题，就是统一的头身比例，人物之间可以有高矮胖瘦的差异，但不能在比例上失衡的太过。

如果绘制组件化人物时，可以准备好统一的骨骼系统以适用与动态应用的扩展。

色彩风格：

探索色彩风格要各色相相互之间权重的控制，可分为：主色、辅色、点缀色，三者理论比例是70%、25%、5%。主色的选择尽量在同一色系中选择，不要超过三种。对于单幅的相对独立的创作来说，只需要定好画面的主导色相并做好色彩上的对立统一关系就可以了。

继续细化，调整大致使用的场景，并考虑整个界面中的视觉整体效果、开发层可行性的最小可行度、易用性、灵活性、可复用性等。

3

风格确立

上线步骤完成，基本风格就已经确立了，这一步是对风格的深入化打磨。需要做到：

将既定的风格实际应用（内部尝试），并套用到接近于实际使用环境的Mockup中。UI界面中的商业插画要保持美观，避免过分鲜明的个性。

4

画面绘制

画面绘制流程一般是：手稿、线稿、上色、塑造、调整。

在手稿绘制阶段需要注意：

（1）画面整体的构图，物体与物体之间的比例关系。

（2）整体透视关系。

（3）画面的疏密组织关系。

（4）远、中、近景之间的虚实关系。

手稿绘制之后转更为电子稿，可以使用PS、AI等工具分图层转稿。 开始上色，这个按照设计情况上色即可，在上色的过程中要注意整体色调的比例协调，以免造成色调的跑偏。 在深入塑造时要注意整体关系。 将画面置于整体视角观察，让整体插画能够有平衡效果。

5

组件复用

作品完工后，让画面中每个元素能被替换和多次利用。

组件化绘制是将画面中的分子元素如：人物、树、花甚至文字等物品进行归类化整理并内置与一个单独的库中，也就是组件库，在需要将某个位置的具体元素进行替换时就可以快速的用库中的资源进行快速替换。 如果继续拆分，可以拆成：人物的某一个关键部位、花草树木的花瓣、枝干等。

6

检查交付

这个阶段是将插画置入最终的使用场景中进行检查并调整。如果面对一些即将上线的具有动效的插画时设计师要注意与开发核实最终实现效果。