App 图标#

除了拥有一个优秀的名称之外,每个应用还需要一个优秀的图标。本页提供了如何创建图标的指导。

通常,创建应用图标需要预先存在的视觉设计技能。然而,GNOME 应用图标的风格故意保持简单,以便尽可能地提高图标创建的可访问性。

推荐使用 App Icon Preview 工具来创建应用图标。它支持流程的每个阶段,从生成模板、在相关上下文中预览图标,到导出最终资源。

每个应用的图标都应是独一无二的。强烈建议不要为应用身份重复使用现有图标。

隐喻#

每个应用图标都应具有一个简单、可识别的隐喻。理想情况下,它应该与应用名称有清晰且明显的关系。常见的隐喻类型包括

  • 与应用功能直接相关的物理对象(例如,音乐应用的扬声器)。

  • 至少与应用领域或其较旧的模拟版本有某种关系的物理对象(例如,播客应用的磁带)。

  • 与领域相关的符号(例如,视频播放器的“播放”三角形)。

  • 如果应用具有独特的 UI,则对其进行简化和风格化处理。

避免与应用名称或功能无关的隐喻,例如使用角色或吉祥物。还要避免使用依赖于特定视觉风格的徽标。

GNOME 应用图标风格#

../_images/app-icons.svg

GNOME 应用图标风格简单且几何。在许多情况下,您只需使用基本形状就可以绘制整个图标。

尺寸与形状#

应用图标是在 128×128px 的区域内绘制的,但不应填充此空间。在判断图标绘制的大小时,请遵循应用图标模板中的指导,并确保您的图标与其他应用图标具有相似的视觉权重。

  • 避免使用极端的图标形状纵横比,例如非常窄或非常宽的形状。

  • 图标底部应与标准基线对齐,模板中已标明该基线。

透视#

虽然应用图标风格简单,但并非“扁平化”。深度是通过组合对象的“顶部”和“正面”来引入的,因此每个图标在对象底部都有一个额外的轮廓。这个“正面”轮廓的阴影比顶部表面更深。

../_images/app-icon-perspective.svg../_images/app-icon-perspective-dark.svg

在大多数情况下,轮廓是微妙的,不超过 2 个细节单位4 个标称像素)。但如上面的示例所示,也可能存在例外情况。

材质与光照#

如果需要,图标可以使用拟物化材料(例如:木材、金属或玻璃)。否则,建议使用简单的颜色和纹理。使用标准颜色调色板作为颜色的基础。

平坦表面应使用纯色,渐变仅保留给曲面使用。

../_images/app-icon-preview.png

如果可能,应避免使用阴影,但如果需要为不同的图标元素提供对比度,则可以使用阴影。绘制阴影时,光源应从上方垂直照射。不要在图标的主要轮廓之外绘制阴影,因为这些阴影是根据上下文以编程方式生成的。

细节#

应用图标定义为 128×128px,但通常以 64×64px 的尺寸查看,并且可以缩放到 32×32px。因此,避免添加过多的细节,因为这些细节在小尺寸下会丢失。

../_images/app-icon-sizes.svg../_images/app-icon-sizes-dark.svg

模板包含一个 2px 网格,应遵循该网格,这将有助于避免添加过多的细节。

符号化应用图标#

../_images/app-icons-symbolic.svg../_images/app-icons-symbolic-dark.svg

每个应用都应具有其应用图标的附加符号化版本,该版本用于在较小的尺寸下以及在某些特殊上下文中表示应用图标。符号化图标风格的描述可以在UI 图标指南中找到。

符号化图标可以在与全尺寸应用图标相同的 SVG 文件中绘制,如应用图标模板所示。App Icon Preview 将导出图标的全尺寸和符号化版本。

在可能的情况下,符号化图标应使用与全尺寸应用图标相同的隐喻。

夜间版本#

如果您提供应用的夜间版本或 Beta 版本,建议为其创建一个特定的应用图标版本,以便可以区分它们。

App Icon Preview 能够自动生成图标的夜间版本。在某些情况下,可能需要手动调整输出,但大多数情况下这并非必要。

../_images/app-icon-nightly.png