7.7 KiB
Windows 视觉与布局基础
目录
- 设计原则
- 视觉基础
- 布局与响应式行为
- 颜色与主题
- 材质与层级
- 字体、图标与动效
- 基础规范检查清单
- 官方资料
1. 设计原则
将当前 Windows 11 设计原则作为评估问题：
| 原则 | 评估问题 |
|---|---|
| Effortless（轻松） | 用户能否专注、准确且无需过多理解就完成主要任务？ |
| Calm（平静） | 次要界面元素是否足够克制，让内容和当前工作占据主导？ |
| Personal（个性化） | 应用是否尊重主题、强调色、文本大小、输入方式和用户偏好？ |
| Familiar（熟悉） | 导航、命令、选择、窗口化和反馈是否符合 Windows 行为？ |
| Complete + Coherent（完整且一致） | 界面、窗口、状态和输入方式是否形成统一系统？ |
不要用早期 Fluent 中的 Light、Depth、Motion、Material 和 Scale 词汇替代这五项产品原则。将颜色、层级、图标、材质、几何、字体和动效视为视觉基础。
2. 视觉基础
建立语义化 Token 层，不要单独设置每个界面的样式：
surface.base、surface.layer、surface.overlay；text.primary、text.secondary、text.disabled；accent.default、accent.hover、accent.pressed、accent.disabled；status.success、status.caution、status.critical、status.informational；stroke.control、stroke.divider、focus.stroke；space.1到space.n、radius.control、radius.overlay；motion.fast、motion.normal和共享缓动 Token。
在目标框架有对应能力时，将这些语义映射到主题、调色板或样式资源。让品牌 Token 位于 Windows 平台 Token 之上，明确浅色、深色和高对比度映射。
每个局部任务区域只使用一个主要强调操作。先通过尺寸、间距、对齐和字重建立层级，再增加颜色或表面。
3. 布局与响应式行为
使用有效像素（epx）进行设计。尺寸、边距和位置在可行时使用 4 epx 的倍数；文本大小不受该网格限制。
以当前 Windows 宽度类别为起点，仅在内容证明有实际需要时调整：
| 类别 | 有效宽度 | 典型响应方式 |
|---|---|---|
| 小 | <= 640 |
单窗格、折叠或最小化导航、堆叠表单、延后显示次要内容 |
| 中 | 641–1007 |
紧凑导航、列表/详情可在单窗格和双窗格间切换 |
| 大 | >= 1008 |
在有助于任务时使用常驻导航或多窗格工作区 |
使用实际内容区域或窗口宽度，而不是显示器分辨率。在应用支持的最小尺寸、Windows 贴靠宽度、还原窗口、最大化窗口以及跨显示缩放变化时进行验证。
有意识地应用响应式技术：
- 重排（Reflow）： 在不改变含义的情况下换行或堆叠内容。
- 调整大小（Resize）： 让弹性区域吸收空间，并限制文本的可读行宽。
- 重新定位（Reposition）： 移动次要面板或命令，同时保持顺序。
- 显示（Reveal）： 随可用空间增加，逐步展示低优先级内容。
- 替换（Replace）： 切换为更适合的导航或展示控件。
- 重构（Re-architect）： 仅当紧凑窗口无法支持相同结构时改用不同工作流。
将窄屏状态定义为安全默认状态，再使用 VisualStateManager 和 AdaptiveTrigger 添加宽屏状态。当 NavigationView 的紧凑/展开窗格宽度等控件阈值能表达预期行为时，优先使用这些阈值。避免给需要本地化或缩放的内容设置固定宽度。
4. 颜色与主题
- 对必须随主题运行时更新的颜色和画刷使用
{ThemeResource ...}。 - 分别测试浅色、深色和高对比度；不要通过反相生成深色模式。
- 尊重系统强调色，除非产品标识或领域语义足以证明需要受控的品牌强调色。
- 普通文本至少保持 4.5:1 对比度。除语义色外，同时使用图标、文本或图案。
- 不要只通过降低不透明度表达状态。保持文本、焦点、选择和禁用语义可辨认。
- 不要把关键文本放在无法确定可读性的材质或图像上，必须提供明确可读的回退方案。
优先使用文本填充、控件填充、描边、强调色填充和系统状态画刷等系统资源。生成代码前，根据目标框架、版本和平台能力验证资源名称。
5. 材质与层级
使用材质来明确层级，不要装饰每个容器：
| 需求 | 首选材质 | 说明 |
|---|---|---|
| 主窗口背景 | Mica | 用于 Windows 11；在 Windows 10 或框架不支持时回退为纯色 |
| 可透视桌面的窗口 | Desktop Acrylic | 视觉更活跃；仅在体验确有收益且框架安全支持时使用 |
| 临时菜单和浮层 | Acrylic 或主题浮层色 | 用于表达临时层级，并准备不透明回退 |
| 模糊窗口内部内容 | 应用内模糊材质 | 不应误导用户以为能透视应用后的桌面 |
| 简单内容表面 | 主题纯色 | 通常是最清晰且成本最低的选择 |
透明效果关闭、硬件不足、节电模式抑制 Acrylic、使用远程桌面或启用高对比度时，允许系统或适配器回退。确保回退颜色仍能维持层级和对比度；具体 API、版本门槛和禁用条件由所选框架适配文档定义。
仅用层级表达重叠、焦点或临时 UI。优先使用系统阴影和覆盖层行为。不要仅为了让卡片显得凸起而引入外部阴影控件。
6. 字体、图标与动效
Windows 11 优先使用 Segoe UI Variable；不具备该字体或平台映射时回退到 Segoe UI 或目标框架的 Windows 系统字体。复用平台文本层级，不要在各页面重复数值字号。正文使用常规字重，标题或标签使用更强字重，对齐的数字数据使用等宽数字，并优先换行而不是截断。无法避免截断时，通过无障碍工具提示或详情界面公开完整值。
使用 Segoe Fluent Icons 能力或一致、授权明确的矢量资源集；目标系统缺少字体字形时必须回退。保持图标隐喻、大小、描边/填充风格和对齐一致。为不熟悉或仅有图标的命令提供无障碍名称和工具提示。不要使用 Emoji 作为导航或命令图标。
使用动效解释因果关系、层级和连续性：
- 立即提供指针/按下反馈；
- 在有助于解释移动时，优先使用平台过渡和连接动画；
- 为不透明度和变换等适合合成器的属性设置动画；
- 保持动画可中断，绝不使用动画延迟输入；
- 当系统动画设置要求时，减少或移除非必要动效；
- 避免在生产力界面中使用持续循环的装饰性动效。
7. 基础规范检查清单
- UI 体现 Effortless、Calm、Personal、Familiar 和 Complete + Coherent。
- 语义 Token 覆盖主题和所有交互状态。
- 布局已在紧凑、中等、宽、贴靠和缩放条件下验证。
- 间距和几何遵循一致的 4 epx 节奏。
- 材质选择能表达层级并具有纯色回退方案。
- 字体在文本缩放和本地化后仍可读。
- 图标采用统一语言且不使用 Emoji。
- 动效能传达变化并尊重用户设置。