B端产品设计中的模态弹框和非模态弹框丨DTinsight UED

数栈研习社 2021-08-31

440

作者｜阿宅

编辑｜雨濛

本文1537字阅读约5分钟

B端（PC）产品中，弹框的作用往往是用户处理事物或进行操作反馈时，不希望离开当前页面以至于打断工作流程，因而在页面中打开的一个浮层，以便承接用户相应的操作。

我们日常所接触到的弹框有很多种，比如对话框、气泡、抽屉、全局提示等等都称之为弹框，弹框的整个概念就较为笼统。本文将弹框分为模态弹框和非模态弹框，以此来展现B端产品中的一个弹框体系。

1.模态弹框

模态弹框具有一定的强制性，会打断用户当前工作流程，用户必须在弹框上进行一定的操作反馈才能进行下一步和回到父级页面，并且操作过程中将无法使用其他功能。

模态弹框属于重量级操作反馈，在B端产品中，我们最常见的模态弹框就是带有遮罩层的弹出对话框，其包含的使用场景有删除、编辑、修改、新建……在一些具有不可逆和破坏性的操作中，我们有必要让用户进行“二次确认”，例如删除操作等。

对话框一般用于用户进行重要或有一定风险的操作，用户需要根据提示来进行判断。一般出现在屏幕的中间位置，会对界面的主要内容造成遮挡。对话框的设计样式较多，既有二次确认类，也有信息录入类。

（删除对话框）

（确认对话框）

（步骤类对话框）

综上所述，我们可以明显的看到模态弹框的优缺点：

· 优点：能很好的把控用户的视觉焦点，捕捉用户操作习惯

· 缺点：打断用户工作流程，使其无法使用其余功能

2.非模态弹框

非模态弹框和模态弹框最大的区别就是不具有强制性，也不会出现背景遮罩层，用户不用先处理此类弹框也可以对其他功能进行操作。

在B端产品中，常见的非模态弹框有警告提示、全局提示、通知提醒框等，这些弹框停留一段时间后会自己消失。相对模态弹框来说，非模态弹框属于轻量级操作反馈，不会对用户的工作流程有太大的干扰。

（全局提示）

1.模态和非模态的区分难易度

B端产品由于显示设备的屏幕空间较大，弹框的内容区域不会占据整体产品太大的可视面积，他们会叠在父级页面上面，所以B端中模态和非模态弹框可以轻松识别。然而，C端产品设备屏幕空间有限，这也是为什么许多弹框在C端产品中占据全屏的原因。它们不在保持父级页面可见，在C端中模态和非模态弹框更难区分。

· B端的模态和非模态弹框：

图一模态必须在中间弹框中进行操作再回到主界面，图二非模态红色主界面区域可随意点击。

· C端的模态和非模态弹框：

图一模态需点击关闭按钮才能回到主界面，图二非模态底部导航栏可随意切换。两者都属于全屏弹框，比较难区分模态和非模态。

2.模态弹框种类

由于展示设备的空间存在很大的差距，B端产品中模态弹框的种类少于C端产品，C端产品对模态弹框的依赖程度也大于B端。

· B端最常见模态弹框：对话框、抽屉浮框

· C端常见模态弹框：对话框、抽屉、动作栏、营销活动…

3.模态弹框内容的复杂程度

B端产品的用户群体较固定，操作的目的性虽明确但也复杂，弹框在一个工作流程中需要承担承上启下的作用，所以某些弹框内容会多且杂。而在C端中，由于产品的用户群体较广，对操作的要求会相对简单些，弹框内容也会更加简明。

以上我们了解了怎么区分弹框和B、C端之间的弹框差异化，接下来我们来看下弹框在数栈产品中的实际运用情况以及可优化的点。

目前在数栈中我们将弹框按照组件类别进行区分，分别为对话框、抽屉、气泡确认框、气泡卡片、气泡提示框、警告提示、全局提示、通知提醒框。如下图。

其中，模态弹框的主要表现形式为对话框，抽屉在我们的产品中进行了改良由模态弹框降为轻量级的非模态，其他类型的弹框则均为非模态弹框。

在真实的使用场景中，我们发现抽屉这一类被降级的非模态弹框，需要根据其发挥的作用分为两种状态。第一种为纯展示类抽屉，保留顶部菜单栏的交互，不用担心对其他功能的误触；第二种为操作类抽屉弹框，背景可优化为全局遮罩，用户只能在抽屉中进行交互动作。如下图。

由于在现在的交互设计中，各种弹框的命名上并没有一个详细统一的规范，跨平台间对弹框的命名会有一定的差异化，本文中所展示的模态与非模态弹框的几种分类也仅仅是自己的理解和来自其他文献的感想，希望能对大家有一定的帮助。

End

作|者|介|绍

阿宅-袋鼠云数栈用户体验设计师

做得了设计，撸得了插画，集“智慧与美貌”于一身的用户体验设计师。

更多技术交流方式

想面对面技术交流？想看技术大佬直播？扫码加入钉钉群“袋鼠云开源框架技术交流群”（群号：30537511）

想体验更多数栈开源项目？在Github社区或Gitee社区搜索“FlinkX”开源项目

开源项目地址

Github：https://github.com/DTStack/flinkx

Gitee：https://gitee.com/dtstack_dev_0/flinkx

点击“阅读原文”，一键到达FlinkX开源项目！

模态对话框 ued

文章转载自数栈研习社，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

评论