TOB产品设计-弹窗

由于B端产品的复杂多样，这里讨论的不仅限于弹窗这一种控件的设计，而是一个“泛弹窗” 的话题。

从宏观上讲，B端设计中信息展示的控件可以分为3类：弹窗、抽屉、新建页。

在这3种展示形式中，我们需要明白它们分别是什么（样式）、有哪些（功能）、在什么场景中使用（使用方式）、以及在优缺点和适应的不同业务，这样可以更好的为我们设计服务。

弹窗定义：它可以告知用户 关键的信息，需要用户去做决定。弹窗越来越广泛地被应用于软件、网页、以及移动设备中。它可以保留用户当前进程的情况下，指引用户完成一个特定的操作。

弹窗功能：弹窗是一种中断用户当前操作井对当前信息or动作进行补充、或者对当前操作进行强制反馈的交互形式。一般需要用户进行强交互完成预订动作。（备注：强交互是指想要完成用户正常流程时必须先完成当前交互的操作后才继续正常流程）

一、弹窗的分类

在弹窗的交互形式上，它主要分为模态弹窗与非模态弹窗两种形式（B端工作中碰到的模态类型大多数都属于模态层。）

模态弹窗：是位于浏览器界面的核心区城，需要用户对它做出相应交互，模态才会消失。而弹窗会因为自身的吸引程度、停留时间。信息量承载多少被划分为多种弹窗类型进行区分，常见的弹窗分别为：对话弹窗、内嵌表单弹窗、分步表单弹窗、文件选择弹窗、复杂信息展示。

非模态弹窗：与模态完全相反，它更轻量化，不会打扰到用户的正第使用。通常这类弹窗只会在屏幕上短暂停留，几秒就会消失，也因此用户感受不到他的存在。（缺点：展示时间较短，常见的类型有：通知提醒、全局提示、警告提示、泡卡片、文字提示。）

二、模态弹窗-弹窗的拆解

弹窗部分进行拆解，弹窗在宏观上来看一般包含模态层、关闭入口以及弹窗主体

模态层：通常是一个半透明的黑色，将整个页面进行遮盖，使得用户在使用弹窗或其他控件时会更加专注。同时采用半透明的设计，能通过半透明的模态层让用户了解到自己井没有跳出当前页面，用户心理不会有很大跳跃。

关闭入口：作为用户退出的必要途径，在关闭入口的设计中，需要注意以下几点：

一个体验良好的弹窗需要提供多个关闭入口，让用户进行退出。一方面弹窗是打断用户正常流程的操作，而为了不让用户感到反感需要提出多个入口；另一方面用户更能够通过多个入口的设计，快速返回到正常操作流程，降低用户不必要的流失。我一共总结有四种入口途径，方便大家在设计时对照查看是否做到。

关闭路径NO.1：关闭按钮

关闭按钮是最为常规的操作，主要是每一个用户对于它都足够的熱悉。

关闭路径NO.2：取消按钮

取消按钮一般和确定按钮成组出现，取消按钮的出现主要是为了辅佐确定按钮，当用户看到确定井想要反悔时，能够给他提供给他相应的回退机制。

关闭路径NO.3：点击模态层

用户可以点击模态层，进行取消。因为用户点击模态层，默认是想要回到模态层下方的界面中，这个入口就显得尤为必要。通常点击模态窗是用户最方便的退出方式，能够使用户快速退出。

入口四：Esc键

在B端产品中，调用键盛进行操作优化，是一个不可忽视的用户爽点。

弹窗主体：

弹窗的主体，因弹窗的类型不同会有所增加OR减少，视应用场景决定。

1、标题

使用简短的语言告诉用户功能，如果是对话弹窗，一般是疑问句，例如：“是否删除列表？“；若是其他具有特定功能的弹窗，一般为动词短语，例如：〝别除客户、查看详情”，一般不可删除。

2、关闭Icon

提供弹窗的关闭路径

3、内容区

弹窗中，主要是对使用弹窗后产生的结果进行具体描述，或者新建、信息展示等；以及你操作可能造成的结果的说明

4、边距

边距是必须要保留的，合适是边距可以保证整体视觉的重心不偏移

5、按钮组

按钮选择主要是对弹窗交互进行的结果，一般是相对立的两个操作进行出现，例如：“确定 / 取消、保存/ 取消等．”

三、非模态弹窗

3.1. 通知提示 

通常在页面右上角或页面中间，显示通知提醒信息，给用户进行较重的提醒。经常用于系统主动推送以及消息提醒。通知用户对信息进行查看，同时可让用户进行跳转查看，方便用户进行快速使用。

3.2.全局提示

全局提示是希望不中断用户正常操作的前提下，显示一条简短的消息。全局提示一般在整个页面居中的位置，会展示 3-5 秒钟或者用户进行点击关闭。

3.3.警告

提醒用户需要立即处理的错误，提示方式与全局提示类似，但是与全局提示不同的是，警告提示为常驻展示，需要用户进行手动关闭，但并不会打断用户操作。同时在设计形式上，也需要与全局提示有所区别，建议采取背景颜色进行对比。

3.4.气泡卡片

是对当前元素进行相关操作或描述，可根据用户的操作行为进行展示。通常可以通过点击、鼠标 Hover进行触发，气泡卡片与 Tootip 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。

3.5.文字提示Tooltip 

是简洁版的气泡卡片，一般提示以文字为主。

重要提示优先级按量级从重到轻排序：通知提醒框 ＞警告提示 ＞全局提示 ＞气泡卡片＞文字提示

备注：抽屉、和页面及的本文不作过多说明

四、弹窗尺寸设计

弹窗宽度：

目前市面上的屏幕分辨率占比1920x1080 还是占据主导，考虑到适配问题我们以1440X900来定义，所以一般将弹窗宽度设置到 1080px 以内，基本能满足日常需求。

弹窗高度：

一般浏览器输入框 ＋ 标签栏的高度为 80px，底部系统工具栏高度为 40px；所以页面的高度900p×-80px-40px=780px；对于页面中自适应的情况所以上需留出固定安全距离，所以弹窗的最大高度建议小680px。

弹窗类型：

弹窗根据内容量，进行宽度的调整，常见的弹窗尺寸分类共有四种。分别为：小、中、大、大~全屏（大~全屏：大弹窗信息量过多时提供大弹窗转全屏，在B端的场景下更加方便用户操作）

写在最后：

弹窗在B端场景中，应用非常广泛，大家可以透过弹窗的思考方式去思考关于整个 B 端控件层面的信息展现问题。码字不易，觉得还不错的请点个赞/关注，是最大鼓历。

Powered by Froala Editor