130 lines
7.7 KiB
Markdown
130 lines
7.7 KiB
Markdown
# Windows 视觉与布局基础
|
||
|
||
## 目录
|
||
|
||
1. 设计原则
|
||
2. 视觉基础
|
||
3. 布局与响应式行为
|
||
4. 颜色与主题
|
||
5. 材质与层级
|
||
6. 字体、图标与动效
|
||
7. 基础规范检查清单
|
||
8. 官方资料
|
||
|
||
## 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。
|
||
- [ ] 动效能传达变化并尊重用户设置。
|
||
|
||
## 8. 官方资料
|
||
|
||
- [Windows 设计原则](https://learn.microsoft.com/windows/apps/design/design-principles)
|
||
- [Windows 设计指南](https://learn.microsoft.com/windows/apps/design/guidelines-overview)
|
||
- [屏幕尺寸与断点](https://learn.microsoft.com/windows/apps/design/layout/screen-sizes-and-breakpoints-for-responsive-design)
|
||
- [内容布局与间距](https://learn.microsoft.com/windows/apps/design/basics/content-basics)
|
||
- [Windows 应用中的材质](https://learn.microsoft.com/windows/apps/develop/ui/materials)
|
||
- [无障碍文本要求](https://learn.microsoft.com/windows/apps/design/accessibility/accessible-text-requirements)
|