设计图谱
学习路径/交互模式的语言/状态与过渡模式/设计系统里的'状态'
观察

设计系统里的'状态'

【背景】设计系统把状态(默认/悬停/禁用/加载/错误)标准化,是产品的一致性保障。 【步骤】1. 打开 Material Design 3 或 Apple HIG;2. 记录一个组件的全部状态与规则;3. 理解设计系统如何保证一致性。 【输出】设计系统状态笔记。

预计时长

20 分钟

任务类型

观察

观察提示

数字empty_state入门

空白的意义

第一次使用、没有数据时,页面显示什么?是'暂无内容'的空白,还是有引导性插图和行动建议?空状态让你想'开始使用'还是'离开'?

数字error入门

错误如何呈现

故意触发一个错误(输入非法内容、断网操作、重复提交)。错误提示出现在哪里、用什么语言、是否告诉你'为什么出错'和'下一步怎么办'?

数字loading入门

等待的体验

产品在加载内容时如何'填满'等待时间?骨架屏、进度指示、趣味动画还是简单的旋转图标?这种等待体验是否与你对产品品质的期待一致?