今天给大家带来的是一篇干货类教程，主要是针对UI设计当中的插图类图标设计。由于插图类图标相比常规图标来讲，对于技法、绘画功底要求更高，所以特地以实际项目中的案例做一个设计分解教程分享出来，供设计师小伙伴们参考！

#图标的基本分类

说到图标设计，那就不得不先说一下UI设计中的图标分类，图标大致可以分为3大类：

1、工具类图标

最常见的图标类型，应用中最基础的功能性图标，也是图标设计中讨论最多的一类，这类图标图标造型简洁概括，具有明确的功能、提示含义。

工具类图标

2、启动类图标

启动图标其实就相当于另一种形式的LOGO

启动类图标

3、插图类图标

视觉性更强，可以增加页面观赏性，当页面内容较少时，可以使用插图类图标来填充画面，常见于app中当空白页、结果页这类信息较少当页面。

插图类图标

#设计过程分享

1、需求描述

新版本将上线“兑换礼品”版块，用户可以通过积分兑换礼品，但是由于线下部署问题，该版块上线时，没有办法及时为用户兑换礼品，所以需要设计一个图标+文案的常规空白页来告诉用户暂时无法兑换，敬请期待。

2、设计思考

用户怀着兑换礼品的目的来到该页面，虽然是一个空白页，但是我希望通过视觉设计可以为用户传递一种“积极”的态度，我希望告诉用户“不用着急，很快就好”；而不是常规空白页的那种冷淡的感受

冷淡的空白页设计

3、设计思路

通过“货车”+“礼盒”结合，告诉用户“礼品正在路上”，希望通过这种方式尽可能地保留用户的期待感。

冷淡的空白页设计

4、设计过程

设计过程

Step-1：手绘线稿

确定设计元素后，先不要急着用绘图软件正式做，做之前先画一个手绘线稿，线稿可以快速呈现方案效果及可行性，避免做无用功。

手绘线稿

Step-2：黑白灰关系

确定线稿后，就可以用绘图软件开始正式做了，先根据线稿制作矢量图形，先用黑白灰推敲画面大关系，暂时抛开颜色的干扰，只把控整体的黑白灰（明度）关系。切记！这一步建议不要先考虑颜色，如果是经验不足的设计师，在这一步同时考虑颜色的话，会很大程度影响设计师的整体把控，并且影响设计进度。

黑白灰关系

Step-3：配色

确定画面关系后，就可以开始考虑配色了，这一步可以先用纯色来做，暂时不考虑渐变色，这样可以保证用最快的速度得到最理想的配色方案，以便下一步进行深化

设计稿配色

设计稿配色

Step-4：丰富颜色&强化明暗关系

这一步我想应该是设计师最享受的一步了，就像画素描一样，深入细节永远是最让人放松、享受的环节了。首先我们需要为画面设定一个光源，然后塑造元素的明暗关系；同时丰富画面颜色，可以将纯色都升级为渐变色，微妙的渐变色可以使整个画面的质感得到提升。

丰富颜色&强化明暗关系

Step-5：补充细节

做完上一步其实整个画面已经完成了80%，接下来我们要做的就是继续补充细节（例如：丰富投影）让画面的层次更加丰富。我当时做到这里的时候，发现礼盒有些单调，所以又加了两个飘动的丝带，让画面看起来没那么死板，并且飘动的丝带增加了动感，很巧妙地为这辆车营造出了一种“疾驰”的视觉感受。

补充细节

Step-6：添加弱层次，增强空间感

当完成主体后，我们可以在背景中增加一些弱弱的元素，比如我增加了一些城市建筑的剪影，从而为画面增加了空间感

#总结

以上就是这个图标的完整设计过程，其实不论是图标还是插画，都需要考验我们的明暗关系把控能力、透视能力、色彩关系控制能力，所以加强基本功才是一切设计的基础。