本章进度 18 / 18
100%
正文已完成
L239审计一套 AI 界面的视觉漂移
以组件、状态、可访问性和内容密度为轴,找出跨页面的不一致并制定修复顺序。
现在把“视觉一致性”用于一次具体操作,检查你能否独立做出并修正结果。
建议先完成同主题的理解与判断;本页不会锁课,可以边做边回补。
- 按本课练习说明准备真实材料
- 保留练习与复盘记录
视觉漂移会让相同语义反复出现不同表达,用户因此需要重新学习操作。两像素的局部差异通常不是审计重点。
能完成一份视觉一致性审计,提供证据、规则归属和优先级。
核心概念
先把关键判断说清楚
按语义采样
跨页面收集所有主按钮、危险操作、状态提示和输入错误,比逐页随意截图更容易发现冲突。
先修行为再修外观
同名按钮产生不同结果、键盘不可达等问题优先于圆角和阴影差异。
每个问题归属一条规则
修复不仅改页面,还要更新令牌、组件或内容规范,避免下一页再次出现。
案例拆解
六种生成按钮
产品五个功能页出现六种主按钮颜色、三种加载方式和两种取消含义。
- 01
按主操作语义收集样本
- 02
记录行为、状态、键盘和视觉差异
- 03
合并为一个组件,特殊需求用明确变体而非复制
案例结果
修复从零散页面补丁转为可持续的系统规则。
提交前练习
现在轮到你
选择至少三个页面,对一种共享组件完成横向审计。
完成本课需要:完成以下内容用于本课收口。
内容会自动保存在当前设备
查看参考答案与评分标准
参考答案
审计主按钮的默认、加载、禁用与成功状态;发现取消含义冲突为高优先级;统一组件 API,并补键盘和对比度测试。
评分标准
- 至少三个真实样本
- 严重度与用户影响相关
- 修复落到共享规则
本课收口 · 学习证据
留下完整学习证据
读完内容、完成练习、通过理解检查并留下 12 字以上总结,才记为已验证。
你现在更接近哪一种状态?
尚有必填项未完成,请补齐后再继续。
资料来源
继续核对与延伸阅读
本课内容最近更新于 。
- Web Content Accessibility Guidelines (WCAG) 2.2↗standard · 核对日期 2026-08-23
- MDN Web Docs↗reference · 核对日期 2026-08-23