万字长文｜终极图标设计指南——理论篇

编辑  导语：图标是用户界面弗成 缺少的元素，能够有效赞助 用户解决很多问题。本篇文章作者分享了有关图标设计的基础理论，从多个方面讲述了图标的历史、意义、使用办法 、设计作风 、类型以及规格尺寸、交互层等，一起来学习一下吧，希望对你有赞助 。

如今的用户界面中，图标绝对是弗成 或缺的元素。虽然绝年夜 多半 的图标都很小，甚至不被人注意到，然则 它们赞助 设计和用户解决了许多问题。

图标是可用性和导航的症结 ，用户能够感知到图标的功用，然则 只有设计师才会明白，想要让图标简约、可用还富有表示 力，要消耗 若干 时间和精力。

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

扎实的基础是拔高的前提。乔布斯曾经说过：“细节至关重要，花费时间仔细打磨是值得的”。

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

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

一、什么是图标

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

在不合  场景下图标的表达寄义 也会有不。

我们从广义和狭义两个角度来做概述：

广义：具有指代意义的图形符号，具有高度浓缩并且  可以快捷转达 信息、便于以及的特性。应用范围  异常 普遍 ，包含 软件、硬件、网页、社交场合 等公共公共场合  。所谓无处不在。例如，男女茅厕 标记 ，和各类 交通标记 。狭义：应用于计算机软件方面。法度模范   标识，数据标识，命令选择、模式信号等。图标有助于用户快速识别并且  执行命令和打开相关法度模范   文件。具有相同扩展名的文件具有相同的图标。

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

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

二、图标的意义

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

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

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

随着世界越来越忙，越来越嘈杂和全球化，它将在未来加倍 重要。

三、图标的优势

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

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

1. 图标转达 信息快


自己 对图形的理解和接收能力就比纯真 的文字要快。图形能更简单清晰且很直不雅 的展示。

2. 图标转达 信息准


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

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

3. 品牌塑造稳定


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

4. 减少用户辨识时间


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

四、图标的类型及设计属性

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

1. 对象 图标


1）线性作风

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

2）面性作风

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

3）混合作风

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

2. 启动图标


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

3. 装饰图标


装饰图标最主要的应用区域，集中在首页的快速入口上，也是今天多半 应用中会使用的组件。

1）渐变作风

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

2）轻质感作风

条理 简单，用色素雅清洁 ，采取 轻投影、轻渐变的办法 设计。这类图标具有一定的立体感，能给人轻盈、简洁、精致的感到 。

3）轻质感作风

条理 简单，用色素雅清洁 ，采取 轻投影、轻渐变的办法 设计。这类图标具有一定的立体感，能给人轻盈、简洁、精致的感到 。

4）2.5d作风

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

5）实物贴图作风

采取 了真实摄影物体的设计作风 ，它不属于完全依靠我们创作和绘制出来的。

6）MBE作风

MBE是从扁平化的潮流  中逐渐演变而来的。

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

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

五、如何选择线性还是面性

基础功能  图标是应用法度模范   或网站使用最频繁的图标。主要作用是替代或者帮助 文字来引导用户。

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

线性图标顾名思义用线条来表示 绘制。面性图标也就是一个物体的剪影，用块来表示 语义。

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

从视觉上来说，线性给人的感到 是较为轻量、简约。

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

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

通常设计拿到需求时，首先考虑的是图标的识别效率，究竟 图标最重要的作用是快速传递信息。

线性图标的线条比较  微妙尤其是形状边沿 时更容易被识别到，面性的特征就会被忽略失落 。

综上所述，具体如何使用，需要了解图标的实际作用是什么，然后做出选择。市面上的应用年夜 多是用线性用在功能  图表为主，面性用在功能  区，吸引用户点击。线面结合用的比较  少。

六、如何准确运用图标

1. 面性图标的运用


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

面性图标不建议在列表中年夜 量使用，原因是形式与功能  之间的关系，面性图标的特点是视觉表示 力强，不具备高效的识别性，对于功能  分类的列表页面，视觉重点是功能  的名称，图标的作用是帮助 文字表达，需要快速无差别  识别功能  ，并不需要高效引导的作用。

2. 面性与异形图标的运用


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

通过二者的这一特征，于是做了这样的设计。第一排的面性图标都是用户的高频使用的业务板块，视觉上强引导为用户优先做出选择，这就是一种高等 的设计手法！

3. 用图标区别视觉层级、业务板块


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

七、图标的用色原则

首先看一下微信以及支付宝的图标设计，不难发明 运用了四色系原则。

包管 四个色系是比较  合理的，红、黄、蓝、绿也相符 年夜 多半 业务场景属性。

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

抛开四色系原则，我们也不难发明 一些应用上使用了纯黑色的线型图标。其实纯黑色用的好，比四色系更容易凸显逼格，加倍 高等 。比如  得物、小黑盒。一个是产品  特性，潮流  相关，一个是传递品牌特性。

黑色象征着崇高  、稳重、科技、潮流  。黑色是一个很神奇的颜色，可以庄重、文雅 ，也可以让其他颜色（亮色）突出出来。不难理解，得物为什么用黑色，潮流  相关，凸显个性、有逼格；小黑盒用黑色，与游戏相关，年夜 多是男性用户居多，并且 品牌中有“黑”，也契合品牌。

八、图标的年夜 小规范

