在设计中，有些异常往往很容易被忽视，而在后来的实践中发现，这种状态依然存在……本文总结了常见的异常以及如何处理吧，赶快收藏起来学习吧！1、快速了解什么是异常？百度中异常的解释是这样的。异常，拼音：yìcháng，是汉语词汇。释义不寻常；不同于平常。设计中的异常是指正常状态以外的情况。比如你要设计一个下载按钮，下载按钮需要有多少种状态？正常状态下需要提供的下载按钮状态应该是：点击下载（下载前）、正在下载（或正在下载、59%下载等说明）、下载完成，如果只提供这三种下载状态在设计中，是不够的（事实上，一些设计新手，只提供点击下载这种状态）。还要考虑如果下载过程中网络断开，或者用户暂停下载等应该怎么办？这是一种异常情况，所以除了前面三种状态之外，还需要提供继续下载、下载失败等状态。下载完成后，一般会自动安装当前设计。此时会显示正在安装。如果未自动安装，则需要进行安装操作。安装完成后，提供打开操作。当然这里包含的异常状态主要是暂停后继续下载，下载失败等，下图是我做的下载按钮。可以看到很多状态，比如点击下载、下载完成、安装、打开等，视觉上是一样的，只是文字不一样。即便如此，这些状态是否应该是交互设计设计师和视觉设计师都应该给的，否则程序员将不知道在哪种情况下使用哪种形式的按钮。事实上，登录、支付、提交等一些按钮仍然处于“不可用”的状态。当用户没有输入信息时，登录按钮是灰色的，只有在用户输入相应信息后，该按钮才会高亮显示。2.异常情况总结通过上面的例子，相信大家已经充分了解了设计中的异常是什么以及如何处理。下面总结一下设计中常见的异常情况。异常处理其实分为两种情况。两种异常情况的处理1、界面有明显提示，需要用户了解这种情况，影响用户下一步操作，主要包括以下7种情况：与网络环境等相关：下载失败，服务器错误，断开连接，网速慢，加载失败，网络连接失败（wifi密码正确，连接不成功）；空状态：搜索结果为空，无浏览记录，无收藏，无购买记录，无订单记录，无下载记录等；表单异常：密码错误、输入字符太少、数量过多、账号密码等不符合相应规则、账号过期、必填项未填写（提示定位）、必填项输入字符为空等.;时效性：二维码/验证码的过期/失效，如有效链接、二维码等；限制值：上传文件超过限制大小，操作过于频繁（频繁刷新、点赞、摇一摇、戳一戳等，需要友情提醒）；不可用：账户不存在、账户过期、选项不可用、按钮变灰等；其他：外接设备连接失败（如遥控器、音响、手机等）、电源故障/电池电量过低、安装失败；2、用户在操作过程中感觉不到这种异常，对用户操作影响较小。主要是用户切换任务导致的异常：比如按home键突然退出/切换应用，返回键退出，下载进程退出等。以上是一些异常的总结设计中常见的情况。看到这里，很多朋友可能会说，这么多，我怎么记不住。我个人的建议是，如果你熟悉以上异常，在设计类似模块时，你会实际考虑相应的情况；如果对这些不熟悉，可以将文章中描述的异常作为checklist，在设计相应模块时，可以参考是否会出现上述情况。3、异常处理接下来分析这些异常情况的处理方法，以异常的方式进行处理。与网络环境相关：下载失败、服务器错误、网络断开、网速慢、加载失败、网络连接失败（wifi密码正确、连接不成功）1、下载失败一般需要有明确的下载失败提示，可以提示通过弹窗、Toast、列表等方式，如下图提示用户进行下一步操作，如重试、重新下载、删除等操作。△注：单图来源于网络2.服务器错误服务器错误页面常见500、501、502、503、504、505等5开头的页面。这些错误的解释如下：500内部服务错误：顾名思义，500错误一般是服务器遇到意外情况，无法完成请求；501服务器不具备完成请求的功能；502BadGateway错误；503服务器当前不可用（由于过载或停机维护）；504BadGatewaytimeout网关超时；505服务器不支持请求中使用的HTTP协议版本。服务器异常时，网页端处理方式为提示+返回，移动端处理方式为提示+重试。下图展示了一些常见的处理方式。△注：单图来源于网络近年来，很多网站和应用都将这个异常页面设计得比较漂亮，有故事，提高了整体的趣味性，减少了用户的焦虑感。比如互联网被外星人劫持，相信大家见多了。这里没有例子。3、网络异常断开，网速太慢，网络连接失败（wifi密码正确，连接不成功）。其实这些都是网络的异常情况。有时加载失败是网速慢导致的，有时可能是IIS（InternetInformationServicesInternetInformationServices）空间不足导致的。下图展示了一些网络异常是如何处理的。如果应用在网络异常之前没有缓存上一页的内容，会整体提示用户网络异常，也可以提供操作指导用户操作；如果页面在网络异常之前已经被缓存，则显示之前的页面，Toast会轻描淡写地提醒用户网络异常。4.空状态搜索结果为空，没有浏览记录，没有收藏，没有购买记录，没有订单记录，没有下载记录等。其实空状态很好理解，就是当页面没有内容，空页一般会提醒用户当前页面的空状态，也可以提供相应的引导。比如在影视app中，如果观看记录为空，可以为用户推荐电影，比如热门电影，猜你喜欢，以及其他热门推荐，供用户选择。但是，如果您不确定您推荐的用户是否喜欢，则不建议进行推荐。△注：单图来源于网络5.表格类型异常、密码错误、输入字符太少、数量过多、账号密码等不符合规则、账号过期、必填项目未填写（提示及locate),inputofrequireditemscharacterisempty等。对于表单异常，建议查看我上一篇文章《如何设计输入框?》，里面有更详细的讨论。6.对时间敏感的二维码/验证码的过期/失效处理，如有效链接、二维码等。有效性更多体现在二维码、支付码、验证码等有时间限制才有效的情况。通常，它们失效后需要刷新。手机端的筛选操作一般是点击或者下拉刷新；PC端一般是点一下，但是在TV端，按“OK”键刷新。如下图所示，显示了QQ二维码扫描登录页面和UC浏览器手机登录页面。7.上传的文件超出限制大小，操作过于频繁（频繁刷新，点赞，摇一摇，戳戳等，需要友情提醒）对于上传或下载过大的文件，建议采取提示窗口的形式，告知用户当前情况，明确问题，增加操作提示。比如在新媒体管理器中，导入的word文件不能超过10M，如下左图所示。对于过于频繁的操作，多见于QQ中的抖动窗口。其实在一些电视页面的手机截图工具中，如果刷新太频繁，就会弹出Toast提示。8.不可用账号不存在，账号过期，选项不可用，按钮变灰等。当账号不存在，用于登录时，如果输入的账号不在注册中accounts，会提示帐号不存在，是否立即注册等，如下图。9.账号过期在APP或网站中，登录账号后，如果长时间不使用，会有一个过期时间。设计者需要根据APP的具体情况设置登录过期时间。这时候就需要提醒用户重新登录。提示方式主要有Toast和弹窗两种，需要根据账号过期对用户的影响来决定。如下左图所示，登录账号过期对用户使用本应用影响不大，可以通过Toast灯提示处理；弹窗提示用户登录。10、不可用选项主要包括当前选项中不可选择的选项，也包括不满足一定条件不能使用该功能的按钮。11.无法连接其他外接设备（如遥控器、音响、手机等）、电源故障/电池电量不足、或安装失败。如果外接设备连接失败，需要提示。如果知道连接失败的原因，建议给出原因。停电情况一般用在PC端和TV端，停电后需要为用户恢复文件。很多设计软件都有这个功能。一旦软件无响应或其他异常情况导致文件出现问题，一般都会提供恢复文件。安装失败后，需要提示安装失败的原因，如存储空间不足或文件损坏等。12、用户切换任务导致的异常较多，如突然按home键退出/切换应用，返回键退出，下载进程退出等。此类异常提示用户再次打开时，又回到上次用户离开前的状态。如果数据被清除，则返回上次保存的数据页。4.总结文章主要总结了设计中经常出现的异常情况，并给出了相应的解决方案。最长的规则是给出异常提示+下一步操作提示，既明确了错误原因，又引导用户进行下一步操作，用户比较容易接受。异常是设计的一部分，无论是交互设计师还是视觉设计师都应该给出异常的表现或处理方法。
