Windows 11 中的图标

Iconography 是一组视觉图像和符号,可帮助用户了解和浏览你的应用。 图标在整个用户界面中用作表示概念、操作或状态的视觉隐喻。

Windows 11使用三种类型的图标:应用程序、系统和文件类型。 本文重点介绍了前两种类型。

应用程序图标

假设地图应用的抽象应用程序图标。

应用程序图标表示 Windows shell 中的应用。 它们主要用于打开应用程序,但无论应用出现在 Windows shell 中的何处,它们也表示应用。

应用图标应该通过一个标志来表示应用的核心功能。 有关设计和构造应用图标的详细信息,请参阅 Windows 中的图标。

系统图标

Segoe Fluent 图标中的购物车图标。

Windows 11 引入了新的系统图标字体:Segoe Fluent 图标。 这种新字体补充了Windows 11中的几何图形

Segoe Fluent 图标中的所有字形都以单行样式绘制。 这意味着它们是通过 1 个 epx 的单个笔划创建的。

Segoe Fluent 图标中的标志符号遵循三项美学原则:

  • 最小:字形仅包含传达概念所需的详细信息。
  • 和谐:标志符号基于简单的几何形式。
  • 演变:标志符号使用易于理解的新式标志。

调整大小

适当大小的打印机图标。

Segoe Fluent 图标的字体指标与设计人员和开发人员习惯使用 SVG 和位图图标的方式相匹配。

每个字体标志符号都经过设计,使占用的图标区域为方形 em。 字号为 16-epx 的图标相当于 16x16-epx 图标,使大小调整和位置更具可预测性。

结构

可以通过将基本图标与修饰符图标组合在一起,直观地构造系统图标标志符号。

基图标是视觉标志的主元素。 基本元素应占据整个图标占用空间。

修饰符图标可修改基图标的含义。 修饰符元素应放置在图标占用空间的底部象限之一中。

文件图标。

仅基图标
工作表图标本身传达 文件的概念。

覆盖有向上箭头图标的文件图标。

基图标 + 修饰符图标
向文件图标添加向上箭头会更改图标的含义,以表示 已上传的文件

分层

图标分层是一种用于重叠两个字形的技术。 建议使用图标分层来创建相同图标的不同状态 (例如活动状态或所选状态) 。

没有轮廓的黑白文件夹图标加上米色文件夹图标等于带有黑色轮廓的米色文件夹图标。

本地化

了解符号的文化内涵。 虽然图标在大多数情况下不需要本地化,但某些图标在一个区域性中可能是可以接受的,但在另一个区域性中却不能接受。 使用要使用的上下文验证图标选项。

示例

提示

打开 WinUI 3 库应用,查看操作中的图标原则。 WinUI 3 库应用包括大多数 WinUI 3 控件、特性和功能的交互式示例。 通过 Microsoft Store 获取应用,或在 GitHub 上获取源代码