消息通知在我们设计的过程当中非常重要,因为它作为系统与用户之间沟通的桥梁,能够帮助我们提示用户:“目前的操作状态、系统的公告、用户之间的互动内容”,而不同的消息内容,我们需要使用不同的消息通知组件来进行反馈,比如用户与用户之间的互动应该采取什么互动方式?本文就来说说消息通知组件的具体使用。

上期回顾:

一、消息通知的定义

具体有哪些组件是消息通知

我查阅了各大设计系统[1],发现它们对于消息通知的定义都叫做“反馈”,即信息反馈给用户的形式。而在其反馈的组件当中,会包含有:全局提示(Message)、通知提醒框(Modal)、气泡确认框(Popcomfirm)、对话框(Modal)、抽屉(Drawer)、进度条(Progress)、结果页(Result)、加载中(Spin)、骨架屏(Skeleton)

但由于组件太多,我们把系统当中用到最多的 消息通知 部分单独拿出来分析,剩余部分则放在最后去做解析。

5000字干货!超全面的B端设计指南:消息通知

对于反馈的内容来说,系统当中会存在 正面、负面、普通 三种不同的反馈情绪,比如

你的账号已经过期,对于系统来说他就会提供一个 负面 的消息通知组件,因此我们会对消息通知的类型进行一个简单的分类:

正向主要包含有:全局提示(Message)、通知提醒框(Modal)、气泡确认框(Popcomfirm)

负向主要包含有:警告提示(Alert )、对话框(Modal)、通知提醒框(Modal)

5000字干货!超全面的B端设计指南:消息通知

当然大家一定要记住,关于 正向 和 负向 的类型,它并不是绝对的,只是大多数情况下它的情绪与这个相关。

[1]查阅的设计系统包含:Element、Arco、Ant、Lightning...

二、消息通知的设计

关于消息通知究竟有哪些

为了让所有同学能够快速直接的了解消息通知的设计形式,我们尝试去“测评”,将目前的所有消息通知组件,然后按照:「操作干扰度、反馈消息的强弱、出现位置」三个维度来对消息通知进行分类,从而得出消息通知设计当中,它们的差别究竟在哪?

5000字干货!超全面的B端设计指南:消息通知

信息展示量:

信息展示量表示组件能够承载多少信息内容。因为不同的组件它们的使用环境本身并不相同,我们可以通过原子的划分大致归纳为:图标、文本、链接、按钮、容器差别。

操作干扰度:

操作干扰度主要是 对用户当中操作会不会产生相应干扰,比如一个 全局提示和一个对话框,它们对于用户的影响程度是完全不一样的,因此会使用干扰度进行判断。当然操作干扰度这个维度过于主观,我们又将其细分为:持续时间、是否阻断、信息来源 三个方面。

持续时间:用于表示这个组件在页面当中究竟需要停留多久时间,这样能够帮助我们判断其干扰程度。

是否阻断:页面当中是否会出现 蒙层 用于阻断用户注意力。这也是判断干扰程度的重要指标。

信息来源:这条内容主要来自哪里,分为 系统、用户 两种来源方式。

出现位置:

这个组件究竟会在哪一个地方出现,主要考虑它们的呼出方式,以及对应呈现内容,能够帮助我们快速理解。

1. 全局提示丨 Message

全局提示在用户执行操作时,不会中断当前用户操作的前提下,通知提示一条简短的消息。

它在整个 B 端系统当中使用的频率非常的高,比如:我们在填写一个表单过后,就会收到全局提示;修改完一个信息过后,会收到一个全局提示。

5000字干货!超全面的B端设计指南:消息通知

5000字干货!超全面的B端设计指南:消息通知

而它在使用过程当中会有以下几个特点:

信息展示量:

全局提示只会展示:图标、容器、提示文字,相对来说它展示的内容较少,是一个非常简单的组件类型。

5000字干货!超全面的B端设计指南:消息通知

