字号: - o +

目前最流行的响应式布局

2013-02-20 杂七杂八 4人评论 16,376次浏览   

子曰:把希望建筑在意欲和心愿上面的人们,二十次中有十九次都会失望 o(∩_∩)o
WopusIDC优惠码:W3Cshare, 点击获取, 或者提交订单时手动输入

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念可以说是是为移动互联网而生的!

Responsive Web Design可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用大势所趋来形容也不为过。随着越来越多的设 计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。下面我列出了一些比较热门的适应多设备的布局模式。

最灵活的(Mostly Fluid)

最受欢迎的模式或者就是这种最简单的方式:在更大屏幕使用更大margin的多列布局,依赖于灵活的栅格和图片,在小屏幕中某列内容往下排。

我把这种模式列为“最灵活”,是因为在很多尺寸的屏幕中,主要布局结构并没有很大改变,直到在很小的屏幕当中。这个设计依赖于灵活的栅格来适应不同的屏幕尺寸。下面是几个使用这种模式的网站示例。

当然这几个例子有不同的地方:元素移动的方式不同、屏幕尺寸划分的不同等,但是大体上,这种模式有着很多的相似之处。

列内容往下排(Column Drop)

另一种模式以多列开始,以单列结束,当屏幕尺寸变小,列内容会往下排。不像第一种模式,这种模式的元素大小基本保持不变。

各列内容在分辨率临界点有怎样的变化,何时变化和如何变化,取决于每个不同设计。但是大体上,在窄屏幕中,导航或者主要内容是放在顶部的。以下是这种模式的几个例子:

布局切换(Layout Shifter)

这种模式尽最大可能地去适应不同的屏幕尺寸。即是,不同的布局应用于的大、中、小屏幕当中。因为这本来就花费更多的工作量,所以相比前面两种模式,这个的受欢迎程度稍低。

基于所见的最常见的网站例子,虽然我把这种模式笼统地括入以上的插图,但事实上这种模式是很多创新产生的地方。所以,没有哪种固定格式可以概括所有这种模式的设计。看看以下几个例子:

最简单(Tiny Tweaks)

这是最简单的模式,所以也是不常用的模式。大概是因为很少公司会有这么简单的网页,内容少并且是单列布局。对于使用这种模式的网站,多设备适应也仅仅是一些关于文本和图片的简单的变化,

插图看起来不是那么有说服力,所以,直接看例子吧:

屏幕以外的空间利用(Off Canvas)

虽然以上列了几种不同的模式,但是它们之间还是有相同的地方。它们都会在小屏幕当中,把内容往下掉,结果是页面很长,包含很多的内容模块。另外可能不太明显的一点,是它们同样地依赖屏幕的空间以调整页面布局。

但是你可能会疑问,这不就是我们的目的吗?这只不过是,我们把思想局限在了可视的范围内。实际上,屏幕外的空间总是比屏幕上的空间大得多。好好利用吧!

就如上图所示,Off Canvas模式利用了屏幕外的空间,它把内容或导航隐藏在这里,直到在大屏幕显示或者在小屏幕用户展开它。这种模式出现在一些移动网站和原生的移动App当中。

Facebook的移动Web利用了左边的空间,把导航选项隐藏在这里,直到有人点击链接展开它。在这时候,屏幕外的内容就展示在屏幕当中。有些响应式设计采用了相似的方法,但是其中有些遇到了可访问方面的问题

Path的原生移动App采用了一种分层技术来创建Off Canvas效果。这个App利用了屏幕的左边和右边来导航。

Tokil Jahnsen创建了 proof-of-concept ,模仿了Path的设计。

Google 的移动版本利用了上面的部分,把导航信息隐藏在此。当用户点击“more”的时候,这些选项从上面滑动到可视区域。

Off Canvas 模式的大体思想是,在小屏幕, 除非被点击 ,附加的元素是被隐藏的。随着屏幕变大,可视部分越来越多,直至没有需要展开的元素。如果有人有兴趣用响应式设计思想创建这种模式的网站, 请联系我!

我觉得Off Canvas 模式比较有意思,因为它避免用户在小屏幕中滚动屏幕和导航。它把网页的区块进行分离、分标签、按需出现。

