很多小伙伴画图标时都会遇到各种各样的问题

这个图标我是用线性的还是面性的啊？

leader说我这个图标太丑了，我....

leader说你这个图标和某某某APP完全一样啊，没有体现我们产品的风格调性

leader说你的图标怎么一会这个风格一会那个风格？

leader说你不要老是想着什么创新，你觉得是创新了，但是用户真的看得懂这个icon的含义么？

怎么样？遇到这些问题时是不是瞬间感觉要高血压了都，没关系，在今天的这篇文章中这些问题的答案都会一一为你解开

本文脑图结构

一 图标基础知识

什么是图标

含义

图标分为广义和狭义两种

广义是指具有指代意义的图形符号，具有高度浓缩并快捷传达信息、便于记忆的特性。应用范围很广，软硬件网页社交场所公共场合无所不在，例如：男女厕所标志和各种交通标志等。

而我们今天所讲的内容主要是指图标的狭义概念，即应用于计算机软件方面，包括：程序标识、数据标识、命令选择、模式信号或切换开关，状态指示等

图标发展历程

关于图标发展的历程这里简单通过时间线过一下，就不长篇大论了娓娓道来了，让大家快一点看到干货

1981年施乐8010星 – 首届消费者的GUI电脑

是世界上第一个GUI（图形用户界面）的计算系统。我们可以看到，像计算器，文件，文件夹和回收站这些图标的核心形状一直到现在都没有太大的变化，十分经典。

2011 年 iOS5 (下图左)的发布标志着图标设计上升到一个新的高度，此时的图标设计更加偏向拟物，写实风格。因为此时大多数人才刚刚接触到智能手机，而写实风图标能够让用户更为直观的理解图标的含义，这一点十分重要。

iOS15（下图右）的发布，图标早已从写实风转向了扁平风格，更为简约

为什么要用图标？

信息传达

它具有高度浓缩并快捷传达信息、便于记忆的特性。这是由于图标是图形属性决定的，相对于文字有先天的优势

举个例子方便大家理解

一个网页有中文，英文两种语言，如果整个界面都是纯文字，那这个界面对于不懂另一种语言的用户来说那就是看天书啊。

如果你加上图标，用户即使看不懂文字也能大概了解每一个选项的功能是什么，所以说图标是一种世界通用的文字，具有普适性的特点

视觉降噪

图标相比于文字在空间上更为小巧，能够精简页面，提升页面美观度，降低对于用户的视觉干扰

例如图中红框内的图标，如果改成文字，不仅降低了页面的美观度，也使得其在搜索框内占用了比之前更多的空间，进而导致当用户在输入文字的时候易与右侧文字图标混淆，干扰用户选择，并且也不符合产品极简的设计调性

视觉锚点

在界面中加入图标还能起到视觉锚点的作用，能够吸引用户目光，让用户快速锁定聚焦在某一模块，从而快速选择，提升决策效率

举个例子来更好的理解一下，左图中因为有图标的存在，你可以很快的锁定某一功能点，整体视觉也相对简洁，具有美感

而如果把界面中的图标都换成文字，用户的第一感觉一定是眉头紧皱，文字的不规则性，有长有短再加上需要阅读理解的负担给用户产生了压迫感，破坏了图标作为视觉锚点的作用，干扰了用户快速锁定某一模块。

人天然对于图形的感知度要高于文字，今天的文字也是由像图形的象形文字演变而来。

界面风格传递

我们都知道图标的风格种类众多，每一种风格都能传递出不同的产品调性，是严谨的，活泼的，还是科技范的，文艺范，青春活力范的等等等等。所以一个产品它所用的是哪一种风格的图标都是经过严谨推导，选择出来的，并非是看哪一个视觉美观度高就选哪一个，这点十分重要。

比如微信这样一个用户基础极为广泛，用户数量超过 12 亿的超级 App，它的产品设计理念，是把微信当做一个工具，让用户可以更高效的交流和社交

基于微信的用户群大+工具属性，我们可以很容易的理解为什么微信的 UI风格是目前这个样子，整体简洁，素雅，沉稳。所以基于这样的 UI风格产出的图标风格也是如此。

二 图标的分类

前面说到界面风格对于图标风格的影响，这里就详细讲解一下各种类型的图标及适用场景，从而在上手设计图标的时候能够准确高效的选择适合此产品风格调性的图标，这一点对 UI界面至关重要。

按图标样式分

线性

色彩

单色

