图标设计的7个原则-清晰度、可读性、对齐、简洁性、一致性、个性化、易用性

创建高质量的图标需要有效的方法、迭代调整、大量实践和一双挑剔的眼睛。本文，我们通过7个设计原则和实例来说明如何创建高质量图标。

清晰度

图标的主要目的是快速传达其表达的含义，即概念。

这这一系列符号中，你对哪些比较熟悉呢？如果考过驾照，你可能会认出好多个，但其中一些图标并不直观，需要一本驾驶手册才能完全弄明白。

下边列出了易于识别到很难分辨的几个：

当图标使用我们不熟悉的隐喻时，理解就变得很困难。安全带“提示灯”（左起第三个）非常直观，我们一看就能明白。“电动助力转向系统警告灯”（最右边）的可识别性就很不清晰。

传达信息不清楚的图标让人不不安，尤其是在驾驶过程中，甚至会造成危险。

下边是一些我们常见的图标：爱心、警告、音乐和方向指示。

箭头是在路标中最经常使用的符号：

NYC subway sign (Source: Standards Manual)

成功的图标符号不仅对多数人来说易于理解，而且在不同的文化、年龄和背景下都是通用的。从多数使用人群的角度出发，使用能与之产生共鸣的隐喻和色彩，更容易创建出成功的图标。

如果其表示的想法过于抽象，则用单个独立的图标可能无法清晰的表达。这种情况需要和文本标签搭配使用。

可读性

一旦使用图标，就必须保证其可读性。

由于细节太过精细，上方的第一个图标很难被清晰的识别。

下边的第二个图标也有类似的问题，两部分形状之间的空间太小了：

稍作调整后的效果好了不少：

处理多个形状时，请在它们之间留出足够的空间。过细过多的笔触会使图标难以阅读。

Google Maps的图标虽然很小，但可读性就非常好：

对齐

为了确保图标视觉上的平衡感，需要做好对齐。

在这个播放图标中，虽然三角形按照等分尺寸放置在了圆形的中心，但看起来位置是偏的。其重心明显是在左边，失去了平衡。

排版人员对字体进行细微的调整，以实现视觉上的平衡效果。

设计人员对播放图标进行了细微的调整，把三角形向右移动：

看上去好多了。

不要简单的以数值为依据，眼睛才是最终的检查工具。

简洁性

仅用几句话就能清楚的表达一个想法，会让人感觉高效又优雅。

如：传授你的知识给别人，可以增强你自己对本学科的理解。

我们可以更简洁的说：

教会别人的同时，你也在进步。

Beautiful。

看下边这个图标

再看这个图标的简版：

简洁是图标设计的一个特性，更适合在较小的屏幕上使用。减少不必要的细节，能增加视觉上的轻松感。

在UI中，简洁的风格更利于理解和布局。这是Telegram的图标，简洁而有趣：

有时，UI图标采用更为具体的说明性样式。这些是Yelp的热门食物的一些图标，你看那只虾精致又生动：

在手机、平板和PC上的部分应用程序图标，会通过添加适当的细节以突出其个性和识别性，这就意味着需要更多的色彩和深度。配合其他的场景的展现，这些图标更能体现出品牌和产品的特性。

一致性

如果要创建一系列在同一场景下应用的图标，务必保持一致的样式规则。

在iOS13之前，Apple的图标具有各种笔触、填充和大小：

仔细观察一下，是不是有些图标感觉上比其他图标要更重一些？

任何给定的图标都具有一定的视觉权重，该视觉权重由诸如填充、笔触粗细、形状大小等因素决定。在一个系列中保持这些参数的值相同，可以保证图标一致性的实现。

苹果公司最近推出了SF Symbols。SF Symbols拥有9种权重和3种比例的图标风格。各种填充和轮廓变化使得图标更具和谐感。

对于图标家族来说，保持一致性并不是一件容易的事情，尤其是有很多作者时。设定明确的设计原则和具体规则就尤为重要。

