响应式布局的5种模式以及不用响应式布局的理由

agevs 2014-09-11

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

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

最灵活的(Mostly Fluid)

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

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

  • Five Simple Steps

  • Princess Elisabeth Antarctica.

  • Trent Walton

  • Sifter

  • ChoiceResponse

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

列内容往下排(Column Drop)

另一种模式以多列开始,以单列结束,当屏幕尺寸变小,列内容会往下排。不像第一种模式,这种模式的元素大小基本保持不变。分享一个最好用的UI前端框架!

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

  • Modernizr

  • Owltastic

  • Wee Nudge

  • Festival de Saintes

  • Ash Personal Training

布局切换(Layout Shifter)

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

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

  • Food Sense

  • Performance Marketing Awards

  • Forefathers Group

  • The Boston Globe

  • Andersson-Wise Architects

最简单(Tiny Tweaks)

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

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

  • Future Friendly

  • Path

  • Neovada

  • Lycos

  • Design made in Germany

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

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

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

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

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

  • Barack Obama

  • Kaemingk Christmas 2012

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

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

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

Off Canvas 模式的大体思想是,在小屏幕, 除非被点击 ,附加的元素是被隐藏的。随着屏幕变大,可视部分越来越多,直至没有需要展开的元素。

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

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

4个理由不响应

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

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

2。移动用户的需求和桌面用户不同。分享一个最好用的UI前端框架!

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

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

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

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

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

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

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

Global site tag (gtag.js) - Google Analytics