图标是可用性和导航的关键，用户能够感知到图标的功用，但是只有设计师才会明白，想要让图标简约、可用还富有表现力，要耗费多少时间和精力。

　　我们每天接收到各种信息，美的丑的，很多时候我们看的都是别人家谁做的高端的，拔高自己的同时，基础不能落下。

　　图标是现如今UI界面中可用性和导航体系的核心组件。所以，这篇文章分为上篇、中篇、下篇三部分，仔细总结图标的基础知识。

　　从图标的历史出发，谈及到图标的意义、如何使用、设计风格、图标类型、规格尺寸、交互层等多方面。

　　上世纪九十年代伴随IT产业出现的一个技术测绘，原指计算机软件编程中为使人机界面更加易于操作和人性化而设计出的标识特定功能的图形标志。

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

　　狭义：应用于计算机软件方面。程序标识，数据标识，命令选择、模式信号等。图标有助于用户快速识别并且执行命令和打开相关程序文件。具有相同扩展名的文件具有相同的图标。

　　UI设计中图标主要被划分为两大类：标志图标以及功能图标。标志图标，即手机APP应用的启动入口。

　　由于这是用户接触app的第一印象，具备品牌传播的属性，决定了用户去留问题。功能性图标，主要是app出现在app、网站内部，具备功能性引导的功能。

　　随着人们工作越来越忙，图标已成为了生活中的一部分。帮助我们快速定位，帮助我们快速的做出决定和行为，以及帮助我们找到需要的东西。

　　图标连接着整个世界。不管你使用什么样的语言，作为视觉语言的图标都发挥着巨大的作用。例如机场中的导航标识、商场中的指示标识等等。图标能够快速的传达信息。随着信息技术的提升以及信息过剩，人们的注意力更加短暂和稀缺，

　　图标成为了这个充满噪音和过多无价值信息世界的救生员。通过简单快速的查看就可以知道图标中携带的复杂信息。优秀的图标成为我们生活中的救生员。无论你需要找到正确的应用程序或产品页面上的特定功能，又或者当你在外国城市搜索地铁时，图标都可以节省你很多时间。

　　图标设计是界面设计中很重要的元素之一，一套高质量的图标对产品的品牌形象和用户的体验影响是巨大的。不仅能提升界面美观度、降低用户理解成本，还能塑造品牌形象、提升用户的安全感和转化率。

　　同时图标具备传递信息非常的高效的特点。现在人类能够维持注意力的时间越来越短（已经比金鱼还短了），因此传递信息的速度就越来越重要。

　　通用图形能跨语言、跨地区、跨文化群体表达出同样含义，不易发生混淆。同样文化背景的人对文字理解可能会不一致。

　　如果用图形就会一目了然。用户已经经过了长时间不同平台长期培养，很多图标已经形成了视觉习惯，比如齿轮代表设置、铅笔代表编辑、放大镜代表搜索。已经超越了语言地区的限制。

　　同一个品牌、同一个平台保持同样的风格图标，会让人感到很专业。并且一套好的图标从独特性、象征性、记忆性上都更易于感动用户，激发人们点击的欲望。用户始终在商家提供的环境里，能提升安全感。例如支付宝、拼多多、网易严选等优秀的互联网产品。

　　人体左脑主要从事思维逻辑处理，右脑主要形象思维，从事视觉图像、音乐、空间几何处理。据科学表明，右脑是左脑处理速度的60万倍，意味着人类对图像的敏感度是非常高的。所以我们可以将文字图像化，从而快速引导用户接受相应消息，进行操作，减少理解阅读思考的时间。

　　图标根据具体实际用途大体可以分为三大类：工具图标、装饰图标、启动图标，而根据设计风格分类主要有线性风格、面性风格、渐变风格、剪影风格、长投影风格、卡通风格、轻质感风格、拟物风格、2.5D风格等等。

　　线性图标，即图形是通过线条的描边轮廓勾勒出来的。多数人对它样式认识的第一反应应该是使用纯色的闭合轮廓，比如上图案例，线性图标的创作空间看似不多，但实际上有非常多的调整空间。特点是简约、概括、视觉识别度良好，设计感强。

　　面性图标，即使用对内容区域进行色彩填充的图标样式。同样，在这类图标中，也不是只能应用纯色的方式进行填充，还有非常多的视觉表现类型。

　　在设计图标类型的时候，也不一定非线性和面性不可，有一些热衷创造和尝试的设计师，还创作出了混合型的图标，既有线性描边的轮廓，又有色彩填充的区域。

　　启动图标的设计比前面两种类型的图标说起来更难，因为它实际上就是把「LOGO嵌套进系统图标模版」的图标。主要分为文字类型、图形类型、插画类型、图标类型，拟物类型。

　　多为单色渐变，颜色过渡清新自然，是目前的主流设计风格之一。除用于图标外，渐变风格可使用的场景非常多，如APP中的背景图、按钮等。

　　层次简单，用色素雅干净，采用轻投影、轻渐变的方法设计。这类图标具有一定的立体感，能给人轻盈、简洁、精致的感觉。

　　介于2D和3D之间，那么它就是在平面上面看立体的2.5D透视原理图像，就是物体的正面光面和暗面三面组成，也算是伪3D。首先，设计师需要设计出明暗、背面、正面三个面的图像之后，拼合后只需要做图像、光影关系的调整，以及整体配色和感觉。