首先我们来看下线性单色图标，其实线性单色图标是一种应用范围最广的图标类型之一，因为其视觉层次较少，风格沉稳简约，通用性强的特点，在 App 中多用于底部 tabbar 或其他偏功能类的区域

下图截取的是目前市面上最为主流的几个 App，可以看到他们的底部 tabbar都是线性单色的图标风格

适用场景：

底部 tabbar；功能类图标区域，如“+”“分享”“设置”等

多色

多色线性图标是由两种及以上数量颜色组成的移动图标样式，多用于风格较为年轻，活力，娱乐属性的产品上，如社交类，旅行类产品等

适用场景：

底部 tabbar；功能类图标区域

渐变

渐变线性图标是将渐变色应用在线条上的一种图标类型，一般情况下很少有 App会将其应用于常规界面上，原因在于渐变线性在常规的白色界面中视觉辨识度一般，如果是面性渐变风格的图标就会好很多，所以在使用场景上有一定的局限性。

适用场景：

运营类界面；暗黑界面，如车机 ui 等

样式

断线

常规的线性图标其路径是封闭的，而断线线性图标是在封闭路径上打开了一个缺口。相较于封闭线性图标，断线线性图标在风格上更为 轻松，活泼，年轻

多层叠加

多层叠加的线性图标一般由两种及以上颜色构成，产生层叠效果，在实际 App 中较少使用

面性

特点

面性图标简单来理解就是将线性图标内填充颜色，相较于线性，面性图标的视觉体量感更大，更易吸引用户视线。在设计的表现上样式和种类也更加丰富

颜色

单色

单色面性图标风格沉稳简约，通用性强，多用在工具类，金融类等产品中使用

适用场景：

底部 tabbar；功能类图标区域

多色

多色面性图标是由两种及以上数量颜色组成的移动图标样式，多用于风格较为年轻，活力，娱乐属性强的产品上，如社交类，旅行类，视频类产品等

适用场景：底部 tabbar；功能类图标区域

渐变

渐变面性图标是指将渐变色应用在图标上的一种类型，它的使用场景和图标风格与多色面性图标风格类似

适用场景：底部 tabbar；功能类图标区域

样式/质感

拟物/写实

拟物或者叫写实图标，通过大量的细节刻画，高光，投影，阴影，材质质感的添加，相较于其他风格图标有着极强的辨识度，易理解，点击感强。比较有代表性的拟物图标就是 iOS5系统图标了，当然国内的锤子手机的系统图标设计也是细节感，质感拉满的精品。

绘制难度和技法也是所有图标中难度最高的，新手还是建议从单色线性图标练起

轻拟物

轻拟物图标是在拟物风之后兴起的一种风格，相比于拟物风，轻拟物弱化了细节刻画，高光，投影，材质，但同时保留了立体感

2.5D/伪 3D

通过统一的角度快速低成本的营造出伪 3D 的效果，对于需要展示产品细节和方便用户理解产品演示过程，所以多用于 B 端官网

多层叠加

由两层及以上数量的面性图形叠加而成，增加图标的层次感，视觉丰富度

毛玻璃

较为流行的一种图标风格，通过磨砂玻璃的质感，在页面中传达出轻盈，通透的视觉感受

线面结合

多色

线面结合的多色图标就是由两种及以上颜色，线性+面性构成的一种图标。和面性多色图标一样，多用于风格较为年轻，活力，娱乐属性强的产品上

渐变

渐变线面图标，顾名思义就是由渐变色的线性或面性图标构成的，一般情况下渐变色多用于面性，线性用纯色

按图标功能分

功能性图标

功能性图标在 UI界面中是最为常见和最为基础的图标，是构成界面的核心元素之一，一般情况下功能性图标的表意性和辨识度要放在第一位，美感度其次，也就是说功能性图标一定要让用户能够直接快速的理解其含义。关于什么是图标的辨识度，表意性这点我之后会展开来讲

下图红框中的图标，都是较为典型的功能性图标，你会发现这类图标的表意的准确度，辨识度都是非常高的，甚至不用看文字你都能明白这个图标是干什么的，这点至关重要

装饰性图标

装饰性图标，顾名思义就是以装扮，烘托整个页面氛围感的一种图标，跟功能性图标不同，装饰性图标要突出美观度的同时兼顾辨识度

比较常见的装饰性图标有各大电商 App 在大促活动时的节日活动图标；标题，文字前的装饰性图标，一般出现在表单或教育类，运营活动界面

下图红框内图标就是在春节期间上线的突出春节氛围的装饰性图标

