如何合理高效地设置响应式设计的响应点

标签: 交互设计 响应式设计 | 发表时间:2013-09-04 09:11 | 作者:dream
出处:http://www.boxui.com

                          

Untitled-2

你可以轻易找到许多如何设置响应式设计响应点的攻略,但是这些过时的设计方法都是以主流屏幕尺寸为依据的,效果并不理想。其实并没有“主流”屏幕尺寸这一概念。另外一个主流的方法是当布局被打破时设置响应点。这个方法听起来好一些。但是仍有疑问,我们怎么判断是否布局被打破了呢?其中一个合理回答是依照经典可读性理论定义响应点。

名人的看法

Robert Bringhurst认为,单列页面里的内容被设置为普通有衬线字体和普通字体大小时,排列45至75个字符长度为最佳。Josef Müller-Brockmann认为,一行如果能容纳10个单词那么这栏就很容易阅读。有许多原因会影响实际的字符数或单词数,但这是一种基本理论。如果你从小屏幕开始,然后你逐渐增大,主要内容的宽度也可能会变得比75个字符或者10个单词更宽,一些改变就会发生了。简单的说,这些就是你的响应点。

多种因素决定理想尺寸

许多因素决定了理想尺寸的大小。比如,德语的长度比英语长,那就需要更宽的位置了。你理解对了:对于需要多种语言的国际网站你必须有不同的栅格。字体、字号、背景对比度、行距、字间距、文字类型等等这些因素都会影响一行文字的长度。

设计师的自我见识和经验对于尺寸的判断影响很大。你可能很容易就判断出75到90个字符的长度是最理想的。但是我不是设计师,也不是排版家,所以我只能根据书上的理论知识来判断。当然了,知道自己在干啥的这类人,完全可以自己构想一下所谓理论。

Untitled-3

我制作了这个国际尺寸滑动器,让你了解一小节是多宽。这个小工具看起来只是在变化语音和字体,但是你会发现这两个变化值分别能带来极端的效果。只是拿德语或波兰语同英语比较,或者更详细点,德语设置为Verdana字体与英语设置为Georgia比较。差异十分巨大:10个设为Verdana的德语单词宽38.5ems,但是10个设置为Georgia的英语单词才宽22ems。在许多默认浏览器的设置里,这将会是616px对352px的差距。你可以看到两个简单的因素对栅格的巨大影响。

合理的尺寸对于一篇文章来说十分重要。我知道网络也并非只有文章。你也可以很顺畅的使用只有很少文字说明的网络应用。但是确定响应点的时候首先考虑尺寸也是非常好的做法。

Untitled-4

 

实例说明

因为只是一个例子,所以我用的是一个简单的博文。它是一篇结构清晰但内容简单的文章,包含一些常见的语义元素。这些元素不足以确定响应点,但是会给我们一些帮助。排版是一个合理的出发点。我忽略了头部和logo,只先集中在内容上。

当然,如果你在浏览器里打开这篇没有样式的文章,会觉得它非常丑。它没有任何样式除了浏览器默认自带的那些样式。文章和浏览器窗口一样宽,在桌面浏览器上看时觉得太宽了点。这就像大家在IE6上看到的网页的感觉一样——很容易看懂但是样式糟糕。

添加一些基本的排版样式和max-width属性之后,这篇文章马上看起来好多了。这个页面现在可以当作定义不同响应式栅格的出发点了。这个单列排版在小屏上可能需要调整,在大屏上时需要增加一些列,不管是为了让排版更美观,还是展示更多信息,比如导航或者侧边栏。

Untitled-5

合理响应点

我在高中毕业前从来没用心学过数学,所以我使用了一个很简单的栅格。聪明人可以借用相同的思想但是使用更复杂的栅格系统。这章主要是定义响应点;所以怎么设置全由你自己决定。

小屏

我先从小屏幕开始。Oliver Reichenstein定理,是我非常喜欢的一个理论,它的字体设置不以屏幕尺寸为依据,它依据的是人眼和设备之间的距离。我们倾向于把手机拿的比电脑更靠近头一点,所以需要小一点的字体。另外一个Robert Bringhurst定理,就像上面阐述的,理想尺寸不应该小于45个字符。在我们的例子中,可以使用16px字号的Georgia字体作为默认字体,这会让字看起来稍微小点。两种理论都很好,它们都告诉我们在小屏上要减小字号。所以,我们在小屏手机上需要写的代码如下:

