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图标

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