三 图标设计规范

相信读到这里你一定对于图标的发展历程，图标类型的细分有了初步的了解。但是当你上手准备绘制图标的时候又会有些疑问蹦了出来，比如我画的图标为什么单个看还行，但是放在一起就感觉不协调，很奇怪

我认为我画的图标非常的有创意，比好多主流 App 的图标设计的都好看， leader 却 说你这个图标虽然有创意，但是用户也很难直接看懂啊，重画！

leader 说你这个图标跟竞品的图标有什么区别吗？看起来一模一样啊

针对这些大家在工作或练习中经常遇到的情况和问题，我总结了以下四点关于图标设计的规范指南，看完后上面的问题就能迎刃而解

图标辨识度

前文在讲功能性图标的时候其实已经提到了图标的辨识度问题，这里详细展开聊下。

首先我们要知道为什么要用图标，绝大多数的情况下，图标是能够替代文字或者辅助理解文字含义的作用，也就是说一个图标的形状能否像文字一样能够快速让用户理解含义至关重要，这时图标的美感度要放在第二位。

举个例子，上面的几个图标乍一看样式，相较于常规的图标，设计很大胆，有创意，但是却忽略了一个很重要部分--辨识度，如果不加文字你知道这个图标想表达的含义是什么吗？我想八成是不知道的

再举个例子“设置”这个功能性图标在每个 App 中都会出现且几乎设计的都差不多，不管是一线大厂的超级 App-微信，淘宝，支付宝，还是行业独角兽-滴滴，头条，天猫，饿了么等，他们的“设置”都是齿轮状或螺母状的形态，具有高度的一致性。可能你会有疑问说为什么形状不能有点创新性呢？一定是这个形状吗？这不就是互相抄袭吗？

答案是不能，也不算抄袭，还真就要是这个形状。因为齿轮和螺母在用户的心智模型中已经锁定为“设置”的功能了，就像每个手机的“电话”功能图标是不是绝大多数都是座机的电话手柄的抽象几何形，这些样式的图标不用文字说明用户也看得懂，从而快速决策。

也就是说图标的创新一定要有目的性，为什么而创新，这个创新能够解决什么问题？带来什么收益？如果为了创新而创新那还不如不创新，甚至你创新后的图标用户难以辨识，导致辨识感差。

像上图的几个“设置”的创新样式，如果不告诉你含义你知道是什么意思吗？是维修？菜单？还是其他什么含义，虽然第二张图看起来也像个螺母的形状，但还是会觉得哪里有些别扭，没错这是一个 8边型，相对于设置常规螺母状的 6边型多了两边，可别小看多的这两边，直接导致辨识度大打折扣

当你出现这样的疑惑时就说明这个图标的辨识度出现了一定的问题。

所以总结一下，我们在绘制图标之前一定要考虑清楚将要绘制的图标形状是否能够很直接的表达出该图形所想表达的意思，千万不要模棱两可，这点十分重要。

关于如何判断我想画的这个图标的形状是否具有普遍的辨识度，有个小技巧推荐给你，可以打开 iconfont这个网站，在里面搜索你要画的图标，比如“收藏”，在搜索出来的结果中可以发现绝大多数的收藏图标都是“爱心”或“五角星”的形状，大概率说明这两个形状在大多数 App 或网页中在表示“收藏”这个含义时会用到，所以你就可以放心大胆的用这两个形状作为基本形去设计更符合自己产品调性的图标了

风格统一性

我们在思考图标风格是否统一的问题上，可以从大的方面往小的方面去思考，就会很清晰了

类型统一 —— 风格统一 —— 体量感统一 —— 角度统一 —— 粗细统一（针对线性或线面图标）—— 圆角统一

下面展开讲下

类型统一

所谓类型统一，就是你在绘制前就要设定好自己画的这一系列图标是什么风格的？是单色线性？多色面性？还是线面结合？锁定好一个风格后再去着手绘制，这样不至于彻底放飞自我，一会画个单色线性的，一会又画个单色面性的。

举个栗子，上图就是一张典型的图标类型不统一的案例，有线性的，有面性的，还有线面结合的，虽然也能表达出图标的含义，但是视觉美观度，统一性却大打折扣。

风格统一

可能有人会说，图标的类型统一不就是风格统一了吗？其实不然

上图两个界面中红框区域的图标都是类型统一的线性图标

但是能很明显的看出两组虽然都是线性图标但是给人的感觉却截然相反，第一组给人的感觉亲和，可爱的风格调性;而第二组给人的感觉是硬朗，潮酷的风格调性;

