课程咨询 :0571-56020837 QQ:162157806

南昌达内UI名师

南昌UI培训 > 达内新闻 > 网页设计中弹窗的应用和技巧总结
  • 网页设计中弹窗的应用和技巧总结

    发布:南昌UI培训      来源:优设网      时间:2016-06-22


  •   南昌达内UI设计培训专家总结设计弹窗的经验,介绍web设计中如何使用弹窗,有哪些技巧。

    什么是弹框?

      弹框是一种交互方式,用作提醒,做决定或者解决某个任务。弹框一般包含一个蒙版,一个主体及一个关闭入口,常见于网页及移动端。其好处是让用户更聚焦,且不用离开当前页面,更快更容易完成任务。由于弹框与当 流行的卡片式设计在表现形式上十分接近,同时弹框也逐渐承载了更多功能性需求,不再是简单的内容堆砌,因此弹框设计正在被越来越多设计师关注。

    弹框尺寸怎么定?

      在真正着手设计一个弹框时, 第一个遇到的问题就是弹框的尺寸到底要定多大。

      市面上最小的屏幕是1024×768,保证这个尺寸放得下就好了。弹框的宽度一般不会太宽,1000px通常是足够有余的。高度的话,以Windows为例,去掉系统底部功能条的高度及浏览器的高度后,可以得出:

      768px – 约60~100px(浏览器高度) – 40px(系统底部工具栏高度) = 约620px

      弹框高度控制在620px以内,可以避免在小屏幕下滚动一点点才能看全整个弹框的尴尬情况。假设弹框本身有滚动条,页面因为超出一屏又有一个全局滚动条,那整个滚动体验就会变得很差。因此从体验角度及开发成本来看 我们一般会把弹框控制在620px高以内,而根据经验所得,这个尺寸内的弹框占了90%场景。

      由于屏幕的尺寸愈来愈大,有时候为了在大屏幕下有更好的视觉表现,对于一些较复杂的弹框,可以选择做2种尺寸适配。

      如果弹框尺寸做得大,就要想好兼容方案,相对设计及开发成本也会增加。

    弹框的使用场景

      在设计时发现经常会遇到一种情况,到底是用弹框还是用页面来承载内容呢?如果了解到弹框的特性后,其实不难分辨什么时候使用那个表现手法更适合。

    弹框特性:

      (1)较页面轻,可以更快回到之前的页面

      (2)相对独立,可以完全不影响页面的布局

      (3)适合解决简单,一次性的操作

    以下列出了一些较适合使用弹框的场景及案例:

    1. 新手引导

      第一感觉是非常重要的。Google+及Carbonmade的新手引导采用了弹框,配上漂亮的插图。这种处理手法美观,不影响页面布局,卡片式的表现手法还能贯穿网页及移动的一致体验。

    2. 选择器

      选择器的特点是用一个内滚区域来承载一个很长的页面,而该内滚区域的高度是可以根据浏览器的高度拉伸的。其好处是除了能放下很长的页面,同时能保留一些操作一直停留在屏幕上。这裡可以选择性的为弹框设置一个 大及最小高度,但要注意的是必须把背景锁定,否则出现2条滚动条的体验是很糟糕的。

    3. 任务

      有时候某些任务只是一些简单的操作,并不特地需要一个页面来表现,弹框是一个很好的方法。

    4. 提示

      提示是最基础的弹框应用,设计时需记往保持统一性。视觉上的统一性: 颜色,间距,文案风格等。交互的统一性: 主要操作是左边还是右边按钮,关闭是点击蒙版还是点击叉叉。

    几个容易被忽视的弹框细节

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

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

      因此我们要做的是 – 背景锁定

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

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

    3.蒙版增强品牌感

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

    对弹框的一些思考

      移动在影响著人们生活,也同时引领著设计趋势,因此网页设计也日趋移动化。预计相当多的移动体验会搬到网页设计上,如弹框中包含多个层级,透过左上角返回的交互体验,更灵动及细腻的动画效果等。

      随著产品愈来愈追求简洁,UI也变得愈来愈轻盈,甚至透明。弹框也许不再需要用一个框框去包住主体。

      学习UI设计、网页设计课程,就找美国上市的南昌达内UI设计培训机构。





    原文来源:https://isux.tencent.com/
    推荐文章

上一篇:25款免费实用的UI KIT,轻松上手

下一篇:学习5个AE表达式,工作更高效

最新开班日期  |  更多

UI设计培训免费训练营

UI设计培训免费训练营

开班日期:每周一

UI设计培训高级班

UI设计培训高级班

开班日期:每周一

UI设计培训全日制班

UI设计培训全日制班

开班日期:每周一

UI设计培训周末班

UI设计培训周末班

开班日期:每周一

  • 地址:南昌市北京西路156号洪城大厦10楼
  • 课程培训电话:0571-56020837 QQ:162157806     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.com.cn
  • 2001-2016 达内国际公司(TARENA INTERNATIONAL,INC.) 版权所有 京ICP证08000853号-56