原文:Multi-Device Layout Patterns,作者是 Luke Wroblewski
译文:多设备的Web布局模式,译者是Vivien Chen

响应式布局现在看来做前端的同学都要开始更深入的研究了吧。但在一些情况下也有不响应的理由。

4个理由不响应

1。响应设计,增加了开发时间超过预算

想想原本做前端开发苦逼的工程师就要兼容多浏览器的兼容,还要和ie斗个你死我活的,现在又要兼容多平台。要知道相同系统下的,不同浏览器显示效果 不一样、要知道不同系统下的,相同浏览器显示效果不一样、要知道不同系统下的,同样的浏览器显示效果不一样,要知道不同系统下的,不同浏览器显示效果根本 不可能一样。现在好了多了一分辨率这个变量。那工作量和成本是不是成阶增长的,我想只有你自己才知道了。

2。移动用户的需求和桌面用户不同

在大多数情况下,一个移动端的网站展示内容,往往仅仅是压缩它的桌面对应版本。这样就造成了一个问题,内容不变,但区域小了。大量的内容挤进一个很小的容器页,当然这些内容是可以垂直向下显示的。但大量的信息,并不是移动用户所必须的,他们没有时间来查看这堆信息。就像人们更喜欢在移动端使用微博而不是使用博客一个道理。

3。响应网站的可用性变差

差的可用性可能说的又点主观,但确实有类似的实例。

很多时候我想查用ipod看自己博客的时候,都会先进入移动版,但我很快发现,移动版里有很多信息不能直观的看到。然后我 会很快的切换到桌面版。因为一样大小的页面显示更多的信息,并且方便放大缩小的操作也很方便,这些已经让移动版的简洁显得并不那么重要了。顺便吐下 槽,ipod丢了3个多月了。呜呜….

4。响应网站往往有不必要的加载时间。

响应式设计一个目前的实现趋势是,工程师往往隐藏页面的元素使页面内容减小,以达到减少内容的目的,但这样做并不是最好的方法,隐 藏的图像仍然加载,桌面版本的所有脚本也都会加载,加载的文件大小和时间并不减少,但可视的内容却少了。这样算是不是很不划算那。而且国内的3G流量费用 贵的吓死人,看个网站就把流量用光了,不知道用户会选择选择更高的套餐来使用你的网站那,还是选择不使用的网站那。我想结果显然易见。

任何事没有绝对的对与错,技术也一样,从不同的角度看就有不一样的结果。做的越多也就错的越多。 这也是一个不争的事实。在这个过程中,前端开发的朋友们,还是要根据公司的要求来自行决定布局的选取才是关键。我是支持响应式设计的,但同样认为它有一些 弊端和实际应用的问题,也些问题也阻止了响应式布局在这些项目上的应用。最后送一句话,用不用你说的算。好不好,客户说的算。

  • 相关资源
  • twitter的响应式开源库:http://twitter.github.com/bootstrap/
  • 各种bootstrap的风格: http://bootswatch.com/
  • bootstrap的样式定制:http://bootswatch.com/
  • jQuery Masonry开源库:http://masonry.desandro.com/
  • Iostop库:http://isotope.metafizzy.co/index.html

本文转载自:http://www.dqqd.me/responsive-web-design/

转载申明:为了给广大网友提供更有价值的内容,我会把我认为优秀的互联网方面的文章转载到W3Cshare。本文为转载文章,不代表本人立场与经历,如果侵犯了您的权益,请联系本人修改文章。

本文作者:两千年的孤寂

2014年的目标:1、入手kp2,多看几本书。2、至少旅游一次。3、带公司走上正轨。少说话,多做事!我不是最好的,但我要做最努力的...... 本站主题交流群:465295619,不闲聊!以后你会知道它的重要性!你懂的~

继续查看有关 的文章

本文密切相关的文章

网友评论3条 ,博主回复1

  1. 难度系数很大啊啊啊啊

    疾风02-23 01:33 回复
  2. 这个好难啊,还没研究到这个程度

    所谓刚子02-20 16:51 回复
  3. 哎,头大的css

    kn007 02-20 15:21 回复

发表我的评论

*

*

取消