　　最原始的MBE风格特征非常明显：粗描边、描边断点、深浅色调搭配出阴影质感、一般以单色调为主、背景有些低饱和度的小圆圈和加号点缀。粗线条描边起到了对界面的绝对隔绝，突显内容，表现清晰，单色调化繁为简，富有质感。

　　后期，也有众多设计师对这种风格进行了改良，描边断点、背景点缀、色彩溢出不再是必要的，进一步简化了设计。

　　表现形式也比较简单无非三种：线性图标、面性图标、线面结合。那么我们在工作中如何正确选择使用呢？

　　二者的表现形式却有很多种，同色的、渐变色的、叠加的、断线等。在点线面基础三元素中，从面积大小角度考虑，点最小，面最大。

　　面性给人的视觉重量最重，通过面积、色彩、质感等相对于线性图标具备更强的视觉信息层级，更具引导性。

　　线面结合的方式相较于前两者，样式表现会更为丰富，形式感最强。但由于图标内元素增多，如果运用不得当，很容易显得杂乱。

　　面性图标视觉表现力强，有效的强调页面的视觉重心，能更好的突出主要业务重心，所以常用在首页做为主要流量分发。很多产品在节日或活动中，常常改变面性图标来营造气氛。

　　面性图标的第一视觉是一个色块，异形图标第一视觉是个形状，所以面性图标视觉表现力强，异形图标识别效率高。

　　下图为京东的个人中心页面嘛，图标有主有次，有视觉层级，强化用户常用的或者产品主推的业务，为用户做选择。

　　一般情况下，四色系能保证用色的合理性。当然这并不是绝对，只要视觉舒适，符合业务，是可以突破四色系的。

　　iOS的网格大小要求是4的倍数，最小热区是44pt。安卓的设计规范要求网格大小是8的倍数，最小操作热区为48dp。

　　同时需要考虑到不同机型适配问题。@2x要求是4的倍数，被2整除适配@1x；@3x要求12的倍数，适配@1x、@2x。建议是采用48pt为常规尺寸。

　　在@1x一倍图设计模式下，以48px为基准，常用的图标粗细有：1.5px、2px、3px、4px。需要注意在48X48px画布上绘制线px时，当不同场景缩放，需要按比例进行调整：图标为32X32px时线px时线px。

　　在绘制一整套图标的时候，总被说视觉不统一，大小不一样。这是因为你按照物理大小在做图标，忽略了视觉大小。分别是什么意思呢？

　　物理大小是形状之间的宽和高相同，不是计算面积；视觉大小是，正方形的边长跟圆形的直径相等的情况下，绘制出来的图形，视觉上圆总要小一点。

　　创建一个图标很容易。创建一些美观的图标也不难。这使它们具有凝聚力，可能会是一个难点。完成一组连贯的图标是一个艰巨的挑战。下面有6个有用的技巧，可以掌握如何创建精美的具备凝聚力的图标集。

　　图标设计不仅仅是代表真实对象的图形符号。这是一种独特的语言，其中每个图标都是一个具有自己含义的名词。

　　有很多样式和样式变体。最常见的是：轮廓图标，字形，平面图标，拟形图标，手绘等。一旦确定了未来图标的样式，请坚持使用该图标集中的每个图标。具有不同样式的图标引人注目，但效果并不理想。它破坏了整个集合的凝聚力，美感和价值。从决定使用哪种样式的那一刻起，所有设置的图标都应使用相同的样式制作。不要让风格各异的图标杀死场景并破坏其背后的辛苦工作。

　　每种风格都有其个性。例如，可以制作成千上万种不同的轮廓图标变体。但是选择正确的样式同样重要。图标是详细的还是简约的？有粗线还是细线更好？还是混合线宽？那角落呢：它们应该是圆的还是尖的？要使用圆形或对接帽吗？

　　确切知道为什么每个元素都按您的方式进行。考虑一下您未来图标集的所有可能细节，并一直坚持到最后。

　　想象两个相同大小的形状–圆形和正方形。正方形将始终看起来更大，因为它会填充更多空间。应该进行一些更改以使它们在外观上相同。例如，将正方形缩小一点。

　　出色的图标集始终使用网格制作。只是不要过度使用它们。如果您发现图标看起来不适合网格，请调整！好的集合有一个网格。

　　很简单：如果您在一个图标中使用了20px的圆圈，另一个图标则需要一个类似的圆圈，只需复制它即可。毫无疑问，在整个集合中具有相等大小的对象会使它看起来更具凝聚力！从其他图标复制元素将为您节省大量时间！

　　设计过程中尽可能与产品品牌结合，让用户快速记住你的产品（品牌）。所以C端产品的图标设计更具备独特的视觉风格。B端产品的图标设计则不需要过于差异化，主要强调图标的表意与实际需求一致。在图标表达上差距不能太大，同质化较为严重。

　　C端产品图标数量较少，但是使用的场景十分复杂。当形成一套视觉图标体系的时候，要把多场景的图标进行串联，需要考虑不同功能不同页面之间的联系。比如首页功能区、分类区、个人中心等，都要需要保证整体性。

　　B端产品图标的使用场景比C端少的多，但数量往往是C端的好几倍。需要通过图标保证不同业务之间的关系，所以B端图标更讲究延展性。

　　《理论篇》主要讲述图标设计的概念以及设计原则等理论内容；《工作篇》主要讲述工作中图标设计过程以及图标落地；