cover

概述

本文原本是在 2017 年末的时候设计团队内部的培训内容；2018 年 11 月又在 ThoughtWorks 的对外设计沙龙上做了一次分享，从此便一直在电脑的硬盘角落里落灰，花点时间整理一下，分享给大家。

内容比较基础，主要以 设计概念 和 设计思路 为主，干货稍微少一点，更多的是通过一种逻辑形式，对图标相关的内容进行组织梳理和分类，便于小伙伴们建立图标的概念体系。

原本是有针对几种典型的图标结构进行现场操作绘制演示的，由于文章的缘故，就删除这一部分了，类似手把手绘制教程，在 YouTube 上有很多，初学者可以搜索观看。

如果粗浅划分的话，UI 设计中常见的图标大致分为 2 大类，第一类我们称之为「标志性图标」，比如手机中应用的启动入口图标；第二类我们称之为「功能性图标」，这类图标经常出现于 App 或网站中，用于功能性指示引导或操作，我们称之为「功能性图标」。

本文中我们要探讨讲述的，主要是「功能性图标」的绘制。 功能性图标的绘制也是绘制其他图标的基础。

图标的重要性

图标的重要性我想对于正在阅读此文的小伙伴已经不需要过多解释了。

色彩 color、文字 Font、图标 icon、图形 shape、图片 image、空间 space，是我们做平面设计中非常重要的 6 个元素，而对于 UI 设计而言，图标可以说是整个产品的点睛之笔，它甚至可以直接影响着一款产品的形象和气质。

在不少 UI 界面中，图标几乎是这个页面的核心支撑体，它直接影响着产品的视觉体验和产品调性，如上图。

文章目录结构

本文将从以下9个方面，针对图标这一体系，分 5 篇文章展开讲述：

  1. 图标的定义
  2. 图标的种类
  3. 图标的风格
  4. 图标的设计原则
  5. 图标的性格
  6. 图标的网格
  7. 图标的绘制
  8. 进阶小细节
  9. 那些年踩过的坑

图标的定义

图标是一种全球通用的 象形表意符号文字，而一套图标便相当于是一门语言。

这是我根据自己的理解下的定义，与行业内的定义有所不同。

作为一门语言，它便具备自己独特的语法和字形结构等特点，换言之便是图标的使用规范、设计准则等，我们会在后面的内容中展开讲述。

发展历程

图标的发展历程其实有些类似中文、英文等语言的发展，大体也分为两个阶段：

  1. 实物 → 符号
  2. 符号 → 新符号

我们来看两个有趣的例子：

这个是在 Twitter 上看到的，大意是说：公司里有一个无形的部门，一个小年轻看到我手里拿着的东西，激动得说：“哇哦，你 3D 打印了一个 「保存」图标！！”，这个无形的部门叫 “我们老了”。

我不太清楚有多少小伙伴没见过这个东西，它叫 3.5英寸软盘，塑料壳子的内部有一张塑胶的瓷片，可以刻录存储内容，有点像 DVD 光盘，但是很软很薄，上面的金属片侧滑之后就会露出瓷片，用于和磁头接触。它的存储空间只有1.44MB，我们上初中的时候经常拿他往微机教室的电脑里考游戏，基本上一张软盘只能放个 「坦克大战」 或者 「是男人就坚持30秒」，但即便是这样的小游戏，那时我们能玩一整节课。

实际上，「保存」图标就是将「软盘」符号化之后形成的图形，「软盘」是「保存」图标的实体。但随着时间的推移，人们逐渐将长期接触的符号本身作为一种新的实体，在大家的眼里，它不再是一个具象事物的抽象符号，而是直接当成一个实体来使用，甚至这个符号的实体已经淡出历史，但人们还在习惯性使用这个符号。

比如我们平时使用的文字：经历了 象形文字 → 繁体字 → 简体字 的转变过程，我们现在看「山」便是山，看「水」便是水，这两个汉字符号所产生的价值已经等同于实体。

动图文件很大 5.9MB，加载比较慢，请耐心等待。

这个是 Dribbble 上看到的一个作品，我们可能会觉得这个设计没有太强的价值，炫技的成分更多一些，因为这个作品是将我们手机中的 Switch 控件进行了 3D 化，而本身手机里的 Switch 控件就是符号化的产物，现在由进一步抽象，已经没有任何意义了。

