Windows 11 中的分层和提升

Windows 11 使用分层和提升作为应用层次结构的基础。 层次结构传达了重要信息,这些信息涉及如何让用户在应用中导航时将注意力集中在最重要的内容上。 分层和提升是强大的视觉提示,它们使体验现代化,让体验在 Windows 中给人一致化的感觉。

分层

包含单个内容区域的应用程序窗口

具有多个内容区域的应用程序窗口

分层是图面与图面重叠的概念,在同一个应用程序内创建两个或多个视觉上可区分的区域。

注意

Windows 11 中的分层与材料的使用密不可分。 有关如何应用它们的具体指南,请参阅材料部分

Windows 11 对应用程序使用双层系统。 这两个层产生层次结构,使应用程序看起来更清晰,并使用户专注于最重要的内容。

  • 层是应用的基础。 它是每个应用的最底层,包含与应用菜单、命令和导航相关的控件。
  • 内容层使用户专注于应用的中心体验。 内容层可以位于相邻的元素上,也可以分成对内容分段的多个卡片。

Elevation

各种重叠的 UI 元素,每个元素在不同的提升位置

提升是一个图面相对于另一个图面产生的空间关系(因其在桌面上的位置的不同)的深度部分。 当两个或多个对象占用屏幕上的同一位置时,只有提升程度最高的对象才会在该位置呈现。

阴影和轮廓在控件和图面上用于微妙地表示一个对象的提升程度,有助于在体验中根据需要引导用户关注焦点。 Windows 11 使用以下值通过阴影和轮廓来表示提升。

应用程序窗口

Window
提升值:128
笔划宽度:1

模式对话框

对话框
提升值:128
笔划宽度:1

浮出控件菜单

浮出控件
提升值:32
笔划宽度:1

组合框的工具提示

Tooltip
提升值:16
笔划宽度:1

包含多个内容区域的 UI 图面


提升值:8
笔划宽度:1

组合框

控制
提升值:2
笔划宽度:1

空 UI 图面


提升值:1
笔划宽度:1

Windows 11 中的控件通过改变其提升程度和轮廓来指示状态。 呈现的阴影的强度因值奇偶校验时的主题而异。

处于默认状态的按钮

停留
提升值:2
笔划宽度:1

悬停状态中的按钮

悬停
提升值:2
笔划宽度:1

处于按下状态的按钮

Pressed
提升值:1
笔划宽度:1