文章目录 / 点击展开
AI 可以作为界面评审的第二视角，帮助整理问题和检查遗漏，但不能仅凭一张截图准确判断真实交互、对比度、键盘路径和设备表现。有效评审需要设计稿、真实文案、状态说明和尺寸数据共同参与。
准备完整评审材料
至少提供页面目标、目标用户、核心任务、桌面与移动帧、组件状态、真实文案和现有设计规范。只给一张高保真图，AI 容易把个人风格偏好当成可用性问题。
页面目标：帮助用户筛选 AI 工具并访问官网
核心任务：搜索、组合筛选、比较、打开工具
重点设备：1440 桌面、375 手机
设计约束：正文至少 16px，触控目标至少 44px，不使用嵌套卡片第一步：先检查信息层级
要求 AI 说明用户第一眼看到什么、下一步能做什么、哪些信息相互竞争。每个问题必须引用具体区域，并说明影响的任务，而不是只写“层级不够清晰”。
检查标题与容器尺寸是否匹配、主要操作是否明显、辅助信息是否过度突出，以及页面是否在首屏给出足够上下文。
第二步：检查可读性
提供字号、行高、颜色值和容器宽度，检查正文、标签、元信息、按钮和链接。截图中的视觉估算不能替代真实 CSS 数值，也不能精确计算对比度。
按以下规则检查：正文不低于 16px，辅助文字不低于 14px，长文本行宽约 45–75 个字符，文本不使用负字距，按钮文字不能截断。
只报告违反规则或明显影响阅读的问题。第三步：检查状态与反馈
逐项确认默认、悬停、聚焦、加载、空、错误、成功、禁用和权限不足状态。筛选与分页还要检查刷新恢复、无结果、网络失败和重复点击。
AI 可以根据功能清单生成状态矩阵，但设计人员必须确保这些状态在稿件和实现中真实存在。
第四步：评审响应式布局
不要只问“是否适配移动端”。比较桌面、平板和手机在信息顺序、列数、固定元素、长文本和触控操作上的变化。
为棋盘、表格、工具栏和预览区设置稳定尺寸或比例，防止动态内容撑开布局。检查 375 宽度无横向滚动，标题和按钮能自然换行，悬浮元素不遮挡正文。
第五步：检查无障碍基础
确认语义标题层级、键盘焦点、表单标签、按钮名称、图片替代文本、颜色以外的状态表达和减少动画偏好。AI 无法从静态图确认 DOM 语义，必须结合代码或原型检查。
自动检测工具也不能覆盖全部问题。关键任务需要键盘走查、屏幕阅读器抽查和真实用户测试。
输出可执行评审项
每条问题使用“严重程度、位置、证据、用户影响、建议、验证方法”格式。高优先级应集中在任务失败、误操作、不可读和无障碍阻断，不要让颜色偏好占据主要篇幅。
评审检查清单
- 是否提供页面目标、用户和核心任务。
- 问题是否引用具体区域和设计规则。
- 正文、辅助文字和按钮是否达到可读字号。
- 加载、空、错误和权限状态是否完整。
- 375 宽度是否无重叠与横向滚动。
- 键盘焦点、标签和标题层级是否可用。
- 建议是否包含可验证的完成标准。
常见问题
AI 能根据截图判断颜色对比度吗
只能粗略提示。准确判断需要前景和背景颜色值，并使用对比度工具计算。
所有 AI 建议都应该修改吗
不应该。建议必须符合用户任务、设计系统和技术约束。没有证据的风格意见可以忽略。
无障碍检查做一次就够吗
不够。设计、开发和内容变化都会引入新问题，应在组件、页面和发布前持续检查。
完整设计过程可参考 Figma + AI 线框到高保真，图标一致性可继续阅读 AI 图标系统。