产品设计规范
产品设计规范约束代码之前的那层约定:用户与场景、信息架构、视图状态、文案与术语、视觉基线。缺了它,同一个能力由不同的人实现会长成两种样子,代价不只是观感差异——界面语言被拆成两套之后,每次改动都要先重新对齐再动手。前端实现的约定并入这一页,不再单列。
1这一页管什么
先划边界:哪些约束写在这份文件里,哪些交给相邻规范。
- 管产品形态的一致性。用户与场景、页面清单、每个视图的状态集合、术语与文案、表单与校验时机、视觉基线、可达性下限。
- 不交由这一页。接口结构与错误码属后端开发规范;谁能访问哪条资源属安全开发规范;健康检查与日志字段属部署运维规范。
- 两种落法。常驻的视觉与文案约定写进规则;「按规范加一个页面」这类按场景执行的流程写成技能。
对应的课程知识点:需求工程中的用户画像(persona)与场景(scenario)、人机交互中的信息架构与状态完备性、设计系统中的设计令牌(design token)与组件复用。它与规约互为表里——规约里的场景说明「会发生什么」,本页的视图状态清单说明「看到什么」。
2规范条目
每条都要写成可核对的形式;第三列就是核对动作,写不出第三列的条目不算规范。
| 条目 | 要写清什么,为什么这样规定 | 怎么检查 |
|---|---|---|
| 用户与场景 | 每个页面或能力服务哪类角色、由什么操作触发,写进 README 的「用户与场景」一节。它是需求的下游:每条能力的场景都要落得到某个页面上,落不到的能力说明边界不清 | 反向对照——找出无法落到页面的场景即为遗漏;交叉评审(peer review)逐页核对服务对象 |
| 页面清单与信息架构 | 页面(路由)清单与层级关系;同一功能的入口唯一;非法路径的处理方式(重定向还是 404)。信息架构不稳定会让后续每次新增能力都要重排导航 | 按清单逐个访问;出现清单外的入口或孤立页面即为缺陷 |
| 视图状态完备性 | 每个数据视图必须枚举全部状态——加载中、正常、错误、空状态(empty state),并给出各自的文案模板。状态不完备时,故障表现为界面无响应,而不是明确提示 | 清空数据后逐页观察;断开依赖后观察错误态;出现无限加载或无提示的空白即为缺陷 |
| 文案与术语 | 同一概念全产品用词统一,维护术语表(受控词汇);错误文案包含三要素——发生了什么、可能的原因、可执行的下一步。术语不一致会连带污染接口字段与文档 | 检索术语表之外的写法;抽查错误提示是否给出下一步动作 |
| 表单与校验 | 校验时机(失焦 / 提交)、提示的位置与粒度、必填标识、提交过程中对重复触发的处理。交互层只负责抑制重复点击,真正的去重由后端的幂等保证 | 逐表单走查;连续点击提交只产生一次结果 |
| 视觉基线 | 间距刻度、字号层级、语义色(成功 / 警告 / 错误)的用法、基础组件清单。写令牌与层级而不是逐个页面的像素值——后者每次改版都要重排 | 新增页面应复用组件清单中的元素;出现自造样式即判违规 |
| 可达性与响应式 | 键盘可达、表单控件与标签关联、对比度下限、断点矩阵与各断点的布局变化。这是可用性下限,不是附加项 | 键盘走查一遍主路径;按断点矩阵逐个核验 |
| 变更可追溯 | 产品形态变化时同步更新页面清单与 README,并记入变更说明。缺失追溯关系时,下一次改动无从判断「为什么变成这样」 | 变更说明与 README 对照;出现未同步的差异即为缺陷 |
| 状态与流程 | 有流程的功能必须给出三样东西——状态枚举、状态流转、每个状态下允许的操作;状态只能按规则流转并由后端校验,前端不得直接传目标状态;已终结的状态默认不可修改,确需修改要有明确入口并留痕;同一条记录被多人同时处理时,后操作的人要收到「已被处理」的提示。为什么:目标状态由前端传递,等于把流程规则交给调用方;静默覆盖会让前一次操作的结果无从追溯 | 对已终结的记录发起变更,应被拒绝;两个会话同时处理同一条记录,后一次应收到明确提示,且前一次的结果未被覆盖 |
| 导入导出 | 每个导入功能声明文件大小与行数上限,超限时整体拒绝;导入先校验并预览,由用户确认后执行,整批成功才生效,失败时给出错误明细(行号加原因)并提供模板下载;导出受权限与数据范围限制,敏感字段按脱敏规则导出并留痕,大批量走异步。为什么:部分入库会留下无法解释的半批数据,清理它的成本高于整批重来 | 混入一行非法数据,检查是否整批拒绝且错误明细给出行号;导出结果中的敏感字段应为脱敏值 |
3本课先写到哪
一次写全并不现实;下列四件完成即可验收,其余随迭代补充。
- 最小集合四件。用户与场景、页面清单、四状态文案模板、术语表。
- 视觉基线先写两层。间距刻度与字号层级;配色表可留到第一次交叉评审再定。
- 用一次改动验证。让 Harness 按规范只增加一个页面,检查它是否复用既有组件、是否沿用术语表中的词。
- 写一次违规验证。故意新增一个自造样式、绕过组件清单的页面,检查有没有流程能指出。
判定不看书厚不厚:指定一处违反,看能否被发现。这条判据对五类规范一体适用——发现不了的那一条,等于还没写。