文档章节

多设备的Web布局模式-响应式布局技术

mickelfeng
 mickelfeng
发布于 2014/02/25 19:17
字数 1339
阅读 61
收藏 6

通过灵活的栅格和Media Queris,响应式Web设计能够让页面布局适应不同的屏幕尺寸。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。下面我列出了一些比较热门的适应多设备的布局模式。

最灵活的(Mostly Fluid)

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

multidevice layout patterns

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

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

列内容往下排(Column Drop)

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

multidevice layout patterns

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

布局切换(Layout Shifter)

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

multidevice layout patterns

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

最简单(Tiny Tweaks)

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

multidevice layout patterns: Tiny Tweaks

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

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

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

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

multidevice layout patterns: Off Canvas

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

multidevice layout patterns: Facebook off screen

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

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

multidevice layout patterns: Path off screen

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

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

multidevice layout patterns: Google off screen

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

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

与这个相关的话题,Brad Frost 最近对 响应式设计导航解决方案 做了很好的分类。

原文:Multi-Device Layout Patterns,作者是 Luke Wroblewski


本文转载自:http://lunax.info/archives/3192.html

mickelfeng

mickelfeng

粉丝 237
博文 2803
码字总数 605868
作品 0
成都
高级程序员
私信 提问
Responsive Web Design 响应式网页设计

Responsive Web Design 响应式网页设计 1、常见的布局方案 固定布局:以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸; 可切换的固定布局:同样以像素作为页面单位,参...

好程序员IT
05/13
11
0
10款帮助你设计超酷响应式布局的jQuery插件

日期:2012/02/24 来源:GBin1.com 如 果你关注最近几年的web设计,那么响应式布局(responsive layout)设计对于你来说肯定不是一个陌生的词汇。 相对于传统的页面设计来说,今天的设计者需要...

gbin1
2012/02/25
8.2K
2
聊聊安卓折叠屏给交互设计和开发带来的变化

很多年前,前端同学都觉得PC端的适配(兼容处理)难,都认为移动端的时代适配会容易得多,也无需考虑那么多的事情。事实并非如此,移动端的时代同样面临着各种适配的处理。特别是刘海机的出现...

阿里云云栖社区
05/17
0
0
什么是响应式Web设计?怎样进行?

说正事儿。准备在近期的几篇里集中翻译学习一下"响应式Web设计"的相关话题,包括概念、实践方式、案例及观点讨论等方面。相比于从前做的文档译文,这些文章篇幅要长的多(甚至要加分页了!),...

山哥
2012/02/28
140
0
如何利用栅格系统完成后台页面响应式设计(自己学习)

如何利用栅格系统完成后台页面响应式设计,介绍响应式设计的思路与方法。 一、什么是响应式? 按照本人自己的理解,响应式就是通过合理的设计方案配合规范的技术实现策略,使同一个 Web页面在...

石叶子
2018/12/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

debian10使用putty配置交换机console口

前言:Linux的推广普及,需要配合解决实际应用方能有成效! 最近强迫自己用linux进行实际工作,过程很痛苦,还好通过网络一一解决,感谢各位无私网友博客的帮助! 系统:debian10 桌面:xfc...

W_Lu
34分钟前
10
0
aelf Enterprise 0.8.0 beta有奖公测,“Bug奖金计划”重磅开启

2019年9月30日,aelf Enterprise 0.8.0 beta版正式发布。aelf Enterprise 0.8.0 beta是一个完备的区块链系统, 包含完备的区块链系统、开发套件、开发文档、以及配套的基础应用和基础服务。 ...

AELF开发者社区
35分钟前
8
0
oracle 初始化数据库脚本

create user lpf identified by 123456; create tablespace lpf_ts_cms datafile '/opt/app/oracle/product/11.2.0/lpf.dbf' size 200M; alter user lpf default tablespace lpf_ts_cms; sel......

internetafei
39分钟前
6
0
《区块链DAPP开发入门、代码实现、场景应用》笔记1——天外飞仙DAPP

Solidity编程语言解决了编写智能合约的不友好的问题,但是当合约编译并部署之后,对与这些接口的访问,对于一般的使用者来说,门槛有点高, 对普通用户来说也是非常不友好,为了使广大用户理...

柯南和由美
44分钟前
6
0
流程图制作软件推荐_流程图制作软件哪个好

流程图(Flow Chart)是一种表示算法思路的图示,通过特定图形、图表可以直观的说明某一过程。这种过程既可以是生产线上的工艺流程图,也可以标明某项任务必需的管理过程。为了便于识别,绘制...

工具分享
46分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部