网页设计技巧，同一组件在不同页面表现不同时怎样构造验收样例
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /7edc4c4548b6.html
📄
网页设计技巧，同一组件在不同页面表现不同时怎样构造验收样例
先给结论：不要试图用一句“组件应当一致”来验收。更有效的做法是把组件在页面中的上下文条件写进验收样例，让每个角色对同一条件给出可观察的结果。例如同一个卡片组件在列表页显示摘要，在详情页显示完整内容，在搜索结果页显示高亮片段——这不是组件不一致，而是三种上下文。验收样例要覆盖这三种上下文，而不是只截图一个页面。
先分清两种“表现不同”
当设计师说“卡片在列表页太挤”，前端说“组件参数没变”，产品说“用户看到的应该一样”，分歧往往来自对“不同”的定义不同。可以先把现象拆成两类。
- 样式差异：同一组件在 A 页面比 B 页面窄、字号小、间距紧。这类差异通常由容器宽度、父级样式或页面级主题变量引起，组件本身没有变化。
- 行为差异：同一组件在 A 页面点击后展开，在 B 页面点击后跳转。这类差异通常由传入的属性、事件绑定或页面路由决定，组件结构相同但配置不同。
把这两类混在一起讨论，验收就会变成“看起来不对”的争论。分开之后，每个差异都能对应一个可检查的条件。
用上下文表把分歧转成可核对项
验收样例的核心不是描述组件长什么样，而是描述组件在什么条件下应当表现成什么样。可以建一张上下文表，每行是一个页面场景，每列是影响组件表现的条件。
- 页面类型：列表页、详情页、搜索结果页、空状态页。
- 容器宽度：固定宽度、流式宽度、最小宽度限制。
- 数据状态：有图、无图、长标题、短标题、缺失字段。
- 交互结果：点击后展开、跳转、选中、无响应。
- 可观察证据：截图、录屏、DOM 结构片段、计算样式值。
这张表不需要一次填满。先填当前出现分歧的那一行，再补相邻的一行作为对照。如果两行在某个条件下结果相同，说明该条件不是差异来源；如果结果不同，该条件就是验收样例必须固定的变量。
两个解释，以及区分它们的证据
假设同一个按钮组件在活动页显示为实心，在帮助页显示为描边。有两种合理解释。
解释一：页面级主题覆盖了组件默认样式。活动页引入了强调色主题，帮助页使用中性主题。能区分这个解释的证据是：检查按钮根元素的计算样式，看背景色和边框色的来源是组件自身样式表还是页面级选择器。如果切换页面主题后按钮样式跟随变化，说明是主题覆盖。
解释二：调用方传入了不同的变体属性。活动页传入了 variant="solid"，帮助页没有传或传了 variant="outline"。能区分这个解释的证据是：查看组件调用处的属性值，而不是只看渲染结果。如果属性不同，即使页面主题相同，按钮也会不同。
这两种解释会导向不同的修复动作。如果是主题覆盖，下一步是确认主题变量的作用范围是否应该包含该组件；如果是属性不同，下一步是确认产品是否要求两个页面使用同一变体。动作不同，验收样例的写法也不同。
写一个可执行的短例子
假设一个项目要求“卡片组件在列表页和搜索结果页表现一致”。可以这样构造验收样例：
- 固定条件：两页使用同一容器宽度区间（例如 320–480 像素），同一数据字段（标题、摘要、缩略图），同一交互（点击整卡跳转）。
- 对照条件：列表页标题最多两行，搜索结果页标题最多一行并高亮命中词。
- 验收动作：在两种页面各取一条标题超过两行的数据，分别截图并记录标题区域的实际高度和截断位置。
- 结果判断：如果高度差异只来自标题行数限制，则组件一致；如果高度差异还来自字号或内边距，则不一致。
这个例子的假设是：两页共用同一个卡片组件，差异只允许出现在数据展示规则上。如果实际项目允许两页使用不同组件，那么验收样例应当改为分别定义两个组件的可接受范围，而不是强行要求一致。
把验收样例落到角色分工上
设计师关心视觉结果，前端关心实现条件，产品关心用户路径。验收样例要同时给出这三类信息，才能减少来回确认。
- 给设计师：每个页面场景的截图或录屏，标注容器宽度和数据状态。
- 给前端：触发差异的条件列表，包括主题变量、属性值、父级样式。
- 给产品：每个差异是否影响用户完成任务，以及允许的偏差范围。
当某个条件无法当场核对时，把它标为待确认，而不是默认通过。例如“搜索结果页高亮词是否改变卡片高度”如果没有现成数据，就构造一条包含命中词的长标题作为测试输入，观察高度变化。这个动作的结果会决定下一步：如果高度变化在允许范围内，该条件可以关闭；如果超出范围，就需要回到上下文表，补充一条新的验收样例。
验收样例的价值不在于一次写全，而在于每次出现“同一组件表现不同”时，都能把争论转成一条可复现的条件记录。
