人非圣贤，孰能无过。当人们操作用户界面的时候，错误难免会发生。有时候是因为用户做了错误操作，有时候则是由于应用本身出了问题。无论原因如何，出现的错误以及对其处理的方式，都对用户体验产生巨大的影响。糟糕的错误处理方式以及无用的报错信息会让用户感到万分沮丧，甚至会导致用户放弃继续使用你的应用程序。

在这篇文章中，我们将研究如何通过优化应用设计来避免用户错误，以及当错误发生时，如何生成有效的报错信息。

一个完美错误页面的全面检查清单：

完美的错误页面应该向用户伸出援助之手，并且应具备以下六个特质：

1.正如问题是不断变化的一样，错误消息的出现也是动态的。要及时告知用户出现的问题。

2.保证所有用户输入信息的安全。在发生错误的情况下，应用不该撤销、销毁或删除任何用户输入或上传的数据。

3.使用与用户相同的语言。页面应该清楚地表达什么地方出了问题，可能的原因是什么，用户下一步该做些什么来修复这个错误。

4.不要惊吓或者迷惑用户。（页面消息不该是戏剧性的。）

5.不要抢夺系统的控制权。（如果不是危险性的问题，应该尽可能地让用户能够和应用的其余部分进行交互）。

6.用一点幽默感，让问题更有人情味。

用于表单验证的错误界面

1。适当的时间（表单内验证）

在用户提交数据之后，验证系统应该立即告知用户他们所提供答复的正确性。良好验证的首要原则是：“跟用户说话！告诉他们哪里错了！”表单中的实时验证可以立即告知用户他们所提供数据的正确性。这个方法可以让用户更快地改正错误，而不用等到点击了提交按钮之后才看到报错。

2.适当的位置

你考虑在哪里显示验证消息的时候，可以遵循这一经验法则——始终在操作情景中放置消息。如果你想告知用户在某个特定字段有一个错误——就把消息放在字段边上。最好把即时验证结果放在输入位置的右侧，右侧放不了的话就直接放在下方。

3.适当的颜色（表单内验证）

颜色是设计验证时的最佳工具之一。因为它作用于本能层级，在错误消息中加上红色，警告消息中加上黄色，成功消息中加上绿色，会难以置信的强大。但是，要确保数字界面中的这些颜色对用户是易理解的。这是良好视觉设计的一个重要方面。

4.清晰的消息

一个典型的错误消息可能仅指出“邮件是无效的”而不告诉用户为什么它是无效的（是因为错字？还是已经被占用？）。简单明了的说明或指引会让一切都不一样。收到这个错误消息的用户不需要有任何猜测，也不会有产生混淆或沮丧。你可以从这个例子中看出，表单告知用户该邮件已经被使用。然后它给出了一些选项（登陆或者重置密码）。

好了，是时候显示一个错误页面来表明出了一些问题。举个例子，让我们假设这样一个情景：网络已经断连，而用户正在访问一个在线界面。你需要借此机会让人们知道你清楚发生了什么，并且遵循即时提供帮助的典范——你给出的错误消息应该向用户伸出援助之手。这就是为什么你永远都

不该

显示：

（1）原始的错误消息。包含应用内部错误代码或者缩写文字的消息，例如“发生了类型2的错误”，是晦涩并且可怕的。

（2）死胡同的错误消息。

因为这样的错误状态并没有给用户提供任何有用的的信息。

（3）模糊的错误消息。下图所示例子中的错误界面中提供给用户的信息量跟上一类消息一样少。用户完全不知道这个消息是什么意思，他们下一步又该怎么做。

别用错误恐吓用户。另外，也不要以为人们会知道某条消息的语境，或者以为他们技术足够娴熟，可以自己解决问题。相反的，应该用通俗易懂的语言告诉用户哪里出了错。要做到这一点，需要避免使用技术术语，而采用用户术语来表达所有信息。

要让你的错误消息可读性强，并且有帮助——错误状态界面必须含有简洁、礼貌、指导性的文案，并且清晰地指出：

1.出了什么问题，可能是由于什么原因。

2.用户下一步可以采取什么措施来修复这个错误。

常见错误状态的解决方案：

404 页面未找到错误

404页面的主要目的是引导用户尽快地跳转到他们寻找的页面。你的404页面应该列出一些关键链接和指南，以供用户选择。一个保险的做法就是在404页面提供一个“主页”链接作为主要操作元素——这是重新来过的一个快速且友好的方式。

无法登陆

登陆界面通常相对小一些，有一个用户名字段和一个密码字段。但是，小并不等同于简单。出于多种原因，用户可能会被卡在登陆界面。登陆页面的主要规则很简单——别让用户猜测。

用户用错误的密码多次尝试登陆

为了防止暴力攻击，在太多次登陆失败后，账户往往会被暂时锁定。这是一个必要的安全措施，但是要确保在账户锁定之前对用户进行警告。

出现信用卡的被拒错误页面可能是因为（1）数据格式上的错误（错字或漏填数据）或者（2）信用卡被拒付（过期或欺诈）。Gabriel Tomescu在他的文章《解剖信用卡格式》中，建议用以下策略应对这两种错误状态：

对于第一种问题，应该遵循标准的实时表单内验证机制，在视觉上指明错误：

但是，如果该卡是被支付网络或者某些原因拒付，它看起来通常像是诈骗。应该清除用户输入的数据。即使数据被清除了，还是要告知用户发生了什么；应该尽可能明确地显示错误消息。

连接已断开

网络访问并不是无处不在的，对离线状态的支持应当是差不多每一个现代应用的关键考虑因素。当连接断开的时候，你需要提供尽量丰富的离线体验。用户应该可以尽可能多地和应用的其余部分进行交互。这意味着应用要有缓存的内容，来提供良好的离线体验。

保存最新状态。下图中你可以看到两个用于传递内容的应用。CNN的应用提供了更好的用户体验，因为它缓存了最近的视图，并为用户提供了最近一次加载的文章标题。

提供离线功能和特性。

在每个应用上都有一些特性可以（而且应该）在没有网络连接的情况下工作。以Evernote为例，该应用完全可以离线使用：你可以编辑现有笔记或者新增笔记，一旦再次连接网络，该应用就会把所有笔记同步到云端。

总结：

最好的错误消息是永远不会出现的错误消息。在任何情况下，能提前引导用户去向正确的方向，并在第一时间就预防错误发生，总是更好的做法。但是，当错误确实出现的时候，精心设计的错误处理不仅可以教会用户用正确的方法使用应用，还可以避免用户产生一无所知的感觉。当然了，错误状态是我们最不愿意去设计的状态页面之一。但是，如果你把大量精力放在该状态页面的设计上，你的产品会比其他产品用起来愉快的多。

原文作者：Nick Babich

原文地址：https://www.smashingmagazine.com/2016/09/how-to-design-error-states-for-mobile-apps