opc/win_ui_ux_design_skill
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Chinese localization

Browse Source
This commit is contained in:
QiuSW
2026-07-18 17:40:25 +08:00
parent 07c63cb565
commit 2ed513bc25
6 changed files with 465 additions and 465 deletions
Download Patch File Download Diff File Expand all files Collapse all files
references/windows-foundations.md
+90 -90
View File
@@ -1,129 +1,129 @@
# Windows visual and layout foundations
# Windows 视觉与布局基础
## Contents
## 目录
1. Design principles
2. Visual foundations
3. Layout and responsive behavior
4. Color and themes
5. Materials and elevation
6. Typography, icons, and motion
7. Foundation review checklist
8. Official sources
1. 设计原则
2. 视觉基础
3. 布局与响应式行为
4. 颜色与主题
5. 材质与层级
6. 字体、图标与动效
7. 基础规范检查清单
8. 官方资料
## 1. Design principles
## 1. 设计原则
Use the current Windows 11 principles as evaluation questions:
将当前 Windows 11 设计原则作为评估问题：
| Principle | Ask |
| 原则 | 评估问题 |
|---|---|
| Effortless | Can users complete the primary task with focus, precision, and little interpretation? |
| Calm | Is secondary chrome quiet enough for content and current work to dominate? |
| Personal | Does the app respect theme, accent, text size, input, and user preferences? |
| Familiar | Do navigation, commands, selection, windowing, and feedback behave like Windows? |
| Complete + Coherent | Do screens, windows, states, and input modes feel like one system? |
| Effortless（轻松） | 用户能否专注、准确且无需过多理解就完成主要任务？ |
| Calm（平静） | 次要界面元素是否足够克制，让内容和当前工作占据主导？ |
| Personal（个性化） | 应用是否尊重主题、强调色、文本大小、输入方式和用户偏好？ |
| Familiar（熟悉） | 导航、命令、选择、窗口化和反馈是否符合 Windows 行为？ |
| Complete + Coherent（完整且一致） | 界面、窗口、状态和输入方式是否形成统一系统？ |
Do not substitute the older Fluent vocabulary of light, depth, motion, material, and scale for these five product principles. Treat color, elevation, iconography, materials, geometry, typography, and motion as visual foundations.
不要用早期 Fluent 中的 Light、Depth、Motion、Material 和 Scale 词汇替代这五项产品原则。将颜色、层级、图标、材质、几何、字体和动效视为视觉基础。
## 2. Visual foundations
## 2. 视觉基础
Build a semantic token layer instead of styling each screen independently:
建立语义化 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` through `space.n`, `radius.control`, `radius.overlay`;
- `motion.fast`, `motion.normal`, and shared easing tokens.
- `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。
Map these semantics to WinUI theme resources where available. Keep brand tokens above platform tokens so light, dark, and high-contrast mappings remain explicit.
在有对应资源时，将这些语义映射到 WinUI 主题资源。让品牌 Token 位于平台 Token 之上，明确浅色、深色和高对比度映射。
Use one primary accent action per local task area. Use size, spacing, alignment, and weight before adding more colors or surfaces.
每个局部任务区域只使用一个主要强调操作。先通过尺寸、间距、对齐和字重建立层级，再增加颜色或表面。
## 3. Layout and responsive behavior
## 3. 布局与响应式行为
Design in effective pixels (epx). Use multiples of 4 epx for sizes, margins, and positions when practical; text size is not restricted to this grid.
使用有效像素（epx）进行设计。尺寸、边距和位置在可行时使用 4 epx 的倍数；文本大小不受该网格限制。
Use the current Windows width classes as starting points, then adjust only when content demonstrates a real need:
以当前 Windows 宽度类别为起点，仅在内容证明有实际需要时调整：
| Class | Effective width | Typical response |
| 类别 | 有效宽度 | 典型响应方式 |
|---|---:|---|
| Small | `<= 640` | single pane, collapsed or minimal navigation, stacked form, deferred secondary content |
| Medium | `641–1007` | compact navigation, list/detail may switch between one and two panes |
| Large | `>= 1008` | persistent navigation or multi-pane workspace when it improves the task |
| 小 | `<= 640` | 单窗格、折叠或最小化导航、堆叠表单、延后显示次要内容 |
| 中 | `641–1007` | 紧凑导航、列表/详情可在单窗格和双窗格间切换 |
| 大 | `>= 1008` | 在有助于任务时使用常驻导航或多窗格工作区 |
Use the actual content region or window width, not monitor resolution. Validate at the app's supported minimum size, Windows Snap widths, restored windows, maximized windows, and across display scaling changes.
使用实际内容区域或窗口宽度，而不是显示器分辨率。在应用支持的最小尺寸、Windows 贴靠宽度、还原窗口、最大化窗口以及跨显示缩放变化时进行验证。
Apply responsive techniques deliberately:
有意识地应用响应式技术：
- **Reflow:** wrap or stack content without changing meaning.
- **Resize:** let flexible regions absorb space; constrain readable text measure.
- **Reposition:** move secondary panels or commands while preserving order.
- **Reveal:** progressively expose low-priority content as room grows.
- **Replace:** switch to a more suitable navigation or presentation control.
- **Re-architect:** use a different workflow only when a compact window cannot support the same structure.
- **重排（Reflow）：** 在不改变含义的情况下换行或堆叠内容。
- **调整大小（Resize）：** 让弹性区域吸收空间，并限制文本的可读行宽。
- **重新定位（Reposition）：** 移动次要面板或命令，同时保持顺序。
- **显示（Reveal）：** 随可用空间增加，逐步展示低优先级内容。
- **替换（Replace）：** 切换为更适合的导航或展示控件。
- **重构（Re-architect）：** 仅当紧凑窗口无法支持相同结构时改用不同工作流。
Define the narrow state as the safe default, then use `VisualStateManager` and `AdaptiveTrigger` for wider states. Prefer control-provided thresholds such as `NavigationView` compact/open pane widths when those express the intended behavior. Avoid fixed widths for content that must localize or scale.
将窄屏状态定义为安全默认状态，再使用 `VisualStateManager` 和 `AdaptiveTrigger` 添加宽屏状态。当 `NavigationView` 的紧凑/展开窗格宽度等控件阈值能表达预期行为时，优先使用这些阈值。避免给需要本地化或缩放的内容设置固定宽度。
## 4. Color and themes
## 4. 颜色与主题
- Use `{ThemeResource ...}` for colors and brushes that must update when the theme changes.
- Test light, dark, and high contrast independently; do not generate dark mode by inversion.
- Respect the system accent color unless product identity or domain semantics justify a controlled brand accent.
- Maintain at least 4.5:1 contrast for normal text. Use icons, text, or patterns in addition to semantic color.
- Do not encode state only through reduced opacity. Preserve recognizable text, focus, selection, and disabled semantics.
- Never place critical text over a material or image without a deterministic readable fallback.
- 对必须随主题运行时更新的颜色和画刷使用 `{ThemeResource ...}`。
- 分别测试浅色、深色和高对比度；不要通过反相生成深色模式。
- 尊重系统强调色，除非产品标识或领域语义足以证明需要受控的品牌强调色。
- 普通文本至少保持 4.5:1 对比度。除语义色外，同时使用图标、文本或图案。
- 不要只通过降低不透明度表达状态。保持文本、焦点、选择和禁用语义可辨认。
- 不要把关键文本放在无法确定可读性的材质或图像上，必须提供明确可读的回退方案。
Prefer system resources such as text fill, control fill, stroke, accent fill, and system status brushes. Verify resource names against the project's Windows App SDK version before emitting code.
优先使用文本填充、控件填充、描边、强调色填充和系统状态画刷等系统资源。生成代码前，根据项目的 Windows App SDK 版本验证资源名称。
## 5. Materials and elevation
## 5. 材质与层级
Use material to clarify layers, not to decorate every container:
使用材质来明确层级，不要装饰每个容器：
| Need | Preferred mechanism | Notes |
| 需求 | 首选机制 | 说明 |
|---|---|---|
| Main window background | `MicaBackdrop` | Windows 11; solid fallback on Windows 10 |
| Desktop-see-through window | `DesktopAcrylicBackdrop` | More visually active; use only when the experience benefits |
| Material on a specific region | `SystemBackdropElement` | Requires Windows App SDK 1.6.3 or later |
| Blur content inside the window | in-app `AcrylicBrush` | Does not show the desktop behind the app |
| Simple content surface | theme solid color | Often the clearest and cheapest choice |
| 主窗口背景 | `MicaBackdrop` | 用于 Windows 11；在 Windows 10 回退为纯色 |
| 可透视桌面的窗口 | `DesktopAcrylicBackdrop` | 视觉更活跃；仅在体验确有收益时使用 |
| 特定区域的材质 | `SystemBackdropElement` | 需要 Windows App SDK 1.6.3 或更高版本 |
| 模糊窗口内部内容 | 应用内 `AcrylicBrush` | 不会显示应用背后的桌面 |
| 简单内容表面 | 主题纯色 | 通常是最清晰且成本最低的选择 |
Do not use UWP `HostBackdrop` patterns in WinUI 3. Allow system fallback when transparency is disabled, hardware is insufficient, Battery Saver suppresses Acrylic, Remote Desktop is active, or high contrast is enabled. Ensure the fallback color preserves hierarchy and contrast.
不要在 WinUI 3 中使用 UWP `HostBackdrop` 模式。透明效果关闭、硬件不足、节电模式抑制 Acrylic、使用远程桌面或启用高对比度时，允许系统自动回退。确保回退颜色仍能维持层级和对比度。
Use elevation only to communicate overlap, focus, or transient UI. Prefer system shadows and overlay behavior. Do not introduce an external shadow control merely to make cards look raised.
仅用层级表达重叠、焦点或临时 UI。优先使用系统阴影和覆盖层行为。不要仅为了让卡片显得凸起而引入外部阴影控件。
## 6. Typography, icons, and motion
## 6. 字体、图标与动效
Use Segoe UI Variable and the WinUI type ramp by default. Reuse platform text styles rather than copying numeric sizes throughout XAML. Use regular body weight, stronger titles or labels, tabular figures for aligned numeric data, and wrapping before truncation. When truncation is unavoidable, expose the full value through an accessible tooltip or detail surface.
默认使用 Segoe UI Variable 和 WinUI 字体层级。复用平台文本样式，不要在整个 XAML 中重复数值字号。正文使用常规字重，标题或标签使用更强字重，对齐的数字数据使用等宽数字，并优先换行而不是截断。无法避免截断时，通过无障碍工具提示或详情界面公开完整值。
Use `SymbolIcon`, `FontIcon` with Segoe Fluent Icons, or a consistent vector asset set. Keep icon metaphor, size, stroke/fill style, and alignment consistent. Give unfamiliar or icon-only commands an accessible name and tooltip. Do not use emoji as navigation or command icons.
使用 `SymbolIcon`、搭配 Segoe Fluent Icons 的 `FontIcon`，或一致的矢量资源集。保持图标隐喻、大小、描边/填充风格和对齐一致。为不熟悉或仅有图标的命令提供无障碍名称和工具提示。不要使用 Emoji 作为导航或命令图标。
Use motion to explain causality, hierarchy, and continuity:
使用动效解释因果关系、层级和连续性：
- give immediate pointer/press feedback;
- prefer platform transitions and connected animations where they clarify movement;
- animate compositor-friendly properties such as opacity and transforms;
- keep motion interruptible and never use it to delay input;
- reduce or remove nonessential motion when system animation settings request it;
- avoid perpetual decorative movement in productivity surfaces.
- 立即提供指针/按下反馈；
- 在有助于解释移动时，优先使用平台过渡和连接动画；
- 为不透明度和变换等适合合成器的属性设置动画；
- 保持动画可中断，绝不使用动画延迟输入；
- 当系统动画设置要求时，减少或移除非必要动效；
- 避免在生产力界面中使用持续循环的装饰性动效。
## 7. Foundation review checklist
## 7. 基础规范检查清单
- [ ] The UI reflects Effortless, Calm, Personal, Familiar, and Complete + Coherent.
- [ ] Semantic tokens cover themes and all interaction states.
- [ ] Layout is proven at compact, medium, wide, snapped, and scaled conditions.
- [ ] Spacing and geometry follow a coherent 4 epx rhythm.
- [ ] Material choice communicates a layer and has a solid fallback.
- [ ] Typography remains readable under text scaling and localization.
- [ ] Icons use one language and are not emoji.
- [ ] Motion communicates change and respects user settings.
- [ ] UI 体现 Effortless、Calm、Personal、Familiar 和 Complete + Coherent。
- [ ] 语义 Token 覆盖主题和所有交互状态。
- [ ] 布局已在紧凑、中等、宽、贴靠和缩放条件下验证。
- [ ] 间距和几何遵循一致的 4 epx 节奏。
- [ ] 材质选择能表达层级并具有纯色回退方案。
- [ ] 字体在文本缩放和本地化后仍可读。
- [ ] 图标采用统一语言且不使用 Emoji。
- [ ] 动效能传达变化并尊重用户设置。
## 8. Official sources
## 8. 官方资料
- [Windows design principles](https://learn.microsoft.com/windows/apps/design/design-principles)
- [Windows design guidelines](https://learn.microsoft.com/windows/apps/design/guidelines-overview)
- [Screen sizes and breakpoints](https://learn.microsoft.com/windows/apps/design/layout/screen-sizes-and-breakpoints-for-responsive-design)
- [Content layout and spacing](https://learn.microsoft.com/windows/apps/design/basics/content-basics)
- [Materials in Windows apps](https://learn.microsoft.com/windows/apps/develop/ui/materials)
- [Accessible text requirements](https://learn.microsoft.com/windows/apps/design/accessibility/accessible-text-requirements)
- [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)