Skip to content

UI 与交互详细设计(V10):从操作员流程到页面结构

内容类型:UI / 交互专项设计难度:基础到进阶适合:新页面、主界面重构、复杂状态交互和真实设备操作界面阅读时间:约 12 分钟

上位机界面的核心不是“深色科技风”,而是:操作员现在处于什么状态、最需要看什么、能做什么、做完以后软件和真实设备分别会发生什么。

但完整 UI 设计也不是所有 XAML 修改的必经步骤。V10 先分任务。

1. 先判断是否需要本页

当前任务推荐方式
改文案、颜色、Margin、列宽、现成 StyleUI MicroPatch → Fast,不用本页完整设计
按钮启用条件、告警展示、参数何时可编辑UI BehaviorPatch → 先固定行为语义
新页面、主界面重构、操作流程变化使用本页完整 UI/交互设计
只是想知道按钮当前为什么灰Read-Only Trace

不要因为文件是 .xaml 就自动调用 UI 设计流程。

2. 新页面先看操作员任务,不先看视觉风格

先回答:

  1. 谁使用:操作员、测试人员、调试工程师、维护人员?
  2. 他进入页面时最常做的 1–3 个动作是什么?
  3. 哪些状态必须持续可见?
  4. 哪些信息只在排障时需要?
  5. 哪些操作会改变真实设备状态?
  6. 异常时软件应该继续、提示、报警还是阻断?
  7. 恢复后页面怎么回到正常状态?

这比“圆角多少、渐变什么颜色”更重要。

3. 页面职责矩阵

页面核心任务高频操作持续状态低频/诊断信息
主界面运行、监控、停止连接、启动、停止在线、运行、当前值、告警协议细节、版本、诊断
参数页设置任务参数保存、恢复、应用参数合法性、应用状态历史版本、底层字段
日志/维护页排查问题筛选、导出、复制最新异常、恢复状态原始协议、堆栈、错误码

主界面优先面向操作员,不要把 PID、线程名、内部 Service、SCPI 原文当作主要信息。

详见 操作员界面与维护诊断分层

4. 控件状态矩阵只描述 UI,不代替后端安全

可以为 UI 写:

控件UI 何时可操作为什么
启动当前业务状态允许启动时减少误操作
停止运行/暂停阶段提供正常停止入口
参数输入当前规则允许修改时避免无效输入
结果导出有可导出结果时防止空操作

但必须同时记住:

text
Button.IsEnabled = false
≠ 后端安全联锁

真实危险动作应该再次经过:

text
Operator Command
→ Workflow / Safety Gate
→ Device Service
→ Hardware Action

不能只因为按钮灰了,就认为其它调用路径绝对无法启动高压、电机或阀门。

5. 按钮动作先写 Behavior Contract

对于会改变业务状态或真实设备的按钮,建议先写:

text
Trigger:
Condition:
Action:
Reset:
Record:
NonGoals:

例如“启动试验”:

text
Trigger: 操作员点击启动
Condition: 参数合法,流程处于 Ready,安全条件满足
Action: 请求 Workflow 进入启动流程
Reset: 启动失败回到 Ready,并保留原因
Record: 操作员动作、参数版本、结果
NonGoals: UI 不直接发送高压/运动命令

页面按钮调用的是业务能力,不应该自己成为完整设备控制逻辑。

6. “异常”必须先分类后果

旧式 UI 设计常写:

text
通信超时 → 弹窗 → 停止
设备断开 → 所有按钮禁用 → 故障

这可能是错的。

先明确业务后果:

text
Information
Advisory
AlarmOnly
InterlockFault

例如:

  • MES 断开可能只是 AlarmOnly,本地控制继续;
  • 磁盘空间低可能只是 Advisory;
  • 某设备联锁失效可能才是 InterlockFault。

界面颜色、弹窗、按钮状态都应该服务于已经确认的业务后果,而不是反过来决定后果。

详见 行为与告警语义

7. 操作员信息与诊断信息分层

推荐:

text
OperatorSummary
= 中文短句 + 当前后果 + 下一步动作

