在创建或审计 Qt/QML、Qt、Web 或嵌入式…

适用于需要为 Qt/QML、Qt 项目、Web 或嵌入式 MPU/MCU 目标设计或审计屏幕、布局、导航和 UX 的场景。

适用场景

解决思路

1. 设计 UI 前运行七项上下文检查，对照对话和项目状态确认：目标平台、屏幕形状、分辨率和 DPI、设计系统、内容优先级、观看距离、locale 与输入方式；只询问真正缺失的项，不要重复询问已由对话或仓库回答的内容。
2. 若用户无法回答某项，选择一个合理的 Qt 默认值，并在回复中说明该默认值，便于用户纠正。
3. 对现有设计的小改动（例如把 OK 按钮移到右边、修改标签、把某处改成红色）不触发七项检查清单；静默应用第 1 节原则，并在相关处验证第 2 节的对比度和点击目标。
4. 确认目标平台是 Desktop、web browser、mobile 还是特定硬件（MCU、Raspberry Pi、其他嵌入式板卡）；若是特定板卡，询问是否存在板卡专用技能，若存在则加载它。
5. 确认屏幕形状是 Rectangle（默认）、Square 还是 Circle。
6. 确认屏幕分辨率和 DPI，允许近似值。
7. 检查项目是否已有设计系统或 Qt Quick Controls style；若有则遵循并复用其 tokens。若无，推荐 Qt Quick Controls style：Basic、Fusion、Imagine、Material、Universal、iOS 或 FluentWinUI3（iOS 和 FluentWinUI3 需要 Qt 6.7 或更高）。若项目遵循第三方设计语言（Material Design 3、Apple Human Interface Guidelines、Fluent 2），把其 tokens 映射到对应 Qt Quick Controls style，而不是引入并行 token 词汇。
8. 确认内容优先级：此屏幕上哪些信息是 primary、secondary、tertiary。
9. 确认观看距离：例如手持约 30 cm、桌面约 60 cm、面板约 1.5 m、墙面约 3 m。
10. 确认 locale/language、是否需要 RTL（Arabic、Hebrew、Farsi、Urdu）支持，以及必须支持的输入方式（touch、keyboard、mouse/pointer、hardware buttons、voice）。
11. 若目标是嵌入式或 MCU 设备，在任何设计决策前完整阅读第 4 节，因为它覆盖若干桌面默认值。
12. 若用户请求审计现有设计，跳到第 5 节 Audit。
13. 应用 Golden Ratio + Rule of Thirds：把主要元素放在视觉交点。
14. 应用 Progressive Disclosure：只显示当前步骤所需内容。
15. 应用 Inverted Pyramid：关键信息在前，细节在后。
16. 应用 Modularity：把复杂流程拆成更小、自包含的屏幕。
17. 应用 Ockham's Razor：两个设计等价时选更简单的。
18. 应用 Performance Load：步骤越少，任务完成率越高。
19. 应用 Five Hat Racks：按类别、时间、位置、字母或连续统组织信息。
20. 应用 Jakob's Law：匹配用户已熟悉的模式。
21. 应用 Affordance：控件外观应像其功能。
22. 应用 Hick's Law：选择越多决策越慢；限制每屏选项数量。
23. 应用 Miller's Law：工作记忆约 7 项，按此分块。
24. 应用 Recognition Over Recall：展示选项，不要求记忆。
25. 应用 Proximity + Similarity：视觉上分组相关元素。
26. 应用 Uniform Connectedness：共享边框或颜色表示同一组。
27. 应用 von Restorff Effect：一个视觉独特元素吸引注意，谨慎使用。
28. 应用 Peak-End Rule：用户记住峰值和结尾；把完成状态（如安装程序完成屏）设计得有回报感，而非突然结束。
29. 应用 Doherty Threshold：系统反馈在 400 ms 内，或显示进度指示器。
30. 应用 Aesthetic-Usability Effect：精致设计会被认为更可用。
31. 应用 Wayfinding：用户必须始终知道自己在哪、去过哪、可以去哪。
32. 阅读模式 F-shaped：文本密集内容用顶部横条、较短次级横条、左边缘扫读。
33. 阅读模式 Z-shaped：稀疏内容用左上→右上→对角→右下。
34. 阅读模式 Layer-cake：用户扫读标题并跳过正文。
35. 阅读模式 Spotted：用户跳到地标——链接、大写、列表项。
36. 按钮和 CTA：限制每组 CTA 按钮数量。OK + Cancel 为一组；额外操作必须在视觉上次要。
37. 按钮和 CTA：使用 Proximity 和 Similarity 区分 primary、secondary、tertiary 控件。
38. 错误预防：设计可供性引导正确使用。
39. 错误预防：在技术上可能处允许 undo。
40. 错误预防：破坏性或不可逆操作前确认。
41. 错误预防：为危险状态添加警报或提示。
42. 响应式（仅 desktop/web；嵌入式见第 4 节）：先按主要目标分辨率设计——桌面带 chrome、嵌入式固定分辨率，或应用典型窗口缩放范围；较窄宽度下堆叠、折叠或隐藏次要内容。
43. 响应式：最小布局宽度 240 px；低于此值堆叠或折叠元素。
44. 响应式：空间紧张时把次要功能藏到菜单或下拉中。
45. 动效与动画（desktop/web；嵌入式见第 4 节）：每个动画都必须有功能，而非装饰。
46. 进入动画使用 deceleration easing（快开始、慢结束）；元素应像抵达，而不是突然弹出。
47. 退出动画使用 acceleration easing（慢开始、快结束）；元素应像离开，而不是消失。
48. 直接操作反馈：100 ms 内响应；超过 1 s 的操作必须显示进度指示器；超过 10 s 必须显示预计时间。
49. 时长预算：小元素（icons、badges）100–150 ms；中等元素（cards、panels）200–300 ms；全屏过渡 300–400 ms；任何 UI 动画不超过 500 ms，更慢会显得像坏了。
50. 限制同时动画为一到两个元素；整屏同时动画会让人迷失方向。
51. 在 QML/CSS 中只动画 transform 和 opacity——它们由 GPU 合成；动画几何属性（width、height、anchors）触发布局重算并导致卡顿。
52. 尊重用户减少动画偏好。Web 上通过 prefers-reduced-motion CSS media query 限制非必要动画。Qt 6.x 无内置等价物：暴露项目级设置（例如绑定到 QSettings 或运行时无障碍选项的 singleton property），并基于它限制动画。用户选择退出时，用即时过渡替代动画，不要只是放慢。
53. 空间一致性：跨屏幕移动的元素应按目的地方向动画（LTR 布局中前进 = 左滑，后退 = 右滑）。
54. 字体比例（desktop/web；嵌入式见第 4.4 节）：使用模块化比例推导所有字号。模块化比例是由固定比率关联的数列，每个尺寸与其他尺寸成数学比例，产生和谐而非任意的比例。比率见下；可参考 https://www.modularscale.com/。
55. 构建比例第 1 步：选择基准——目标观看距离下正文最佳字号。桌面约 60 cm 时 16 px 是可靠起点。基准是 ms(0)。
56. 构建比例第 2 步：选择比率——基准乘以该比率得到上一级，除以得到下一级。根据产品特征选择：8:9 Major second 1.125 紧凑密集，适合数据密集 UI、安装流程；5:6 Minor third 1.200 适中，适合通用桌面应用；4:5 Major third 1.250 开放舒适，适合营销、引导；3:4 Perfect fourth 1.333 强对比，适合仪表盘、粗层级；1:1.618 Golden section 1.618 高对比，谨慎使用，级差大。
57. 构建比例第 3 步：把比例步骤映射到角色——为每个排版角色分配步骤号。不要添加不在比例上的角色；若需要某尺寸，选最近步骤。
58. 工作示例（base 16 px，Perfect Fourth 1.333）：ms(3) 37.9→38 px Display/hero text；ms(2) 28.4→28 px Page title/H1；ms(1) 21.3→21 px Section heading/H2；ms(0) 16 px Body base；ms(-1) 12.0→12 px Caption/label/metadata。每屏最多使用三到四个这些步骤，超过四个活跃尺寸会造成视觉噪声。
59. 所有模块化比例的规则：桌面观看距离（约 60 cm）正文（ms(0)）最小 16 px。绝不能用 ms(-1) 或更小作为主要阅读内容。
60. 行高：正文 1.4–1.6×；标题 1.1–1.2×（标题需要更少行距）。
61. 行长：舒适阅读每行 45–75 个字符。文本容器使用 max-width，不要让散文横跨整个视口。
62. 字重配对：正文和说明使用 Regular (400)；标题使用 Medium (500)。正文内绝不用 Bold (700)。
63. 系统字体优先。默认使用 OS/平台系统字体（Windows 上 Segoe UI Variable、macOS 上 SF Pro、Android/Linux 上 Roboto）。仅当有品牌要求且存在对应 Figma token 时才引入自定义字体。
64. 在系统大字体尺寸下验证。不要硬编码忽略 OS 字体缩放的像素值。Qt 中正文优先用 font.pointSize（尊重平台 DPI 缩放）而不是 font.pixelSize，或从由 Screen.pixelDensity 驱动的 singleton 派生字号。Web 上使用相对单位（rem）。
65. Qt/QML 实现：在 QML 中把比例定义为 singleton（例如 TypeScale.qml），以便按角色名引用字号，而不是硬编码值。
66. TypeScale.qml 示例内容：pragma Singleton；import QtQuick；QtObject { readonly property real base: 16; readonly property real h2: 21; readonly property real h1: 28; readonly property real display: 38; readonly property real caption: 12 }。在组件中通过 TypeScale.h1 引用。基准或比率变化时重算整个 singleton，绝不逐个修补值。
67. 在 QML 模块注册 singleton 以便导入。在 qmldir 文件中写：module MyApp.Theme 和 singleton TypeScale 1.0 TypeScale.qml。
68. 在 CMake 中使用 qt_add_qml_module 时：qt_add_qml_module(myapp_theme URI MyApp.Theme VERSION 1.0 QML_FILES TypeScale.qml)，并 set_source_files_properties(TypeScale.qml PROPERTIES QT_QML_SINGLETON_TYPE TRUE)。
69. 多输入和键盘导航（desktop/web）：每个桌面和 web 界面必须支持多种输入方式，不要只针对指针设计。
70. 完整键盘可导航是必需的。Tab 顺序必须遵循视觉阅读顺序（LTR 为从左上到右下）。始终渲染可见焦点指示器——QML 中由 activeFocus 驱动（例如绑定到 activeFocus 的 Rectangle 边框或 scale），或使用 Control 的样式特定焦点视觉。Web 上不要移除焦点环而不提供样式化替代。
71. 无键盘陷阱。键盘用户必须始终能用 Escape 或键盘可访问的关闭控件退出任何 modal、popover 或 overlay。
72. 每个交互元素必须可通过指针、键盘，以及 Qt 无障碍 API 暴露的地方通过屏幕阅读器访问。这是要求，不是建议。
73. Hover 状态是增强，不是主要披露机制。任何通过 hover 显示的信息也必须无需指针即可访问（例如可见标签、专用信息按钮或键盘触发 tooltip）。
74. 触摸和指针共存。在也支持触控笔或指针的触摸设备上，检测到指针时不要移除触摸目标。
75. 语义颜色：颜色应在整个界面中一致地传达含义，避免任意颜色选择。
76. 使用基于角色的 tokens，而不是原始 hex 值。Token 名称应描述颜色扮演的角色（interactive、surface、on-surface、error、outline），而不是外观（blue、dark-blue、grey-2）。上述角色词汇镜像 Material Design 3；当项目设计语言是 Fluent 2 或 Apple Human Interface Guidelines 时，映射到那些系统的等价角色名，而不是混合词汇。如果项目自带 Figma token 集，在工具支持提取前手动把 tokens 复制到 singleton。
77. 区分交互颜色和装饰颜色。用于按钮表示“可点击”的颜色不得同时用作不邀请交互的背景强调色。装饰性复用交互颜色会训练用户点击不可点击的东西。
78. 颜色绝不作为唯一状态载体。已在第 2 节 WCAG 覆盖，但同样适用于非禁用状态：success、warning、error 必须始终把颜色与图标或文本标签配对。
79. 暗色模式：从一开始就为 light 和 dark 主题设计。基于 token 的颜色系统自动处理；若使用硬编码颜色，必须显式定义暗色变体。
80. 文化可变颜色含义：红色在西方语境 = 危险，但在某些东亚语境 = 好运；白色在西方语境 = 纯洁，但在某些东亚语境 = 哀悼。对安全关键或国际发布产品，不要只依赖颜色传达关键含义——始终与文本或通用图标配对。
81. 本地化和 RTL 布局：在 intake 中询问问题 7，并在此处根据回答行动。
82. 日期、时间和数字格式必须 locale-aware。绝不要硬编码格式字符串如 DD/MM/YYYY。使用 Qt 的 QLocale 或平台 locale API。
83. RTL 布局镜像：对 Arabic、Hebrew、Farsi、Urdu，整个布局水平镜像。导航从右到左。返回按钮指向右。暗示方向的图标（箭头、chevron、播放控制）必须翻转。在场景根附近启用 LayoutMirroring.enabled 与 LayoutMirroring.childrenInherit: true；它处理 anchors 和 Qt Quick Layouts。即使启用 LayoutMirroring，以下项仍需显式注意：Text.horizontalAlignment 默认值、Image 内容（方向图标用 mirror: true）、自定义 Canvas 绘制、以及任何手动 x 位置。
84. 文本扩展：翻译字符串通常比英文源长 30–40%。设计容器和按钮以适应扩展——任何用户可见字符串避免固定宽度容器。
85. 图标：避免文化特定或跨地区含义可变的图标（例如 thumbs-up、某些手势）。优先通用符号（成功用 checkmark、关闭用 X、搜索用 magnifying glass）。
86. 避免在图像或图标中嵌入文本。本地化要求所有文本位于字符串资源中——烘焙进资产的文本无法翻译。
87. 无障碍（WCAG 2.2）：交付前按这些检查每个设计。
88. Perceivable：所有信息都有非视觉等价物（alt text、labels）。文本对比度 ≥ 4.5:1，大文本和 UI 组件 ≥ 3:1。
89. Operable：完整键盘导航，无焦点陷阱。所有交互目标无需指针即可到达。
90. Understandable：标签、说明和错误消息使用平实语言。
91. Robust：标记和结构可与屏幕阅读器和辅助工具配合。
92. 绝不要只依赖颜色传达状态——始终与形状、图标或文本配对。
93. 用 OS 字体大小设为 Large 测试——验证布局能容忍文本缩放而不截断或溢出。
94. 用色盲模拟测试（Deuteranopia 最常见）——确认所有状态变化无需颜色也可区分。
95. 验证焦点顺序——用 Tab 遍历每个交互元素，确认顺序合乎逻辑。焦点必须始终可见——Qt 侧焦点指示器模式见 §1.3。
96. AI 特定 UX：设计涉及 AI 功能的屏幕时，确保用户控制：用户必须能启动、停止和修改 AI 操作。始终包含 Undo 或 Regenerate。
97. AI 透明性：当 AI 决策影响用户时，展示 AI 为何做出该决策。
98. AI 优雅失败：AI 失败时，提供清晰的手动回退路径。
99. AI 价值优先于新奇：AI 功能必须解决真实问题——不应为演示而存在。
100. AI 不确定性沟通：AI 输出是概率性的。当置信度低或结果可能不正确时，要呈现这一点——使用模糊语言（suggested、approximately、review before using）、视觉置信度指示器或明确标注。绝不把概率性输出呈现为权威事实。对 Qt AI Assistant 及类似功能，在任何影响重大决策的答案处提供 show source 或 why this? 可供性。
101. AI 延迟模式：AI 操作通常需要 1–15 秒。不要显示通用 spinner——用户无法从 spinner 估计时长，约 3 秒后会焦虑。
102. AI 流式输出（文本生成）：立即开始渲染部分结果。生成继续时在插入点显示闪烁光标或脉冲指示器。
103. AI 长操作（代码生成、图像处理）：显示与预期结果形状匹配的 skeleton screen 或 placeholder。这能锚定注意力并设定预期。
104. AI 后台操作（索引、分析）：作为细微持久状态指示器呈现（状态栏中的 progress bar、工具栏中的 animated icon），而不是阻塞式 modal。
105. 在等待 AI 响应时绝不要空白整个屏幕。
106. AI 行动前同意：如果 AI 功能将读取、发送或修改用户数据（文件、代码、设置），在行动执行前明确说明。一行确认（This will read your project files to generate a suggestion）即可——不需要 modal dialog。
107. 嵌入式和 MCU 目标：本节覆盖桌面默认值。为任何嵌入式、MCU 或受硬件约束的目标设计前完整阅读。
108. 收集驱动每个决策的硬件事实（若 intake 尚未回答）：物理像素尺寸和 DPI；是否有 GPU（若未知，假设无）；UI 资产可用 RAM 和 flash；输入方式：触摸屏、硬件按钮、旋转编码器、指针；是否存在板卡专用技能。
109. 4.1 无 GPU 渲染：软件光栅化意味着每个视觉效果都消耗 CPU 时间。
110. 无 GPU 时允许：平面纯色填充；1 px 实线描边；位图（PNG）图标和字体；仅透明度过渡；固定像素布局。
111. 无 GPU 时不允许：渐变；阴影；模糊或透明层；同时移动 + 淡入淡出动画；Flexbox 或流式布局。
112. 优先位图图标而非矢量路径——光栅成本在编译期支付，而非运行时。仅当确认有 GPU 时才放宽这些约束。
113. 例外：上述约束适用于运行时软件光栅化。Qt Quick Ultralite 通过其静态渲染管线支持编译期烘焙渐变。一些 MCU 附带 2D blitter 或小型 GPU，可放宽 no-blur 和 no-transparency 约束。在把表格当作硬性禁止前，验证硬件 data sheet 和所用 Qt 工具链。
114. 4.2 嵌入式布局：固定像素布局。无流式网格，无 breakpoints。按精确屏幕尺寸设计。
115. 嵌入式布局：每屏一个任务。无重叠面板。
116. 嵌入式布局：扁平导航——在屏幕之间移动，而非屏幕内移动。最多 2 层深。
117. 嵌入式布局：系统状态（connected、error、active mode）必须永久可见——不用 tooltips 或 hover 状态。
118. 4.3 嵌入式交互：无 hover 状态。用显式按钮或专用屏幕替代 hover 触发的披露。
119. 嵌入式触摸最小值：默认 48 px。某些受控环境（固定握持医疗仪器、安全工业面板）在明确安全审查后可证明更小目标合理。戴手套环境（工业、户外）：60–72 px。
120. 嵌入式交互：每个动作必须有硬件按钮回退。无纯触摸动作。
121. 嵌入式交互：除非硬件确认支持，否则无拖拽、滚动惯性或多点触控。
122. 嵌入式交互：确认任何控制物理执行器的动作。
123. 4.4 嵌入式排版：嵌入式字体是位图——大小在构建时固定。从一开始就做对。
124. 嵌入式排版观看距离与最小尺寸：约 50 cm（手持、家电）最小 14 px，优先 16 px；约 1.0–1.5 m（HMI、仪表盘）最小 20 px；约 2–3 m（墙面板、公共显示）最小 28 px。
125. 嵌入式排版：所有文本对比度 ≥ 4.5:1。嵌入式屏幕常有差视角和亮环境光——更高对比度总是更好。
126. 4.5 错误和安全：在不可逆物理执行器命令前确认——这是安全要求。
127. 错误和安全：错误状态指示器必须持久——由应用状态驱动，而非瞬态 UI 状态。它们必须经得起屏幕重绘。
128. 错误和安全：警报需要三个独立线索：color + shape + text。
129. 错误和安全：定义安全默认屏幕，应用崩溃或失去通信时 UI 返回该屏幕。
130. 错误和安全：无静默失败——未确认的硬件命令必须可见地呈现。
131. 4.6 Desktop → MCU 快速参考：响应性——desktop/web 用 Flexbox、流式；MCU/embedded 用固定像素布局。
132. 快速参考：动画——desktop/web 用 easing curves、≤ 400 ms；MCU/embedded 仅 opacity、< 200 ms。
133. 快速参考：渐进披露——desktop/web 用 tooltips、hover；MCU/embedded 仅显式按钮。
134. 快速参考：触摸目标——desktop/web 推荐 44 px；MCU/embedded 默认 48 px（仅在明确安全审查后放宽）。
135. 快速参考：字体渲染——desktop/web 矢量、OS 可缩放；MCU/embedded 位图、构建时固定。
136. 快速参考：状态沟通——desktop/web 颜色 + token；MCU/embedded 颜色 + 形状 + 文本。
137. 快速参考：错误恢复——desktop/web Undo；MCU/embedded 行动前确认。
138. 快速参考：状态可见性——desktop/web 状态栏/tooltip；MCU/embedded 始终在屏幕上。
139. 快速参考：导航深度——desktop/web 无限；MCU/embedded 最多 2 层。
140. 快速参考：本地化——desktop/web QLocale、RTL mirroring；MCU/embedded 仅 QLocale（RTL 很少适用）。
141. 审计现有设计：将每个发现分类为 Critical——违反核心 UX 法则或 WCAG 无障碍规则，必须修复；Warning——潜在摩擦或认知负荷升高，应修复；Opportunity——增强或 AI 驱动改进，考虑。
142. 审计：若目标是嵌入式，先应用第 4 节约束。
143. 桌面/web 扩展审计清单：Motion——动画是否 ≤ 400 ms、功能性，且存在 reduced-motion 路径？
144. 扩展审计清单：Typography——正文是否 ≥ 16 px，且每屏使用不超过三种字号？
145. 扩展审计清单：Keyboard——每个交互元素是否仅用键盘即可到达和操作？
146. 扩展审计清单：Colour——所有颜色是否基于 token 或语义命名？所有状态变化是否把颜色与第二线索配对？
147. 扩展审计清单：Localisation——所有用户可见字符串是否使用 locale-aware 格式？容器是否能扩展 30–40% 以容纳翻译文本？
148. 扩展审计清单：AI features——延迟模式、不确定性和同意是否按第 3 节处理？
149. 参考资源：Nielsen Norman Group — 10 Usability Heuristics: https://www.nngroup.com/articles/ten-usability-heuristics/
150. 参考资源：Laws of UX: https://lawsofux.com/
151. 参考资源：WCAG 2.2: https://www.w3.org/TR/WCAG22/
152. 参考资源：Modular Scale calculator: https://www.modularscale.com/
153. 参考资源：Apple Human Interface Guidelines: https://developer.apple.com/design/human-interface-guidelines
154. 参考资源：Microsoft Fluent 2 Design Principles: https://fluent2.microsoft.design/design-principles
155. 参考资源：Google Material Design 3 Foundations: https://m3.material.io/foundations
156. 参考资源：Qt QLocale (localisation API): https://doc.qt.io/qt-6/qlocale.html
157. 参考资源：Qt LayoutMirroring (RTL): https://doc.qt.io/qt-6/qml-qtquick-layoutmirroring.html

适用边界 · 注意事项

• 对现有设计做小改动（例如移动按钮、修改标签、改颜色）时，不适用完整七项上下文检查清单；只需静默应用第 1 节原则，并在相关处验证对比度和点击目标。
• 目标为嵌入式或 MCU 时，不要套用桌面/web 的响应式、动画、hover、矢量字体等默认规则，应优先遵循第 4 节。
• 若项目不使用 Qt/QML，则不要强行引入 Qt Quick Controls style、QML singleton、QLocale、LayoutMirroring 等 Qt 特定实现；只可借鉴其中的通用 UX 原则。