想写这个很久了，感谢双哥在这方面的悉心指导，结合了双哥的课程和之前看的B哥的小红和小黄两书的图标篇章，我对图标的理解深入了不少，于是查阅了一些资料，结合了自己日常工作中的一点小小的经验写了点东西，算是一点自己的总结和沉淀。其中一部分是和须臾期的小伙伴们一起努力总结出来的成果。

本文中采用了大量的图标案例做解析，其中有些是设计小伙伴们的作品案例，我在此声明：本文不会用作商业用途，只做案例分享；对于反面例子，也没有贬低打击的意思，只做学术交流。希望大家以交流分享，互励共勉的心态看待。

纲要目录

基础篇——图标的认识

进阶篇——三大基本原则

拔高篇——增加图标细节技巧

实操篇——如何快速做好线性图标

我们都知道，图标绘制是UI设计上必不可少的，也是最基础的技能之一，初学UI也是从这步开始的，看似简单的图标其实里面包含了不少科学的内涵。知微见著，从一枚小小的图标或许可以看出设计者对细节的把握和对整体风格的掌控。

那么问题来了：图标到底有什么作用呢？图标比文字更具有辨识度，更形象生动易于记住，能让用户快速识别事物，找到相应功能。在现实生活中，公路的标志牌，卫生间，公共场所禁烟标志等图标都能起到让人们生活更便捷，更快速获取信息的作用。

一「基础篇——图标的认识」

在移动应用中，图标通常主要分两大类，一种是应用图标，即应用商店，桌面上的图标；另一种是功能图标，即起到表意功能，取代文字或辅助文字作用的图标。这里主要讲的是后者：功能图标。因为要根据用户关注的重点和产品的功能优先级来合理分配视觉，所以图标多种多样，分配在产品不同的地方，起到不同的作用。功能图标主要分为三种：线性图标，面性图标，线面结合型图标。

1. 线性图标

（1）特点

线性图标通常用2px的粗细绘制，也有3px,4px甚至5px的粗细度，这得根据具体产品的特性而定。作为轻量级的设计语言，线性图标能降低对用户的视觉干扰，让用户注意力集中在产品核心功能上。

（2）应用场景

通常出现在标签栏，工具栏，列表页等弱化视觉重点的地方，也会偶尔出现在首页等主要功能入口，比如经典案例：支付宝。这是因为支付宝功能很多，而且都很重要，如果换成面性图标，对用户会形成很大的视觉干扰，所以采用线性。

· 功能入口

· 辅助按钮

· 列表流

· 标签栏

2.面性图标

（1）特点

面性图标风格干净清爽，简洁大方，视觉占比 较大，具有很强烈的视觉表现力，通常用于应用界面的主要功能入口（如金刚区）。面性图标可塑性很强，样式丰富多样，通常又分为 反白 和 正形（异形）两种。反白是指有底部色块背景，上面填充白色形状的图标；正形是指没有底部背景，单独的图形图标。反白图标的设计细节比正形图标更加丰富多样，视觉效果更加强烈。

（2）应用场景

这个用的地方可就多了，首页的金刚区不用说，算是APP雷打不动的不明文规定了。其次就是个人中心的列表页了，还有标题前的点缀，曾记否：我们以前经常在标题前加个小竖条装饰标题(手动dog脸)，起到突出标题的作用。标签栏的选中状态也是多数用面性表现的，以此区分线性图标的未选中状态。

· 功能入口

· 列表流

· 标题点缀

· 选中状态

3.线面结合型图标

（1）特点

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

（2）应用场景

除了首页的功能入口，个人中心的列表流内容会使用线面结合型图标，我们经常看到的还有首次进入的引导页会使用，还有出现异常情况的缺省页，这些小插画型图标，也是线面型图标。

· 功能入口

· 缺省页

· 列表流

·引导页

二「进阶篇——三大基本原则」

随着扁平化设计的发展趋势，设计师越来越注重图标的简洁和美观。现在各种不同的APP中充斥着各种各样的图标，如何做出优秀的图标设计是我们需要思考的问题。我们不求做出多么狂拽炫酷吊炸天，秒天秒地秒空气的绝世好图标，只求做出实用易用好看的图标即可。我们可以从下面三个方面分析：

1. 表意准确——预见性

图标作为一种信息传递的载体，意在通过简洁的符号告知用户事物，让用户记住某件事物，如果表达出来的意思不准确，乱七八糟，让人一头雾水甚至颠倒是非，那图标存在的意义何在呢？其实这个准则对我们设计师来说很简单了，设计来源于生活，高于生活，图标都是根据生活中的实物演变而来的，一些简单的图标很快就能画出来。但是我们偶尔也会遇到一些比较抽象的事物，一时之间很难想到通过具体的图标来表达（这里假设iconfont也没找到），举个栗子：比如“众筹”，一种社会行为，你会用怎样的图标来表示呢？这里有个方法：衍生关键词，搜寻图库，化抽象为具体。

