UI设计中图标的终极指南

图标是一种视觉语言,可以比其他语言更普遍地理解为强调对象特征的符号。它由UI图标,象形图和符号表示,并用于各种领域,因为它可以在占用一小块区域的同时传达意义。

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

图标的用法

在 UI 设计中,图标主要用作应用图标和系统图标。它用于应用程序图标来表达您的品牌和系统图标,以便用户快速理解和处理信息。

风格

有线条,填充,彩色和图像方式来表达图标。目的因使用图标的空间而异,它主要用于对操作提供反馈或增加注意力。

  • 线条,填充:它以基本形式放置在布局上。
  • 彩色:通常用于对操作提供反馈或增加注意力。
  • 图像:在需要高度关注时使用。我倾向于使用表情符号或独特的图标。

重量

样式可以组合以创建不同的权重。如果服务主要是图像,则应将图标的权重降至最低,如果服务是面向文本的,则可以使用重型图标来为用户提供视觉乐趣。

性能

构成图标的元素包括粗细、尖端形状、折弯、底纹和重叠,并且表达式规则是统一的,以便仅提供查看者识别图标所需的最小更改。

  • 厚度:我使用了1px和2px,因为数字屏幕会舍入无法表示的小数点。(随着智能手机规格的提高,有时会使用小数点。
  • 结束和加入:有倾斜的末端和圆形的末端,圆形通常用于平滑表达。
  • 半径:“结束”和“连接”使用相同的规则来实现一致性,舍入通常用于平滑表达。

权重和重心

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

大小

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

简单清晰

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

细节

建议在狭窄的区域内最小化细节,以实现“快速信息传输”,其中图标是最重要的目标。特别是对于适合小区域的系统图标,最好只留下您正在谈论的最低限度的内容并删除其他装饰元素。

一致性

在一个服务中执行相同功能的图标以相同的样式表示。填充 和 线形 可以一起使用,具体取决于使用它们的场景,但在同一上下文中使用的图标使用相同的属性表示。

透视

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

熟悉

无论平台如何,我通常使用相同的图标。但是,对于操作系统平台中经常使用的样式,用户可以通过使用操作系统默认模板(这是大多数用户熟悉的表单)更快地理解含义。

视觉校正

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

原作者:Jake Park

本页面最后更新于 2022年04月25日 17:31