1、操作按钮固定在底部
弹窗的操作按钮没有固定，随滚动条滚动，需要滚动到底部进行操作很不方便。
2、弹窗高度不高于浏览器内容展示
弹窗高度过大，弹窗显示不全，就算滚动条固定到底部也有一部分显示不出来，影响操作。
这里点击全屏显示会锁定页面的全局滚动条，但浏览器正常显示会出现两个滚动条的情况，体验会变差。对话框的大小主要根据内容而定。B端应用中，一个尺寸无法满足所有类型的弹窗需求，所以我们要设定几种常规尺寸，一般可设定为4种：
S （通知提示类）
M （配置简单）
L （配置复杂或者扩展详情）
特殊 （根据实际情况而定）
PC的小屏幕分辨率为1024*768，所以高度尽量控制在600px以内（除去导航栏、工具栏高度），宽度控制在1000px以内，避免在小屏幕下滚动一点点才能看全整个弹框的尴尬情况。
但值得注意的是：现在现在越来越多的宽屏正在逐渐占据市场，相对应的越来越多的网页设计的宽度和高度都不是固定不变的。
抽屉提供稳定的尺寸。提供 S （w=378px） 和 M （w=736px）基础宽度选项。
这两个尺寸是根据antd表单尺寸规范测算，分别可容纳单列和双列表单，而且保持了使用抽屉时父级页内容可见的优势。仍然支持自定义宽度。
3、背景锁定避免滚动条引起的抖动问题
浏览网页时经常会发现弹框出现后，滚动鼠标时，蒙版下面的页面还是可以滚动的，其实这些滚动都是没必要的，因为弹框的原意就是要聚焦用户注意力。
因此我们要做的是背景锁定（从技术角度其实是暂时性干掉滚动条）。
4、关闭方式优化
弹窗应至少包含一个以上的关闭方式，常见的弹窗关闭方式有4种：
右上角的关闭按钮
弹窗底部的“取消”按钮
弹窗外的任意区域
一段时间后自动消失
弹窗外的任意区域，这种方式一般用于模态弹窗，除了弹窗中的关闭按钮外，点击弹窗外的任意区域关闭体验更佳。但操作配置类弹窗不建议采用这个方式，容易误操作导致正在配置中的弹窗被关闭。
5、 避免弹框上再弹出弹框的问题
要尽量避免在弹框上再弹一层弹框，两层蒙版会让用户觉得负担很重。
方法一：改为抽屉
如下图，钉钉的后台编辑员工信息，抽屉弹窗选择部门后打开选择部门与人员对话框。抽屉页面上可以更深一步操作弹出弹窗或再叠加一个抽屉。
方式二：避免中间弹窗跳转抽屉弹窗的交互方式
方式三：隐藏当前对话框
第一步，选择添加成员后隐藏当前新增用户组弹窗;
第二步，打开添加成员弹窗保存确定后显示之前到新增用户组弹窗，如下面来自飞书的后台管理，新增用户组弹窗的打开两个弹窗交互方式。
6、优化交互流程
现在弹出框不仅承载了信息编辑的功能，还可以作为上下文的跳转，帮助用户衔接路径。
【版权声明】本文系转载，原文为公众号UI头条文章，作者Cassie，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与联系我们，我们会予以更改或删除相关文章，以保证您的权益!
|
