空状态和内容骨架怎么选？
一句话做出判断
空状态表示真的没有内容。内容骨架表示数据还在加载，但布局形状已经知道。
没有内容，而且要告诉用户下一步时，用空状态。短暂加载且知道布局形状时，用内容骨架。
看看每个界面模式会做什么
先试试每个例子，再看它适合处理什么工作。
Empty, Error & Success State — Learning Bundle
↗ 空白、错误与成功状态（教学组合）
这个教学组合包含三种不同的应用状态。空白状态（Empty）表示目前没有内容，错误状态（Error）表示操作失败，成功状态（Success）则确认已经完成。每种状态都需要自己的消息和下一步。这个组合不是单一标准状态术语。
空白、错误与成功状态（教学组合）
暂无收藏指南
收藏指南，把团队最常使用的模式放在触手可及的位置。
全新的项目列表会说明如何创建第一个项目；网络失败时会显示“重试”，并保留原来的筛选条件。
- 什么时候用
- 把这个教学组合当作检查清单，再为每个依赖数据的页面分别设计各种状态。
- 什么时候不要用
- 不要留下空白页面或死路，不要用玩笑掩盖失败，也不要完成后却没有任何成功确认。
- 代码里的名称
status state machine
Skeleton
↗ 骨架屏
骨架屏是简单的占位内容，形状会接近正在加载的真实内容。
骨架屏
个人页会先保留头像和文字的位置，数据加载后布局就不会突然跳动。
- 什么时候用
- 已经知道页面布局，而且等待时间长到会被注意时，就使用骨架屏。
- 什么时候不要用
- 不要伪造细节、让闪动一直不停，也不要在内容几乎立刻出现时使用骨架屏。
- 代码里的名称
aria-busy="true"
快速比较
| 界面模式 | 最适合 | 不适合 | 代码里的名称 |
|---|---|---|---|
| 空白、错误与成功状态（教学组合）Empty, Error & Success State — Learning Bundle | 把这个教学组合当作检查清单，再为每个依赖数据的页面分别设计各种状态。 | 不要留下空白页面或死路，不要用玩笑掩盖失败，也不要完成后却没有任何成功确认。 | status state machine |
| 骨架屏Skeleton | 已经知道页面布局，而且等待时间长到会被注意时，就使用骨架屏。 | 不要伪造细节、让闪动一直不停，也不要在内容几乎立刻出现时使用骨架屏。 | aria-busy="true" |
上线前检查
- 01
先写下用户要完成什么事。
- 02
测试键盘、焦点、触控、缩放、加载、空白与错误状态。
- 03
不用鼠标悬停或动画，也要能取得相同信息。
- 04
放入真实内容，并在小屏幕和大屏幕上测试。
04
可以直接复制的比较需求
团队还不知道该选哪一种界面模式时，可以复制这段需求。
请在 空白、错误与成功状态（教学组合）（Empty, Error & Success State — Learning Bundle）、骨架屏（Skeleton） 中，为真实用户流程选出最合适的界面模式。判断规则：空状态表示真的没有内容。内容骨架表示数据还在加载，但布局形状已经知道。。请写下任务、内容量和打断流程的代价，并检查键盘、触控、加载、错误与减少动态效果。说明选择理由，再沿用项目的设计系统，做出最小且无障碍的版本。