B端基础 | 弹窗设计基础知识

建筑设计师尤哈尼·帕拉斯玛说、简约并非简单，它是通过深思熟虑后对事物本质的准确把握。知其然、知其所以然。这次文章会尽量简洁一点。

奔跑的日子、总是希望优秀的你和我一起同行。让我们一起在艺术的环境里生菌、知识的海洋里狗刨~

如果你只是想了解一下弹窗的基础知识，那么看这部分就够了。只需3分钟无痛、来去自如不影响上班哦。

。（在网上搜了一些文章看，他们的弹窗定义写的基本都是各写各的）我的这个定义绝对靠谱。站的维度高，从人机交互工程出发。这定义没错的妥妥的。说出去基本不会有人反驳你（如果有人敢反驳你把我的名字告诉他，反正我他也不认识我哈哈哈）

弹窗最早的起源可以追溯至上世纪90年代。当时，互联网广告的投放形式主要是将广告嵌入在页面内容中，但这种方式存在一些问题。广告商担心消费者在浏览负面内容时，会将广告与负面信息联系在一起，从而对品牌造成不利影响。因此，网页托管网站trippod.com利用网页脚本程序，发明了一种在新开窗口发布广告的方法，这就是网络弹窗的起源。

整体的去分析、在大部分的弹窗类型里都会包括

（非模态类别的没有个元素）

模态层通常是搁在原页面和弹窗之间的半透明黑色。其主要的作用是1、降低用户在操作中被强打断的不适和跳出当前页面的恐慌感。让我们的用户更加的聚焦弹窗内容。

我个人在设计时模态层基本都是50%的纯黑，但并不是一定要用50%的纯黑，要结合自己的平台业务、设计风格等方面去制定。偷偷的告诉你这个模态层加入一点微微的色彩倾向在视觉上往往会更好一点。

弹窗的关闭是用户退弹窗的重要途径、一般都会在弹窗内容右上角。弹窗关闭按钮也有在弹窗范围外的。我们要保证弹窗关闭的清晰明确，来方便用户操作。

在弹窗中、关闭弹窗的途径除了叉掉。还可能有其他的。如取消按钮。

内容区的内容是根据弹窗类型的不同，内容就会有所不同。什么都可能有、图标、确认信息、选择框、输入框。只要是页面上能出现的都可能会出现在弹窗的内容区域。

弹窗的分类从交互形式差的差异。我们可以将其分为

。这两个大类就比较好区分，看看有没有那层模就行了。常见弹窗类型表单弹窗、抽屉、警告提示、全局提示、通知提示、气泡确认等。

模态是目前我们比较常见的类型、模态类弹窗打断用户的操作行为，用户必须对其进行操作才能解散弹窗，否则不能进行其他操作。模态类最常见的就是、

。当然还有其他的文件选择、信息展示、等等。

这弹窗在B端设计里是最最最常见的一种弹窗。虽然我们现在的系统大部分是很智能的。但是复杂的业务就意味着你会和系统产生大量的交互信息的交换。所以这表单可太常见了哪哪都是他。（烦死个人）不过在你制定好一套规使用规范后。基本这样的弹窗是不太需要设计介入的，产品和FE两人一对使用模版就上了。

这种弹窗就比较好理解了。承载较为紧急的信息，让用户快速处理；如：用户未保存，就点击离开当前页面，通过对话框让用户做出选择。在执行一个重要信息的删除时，通过二次询问引起用户的注意，让用户再次做判断；这类弹窗；

强不会让用户忽略或跳过，确保信息的交互响应；引导用户操作；增加用户的参与度，可以提升用户的活跃度和参与度。

01、会中断用户的操作流程，打断用户的思路或行为。

02、可能会影响用户体验，因为用户需要等待关闭弹窗后才能继续其他操作。如果弹窗内容过多或过于复杂，用户可能会感到困惑或不知所措。

03、如果过度使用模态类弹窗，例如频繁弹出广告或无意义的信息提示，用户可能会对其产生反感甚至抵制使用相关软件或平台。

可以不打断父应用程序，无需停止进度，用户仍可以对父级内容进行交互。大部分应用于信息的反馈和提示。常见的非模态类弹窗大概有、警告提示、全局提示、通知弹窗、气泡确认框；

不打断操作流程；不会干扰用户操作用户体验更好；常用于轻量级的信息或提示。

可能会被忽略，导致信息传递不畅；不适合展示重要信息；形式通常比较单一，不能满足复杂的展示需求