Untitled-6

这说明当尺寸小于45个字符时,使用小字号。我也减少了页面两边的内边距使主体内容有更多空间显示。看看下面的例子。

Untitled-7

大屏

有时单列就足够了。内容主导型的网站比如博客,单列是最理想的布局。但是多列布局在很多情形下在大屏上显示效果会很好。有时你可能想显示导航,或者一些有用的小插件。你肯定会想把这些东西放在内容区旁边。

我们也可以自己做一些事情。如果正好这里有空间可以额外放一个栏目,我们可以自己设计我们的文章布局。我在左边增加一个宽度为33%的栏目,标题和文章的第一段占满这个区域。其他元素如引文和图片也能填在这个区域。

这里的代码就有点复杂了。这么写结构不是唯一的或者说最主流的方法。但是我是这么做的。

Untitled-8

当屏幕宽度超过34ems时(内容宽30ems,外边距宽4ems),页面最大宽度为51ems:34+(34÷2)。现在文章占整个宽度的2/3,左边新栏的宽度是1/3。在它右边的h1和p元素内容应该设置一个负的外边距值,值为内容宽度的50%。这就是为什么我一直怪自己没有好好学习数学了!

Untitled-10

 

更大屏

我们可以加个第三栏,第四栏,第五栏。这取决于我们的内容。我们可以利用相应空间展示一些图片和相关内容。这完全取决于你自己的设计。在我的示例中,我们可以把脚注放在内容的右边。别笑话我了~我又不是视觉设计师,就这么排版吧。看看代码吧:

Untitled-11

现在文章宽50%,左右两边的外边距宽25%。边脚注向右偏移了50%的距离。脚注宽为50%减去2em,看起来会更好些。p和h1标签的代码不变。注意calc这个属性不是所有浏览器都支持,所以我们得留点后路。所以代码如下:

Untitled-12

我也知道不是所有前缀都有用,但是我建议全部写上。如果你不想这么做,建议你记住哪个浏览器支持什么CSS属性,是否需要带前缀。如果能正确理解层级关系,是非常有用的。当然,它得排的好看。我能清楚看到我的样式表是怎么生成出漂亮的样式的。

现在我们就有一个响应式设计的网站了,基于文字大小和屏幕尺寸的。响应点是基于逻辑运算而不是随机因素如当下流行的设备屏幕尺寸等。这个设计对于未来的修改和浏览器用户都有好处。因为所有元素大小都是基于文字大小来设置的,完全能迎合访问你网站的用户的设置喜好。当文字大小变换时布局也不会被破坏。

Untitled-13

 

技术方面

当我们几年前开始做响应式设计时,我们会先创建一个pc网站,然后增加媒体查询为小尺寸屏幕改写样式。我们发现这种做法并不正确。现在我们都知道创建CSS最好是先从小尺寸屏幕开始。毕竟变大是容易的——树会生长,婴儿会长大——缩减很困难。有没有试过精简一辆汽车?一定程度是可能的,但还是很辛苦。

在大多数情况下,从小尺寸屏幕做起是合乎逻辑的。当要把东西做的更大时,我们只需要为大尺寸屏幕添加一些媒体查询然后调整布局就可以了。但我认为这并不是真的指小屏幕,而说的是默认状态。

优先默认设置

我们需要确认的第一件事不一定是小尺寸屏幕的样式,而是默认设置:各个地方浏览网站时的样式,无论屏幕大小。这些样式包括字号、留白、品牌风格如边框和背景之间的关系。由于这些样式是每个终端都会用到,则不应该放在媒体查询里。需要在媒体查询里定义的内容应该是在基础样式上的一些例外(比如更小号的字体)或是补充(比如栅格)。

这就意味着只有当某个特定的元素在小尺寸屏幕上显示有差异时,我们才使用媒体查询。这样想想你就会发现这种情况有很多:页头、导航以及其他复杂的元素在小尺寸屏幕上常常是根本不一样的。像我举的例子一样,把这些元素的代码放在一个媒体查询里是正确的,因为它相对于默认设置来说是个例外。

 

