AIAI学习站
继续学习
本章进度 16 / 18
89%
交互与审美工程·理解·10 分钟
正文已完成

一致性来自规则，不是所有页面长一样

建立组件角色、状态语言和视觉语法，使相似任务可预测、不同任务仍有重点。

L237
为什么现在学

先用本课建立“视觉一致性”的基本直觉，后面的判断和练习才不会只靠记结论。

本课会用什么
  • 无需安装新工具
  • 直接阅读并完成本页理解检查

视觉一致性的目标是让用户预测操作结果，不是把每个页面都套成相同卡片网格。

这一课的结果

能区分有意义的一致性与机械统一，并写出三条跨页面视觉规则。

核心概念

先把关键判断说清楚

01

角色一致

主操作、次操作、危险操作在不同页面应保持相同语义和反馈。

02

状态一致

加载、成功、待确认和失败要使用稳定的词汇、颜色与图标组合，不能只靠颜色区分。

03

结构允许因任务变化

编辑器、仪表盘和设置页可以布局不同，只要共享的操作语法不变。

案例拆解

同一个红色代表三件事

系统在一个页面用红色表示删除，在另一个页面表示选中，在第三个页面表示高优先级。

  1. 01

    固定红色用于危险和错误

  2. 02

    选中使用品牌强调色并带选中标记

  3. 03

    优先级用文字标签和独立色阶

案例结果

颜色语义稳定，用户不再把普通选中误认为危险状态。

提交前练习

现在轮到你

审查三个页面中的主操作、状态和危险操作是否一致。

选做练习：本节练习可用于加速你巩固，但不影响继续学习。

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

参考答案

主按钮每屏最多一个；红色只用于危险或错误且配文字；完成状态统一使用图标、文案与非颜色线索。

评分标准

  • 规则描述语义而非只写颜色值
  • 识别至少一个冲突
  • 允许任务结构合理变化

本课收口 · 理解检查

用 30 秒确认你理解了

用 30 秒理解检查确认你抓住了重点；阅读标记、练习和总结都不设硬门槛。

0 / 1
02完成练习（选做）0 / 3 项已填写，不影响完成03通过理解检查点此去回答，约 30 秒
04补一句总结（可选）可以留空，不影响完成本课。
哪种做法更符合视觉一致性的目标？
你现在更接近哪一种状态？
尚有必填项未完成，请补齐后再继续。

资料来源

继续核对与延伸阅读

本课内容最近更新于 。