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