在实际工作当中,因为它内容量少,更多提示用户的便是正确的操作,比如 已添加成功、编辑成功、保存成功 等正向情绪。

操作干扰度:

关于干扰程度,我们刚才讲到一共会有三个判断依据,因此我就从这三个方面来去判断具体提示的干扰程度。

  1. 持续时间:非常驻,一般 3-5s 即可消失
  2. 是否阻断:否
  3. 信息来源:系统收到用户操作后的提醒

出现位置:

全局提示因为其内容较少(图标+文字),因此很多时候需要出现在较为显眼的位置。

我们在使用全局提示的时候,基本上都会出现在页面顶部居中的位置,通常距离顶部的距离为 40-60px。这个位置大概率是顶部导航与页面内容的交汇处,不会影响用户的使用。

注意事项:

关于注意事项,其实就是我们在实际工作当中,还需要去考虑的一些小知识点,我们将其汇总到此:

① 全局提示一共会有五种样式类型,分为是:指南提示(Info)、普通提示(Normal)、成功提示(Success)、警示提示( Warning)、失败提示( Error)。

5000字干货!超全面的B端设计指南:消息通知

这时候,认真的同学可能会问:老师,你刚才讲了全局提示不是表达 正面 的结果吗?怎么还会出现 警告、失败等信息呢?

原因主要是失败也要分很多种,比如在一些小的操作时,你确实不能提供对应的功能,就可以展示警告信息:

5000字干货!超全面的B端设计指南:消息通知

② 全局提示“一般”不会存在关闭入口,因为它可以自动消失,不提供给用户关闭入口还会让他知道,这个通知本身就会自动消失。所以很多情况下可以忽略关闭入口这个选择。

③ 关于它的停留时间,我们可以在设计系统当中的 API 里进行自定义,通常 3s - 5s 即可。在去做组件时,一定要去看组件的对应开发文档,了解这个组件究竟支持哪些自定义功能(拒绝被开发忽悠)

5000字干货!超全面的B端设计指南:消息通知

④ 全局提示在短时间内,可以提升多次,多次提示时,按照先后顺序从上往下进行排列

5000字干货!超全面的B端设计指南:消息通知

2. 警告提示丨 Alert

警告提示常驻于页面中,用于表示持续性的提示信息。多用于危险、警告、紧急 等负面情绪当中。

在实际工作当中,因为它的特殊性,一般会用在 系统、全局 性的危险通知上。比如你的订阅时间已超时、账号团队即将解散 等通知上。

5000字干货!超全面的B端设计指南:消息通知

信息展示量:

这里警告提示会比全局提示展示的信息更多,它主要包含:图标、提示文字、辅助文字、按钮、关闭入口

5000字干货!超全面的B端设计指南:消息通知

操作干扰度:

  1. 持续时间:常驻,需用户点击关闭后才会消失
  2. 是否阻断:否
  3. 信息来源:系统收到用户操作后的提醒

警告提示的常用场景:多用于警告、危险等情况,需要提醒用户,引起他们的注意。比如提示欠费、需要充值

出现位置:

因为其需要常驻,所以通常在设计时候,我们会将它放在模块与模块之间,进行展示。这样既不会影响到其他内容呈现,同时自己又能常驻。

注意事项:

  1. 全局提示主要呈现 警告、紧急的消息通知,如果想通知一些普通消息,完全可以使用 通知提醒框 来进行提示。
  2. 全局提示主要是在 模块与模块之间 去做呈现。
3. 通知提醒框丨 Notification

通知提醒框在页面当中,主要是以互动的消息为主,全局展示通知提醒,将信息及时有效的传达给用户。在实际的工作当中, 通知提醒框主要用来提示互动等有价值的信息。

信息展示量:

这里通知提示框主要包含:标题、辅助文字、按钮、关闭入口

5000字干货!超全面的B端设计指南:消息通知

