必读！UI图标终极设计指南

据说点击蓝色字体关注同学都升职加薪了

图标是一种比其他语言更能被普遍理解的视觉语言，它是一种强调对象特征的符号。它由 UI 图标、象形图和标志表示，并在各个领域中使用，因为它可以在占用小面积的情况下传达意义。

它受到许多设计师的喜爱，因为它比其他元素更容易赋予个性，并允许您尝试视觉原理。在这篇文章中，我们总结了图标的属性以及UI设计中推荐的图标设计指南。

用法在 UI 设计中，图标主要用作应用程序图标和系统图标。它用于应用程序图标来表达您的品牌和系统图标，以便用户快速了解信息并根据信息采取行动。

风格有线条、填充、彩色和图像方式来表达图标。目的因使用图标的空间而异，主要用于对动作进行反馈或增加注意力。
线条，填充：它以其基本形式放置在布局上。色彩：通常用于对行动提供反馈或增加注意力。图片：在需要高度关注时使用。我倾向于使用表情符号或独特的图标。

重量可以组合样式以创建不同的权重。如果服务主要是图片，图标的权重应该最小化，如果服务是面向文本的，重图标可以用来给用户带来视觉上的愉悦。

特性构成图标的元素包括厚度、尖端形状、弯曲、阴影和重叠，并且统一了表达规则，以便仅给出观看者识别图标所需的最小变化。
厚度：我使用了 1px 和 2px，因为数字屏幕会四舍五入无法表示的小数点。（随着智能手机规格的改进，有时会使用小数点。）末端和连接处：有角端和圆端之分，圆形多用于平滑表达。圆角：End 和 Join 使用相同的规则来保持一致性，round 经常用于平滑表达。

网格眼睛将图标与视觉网格和轮廓分开。视觉网格是指允许相同大小区域内各种形状的图标具有相同权重和重心的网格。几何解构的对象是根据由圆形、正方形、矩形和等边三角形组成的网格产生的。

规模我倾向于使用 8 的倍数作为基线，例如 8px、16px、24px 和 32px，以便在各种环境中进行流畅的管理。主要用于移动设备小区域的系统图标有时会以 4px 的倍数使用，以实现多功能性。

明晰使用用户可以快速理解的最少元素进行设计。尽可能让用户友好，必要时应用简单的比喻。复杂的图标可能不会或可能需要很长时间才能让用户理解它们的含义。

细节建议在“快速信息传输”的狭窄区域内尽量减少细节，其中图标是最重要的目标。特别是对于适合小区域的系统图标，最好只保留您正在谈论的最少内容并删除其他装饰元素。

一致性在一项服务中执行相同功能的图标以相同的样式表示。填充和线条可以根据使用它们的上下文一起使用，但在相同上下文中使用的图标用相同的属性表示。

视图角度尽可能使透视图从正面看。实际的数字设备是平面的，如果主要用于平面卡片空间的图标给人一种空间感，可能会感觉到认知失调。尽管它是在有限的基础上使用以引起特别注意，但不建议这样做。

熟悉度无论平台如何，我通常都使用相同的图标。但是对于在OS平台中经常使用的样式，用户可以通过使用OS默认模板来更快地理解其含义，这是大多数用户所熟悉的形式。

视觉误差由于图形设计工具的限制，有时需要进行视觉校正。对于下面的播放按钮，图形工具与图层末端对齐。但实际上，三角形需要调整，因为它们的重心与圆形或正方形不同。

原文：https://bootcamp.uxdesign.cc/ultimate-guide-for-a-good-ui-icon-beefc840c2e5作者：Jake Park   翻译：静电

////// END //////

《静电的UI设计教室》暑期特训课预热中

静电老师全程主讲

高含金量UI小班课程

报名即将开始 现在预约享特惠价

↓↓长按二维码加静电老师咨询↓↓