B端的弹窗规范应该怎么做？

8月 5, 2021 发表于: 视觉设计. 评论

前言：弹窗是交互展示内容的重要方式，在响应式设计和多平台统一的趋势下，结合不同的场景和目的，弹窗类型和用法千差万别。今天本文将就弹窗的设计做一个统一的整理和说明，帮助设计师们理解弹窗设计。

最近做内网时涉及到弹窗问题，我们来一起讨论和总结下。

弹窗，是常用的一种展示内容的方式，在网页、软件、系统、APP中非常常见。在响应式设计和多平台统一的趋势下，，结合不同的场景和目的，弹窗类型和用法千差万别，今天咱们就专门针对弹窗设计做个整理和说明，帮助大家更容易理解它。

看完本篇文章，你会学到以下内容：

1. 什么是弹窗？
2. 弹窗都有哪些分类？他们各自有什么特点？什么场景用什么类型的弹窗？
3. 弹窗的尺寸如何定？
4. 弹窗设计时，需要考虑什么？

一，什么是弹窗？

弹窗是一种交互方式，也叫弹框，主要功能是用来提醒用户做决定，或者解决某项任务的。

弹窗主要是让用户能更聚焦，不被其他事物干扰，且不用离开当前页面，能快捷的完成需要完成的任务。弹窗早已不像以前那种把一堆内容随便罗列出来了，而是承载着越来越多的功能性需求。所以弹框设计是值得每个设计师重点关注的。

一般我们常看到的弹窗是由：一个蒙版，一个主体及一个关闭入口，组成的。

二，弹窗都有哪些分类？他们各自有什么特点？什么场景用什么类型的弹窗？

弹窗在交互形式上，主要分为两种形式：模态弹窗和非模态弹窗。

模态弹窗：

模态弹窗的特点是当它出现时，用户需要对它作出回应，它是属于可交互的。常见的种类有 “对话框（Dialog）”，“抽屉（Drawer）”等。模态弹窗的视觉层级非常高，很好的吸引用户的注意，但它的出现是打断用户当前操作的它限制了用户只能在该区域内操作，用户界面中其它内容是不可操作的，它限制了用户使用界面的自由权，属于强弹窗。所以会导致用户体验不是特别好。这里就需要设计师在设计时格外注意，不建议使用的太频繁使用。

非模态弹窗：

非模态弹窗与模态弹窗正好相反，它从出现到停留消失的时间很短暂，短到用户不需要对它作出任何反映，大约3-5秒，它基本上不影响用户体验，用户可以不需要作回应，所以它是一种轻量级的弱弹窗。（但非模态弹窗中，也有部分需要操作行为动作才会消失。例如，“文字提示”类的弹窗，需要用户鼠标悬停在某个焦点上才会出现，移开鼠标“文字提示”才消失。用户既可以在目标摊床上操作，也可以随时在主界面上操作。

常见的种类有“文字提示（Tooltip）”：“警示弹窗（Alter）”，“气泡（Popover）”、、“通知提示（Notification）”、、“气泡确认框（Popconfirm）”、“全局提示（Message）”、“警告提示（Alert）”，浮层（Popover/Popup）等。

简单讲，模态弹窗就是当前必须完成后，才能继续下一步；非模态弹窗随时可关闭，不影响当前任务。

以弹窗功能和用途方面来定义的话，弹窗可分为：任务、内容反馈、信息提醒三大类。

模态弹窗一般是属于任务类型的。

非模态弹窗一般大部分都是内容反馈和信息提示，类似“文字提示”、“通知提示”、“全局提示”，属于信息反馈类。

下面我们来分别看看任务（模态弹窗）、内容反馈（非模态弹窗）、信息提醒（非模态弹窗）三大类区别

1，任务（模态弹窗）

在页面中，遇到复杂的扩展功能时，会经常使用“模态弹窗“，即：“对话框”、“抽屉”两种类型,他们除了有标题、按钮之外，通常还会有一些任务表单之类的内容。

对话弹窗一般分为 信息下放 和 信息提交 两大类。

对话框 / 抽屉（模态弹窗）

在什么情况下需要使用模态弹窗？

针对信息量比较大（一页显示不全，需要有滚动条），或者一些比较复杂的任务，还会有一些更多的延展性操作或者选择任务，例如很常见的场景：“登录”、“审核”、“申请”、“编辑”……这些相对复杂的任务和操作，它除了标题和文字、说明、操作按钮之外，通常还会有一些复杂的可编辑表单，以及点击、选择、拖动等操作；当然类似选择器、输入验证码、高级搜索、分享、操作权限确认、用户反馈等一些单一、简单操作的简单任务，也基本上都建议使用模态的弹窗。其中使用对话框形式的弹窗居多。这样可以让用户更为聚焦，减少可能产生的误操作，专心完成需要完成的任务。

模态弹窗的对话框结构和功能，大致由标题，核心内容，操作按钮，关闭等元素组成，例图“

