导语：用户在使用App时，除了正常的使用场景，还会碰到许多特殊场景：页面加载中（请求数据）、页面内容为空（缺省页面）、网络异常、服务器异常、下拉刷新、下拉加载、版本兼容等。友好地设计产品在特殊场景下的状态，对于用户体验至关重要。
一、页面加载中（请求数据）
1、场景：当进入页面，无缓存数据，则在页面上显示加载中的状态。原生页面多以插画的形式呈现。H5页面则在头部出现进度条。
2、交互：进入页面请求数据，最长加载时间为10s。10s后若加载不出数据，则返回网络/其他异常提示。
页面加载中（以土豆视频App为例）
二、页面内容为空（缺省页面）
1、场景：当进入页面，无数据，则在页面上显示该状态。
2、交互：对内容关注页，可以引导用户进入推荐页进行订阅；对搜索/筛选结果页，可以引导用户更换关键词或推荐其他相关热门内容；对普通的缺省页面，可以以插画配生动的文案告知用户当前页面为空。
页面内容为空（以土豆视频App为例 ）
搜索结果为空（以B站和腾讯视频APP为例）
三、网络异常
1、头部
1）场景： 当进入页面无网络，则头部空出一行显示该提示。
2）交互：当网络正常时，这行提示自动消失；当网络异常时，这行提示固定在页面上，点击时进入手机wifi设置页。
2、页面上
1）场景：当进入页面后网络异常且无缓存数据，则在页面上显示该状态。当进入页面后网络异常且有缓存数据，则页面上不显示该状态，只在头部提示网络异常。
2）交互：当网络正常时，回到加载中的状态，显示出数据。点击“重新加载”按钮，再次请求数据。
网络异常（ 以京东App为例 ）
四、服务器异常
1、场景：当进入页面后服务器或非网络的异常且无缓存数据，则在页面上显示该状态。
2、交互：错误代码由后端返回。点击“重新加载”按钮，再次请求数据。
服务器异常原型
五、下拉刷新
1、场景：当用户下拉页面时，页面内容往下，空出一行显示该提示。
2、交互：下拉与请求数据时出现该动图，最长加载时间为10s。10s后若加载不出数据，该动图消失，然后在头部返回网络/其他异常提示，但页面显示缓存数据。
下拉刷新（以B站、虎牙直播为例）
六、上拉加载
1、场景：当用户上拉页面时，在页面最下方，空出一行显示该提示。
2、交互：对于分卡片的信息流，滑到倒数第二个卡片时，自动加载了。下拉与请求数据时，最长加载时间为10s。10s后若加载不出数据，就在页面底部返回网络/其他异常提示，但页面显示缓存数据。其他异常时，错误代码由后端返回。
上拉加载原型
七、版本兼容
1、场景：当低版本用户收到高版本用户发的消息，或低版本用户显示不出高版本才有的样式时，触发该提示。
2、交互：点击该样式，可以弹出APP升级提示弹窗，引导用户升级版本。
版本兼容
网友评论