图标设计指南：从基础认识到专业流程

图标，是一种图形化的标识，它有广义和狭义两种概念，广义指的是所有现实中有明确指向含义的图形符号，狭义主要指在计算机设备界面中的图形符号。对于 UI 而言，主要针对的就是狭义的概念，它是 UI 界面视觉组成的关键元素之一。我们通过图标看到的不仅仅是图标本身，而是它所代表的内在含义。色彩 color、文字 Font、图标 icon、图形 shape、图片 image、空间 space，是我们做平面设计中非常重要的 6 个元素，而对于 UI 设计而言，图标可以说是整个产品的点睛之笔，它甚至可以直接影响着一款产品的形象和气质。

图标历史

图标不是由界面设计师发明的。作为一种交流的对象，它们有着悠久而多样的历史，根植于古代。它们出现在地图、标志、方案、手册和许多其他信息来源中。然而，随着新技术和图形化用户界面的出现，图标经历了新的转折进步。从历史上看，施乐公司在 20 世纪 70 年代初的时候，在功劳中提到了第一个图形化用户界面的图标：图标是在一台名为 Xerox Alto 的机器上实现的，这台机器非常昂贵，并没有真正普及到广大的用户。然而，这只是一个漫长的故事的开始：1981 年，Xerox Star（施乐之星）发布了，它被称为第一台将图标作为界面的一部分的消费类计算机。特别是，它应用了至今为止的文件夹和垃圾箱的图标。下面是图标从 80 年代到现在的发展历程。

图标分类

图标基于功能类型的分类（1）表意图标（又称解释性图标）表意符号是指原本不存在实物的符号，是在发展过程中创造的一种符号，用于表达某些特定的含义或操作行为。而且在发展过程中，这些符号逐渐继承了一些象形符号的特性，将符号本身作为「实物」并且不断演化。例如「箭头」从最初的「弓箭」已经逐步衍生为一种特定的表意符号。（2）交互图标具有双向信息传递能力，不仅可以向用户传递某种信息，引导帮助用户执行特定操作，同时也允许用户向程序传递控制信息，从功能重要程度来讲，它的重要性是最高的。比如：登陆注册按钮，开关按钮，数量按钮，点赞，转发分享等都属于交互性图标。（3）装饰和娱乐用图标通常是用来提升整个界面的美感，加深个性化设计风格，并不具备明显的功能性。这类图标迎合了目标受众的偏好与期望，具备有特定的风格的外观，提升用户线上体验感，迎合受众群的偏好，提升设计亲和度。装饰性图标通常呈现出季节性、主题性、节日性的特点。

图标设计流程

1. 了解图标含义：明白不同图标的使用场景，不同的图标分别代表着什么，了解哪些图标需要使用隐喻，哪些图标使用现实世界中真实的形象。

2. 梳理图标隐喻：脑暴出可能的符号和形象。记住图标的含义和形象之间的关联，以最佳的形式呈现图标，直指本质。

3. 确定图标样式：图标应该是扁平的，线性的，Material Design，是用符号还是借助手绘来呈现。有的 UI 界面有很清晰的要求，比如 iOS 平台和 Material Design，如果 UI 有非常清晰固定的设计风格，那么图标的设计需要尽量贴近。

4. 保持整体设计一致性：注意图标要矢量化，连基本的草图都应该是矢量化的。在 UI 布局中测试图标的设计。

5. 图标设计注意事项：

6. 图标应该是扁平的，线性的，Material Design，是用符号还是借助手绘来呈现。有的 UI 界面有很清晰的要求，比如 iOS 平台和 Material Design，如果 UI 有非常清晰固定的设计风格，那么图标的设计需要尽量贴近。

7. 按照选定的方式来呈现设计，看看它最终呈现是否正确。保持整体设计的一致性。注意图标要矢量化，连基本的草图都应该是矢量化的。在 UI 布局中测试图标的设计。

8. Icons8 的实战案例按照上面的流程，能够绘制出不同样式足够优秀的图标合集。下面是我们在这样的流程下所设计出来的图标示例。

9. 注意事项清单：如果你像我们一样每天都在设计图标，并且保持这样的状态超过 15 年。身为设计师，想必你已经阅读过很多关于图标设计的文章，但是今天的文章不一样，今天我们的文章不会花费很长时间来单独介绍某一个图标的设计，而是设计任何一套图标应当遵循的基本流程，以及一定要注意的 8 个关键的注意事项，你可以将这些东西带入到一些现成的案例当中去验证。这个注意事项清单，也可以被视作为给设计师所编写的图标设计指南，即使设计趋势发生变化，这些规则和经验依然适用。遵循这些规则和技巧，能够确保图标从设计到使用都可以更加无缝和顺畅。我们并没有重新发明轮子，相反，我们会以这种方式来呈现我们的工作流程细节，希望它也能帮你有效地组织工作。