设计、建站、维护
始于2004年
当前位置:首页 > 网站制作

网站设计中几个容易被忽视的弹框细节

发表日期:2018-9-27 作者来源:派谷网络 浏览次数:

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

  浏览网页时经常会发现弹框出现后,滚动鼠标时,蒙版下面的页面还是可以滚动的,其实这些滚动都是没必要的,因为弹框的原意就是要聚焦用户的注意力。

  因此我们要做的是 – 背景锁定(从技术角度其实是暂时性干掉滚动条)。

  从前端同学扒出其技术原理如下:

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

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

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

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

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

  3.蒙版增强品牌感

  过去我们对蒙版颜色可能没有仔细关注过,也许颜色不是纯黑#000,就是纯白#fff。其实蒙版的颜色及透明度可以再深入搭配的,例如产品是蓝色调性的可以在黑色中混入一点蓝色,产品是轻盈的可以用白色或淡灰色,或者尝试用没那么深的颜色搭配高一点透明度等等,根据产品的调性设计出一个适合产品气质的蒙版。

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

  Twitch的蒙版颜色在黑色中混入了一点紫色rgba(32,28,43,.9),与它的品牌色相符。

  对弹框的其他思考

  未来的趋势

  移动在影响著人们生活,也同时引领著设计趋势,这些年产品都在追求多终端的一致性,早已衍生出自适应网页设计(Responsive Web Design)的布局解决方案,因此网页设计也日趋移动化。可以想像将会有一大波移动上的体验会搬到网页设计上,如弹框中包含多个层级,透过左上角返回的交互体验,更灵动及细腻的动画效果等。

  视觉表现方面,之前也提到过,将会有更多产品会为了在大屏幕下有更好的视觉效果做出针对性的设计。而随著产品愈来愈追求简洁,UI也变得愈来愈轻盈,甚至透明。弹框也许不再需要用一个框框去包住主体。市面上已经有不少产品使用这种手法,以整个屏幕来取代框框。

  这些也许是未来的一个趋势, 让我们拭目以待。

  Squarespace的登录弹框

  Evernote的修改标签弹框

本文章系本站编辑转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请与本站联系,我们将在第一时间删除内容!

相关网站设计案例

相关推荐新闻

网站改版升级有哪些优缺...

网站改版升级是企业或组织根据自身发展和用户需求变化而采取的重...

日期:2025-3-25 浏览次数:167

移动网页设计中的注意事...

在移动网页设计中,为了给用户提供良好的体验,需要综合考虑多方...

日期:2025-3-24 浏览次数:305

建企业网站注意事项...

建设企业网站时,以下这些方面需要特别留意,以确保网站能够有效...

日期:2025-3-22 浏览次数:1321

网站制作中除了域名,还...

在网站制作里,除域名之外,还有诸多因素会对网站推广和品牌建设...

日期:2025-3-21 浏览次数:2167

响应式设计对于网站制作...

响应式设计是一种网站设计技术,可使网站在不同设备(如台式机、...

日期:2025-3-21 浏览次数:2147

网站建设解决方案
  • 网站维护解决方案
  • 企业门户网站集约化解决方案
  • 营销型网站解决方案
  • 养老院行业网站建设解决方案
  • 医院诊所网站建设解决方案
  • 手机数码行业网站建设方案
  • 外贸公司网站建设解决方案
  • 金融网站建设解决方案
  • 行业协会类网站建设解决方案
  • 品牌官网网站建设方案