模态弹窗的常见抽屉式弹窗：

而抽屉式的“弹窗”，在表格中出现较多。通常会以侧滑的形式出现，有加遮罩层的，也有不加遮罩层的模态弹窗（不加遮罩层方便方便用户进行对比、参照和检阅相关内容，同时并不会影响用户对界面其他区域的操作）。

与“对话框”对比，“抽屉”在使用场景也有它的优劣势。

优势：“抽屉”的页面空间更大，它能够承载更多的内容、信息，它与主页面亲密度更高；

劣势：“抽屉”的灵活度比较低，比如“对话框”可以根据业务的内容多少去变化它的宽度与高度，而抽屉只能横向/纵向降低尺寸。

所以，“抽屉”适用范围更小，大部分场景下都用在较复杂的表单及字段较多详情页。“抽屉”在Web端的应用中可分为：a.内容展示、b.表单编辑这两大类型（这里就不过多讨论了)。

2，内容反馈和信息提醒（非模态弹窗）

“内容反馈”及“信息提醒”这两种类型很相似，都属于“非模态弹窗”类型。他们存在的意义都是起到及时有效的帮助用户完成某项任务，提高任务的操作效率和可理解程度”。

“内容反馈”是用户在输入信息或操作功能时，系统给出相应的提示出现的内容反馈页面，在设计时，一般会用到“全局提示”、“通知提示”、“气泡确认框”三种类型来反馈消息。它属于“非模态弹窗”类型，出现时，不但不会打断用户的操作，还能明确告知用户反馈结果，帮助用户有效的完成界面中的复杂任务。

“信息提醒”常常用到“文字提示”、“气泡提示”、“警告提示”三种形式展现出来提醒用户。

全局提示/通知提醒（内容反馈）

气泡确认框（信息反馈）/文字提示和气泡提示（信息提醒）

非模态弹窗的全局提示结构和功能大致是由：1.图标、2.提示文本、3.关闭（可选）、4.操作（可选）四部分组成，其中可选部分是否包含可根据实际情况进行配置。

非模态的弹窗，允许用户点击弹窗范围外区域关闭弹窗。目前业内大部分 提示 都采用了Toast来设计。包含：  、更新提示条 、清理缓存 、登录提示、离线提示 、按键引导 、按键引导 、按键引导，输入框旁边的橙色或红色提醒文字等。他们的形式非常多。

弹窗设计，不管是模态还是非模态，只要它出现，都会对用户的体验感有一定影响，所以我们在设计弹窗时，需要根据不同场景选择适合的弹窗样式的同时，一定要注意，千万不能高频率的使用弹窗。

那弹窗的特性大致包含以下几点:

a,轻量型的页面，可以快速回到原来的界面。

b,相对比较独立，与原来的页面互不干扰，完全不影响原来页面的整体布局。

c,比较适合简单的一次性操作就能解决的内容。

所以我们在设计过程中，当遇到某些任务内容，不知道应该给它用弹框，还是用新的页面来展示的时候，就可以根据以上三点特性来分析 ，什么场景适合用什么样的弹窗了，就不难做出决定。

很多任务，只是一些简单的操作的话，就不需要额外增加一个全新的页面来展示它们，这时就可以用弹窗的方式来表达。

有一点特别要注意：发现市面上，目前有不少产品，在对一些普通的字段进行解释说明时，特别喜欢使用带遮罩的模态弹窗，需要用户点击才显示，这种设计是属于不合理的，一定要杜绝。因为像这样简单的解释说明，只需要用非模态弹窗来展现，用户只需要悬停就能快速预览相关内容，还可以快速离开（移开触发区的图标，或点击空白区域）。

但是，如果相关的内容特别多，设计师就需要考虑设计跳转到新的页面展示相关内容，而不是简单使用弹窗了。

在设计时，还需要注意弹窗的设计规范统一性。包含：

视觉的统一性: 颜色，间距，文案风格等。

交互的统一性: 主要操作是放在左边按钮，还是右边按钮；关闭是点击蒙版还是点击“X”图标。

如果觉得比较枯燥的话，还可以从视觉上入手，丰富下任务弹框，比如说有必要的话，结合些微动画，插画等，就会有非常惊艳，让人过目不忘的效果。

三，弹窗的尺寸如何定？

我们在开始设计一个弹窗时, 首先要解决的问题就是确定弹窗的尺寸。

根据「百度数据」提供的主流浏览器分辨率可大致知道，当下比较流行的屏幕分辨率有1024*768,1366*768,1280*800,1280*1024，1440*900,1600*900，1920*1080等。一般使用常见的作为设计稿尺寸都是没问题的，常用的是1920*1080，而我会结合公司具体需求使用1440*900(想把设计稿做成多大,以及如何适配，都需要设计师结合实际情况考虑好)。

