干货！7个设计师必知的图标设计原理，收藏了！

清晰度，可读性，一致性，简洁性，一致性，个性，易用性。

创建高质量的图标套组需要合适的方法，训练有素的眼睛，一些迭代和大量实践。下面，我将通过7个原则和大量实际示例来说明。最终目标是让你了解设计出优质图标的关键细节。

001.明晰

图标的主要目标是快速传达概念。

普锐斯Prime仪表盘上的图标（来源：2020年手册）

在这一系列符号中，哪些是你看起来最清晰的呢？驾驶员可能会随着时间的流逝学习它们，但是其中一些图标并不直观。您需要一本手册来解释其含义。

这大致就是用户了解图标的过程，从简单到复杂：

当图标使用不熟悉的隐喻时，用户就会很难理解。安全带“提醒灯”（左起第3个）非常直观，我们可以快速掌握。“电动助力转向系统警告灯”（最右边）更加难以理解。

通常，不清楚的图标只会令人心生沮丧。对于驾驶员来说，误解警告指示器可能会造成危险。

以下是一些较熟悉的图标-爱心，警告，音乐和上/下方向的符号：

Phosphor Carbon图标家族的熟悉隐喻

箭头是在寻路中使用的强大符号：

纽约市地铁标志（来源：《纽约市交通管理局图形标准手册》

最理想的状态是，图标不仅对于一组人来说易于理解，而且在不同的文化，年龄和背景下都是通用的。考虑一下您的用户，并使用与之产生共鸣的隐喻和色彩。

请记住，如果所表示的想法过于抽象，则独立图标可能不是最清晰的解决方案。在这种情况下，请将图标与文本标签配搭配使用。

002.可读性

图标不仅要易于理解，更要便于阅读。

Amtrak移动应用程序中的图标

由于细节太复杂，用户很难有更好的可读性。

在下面这款交通应用中也有类似的问题。剪贴板图标一团黑，与上方的图标风格完全不匹配。

Transit移动应用中的图标

稍作调整将带来很大的改进：

调整后的剪贴板图标

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

Google Maps的图标非常出色-可读性很棒：

Google Map图标

003.对齐

为确保每个图标感觉平衡，请精确的将他们对齐。

在此播放图标中，尽管三角形按看起来放置在圆的中心，但我们的眼睛却误认为是不对齐的。三角形的较宽部分感觉比左侧“重”，所以我们要手工进行一些调整。

就像排版人员进行细微调整以在字体中创造平衡的视觉效果一样（请注意“ i”和“ j”上的偏心点，以及“ O”上的过冲点），

-设计师会进行类似的调整以平衡图标。要更正上面的示例，请稍微移动元素：

所以，请不要仅仅相信数据，也要相信你的眼睛。

004.简洁

谷歌的Material Design在其系统图标指南中很好地说明了，下面的图明显过于复杂了：

过于复杂的船形图标（来源：Material）

下图就是很好的表现方式：

简洁的船形图标（来源：Material）

简洁很适合图标设计，因为我们经常在小画布上工作。为图标使用适当的细节量，不要使用过多的内容。

在用户界面中，简洁风格可以理解并为内容腾出空间。Telegram的图标简洁有趣：

电报图标

有时，UI图标会采用更具象的表现形式。这些Yelp图标是用来为用户展示热门食物搜索的一种令人愉快的方式。泰国食品图标中的虾非常精致：

Yelp图标

使用代表移动，平板电脑和桌面应用程序的应用程序图标，适当的细节量可能意味着更多的深度和色彩。由于观众可以在移动主屏幕，码头和应用商店中了解其背景，因此图标可以更体现品牌和产品。

苹果应用程序图标

005.一致性

为了使图标家族达到和谐，请始终保持相同的样式规则。

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

iOS 13之前的苹果图标

任何给定的图标都具有一定的视觉权重，该视觉权重由诸如填充，笔触厚度，大小和形状之类的参数确定。在一个集合中保持这些参数相同可以建立一致性。

苹果公司最近推出了SF Symbols，它拥有9种权重和3种比例的图形图标风格（也许有点复杂）。在不同的图标之间，以及在填充和轮廓变体之间，它们都感觉更加和谐。

苹果SF Symbols中的图标

对于大型图标家族来说，保持一致性并不是一件容易的事，尤其是涉及多个设计师时。遵循明确的原则和规则至关重要。

Phosphor的图标套组将700+图标通过相同的一般准则和严格的测试，以保证每个图标一致。尽管每个图标都有不同的形状，但它们重量相同，并且可以很好地相互搭配使用。

006.个性

每个图标集都有其独特的风格。是什么让它与众不同？它对品牌有何影响？它会让用户产生什么心情？我们都需要反复考究。

Waze图标

Waze为什么受欢迎，在很大程度上取决于其图像设计。这些色彩斑斓的图标对用户说：“我们很古怪！”

Twitter的图标柔软，明亮，清晰：

Twitter图标

Sketch的图标精致而通透：

Freemoji的图标则非常可爱：

Android图标则抽象，多彩，亦或具有霓虹灯风格。

007.使用方便

完美绘制你的图标集并不代表你的工作完成了。它需要进行进一步的测试和准备，以确保后续设计师易于制作新图标，并在多种设计中使用它们（用于屏幕，印刷等），以及工程师将其编码到产品中。

008.有组织的

保持文件整洁，为图标资源命名并合理放置它们，以便于查找。考虑最好的分类方法。是按字母顺序？按大小？按类型？

009.总结下图标设计的原则：

•清晰度。首先要清楚，使图标可识别和可读。切勿牺牲图标代表的清晰度。 •简洁。使用尽可能少的细节。每笔动作都要简洁明了，以传达所要表达的本质。 •风格。要独特，添加一些独特的细节可以让人觉得图标很有人情味。 010.其它可参考技术细节： •使用48x48px的画布 •使用1.5像素居中笔画 •使用圆润的边角 •使用连续的笔触，除非折断的片段有助于理解 •尽可能使用直线段，完美的弧度和15°的角度增量 •必要时调整曲线以保持设计原则 •尽可能使用整数，偶数增量进行测量；必要时可使用至1px和.5px

011.测试你的图标

检查一致性。确保图标在UI界面中工作良好，确保它们与较大的视觉系统协调工作。

将图标彼此并排放置有助于证明我们的上述原则（清晰度，可读性，对齐方式，简洁性，一致性和个性）：

Phosphor的质量检查流程中使用的测试表

原文地址：https://medium.com/@minoraxis/7-principles-of-icon-design-e7187539e4a2

作者：Helena Zhang

翻译：静电@静Design