本篇文章价值：看完后可以独立统筹个品全局设计。
做从 0 到 1 的产时，在设计产功的交互流程和 UI 设计中，都是先做有正的交互流程和界面。
但每个功能流程都存在异常和加载的状，实际工作中不可能每个功能的页面都做异常和加载状态，这样的话，会导致设计繁琐复杂。
通用的做法是：先将所有的正常流程和界面完成之后，再统一做全局异常景和加载状。
这些全局异常加载状态通用于整产品中，发需使用时直接调用，避免设每需求都一遍，降低无用功，提升发效率。
文为所涉及到的异常和加载状态内容。在际工中，根据自身产品，附上对应状态出现的场页面即。
本文文章大纲如下：
- 加载场
- 网络异常
- 缺省场景
- 操作异常
除是存在本地，否则其他所有界都需要加载。加载场景，适用于几乎所有界。
载的方式有很多，总结起来包含：全屏载、占位符载、上拉载、拉载、载等。
1. 全屏载
这种载较简单，一次性载有数据后再显示容。但这种一次性载后，再展示来，会给户的感觉时间较长。
适用景：进入下一界面，加载后全部展示。
2. 占位符载
当载的页面容有固定的框架时，可先载框架，再载框架的容。
通过先加载页面框架，计占位符等形式可以提前让用户知道整个界面的架构，提高产品的体验。
这种加载给用户感知，加载稳且速度。
适用场：具备典型页面的场，列表页、详情页等。
3. 拉加载
用户浏览界面的过程中，对于未加载的信息，通过手势拉，信息自动加载。
需要设置默认一次加载少条，根据际情况设定，一般常见的是 20 条。加载浪费流量，加载少，需要频繁加载。
使用场景：于布局相布局，可使用上加载数据，常为 feed 流。
4. 下拉加载
用户下拉时，出现 loading 动画，整个页面重新加载刷新。数据获取完成，loading 动画结束。
现在很多品新设计 loading 加载动画，使加载过程更加具有情感化，性化和品化。
因务需求，有时候载毕后，会通过 toast 告知户更多条容。
使用景：有刷新当前页面数据使用，常用的为首页、列表流等。
5. 载
整个界面中，仅分区域需要载数据。
适用景：切换部域内容，数据重新加载使用。通用于二导航切换。
当移设备络异时，导致无法上传和载数据，从而无法正的使产。
网络异常存在种景：
- 络异时，户打开 App，这种情况 App 会现异常状态提示用户，这是 App 主动告知为。
- 户点击操作时，由于络异，这时候通过交互反馈给户，这是 App 被告知行为。
1. App 主动行为
当无网络时，用户打开 App。通 tips 提示用户当前网络不用。
tips 使用场一般为用户打开，界面停留在首页， 且首页以列表形式展示，样的，tips 才能合理的融到界面中。
2. App 被动行为
当前无网络时，用户点击操时，无法正常使用产品，时通常有两种处理方式。
是进交互操作时，出现 toast 提示。
另是进入下级界，以缺省页形提醒用户前网络异常。
缺省场包含：空数据、网络异常、服务器异常、内容被删除等。
1. 空数据
由产品处初始状态或者因为操删除而清空状态产生的空数据。
缺省页般含：插画和应提示文。是否提供操作按钮，可根据具体业务情况来定。
适场景：数据为空时现。
2. 网络异常
移动设备网络异常时，导致法上传和下载数据，从而法正常使用品。这时候会出现网络异常页提示用户。
缺省页包含：插画、对应的示案和操作。
插画视觉一比较轻，仅提供装饰作用，化下方的文字
对于网络异常，提供用户去设置网络。
3. 服器异常
服器异常是概率事件，但是也会发生。
当服务器异常时，且用户操作过程中，出这种况，一般可设 toast 提示，明确告知用户，服务器出问题。
当服务器异常， 用户入下级页面时，则通过缺省页面提示给用户。
4. 内容被删除
文件或者页面内容被删除，由于文件或者页面内容的上一页面有缓存亦或用户获取链进入，会出现文章/文件被删除的情况。
已被删除的异常状态，常见的设用户入新页面出对应的插画标题提示。
适用场：下级页面内容被删除时。
任何操作行的交互界面都伴随操作失败的可能性。
当用户操失败时，且操在当前页面完成时，通 toast 告用户操失败及操失败的原因。
以上是异常场和加载状态的局内容。
做 0 到 1 品设计师，在设计全局异常和加载时，需要将以上 4 大类按照自己品实情况，逐条梳理，即可适用于个品。
注：分素材使光音移设计规范。素材由@MiroCat 和@牛设计。
欢迎关注作者的公众号：「Echo的计笔记」
浙公网安备33011002017549号