跳至主要内容

Feedback 反馈

在用户使用系统的过程中,系统需要适时的做出适当反馈,以告知用户当前系统所属的状态、帮助用户了解当前或下一步需要作何操作,并明确操作有何种后果。


设计背景

在尼尔森十大可用性原则中,第一个原则说的就是系统状态的可见性,即系统状态需要反馈给用户,不让用户因对系统状态的未知而产生焦虑。

系统状态可见性包括让用户知道自己在做什么,系统在做什么,系统进行到了哪一步以及用户当前处在系统中的哪一个环节等等,应始终为用户提供适当且及时的消息,以帮助他们了解他们是否正在朝着自己的目标迈进。

若系统没有及时的反馈信息,用户不仅仅会产生焦虑,很有可能会执行错误的操作。

设计目标

反馈的方式有很多,根据用户操作的各阶段,将反馈分为三种:

行为反馈

针对用户某个操作行为,如鼠标 hover、点击按钮等操作进行反馈,能够及时有效的让用户感知到当前正在操作的这个组件的状态。

过程反馈

可以帮助用户增强掌控感,让用户了解任务进程。相对于较注重用户体验的 C 端产品来说,B 端后台管理系统更注重效率,多以任务为主,用户在执行一个复杂任务的过程中,可能由于某些操作不当引起错误,导致任务中断难以进行,此时一个准确及时的反馈可以及时的将用户重新拉回任务流中。

结果反馈

结果反馈可以帮助用户了解操作产生的结果或引导用户进行下一步的操作,提升整个操作流程的完整性和流畅度。

设计原则

轻量化

一个愉快的交谈应该是轻松的,自然的,所以,反馈机制的第一个原则是轻量化。

绝大多数的反馈机制应该遵循着「告知但不打扰」的基本规则,过于频繁或破坏性的通知会带来负面的体验。让用户的神经系统收到信息,确保操作的正确性,如果错了,应该从反馈和提示中获得正确操作的提示,尽量柔和且不要让人觉得烦躁。

文案清晰

后台管理系统多以复杂任务为主,及时的引导和清晰的文案提示能防止用户在任务流中迷失,反馈内容的主要说明文字需明确表达其目的及操作的后果,错误提示需说明清楚错误的原因及改正方式。

一致性

一致性即保持系统中所有相同的事件反馈方式是一致的,有利于培养用户的使用习惯和心理预期,当用户注意到并且学会了这种呈现方式,看一眼就能知道发生了什么。

就近原则

菲茨定律指出:使用指点设备到达一个目标的时间,与当前设备位置和目标位置的距离(D)和目标大小(S)有关。用数学公式表达为:时间 T = a + b log2(D/S+1),在设计中的应用之一就是就近原则,反馈出现在操作点最近的地方是最容易被发现且容易被操作的。

反馈组件

组件名称组件说明吸引程度停留时间信息量
Message 全局提示较轻量,停留时间短,视觉吸引度较低,适用于一些简单的操作反馈。⭐⭐⭐ 有动效,色彩面积小⭐ 自动消失,不可手动关闭⭐ 一句简短的话
Notification 消息通知较轻量,停留时间可设置,也可手动关闭,视觉吸引度适中,适用于承载简单的消息。⭐⭐⭐ 有动效,通知框面积适中⭐⭐⭐ 可自动消失,可手动关闭⭐⭐⭐⭐ 标题+描述+详情(点击跳转)
Alert 警告停留时间较长,可设置手动关闭,视觉吸引度较高,适用于承载需要用户注意的信息。⭐⭐⭐⭐ 无动效,通知框色彩面积大⭐⭐⭐ 可自动消失,可手动关闭⭐⭐⭐⭐ 标题+描述+详情(点击跳转)
Popconfirm 气泡确认框停留时间较长,需要手动关闭,出现在操作附件,视觉吸引度较高,适用于信息量较少的二次确认。⭐⭐⭐ 有动效,通知框面积适中⭐⭐⭐⭐⭐ 需手动关闭⭐⭐⭐ 标题+描述
Form 表单校验停留时间较长,需填写正确之后猜消失,信息量不宜过多影响表单其它内容。⭐⭐⭐⭐ 就地反馈,反馈颜色警示度较高⭐⭐⭐⭐⭐ 填写正确之后恢复状态⭐⭐ 一句简短的话
Modal 对话框阻断式信息通知,需要手动关闭,可承载较多信息。⭐⭐⭐⭐⭐ 阻断式,吸引程度高⭐⭐⭐⭐⭐ 需手动关闭⭐⭐⭐⭐⭐ 标题+描述+详情
Page 落地页视觉吸引程度较高,可承载大量信息。⭐⭐⭐⭐⭐ 落地页,吸引程度高⭐⭐⭐ 可自动消失,可设置手动关闭⭐⭐⭐⭐⭐ 标题+描述+详情+其它信息

Message 全局提示

定义

对用户的操作作出轻量的全局反馈。

何时使用

  • 在完结某个独立页面后的反馈(如:提交某个落地页表单);
  • 在一个操作区域或一系列操作完成之后的总体反馈(如:提交分步骤表单中的某个表单);
  • 在某个操作点之后的反馈(如:点击关闭某个功能的结果反馈) (示例:因为网络原因,点击“编辑”时加载出错)。

Notification 消息通知

定义

轻量级的全局消息提示和确认机制,出现和消失时需要有缓动动画。

何时使用

  • 需要提醒用户来自系统的消息,且不打断用户;
  • 带有解释描述的提醒内容;
  • 需要用户进行相关交互时(如:确认操作等)。