操作干扰度:

  1. 持续时间:常驻 / 3-5s 消失
  2. 是否阻断:否
  3. 信息来源:用户与用户之间的互动、系统通知

出现位置:

在整个通知提醒框的使用过程中,因为它本身就是与用户之间的互动所产生的,而这种活动就如同在桌面端当中你收到的消息,我们会将其归纳到右上角的位置去做呈现。这样既不会太影响用户,同时也能够保证消息通知的及时性。

4. 气泡确认框丨 Popconfirm

气泡确认框是我们在工作当中使用频率相对较低的组件。它能够通过组件当中的卡片,完成与用户的快捷对话,但是由于在实际的场景当中,对话确认是需要强提示的方式,因此总感觉气泡确认框在它的使用上,有着些许矛盾。气泡卡片轻量、不易干扰用户,但是对话框要求阻断意味更强。

信息展示量:

首先我们从信息展示量来说,气泡确认框主要由 触发器、气泡卡片、图标、文本、按钮操作,五部分组成。

5000字干货!超全面的B端设计指南:消息通知

在设计时需要格外注意,气泡确认框本身不能够过于复杂,否则在一个气泡卡片当中,就显得格外拥挤。如果信息过多,就考虑使用 对话框 来进行呈现与优化。

5000字干货!超全面的B端设计指南:消息通知

操作干扰度

  1. 持续时间:用户点击触发器后才能展示,操作过后即可消失。
  2. 是否阻断:否(气泡卡片不会存在阻断的情况)
  3. 出现位置:跟随触发器位置进行呼出,通常会在触发器的上方来进行展示,如果触发器位置靠近边缘,则考虑移动到其他位置进行调整。

5000字干货!超全面的B端设计指南:消息通知

5. 对话框丨 Modal

对话框在整个系统当中非常重要,因为你会发现在整个系统当中或多或少都会有它的身影,比如一个常见的数据录入表单,它的整体感觉和对话框较为类似;又或者是 一个穿梭框,你会发现也有异曲同工之处,因此我们先来看一下对话框究竟是什么?

5000字干货!超全面的B端设计指南:消息通知

对话框主要用于信息确认与信息录入,使用对话框会中断用户当前的任务流程,同时会对用户造成些许干扰,因此在使用的时候,我们都需要非常谨慎。

操作干扰度:

  1. 持续时间:常驻,需要操作完信息后,点击提交才会消失
  2. 是否阻断:是,通过黑色蒙层的方式,让用户聚焦于表单内部
  3. 信息来源:根据预设的内容,进行展示
  4. 出现位置:位于整个页面的中部,主要目的能够让用户聚焦于内容,减少分心。因为对话框的出现,用户必须操作完对应信息过后才能够进入到下一个环节, 因此它在整个流程当中非常重要。

对话框的类型:

在整个对话框的展示当中,你会发现它主要分为三部分,分别是 Header 标题位、Content 内容部分、Footer 底部操作位,而在这三个部分所组成的内容当中。

5000字干货!超全面的B端设计指南:消息通知

其中由于它的用途不同,我们可以将其简单的分类为:确认对话框、消息提示对话框、功能业务对话框

5000字干货!超全面的B端设计指南:消息通知

确认对话框:展示对内容信息的二次确认,这样能够减少用户的误操作,降低操作风险。主要差别是内容部分以操作过程会出现的问题为主来进行展示。其本质就是一个二次确认的过程,需要用户去做出判断,它要比 气泡确认框 更加重要,阻断性也更强。

消息提示对话框:展示对应的状态提示,比如当你删除掉一个知识库这种重要操作时,我可以通过消息提示对话框来将成功或者失败的消息展示给你,并且也能够让用户知道问题究竟出现在哪里。其本质就是一个消息状态通知,只是更为重要。

