太原PHP培训
达内太原php培训中心

0351-5608878

热门课程

太原php开发培训:在设计了100个弹框之后,这些是我的心得(二)

  • 时间:2016-07-05
  • 发布:太原PHP培训
  • 来源:码农网

1.新手引导

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

<a style='color:blue' href='http://ty.php.tedu.cn'>太原php培训</a>班

Google Photos的新手引导更结合了微动画,效果非常惊艳,让人过目不忘。

太原php培训班

2.选择器

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

Flickr的图片选择器。

3.任务

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

Duolingo用插图和icon等视觉元素来丰富任务弹框的表现形式,减轻枯燥感。

太原达内php培训班

Trello的任务弹框虽然信息较多,但好处是能快速切换到不同的任务,增加效率。

太原达内php培训班

4.提示

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

腾讯企点的提示弹框整理

太原达内php培训班

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

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

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

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

太原达内php培训班

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

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


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


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


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

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


3.蒙版增强品牌感

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

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

太原达尼php培训班

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

太原达内php

對弹框的其他思考

未来的趋势

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

达内太原php编程开发

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

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

Squarespace的登录弹框

太原达内php培训班

Evernote的修改标签弹框

太原达内php培训班
上一篇:太原php编程培训班;在设计了100个弹框之后,这些是我的心得
下一篇:董明珠:妇女节是对女性的歧视 晚上回家爱看看韩剧 唯一就佩服王石

太原php培训:软件项目免坑指南(一)

太原php培训:一个女程序员的职场自述

太原php培训:ML 工程师需了解的 10 大算法(二)

太原php培训:ML 工程师需了解的 10 大算法(一)

选择城市和中心
贵州省

广西省

海南省

台湾