UI设计来说必不可少的技能是：图标绘制

图标绘制是UI设计必不可少的也是最基础的技能之一。

那么图标到底有什么作用呢?

图标比文字更具有辨识度，更形象生动易于记住，能让用户快速识别事物，找到相应功能。

一、什么是图标（icon） 在现实生活中，公路的标志牌，卫生间，公共场所禁烟标志等图标都能起到让人们生活更便捷，更快速获取信息的作用。

二、图标的分类 1．线性图标 线性图标是通过粗细一致的线条绘制，高度概括出来的图标，既能让人赏心悦目，又给用户带来创造和应用的乐趣。

线性图标通常用2px的粗细绘制，也有3px,4px甚至5px的粗细度，这得根据具体产品的特性而定。 作为轻量级的设计语言，线性图标能降低对用户的视觉干扰，让用户注意力集中在产品核心功能上。 1.1应用场景 通常出现在标签栏，工具栏，列表页等弱化视觉重点的地方，也会偶尔出现在首页等主要功能入口，比如经典案例:支付宝。这是因为支付宝功能很多，而且都很重要，如果换成面性图标，对用户会形成很大的视觉干扰。

1.2风格分类 1.2.1圆角图标 圆角图标给人以亲和力，也有柔软，软弱的一面。在图标设计越来越精美的今天，圆角图标的应用行业已经越来越广泛。比如女性，母婴，儿童，旅游...

1.2.2直角图标 直角图标给人以锐利，坚强，果断，不拖泥带水的一面。 投资理财的时候需要人们果断作出判断。理财有风险，投资需谨慎。 直角的感觉让人当机立断，不拖泥带水，快买快出。 如果用圆角就感觉柔一点，感觉做事优柔寡断。所以一下子在金融领域被做成了标杆式的功能图标。

1.2.3高光图标 高光式图标是传统绘画的产物，我们在传统绘画的时候往往最后一笔都是添加高光，起到画龙点睛的效果。 高光式的功能图标采用里细外粗的规律

1.2.4双色图标&颜色点缀 双色图标在实际应用中非常广泛，也是跟百搭的那种。 一种可以有彩色跟无彩色结合，有彩色的颜色可以是企业色，可以是代表行业或者产品的颜色跟无彩色黑色相结合。 一种是主体色跟点缀色组合而成的双色，使用时要考虑到当前界面中的配色不宜过多，多了就容易花。

2、面性图标 面性图标是由一根封闭的线造成了面，面性图标同样具有大小、形状、色彩、肌理等造型元素。

面性图标风格干净清爽，简洁大方，视觉占比较大，具有很强烈的视觉表现力，通常用于应用界面的主要功能入口(如金刚区)。 面性图标可塑性很强，样式丰富多样，通常又分为反白和正形(异形)两种。 反白是指有底部色块背景，上面填充白色形状的图标;正形是指没有底部背景，单独的图形图标。反白图标的设计细节比正形图标更加丰富多样，视觉效果更加强烈。 2.1应用场景 首页的金刚区算是APP雷打不动的不明文规定了。 其次就是个人中心的列表页了，还有标题前的点缀，我们经常在标题前加个小竖条装饰标题，起到突出标题的作用。 标签栏的选中状态也是多数用面性表现的，以此区分线性图标的未选中状态。

2.2风格分类 2.2.1不透明度图标 不透明度图标是通过调节图标的部分面性结构来增加层次感，从配色角度属于同色系

2.2.2轻渐变、轻折叠、轻投影图标 比纯色的丰富、有轻微的立体感，刻画出设计的精细度

2.2.3色块不透明 同纬度的色系不透明，少量使用30%-40%的使用比，具体的不透明度数值看感觉调

3、线面结合图标 线条+面块的巧妙结合起来的图标。一般出现在年轻化，文艺型的比较有个性的产品当中，美妆类产品也经常会出现。

线面结合图标也是一种很出彩的风格，线是高度概括的图标，这时候面更多的是充当装饰点缀的作用。 面的表现方式也有很多种，可以是单色的，渐变色的，也可以像MBE风格那样提取主体结构形成的面，也可以提取图标里面有闭合路径所形成的面。 这种风格应用也非常广泛。 3.1应用场景 除了首页的功能入口，个人中心的列表流内容会使用线面结合型图标，我们经常看到的还有首次进入的引导页会使用，还有出现异常情况的缺省页，这些小插画型图标，也是线面型图标。

3.2风格分类 3.2.1浅主题色点缀图标 这类图标最好是全是主题色，再用主题色的20%- -30%不透明度在内部点缀，个性感强烈。

3.2.2MBE图标 配色大胆，个性饱满，周围常伴随布林布林的特效。