功能业务对话框:将 Content 内容部分进行优化,用于展示更多复杂信息,比如 各种复杂信息录入(输入框、单选、多选...)以及各种信息呈现,它能够通过功能业务对话框,去完成很多业务要求。同时使用弹窗的形式,能够帮助我们不脱离当前业务的前提下完成更多操作。当然在实际工作当中你会发现,它能够承载的内容是非常多的,比如步骤条、Tab 标签、各种选择录入,因此我认为这种类型的对话框本质上就是一个 容器,可以去承载很多内容。

更多注意事项就是弹窗部分的内容,比如尺寸宽度究竟是多少、高度为多少,是否有蒙层 等等... 如果不了解,可以去查看弹窗这篇文章。

三、组件的差异对比

了解组件的差别

为了让同学们能够快速了解这几个组件之间的差别,我们尝试把刚才提到的这么多组件进行相应的对比,分析一下其中差异点。

1. 全局提示与警告提示

首先这两个组件在设计样式上是非常相似的,并且本身使用环境差距不大,因此很容易把这两个组件进行混淆。其实我们可以从多个方面去进行对比区分:

  1. 全局提示不建议使用关闭入口
  2. 全局提示优先级更低,主要提示非紧急通知;警告提示则提示更多紧急需要用户立马操作的通知
  3. 全局提示会停留 3-5s 后自动消失;警告提示则需要操作后消失

2. 气泡确认框与对话框之间的差别

这两个组件之间,同为用户二次确认的组件类型,但在实际的业务当中有着重要级之间的关系。

  1. 气泡确认框相对适合阻断流程意味不强的情况,它更为轻量。对话框反之
  2. 很多时候气泡确认框会成为 对话框 的二次确认方式,这样能够避免出现弹窗套弹窗的尴尬局面

四、消息通知的优化

了解除了传统组件之外的通知方式

我们在去理解消息通知的时候,往往不能够只去看待消息通知本身的组件形式,最终的目的一定是让用户能够更快速、直观的了解到他所关心的内容,因此在设计上,我们可以进行对应的优化。

1. 声音提示

因为我们大多数 B 端产品都是采取网页端的形式进行内容呈现,因此往往会忽略通知提示当中的声音部分。虽然我们在网页端,但是也能够通过播放声音 + 页签的信息通知(你有一个新消息,注意查看),让用户知道他有重要信息需要处理,这样也能间接达到目的。

5000字干货!超全面的B端设计指南:消息通知

2. 多端联动

大多数 B 端产品,都会遇到系统当中主要都是聚焦于桌面端,移动端的体验几乎为零。因为很多产品目前的移动端都是使用小程序解决,那通知就变得更加困难,这时候其实可以尝试用一些通用方式打通设备限制。比如我们可以尝试发送 微信订阅号 推送系统通知,这样既能够保证用户日常的使用习惯,同时进行多设备间的联动。

5000字干货!超全面的B端设计指南:消息通知

再举一个例子,比如在日历模块,其实就可以通过日历本身的 CalDAV 帐户,来实现多设备间的日历联动,这样就能够保证 桌面端不是一个孤岛~

5000字干货!超全面的B端设计指南:消息通知

3. 通知分类

通知本身就是高触发的一个场景,就类似于手机的短信一样,会存在大量的冗余信息。因此我们再去设计通知的时候,考虑到不同的通知类型一定要采取不同的处理办法。

而想要在工作当中做好这件事,必须先将系统当中所有的通知信息进行整理,从而将其进行分类,分类规则大体遵循:用户之间互动>用户系统互动>系统系统互动。

因此作为 B 端设计师,组件之间的差异一定要重视起来。

结尾

消息通知就像是我们用户与系统、用户与用户之间的一个桥梁,而各种消息通知能够让我们用户知道操作是否正确。也正是很多设计系统讲的原则:操作之后有反馈,你的反馈内容是什么,就会直接决定我是否敢于去操作。

欢迎关注作者的微信公众号: CE青年Youthce

5000字干货!超全面的B端设计指南:消息通知

点赞 28
收藏 32

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。