是什么原因导致了这些不同？仔细分析可以发现左图的圆角远大于右图，仅此一个小小细节的变化就能够导致两组图标风格的千差万别

所以千万不要只关注图标大的类型。忽略了像粗细，圆角，断点，颜色，质感等等这些细节，它们都是构成一个图标不同风格调性的关键一环。

体量感统一

图中三个图形的长宽尺寸，线的粗细都是一样的，可为什么给人的感觉却是正方形大，三角形和圆形小，一个重一个轻呢。

这其实是我们视觉感官的作用导致的，在我们的眼里，同样尺寸下的正方形要比圆形和三角形都要大，所以在我们绘制图标的时候要注意保持视觉大小的统一，也就是体量感的统一，而不要去追求数据大小的统一，毕竟最终用户看到的是他感觉到的大小而非数据大小。

角度统一

图标要整体保持呈现出来的角度统一，如果是斜 45 度，那么这一组图标都要保持斜 45 度。下图为饿了么的一组金刚区图标，可以发现他们的倾斜角度都是保持一致的，整体呈现出来的效果就十分和谐，具有美感

还有就是图标内部的线条也要保持角度的统一性

粗细统一

一组图标中要保持描边粗细的统一，比如粗细都是 3px，或者 4px 等，千万不要出现像图中的粗细不一致的情况。

圆角统一

圆角统一的逻辑其实和描边粗细统一是一致的，一组图标中要设置一个统一的圆角度数，例如 8，那么都要是 8.

图标美感度

图标除了满足表意性的基础功能之外，作为设计师的我们要对图标美感负责，那一个图标怎么去评判好不好看呢？评判的标准是什么呢？

我认为一个基础的判断标准就是在视觉感受上是否饱满和灵动感。怎么来理解饱满感和灵动感呢？

饱满感相对好理解，就是在一个图标盒子内，你所绘制图标的占比面积是否足够大，千万不要画的过细或占比过小，这样在视觉上就会让用户觉得单薄，不舒服

灵动感简单来说就是要让你绘制的图标看起来不是那么呆板，缺乏变化感，这种感觉对于初学者来说不是很好把握，没关系多练习多看优秀作品你就能有这种感觉了

上图中虽然都是表达出酒店的图标含义，但是做题看起来十分呆板，方方正正，缺少变化感，右图简化了线条的同时做了线条角度的变化，相比之下比左侧灵动很多

风格差异化

目前的APP同质化现象严重，下图是两个知名长视频APP的首页，如果我们去掉颜色同时去掉页面中的logo，不告诉你这是哪个 App，可能你也难以区分这些 App，图标也存在同样的问题

那如何能够避免这种情况，给每一个 App图标融入独属于自己 App 的印记呢？打造出图标的差异感呢？这就涉及到一个 App 的品牌基因了

如何从一个品牌中提取出一个品牌符号，这个符号要足够简约，通用性要强，比如圆形，三角形等简单的几何图形，也就是基本形。不能为了差异化而差异化，设计出一些相对复杂的图形，表面看起来很有个性，实则难以落地，也就是难以落在实际的图标设计中去

因此我们需要根据基本形提取的符号才能代表一个 App 的独特基因属性，打造差异化并且容易落地

比如百度网盘9.0 升级中，选择以“积木”作为网盘的品牌基因，虽然没有定某一个具体的基本形，但“积木”恰恰是由多个基本形构成的--矩形，三角形，圆形；这些看似简单的几何图形却称构成百度网盘图标设计的核心元素，也因此形成了百度网盘图标独特的差异性及品牌基因，十分具有辨识度

四 本文回顾

最后我们一起回顾一下整篇文章的脑图结构，整体梳理一遍会更加清晰

在了解了图标的基础知识，分类以及设计规范之后相信你已经对图标的设计有了整体方向性的把握，下一篇将带来非常多小伙伴期待的图标改版实操篇，敬请期待吧~

如果你有什么疑问，或工作中的困惑，设计中的问题都可以加我微信跟我交流哈，跟我一起倍速成长吧

微信：shejizhishi001

公众号：设计芝士KING

我这里为各位小伙伴们准备了两个大礼包---

1.“精选图标源文件（非商用）+18个图标网站大合集”

2.阿里腾讯等大厂设计师能力模型体系

获取方式：关注公众号后转发本文到朋友圈（公众号同名文章）后添加我微信，回复“图标”或“能力模型”即可获得这个两个大礼包喽！