众筹的衍生关键词：众人，筹钱，团结，希望，感恩

通过搜索关键词图片我们发现：都有一种手托着金钱的样子，展开联想，我们可以初步确认图标的大致样子。

【验证预见性】

检验图标是否具备预见性，可以脱离文案背景做测试，询问周围的人（同事，室友）在不看文字的情况下，是否能立刻得知这是表达什么的图标，如果八成的人都能“蒙对”，那就算有预见性了。

2. 美观度

俗话说：颜值即正义，表意准确后，我们就要看颜值了。绘制图标最好运用布尔运算，图形组合（这个后面会提到）。一个图标的美丑决定了用户对这个图标的观感，甚至对整个产品的好感与否，一定程度上影响了用户的留存率。精致漂亮的图标可以大大增加用户的点击率，提高业务转化率。

3. 统一风格

在同一个产品中保持同样风格的图标显得尤为重要，统一性是保证设计品质的重要一环，统一风格的图标设计会极大提升设计品质。降低用户认知成本，使人心情愉悦。其实统一的元素有很多，我罗列了四种主要的:

（1）细节构成统一

· 视觉大小统一

虽然实际大小不一致，但是视觉大小是一样的。同样尺寸的圆和矩形，矩形会看起来更大，所以我们要适当调小偏矩形的图标尺寸，使他们视觉大小一致。

· 圆角统一

·透明度统一

· 断线统一

（2）元素统一（品牌基因）

在图标中反复使用同一种元素，能直观体现出他们一致性来，这样做的好处是能具有很强的辨识度，令人印象深刻，用户很快就能记住这些图标，加强了品牌建设。Google Play图标尤为经典，他们图标采用一致的三角形作为统一元素，保持着一致的视觉风格。还有就是我们熟知的优酷视频，大家对那些蓝色粗描边，中间红色点缀的图标印象很深刻吧，一看到这些图标，立马想起优酷。这就是品牌基因的强大之处。

（3）视图角度统一

这里可能有点难理解，视图角度有平视，俯视，侧视等几种角度，我们平时说的扁平化其实多数指的是平视的，或者俯视，都是看到一个平面的。我记得当初在广州做一个足球产品的时候，有个赛事筛选ICON，做的是鸟瞰视角，差不多与水平面呈45度夹角度视角，与其他图标就不一致了，设计组长，也是我的好朋友提醒这个图标我不一致，还有点像“另外一个东西”！！！说到这里，顺带提一下“网易严选”的产品图以前的拍摄角度都是斜45度角的，所有产品角度高度统一，要求很严格，现在没有了。

（4）复杂程度统一

这个好理解了，就是不能一个复杂，线条，细节，粗细变化很多，另一个则极简。下面两组图标有复杂的，也有简单的，复杂程度不是很统一，相信大家一眼就可以看出来。

原则进阶版

1.  突显性

在一些产品中，有时为了突出重要业务，会故意把相应图标做得与众不同，让用户更加容易注意到，助力增长核心业务。

问：支付宝这组图标中，你觉得哪个比较与众不同，更加突出？

没错是“淘宝”，这个图标无论在颜色上，大小上，粗细度上都很有“心机”地做了调整，突出淘宝业务，不然你以为这是设计师的失误造成的吗？

问：为何上下这两组图标样式不统一？

上面一组是人们的衣食住行，必不可少，是刚需，消费频次很高，下面一组例如培训，周边游，火车票等都是较长时间会用到的，不属于消费高频次功能，所以有意弱化视觉，突出上面的业务重点，如果所有都是重点，那就没有重点了。

2.  趣味性

阿里健康品牌图标库，这一系列图标都有一个可爱的笑脸，趣味十足，给人亲切，热情，舒适的视觉感受，也符合医疗健康的服务准则（这点同样适用于品牌基因）。

3.情感化

不同样式的图标设计能表达出不同的情感，给用户传达不同的心理感受，通过圆角大小，线条粗细，颜色搭配等细节因素能传达出方正，圆润，可爱，清新等不同的感受。这些得根据产品业务属性来决定是哪种情感表达。

第一排：社交娱乐类产品，色彩丰富多样，传达出 活力，年轻的感受

第二排：金融理财类产品，角度锐利，传达出 严肃，权威，公正的感受

第三排：文艺类产品，角度圆润，传达出可爱，清新，舒适的感受

三「拔高篇——增加图标细节技巧」

对图标有了深刻的认识，知道了设计原则后，我们来看看怎么在图标上增加设计细节，呈现设计精细度。

