福建体彩的官方网站百度百度百度百度百度百度|福彩快三官方网
<返回列表

100个弹框设计小结


聊城网站建设公司aiweisheji.com 爱伟设计 | 本期视点:什么是弹框?

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

弹框尺寸怎么定?

 

在真正着手设计一个弹框时, 第一个遇到的问题就是弹框?#26576;?#23544;到底要定多大。市面上各种各样尺寸的?#32842;?#20998;辨率,如果你希望以一个尺寸适配所有?#32842;?#20998;辨率,那可以参?#23478;?#19979;数据。

 

2016年5月中国市场主流电脑分辨率统计Top 5 (资料来源自百度统计)

 

?#30001;?#22270;得知市面上最小的?#32842;?#26159;1024×768,因此只要保证在这个尺寸放得下, 其他尺寸也肯定没?#24418;?#39064;。弹框的宽度一般不会太宽,1000px通常是足够有余的。高度的话,以Windows为例,去掉系统底部功能条的高度及浏览器的高度后,可以得出:

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

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

pic4

由于?#32842;壞某?#23544;愈来愈大,有时候为了在大?#32842;?#19979;有更好的视觉表现,对于一些较复杂的弹框,可以选择做2种尺寸适配。拿以下2个例子为例:

Marvel的新建项目弹框中,在大?#32842;?#19979;,弹框尺寸为640px(宽)x760px(高);
在小?#32842;?#19979;,选项及Icon则会缩小,弹框尺寸变成了640px(宽)x620px(高)

InVision的升级弹框中,在大?#32842;?#19979;,列表的行距比较宽松,弹框尺寸为1100px(宽)x800px(高);
在小?#32842;?#19979;,列表的高度则减小,弹框尺寸为1100px(宽)x630px(高)。

当然,也可以按?#32842;?#23610;寸拉伸面板?#26576;?#23544;。这裡处理的方法很多,总而言之如果弹框尺寸做?#20040;螅?#23601;要想好兼容方案,相对设计及开发成本?#19981;?#22686;加。

弹框的使用场景

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

弹框特性:
– 较页面轻,可以更快回到之前的页面
– 相对独立,可以完全不影响页面的布局
– 适合解决简单,一次性的操作

以下列出了一些较适合使用弹框?#26576;?#26223;及案例:

1.新手引导

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

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

2.选择器

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

Flickr的?#35745;?#36873;择器。

3.任务

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

Duolingo用插图和icon等视觉元素来丰富任务弹框的表现形式,减轻枯燥?#23567;?/p>

Trello的任务弹框虽然信息较多,但?#20040;?#26159;能快速切换到不同的任务,增?#26377;?#29575;。

4.提示

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

腾讯企点的提示弹框整理

 

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

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

浏览网页?#26412;?#24120;会发现弹框出现后,滚动鼠标时,蒙版下面的页面还是可以滚动?#27169;?#20854;实这些滚动都是没必要?#27169;?#22240;为弹框的原意就是要聚焦用户的注意力。

因此我?#19988;?#20570;的是 – 背景锁定(从技术角度其实是暂时性干掉滚动条)。

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

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

此时,由于页面滚动条从有到无,页面会晃动,这样糟糕的体验显然是不能容忍了,于是,对<body>元素进行处理,?#20063;?#22686;加一个滚动条宽度(假设宽度是widthScrollbar)的?#35813;?#36793;框。

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

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

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

3.蒙版增强?#25918;?#24863;

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

Tumblr的蒙版颜色採用了它的?#25918;?#33394;rgba(54,70,93,.95)

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

 

對弹框的其他思考

未来的趋势

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

视觉表现方面,之前也提?#28966;?#23558;会有更多产品会为了在大?#32842;?#19979;有更好的视觉效果做出针对性的设计。而随著产品愈来愈追求简洁,UI也变得愈来愈轻盈,甚至?#35813;鰲?#24377;框也许不再需要用一个框框去包住主体。市面上已经有不少产品使用这种手法,以整个?#32842;?#26469;取代框框。

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

Squarespace的登录弹框

Evernote的修改标签弹框

aiweisheji.com 爱伟设计【爱伟建站】
提供营销型网站建设 | ?#25918;?#32593;站建设 | 网站代运营 | 微信公众号搭建 | 微信公众号代运营  | 平面设计 等服务
欢迎客户咨询,电话:18353111376 17753129741

 

 


上一篇:看人?#24230;?- 设计师辅技手册(二)
下一篇?#22909;?#26377;了




关于aiweisheji.com爱伟设计

aiweisheji.com爱伟设计是一家专注用户体验设计的互联网?#25918;?#24314;设设计公司,创始人于2012年从业至今已经为超过200多位客户提供了创新与专业的设计方案。设计服务范围包括网站设计与开发建设、移动及软件产?#26041;?#38754;设计、图标设计、?#25918;?#21450;平面设计等。我们的价值与宗旨是为用户和客户打造更适合且?#34892;?#30340;设计,用设计提升产品和企业?#25918;?#20215;值。

查看精选案例   |  服务体系    |  爱伟设计动态



更多阅读

打破设计的壳

打破设计的壳

设计资讯 2017-04-27

爱伟设计是聊城做网站的公司,我们的观点:设计本身就是主观?#27169;?#24773;感是主观?#27169;?#24847;义是主观的。设计可以疾风暴 查看全文
Touch Bar是什么

Touch Bar是什么

设计资讯 2017-04-28

aiweisheji.com|爱伟建站 设计视点:本期为大家带来:Touch Bar。 在苹果新款MAC BOOK中,Touch Bar取代了原有的功能键,带来 查看全文
产品细节中的情感化设计

产品细节中的情感化设计

设计资讯 2016-08-06

原?#24615;?#22312;他的《设计中的设计?#20998;?#26377;介绍过这样一个案例:日本机场原来是用一个圆圈和一个方块表示出入的区别, 查看全文
返回全部新闻
扫描二维码分享到微信
确 认

Copyright ? 2016 aiweisheji.com 鲁ICP备15005020号-1 | 网站地图 友情链接: |检车车 |潍?#25442;?#26234;教育 |聊城网络公司

扫描二维码关注我们:aiweisheji.com爱伟设计
确 认
福建体彩的官方网站百度百度百度百度百度百度 四川省金七乐今日开奖结果 天津时时走势图后三 1分时时彩是统一开奖吗 贵州十一选五一定牛 排列五和尾基本走势图 广东快乐十分遗漏数据一定牛 推牌9怎么洗牌图解 天津时时购买平台 管家管婆四不像 欢乐十三水官网