网站建设策划书：同一组件在不同页面表现不同时怎样构造验收样例
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /3101f8a73676.html
📄
网站建设策划书：同一组件在不同页面表现不同时怎样构造验收样例
先给结论：不要为每个页面单独写一份验收样例，也不要只写一份通用样例。正确做法是把组件按“页面上下文是否改变其行为”分成两类——上下文无关的组件只验一次，上下文相关的组件按触发差异的条件各验一次，并在策划书里写清哪些页面属于同一条件组。这样验收样例的数量由条件数决定，而不是由页面数决定。
先判断这个组件属于哪一类
同一个组件在不同页面表现不同，通常来自三种可区分的原因，而不是组件本身不稳定。
- 容器约束不同：页面主栏宽度、栅格列数、内外边距不同，导致换行、截断、溢出。典型是卡片、表格、富文本区块。
- 数据来源不同：同一组件在不同页面拿到不同长度、不同语言、不同字段完整度的数据。典型是列表项、面包屑、推荐位。
- 运行环境不同：登录态、权限、主题、脚本加载顺序不同。典型是导航、表单、评论区。
如果三种原因都不成立，差异只是偶发渲染抖动或缓存问题，那属于缺陷排查，不该进入验收样例的构造范围。先做一次对照：把同一组件放到两个页面，固定数据、固定视口、固定登录态，看差异是否消失。消失则归入条件差异，仍存在则归入缺陷。
条件一：差异由容器或数据引起，就按“最宽最窄最长最短”取样
这类差异是确定性的，可以用边界值覆盖，不必逐页验证。策划书里写四个样例即可：
- 最窄容器 + 最短内容，检查是否过度留白或对齐错位。
- 最窄容器 + 最长内容，检查换行、截断、省略号、按钮是否被挤出。
- 最宽容器 + 最短内容，检查元素是否被拉伸变形。
- 最宽容器 + 最长内容，检查是否溢出容器或压住相邻模块。
实际动作：在策划书的验收章节里，为每个上下文相关组件建一张小表，列出“条件组合—代表页面—预期表现—判定方式”。代表页面只填满足该条件的真实页面各一个，不要求覆盖全部页面。这样做的结果是，验收人拿到的是可复现的检查点，而不是“看着没问题”这种无法交接的描述。下一步是让开发在提交验收前先自测这四组，把明显问题挡在验收之前。
假设一个场景：某列表组件在首页显示三列，在详情页侧栏显示一列。策划书若只写“列表显示正常”，验收时无法判断哪种宽度算正常。写成“三列容器下标题最多两行、一列容器下标题最多三行且不出现横向滚动条”，验收就有了可判定的标准。这里的行数只是示例假设，具体数值应由设计稿确定，不能照搬。
条件二：差异由登录态、权限或主题引起，就按“状态组合”取样
这类差异不是布局问题，用宽度边界覆盖不到。应按状态而不是页面来组织样例：
- 未登录 + 默认主题
- 已登录 + 默认主题
- 已登录 + 无权限访问该页面
- 已登录 + 替代主题（若站点确实提供主题切换）
选择依据是：只要状态组合相同，同一组件在不同页面应表现一致；如果表现不一致，说明差异另有来源，需要回到上一节重新归类。实施动作是先在策划书里写明每种状态组合下组件的可见性、可点击性和文案规则，再指定一个代表页面执行。结果是状态相关的问题会在验收早期暴露，而不是在上线后由用户发现。
例外情况要单独标注：如果某页面本身是降级页或错误页，组件允许与常规状态不同，此时应写明“此页面不纳入常规样例，按降级规则单独验收”，避免验收人把它当成缺陷反复提交。
策划书里怎么写才不会被误读为逐页验收
关键是把“页面清单”和“条件清单”分开。页面清单回答“站点有哪些页面”，条件清单回答“哪些条件会改变组件表现”。验收样例只从条件清单生成。可以在策划书中加一句限定：同一条件组内只抽一个代表页面，其余页面通过回归检查确认无新增条件。这句话能防止后续把样例数量无限扩大。
另外，验收样例要写明判定方式，而不是只写检查项。可判定的写法包括：是否出现横向滚动条、元素是否超出容器边界、文案是否被截断、按钮是否仍可点击。不可判定的写法包括：看起来协调、整体美观、体验流畅。后者无法交接，也无法复现。
退出旧页面或旧组件时，样例还要回答“保留什么”
当旧内容、旧系统或旧合作关系需要退出时，同一组件往往同时存在于新旧两套页面中。此时验收样例要额外回答一个问题：旧页面下线后，这个组件的哪些条件仍然成立。做法是先在条件清单里标记每个条件对应的页面是否保留，再只对保留页面生成样例。已经确定下线的页面不进入验收范围，但其上仍被复用的组件部分要单独列出，确认新页面是否满足相同条件。这样处理的结果是，退出动作不会顺带带走仍被依赖的组件行为，下一步的回归范围也随之缩小。
