1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 交互设计 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

超全面的设计异常情况和处理方式汇总--九分网络

时间:2020-06-20   分类:交互设计    作者:网络   来源:网络整理   点击:111

超全面的设计异常情况和处理方式汇总--九分网络 内容采集来自9fen.net

内容采集来自9fen.net

设计中,一些异常情况经常很容易被忽略,在后期的实践过程才发现原来还有这种状态……本篇文章汇总了常见的异常情况及处理方式,赶紧来收藏学习!

九分网络

一、快速了解异常是什么?

异常在百度中的解释是这样的,异常,拼音:yì cháng,是一个汉语词汇。释义非正常的;不同于平常的。

九分网络

在设计中异常指的是除了正常状态之外的情况,举个例子,假如你要设计一个下载按钮,那么下载按钮需要有几种状态呢? 本文来自九分网络

正常状态下需要提供的下载按钮的状态应该有:点击下载(下载前)、正在下载(或者是下载中、已下载59%等描述)、下载完成,如果你在设计中只提供了这三种下载状态是不够的(其实有部分新手设计师,只提供了点击下载这种状态)。还应该考虑如果下载中出现了断网,或者是用户暂停下载等情况的时候应该怎么处理呢?这就是异常情况,所以除了前面三种状态,还需要提供继续下载,下载失败等状态。下载完成后,现在的设计一般是会自动安装的,此时显示安装中,如果不自动安装还需要提供安装操作,安装完成后提供打开的操作。当然这里面包含的异常状态主要是暂停后的继续下载、下载失败等。

www.9fen.net

下图就是我做的下载按钮,可以看到其实很多状态如点击下载、下载完成、安装、打开等在视觉表现上是一样,只是文本不同,即使是这样,这些应有的状态无论是交互设计师还是视觉设计师都应该给出的,不然程序员会不知道哪一种情况用什么形式的按钮。其实在一些登录、支付、提交等按钮,还有一种「不可用」的状态,用户未输入信息时,登录按钮置灰,只有当用户输入相应的信息后,按钮才高亮。 内容采集来自9fen.net

超全面的设计异常情况和处理方式汇总--九分网络

本文来自九分网络

copyright 9fen.net

二、异常情况的汇总

通过上面的例子,相信已经充分了解到设计中的异常是什么,以及异常的处理方式,那么接下来总结一下设计中常见的异常情况。 本文来自九分网络

异常情况处理其实分为两种情况。 copyright 9fen.net

两种异常情况处理

内容采集来自9fen.net

1. 界面中有明显的提示,需要用户了解此情况的,并且影响用户进行下一步操作的,主要包含以下7种情况:

九分网络

与网络环境等有关的:下载失败、服务器出错、断网,网速过慢、加载失败、网络连接失败(wifi 密码正确,连接不成功); 内容采集来自9fen.net

空状态:搜索结果为空、无浏览记录、无收藏、无购买记录、无订单记录、无下载记录等; www.9fen.net

表单类异常:密码错误、输入字符太少,数量超额,账号密码等不符合相应规则、账号过期、必填项未填写(提示并定位)、必填项的输入字符为空等; 内容采集来自9fen.net

时效性:二维码/验证码的过期/失效处理,例如具有实效性的链接,二维码等; copyright 9fen.net

限定值:上传文件超过限定大小、操作过于频繁(刷新频繁,点赞、抖一抖,戳一戳等,需给出友好提示); 本文来自九分网络

不可用:账号不存在、账号过期、选项不可选、按钮置灰等; www.9fen.net

其他:外接设备连接失败(如遥控器、音响、手机等)、断电/电量过低、安装失败;

www.9fen.net

2. 用户在操作中是感受不到这种异常,并且对用户的操作有较小影响的。 本文来自九分网络

主要是用户切换任务引起的异常:如按 home 键突然退出/切换应用、返回键退出、下载过程退出等。 九分网络

以上就是在设计中常见的一些异常情况汇总,看到这里,可能很多朋友就要说了,这么多,我怎么记得住。我个人的建议是,如果你熟悉上面的这些异常的话,其实在设计类似的模块时就会考虑到相应的情况;如果你不熟悉这些,你可以把文章描述的异常情况当作一个检查表,设计到相应的模块时,可以参考是否会出现上方的情况。

www.9fen.net

三、异常处理

接下来分析一下这些异常情况的处理方式,按异常方式来处理。

www.9fen.net

与网络环境等有关的:下载失败、服务器出错、断网,网速过慢、加载失败、网络连接失败(wifi 密码正确,连接不成功) www.9fen.net

1. 下载失败

www.9fen.net

一般需要给出明确的下载失败提示,可以通过弹窗、Toast、列表等提示。如下图所示,然后给出用户下一步的操作提示,例如重试、重新下载、删除等操作。

内容采集来自9fen.net

超全面的设计异常情况和处理方式汇总--九分网络

www.9fen.net

内容采集来自9fen.net

△ 注:单张图片来源于网络 九分网络

2. 服务器出错

内容采集来自9fen.net

服务器出错的页面常见的500、501、502、503、504、505等5开头的页面。其中这些错误的解释如下: 本文来自九分网络

500 内部服务错误:顾名思义500错误一般是服务器遇到意外情况,而无法完成请求;

九分网络

501 服务器不具备完成请求的功能; 内容采集来自9fen.net

502 Bad Gateway错误; 内容采集来自9fen.net

503 服务器目前无法使用(由于超载或停机维护);

www.9fen.net

504 Bad Gateway timeout 网关超时;

copyright 9fen.net

505 服务器不支持请求中所用的 HTTP 协议版本。

copyright 9fen.net

服务器异常时,在网页端的处理方式为提示+返回,在移动端的处理方式为提示+重试,下图是一些普通的处理方式。 九分网络

超全面的设计异常情况和处理方式汇总--九分网络

九分网络

www.9fen.net

△ 注:单张图片来源于网络

九分网络

标签: 优设 优设网 交互设计 异常处理 异常情况

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----