林子大了什么鸟儿都会有，一定会有我没有接触到的前沿交互方式。所以这个其他留给未来更优秀的我们去发现。

弹窗的尺寸和电脑屏幕分辨率是有关系的。主流的分辨率1920*1080像素。其他的还有1024x768、1280x800、1366x768、1440x900、1680x1050、1920x1080、2560x1440等。

我在设计界面是一般用的是1440*900的设计尺寸。在做弹窗的时候已经不考虑1366*768分辨率以下的屏幕了。多以弹窗的安全高度要小于600px

弹窗的宽度还是要根据自己业务需求去定义的。比如我们的业务最宽的弹窗1280像素。像站酷的查看作品他是整屏的宽度。

我在我们平台定义的表单弹窗宽度虽然很不严谨、好像也没有什么理论支撑。但是确一直再用。尺寸分别为、400、600、800、1000、1280。之后还是要细化的。这样的定义弹窗尺寸导致的结果是，开发还原想过不是太好。

承载内容、为什么会有这么多的弹窗类型。问题不在于弹窗，而在于合适的承载内容和交互类型。

在项目里我们应该怎么去选择这三种内容呈现方式呢。如果你只是设计师大部分时间你也不用选。你只有建议的权利没有决定的权利。如果产品原型是弹窗、你给做了个抽屉。你可以从下面几方面去找支撑点去和产品撕逼、干翻他的原型用你的效果图。

弹窗和抽屉或界面他们承载的内容量是不一样的。所以在选择用那种交互方式时可以从我们业务需要展示的内容量来考虑。简单的确认或通知适合用弹窗、需要展示大量内容或进行复杂的功能时就适合用抽屉或者界面了。

我们可以从用户体验方面出发、如页面的空间感、考虑空间大小和布局。操作流程上、考虑用户在界面上被打断进程的成本。一致性、确保与其他业务模块交互方式保持一致，为用户提供一致的体验。

考虑到用户的使用成本、B端设计中效率的提升优先率老高了。考虑系统的加载速度、确保我们使用的交互方式不会影响整体的性能和体验。

本身弹窗、抽屉或者界面的使用选择是需要很综合考虑的。总的来说核心是提升效率、保证我们用户好的体验。

当涉及到B端弹窗的交互方式时，有以下几点核心优缺点：

弹窗可以快速向用户显示重要的信息或请求，使用户能够即时了解系统的状态或需要执行的操作。

对于某些复杂的操作或任务，弹窗可以提供直观的界面和简化的步骤，使用户更容易完成目标。

通过使用弹窗，可以确保用户在操作过程中不会被其他界面元素分散注意力，从而更专注于当前的任务。

弹窗可以包含更多的详细信息或额外的功能选项，使用户能够更深入地了解或操作某个特定内容。

过度或不合适的弹窗可能会干扰用户的正常操作，打断用户的工作流程，影响用户体验。

不清晰或误导性的弹窗信息可能会使用户产生困惑或误解，导致错误的操作或决策。

弹窗的弹出和关闭可能会增加系统的负担，影响性能和响应速度。

对于习惯于传统界面的用户来说，过于复杂或与众不同的弹窗交互方式可能会造成使用上的困扰和不适应。

我们项目里把升级弹窗做成了模版、广告弹窗也是模版。当然像二次确认这样的弹窗是组件，上货看东西。

这个是系统的一个展示弹窗、和一个从弹窗形式优化到抽屉的模块界面。

这个就是一个在线聊天界面。是从SaaS里跳转新建页面。

大概是想了想、平时做的项目确实比较碎、最近也没做整理盒复盘。所以界面的展示就不放太多了。而且有的信息页模糊了。不是我不信家人们。是我不信自己、朦胧也是一种美吧。哈哈哈

我大学设计史陈老师告诫过我们。她说同学们，我其实不怕你们眼高手低。我怕的是你们眼都不高。和优秀的人一起前行、希望和优秀的你们一起去经历设计、生活、工作的美好。

期待你的加入、

。我可以

反正闲着也没事

。我和群里的小伙伴都是多年一线设计师来自于天南海北，不乏有互联网大厂设计师。再次

优设网：4个方面层层递进，分析如何设计B端产品的弹窗

知乎：B端设计指南04-弹窗

知乎：运营弹窗的设计要点拆解

知乎：浅谈B端产品弹窗一级设计方法

人人都是产品经理：WEB端弹框掌握着几天就够了