Files

9.0 KiB
Raw Permalink Blame History

name, description
name description
windows-ui-ux 为 Windows 桌面应用设计、评审、制作 HTML 交互原型并实现专业 UI/UX,覆盖通用桌面交互、Windows/Fluent 平台规范,以及 WinUI 3、Windows App SDK、XAML、PySide、PyQt、Qt Widgets、QML 和 Go Gio 的框架适配。当任务涉及 Windows 应用外壳、导航、标签页、多窗口、多 Tab 数据工作台、表格筛选与行交互、表单验证、导入与前置命令、生成/更新/提交操作、对话框、反馈、长任务、主题颜色、Mica/Acrylic、响应式布局、键盘/鼠标/触控、无障碍、HTML 客户确认原型、现有桌面 UI 优化,或把已确认设计转换为 WinUI、Qt/Python 或 Gio/Go 代码时使用。

Windows 桌面 UI/UX

使用三层模型指导工作:

  1. 核心体验层定义与语言和框架无关的任务、状态和交互契约;
  2. Windows 平台层定义 Fluent 视觉、窗口化、输入和无障碍基线;
  3. 框架适配层把前两层映射到项目实际 API、生命周期和部署方式。

不得把某个框架的控件限制冒充通用 UX 原则,也不得把 HTML 原型当作原生行为、性能或无障碍已经通过验证的证明。

核心规则

  • 先优化用户任务和恢复路径,再装饰单个控件。
  • 优先使用目标框架的标准控件、主题资源和内置交互,再考虑自定义组件。
  • 定义默认、悬停、按下、焦点、当前、选中、勾选、禁用、加载、空、错误、离线、成功和撤销等适用状态。
  • 键盘、指针、触控、屏幕阅读器、缩放、浅色、深色和高对比度属于同一体验。
  • 使用语义化 Token 管理颜色、字体、间距、几何、层级、图标和动效;不得只用颜色表达含义。
  • 保持桌面生产力应用所需的信息密度,不放大移动端模式,也不把常用命令藏在手势或悬停中。
  • 所有 API 与第三方控件建议都要对应项目的准确版本、目标 Windows、打包模型和依赖。

工作流

1. 检查项目与约束

先检查项目文件、依赖和入口代码,确定:

  • 实际语言、UI 框架、绑定和准确版本;
  • 最低 Windows 版本、打包与部署方式;
  • 用户、主要任务、数据规模、本地化和无障碍要求;
  • 窗口尺寸、贴靠、多显示器、多窗口及输入方式;
  • 品牌、现有设计 Token、浅色/深色和高对比度行为;
  • 客户确认范围、原型保真度、审批人和变更流程。

信息缺失时说明保守假设。版本敏感建议必须保持条件化。

2. 读取平台基线并选择一个适配器

Windows 项目始终读取:

根据实际依赖只选择一个实现适配器:

框架未知时先检查项目清单、导入和构建文件。没有专用适配器时,仍使用核心体验层和 Windows 平台层,并输出“概念 → 目标控件/API → 版本依据 → 回退 → 验证”的适配表;不得臆造 API,也不要混写多套框架代码。

3. 建模任务、导航与状态

定义主要任务、信息层级、窗口图、导航模型、命令作用域和状态所有权。先写顺利路径,再写取消、失败、重试、撤销和恢复路径。

涉及顶级导航、层级导航、静态标签、文档标签或多窗口时,读取 导航、窗口与标签规范。在实现前定义稳定身份、历史、焦点、状态恢复、未保存关闭协议、后台任务和窗口所有权。

4. 选择交互模式

按任务语义选择控件,不按截图或任意项目数量阈值选择。

  • 数据表格、网格或高密度列表:读取 数据表格交互规范,明确当前项、焦点、选择集、勾选集、筛选范围、行默认操作、右键目标和键盘模型。
  • 表单、设置、编辑器或输入流程:读取 表单与输入规范,明确提交模式、验证时机、异步竞态、错误恢复和未保存策略。
  • 对话框、确认、通知、进度或后台任务:读取 对话框、反馈与任务规范,按风险与干扰程度选择反馈层级。
  • 多个标签页均含顶部导入/配置、中部表格、底部生成/更新/提交:读取 多 Tab 数据工作台规范,统一页面骨架、命令分区与执行反馈。