DiagnosticDetail
= SCPI / Raw HEX / 错误码 / 寄存器 / 堆栈 / 时间线

例如:

text
操作员:
“示波器通信异常,当前试验已暂停,请检查设备连接。”

诊断:
Timeout after 2000 ms; cmd=:WAV:DATA?; session=Scope1; errorQueue=...

不要为了“界面简洁”把底层证据丢掉,也不要把全部底层证据塞在主界面吓操作员。

8. 页面数据源矩阵

新页面或复杂改版建议写清:

页面字段Source of TruthUI 更新方式单位/格式是否可编辑
设备在线状态Device/Application State事件/轮询Online/Offline
当前测量值Measurement Model限频推送明确工程单位
任务参数Config/Application用户操作明确范围和单位
告警摘要Alarm/Event Model事件OperatorSummary

涉及测量值时额外确认:

text
RawValue
EngineeringValue
Conversion
ThresholdBasis
Aggregation
LoggedUnit

详见 测量值语义

9. 新页面状态要覆盖“用户真的会遇到的状态”

按项目需要选择,不要求每页机械覆盖全部:

  • Loading;
  • 空数据;
  • 未连接;
  • 连接中;
  • 运行中;
  • 暂停/停止;
  • Advisory;
  • AlarmOnly;
  • InterlockFault;
  • 部分数据不可用;
  • 恢复中;
  • 已恢复。

状态数量来自实际业务,不是 UI 模板越完整越好。

10. 用户操作流程模板

复杂流程可以写:

text
流程名称:
用户目标:
进入条件:

1. 用户做什么
2. 软件怎样响应
3. 是否产生设备动作
4. 用户看到什么结果
5. 如何结束/恢复

异常分支不要直接写“弹窗/停止”,而是写:

text
Event:
BusinessConsequence:
OperatorSummary:
DiagnosticDetail:
Recovery:

这样页面设计不会偷偷改变状态机。

11. 页面说明模板:需要时使用,不是每页强制 16 字段

对于新主页面、关键设备控制页,可使用较完整模板:

text
PageName:
Goal:
PrimaryUser:
EntryCondition:
CoreActions:
AlwaysVisibleState:
EditableParameters:
ReadOnlyData:
DeviceActions:
BehaviorRules:
OperatorMessages:
DiagnosticAccess:
DataSource:
RefreshPolicy:
RecoveryState:
ResolutionConstraints:

对于简单二级页,只填真正相关项;对于 MicroPatch,不填这张表。

12. 上位机 UI 的几个重要原则

  • 高频操作明显,低频配置收进二级页面;
  • 在线/运行/告警/故障等关键状态持续可见;
  • 状态不要只靠颜色,还要有文字/图标;
  • 危险动作的 UI 确认只是第一层,后端仍需安全 Gate;
  • 运行中参数能否编辑由业务规则决定,不一概禁用;
  • 长时间运行的曲线、日志、表格要限量和限频;
  • 同一个故障不要每秒重复弹窗;
  • 恢复后页面要有明确恢复状态;
  • 非安全 Advisory 不应意外成为启动门禁。

13. 真实设备按钮的额外安全边界

高压、运动、阀门、继电器、加热、气路等:

text
UI 点击
→ 后端安全条件
→ 必要 HITL
→ Device Action

Agent 做 UI/Workflow 自动验证时优先 Fake/Replay。没有明确授权,不为了“点一下看看”自动操作真机。

详见 真实设备操作与验证安全边界

14. 验证按改动类型走

改动默认验证
纯文案/静态提示V0
XAML 布局/Binding 小改V1
UI 影响 Domain/设备参数V2
UI 改变流程、告警后果、联锁V3
发布级 UI/流程重构V4

不要把“视觉变化”自动等同于低风险,也不要把“XAML 文件”自动等同于需要完整回归。

15. 和其它页面怎么配合

一句话原则

新页面先围绕操作员任务和业务后果设计;小 UI 修改走 MicroPatch,界面禁用和弹窗永远不能替代真实的业务规则与设备安全边界。

别来无恙 · C# 上位机 AI 实战站 · 从零到交付 · QQ 群:1016188499