错误提示信息设计

前言

一句话介绍:对于用户操作后的错误类信息提示,应该注意把控防错提示,前端错误及时校验,后端返回错误信息呈现这三种错误设计类型，并选择合适的控制台组控件来表达。

错误提示信息的种类

用户会通过各种操作和控制台页面进行交互，无论是查找信息,填写表单，还是配置操作项，期间都有可能发生出错的情况。控制台的设计师在设计时，应该尽可能避免使用户出错，同时在错误发生后，通过及时的提示信息，帮助用户修正错误，或者给出合理的引导和建议

错误提示设计的时候，我们应该秉持着防错在前,容错在后的设计理念，将用户的操作以时序的流程进行拆解，分为操作前,操作中,操作后三个部分

• 操作前, 主要应当关注防错提示的设计
• 操作中,主要应当关注针对输入内容及操作规则类的及时校验等错误提示的设计
• 操作后, 当用户提交的信息和后端交互后，应关注后端返回的错误信息的呈现形式

操作前: 防错提示

1. Message tips: 主要用户重点或者通用类的信息前置提示

   
   Message.png

2. 气泡提示以及文字链接提示,主要用于对业务类信息的介绍和解释,帮助用户理解输入的内容

   
   image.png
3. 重要的操作二次确认
   对于删除类等重要的操作，一般采用二次确认的形式来保证用户拥有操作权限或者确认决策，多数使用弹窗的形式来承载:

操作中: 前端错误的及时校验

用户在输入表单及进行操作时产生的输入格式错误或者前端可及时判定的逻辑错误，应当在用户输入完成时及时给出反馈。

image.png

操作后: 后端返回的错误提示

在用户完成操作并将信息提交以后，后端会由于某些原因返回报错信息，可能是用户的验证信息出错，或者平台或网络的原因，大多需要用户着重注意。这里报错信息应该满足视觉醒目,强提示的作用。

1. 校验类错误提示
   样式与表单输入错误的及时校验样式相同，交互逻辑是当用户点击“确定”或者“提交”按钮之后，将错误的输入项提示全部展示出来

   
   image.png

2. 弹窗类错误信息
   当后端返回的错误提示需要用户着重注意的强信息提示,对于用户的后续操作有一定影响的,一般采用莫泰弹窗来承载错误提示

   
   image.png
3. 轻量错误提示
   对于较为轻量的错误提示信息，可以采取顶部Toast的形式来展示，需要注意的是，顶部Toast会在出现后默认3秒钟消失，所以在设计时对于错误类信息需要谨慎使用此形式，容易使用户忽略信息
4. 结果页的错误提示
   结果页类错误提示可能应用于独占式页面、弹窗、或SlidePanel中，主要是指用户从一个或多个分步页面/容器进行完操作后，从新的页面/容器展示错误的结果。

image.png

错误文案的设计

错误信息应该使用通俗易懂的语言表达，较准确的反应问题，并且提出解决方案。无法避免的错误情况，不仅腰围用户明确标记出错的原因，也应当提供给用户解决方案。或者下一步的行为引导，帮助用户识别，诊断并从错误中恢复