创建数字图标集的实用技巧

▲点击 "TCC翻译情报局" 关注，回复 "社群" 加入我们

本文共 4203 字，预计阅读 11 分钟

TCC 情报局的 第 205 篇 干货分享

2023 年的 第 34 篇

TCC 推荐：大家好，这里是 TCC 翻译情报局，我是李泽慧。本文主要介绍了创建数字图标集的一些实用技巧。作者从图标 / 象形图的定义开始，讨论了如何选择合适的符号方法，并提供了一些建议来避免在设计过程中可能出现的错误。此外，作者还分享了一些获取免费图标的地方，以供读者参考。总之，本文为那些想要创建自己的数字图标集的人提供了一些有价值的指导和建议。

不可否认的是，不同的网站上有大量可用的图标集（我将在最后与你分享我最喜欢的图标集）。但作为 UX / UI / 产品 / 图形设计师，你自己或客户可能会产生图标创意的想法，所以我决定为这些特殊场合写一篇文章。

我在任何方面都不是一个图标专家 —— 当然有一些英雄人物在某些方面或大或小地改变了这个领域，但我仍希望通过下面的内容，可以帮助你在设计师之旅中学习一些新的东西。

1. 图标 / 象形图的定义

1. Definition of an icon / pictogram

怎样才能以最好的方式来描述这些在数字世界和现实世界中引导我们的简单图形呢?

有一种可能的开始是，承认视觉交流的力量，并思考你每天遇到的最重要的信息。

怎么做呢？回想一下你的日常活动，我敢打赌，有三个关键领域你一定会遇到某种图标：健康、安全和交通。

象形图传达信息的速度比文字更快，这并非偶然。看看下面的图片传达警告的速度有多快，并将其与阅读旁边的句子所需的时间进行比较。

这些象形图以一种通用且简单的方式传达信息，无论文化或地理背景如何，每个人都可以理解。另一个很好的例子是交通标志，因为你总是需要了解当前的速度限制或单行道，但你只有一眨眼的时间来观察、理解和采取行动。那么，怎样的标志才算是好标志或坏标志呢？

我故意去掉了交通标志的颜色，只关注形状

我们需要更深入地研究科学才能更好地理解。符号科学的研究被称为符号学。它涵盖了从竖起大拇指到微笑，甚至表情符号的所有含义。这门科学的著名代表人物查尔斯·桑德斯·皮尔斯 (Charles Sanders Peirce) 提出了一个三角形模型，说明了符号之所以成为符号的原因（见下图）。

因此，如果我们以停车标志为例，停车标志的代表就是立在路边的一块红色金属板，这也是符号的物理表现。

对象是符号所指的概念或想法，因此在这种情况下，该符号就是  "停止" 、 "减慢速度 " 或  "停止速度 " 的概念。

最后，解释者其实就是用户看到标志时在脑海中形成的心理图像。因此在这种情况下，司机看到标志后便会知道在虚线处停车。

当我们设计图标时，这三者都很重要，因为一切都可以成为标志。我们主要需要决定的是，对于某个表征物，我们是否想要选择一个标志性的（一对一的代表，比如加油站标志 ➡️ 附近的加油站）、索引性的（因果关系，比如烟雾 ➡️某处着火）或象征性的（任意文化知识，比如辐射圆形标志 ➡️ 放射性元素）符号方法。

或者，也可以将该模型描述为，如果在某个位置看到某个标志，我们期望调用什么样的用户操作。

2. 我们开始工作吧

2. Let’s get to work

按照这个逻辑，需要逆向思考一下我们想在哪个界面上看到该操作，然后选择代表该操作的符号（图标）。

在我的案例中，我接到的任务是帮助一个非政府组织（NGO）开展可持续发展项目，因此我知道界面主要是他们的数字网站和社交媒体，但我需要确定行动部分。

待办事项：列出行动清单

与客户团队进行面对面交流是非常有帮助的，因为他们是该领域的专家，而且他们还引导我浏览了该网站，因此我了解了他们希望使用的图标大小。我在笔记本中记下了他们希望调用的所有操作（25+），以便为下一步做好准备。

亲爱的读者，你可能看不懂我的笔迹，但这象征着我如何列出有关调用操作的列表

3. 概念

3. Concept

有了这份清单，我开始在谷歌上疯狂搜索该主题内的参考图像和趋势。通常，对于每个列表项，我都会从不同的角度在硬盘上保存 2-3 张图像，因为现阶段我还不知道哪些细节可能会在日后派上用场。假设谷歌是世界上最大的搜索引擎，那么搜索结果中的图像将或多或少会反映出世界上的结果，以避免对物体和标志的误解。

待办事项：将参考图像保存到文件夹中

参考图像有助于构思草图并揭示隐藏的符号联系

终于可以在纸上画草图了！有了我前面的参考图像，我喜欢使用方格纸或圆点笔记本，再配上不同粗细的记号笔。

待办事项：准备使用某种带有粗略指南的纸张

我实际扫描的草图。额外的方块或圆点也为一些对角线提供了不同的处理方式，而主要的外边框则使主要尺寸保持有序。

4. 网格设置和大小

4. Grid setup and sizing

你还记得我之前提到的和客户的讨论吗?现在它变得非常有用，因为我意识到我需要根据数字界面的要求来设置我的网格，而不是像高速公路上的广告牌那样，让用户处于不同的环境中。