因为我们公司用的是AntDesign的框架，而他们的设计语言中提供的一些文件参考是这个尺寸，这也是常用尺寸。设计网页时要考虑好浏览器的分辨率，主流的浏览器有IE,谷歌，火狐，欧朋等。我们需要考虑浏览器的有效可视区域，就是显示内容的区域。比如打开一个网页后，除掉浏览器的工具栏和侧边栏等，真正显示内容的地方，如下图：

我们需要找到一个尺寸适配所有屏幕分辨率

目前，市面上800×600屏幕尺寸已经不需要考虑了，主流的最小尺寸是1024*768，并且现在主流的浏览器还是以IE为主，最小的常用屏幕尺寸是1024×768。所以，我们只要能保证在这个最小尺寸里放得合适, 那么其他尺寸也肯定没有问题。

弹框的宽度一般不会设得太宽，1000px以内足够；高度的话，以Windows为例，去掉浏览器的标签高度和系统底部功能条的高度后，可以得出:

768px – 约100px(浏览器标签栏等高度) – 约40px(系统底部工具栏高度) = 约620px

所以弹框高度控制在620px以内，就可以确保在小屏幕上也能正常显示完整的弹窗，避免在小屏幕下需要滑动滚动条才能看全整个弹框的情况。因为，如果弹框本身有滚动条，而页面又因为超出一屏多了个另外一个全局的滚动条，那这个滚动体验就很不好的。因此，不管是从用户体验角度，还是从开发成本来看，我们一般都会把弹框控制在620px高以内。

所以我们大致得出当屏幕尺寸是1024×768时弹窗的 宽度和高度值一般会设为小于等于 1000*620PX的尺寸。

由于屏幕的尺寸愈来愈大，有时候为了在大屏幕下有更好的视觉表现，对于一些较复杂的弹框，可以选择做2-3种尺寸适配。

在某些大屏幕下，弹框尺寸为640px(宽)*760px(高);

但在小屏幕下，选项及Icon则会缩小，弹框尺寸变成了640px(宽)*620px(高)

值得注意的是：现在现在越来越多的宽屏正在逐渐占据市场，相对应的越来越多的网页设计的宽度和高度都不是固定不变的，只要在规定的最大值或最小值范围内都可以自由组合出适合自家产品的尺寸，如果遇到别的分辨率，可以做自适应的调整（适配方面需要设计师自己先考虑好，然后传达给开发同学的），这是一个流行的趋势。

如果刚接触B端产品的小白，在自己定弹窗尺寸，实在束手无策不知道从何入手时，也可以结合自己要做的产品，借鉴一些大厂成熟的弹窗尺寸规范进行设计，毕竟站在巨人肩膀上，可以看得更远。

总结起来，弹窗的尺寸大小，需要根据屏幕大小来决定，我们能参考的只是常规屏幕大小尺寸大约为多少范围内，但是具体数值 ，却需要我们设计师根据具体情况，给他们做具体的尺寸适配。

四，弹窗设计时，需要考虑什么？

在B端web设计中，弹窗的视觉样式虽然非常多，但功能却大致只有上面我们讲到的：“信息展示、任务、反馈”这三大类型。在做弹窗设计时，我们只要掌握了它的底层逻辑，

首先,就能更好地权衡弹窗适合在什么应用场景里使用：比如说某个场景是否可用弹窗？是否只能用弹窗？用二级页面或浮层，甚至是toast弱提示这些替代，是不是会更好……

其次，就能对产品的框架，交互及视觉设计进行很好的梳理，制定和规范，如果可以，我们应该竟可能的慎重和少使用弹窗。

最后，还得格外注意一些比较容易产生歧义的按钮文案，类似“确认”和“确定”，“提交”和“发布”，“关闭”和“取消”等，

“确定”和“确认”按钮，常分别与“取消”按钮组合使用。一个是做决定，一个是需要核实。

“确定”常用于用户对某些配置修改了，或做了某些重要操作，出现弹窗需要提醒用户做决定，等用户同意后，才能最终执行。

“确认”用于那些不可以再逆操作的，比如说填写某些信息提交时 ，需要用户“核实”的操作时。

“提交”和“发布”按钮，

“提交”，用在填写完相关内容后，不需要系统审核 ，就能发出去的操作中，比如购物写评论等场景。

“发布” ，用在把一些作品 ，资料等重要内容上传到公共平台中，这种情况秀需要系统严格审查通过了，才能发布的，是要负一定责任的场景。

“关闭”和“取消”按钮

“关闭”， 一般用于把当前弹窗关掉，但不影响正在运行的操作。

“取消”，一般用于取消正在进行的操作，比如说上传视频图中，被取消中断了，继续维持原来的样子。

它们之间都是有区别是的 ，要知道哪些场景下用什么样的文案才能准确地传达给用户相应的信息。

大致就是以上需要注意的。

最后，祝各位都有个好前程，趁着年轻，抓紧一切时间提升自己的专业能力，让自己更有价值，更值钱。

作者 | 范幺幺
来源 | 站酷（zcool.com.cn/article/ZMTI1NzYyOA==.html）

赞助商链接