Alert 警告

定义

警告条用于承载需要用户注意的信息。

何时使用

  • 需要告知用户需要关注的信息时,提示作用较强。

Popconfirm 气泡确认框

定义

气泡确认框通常用于不会造成严重后果的二次确认场景,其会在点击元素上弹出浮层进行提示确认。气泡确认框没有蒙层,点击确认框以外的区域即可关闭

何时使用

  • 需要用户进行二次确认、需要给用户展示反馈信息时;
  • 不会造成严重后果的二次确认场景。

Form 表单校验提示

何时使用

  • 用户输入的内容不符合字段或表单的要求;
  • 必填字段未填写。

定义

对话框是一种临时窗口,通知用户需要关注的信息或需要获得用户响应时,在页面中打开一个对话框承载相应的信息及操作

何时使用

  • 需要展示操作反馈或提示信息;
  • 需要填写或展示某些信息,但不方便中断当前流程时;
  • 对于脱离当前页面内容的独立线程,内容较少时也可以使用对话框。

Page 落地页

何时使用

  • 长流程表单结束后提供结果反馈
  • 需要展示失败详情

反馈方式

行为反馈

页面中可进行操作的元素在用户操作之后应该提供行为反馈,例如 hover、点击、拖拽动作、复制信息、删除等,帮助用户增强掌控感,比如上传组件拖拽反馈。

对于较为敏感的操作,需要二次确认的反馈,建议使用气泡确认,比如删除数据。

过程反馈

用户进行操作后如果后台处理需要一定时间,需要给用户提供过程反馈,减少用户等待的焦虑感。处理时间非常短的可以忽略,需要较长时间的可分为短时间反馈和长时间反馈:

短时间过程反馈

指几秒就可以处理完的操作,建议使用短时间反馈,直接在组件上进行反馈。

较短时间的反馈方式通常出现在会触发需要时间处理过程的控件/组件上,例如按钮、开关;或者出现在表格、表单等承载处理结果的组件中,常见场景如下所示:

场景 1:按钮/开关上的过程反馈,显示 loading 动画

场景 2:表格中的过程反馈

场景 3:表单中的过程反馈

长时间过程反馈

指需要几十秒甚至更长时间才能处理完的操作,最好能够显示进度,若前端无法拉取到进度,建议提供大致时长预估且支持异步操作。

长时间的处理过程分为“处理时可以异步操作”和“处理时不能异步操作”两种

  • 在处理时可以异步操作的情况下,需要保证用户去到其他页面也能了解到操作结果
  • 在处理过程中不能进行异步操作时,这种情况下最好提供取消的途径
  • 如果可以最好告诉用户处理进度

场景 1:对于有单独页面承载的功能操作需要长时间处理时,使用下方样式展示:

在处理时可以做其他操作,需要保证在其他页面也能了解到操作的结果,可以使用消息提示承载进度和操作结果。

对于某些需要长时间处理的操作,但又没有单独的页面承载时,使用右上角的 loading 提示,用户可以手动关闭。

场景 2:在处理时不可以异步操作,建议给用户提供取消操作的途径。

结果反馈

用户操作后无法直接看出操作结果,或还需要有进一步引导的时候,需要给用户提供反馈结果,帮助用户了解产生的结果,并了解下一步应该如何操作,能够直接看到操作结果时,不需要提供结果反馈,例如删除操作、开关操作等。

就近反馈

在页面中进行的局部操作,可以在局部操作附近就近反馈,例如复制操作、输入框反馈等。

后台管理系统页面多以表单为主,且表单结构复杂冗长,对于表单的信息反馈需要做到及时且准确,因此,表单多采用就近反馈。

局部的表单操作,在表单组件离开 focus 态时立即判断输入是否合法,如果不合法,则立即在组件下方反馈错误提示。

全局反馈

会对全局页面产生影响的操作,反馈可以用右上角的全局反馈条进行反馈,全局反馈条有自动消失和手动关闭两种

操作后对整个页面会有影响的操作,结果反馈建议使用全局反馈来反馈

场景 1:反馈结果较简单,且没有更多信息/操作的入口时,使用 message,4.5s 后自动消失。

场景 2:反馈结果需要更多的解释,或包含下一步操作入口时,使用需要手动关闭的 notification。

错误提示建议都使用手动关闭的提示条,且提供错误更详细的原因说明入口。

场景 3:反馈结果需要用户关注到,如网络异常或者有服务器过期等,建议使用 alert。

弹窗反馈

对于操作后反馈内容多且内容必须让客户看到,或者还有下一步操作指引时,建议使用弹窗反馈结果。

弹框反馈的主体是操作行为,对于操作后反馈内容多且内容必须让客户看到,或者还有下一步操作指引时,建议使用弹窗反馈结果。

弹窗反馈是后台管理系统反馈机制中最常用的反馈方式,因其阻断式的反馈效果能够有效的传递需要用户关注的信息,但注意不要轻易使用弹窗,更要避免二次弹窗的使用。

弹窗容易打断用户在执行复杂任务时的心流,若不是非常高危的提示,可以考虑使用 alert 等警示效果明显的非模态反馈方式。

落地页反馈

用于某个任务流结束后的结果反馈,且用户非常关注此任务的结果时,建议使用落地页反馈结果。

独占式落地页反馈的主体是操作流程,是种强度较高的反馈方式,通常用在长流程步骤表单的最后告知用户操作结果需要展示较复杂的补充信息,例如配置信息详情、购买流程结束后的购买结果反馈等。