本文对几种常见的异常状态进行设计总结,其中介绍了不同异常状态的表现形式以及我们应展现的设计状态与规范。
异常状态多在特殊场景下出现,比如服务器异常、网络异常等,因为异常状态出现的概率是较低的,所以异常状态也常常会被忽略,等到实际碰到的时候才会意识到原来还有这种状态……
作为交互设计师,在完成主流程设计后,也应该考虑到异常场景。
从全局性出发,我们可以预先考虑到产品将会碰到的异常状态,针对不同的异常状态制定相应的设计规范,在后续的设计需求中直接复用即可。
下面对几种常见的异常状态进行设计总结。
网络异常的原因主要有以下两种原因:
(1)网络连接权限
针对某App的网络连接权限可以通过手机进行设置,可设置为关闭应用使用数据,或者只允许应用在WLAN下使用,或者允许应用在WLAN与蜂窝网络下均可使用。
所以以下均属于网络异常的情况:
(2)网络连接状况
在断网(打开飞行模式)、弱网(手机信号差)的情况下, 也无法正常获取数据。
当网络异常时,用户点击进入新页面或在当前页进行操作时,App会通过异常状态缺省页或交互反馈来告知用户当前异常状态和解决方案。主要分为两种情况:
(1)当用户操作进入App新的页面时,常以缺省页的形式提醒用户当前网络异常。当应用检测到有可用网络时,缺省页将自动刷新页面内容。
比如网易云音乐在无网络连接下,进入新页面时,缺省页以简单的文案告知无网络的基础原因,通过查看详情来告知用户解决方案以及引导如何解决问题。
美团、腾讯视频等,引导用户检查网络权限设置和稍后再尝试刷新页面,稍后再试是因为弱网环境是暂时的,比如在地铁上高铁上或者某处手机信号接收较差的地方。
(2)当用户点击操作当前页面时,比如上拉加载页面、下拉刷新页面,点赞、关注等操作时,常以toast或对话框的形式提示用户。
比如网易云音乐,网络异常情况下下拉刷新或上拉加载页面均进行对话框提示,并引导用户检查网络权限设置。
美团外卖,无网络连接环境下,在我的订单页面进行评价操作,会进行toast提示。
前面说完网络异常的设计规范,接下来就不得不提到流量警告的场景。
对于需要消耗大量流量的应用:
(1)在流量环境下进行需要消耗大流量的操作,比如播放/下载音视频等,页面会进行流量警告。比如网易云音乐在流量环境下打开MV。
(2)在WI-FI环境下切换到流量环境时通常应用会主动暂停进程并进行流量警告,并在页面上告知用户原因,让用户选择是否继续进程。
比如网易云音乐、爱奇艺、芒果TV、BiliBili等音视频娱乐App,在以上2种场景下,在视频画布上进行告知让用自己选择是否继续播放,同时也提供按钮入口让用户办理业务可免流量进行播放。其中,芒果TV和BiliBili的继续播放按钮还贴心地告知了用户将要消耗的流量值。
对以上两种场景的处理方式进行归纳,均为流量警告方式。
总结完网络异常和流量警告的设计规范,我们知道其中影响因素包含:网络连接权限、网络连接状况以及网络环境的变化,下面做一个小总结,以便快速查询。
在总结之前强调一下,网络权限设置是针对某App,连接Wi-Fi和流量是针对手机(所有应用)。以iOS为例,设置截图如下:
针对以上情况,表现状态为“网络异常”,则参照网络异常的设计规范;表现状态为“流量警告”,则参照流量警告的设计规范。
服务器出错的情况是较少出现的,若出现服务器异常,其异常的时间也较为短暂。
一般不提示具体原因,处理方式为进入新页面的话则以缺省页(文案或是文案+插画)的形式进行提示+重试按钮,例如,进入小米金融贷页面时服务器出现异常,缺省页提示错误原因同时提供重试按钮。
点击操作的话则以toast或对话框的形式进行提示并重试,比如下图的段友app,服务器出错,刷新页面后进行toast提示;前段时间超级火的zao应用,朋友圈火爆传播,一度造成服务器访问过载,制作视频的时候应用给出了对话框提示。
在数据加载过程中,导致异常的原因可能是:
1、网络异常导致加载失败
2、服务器请求数据失败导致加载失败
1、如果是因为网络异常导致加载失败,处理方式参照网络异常的设计规范。
2、如果是服务器请求数据失败,处理方式参照服务器异常的设计规范。
空状态就是指页面当前无内容,主要在以下场景下会出现空状态的情况:
当前页面为空一般会提示用户当前页面为空状态,同时也可能会做适当的引导。
针对空状态的场景,主要采取以下几种设计原则:
(1)用户无权限
一般在B端产品中会碰到这种场景,通常来说,若用户无权限访问某功能模块的话,处理方式一般是将该功能模块对用户进行隐藏。
若有其他原因不能隐藏对应功能模块,处理方式为缺省页面(文案或是文案+插画),但文案要足够明确,告知无权限的用户该如何处理才能访问,一般是联系管理员添加权限。
(2)搜索无结果
搜索无结果的处理方式一般有两种处理方式,一种是缺省页面(文案或是文案+插画),另一种是在第一种的基础上加上相关推荐。具体用哪一种根据设计目标来决定。
比如网易云音乐搜索音乐无结果直接用文案告知。豆瓣搜索书影单无结果以插画+文案的形式展示结果。美团搜索不到相应的内容,应用直接推荐其他商家刺激用户购买。
另外也有应用会添加一些引导操作收集用户数据来优化搜索,比如微信读书找不到相关的数据,在页面的底部提供一个入口让用户填写书籍名称和作者,基于用户的反馈数据,微信读书在后续书城书目的收录工作中,就可以优先收录用户搜索率较高的书籍了,在优化搜索的同时也提供了用户反馈诉求的入口。
(3)初始内容为空
需要用户进行操作产生内容的页面,初始状态一般为空,和搜索无结果的处理方式类似,有2种处理方式,一种是缺省页面(文案或是文案+插画),另一种是在第一种的基础上加上快捷入口或推荐内容,其目的都是在于引导用户进行操作从而产生数据。具体用哪一种还是根据设计目标来决定。
直接用缺省页面告知方式上,例如网易云音乐,个人未发布相关动态,该动态页面直接用简短的文案告知用户暂无相关动态。
提供快捷入口上,比如微信读书,用户未加入书籍到书架时,进入书架页面,会有一句话文案引起用户共鸣,另外附上找书按钮方便用户快捷进入书城进行找书。
如果通过用户浏览记录和搜索行为等能够分析出用户的兴趣爱好,进行精准推送,那在空状态页面进行推荐引导也不乏是一种很好的尝试。比如网易云音乐、腾讯视频和美团均有采取该方式。
网易云音乐里头我从未购买或领取过数字专辑,该页面也是无数据的,网易云音乐在页面底部进行了数据专辑的推荐,具体的推荐算法不太清楚,我觉得可以是销售量较大的专辑,或者根据我个人的搜索和浏览记录进行相关推荐,最后通过埋点数据分析通过推荐引导购买是否提高了专辑购买率。
(4)内容被删除
页面内容被删除区分场景说明。
第一种是需要用户操作产生内容的页面,用户也可以通过删除将页面内容清空。
对于该场景,当页面内容被用户清空后,页面内容为空,处理方式和初始状态为空类似,以缺省页(文案或是文案+插画)的形式告知或在此基础上加上快捷入口或用户推荐。
比如清空网易云音乐中我的下载列表所有单曲、清空腾讯视频我的缓存视频,清空微信读书的书架,清空后的状态和初始状态是一致的。
另一种场景是的页面入口依然存在,但二级页面内容已经被删除了,二级空页面的设计处理方式是以缺省页(文案或是文案+插画)的形式告知,文案信息告知用户内容已被删除。
例如某微信订阅号的文章发布记录中的某篇文章已经被删除,点击进入二级页面后的提示如下:
功能已上线,后期进行产品升级或迭代功能正在开发中,功能入口没有进行关闭还是允许用户访问,通常会在用户进入该页面之后进行对话对话框提示,告知原因。
以上对几种常见异常状态的设计规范进行了总结,相对正常状态,异常状态较为少见,容易忽略,大家可以参照以上规范进行异常状态设计和优化调整。后面碰到其他异常状态,我会继续补充。
文章来源:人人都是产品经理
在做设计的过程中,大部分设计师只专注于主操作流程、主页面、分支流程、小页面和页面的不同状态。却容易忽略产品中容易出现的各种异常状态。
当用户停留任何一个界面,进行任何一个操作都可能发生异常状态。
如果接到每个需求都去制定一次异常状态,这样的后果可能会使得产品的不同模块、不同流程,异常状态都不一致。全局规范性被破坏,同时设计师的效率也降低。
因此全局制定异常状态规范很有必要,后续就不需要再设计,开发直接复用异常状态的规范。省时省力、提率、设计规范、运行更流畅、减少代码重复率、安装包也会更小。
异常状态一共有以下 10 类:
当移动设备网络异常时,导致无法上传和下载数据,从而无法正常的使用产品。
网络异常存在两种场景:
1. App主动行为
当无网络时,用户打开 App,通常有三种方式提醒用户当前网络异常。
tips 提示,通过 tips 提示用户当前网络不可用,tips 使用场景一般为用户打开后,界面停留在首页,且首页以列表形式展示,这样的话, tips 才能合理的融入到界面中,常见使用这种布局方式的有微信、qq等。
使用toast提示用户网络异常,同时提示用户可以去使用非数据影响的操作。例如网易云音乐,当无网络时候,告知用户可以去正常听已下载的音乐。
使用对话框,引导用户进入设置页面,关闭飞行模式或者打开 Wi-Fi,例如美团进入首页后的对话框提示。
2. App被动行为
当前无网络时,用户点击操作,无法正常使用产品,这时候通常有两种处理方式。
一种是当前界面出现 toast 提示。另一种是进入下一级界面,以缺省页的形式提醒用户当前网络异常。
例如手机淘宝,没有网络时,用户点击会进入下一页,出现缺省页提示,告知用户网络异常,同时提供刷新按钮。
美团在无网络时,点击其他 tab bar,出现 toast 提示用户当前网络异常,稍后重试。
3. 小结
当涉及需要消耗大量流量数据时,且非 Wi-Fi 情况下,这时候需要告知用户。常见的例如看视频,听/下载歌曲、视频通话、下载上传文件等。
例如B站,当使用移动数据看视频,则通过提示语和对应按钮上的流量值告知用户。
网易云音乐在非 Wi-Fi 情况下,下载音乐时,通过对话框,告知用户当前使用数据流量,同时提供可继续下载的功能,也提供通过办理新业务解决数据流量的问题。
空数据一共分为两种类型,分别为初始状态和清空状态。
1. 初始状态
用户首次使用,没有任何内容数据时,需要用户进行某种操作才能产生内容的界面,这时候需要提示用户需要进行某种操作。
例如淘宝App,当用户没有把商品加入购物车时,进入购物车界面,会给出提示购物车界面为空。给出用户提示,给出相对应的入口按钮,引导用户操作。
如果初始状态,无任何内容直接给出一个空白界面,用户可能会以为该界面出 bug 了。
Gmail 直接用一个插画提示用户收件箱为空。
一般对于初始状态的设计,常规做法是简单的插画配合简洁的文案,必要的时候给出引导用户操作行为的按钮。
现在流行的设计趋势是插画越轻量越简单越好,以免抢夺了文案信息。
2. 清空状态
当用户清空当前的页面内容,产生了空界面,这时候需要有明确的提示告知用户出现当前页面的原因,且告知用户该如何处理。
清空状态是对初始状态的进一步细化。清空状态的界面和初始状态设计很相似,唯一不同的是文案的提示。
有的产品直接把清空状态的界面按照初始状态来设计,这样也是可以的,缺点就是没有告知用户产生空状态原因是初始化还是清空所致。
在加载过程中,App 向服务器请求数据,如果是网络原因导致,则使用网络异常的设计规范。
如果非网络异常原因,则可能因为服务器异常导致接口请求不到数据,从而加载失败。
第一次请求失败,有些场景可能重试 2 次,例如微信支付宝,这种情况可使用 toast 告知用户加载失败的原因。
任何操作行为的交互界面都伴随着操作失败的概率。
当用户操作失败时,在当前页面给予一个反馈,告知用户操作失败,最好告知用户操作失败的原因,让用户知道接下来如何避免操作失败。
因为服务器异常是小概率事件,但是也会发生。
当服务器异常时,且用户在操作过程中,出现这种情况,一般可设计为对话框提示,明确告知用户,服务器出现问题,让用户稍后重试。
例如下图的华为云备份恢复界面:
用户在搜索过程中,除了出现正常的匹配结果,还存在无匹配结果的情况。针对搜索无结果的情况,要给予用户操作无结果的提示。
几乎搜索无结果的状态都是在内容区出现对应提示。例如 iOS 相册,通过搜索关键词,当没有匹配照片时,则出现对应的提示,如下图右侧图:
下图淘宝买家版后台,当用户搜索关键词无结果时,出现对应的提示语和插画。
无权限的场景,通常适用于 b 端产品,对于不同组织架构的企业员工,会存在不同的权限。
例如部分重要的内容,非同一组织架构的员工无权限查看,这种情况,用户点击进入一般给出对应的提示。
当然最好的方案是在 App 上面过滤掉无法查看的内容,但是存在员工间的转发行为,这时候无权限的员工,点击进入,则显示暂无权限查看的提示页面。
一般 App 功能正在开发中,这种情况不会在 App 界面中展示出来,只有完全开发完毕并上线后才会出现在 App 上。
但是也有一些产品的特殊业务,会将一些未开发的功能展示出来,例如微信公众号,长按微信文章,即出现对应的提示。
也有一些新闻频道还没有开发完毕上线,这时候用户点击进入下级界面,则出现对应的提示语/插图提示,如下图所示:
有的时候,文件或者页面内容被删除,但由于文件或者页面内容的上一级页面有缓存,所以当用户点击进入时,会出现文章/文件被删除的情况。
已被删除的异常状态,常见的设计是用户进入新页面出现对应的插画和标题提示。
例如下图微信公众号文章内容被作者删除,读者点击进入,加载后的界面就出现内容被删除的提示。
以上就是常见的 10 种异常状态的简单介绍和说明。在制定异常状态的设计规范时,可以参考本篇文章。
当然也有公司特殊的业务导致存在很特殊的异常状态,针对这种情况,可以适当的增加、删除或者修改,使其更适用于自己公司的项目。
文章来源:优设
蓝蓝 http://www.lanlanwork.com