本章进度 18 / 18
100%
交互与审美工程·练习·18 分钟
正文已完成

审计一套 AI 界面的视觉漂移

以组件、状态、可访问性和内容密度为轴,找出跨页面的不一致并制定修复顺序。

L239
为什么现在学

现在把“视觉一致性”用于一次具体操作,检查你能否独立做出并修正结果。

本课会用什么
  • 按本课练习说明准备真实材料
  • 保留练习与复盘记录

视觉漂移会让相同语义反复出现不同表达,用户因此需要重新学习操作。两像素的局部差异通常不是审计重点。

这一课的结果

能完成一份视觉一致性审计,提供证据、规则归属和优先级。

核心概念

先把关键判断说清楚

01

按语义采样

跨页面收集所有主按钮、危险操作、状态提示和输入错误,比逐页随意截图更容易发现冲突。

02

先修行为再修外观

同名按钮产生不同结果、键盘不可达等问题优先于圆角和阴影差异。

03

每个问题归属一条规则

修复不仅改页面,还要更新令牌、组件或内容规范,避免下一页再次出现。

案例拆解

六种生成按钮

产品五个功能页出现六种主按钮颜色、三种加载方式和两种取消含义。

  1. 01

    按主操作语义收集样本

  2. 02

    记录行为、状态、键盘和视觉差异

  3. 03

    合并为一个组件,特殊需求用明确变体而非复制

案例结果

修复从零散页面补丁转为可持续的系统规则。

提交前练习

现在轮到你

选择至少三个页面,对一种共享组件完成横向审计。

完成本课需要:完成以下内容用于本课收口。

内容会自动保存在当前设备
查看参考答案与评分标准

参考答案

审计主按钮的默认、加载、禁用与成功状态;发现取消含义冲突为高优先级;统一组件 API,并补键盘和对比度测试。

评分标准

  • 至少三个真实样本
  • 严重度与用户影响相关
  • 修复落到共享规则

本课收口 · 学习证据

留下完整学习证据

读完内容、完成练习、通过理解检查并留下 12 字以上总结,才记为已验证。

0 / 4
02完成本课必填练习0 / 4 项必填内容已填写03通过理解检查点此去回答,约 30 秒
04写下 12 字以上总结还差 12 字
发现五个页面的同类按钮样式不同,最可持续的修复是什么?
你现在更接近哪一种状态?
尚有必填项未完成,请补齐后再继续。

资料来源

继续核对与延伸阅读

本课内容最近更新于 。