cover

本篇文章是《图标设计指南》系列文章的第三篇，在 第一篇文章 里我们讲述了「 定图标的义」 和「 图标的种类」；在 第二篇文章 中，我们讲述了「图标的风格」；本篇内容，我能将一起探讨 「图标的设计原则」和「图标的性格」。

图标的设计原则

绘制图标，需要遵循一定的原则： 「表意性」、「一致性」、「品牌特性」；

这三个原则在逻辑上具备一定的进阶性，即：首先要保证单枚图标的表意性，进而注重一套图标的一致性，进而关注图标的品牌特性；我们来分别简单讲述一下：

表意性

表意性是指图标的应该清晰直观表意、遵循自然习惯、无需文字辅助时也能在特定的场景中轻松明确图标所代表的含义。类似我们做字体设计一样，需要保证字体在词组中的可识别性。

某些个性鲜明或者具有很强艺术性的产品有时会打破这一原则以传递其产品的某些特质或调性，但作为新手，在没有充分理解产品和用户的接受能力前，请遵循这一首要原则。

一致性

一致性包括：视觉大小一致性、风格一致性、复杂度一致性；

视觉大小一致性：是指图标是视觉面积看起来大小接近，而非物理宽高尺寸。如：同等宽高的 矩形 > 圆形 > 多边形，所以我们需要在设计的时候适当调整圆形和多边形的大小来使得整体输出的图标体系视觉大小接近。通常我们通过绘制图标前期建立合理的网格来做辅助，可以快速建立图标视觉大小一致性。

风格一致性：风格一致性，即是指上一篇文章中提到的图标从基础图形选用的一致和表现手法的一致。如：使用线性或面型的一致、线性粗细的一致、组合方式的一致、色彩规律的一致、转角度的一致等等...绘制一两枚好看的图标很简单，但是如果让它们风格看起来一致且和谐，就不简单了，图标是一种全球语言，而不同的风格就像是不同的方言，混杂的方言会很蹩脚，感觉非常不专业；

复杂度一致性：是指同一套图标，在风格一致的基础上，要尽量保证其复杂度的一致，主要体现在图标内部细节的多少，有时候为了让一个图标具备多种含义，会不小心使得某个图标的复杂度过大。

TIPS：在固定的产品语义上下文中，可以使用简化的符号代替包含多语义的复杂图形。举个例子，比如在邮件 APP 中，我们可以通过一个简单的「加号」来表示「新建邮件」，而无需「邮件+加号」的形式来表达。

品牌特征

品牌特征又称品牌基因，简而言之即：图标的风格应该具备其产品的某些特性，从而很容易从图标联想到产品，看到某个图标就知道是某个产品的图标，这样更利于产品的一体化和品牌传播。

为了使得图标具备品牌特性，通常我们是先拆分品牌本身的特征元素，一般从 LOGO 或者其延展入手，找到基本特征，然后将这些特征融入到图标的「基础元素」或「表现手法」当中，比如线面、角度、色彩、组合手法等等。

我们来看 2 个例子：

上图是优酷产品的图标，我们可以看出，本套图标主要从优酷的 LOGO 中提取了「基础风格」「色彩」「叠加手法」作为其图标的基因成分：线性、红蓝配色、笔画线段交叠的部分使用颜色叠加。

这样的设计，既延续了品牌的特征，又增强了品牌的特点。

这套图标取自于前雇主 ThoughtWorks 的 PPT 中，这是一家咨询公司，PPT 是他们的主要提案工具，而上图中的这些歪歪扭扭的图标符号，在他们的 PPT 中随处可见。这些符号是从其 LOGO 中提取了基础图形 Graphic 和 带有复古特色的色彩，然后将这些基础图形进行摆放重组，从而形成新的图标符号。

其实这套符号单纯从视觉角度去看的话，不是非常优美，我们内部设计师一致觉得它有点 「丑」，但它的特点非常鲜明，鲜明到我们看到这个图标，就知道它是来自 TW。

之前在网上遇到问题时看到一篇技术文章采用了这套图标，而后看了下作者，不出所料，果然是我司同事，而且我还认识，于是抱起笔记本果断去找他请教了。

还有一个 有趣的故事，有一次我们临时抽调几个同事作为项目组去 DELL 做售前，在提案竞标的时候看到了我们的竞争者的 PPT 中某个架构图采用了这套图标，全场同事当场会心一笑，因为这套图标太有特点，有特点到我们一眼就看出竞争公司的提案「借鉴」了我们某同事的架构图。

最后，规则是为了自由，而非限制自由，某些时候我们可以打破规则，来构建属于自己的图标规则，创造出更有趣的设计。

图标的性格

我们知道，文字是具备气质和性格的，比如女性高端品牌喜欢使用纤细的衬线字体，会显得高雅端庄；而游戏类会倾向于使用锐利粗犷的字体，力量感十足。

图标也是具有气质性格的，我们需要根据自己的产品特质设计符合自己产品特质的图标。

如果我们创建一个坐标系，将纵轴设为 @1 倍模式下图标线条的粗细，将横轴设为图标的转交度，那么一般来说：

  • 越靠近左上角的图标会显得越硬朗；
  • 越靠近右上角的图标会显得越可爱；
  • 越靠近下方较为纤细线条的图标会显得越精致；
  • 而靠近坐标系中间区域的图标，则偏向于中性。中性图标相对来说比较万能，适合各种场景，尤其在商务场景使用较多。如果你不清楚该使用哪种风格，选择中性风格的话一般来说不会范太大的错误。

在 @1x 一倍图设计模式下，以 24px 为网格基准的话，常使用的图标粗细有：1px ，1.5px，2px，3px，1.5 的粗细常用于高倍屏，如近几年旗舰机的手机屏幕或者 retina 电脑屏，否则像素渲染会比较模糊。

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

下一篇 我们讲一下「图标的网格」和「图标的绘制」。