8 个提示，使图标设计更好

在这篇文章中，你成为一个活跃的设计师Dmitriy Bunin但是，在设计更好的图标时，我们一起介绍了八个要点。

图标是网站 UI 界面中的重要设计元素之一。

图标是一种语言，它直观地表示命令和内容，并传达其背后的含义。 您需要表达简单有效的视觉对象和隐喻，以便用户能够快速理解和识别。

8个提示，使图标设计更好，直接由活跃的设计师直接传达

提示 1 - 设置网格

您不是只创建一个图标，而是在大多数情况下，在集合中设计它。 您需要一个网格来统一图标集。

让我们确定安全区域并设置键线，如以下示例示例所示。 图标周围有一些边距空间。

提示 2 – 保持统一

设计图标集时，请利用相同的线宽、圆角和填充样式。 这为图标的统一性和用户识别它们变得更加容易。

在下面的示例中，线宽：2px，圆角：3px。

提示 3 – 清晰易懂

在图标设计中，要意识到"Less is More（越少越有效）"。 使用易于理解的"比喻"和"隐喻"以相同的卷设计细节，使图标更易于识别，用户不会感到难以理解。

提示 4 – 尝试以相同的间隔放置

让我们将图标元素之间的间距空间放在一起，以便图标集看起来一起。 只有这样，统一感才大大提高。

原型工具（如 Figma、Sketch 和 Adobe XD）允许您按住Alt/Option键并调整矢量线的空间。

提示 5 – 目视校正

让我们根据光学中心平衡视觉权重，以便眼睛看到图标的位置。 下面的示例对图标进行微调，这些图标被左图部分固定。

提示 6 - 填充空间

提示 7 – 组合样式

但是，若要表示界面的状态并帮助用户查找图标和按钮，请结合使用图标填充样式和大纲样式。

提示 8 – 利用有用的图标工具

您还可以尝试使用在线工具轻松创建和自定义图标。 免费下载，不仅可用，如配色方案和大小的变化，它也方便图标设计参考。

Google Fonts | Material Icons

Google Fonts 现在也提供图标，提供 2000 多个图标，从五种不同的样式中进行选择，并通过 API 作为 Web 字体进行解释。

SVGBOX

操作非常简单，只需找到您最喜爱的图标并拼出输出代码即可。 一种 API 服务，可轻松将 SVG 图标添加到 Web 项目中。

Motion

编辑器，可自定义和免费下载动画SVG图标。 适用于 Mac 和 Windows。

Experience Japan Pictogram

280套日本象形图，诞生于日本，以易于理解的方式表达日本旅游的基本特点，并重视简单、美丽和友好的造型。

商业上可用！ 以日本观光为主题的免费象形图280件套Experience Japan Pictogram

以日本观光为主题的体验日本Pictogram免费开放，包括280个简单易懂的象形图。

Sensa

在 PNG、SVG、Figma 和 Sketch 文件中免费下载 300 多种表情符号图标。 提供适合任何大小的矢量文件。

IconDuck

该网站有超过10万个开源图标和插图，支持商业用途。 它按集组织，因此，如果您尝试查找您最喜爱的样式，该怎么办？

SVG Repo

超过30万个矢量图标可供免费下载和商业使用的网站。SVGOSVG 文件，这是一个优化的点。

Glyphs

Figma 设计系统，包含 5，000 多种可编辑矢量图标。 使用 Figma 的 Component 功能轻松自定义以简单形状绘制的图标。

Icônes

一个网站，收集开源图标，并一起搜索，创建和下载原始图标包。 目前，我们支持90多个项目。

Flagpack

图书馆拥有 260 多面来自世界各地的国旗。 Sketch 和 Figma 文件适合设计人员，React、Vue 和 Angular 文件为开发人员提供。

Tabler Icons

完全免费的麻省理工学院许可证库，包含 558 个可自定义的 SVG 图标。 简单和易于使用的图标设计也很好。