美文网首页需求分析
APP中网络异常情况及交互处理方式

APP中网络异常情况及交互处理方式

作者: 箱猫日和 | 来源:发表于2018-10-18 14:27 被阅读294次

网络异常一般存在以下情况

  • 网络未开启
  • 网络中断(断网、调成飞行模式)
    网络未开启、中断一般采用网络异常(即网络不能用)的处理情况。
  • 网络切换(流量 与 WiFi切换)
    1. 对于需使用大流量的APP,WiFi向流量切换时,则需弹框提醒用户,使用的流量改变了,使用户知悉此事,确定设置。
    2. 对于无需顾忌流量的APP,则直接过渡切换即可。
  • 网速较慢
    网速较慢证明还有网,只是还未加载出来,所以是以加载中的处理方式。(另篇)

交互场景及处理方式

方式:

  • toast
  • dialog
  • 头部提示框
  • 整页异常界面
  • 无数据的页面空白框架

场景:

  • 有数据缓存时
    初始进入页面,有数据缓存可以展示缓存的数据列表信息。

(1)可以在头部展示网络连接中断/未开启。比如购物/新闻网站,微信列表等


(2)可以toast展示网络异常,提示用户知道网络异常即可,无需二次确认。


image.png

(3)以dialog形式展现,可以根据“设置”网络的入口,调整网络。此类型适合需要耗费大流量类的APP,比如音乐、视频类的。其他类型的APP,以目前手机的设计,很多通过上滑或下滑的方式可以调出工具栏,直接调整网络,所以不建议以此种方式提示用户二次操作。


image.png

(4)直接展示缓存的页面,例如淘宝,让用户感知不到网络出问题了,只有去加载一个新的页面后才会发现网络出现了问题。

  • 无数据缓存时

(1)无数据化缓存,可以以图像占位符/预设图的形式展示整页或局部的框架,联网只获取到了框架。这种设计形式有一个最大的好处就是当网络中断时间很短时,用户几乎察觉不到网络中断,APP就已经恢复正常了。

image.png

(2)当整个页面内容都因为网络异常导致未加载成功,采用整页提示的方式。
可以用一个异常页面展示网络异常的情况,此时已经拿到某一个要请求接口的数据,比如URL、后台需要的相关字段,因此页面中可以设计点击屏幕/按钮来进行页面刷新,进行接口重调。

image.png

产品设计中,主要结合产品的需求及用户体验,来选择合适的方式。

本文参考借鉴参考 http://www.woshipm.com/pd/710387.html

相关文章

网友评论

    本文标题:APP中网络异常情况及交互处理方式

    本文链接:https://www.haomeiwen.com/subject/sxyjzftx.html