细节方面

上面的例子是很基本的,我也没有说明太多细节。有两点是至关重要的,所以我在这里加上。一个是关于媒体查询中的长度单位ems,另一个则是响应点。

响应点范围

最近关于术语“响应点”的已经有一些讨论。Mark Boulton和Ben Callahan认为我们应该称呼它为“优化点”,而Jeremy Keith则在响应点和“调整点”之间犹豫不决。本章节内,我会聚焦在响应点上——也就是当内容需要更多或更少的展示空间时布局所发生的变化。现在我来介绍另一个术语:响应点范围。

我们称呼那些改变布局的媒体查询为“响应点”。我们倾向于把这些响应点作为直接的变化:当一个布局达到它的最大宽度时,我们立刻转换到下一个布局显示。转换之前先保持上一个布局并增加一些留白,这样的做法更好些。例如,一栏和两栏布局之间的转换会导致显示一个非常小的主栏。就像我之前说的,我们可以让它保持一小会,而不是在内容达到它的最大宽度的瞬间就立刻转换。这是绝对不会破坏布局的一个非常简单的绝招。

媒体查询中的长度单位ems

在媒体查询里使用ems单位是很奇怪的一件事。你可能会认为它们应该是响应CSS中指定的字号的,但事实并非如此。它们会响应访问者使用的浏览器的字号。你仔细想想就会觉着这也是一件合理的事情。如果他们响应CSS里的字号,你可以禁用增加字号的媒体查询。这段代码可能会陷入死循环:

Untitled-14

如果媒体查询响应这个样式表中定义的字号,那么当我们慢慢的增加浏览器宽度的时候会怎么样呢?只要屏幕显示的宽度超过20ems,字体会立刻放大两倍。这就意味着页面宽度现在是10ems,而浏览器则应该忽略这个媒体查询。这会导致这个较小的字号会立刻再次触发这个媒体查询。这会陷入死循环。

这种做法不仅仅从技术角度来看是合理的,从用户的角度来看同样是合理的:如果用户想要更大一点的字号,那么布局就应该以响应字号的方式来优化。这也正是我们一直在做的事情。与此同时,对于像我这样的人来说真是一个相当大的麻烦事,我们在高中就应该已经注意到:媒体查询中设置条件用到的ems应该用与代码里面使用的的完全不同大小。这真是太复杂了。如果你想要了解更多,绝对要去读Lyza Gardner关于这个主题的经典文章,“ems单位的巨大作用:让媒体查询比例化!”

真正困扰我的事情是,我们需要一个傻瓜式的工具来估算一行当中的字符数。Webkit目前才实现把“字符ch”加入构建日程中;我们想要自如的使用可能还需要一段时间。一个字符实际上就是使用字体中0的宽度。这听起来是一个非常有用的响应式设计,但我并不确定在媒体查询中将会如何运作。我们拭目以待。

 

总结

理想情况下,针对各种屏幕尺寸的不同布局应该根据内容单独定义。当然也会有一些情况是页面中其他的元素,比如banner,会直接定义内容的宽度。就算在这样的情况下,易读性理论会有所帮助;你可以为了让页面保持在一个完美行宽的边界里而去增减字号。只是不要把文字弄太小就好了——毕竟人们还是想要阅读它们的。

幸运的是在大部分情况下,传统的排版理论就可以助你决定响应式站点的正确响应点。你甚至可以根据不同的语言来创建不同的布局。当你在做一个大型的国际型站点时,这可能是个好想法。最最重要的是,不论是现在还是将来,运用本章节的理论来针对各种不同的屏幕尺寸更好的设计你的网站。我列举的案例用的是一个非常简单的栅格,不过结合更多复杂的栅格之后,本理论可以帮助创造更合理、精彩的网站。

(MARKO DUGONJIĆ 著      SEVENSHAO & TIMMLIU 译 )

原文链接: http://www.smashingmagazine.com/2013/03/01/logical-breakpoints-responsive-design/

相关 [响应式 设计] 推荐:

响应式网页设计