「线性图标」增加细节技巧

(1）颜色点缀——在图标局部，最好内部做线条更粗的品牌色点缀的元素，提高辨识度。

(2）断线处理——在图标局部断开线段，注意样式一般在四个角附近断开，缺口尽量不要出现在正上方和正下方，这样会破坏整体结构，缺乏美感。

(3）缠绕型——这种缠绕感的图标有些一笔画成的意思，难度系数5颗星，很容易弄巧成拙，不建议大家使用。

「面性图标」增加细节技巧

（1）白色面性微渐变——白色轻微渐变，一侧设置好白色不透明度，或者浅的背景色，衬托出背景环境色

（2）色块不透明——同纬度的色系不透明，少量使用30%-40%色块使用比，具体不透明度数值自己看感觉调。

（3）折纸阴影——白色图标内部两个部分交界处使用极少面积的渐变背景色色块，使两者有轻微的立体效果，刻画出设计的精细度。

「线面结合型图标」增加细节技巧

（1）浅主题色点缀——这类图标最好是全是主题色，再用主题色的20%-30%不透明度在内部点缀，个性感强烈。

（2）MBE描边风格——这是2017年非常流行的一种风格，dribbble上很多此类风格图标，配色大胆，个性饱满，周围常伴随布林布林的特效。

（3）创意无限——线面性图标可塑性强，添加细节样式很多种，只要你创意够好，效果会很出彩的。

四「实操篇——如何快速做好线性图标」

很多小伙伴们在做图标的时候，都习惯性直接去iconfont下载现成的icon，这样虽然方便，但是图标整体视觉风格不统一，有的描边粗有的描边细，前面说的很多东西都会不统一。所以建议小伙伴们可以去confront找找参考，看到合适的下载下来或者截个图，再根据自己统一的视觉规范和脑洞创意进行相应绘制，这样的页面视觉效果才会更加出彩。(不要直接用，不要直接用，不要直接用）

基础规范-尺寸大小统一

在绘制图标时，首先要规范大小，那么如何很好的规范图标设计大小呢？以底部tab栏为例：首页我们要建立统一的绘制区域

进阶规范-视觉效果统一

为了保证图标大小与呼吸感的一致性，我们需要设定一些辅助尺寸，来保证所有图标的视觉大小统一性。而且辅助图形框可以复用在实际工作中。首先先建立5个图标尺寸，辅助图形框，建立图标构成规范，如下图：

将所有图形居中对齐，使用这些框架构成规范，能非常好地规范图标的统一性

基础规范-形状构成

所有的图标都建议使用基础图形进行组合，运用布尔运算绘制，这样可以保持图标整体的合理性。尽量不要使用钢笔工具勾勒（除非是细节点），钢笔绘制随心所欲不严谨，美感大打折扣。

进阶规范-圆角与描边

在绘制图标时还需注意，线性图标描边宽度的统一，圆角度数的统一，保证图标每个细节都能做好完美。实战设计中，广泛尝试，定义好圆角度数和描边粗细后，落实执行好。

不同的描边宽度会有不同的视觉效果，较低的圆角度数显尖锐，较高的圆角度数显圆滑，只有在特殊的产品上，为了体现个性和锐利感才会不添加任何圆角度数。一般我们在绘制图标的时候都会添加一些圆角度数来减少图标的尖锐感。

1px效果不明显一般不会使用，2-3px宽度视觉感纤细，4px宽度视觉感较强，比较个性。实战过程中，根据产品特性来调整。

设计风格-产品特性

绘制图标时，要考虑到产品的特性与风格，例如漫画类，直播类产品特性偏向于娱乐，就需要更具有趣味性的图标。居家类，阅读类产品偏向于文艺风格，就需要更加简洁的风格。

有些产品为了加强品牌效应，会将一些tab栏（尤其是首页的）图标替换成产品LOGO标识，增加品牌LOGO曝光，让人更容易记住。

等你熟练了以后，绘制图标可能没用到这些步骤，似乎简化了许多，但潜意识里还是这么做的，这些步骤已经在脑子里完成了。

「篇末总结」

从简单到高深，从单调到丰富，还是那句话，图标还是得自己一笔笔画，亲身经历从无到有的全部过程才能体会到设计的乐趣所在。阿里巴巴图库和花瓣网是个很好的寻求设计灵感的网站，绘制图标时可以去看看寻求灵感，相信这样图标会做得越来越好的（花瓣网主页：胡克菌）。

图标的知识海洋广袤无垠，这里提到的只是冰山一角，但还是希望写的这些对萌新小伙伴们有一点小小小小的帮助，大神绕道。这些知识点梳理和技巧总结可能还不是很到位，若有错失，大家及时指出，欢迎补充，感谢阅读～