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

2021-11-02 14:52:25 浏览数 (1)

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

代码语言:javascript复制
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、表单内的错误提示

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

0 人点赞