下边这组图标由很多设计师创建集合而成，共包含700多个，设计师们都遵循了同一设计原则和严格的具体规则。尽管每个人的图标形状各不相同，但它们的权重具有相当的一致性，并且能很好的应用在同一场景中。

个性化

每个图标都有其各自的特性或风格。如何与众不同，怎么表达品牌，传递什么情绪？

Waze的界面之所以受欢迎很大程度上取决于其图像。这些色白斑斓有亲切感的图标表达着：“我们很可爱！”

Twitter的图标反而明亮、温和、清晰：

Sketch的图标充满了精致感：

Freemoji图标可爱又乖巧：

Android图标可匹配不同心情的屏幕主题：

易用性

一个系列的图标只有完美适配后，才算绘制完成。图标绘制后，需要进一步的测试和调整，以便设计师在屏幕和印刷中使用及工程师将其进行编码。

高质量图标需要有组织、有据可查并在上下文中进行测试。幸运的是，它也受到图标管理器的自定义工具的支持。

有组织

保持主文件整洁，并做好文件命名，以便于查找。选用合适的分类方法，如字母排序、类型等。

有据可查

阐明图标系列的主要原则：

Example principles from the Phosphor icon family (a riff on what we covered above):
? Clarity. Be clear first and foremost. Make the icon recognizable and readable. Never sacrifice clarity of what the icon represents.
? Brevity. Use as few details as possible. Phosphor’s style is reductive. Be concise and intentional with every stroke to communicate the essence of what’s being represented.
? Character. Be quirky. Add unique details sparingly to bring a little warmth and play to what may otherwise be a very austere set.

列出技术性规则：

Example technical rules from the Phosphor icon family:
? Use a 48x48px canvas
? Use a 1.5px centered stroke
? Use rounded end caps
? Use contiguous strokes unless broken segments are helpful for comprehension
? Use straight segments, perfect arcs, and 15° angle increments where possible
? Adjust curves when necessary to maintain the design principles
? Use whole, even number increments for measurements where possible; fold down to 1px and .5px if necessary
? Use the following shape keylines: 28x28px circles, 25x25px squares, 28x22px landscape rectangles, 22x28px portrait rectangles
? Keep a 6px thick trim area

重复这些步骤，并根据需要制定参考文档：

• Material System Icons
• IBM的UI icons、App icons和图标指南
• Shopify PolarisIcons

测试

检查图标一致性。确定图标在不同应用场景中的效果。

将图标彼此并排放置有助于检验我们的上述原则：（清晰度、可读性、对齐、简洁性、一致性、个性化、易用性）

定制工具

最后，如果你有资源，为了方便使用图标，那就创建工具吧。

通过使用自定义图标库，Meterial的图标更易于访问。搜索所需的文件，可以下载不同的文件格式、色彩和大小的样式图标。

Font Awesome，虽然没有应用上述某些设计准则，但它们的图标具有难以置信的易用性。它们提供了多种图标使用方法：前端框架库，CDN，图标字体或RAWSVGs。Awesome还是一个开源项目，它们分享各类图标，作品中的，最新发布的等。

资源

图标库

推荐几个：

Feather，一组精美的200多个额外的最小轮廓图标，可以很好地缩放

Material system icons,，5种样式的UI的1000多个实用图标

Nucleo，约3万种图标，有3种样式：轮廓，扁平/彩色和字形类

Streamline，一组精美绘制的3万多种线型图标，分为3种字重

图标聚合器

该Noun Project，但在质量方面参差不齐，是搜索有关样式和隐喻灵感的好方法

图标管理员

使用Nucleo app，可以导入图标集，查看，导出并将其拖放到首选的设计软件中

图标文档

在设计文档方面，Material是最好的：Material System icons,Product icons

IBM提供了出色的视觉辅助工具：UI图标，APP图标以及图标的贡献指南

Shopify提供一些最好的指南：ShopifyPolaris图标

? Written to the sounds of: The Black Dog and Autechre

文中链接，请查看原文。