但如果换个角度想，比如我们可以真的将这个 3D 设计做成是磁感灯，出现在你的床头柜上，将是一个非常有创意的灯具设计；再或者将这个设计引入到 VR 或者 3D 游戏领域，作为开关，可能又是另外一种很有意思的设计。

所以，图标符号是一直在发展的，它经历了从 实物 → 符号，又从 符号 → 新符号 的变化过程，就像我们的文字从 实物原形 → 象形文字 → 现代文字；

场景不同含义不同

刚刚我们提到，图标是一种语言，所以也具有一些语言的特性。同一个图标符号，在不同的场景下，可能会有不同的含义，而且这种含义还在随着技术和事物的变化而变化。就像汉语英语中，同一个文字或单词，在不同的语义环境中具有多个含义是一样的。

比如下面的例子：

在这个例子中，同一个旋转符号，在不同的场景中出现了不同的功能含义，比如可以用在浏览器中代表「刷新」，可以用在网盘中代表「同步」，用在摄像工具中代表「翻转」，用在信息流模式的设计中可以代表「换一批」...

图标的种类

根据图标含义的表达方式，我们可以将其分为4类：

象形符号，表意符号，文字符号，组合符号

象形符号

象形符号与象形文字原理类似，是将实物通过剪影的方式抓住实物的关键特征，进而简化之后所得。

比如我们刚才说的「存储」符号，是从软盘象形而来；「设置」是从齿轮象形而来，经过一些约定俗称，久而久之代表着「设置」的含义；「删除」是从垃圾桶象形而来，延续了操作系统中删除行为的语义；

表意符号

表意符号是指原本不存在实物的符号，是在发展过程中创造的一种符号，用于表达某些特定的含义或操作行为。而且在发展过程中，这些符号逐渐继承了一些象形符号的特性，将符号本身作为「实物」并且不断演化。

如前面提到的「旋转」符号，旋转本身是一个动作或状态，并不存在很直观的实物来去象形化，所以人们逐渐约定俗成了一类表意的符号，用带箭头的圆圈表示旋转；再比如「音乐」，音乐本身是一种听觉感官，是难以进行视觉可视化的，乐谱中的「音符」便成为了一种非常适合音乐的符号，而音符最初也是一种表意符号；另外「箭头」从最初的「弓箭」已经逐步衍生为一种特定的表意符号，而这些符号的变形或组合，会形成具备特定含义的新表意符号，比如「移动」图标。

这类符号大部分都是约定俗成的，在设计产品 UI 的时候，这类图标须谨慎创作，以免在没有文字辅助的时候难以被用户识别。

文字符号

文字符号是指用文字直接表示特定含义的图标符号。由于文字本身就是一种演化而来的符号，英文的首字母或者词语关键字本身也具备很强的信息浓缩性，因此在某些场景下，采用文字或字符作为图标，是一种很不错的表现手法。

比如「提示」图标，使用一个圈包裹一个英文字母「i」，表示 information，表示「更多信息」的含义；比如停车场直接使用「Parking」中的首字母 「P」，这些都是比较约定俗称的使用方式。还有一些场景，很难用象形或者表意的方式进行表达，那么就很适合使用文字符号，比如京东天猫某些商品具备「正品保证」的标识，这个概念太抽象了，很难用象形去概括，创造新的表意符号又很难被大众接受，这时「正」字就很适合作为这个场景特定的图标符号，作为针对中国用户群体的产品图标，简单粗暴且有效。

组合符号

组合符号是指前面三种图标种类进行重新组合形成的符号，来代表组合语义和操作行为，类似英语中通过添加前缀或后缀形成新的单词或副词。比如「添加联系人」，可以用「加号」和「人」进行组合，形成代表两个含义的词组；向上的「箭头」和「屏幕」代表「投屏」操作...

如今，我们在 UI 设计中所使用的图标基本上都是有以上 4 类图标组成，大家在设计图标的时候需要根据具体的场景选择合适的表现手法，让设计成果简单有效。

OK，到这里，我们的《图标设计指南》系列文章的第一篇就讲完了~

下一篇 我们讲一下「图标的风格」。