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日内与联系我们,我们会予以更改或删除相关文章,以保证您的权益!
|