【to B管理端】消息反馈设计盘点

to B管理端的组件设计专辑开讲啦，以下是专辑目录：

1、to B管理端-消息反馈设计
2、to B管理端-表格设计
3、to B管理端-表单设计
...陆续增加

本文章目录：

• 为什么需要消息反馈
• 消息反馈的类型
• 组件类型和适用场景

一、为什么需要消息反馈？

在用户使用系统的过程中，给予用户适当的消息反馈可以：

1、让用户知道自己当前处于哪种状态

2、引导用户接下来要做什么

3、提示用户重要的系统消息

二、消息反馈的类型

消息反馈按照消息的操作方角度分类，可分为主动消息和被动消息，主动消息是用户主动操作后，系统提示的消息，比如toolTip、toast、dialog。被动消息是用户被动提醒的系统消息，比如平台公告、站内信。

三、组件类型和适用场景

备注：以下组件图均来自element ui

1、Tooltip 文字提示

常用于鼠标hover时的提示信息，这是一种很轻量的提示。

2、Popover 弹出框

Popover组件类似Tooltip组件，但是Popover组件的提示内容更丰富一些，可以嵌套些标题、表格之类的

3、Popconfirm 气泡确认框

常用于轻量的二次确认

4、Dialog 对话框

常用于比较强的二次确认弹框提示、或者展示一段比较长的消息，比如下面的表格

5、Alert 提示

常用于展示系统的全局消息，比如平台顶部展示全局平台公告、某功能旁边展示使用的注意事项，Alert还可以加关闭按钮，让用户有选择性的关闭这些消息。

6、Loading 加载

常用于数据加载中提示、操作中提示，Loading的文案可按照具体场景定义

7、Message 消息提示

常用于用户主动操作后的消息提示，比如提交表单，Message在悬浮几秒后，自动消失。

可详细分为操作成功提示、操作告警提示、操作失败提示

8、MessageBox 弹框

常用于表单提交内容的对话框

9、Notification 通知

悬浮出现在页面角落，显示全局的通知提醒消息，这是一种比较强的提示。常用于系统推送的重要消息提示，比如服务快到期，服务告警。

10、红点提示

常用于系统推送消息的提示，这是一种比较弱的提示

11、站内信消息框

常用于系统推送消息列表的简短展示

12、表单内的错误提示

常用于输入框未填、选择框未选状态下的提示。在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。