图标设计是设计师在入门界面设计的必经之路，图标是透过符号来简化文字，主要是用来指示或暗示行为，在界面设计上我们会使用大量的图标来节省空间，也可技术性的避免一些跨国语系的问题，常见的图标例如，分享、赞、搜寻、地图…等等，光听到这些名词，多数的人应该也能快速的联想到图标样式了吧。

使用图标并不复杂。即使几个位置良好的图标也可以在正确完成时改善您的用户体验。在下一个 UI 设计中实施这些图标提示和最佳实践之前，请查看这些提示和最佳实践。

By Muhammad Faqih

 

1. 保持图标简单

不要过分复杂你的图标设计。尽可能保持简单，尤其是在较小的尺寸下。最好的图标是简单的形状和象形图，用户可以立即识别。

2. 使其可识别

图标应立即识别。如果用户想知道图标的含义，它就违背了他们的目的。不要让用户想知道图标应该是什么，因为这只会让他们想知道图标的目的是什么，从而损害整个用户体验。

By monome

 

3. 赋予图标意义

用于图标的图像应该具有易于理解的意义。该含义应直接与图标的功能相关，例如主页的房屋图标。虽然隐喻有时很容易被用户破译，但更字面的图标通常识别速度更快。

4. 确保它们可扩展

图标通常以小尺寸使用，但您偶尔可能会发现要使用较大版本（甚至更小版本）的用例。因此，无论图标显示的大小如何，请确保其图标看起来良好。随着尺寸变大，您可以使用逐渐复杂的图标，但请确保不会让它们变得过于复杂。

By Unfold

 

5. 使图标可访问

如果您没有使用文本标签来配合您的图标，请确保您实现适当的 alt 标签，以便使用屏幕阅读器的人员仍然可以访问其功能。

沿着类似的路线，请确保您的图标有足够的对比度，并且大小足够大，可以访问。您还应确保图标周围的触摸目标足以让可能有精细电机控制问题的用户仍点击预期区域。

6. 注意颜色

作为一般经验法则，图标应该是单一颜色。此外，不要对每个图标使用不同的颜色，除非它直接有助于使其更可用。在大多数情况下，您可以使用不同的颜色来表示活动图标，而其余的是另一种颜色。

By zsolt hutvagner

 

7. 始终使用向量

创建自定义图标时，应始终以矢量图像格式创建它们。这样，它们可以很容易地缩放，而不会失去清晰度或脆度。在保存它们用于数字产品时，SVG 文件类型是最佳选择，因为它保留了图标的可扩展性和透明度。

SVG 的下一个最佳替代方案是将它们保存为无损 PNG 文件，因为它们将保持透明度，并且质量不会恶化。

8. 保持图标均匀

您的图标在样式和尺寸上应保持一致。使用没有一致风格的图标会混淆用户，使界面看起来凌乱。使用大小不相同的图标也会产生类似的效果。

然而，当涉及到大小时，视觉重量比精确的像素尺寸更重要。为此，您可以设计视觉重量稍小于较重图标的图标。

例如，比较星形和方形图标。如果您使它们具有完全相同的像素尺寸，则由于其外观更坚固，方形实际上看起来会更大。通过将恒星的手臂稍微扩展到正方形尺寸之外，您可以创建看起来大小相同的图标。只需确保将它们放入尺寸相同的容器中，以便保持适当的放置和间距。

By MyIcons

 

9. 确定清晰度

用户不应该想知道什么是图标，更不用说它代表什么了。确保您使用的图像立即对用户有识别性，并且他们不会试图找出您的图标应该是什么。

您还需要确保图标所代表的功能清晰。每当你使用除通用图标以外的任何东西（我们将在瞬间到达那些），考虑添加文本标签来解释图标的作用。它对新用户非常有帮助，并确保用户不会对不同的图标做什么感到困惑。

10. 使用通用图标

说到肖像，不要试图重塑车轮。当然，独特的创意图标可以为您的用户界面增添视觉兴趣。但是，如果用户不理解它们或者他们很难破译它们，则会损害整个用户体验。

对于常见功能，坚持人们识别的图标。以下是一些普遍认可的图标示例：

• 主页的主页主图标
• 指示汉堡菜单的三条水平线
• 用于搜索的放大镜
• 可编辑或修改内容的铅笔
• 竖起大拇指或心去喜欢某样东西
• 心或星星最喜欢的东西
• 保存书签的书签
• 一个箭头从正方形的顶部出来分享一些东西
• 指向正方形下载某些东西的箭头
• 用于设置的齿轮或齿轮
• 显示某些东西的锁图标是安全的

还有其他是特定上下文的（例如媒体播放器控制的形状），但这是一个很好的开始。如果您使用的是列表中提到的功能，通常最好使用普遍认可的图标。如果您偏离了通用图标，请务必添加文本标签以协助用户。

来源：dribbble by Renee Fleck