docs: 重构 Windows UI UX skill 分层
This commit is contained in:
@@ -37,7 +37,7 @@
|
||||
- `space.1` 到 `space.n`、`radius.control`、`radius.overlay`;
|
||||
- `motion.fast`、`motion.normal` 和共享缓动 Token。
|
||||
|
||||
在有对应资源时,将这些语义映射到 WinUI 主题资源。让品牌 Token 位于平台 Token 之上,明确浅色、深色和高对比度映射。
|
||||
在目标框架有对应能力时,将这些语义映射到主题、调色板或样式资源。让品牌 Token 位于 Windows 平台 Token 之上,明确浅色、深色和高对比度映射。
|
||||
|
||||
每个局部任务区域只使用一个主要强调操作。先通过尺寸、间距、对齐和字重建立层级,再增加颜色或表面。
|
||||
|
||||
@@ -75,29 +75,29 @@
|
||||
- 不要只通过降低不透明度表达状态。保持文本、焦点、选择和禁用语义可辨认。
|
||||
- 不要把关键文本放在无法确定可读性的材质或图像上,必须提供明确可读的回退方案。
|
||||
|
||||
优先使用文本填充、控件填充、描边、强调色填充和系统状态画刷等系统资源。生成代码前,根据项目的 Windows App SDK 版本验证资源名称。
|
||||
优先使用文本填充、控件填充、描边、强调色填充和系统状态画刷等系统资源。生成代码前,根据目标框架、版本和平台能力验证资源名称。
|
||||
|
||||
## 5. 材质与层级
|
||||
|
||||
使用材质来明确层级,不要装饰每个容器:
|
||||
|
||||
| 需求 | 首选机制 | 说明 |
|
||||
| 需求 | 首选材质 | 说明 |
|
||||
|---|---|---|
|
||||
| 主窗口背景 | `MicaBackdrop` | 用于 Windows 11;在 Windows 10 回退为纯色 |
|
||||
| 可透视桌面的窗口 | `DesktopAcrylicBackdrop` | 视觉更活跃;仅在体验确有收益时使用 |
|
||||
| 特定区域的材质 | `SystemBackdropElement` | 需要 Windows App SDK 1.6.3 或更高版本 |
|
||||
| 模糊窗口内部内容 | 应用内 `AcrylicBrush` | 不会显示应用背后的桌面 |
|
||||
| 主窗口背景 | Mica | 用于 Windows 11;在 Windows 10 或框架不支持时回退为纯色 |
|
||||
| 可透视桌面的窗口 | Desktop Acrylic | 视觉更活跃;仅在体验确有收益且框架安全支持时使用 |
|
||||
| 临时菜单和浮层 | Acrylic 或主题浮层色 | 用于表达临时层级,并准备不透明回退 |
|
||||
| 模糊窗口内部内容 | 应用内模糊材质 | 不应误导用户以为能透视应用后的桌面 |
|
||||
| 简单内容表面 | 主题纯色 | 通常是最清晰且成本最低的选择 |
|
||||
|
||||
不要在 WinUI 3 中使用 UWP `HostBackdrop` 模式。透明效果关闭、硬件不足、节电模式抑制 Acrylic、使用远程桌面或启用高对比度时,允许系统自动回退。确保回退颜色仍能维持层级和对比度。
|
||||
透明效果关闭、硬件不足、节电模式抑制 Acrylic、使用远程桌面或启用高对比度时,允许系统或适配器回退。确保回退颜色仍能维持层级和对比度;具体 API、版本门槛和禁用条件由所选框架适配文档定义。
|
||||
|
||||
仅用层级表达重叠、焦点或临时 UI。优先使用系统阴影和覆盖层行为。不要仅为了让卡片显得凸起而引入外部阴影控件。
|
||||
|
||||
## 6. 字体、图标与动效
|
||||
|
||||
默认使用 Segoe UI Variable 和 WinUI 字体层级。复用平台文本样式,不要在整个 XAML 中重复数值字号。正文使用常规字重,标题或标签使用更强字重,对齐的数字数据使用等宽数字,并优先换行而不是截断。无法避免截断时,通过无障碍工具提示或详情界面公开完整值。
|
||||
Windows 11 优先使用 Segoe UI Variable;不具备该字体或平台映射时回退到 Segoe UI 或目标框架的 Windows 系统字体。复用平台文本层级,不要在各页面重复数值字号。正文使用常规字重,标题或标签使用更强字重,对齐的数字数据使用等宽数字,并优先换行而不是截断。无法避免截断时,通过无障碍工具提示或详情界面公开完整值。
|
||||
|
||||
使用 `SymbolIcon`、搭配 Segoe Fluent Icons 的 `FontIcon`,或一致的矢量资源集。保持图标隐喻、大小、描边/填充风格和对齐一致。为不熟悉或仅有图标的命令提供无障碍名称和工具提示。不要使用 Emoji 作为导航或命令图标。
|
||||
使用 Segoe Fluent Icons 能力或一致、授权明确的矢量资源集;目标系统缺少字体字形时必须回退。保持图标隐喻、大小、描边/填充风格和对齐一致。为不熟悉或仅有图标的命令提供无障碍名称和工具提示。不要使用 Emoji 作为导航或命令图标。
|
||||
|
||||
使用动效解释因果关系、层级和连续性:
|
||||
|
||||
|
||||
Reference in New Issue
Block a user