- - 前端观察
这个话题最近很火爆,我也一直在关注,响应式网页设计和移动互联网密切相关,并因移动终端的丰富和普及而兴盛,并且是一个颇具争议的话题,我今天将和大家探讨下. 上周写了个简单的ppt在组内大概介绍了下,感兴趣的话可以 先看下这个PPT. 在说到这个话题前,我们先看下网页设计和前端开发的现状:. 全球有超过53亿手机用户(包括传统手机).

响应式Web设计

- - 葵中剑's Blog - SwordAir.com
响应式Web设计( Responsive Web Design – RWD)一般是指那些使用CSS3 Media Query特性制作站点,其可以适应不同视窗尺寸的布局. 虽然很早就已经有了类似RWD的概念,但直到最近一年里才开始变得特别流行,各种文章、例子、工具、模板,不断地从无到有,诸如:. 响应式Web设计50个例子和最佳实践.

响应式网页设计

- - IT技术博客大学习
响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案. Web设计应该做到根据不同设备环境自动响应及调整. 当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式;我们应当向下兼容、移动优先.

响应式Web设计

- - 阿里巴巴(中国站)用户体验设计部博客
在设计中经常遇到这几个问题:. 1.想要网站兼容手机、平板电脑、pc,就得为不同的设备定制不同的版本. 2.想要网站的某些页面在宽屏显示器下一行显示更多的内容,又得为宽屏定制一个版本. 3.很多人并不是在全屏的情况下浏览我们的页面,如果让页面随着浏览器宽度改变而相应的调整会不会比较好. 有没有办法能有效解决这些问题呢.

漫谈响应式设计

- - 新浪UED
学究一些,首先大家先了解一下响应,然后再讲一下设计,响应就是我发出的请求能得到什么样子的回复,比如我说“你好”,你会很容易的给我回复“你好”,因为大家都是中国人,如果我说“hello”,我们这代人如果上过初中,他也会给我说“Hello”,但是如果我给对你说“Bonjour”,那可能只有高配的人才可能知道了.

淘宝响应式WebUI设计实践

- - Taobao UED Team
感谢贷岩的邀请,我在本期奶茶会上做了“响应式设计实践”的分享,是接着上一次的话题进一步讨论“如何实现”. 响应式Web设计(Responsive Web design)是当下比较流行的话题,什么是响应式设计. 简单讲,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整.

Screenqueri.es:响应式设计测试工具

- - 我爱水煮鱼
当你创建一个响应式的布局的时候,在绝大部分流行的分辨率的设备上进行测试是非常重要的,这可以让你决定页面上的每块是否现实或者优化它们的显示方式. 今天给大家介绍的 Screenqueri.es 就是一个免费的基于 Web 的响应式设计的测试工具,它能够让你输入一个网址,然后选择移动或者平板设备,然后对你的网站在各个分辨率下进行测试.

非响应式设计的viewport

- - 前端观察
整理自: Viewport Meta Tag For Non-Responsive Design. 中文原文: 非响应式设计的viewport. 请尊重版权,转载请注明来源,多谢~~. 大家已经非常熟悉 响应式网页设计了吧,但是我们通常会忽略很多旧的没有采用响应式设计的网站,其实这类网站在移动终端的用户体验更为关键——因为它们没有对移动设备做任何优化.

响应式设计简易指南

- - Jing
我们想让我们的网站通过响应用户的行为、设备的屏幕大小和屏幕方向,从而在所有设备上都能用. 截止2013年,有成千上万种不同的设备在浏览网页,所以我们不可能设计出适应所有屏幕大小的网页. 相反,我们必须得采用一种更加流畅的方式去设计. 最近一个比较火的词叫移动优先. 它的意思是,先为移动端设计样式,然后再根据需求去优化更大屏幕的样式.

响应式网页设计示例

- - CSDN博客推荐文章
若要全方位测试你自己或别人的响应式网站,则需要针对每一种设备和不同的屏幕尺寸,分别准备不同的测试系统. 尽管这是最完美的办法,但通过改变浏览器窗口大小其实就可以完成大多数测试. 除此之外,还有很多第三方插件和浏览器扩展可供选择,通过它们可以将当前浏览器窗口或视口设定为指定像素. 必要时,还可以自动将当前浏览器窗口或视口切换成为默认大小(如1024×768像素).