Windows 应用图标设计指南

您所在的位置:网站首页 win10图标尺寸大小 Windows 应用图标设计指南

Windows 应用图标设计指南

2023-12-01 11:18| 来源: 网络整理| 查看: 265

Windows 应用图标设计指南 项目 03/14/2023

请遵循以下指南,为在 Windows 上感觉自在的应用创建一个出色的应用图标。

设计指南:隐喻

图标应是其应用的隐喻:产品的价值主张、功能和功能的可视化表示形式。

表示形式

图标应使用简单窗体在单一元素中说明应用的概念。

创建图标时,请使用清晰的隐喻并利用基本理解的概念,例如邮件的信封或用于搜索的放大镜。 关键概念应该是图标的焦点;不要通过添加不支持隐喻的装饰元素来淡化图标。 若要增强通信清晰度,请在单个图标中使用不超过两个隐喻。 如果可以使用单个比喻,则更胜一筹。

文字隐喻最适合以清晰的方式阐明目的和承诺。 有效图标的一个好测试是用户可以在没有标签的情况下判断它所代表的内容。

仅当无法找到文本、不言而喻的隐喻来表示产品的核心功能的情况下,才使用抽象隐喻。

图标不应在设计中包含版式。 应避免使用图标上的字母和单词,并且仅在它至关重要时才使用。 应用的名称将在整个操作系统中与图标一起显示。

设计指南:形状 网格和圆角

Microsoft 最初将其图标与 48x48 网格对齐,以确保图标均衡,利用可用空间,同时保持独特的形状和剪影。 将图标的独特功能与网格对齐将与其周围的其他图标很好地平衡。

可接近性 是 Microsoft 个性原则。 我们传达此特征的一种方式是使用软角或圆角。 应用的产品图标中使用的形状应与图标网格保持一致。 这些形状的角应与图标网格中的圆角匹配。 将圆角应用于外部曲线时,在 48x48 处使用 2px 半径。 将圆角应用于内部曲线时,请改用 1px 半径。

轮廓

视觉上平衡的剪影可实现良好的图标可伸缩性,还避免了极端的厚和薄形状。 使用网格设计一个独特的剪影,但小尺寸清晰。 使用尽可能少角的形状来区分你的产品,同时仍然感觉在 Windows 上家一样。

详细信息

添加详细信息时,应注意保持小尺寸的可读性。 建议仅向图标最突出的层添加其他文本详细信息。

设计指南:颜色和渐变

请仔细挑选颜色,避免仅依靠颜色来传达意义。 使用带有颜色的形状和比喻进行通信。 为了避免在跨一系列大小缩放图标时出现复杂性,应尽量减少对颜色的处理。 颜色渐变、不同不透明度的覆盖层和颜色的色调应保持最少。

在大多数情况下,渐变应该是微妙的。 尝试在水平方向和垂直方向上将渐变坡度限制为一个或两个步骤。

渐变的默认角度为 120 度。 可以相应地调整起点和终点。 重要的是,这是一个平稳的过渡。 避免非常紧密的过渡,感觉类似于反射或维度。

单色调色板

使用以下步骤创建单色调色板:

从同一色调创建三种颜色。 在大多数情况下,你必须将浅色调整为更亮,深色的饱和度较低,但当然,你应该使用最好的判断。 在每个基色之间创建三个步骤。 这是你的主通道。 大部分图标应由这些颜色组成。 对于更宽的调色板,请使用步骤 2 的相同方法创建从白色到黑色的色调。 仅当需要多一点对比度时,才应使用这些色调和阴影。 深色和浅色阴影的色调通常是无用和单调的。 可以删除它们。 单色渐变

单色渐变通常用于向来自左上角的环境光角度提供微妙的提示。 不过,它们不应被视为直接光源。 这个想法是给形状一点运动,而不会太戏剧性。

模拟调色板

创建类似的调色板与创建单色调色板完全相同,但具有更多颜色。 此类型调色板的关键是不要过度使用。 深思熟虑的颜色过渡。

创建三个颜色集,而不是一个颜色集。 从所有三个颜色集中生成垂直斜坡。 与其使用白色和黑色创建色调,不如改用第二种和第三种颜色。 模拟渐变

类似的渐变应与单色相同,但不必总是如此。 通常较浅的色调应位于左上角,以避免看起来过于戏剧性,但也尽可能与单色保持一致。

设计指南:对比度、阴影和透视 颜色对比度

辅助功能是 Microsoft 的重中之重。 应用图标主要显示在浅色和深色背景上,但在桌面背景图像和色调或系统主题色的阴影上显示。 很难使图标在每个背景上 100% 可访问,但你可以执行一些操作来确保图标尽可能易于访问。

使用所有 3 个范围(深色、中等、浅色)中的颜色值。 确保至少一半的图标在浅色和深色主题上通过 3.0:1 的对比度。 某些色调值比其他色调值更困难。 黄色永远不会在浅色主题上通过可访问的对比度,直到它是棕色。 红色在深色主题上更难。 虽然不是必需的,但你可以选择为 Windows 的任务栏、“开始”菜单和其他主题敏感区域提供单独的浅色和深色主题资产。 高对比度

提示

Windows 11不再需要应用图标的高对比度资产。

高对比度图标是黑白的,应该是应用图标的直接表示形式。 通常,可以使用纯色填充和线条从颜色版本创建高对比度图标。 避免在高对比度图标中使用渐变。 有时,应用内体验需要 单行图标 ,应根据这些准则进行设计。

分层和阴影

顶部/正面视图。

用于说明 z 深度的等角视图。 仅供说明之用;不是建议的设计选项。

图标由位于其下层顶部的平面对象组成。

使用尽可能少的图层,并最大程度地减少形状之间的极小对比度。 在图标中使用投影在对象层之间创建定义,并在图标设计中直观地将组件相互连接。 通常,从浅色投射到深色形状的阴影效果最佳。 内部阴影只应在图形符号上投射阴影,而不应投射到周围的背景上。 有两种类型的内部阴影,每种类型的内部阴影都有两个阴影 阴影构造

所有这些值都将以 48x48 像素的速度呈现,并从那里纵向扩展或缩减。 如果不遵循此要求,则整个图标系统中的阴影将不一致。 有两种类型的对象阴影,每个对象阴影都有两个阴影。 同一隐喻中的对象具有模糊程度略低的阴影。

同一隐喻

当你在单个隐喻中具有需要某种深度的内容时,将使用此阴影。 并非总是有必要执行此操作,但单个对象隐喻需要一些深度才能让人感觉自己是系统的一部分。 阴影 2 上的蓝色是唯一的区别。

单独的隐喻

如果两个对象相互重叠,但不一定是同一个隐喻的一部分,则使用此阴影。 阴影应遮罩到其下方的形状中。

透视

左侧的图标相当简单;不建议使用透视,但此处可能适用。 右侧的图标对于透视太复杂,因此不建议将此图标用于此图标。

应使用直视透视绘制图标,以简单易懂的方式呈现隐喻。 例外情况是隐喻在没有查看其另一侧的情况下无法正常阅读的情况。 例如,直视的柱形是一个矩形,因此可以添加顶部以显示其有体积。 另一个例外是当应用与 3d 相关时,显示维度是有意义的。 在这两种情况下,前面有关平面对象的准则仍然适用。 层应始终为平面且垂直于视角。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3