22 · 多页面风格一致性与防退化
适用:页面越来越多,后续页面明显简陋;首页漂亮但详情、设置和异常页像调试界面;改公共样式后部分页面失真。需要同时管理共享语言、页面差异与覆盖证据。
CONS-01 · 先明确跨页不变的设计语言
记录颜色语义、文字层级、间距节奏、控件状态、图标语言、图片比例、文案语气与动效原则。共享控件和页面模式引用相同来源,禁止每页自造一套“差不多”的按钮。
一致性不是每页长一样。阅读页、表格、编辑器和设置页有不同任务;它们共享设计语言,保留相应密度与结构。
CONS-02 · 按页面类型建立代表页面
至少覆盖实际存在的首页、列表、详情、编辑、设置、工作区与结果页。每类先选一个有真实内容、已确认设计依据的代表页面,记录哪些部分可复用、哪些按业务调整。
状态样式同时建立:加载、首次使用、无结果、失败、离线、需登录和无权限。允许列表与画布使用不同的状态呈现,但层级、用语与恢复原则一致。
没有设计依据的页面应明确沿用哪种模式、差异是什么。新任务超出现有模式时提出具体方案,不能自行堆几张卡片后宣称设计已完成。
CONS-03 · 从实际路由枚举范围
| 路由 / 页面 | 页面类型与依据 | 共享依赖 | 状态 | 主题与视口 | 当前证据 |
|---|---|---|---|---|---|
| /projects | 管理列表,母版 L01 | 页头、表格、状态区、分页 | 正常、首次、无匹配、失败 | 明暗、窄屏、桌面 | 待检查 |
| /projects/:id | 详情,母版 D01 | 页头、对象摘要、权限提示 | 正常、不存在、无权限 | 同上 | 待检查 |
| /projects/:id/edit | 编辑,母版 E01 | 字段、保存控制器、对话框 | 草稿、失败、冲突 | 加长内容、大字号 | 待检查 |
路由清单、菜单、可深链接页面与权限入口需要对齐;不能只检查首页导航能点到的部分。多步骤流程与弹层也要登记实际适用的状态。
不必盲目跑所有维度的笛卡尔积:先覆盖每条路由的核心状态与每种共享变体,再按高风险组合补查,明确选样策略与遗漏,不能用抽样声称全量通过。
CONS-04 · 识别 AI 常见退化信号
- 后续页面只有标题、几段说明和按钮,缺少真实内容与业务层级。
- 所有页面套同一张大卡片,表格、设置和编辑器被强行改成相同布局。
- 首页使用共享组件,详情与异常分支直接写裸颜色、字号与圆角。
- 没有加载或错误设计,只显示原始错误和“重试”两个字。
- 为了通过截图检查,隐藏长内容、移除模块、删掉失败分支或替换成空数据。
- 新增页面没有更新路由覆盖表;公共样式改动只截图首页。
- 界面写满“已实现、支持、待接入、使用统一样式”等面向开发者的说明。
修复时按共享问题归类:先改状态套件、文案、控件,再处理页面结构和个例。不要逐页复制补丁,修一处又丢一处。
CONS-05 · 公共修改会使相关证据失效
维护“变量 / 组件 / 页面模式 → 页面与状态”的依赖关系。改按钮会影响所有使用其变体的页面;改表格影响管理页;全局文字尺度或主题通常需要更广的检查。
变更后把受影响格标记为需复验。通过差异记录判断哪些属于修复、哪些属于新设计决定,禁止为让检查变绿而悄悄更新全部截图基线。
个例应在变更前登记其边界并做针对性回归,详见 ABS-04。
CONS-06 · 证据绑定实际内容与实现
同一尺寸、主题、数据和状态下比较设计参考与实际截图,再检查实际操作、出口、长内容与大字号。截图、运行数据和代码版本或工作区摘要一起保存。
AI 可报告已实现、已检查、已截图和待人工确认,不能自行冒充负责人确认设计。静态扫描、像素差异和自动无障碍检测各自只能发现部分问题。
检查:随机抽取一个不在首页导航中的详情或异常入口。应能找到其设计依据、共享依赖、真实进入方式、当前截图和可用出口;找不到就说明治理范围有缺口。