如何优化B端反馈的使用体验
B端弹窗简介
弹窗是一种交互方式，用作提醒或者解决某个任务。其好处是让用户更聚焦，且不用离开当前页面，更快更容易完成任务。
弹窗既可以用作简单的任务填写，如登录注册、表单录入、信息修改、信息展示等；也可以作为提示控件中的一种，如成功、失败、警示等。
模态弹框和非模态弹窗
模态弹窗
用户必须给予弹窗反馈，除非点击关闭或者操作完成，否则弹窗会一直在。形式上来说就是给当前页面添加蒙层，使用户将注意力集中在弹窗上。
无论在现实中还是界面交互中，我们都不希望对话被打断，模态弹窗不会轻易被打断，所以对话框（Modal）通常也都是模态弹窗，而抽屉则有模态和非模态两种形式。
非模态弹窗
不需要给出反馈，不影响用户的其他操作，主要有属性配置弹窗、Tooltips、消息通知、气泡框等类型。
非模态弹窗的另一个特点就是：实时生效。点开非模态弹窗的同时仍然可以看见主界面，主界面会根据你的操作实时变化。
弹窗的使用场景
任务
在用户需操作相对复杂的扩展功能时更常见的是用“模态弹窗”，它承载当前页面的扩展内容，所以常常用到对话框、抽屉两种类型。
除了有标题、按钮之外通常还会有一些任务表单，它是给予当前主页面之上的一种目标任务，承载了用户明确目标的扩展应用。
反馈
用户输入信息或操作用户界面时，系统给出相应的提示时出现内容反馈机制，一般属于“非模态弹窗”类型，在设计师设计界面时常常用到“全局提示”、“通知提示”、“气泡确认框”三种类型作为反馈消息。
但如果是重要操作确认时还是需要使用模态弹窗进行确认，另外可以反馈的还有不是弹窗的表单校验提示以及页面独占式反馈。
信息展示
一般由用户主动触发，包含图文信息，少数会有简单的操作按钮，如确认、知道了等等。
比如操作说明和引导、欢迎界面、操作说明、帮助、功能引导、取数说明、查看详情、预览或查看大图等，这类信息往往与当前页面紧密相关，并不适合用跳转页面，因为这样无疑会加深页面层级，增加用户的认知负担。
七种B端弹框类型
Modal对话框
优势：通过全局的半透明黑色能够让用户更加聚焦，集中精力去处理好当前事情，能够通过透明度展示背景，让用户了解到自己并没有离开当前页面。
劣势：打扰用户，感到强烈的中断的感受。
通知公告类
▲营销弹窗出于营销目的，这类弹窗都会第一时间出现在你面前，直到手动关闭，它的特点就是不用登录也会出现，提高曝光率，便于拉新和转化。
▲公告通知弹窗主要是为了将一些重要信息通知给用户，这些信息要么来自一些被触发的事件，要么来自应用开发者的信息，一般在用户登录后第一时间弹出，确保用户不会错过。
需要注意的是，在应用的通知中心一般也需要保留这类重要或者高级别的通知，以便用户可以随时查看回顾。
▲提示类弹窗是由应用程序主动弹出的消息，主要有三种状态：错误、警告、确认。通常是用户进行某项操作后给出的反馈信息，会中断当前工作流，属于阻塞型提示。
操作配置类
▲简单配置(表单少/操作清晰)“简单”意义上的弹窗可以理解为只有平铺的表单让你选择或输入，交互清晰明了。比如创建项目、分享链接、更改名称、收藏采集等操作。
▲标签页弹窗有些应用的功能配置中有很多复杂的属性，简单平铺的弹窗无法满足需求，需要分层分类归纳。
优点是合理利用了空间，也能让用户更好地理解信息层级。标签页弹窗的设计必须合理且适度，找到信息之间的因果关系，仔细斟酌并加以连接整理。
同时，单个弹窗中的标签页不宜过多，一般不超过五个(动态可增减的标签页除外)。
如果考虑项目未来扩展，建议将标签改为竖项显示。
▲流程步骤弹窗分步弹窗是分步表单的衍生品，因为在实际项目中，发现大型的分步表单难以满足现阶段对于小型内容展示的需求，因此分步弹窗便诞生。
分步弹窗的主要特点是页脚上会有下一步、上一步两个选项供用户选择，同时用户点击下一步后，会在左上角提示用户进行返回。
Drawer抽屉
Drawer抽屉指从屏幕边缘滑出的浮层面板。
优势：“抽屉”的页面空间更大，它能够承载更多的内容、信息，与主页面亲密度更高；
劣势：“抽屉”的灵活度比较低，比如“对话框”可以根据业务的内容多少去变化它的宽度与高度，而抽屉只能横向/纵向降低尺寸。
“抽屉”可以作为模态类弹窗的扩展应用的一种，它与对话框在功能上很相似，都属于任务型弹窗，并且都属于“模态形式”。
但是“抽屉”的出现形式与“对话框”完全不一样，对话框是在主页面中以弹出的方式出现，而抽屉是与主页面有着相对位置关系平滑展开出现。
抽屉出现的形式可以分为四种类型，分别是：
向左平移；
横向右平移；
底部向上平移；
顶部向下平移；
常规情况下设计师在Web端中使用横向左平移频率最高。
一般推荐抽屉从右侧出，我们经常用抽屉调取信息、填写表单，从右侧展开抽屉不会遮挡父级页靠左侧的内容(通常页面中最重要的信息都放置在页面左侧)。在抽屉中填写表单或核对核心都仍然可以参考父级页内容。
也有从底部出的抽屉，如下图👇；从左侧和顶部出的抽屉作为一般作为导航使用。
内容展示类型
“抽屉”最大特点是空间较大，能够比“对话框”更友好的承载庞大信息内容，并且“抽屉”是由平滑展开出现它比对话框跳出感更弱。
表单编辑类型
抽屉可以保证用户快速捕捉信息，同时消除弹窗过渡差异较大产生的排斥感，建立相应的联系性。表单编辑类型抽屉一般是模态型
工具栏类型
工具编辑器类抽屉属于非模态弹窗，没有模态层也不遮挡编辑内容区，位置可以是左边或右边，或者两边都有。
导航类型
如下图，左侧抽屉式导航，导航内容为历史记录版本。
下图右侧是图片式抽屉导航。
Message全局提示
设计师在不希望用户在执行操作时中断用户并能告知用户结果的前提下，给予用户的临时反馈浮层，它出现位于页面顶部居中显示，不跟随页面滚动而滚动，并自动消失(建议3-5秒)。
全局提示是由图标、提示文本、操作(可选)、关闭(可选)四部分组成，其中可选部分是否包含可根据实际情况进行配置。
整体完结性独立页面反馈
需要在操作完成后提供一个里程碑式的结果提示，明确告知用户结果。例如：编辑好模版点击保存后，给予全局的成功/失败的提示。
针对一个操作区块的总体反馈
它是针对页面中某个区块操作过程的结果反馈。反馈后，页面自动跳转到顶部的提示区域。例如下图中删除一条信息后，显示删除成功反馈。
Notification通知提示
一般用于系统主动推送或通知用户复杂的后台进程结果，向用户告知重要问题或失败状态的临时通知浮层，且希望用户立马做出决策。
状态包含成功、失败、错误、警示，通常情况下出现于页面顶部右上角，反馈不随页面滚动，并可设置(建议少于6s～8s)后自动消失，是不会打断用户操作的轻量级提示方式。
希望用户立马做出决策
向用户告知重要的问题或失败状态，希望用户立马做出决策。例如：系统升级优化需通知用户，可以配置操作，如“查看详情”用户点击后可跳转至详情页面。
系统主动反馈信息
系统主动推送或通知复杂内容，明确需要告知用户的提示信息。带有交互的通知，给出用户下一步的行动点操作，如系统功能上线通知。
Alert警告提示
警告提示用于系统向用户传递需要特别注意的信息，无需用户启动操作即可显示。
这些信息可以是整个网站级别的，或者是某个页面甚至是组件级别的。这些信息通常是一直存在的，除非用户主动关闭。
不可关闭
展现形式常驻在系统静态页面中，不会自动消失，常伴有操作按钮。
可关闭
展现形式常驻在系统静态页面中，不会自动消失。提供关闭操作，用户可以通过点击关闭按钮来关闭此提示。
Popconfirm气泡确认框
点击按钮时，弹出气泡式的弹窗就是气泡框，气泡框可以针对元素进行简单的操作，尺寸也会根据内容大小不一。
功能引导或操作说明
常用于向新用户介绍产品如何操作以及向用户介绍新功能。
操作任务
操作任务时不涉及到主流程时常用于取代对话框，交互形式比对话框更轻量。
Tooltips文字提示
Tooltips跟上图的气泡框很类似，区别在于Tooltips更轻量，属于页面中最小的弹窗类型，用于功能的提示说明，通常都是文字，背景用深色来与主界面拉开层次。
功能提示说明
显示隐藏的全部文字
1. 根据应用场景
模态弹窗和非模态弹窗的具体使用场景可参考下图表格：
2. 根据交互需求
3. 根据内容量
当内容量较少时，可以采取下拉菜单进行设计上的优化，下拉菜单几乎都是非模态，它的优势明显，没有复杂操作和各种表单，只需要鼠标划过点击即可，快速高效。
如果不是影响业务流程的操作，而只是页面的设置类，可以将对话框改为气泡框或气泡确认框，如下图：
当页面内容较多时，New page 新建页 > Drawer 抽屉 > Modal 对话框（内容的深度较深最好采取抽屉、内容宽度较宽则弹窗形式更为合理、而新建页合适宽度与深度同时较大的产品中）
4. 遵从一致性原则
除以上三个判断维度，还有「一致性」原则需要考虑，例如某产品弹出的表单大多较长，采用抽屉组件，为了保持体验的一致性，个别短表单也可以同样采用抽屉。
例如钉钉的后台管理，大部分编辑都采用抽屉形式，而飞书的管理后台大部分编辑则采用弹窗的形式。但针对不同产品的具体情况，一致性的优先级有所区别。
1. 操作按钮固定在底部
弹窗的操作按钮没有固定，随滚动条滚动，需要滚动到底部进行操作很不方便。
2. 弹窗高度不高于浏览器内容展示
弹窗高度过大，弹窗显示不全，就算滚动条固定到底部也有一部分显示不出来，影响操作。
这里点击全屏显示会锁定页面的全局滚动条，但浏览器正常显示会出现两个滚动条的情况，体验会变差。
对话框的大小主要根据内容而定。B 端应用中，一个尺寸无法满足所有类型的弹窗需求，所以我们要设定几种常规尺寸，一般可设定为 4 种：
- S （通知提示类）
- M （配置简单）
- L （配置复杂或者扩展详情）
- 特殊 （根据实际情况而定）
PC 的小屏幕分辨率为 1024*768，所以高度尽量控制在 600px 以内（除去导航栏、工具栏高度），宽度控制在 1000px 以内，避免在小屏幕下滚动一点点才能看全整个弹框的尴尬情况。
但值得注意的是：现在越来越多的宽屏正在逐渐占据市场，相对应的越来越多的网页设计的宽度和高度都不是固定不变的。
抽屉提供稳定的尺寸。提供 S (w=378px) 和 M (w=736px)基础宽度选项。
这两个尺寸是根据 antd 表单尺寸规范测算，分别可容纳单列和双列表单，而且保持了使用抽屉时父级页内容可见的优势。仍然支持自定义宽度。
3. 背景锁定避免滚动条引起的抖动问题
浏览网页时经常会发现弹框出现后，滚动鼠标时，蒙版下面的页面还是可以滚动的，其实这些滚动都是没必要的，因为弹框的原意就是要聚焦用户注意力。
因此我们要做的是背景锁定（从技术角度其实是暂时性干掉滚动条）。
4. 关闭方式优化
弹窗应至少包含一个以上的关闭方式，常见的弹窗关闭方式有 4 种：
- 右上角的关闭按钮
- 弹窗底部的“取消”按钮
- 弹窗外的任意区域
- 一段时间后自动消失
弹窗外的任意区域，这种方式一般用于模态弹窗，除了弹窗中的关闭按钮外，点击弹窗外的任意区域关闭体验更佳。但操作配置类弹窗不建议采用这个方式，容易误操作导致正在配置中的弹窗被关闭。
5. 避免弹框上再弹出弹框的问题
要尽量避免在弹框上再弹一层弹框，两层蒙版会让用户觉得负担很重。
方法一：改为抽屉
如下图，钉钉的后台编辑员工信息，抽屉弹窗选择部门后打开选择部门与人员对话框。抽屉页面上可以更深一步操作弹出弹窗或再叠加一个抽屉。
方式二：避免中间弹窗跳转抽屉弹窗的交互方式
方式三：隐藏当前对话框
第一步，选择添加成员后隐藏当前新增用户组弹窗；
第二步，打开添加成员弹窗保存确定后显示之前到新增用户组弹窗，如下面来自飞书的后台管理，新增用户组弹窗的打开两个弹窗交互方式：
6. 优化交互流程
现在弹出框不仅承载了信息编辑的功能，还可以作为上下文的跳转，帮助用户衔接路径。
如 iconfont 中的新建项目，用户新增后，页面会直接跳转到新的项目空间。
如果内容过多，如下图 ，可以重新梳理交互，改成轻量弹窗+新建页的方式。
原来的编辑内容过多，业务可以拆分成基本信息和配置信息，新增内容保存后可以自动跳转到配置页面进行配置。
7. 模态层优化
方式一：模态层颜色根据产品品牌色定
模态层模态抽屉的遮罩背景如果根据产品色定不仅更贴合品牌，且显得更有设计感。下图帆软的模态层就不是大部分产品都采用的纯黑透明度而是加入了点品牌的蓝色系。
方式二：有模态层但不显示
模态层模态抽屉的遮罩背景层可以降低透明度，也可以是全透明不显示的，可以更好的展示关联的信息，点击抽屉其他处可关闭抽屉，钉钉后台管理的模态抽屉就是这样设计的。
方式三：去掉模态层
下图中的抽屉为非模态抽屉，可以根据左侧列的切换快速查看右侧抽屉内容。
通过上下两篇「B 端弹窗设计」分享，希望能让你对 B 端弹窗有一个初步的认识和了解。
原文：https://mp.weixin.qq.com/s/00elt9uDnhojkTjwdVgPRg
既然来了，说些什么？