跨按钮、菜单、上下文菜单和快捷键复用同一命令定义。所有指针加速路径都提供可见或键盘等价路径。

5. 建立视觉系统

使用 Windows 平台层定义字体、间距、颜色、层级、材质、图标、动效、窗口宽度和强对比回退,再由选定框架适配器落实。默认呈现应具有一致的 Fluent/Windows 风格和颜色系统,而不是未经设计的框架原始界面;同时保留标准控件行为和目标框架可维护性。

视觉升级现有项目时,先盘点现有主题、控件封装和用户流程,再统一 Token 与高频组件。不要只改 QSS/XAML/绘制颜色而忽略状态、焦点、布局和错误反馈。

6. 制作 HTML 交互原型并确认

新产品、主要页面或显著改版在正式桌面实现前,制作可本地运行的 HTML/CSS/JavaScript 交互原型,并读取 HTML 原型与交接规范。

原型应:

  • 复用已定义 Token、真实文案、状态矩阵和窗口断点;
  • 覆盖主流程及关键加载、空、错误、禁用、确认和完成状态;
  • 用可重置模拟数据,不连接生产凭据、数据库或不可逆操作;
  • 对表格、表单、标签、工作台和对话框实现对应核心规范中的关键交互;
  • 以书面清单确认信息架构、布局、视觉、文案、流程和状态。

向客户说明浏览器与目标桌面框架在原生控件、窗口管理、字体、系统材质、DPI、无障碍和性能上的差异。确认后建立“HTML 组件/状态 → 核心交互契约 → 目标适配器控件/API”的交接表。客户更改已确认设计时,先更新原型与验收记录。

小型、低风险、局部调整可说明理由后跳过原型门禁。

7. 实现与验证

遵循项目既有架构,集中管理 Token、命令和状态。保留虚拟化,不在 UI/事件线程执行阻塞工作,处理取消、重复提交、过期结果和窗口/页面销毁后的回调。

至少验证:

  • 紧凑、中等、宽窗口,贴靠、最大化与跨显示器;
  • 100%–200% 显示缩放与增大文本;
  • 浅色、深色、高对比度及透明效果关闭;
  • 仅键盘、鼠标及声明支持的触控;
  • Narrator 与适用的无障碍检查工具;
  • 空、真实、超大、长文本、失败、权限拒绝和慢任务数据;
  • 最低支持 Windows 与当前支持目标;
  • 干净环境中的最终打包产物。

交付物

新设计或改版至少提供:

  1. 假设、用户和目标场景;
  2. 信息架构、窗口/导航模型和响应式布局;
  3. 核心交互与状态矩阵;
  4. 语义视觉 Token;
  5. 目标框架控件/API 映射及版本依据;
  6. 键盘、指针、焦点与无障碍要求;
  7. 加载、失败、取消、重试、确认、完成与撤销策略;
  8. 验收与测试清单;
  9. 需要客户确认时的可运行 HTML 原型、确认记录和桌面交接表。

评审时先报告阻断、严重和中等问题,再列视觉润色。每项指出位置、触发条件、用户影响、违反的规则和最小稳健修正。实现时只修改请求范围,运行相关构建或检查,并报告尚未验证的版本假设。

禁止的失败模式

  • 不混用 WinUI/UWP 命名空间、PySide/PyQt 绑定或 Qt Widgets/QML 的实现习惯。
  • 不假设 WinUI 3 自带已归档的 Toolkit DataGrid,不把 ComboBox 当多选控件。
  • 不把 Qt QSS 当完整 CSS,不从工作线程触碰 Qt GUI 对象。
  • 不把 Gio Material 默认主题称为 Fluent,不在每帧重建持久 Widget 状态,也不阻塞窗口事件循环。
  • 不把 HTML DOM/CSS 逐字移植到桌面代码,不用浏览器原型证明原生性能和无障碍。
  • 不混淆当前项、焦点、选择和勾选;不让单击、双击、复选框和行内按钮重复触发。
  • 不把导入、筛选、行操作和工作流完成命令堆在一个区域,也不混淆只读“刷新”与写入“更新”。
  • 不为所有删除或完成操作统一弹确认框,也不为普通成功统一弹模态对话框。
  • 不为材质效果破坏标题栏、可读性、高对比度或纯色回退。
  • 不硬编码单一窗口、主题、DPI、语言或输入方式。