待办事项：设置网格以传输草图️

我在一个32 × 32像素的画布上使用了三种不同类型的网格(见下面的第二种)。通常情况下，你希望将网格大小与大多数时候使用的图标大小相匹配，但官方对此并没有非常严格的规定。有些公司主要根据形状的复杂程度使用 24px、40px 甚至 64px 的网格。

例如，由于谷歌的图标以 24dp（密度像素）显示，因此他们设计的规则也以此为基础。

Google 的材料设计使用 24 × 24 像素网格和有关密度的附加规则，以最大限度地提高图标的可用性。

第一个网格是最接近我最初草图的，所以我主要用它来将想法从纸上转化为数字的原始尺寸。

第二个网格更注重圆形和整体视觉重量。

第三个网格是对一些较小的细节进行微调，在中间添加额外的关键线，并在集合内的不同标志中匹配相似的形状。

5. 选择图标样式

5. Picking an icon style

在把所有东西都放到网格上之后，还有一个非常重要的步骤......那就是定义图标的风格。我的客户需要的是简单的轮廓形状，所以我一直在围绕这一点进行探索。本文的格式无法涵盖所有可能的样式，但我尝试收集了最常见的轮廓样式，以便进行比较。如果你感兴趣，Varghese Mathai 在这篇文章中还收集了一些其他的样式。

待办事项：为图标选择一种️风格并坚持所有图标

由于我为客户端设计的图标主要用于网页使用，所以我不需要考虑大于 64px 的尺寸。但是对于那些需要的人，我宁愿考虑为这种尺寸创建一个说明性的样式，因为这些简单的形状随着尺寸的扩大而失去了它们的力量。

最近我读到了 Michael Sommer 关于如何实现这一目标的精彩文章，如果你也感兴趣的话，可以去搜索阅读。

非常简单，更具插画风格，脱离了原来的眼睛图标形状

6. 要避免的错误

6. Mistakes to avoid

图标设计中有几个值得注意的地方，否则形状很快就会失去平衡。

待办事项：遵守一些规则，但知道何时打破它们

1）描边宽度

尽量与您的描边宽度保持一致。我经常尝试从一个单位开始，例如 1px（在 32px 画布上），然后如果我需要添加更多变化，我会慢慢引入新的笔画粗细，例如 0.5px 或 2px，以在形状内创建层次结构。这与像素无关，更重要的是比例，所以尽量坚持 0.5:1:2 的描边。最糟糕的是太早开始混合它们，造成如下图所示的混乱。

2）边框半径

圆角设计使设计更友好，但所选半径要一致且平衡。当圆角与平帽混合时，设计会给人一种未完成的感觉，整套设计的元素也不协调。

3）关键形状

可能在你绘制第一个草图后，你就会意识到某些形状可以在多个图标中逐步使用。接受这一点，因为相似的形状最终会带来连贯的外观和感觉。

7. 结束语

7. Closing thoughts

我希望你喜欢阅读本文，并在此过程中创作出一些草图。尽管这些小形状确实非常适合象征、对象或行动，但我们永远不应该忘记，这个世界的文化是如此多元，即使再小心谨慎，也有可能出现误读。

待办事项：将图标的可访问性放在首位并不断测试

让我提醒你使用机场经典测试的重要性

因此，我的总体建议是，始终使用这些带有文字标签的符号，尤其是在数字媒体中，这样本地化的文案就能加强信息的传达，也能让人们更容易理解所需的操作。

最后，我还想和大家分享一些图标的制作效果：

8 最喜欢的获取免费图标的地方（终于！）

8 Favorite places to get free icons (finally!)

最后但并非最不重要的一点是，让我与大家分享一些我也喜欢使用的图标资源，因为我们不可能总是有心情创造自己的命运。

—Noun project：可能是我见过的最全面的图标集合，拥有超过 300 万个图标的数据库以及背后强大的团队

— Material Design Icons：如果你喜欢 Google 产品，你肯定遇到过设计精美的简单图标。他们的 Figma 插件包含 Icons8 图标，总共包含 35k+ 图标作为一个集合

— Flaticon：另一把大枪，有超过数百万个图标可供搜索。当我寻找更多风格的图标时，我最喜欢使用这个网站，这些图标往往几乎更接近我之前提到的说明风格，但也是概述图标的一个很好的来源

— Iconmonstr：我是独立项目的忠实粉丝，也许这就是这个系列进入列表的原因。如果您想忽略其他人都在搜索的其他更大的玩家，它拥有超过 5000 个图标，为你的下一个副项目提供了足够的选择

首先感谢你到目前为止的阅读！我希望你喜欢这些提示，以后还能再来阅读。

原文：https://uxplanet.org/practical-tips-to-create-a-digital-icon-set-9593022b5eb2

作者：Peter Javorkai

译者：章欣怡

审核：李泽慧

编辑：韩硕

本文翻译已获得作者的正式授权（授权截图如下）

---

往期精选文章：

Web Vitals —— 谷歌的新一代 Web 性能体验和质量指标

---

- 设计师自习社区 -TCC 设计情报局欢迎小伙伴加入，一起交流设计知识，了解全球设计资讯，锻炼英文能力，发掘更多可能性～
添加小助手微信，备注「社群」，即可加入读者群。

​