设计图标时，最理想的状态是它不仅易于被众多人迅速领会，而且能在多元文化、不同年龄段以及各种情境下得到广泛认同。针对目标受众，应选用那些能触动他们情感的象征性元素和色彩。

2、易读

一旦设计好了容易理解的图标，然后就是确保它是可读的。

应用 中的图标

第一个图标由于细节太多，以至于很难快速辨认出它是什么。

存在类似情况。这些软件的剪贴板图标留白不足，以至于用户难以辨认。

细微的调整会带来很大的改善：

调整后的剪贴板图标

在制作多个图形时，务必确保它们之间有充足的空间。若图形过于细小或数量过多，将导致图标难以辨认。

谷歌地图的设计十分出色，其中图标即便在极小的尺寸下，依然保持着良好的可读性。

3、平衡

为了确保每个图标视觉平衡，需要在视觉上对齐它的元素。

不平衡的游戏图标

在这播放图标里，尽管三角形按照规范置于圆圈的中央，然而我们的视线却察觉到其不平衡。其中，三角形较宽的一侧给人“沉重”之感，仿佛正向左方倾斜。

就像字体设计师做精细的调整来设计字体的视觉平衡一样。

UI设计师同样需要对图标进行相应调整，以确保其平衡。为了提升那款播放图标的视觉效果，他们需要将构成图标的元素微微向右移动。

图标变得平衡了，是不是好了很多？

我们在此过程中领悟到，不可盲目信赖数据，而应运用视觉进行核实。

4、简洁

在日常生活中，仅需数语便足以清晰传达心意，这种方式既显得效率高，又显得举止得体。

“向别人讲述你所知道的内容可以强化对这门学科的理解。”

说的直白一点：

“一人为师，两人学习。”

谷歌的规范中，图标设计简洁明了sketch 图标，充分体现了系统图标应有的简洁风格，与那种过于繁复的图标形成了鲜明对比。

简化后的图标

图标设计需简洁明了，这符合我们在小画布上频繁创作的需求。在细节处理上，应适度而非繁复。

在界面设计上，采用一种简约化的风格可以让人更容易把握，同时这种风格还能有效降低自身的干扰，进而使内容更加突出。

图标

偶尔，用户界面图标会展现出一种更直观的设计风格。比如在Yelp应用中，其图标就制作得相当精美。

Yelp icons by Scott Tusk

针对手机、平板电脑以及桌面应用程序的主要图标设计，恰当的细节处理能够带来更强的空间感和丰富的色彩。用户能够凭借这些图标在主屏幕、Dock栏和应用商店中的印象来识别它们，而这些图标也因而能够有效地传达品牌与产品的特色。

Apple app icons for , , and

5、一致性

为了保持图标的和谐统一，要始终保持相同的视觉规则。

在iOS13之前，苹果图标有各种描边，填充和大小：

苹果公司Home Quick功能在iOS 13之前所采用的图标

斜视这一组，有些图标感觉比其他的更重吗？

每个图标均具备其独特的视觉“分量”，这一特性由填充颜色、线条粗细以及形状等要素共同塑造。若要在一组图标中维持这种一致性，确保这些参数保持一致至关重要。

苹果近期对自家图标进行了优化，使得整体视觉效果更为统一与协调。在此次更新中，他们规范了图标两种状态下的填充与轮廓线条，大幅提升了图标的一致性。

Icons from Apple’s SF

构建一个庞大的图标资源库，确保其风格统一并非易事，特别是在涉及众多创作者的情况下。至关重要的是，必须确立并遵循明确的原则与规范。

该图标集统一了超过700个图标的风格，遵循统一的规范，并对每一个图标进行了严格的检验。尽管每个图标的形状各异，但它们均拥有相同的比重，并且能够完美地相互搭配。

of the icon

6、个性

每个图标系列均呈现出独特的风貌。那么，这种风格有何特别之处？它对于该品牌有何种诠释？又营造了怎样的氛围呢？

Waze icons

Waze的界面深受用户喜爱，其关键在于那些色彩丰富、形态饱满的图标设计。这些图标所传递的信息是：“我们独具特色！”

的图标圆润，清晰：

icons

的图标精致:

icons by Janik

的图标非常可爱:

from

主屏幕主题通过图标包呈现了丰富多样的风格选择——包括抽象艺术、像素艺术、气泡图案以及霓虹灯效果等。

自上而下，自左至右依次为：iJUK，以及其他若干元素。

7、易用性

图标设计的完成并非仅止于外观的吸引。它还需经过额外的测试与准备，以便于未来能够便捷地创作出新的图标，并在诸如手机界面、打印材料等多种场合中应用。同时，这也使得开发者能够轻松地将图标嵌入到代码中。

一套非常好的图标库应该是有组织，有文档记录，并被测试过的。

1）有组织

确保主文档的秩序井然，图标名称的命名规则要明确，以便于查找。在确定最优的分类方法时，是依照字母的先后？还是按照文件的大小？抑或是根据文件的类别？

A file, by type pages

2）图标文档

阐明这套icon的主要原则：

图标原则示例:

在确保图标清晰度方面，我们必须明确一点，那就是图标必须易于识别和阅读。在任何情况下，我们都不应为了追求视觉效果而降低图标的清晰度。

以简洁为原则，力求用最少的细节进行描述。每一处描绘都应简洁明了，且富有充分的理由，确保传达出核心意义。

性格鲜明，在画面中谨慎地融入独特的细节，原本极为朴素的作品因而增添了几分特色。

列出具体参数规则：

参数规则示例:

• 使用的画布

• 使用1.5px居中的笔画

• 使用圆角

• 使用连续的笔画，除非断开的部分有助于理解

采用直线、曲线，并在需要时以15度为间隔进行划分sketch 图标，若有必要，对曲线进行微调以确保设计理念得以贯彻。

• 在可能的情况下使用整数、偶数增量进行设计;

请按照以下规定的尺寸：圆的、正方形的、横向矩形的、纵向矩形的进行使用。

• 保持6px的图标内框范围

一些优秀的图标系统规范

icons

https://.io///-icons.html

IBM设计的用户界面图标、应用程序图标以及图标使用指南

请勿访问此链接，该网页包含未经授权的图标资源。

Icons

https://..com//icons

3）测试

核对图标间的匹配度，验证图标是否在相应语境中发挥功能，同时也要保证其在整体视觉体系中保持和谐。

将图标并排放置，可以有效地证明我们坚持的原则——即设计上的清晰度、易于阅读性、整齐划一、简洁性、统一性以及独特风格。

Test used in ’s QA

4）自定义工具

最后，如果你有资源，创建工具来方便图标的使用。

谷歌图标容易使用与他们的自定义图标库很有关系。

’s easy-to-use icon

文字说明使得这些图标的使用变得更加便捷，尽管在上述原则的基础上，它们的图标本身已经足够直观。他们提供了多样化的使用途径：无论是借助前端框架库、通过CDN加载，还是使用图标字体，亦或是直接应用原始的SVG格式。

Font ’s Icon

补充一句，阅读了众多文章之后，若不加以实践，恐怕难以掌握其中的技巧，您是否认同这一点？因此，在阅读完文章后，不妨立即动手实践一番吧！（这番话语确实充满诚意）

若您觉得这篇文章颇具价值，不妨点击下方的“分享”、“赞”以及“在看”三个按钮，进行一键式推荐。据说，那些完成三连操作的朋友们，他们的薪水都得到了显著的提升！

原文链接：

https://.cc/7--of-icon--

如有侵权请联系删除！