关于网络异常的产品设计

在产品设计中,有些设计是必须要遇到的,比如APP的升级更新,程序异常,网络异常,登陆注册等。这些问题是逃不了的,那么针对网络异常应该怎么设计呢?
网络异常包含哪些方面的?一是网络切换;二是网络断开。
关于网络切换,一般的处理都是从wifi切换到运营商网络的时候,给用户一个提醒,常用的方式就是一个弹出框,然后在弹框中说明需要切换到运营商网络,让用户去选择是否切换,如果是土豪,毫不犹豫的选择继续,不然就乖乖的暂停啦。当然什么样的app需要给用户提示呢?当然消耗流量大的肯定是需要给用户这个提示,是的,你答对了,但是如果仅仅是想到这个地方的话,那是远远不够的。
我们想一个问题,是否是一旦wifi切换到运营商网络就提示呢?其实不是的,因为我们在看视频或者听音乐的时候,是有个预加载机制的,他可以缓存一些数据,如果还在播放缓存中的数据,那么它就不会提醒,只有你需要加载新的数据的时候,它才会提醒。那么为什么不能立刻提醒呢?一是因为你还没有用到运营商的流量,还没有必要去提示;另外是因为它有可能会还没有用到运营商流量之前又切回到了wifi,这样就避免了对用户的打扰。同时如果切换了运营商网络的话,则需要自动切换音质或者分辨率,为用户节省流浪。常用的提示方式:
QQ音乐的提示:


QQ截图20151127184643.jpg

其实到这里还没有结束,因为上述的提示和措施一般发生在2G或者3G的情况下,随着流量越来越多,4G的情况下一般就不做提示,或者仅仅就弹出一个toast而已。
那么针对这一点,有一个更聪明的做法,就是推广流量包,不仅仅给用了一个提示,还给用户提出一个解决的方案:
网易云音乐是怎么做的呢


QQ截图20151127185127.jpg

所以如果从用户交互友好性来说,除了能即使给出提示,还要想是用弹框提示好,还是用toast提示,提示之后,要不要给用户一个解决方案,通盘考虑之后在做决定。
除了网络切换,网络断开的异常会遇到的更多,是所有的app需要考虑的问题,那么网络断开的提示有几种呢?
第一个就是toast,直接弹出提示,3s随后就消失;弹出toast后不同的app做法不同,这个取决于APP的做法:
如果你是H5网页的做法,那么弹出toast后,整个页面就是空白的,是没办法进行操作的,如下图所示:
楚楚街怎么处理呢?

1.png

美的商城的做法:
2.png

它们都是H5页面完成的,所以没办法进行数据展示,第一张比较好的是如果网络设置OK,用户可以很明确的点击重新加载刷新;而第二个就会让用户有一些迷茫,即使用户下拉可以重新进行刷新,但是这个行为是用户的无意为之,在这之前,用户不知道应该怎么做,所以,第一种方式比较好。除了第一种方式还有一个更好的方式,就是给用户提供设置网络的入口,不需要用户再退出应用,找到设置,再去查看网络情况,如下:
小米商城的处理方式:
3.png

这个时候点击查看网络设置,那么就可以直接去到网络设置,简单方便。
如果是本地端来实现的,那么因为有缓存,所以一般都会进行缓存的显示,而不是一篇空白,从视觉上来看会更友好一些,如下:
今日头条的提示:
4.png

不过它仅仅是给个提示,其实还是没有给出用户接下来应该怎么办的指导,那么下面就给出了更友好的设计:
京东的做法:

5.png

给出的处理方式:
6.png

它不仅给用了提示,还给出怎么办,所以从产品体验角度,它更友好。
第二种直接给出网络异常的弹出框,这个是除了toast的另外一种方式,它后面也会跟着两种情况,H5网页和native本地两种实现方式。与上一个toast不同的区别就是他会阻止你的下一步操作,必须做出选择才能往下走,所以在整个的感觉中,网络异常的处理是最高优先级的,那么两种网络异常设计的表现形式如下:
洋码头很是厉害,狂弹提示不让进:


7.png

乐视商城的弹出框:


8.png

第一张图片是弹框方式,但是它是把用户完全阻隔在外面的,根本进不去,点击确定之后,只要是网络断掉还是一直弹出这个框,用户想去了解里面根本不可能,同时也没有给出处理方式。第二个比第一个更近了一步,可以让用户去设置网络,给出下一步的动作;如果不做处理的话,还是能够进入app里面的,即使没有网络也可以对这个APP有个大致的了解,所以第二种会更好些。
但是本地端的实现遇到网络异常,是弹框好还是在上面给出一个提示好呢,这也是京东和乐视商城采取的不同的方式。个人认为看你的目的和计划怎么去引导用户。如果是进入后有内容可以呈现,也想让用户进来看,只不过网络导致了影响观看,那么就采取京东的方式;但是像乐视商城,进入之后第一页面根本没有可以给用户看的,那么就弹出框比较合适,优先让用户把网络设置好。另外也根据交互的难易度来考虑,比如如果是在智能电视上面,那么即使是本地端实现的,也不能采取京东的方式,因为电视需要遥控器一步一步操作,移到网络设置的地方很复杂,所以建议采取弹框的方式更合适。
关于网络异常处理也是需要好好思考的事情,不同的情况下采取的方式不同。它需要从自己的目的,用户体验,实现方式等多种维度去考虑。个人见解肯定不完全对,只是作为个人的一个思考。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349

推荐阅读更多精彩内容