中小企业网站设计：同一组件在不同页面表现不同时怎样构造验收样例
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /7e393824e2ee.html
📄
中小企业网站设计：同一组件在不同页面表现不同时怎样构造验收样例
先给结论：不要为“组件本身”写一份通用验收样例，而要为“组件在具体页面中的角色”各写一份。同一张卡片放在列表页、详情页推荐位和首页焦点区，承担的任务不同，可接受的密度、截断和交互也不同。缺少完整数据或后台权限时，仍可执行的最小动作是：固定内容样本、固定视口宽度、逐页截图并记录差异点，然后判断是保留、改写还是退出这一组件方案。这个动作能让你拿到可复核的差异清单，但不能推出哪一页的转化更好，也不能证明问题出在组件代码上。
先判断差异来自内容角色，还是来自组件缺陷
同一组件表现不同，常见原因有两类，处理方式完全相反。
- 角色差异：列表页卡片需要快速扫描，标题两行、摘要一行就够；详情页推荐位需要解释“为什么相关”，摘要更长、图片比例更宽。这种差异是合理的，验收样例应分别定义，不要强行统一。
- 缺陷差异：同一组件、同一内容长度、同一视口下，A 页正常、B 页溢出或按钮错位。这属于实现问题，验收样例应锁定为“相同输入必须得到相同输出”。
区分办法很直接：把两页的内容替换成同一段等长文本和同一张等比例图片，再各截一次图。如果差异消失，说明是内容长度或图片比例触发的；如果差异仍在，才需要查容器宽度、外边距继承或样式覆盖。这个动作的结果决定下一步：前者改样例，后者改代码。
缺少权限时，可执行的最小验收动作
没有后台数据、没有埋点权限、也不能改线上样式时，仍然可以做三件事，且都不依赖完整数据。
- 固定样本：准备三条内容——最短、典型、最长。最长样本用真实字段上限构造，例如标题取系统允许的最大字数、摘要取两倍常见长度。样本固定后，每次验收都用同一组，差异才可比较。
- 固定视口：至少取窄、中、宽三档宽度，逐档截图。不要只截手机，也不要只截桌面，因为组件差异常出现在中间宽度。
- 记录差异点：每条记录写清页面、视口、样本编号、现象。例如“列表页，中档宽度，最长样本，卡片高度比相邻卡片多出一行，按钮未对齐”。
这三步之后你会得到一份差异表。它的用途是决定保留、改写还是退出，而不是证明哪一版更好。也就是说，差异表能告诉你“哪里不一致”，不能告诉你“用户更喜欢哪个”。
保留、改写、退出各自的适用前提
保留适用于差异由页面角色造成，且各页在自身角色下都成立。前提是：差异可被一句话解释，例如“列表页重扫描、详情页重解释”。此时验收样例按页面分别写，不追求跨页一致。
改写适用于差异由内容长度触发，但组件结构本身可用。前提是：把最长样本放进组件后，只是高度变化，没有遮挡、溢出或交互失效。此时可改写为弹性高度、允许摘要截断、图片使用固定比例容器。改写的验收标准是“最长样本不破坏相邻元素”。
退出适用于同一组件在多页反复出现同类缺陷，且改写成本高于替换成本。前提是：你已确认缺陷不是单个页面的样式覆盖，而是组件在多页都不可控。退出的动作是先在一页替换为新方案，用同一组样本复测，确认差异点减少后再推广。不要在未复测前全站替换。
一个注明假设的短例子
假设某企业站有三页使用同一张“产品卡片”：列表页、案例页、首页推荐位。你只有浏览器，没有后台。
你取三条样本：标题 8 字、20 字、40 字；摘要 30 字、60 字、120 字。在中档宽度下截图后发现：列表页 40 字标题折成三行，卡片高度被撑开；案例页同样标题只折两行；首页推荐位标题被截断且没有提示。
据此判断：列表页与案例页的差异可能来自容器宽度不同，属于可改写；首页截断无提示属于交互缺失，需要补全或缩短。下一步动作是：先只改列表页的卡片高度策略，用同一组样本复测。若三页差异点减少，再考虑推广；若没有减少，说明问题不在卡片高度，应回到容器宽度和样式覆盖继续查。
验收样例应该写成什么形式
与其写“卡片显示正常”，不如写成可判定的条目。每条包含四要素：页面、样本、视口、判定条件。
- 列表页 / 最长样本 / 中档宽度 / 卡片高度不超过相邻卡片一行，按钮底边对齐。
- 案例页 / 典型样本 / 窄档宽度 / 标题不截断，摘要允许折行，图片不变形。
- 首页推荐位 / 最长样本 / 宽档宽度 / 标题截断时必须有可读的完整标题入口。
这样的样例可以被不同人重复执行。需要提醒的是，截图和差异表只能说明表现不一致，不能单独证明组件实现有错，也不能推出改动后一定带来更好的阅读或转化。它提供的是可复核的决策依据：差异来自角色就保留并分页写样例，来自长度就改写并锁定最长样本，来自多页共性缺陷且改写不划算就小范围退出再复测。