1. 图标年夜 小


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

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

2. 图标粗细


为了包管 图标能够看清，图标的粗细也有相应的要求，太细会存在看不清的情况。

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

3. 物理年夜 小&视觉年夜 小


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

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

也就是视觉年夜 小。需要通过人眼去判断赓续 的微调年夜 小和比例。视觉年夜 小是感触感染 上的视觉。

除了正方形跟圆意外，还有菱形，三角形。在绘制这类图形，一定要注意视觉年夜 小。别再让别人说你的图标不统一了。

为了包管 图标的视觉统一，通常会借助网格（keyline线）

4. 什么是图标网格


把图标网格当成一种约束，让你的图标集坚持 规范统一。网格是一个框架，让你的图标坚持 统一。

5. 什么时候使用网格


网格是一个框架结构，会在这个基础上图标会坚持 一致。如果未来这些图标被其他人维护的时候，网格也可以起到很好的作用。

网格很像遵循的规矩 ，让其他设计师在最开始就明白图标的尺寸、以及设计规范。

当然并不是所有时候绘制图标都必须  先建立网格。如果你要创建  跨越 50个图标以上的图标集时，网格还是很有需要 的。

你要使用同一种作风 创建  很多图标，网格有助于坚持 视觉网格统一 。

另一个情况是当你要给现有的平台设计图标，而这个平台有自己的图标网格。

如给 iOS或Android 设计图标, 你最好使用它们平台的网格规范。这些网格确保它们在各个平台上坚持 网格统一,你应该遵循这些规矩 ，确保和平台的作风 坚持 一致。

九、图标常用尺寸

1. iPhone图标尺寸规范


@2x格局 使用机型：iPhone 4，4s，5，5s，5s，s，6，6s，7，8，XR；

@3x格局 使用机型：iPhone 6P，6SP，7P，8P，X，XS，XS Max；

2. 安卓图标尺寸规范

3. iPad图标尺寸规范

十、如何统一图标

1. 创建  凝聚力的图标集


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

2. 为什么图标应该具有凝聚力


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

就像在现实世界中与伴侣聊天一样，可以使用图标与数字世界中的人进行交流。

在一组使用样式不合  的图标就像在一个句子中混合使用不合  的语言–即使您很好的被人们所理解，人们也不会认真看待 您。

1）坚持一种作风

这是要使图标漂亮且一致的症结 。在确定图标的样式之前，请勿开始制作任何图标。

有很多样式和样式变体。最常见的是：轮廓图标，字形，平面图标，拟形图标，手绘等。一旦确定了未来图标的样式，请坚持使用该图标集中的每个图标。具有不合  样式的图标引人注目，但效果并不睬 想。它破坏了整个集合的凝聚力，美感和价值。

从决定使用哪种样式的那一刻起，所有设置的图标都应使用相同的样式制作。不要让作风 各别 的图标杀死场景并破坏其背后的辛苦工作。

2）坚持 相同的作风

这与坚持 相同样式略有不合  。

每种作风 都有其个性。例如，可以制作成千上万种不合  的轮廓图标变体。然则 选择正确的样式同样重要。

图标是详细的还是简约的？有粗线还是细线更好？还是混合线宽？那角落呢：它们应该是圆的还是尖的？要使用圆形或对接帽吗？

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

3）年夜 小相同

坚持 集合中每个图标的年夜 小相同。它们不仅应该在相同年夜 小的方形框架中，并且 看起来也应该相等！

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

4）使用网格

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

5）在整个集合中使用相同的元素

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

6）使用相同的调色板

相同的颜色组合应该保存 在集合的所有图标中。选择颜色，将它们添加到色板，然后测验考试 使用它们。

十一、B端、C端图标的差别

1. 图标内容差别 化


C端产品  的图标设计需要突出自己的设计理念，还要与其他产品  形成个性化、差别 化，尤其是竞品。

设计进程 中尽可能与产品  品牌结合，让用户快速记住你的产品  （品牌）。所以C端产品  的图标设计更具备奇特 的视觉作风 。

B端产品  的图标设计则不需要过于差别 化，主要强调图标的表意与实际需求一致。在图标表达上差距不克不及 太年夜 ，同质化较为严重。

2. 不合  的设计难点


C端产品  图标更多偏向趣味性，不太会考虑业务层，更多重视视觉表示 与优化

B端产品  图标更多取决于业务。在B端的设计场景中，很多图标是与各类 业务名称联系关系 ，而业务名称庞杂 多变，往往去思考每个业务所表达的特殊寄义 。

3. 不合  的着重 点


C端产品  图标数量较少，然则 使用的场景十分庞杂 。当形成一套视觉图标体系的时候，要把多场景的图标进行串联，需要考虑不合  功能  不合  页面之间的联系。比如  首页功能  区、分类区、小我 中心等，都要需要包管 整体性。

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

十二、小结

整个图标设计分为三篇来讲述的。

《理论篇》主要讲述图标设计的概念以及设计原则等理论内容；《工作篇》主要讲述工作中图标设计进程 以及图标落地；《分享篇》主要分享图标设计的对象 、图标网站、图标设计团队或者设计师。

第一篇内容就到这里结束了。

本文由 @卡洛设计 原创宣布 于人人都是产品  经理。未经许可，禁止转载。

题图来自 Unsplash ，基于 CC0 协议。

转发了