返回顶部

如何优化B端弹窗的使用体验?

[复制链接]
玫瑰黑糖Lv.2 显示全部楼层 发表于 2022-2-9 17:42:09 |阅读模式 打印 上一主题 下一主题
  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日内与联系我们,我们会予以更改或删除相关文章,以保证您的权益!
回复

使用道具 举报

精彩评论1

adminLv.9 显示全部楼层 发表于 2022-3-1 11:52:29
@Leo雷
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

达内教育:成立于2002年。致力于面向IT互联网行业,培养软件开发工程师、测试工程师、系统管理员、智能硬件工程师、UI设计师、网络营销、会计等职场人才 达内使命:缔造年轻人的中国梦、缔造达内员工的中国梦 达内愿景:做管理一流的教育公司
  • 商务合作

  • 微信公众号

  • Powered by Discuz! X3.4 | Copyright © 2002-2021, 达内教育 Tedu.cn
  • 京ICP备08000853号-56 |网站地图 | 京公网安备 11010802029508号