feat: add draw-prototype-flow

2026-08-04 13:55:32 +08:00
parent 5ff8899b48
commit c113f68bf4
8 changed files with 975 additions and 0 deletions
@@ -0,0 +1,93 @@
+# 低保真产品说明板设计模式
+
+## 1. 三层交付结构
+
+一份可落地的产品原型同时包含三层：
+
+1. **页面层**：用户看见什么、能做什么，包括页面、抽屉、弹窗和关键状态。
+2. **动线层**：谁在什么条件下执行什么动作，从哪里到哪里，失败后如何恢复。
+3. **规则层**：状态、权限、字段值域、联动、统计口径以及操作反馈。
+
+只画页面会遗漏行为，只画流程会缺少界面上下文，只画规则又难以评审。三层必须复用同一套稳定 ID。
+
+## 2. 画板与信息层级
+
+默认桌面端画板为 1600×900；移动端改为统一设备宽高，但同一文件不要混用多个无说明尺寸。
+
+每个画板从上到下包含：
+
+- 外部编号标题：`03 · P-REQUEST-EDIT · 编辑申请 · 草稿`；
+- 应用外壳：产品名、当前角色、导航和环境信息；
+- 页面标题与一句任务说明；
+- 主要内容区；
+- 主次操作；
+- 底部元信息：角色、入口、关键规则和下一步稳定 ID。
+
+画板之间保留足够留白，让跨画板连线走在间隙中。弹窗状态可单独复制一张触发页面并叠加 20%～30% 遮罩，避免脱离上下文的孤立弹窗。
+
+## 3. 视觉语法
+
+除非用户提供品牌规范，使用以下克制的基线：
+
+| 语义 | 建议色 | 用途 |
+| --- | --- | --- |
+| 深色外壳 | `#061B3A` | 侧边栏、顶栏、产品框架 |
+| 主操作 | `#1768E8` | 主要按钮、普通导航连线 |
+| 成功 | `#18864B` | 成功反馈、通过、完成 |
+| 警告 | `#D97706` | 可恢复异常、未保存、待处理 |
+| 危险 | `#D92D20` | 删除、废弃、不可逆动作 |
+| 辅助跳转 | `#5B6ABF` | 预览、详情、跨域辅助流程 |
+| 主文字 | `#10284B` | 标题与正文重点 |
+| 次文字 | `#718198` | 说明、占位和元信息 |
+| 页面背景 | `#F4F7FB` | 内容画布 |
+| 边框 | `#D9E2EF` | 卡片、表格、输入框 |
+
+低保真仍应有层级，但不要添加装饰性插画、复杂阴影、渐变或像素级视觉润色。圆角统一为 8～10，正文 12～14，区块标题 18，页面标题 28～30。中文优先使用环境常见无衬线字体并提供回退。
+
+## 4. 组件表达
+
+- **按钮**：独立图元，文字使用动词；危险动作不用模糊文案。
+- **输入框**：同时表达字段名、当前值/占位、必填和错误反馈，不能只画空矩形。
+- **表格**：表头、至少一条典型数据、空态与行操作；大表无需填满整页。
+- **状态标签**：颜色与文案双重编码，不能只靠颜色。
+- **反馈**：就近错误用于字段校验，全局消息用于操作结果，阻断性问题使用弹窗或整页状态。
+- **附件/媒体**：画出上传中、失败、预览、删除和权限差异中真正相关的状态。
+
+## 5. 动线表达
+
+总览使用角色或阶段泳道。页面节点使用稳定 ID；操作节点以动词开头；判断节点写可验证条件；开始和结束节点清楚区分。
+
+连接线要求：
+
+- 使用正交线并设置 `source`、`target`；
+- 线上的标签描述动作或结果，不重复节点名称；
+- 同一语义使用同一颜色，不给每条线随机配色；
+- 交叉多时拆分页面或增加局部子流程，不依赖长距离回折线；
+- 页面内按钮到目标页的连线与总览中的转移必须一致。
+
+## 6. 页面与状态覆盖
+
+按业务风险选择，不机械地给每页复制全部状态：
+
+- 核心成功路径；
+- 表单校验与保存失败；
+- 加载、空数据和加载失败；
+- 无权限、账号异常或配置缺失；
+- 未保存离开；
+- 删除、撤回、废弃等不可逆确认；
+- 审批或库存等并发冲突；
+- 只读、已结束和审计视角。
+
+## 7. 大型原型的默认优化
+
+大型说明板容易出现两个问题：单页过大导致导航困难；显示序号变化导致页内引用失真。默认采用多页面结构与稳定 ID，显示序号只用于阅读顺序。
+
+建议页签：
+
+- `00-总览`：角色、核心任务、端到端动线、状态机；
+- `10-核心页面`：主流程页面；
+- `20-角色或子域`：按角色/业务域拆分；
+- `30-异常状态`：跨页面异常与恢复；
+- `40-规格`：索引、权限、字段与口径。
+
+如果用户要求单页巨幅板，仍先在左上放导航索引，并限制每行画板数量。
@@ -0,0 +1,71 @@
+# 产品模型与覆盖检查
+
+复杂原型先用以下表格建立轻量 SSOT。可以放在工作笔记中，也可以作为 Draw.io 的规格页；不要让原型、动线和规则各自维护一套名称。
+
+## 页面清单
+
+| 稳定 ID | 页面/状态 | 角色 | 入口 | 用户目标 | 主操作 | 成功去向 | 关键异常 |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| P-LOGIN | 登录 | 访客 | 未登录 | 进入系统 | 登录 | P-HOME | S-AUTH-FAIL |
+
+检查：每个页面都有入口；非终态至少有一个去向；弹窗写明触发页面。
+
+## 转移清单
+
+| 动作 ID | 来源 | 操作者 | 前置条件 | 动作 | 成功目标 | 失败目标/反馈 |
+| --- | --- | --- | --- | --- | --- | --- |
+| A-SUBMIT | P-EDIT | 申请人 | 校验通过 | 提交 | P-DETAIL / S-PENDING | P-EDIT / 保存失败消息 |
+
+检查：每个主按钮有一条转移；每条连线对应真实操作；失败后能重试、返回或安全结束。
+
+## 状态机
+
+| 当前状态 | 可执行动作 | 角色 | 下一状态 | 字段可编辑性 | 记录/通知 |
+| --- | --- | --- | --- | --- | --- |
+| S-DRAFT | A-SUBMIT | 申请人 | S-PENDING | 全部可编辑 | 创建审批任务 |
+
+检查：状态名称唯一；每次变化有触发者；终态不会意外回到可编辑状态；并发变化有刷新或冲突处理。
+
+## 角色权限矩阵
+
+| 页面/动作 | 申请人 | 审批人 | 管理员 | 无权限表现 |
+| --- | --- | --- | --- | --- |
+| P-DETAIL / 查看 | 本人数据 | 分配给自己的数据 | 全部 | 403 或无入口 |
+| A-DELETE / 删除 | 仅草稿 | 无 | 按规则 | 隐藏按钮或阻断 |
+
+检查：区分「看不见」「只读」「可操作」；数据范围和按钮权限同时表达；管理员操作注明审计要求。
+
+## 字段规则
+
+| 字段 ID | 页面 | 类型 | 必填 | 值域/格式 | 显示条件 | 联动 | 错误反馈 |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| F-AMOUNT | P-EDIT | 金额 | 是 | > 0，2 位小数 | 始终 | 影响合计 | 请输入有效金额 |
+
+检查：原型中的标签与字段表一致；依赖字段有清空/保留规则；日期、金额、附件和枚举给出边界。
+
+## 异常与恢复
+
+| 异常 ID | 触发点 | 用户看到什么 | 数据是否保留 | 恢复动作 | 记录 |
+| --- | --- | --- | --- | --- | --- |
+| E-SAVE-TIMEOUT | A-SAVE | 保存超时消息 | 保留本地输入 | 重试 | 请求 ID |
+
+检查：错误文案可行动；不可恢复问题给出返回路径；危险操作有二次确认；成功反馈不与实际状态矛盾。
+
+## 端到端覆盖
+
+每个核心任务至少验证一条成功路径和一条高风险分支：
+
+```text
+角色 → 入口 → 页面 → 动作 → 状态变化 → 下一角色/系统处理 → 终态 → 可见反馈
+```
+
+发布前抽查：
+
+- 新用户第一次进入；
+- 正常创建并完成；
+- 中途保存和再次进入；
+- 校验失败或服务失败；
+- 无权限或配置缺失；
+- 不可逆动作；
+- 多角色交接；
+- 已结束对象的只读/审计视角。