设计弹框时需要注意的几个问题

1、背景锁定与滚动条引起的抖动问题

弹框的原意就是要聚焦用户的注意力,因此我们要做的是 – 背景锁定(从技术角度其实是暂时性干掉滚动条)。

当Dialog弹框出现的时候,根元素overflow:hidden.

前端实现原理

此时,由于页面滚动条从有到无,页面会晃动,这样糟糕的体验显然是不能容忍了,于是,对元素进行处理,右侧增加一个滚动条宽度(假设宽度是widthScrollbar)的透明边框。


Dialog隐藏的时候再把滚动条放开

2、避免弹框上再弹出弹框

要尽量避免在弹框上再弹一层弹框,2层蒙版会让用户觉得负担很重。可以改用轻量弹框或重新把交互梳理

3、蒙版增强品牌感

不一定是纯黑或纯白,可以根据产品主色来搭配萌版。


Tumblr的蒙版颜色採用了它的品牌色rgba(54,70,93,.95)


Twitch的蒙版颜色在黑色中混入了一点紫色rgba(32,28,43,.9),与它的品牌色相符
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 果然是大公司,做弹框都做出花来了...当然,这只是看这篇文章之前的感觉,等看完了就觉得这特么之前几百个弹框都白做了...
    EricVan阅读 959评论 0 11
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,846评论 1 92
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,276评论 4 61
  • 每个女孩都会有一部陪伴着她长大的偶像剧,那里面包含着她对青春的向往,对爱情的憧憬,对美好未来的幻想。不管这部...
    麻里麻里吼吼阅读 267评论 0 0
  • 我的耳朵里有一只小小蚊子,她从来不吵很安静。她 从来不吃食,她要的只是我偶尔的光临。每当 黄昏后我们相遇,她就会对...
    李一十八阅读 279评论 0 0