常见异常状态的产品设计

产品的设计过程中,大部分只专注于主操作流程、主页面、分支流程、小页面和页面的不同状态。当用户停留任何一个界面,进行任何一个操作都可能发生异常状态。产品小白们常常忽略对异常状态展示的设计,或者每次做需求都去设计一次各异常状态的展示页面,这样效率不高且会导致不同功能模块、流程,同一异常状态,异常展示设计不一致。 产品应该对公司内同一产品或产品线规定异常状态的全局设计规范,以提升效率。

常见异常状态罗列:

1、网络异常

2、空数据

3、加载失败

4、操作失败

5、消耗大量流量时

6、服务器异常

7、搜索无结果

8、无权限

9、功能建设中

10、内容被删除

下面针对这10种异常状态分别展开说明。

1、网络异常

存在两种用户场景:

场景1: 网络异常时,用户打开App,这种情况App会出现异常状态提示给用户,这是App主动告知行为;

场景2: 用户点击操作时,由于网络异常,这时候通过交互反馈给用户,这是App被动告知行为

当无网络时,用户打开App,通常有三种方式提醒用户当前网络异常。

网络异常(主动)

1、tips提示,通过tips提示用户当前网络不可用,tips使用场景一般为用户打开后,界面停留在首页, 且首页以列表形式展示,这样的话,tips才能合理的融入到界面中,常见使用这种布局方式的有微信、qq等。

2、使用toast提示用户网络异常,同时提示用户可以去使用非数据影响的的操作。例如网易云音乐,当无网络时候,告知用户可以去正常听已下载的音乐。

3、使用对话框,引导用户进入设置页面,关闭飞行模式或者打开Wi-Fi,例如美团进入首页后的对话框提示。

当前无网络时,用户点击操作时,无法正常使用产品,这时候通常有两种处理方式。

网络异常(被动)

1、点击操作后,进入下一级界面,以缺省页的形式提醒用户当前网络异常。

2、当前操作界面上使用toast提示

总结:

个人觉得,不管是主动或被动告知用户网络异常,若非IM工具时,其他产品均可以采用 toast提示形式告知用户即可。

2、空数据

空数据一共分为两种类型,分别为初始状态和清空状态。

初始状态

用户首次使用,没有任何内容数据时,需要用户进行某种操作才能产生内容的界面,这时候需要提示用户需要进行某种操作才会出现内容。


空数据

一般对于初始状态的设计,常规做法是简单的插画配合简洁的文案,必要的时候给出引导用户操作行为的按钮。现在流行的设计趋势是插画越轻量越简单越好,以免抢夺了文案信息。

清空状态

当用户清空当前的页面内容,产生了空界面,这时候需要有明确的提示告知用户出现当前页面当原因,且告知用户该如何处理。

空数据(清空)

清空状态的界面和初始状态设计很相似,唯一不同的是文案的提示。有的产品设计直接把清空状态的界面按照初始状态来设计,这样也是可以的,缺点就是没有告知用户产生空状态原因是初始化还是清空所致。

3、加载失败

在加载过程中,App向服务器请求数据,如果是网络原因导致,则使用网络异常的设计规范。如果非网络异常原因,则可能因为服务器异常导致接口请求不到数据,从而导致加载失败。 这种情况可使用toast告知用户加载失败的原因。


加载失败

4、操作失败

任何操作行为的交互界面都伴随着操作失败的概率。

当用户操作失败时,在当前页面给予一个反馈,告知用户操作失败,最好告知用户操作失败的原因,让用户知道接下来如何避免操作失败。可以使用toast提示 或 对话框。

5、消耗大量流量时

 当涉及需要消耗大量流量数据时,且非Wi-Fi情况下,这时候需要告知用户。常见的例如:看视频,听/下载歌曲、视频通话、下载上传文件等。


消耗大量流量时

网易云音乐在非Wi-Fi情况下,下载音乐时,通过对话框,告知用户当前使用数据流量,同时提供操作可继续下载,也提供通过办理新业务解决数据流量的问题。

6、服务器异常  

     因为服务器异常是小概率事件,但是也会发生。

      当服务器异常时,且用户在操作过程中,出现这种情况,一般可设计为对话框提示,明确告知用户,服务器出现问题,让用户稍后重试


服务器异常

7、搜索无结果

      用户在搜索过程中,除了出现正常的匹配结果,还存在无匹配结果的情况,针对搜索无结果的情况,要给予用户操作无结果的提示。

       几乎搜索的搜索无结果状态都是在内容区出现对应的提示(插图)


搜索无结果


8、无权限

  无权限的场景,通常适用b端产品,对于不同组织架构的企业员工,会存在不同的权限。

  当然最好的方案是在App上面过滤掉无法查看的内容,但是存在员工间的转发行为,这时候无权限的员工,点击进入,则显示暂无权限查看的提示页面


无权限

9、功能建设中

一般App功能正在开发中,这种情况不会在App界面中展示出来,只有完全开发完毕并上线后才会出现在App上。但是也有一些产品的特殊业务,会将一些未开发的功能展示出来,即出现对应的提示。  一般采用提示语或插图提示。


功能建设中



10、内容被删除

有的时候,由于文件或者页面内容被删除,由于文件或者页面内容的上一级页面有缓存,所以当用户点击进入时,会出现文章/文件被删除的情况。

已被删除的异常状态,常见的设计是用户进入新页面出现对应的插画和标题提示。


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

推荐阅读更多精彩内容