响应性设计中的”金发女孩”方法

译者注：金发女孩（Goldilocks）指的是大家耳熟能详的故事——三只熊。金发女孩闯进了三只熊在森林里的小木屋。女孩坐了三把椅子、喝过三碗汤，睡了三张床。前两个不是太大，就是太小，不是太烫，就是太凉，总是在第三次，也恰好是最后一次才找到“刚刚好”的那个。这个故事包含了许多“最恰当”的意味。作者用“金发女孩”应该指的是将复杂的设备情况简化为三种情况：太大、太小、刚好，并且这种方法是“刚好”适合所有设备的。

这是一篇关于“方法”大于“技术”的文章，作者提出了一种“通用性”设计的思路，并且给出了比较具体的实现方案——先基于可读性做设计，再根据“太大”、“太小”、“刚刚好”三种情况分别处理。至于如何用现有技术来实现，能不能实现，以及响应性设计本身存在的性能问题并不在文章的讨论范围内。

既然作者提出的是新思路，那么旧的思路是什么？如果你想了解，可以看看这个网站：http://stuffandnonsense.co.uk/projects/320andup/

移动浏览器的数量增长得非常快，全世界已有超过4亿的移动设备。我们不能再假设网站只在一个拥有中等分辨率的桌面监视器中被浏览。或许我们从来就不该这样假设。

问题的答案就是由Ethan Marcotte提出的响应性网页设计（Resposive Web Design）。我们只开发一个适应所有设备的网站，而不是为每个设备开发单独的网站。然而，目前针对响应性设计的方法，仍然是基于一些流行的设备，因此，也很可能会随着这些流行设备一起被淘汰。

如果我们能创造一种真正通用的、独立于设备的设计呢？无论你使用那种设备浏览，这种设计看起来就像是刚刚好为这个设备而做的。在New Adventures中，Mark Boulton谈到了为内容而设计，而不是画布（designing from the content out， rather than the canvas in），我们很认同他的说法。或许要创造在所有设备中通用的设计的唯一方法，就是把设备统统忘掉。

试试这个在线例子。

现行惯例

响应性设计的现行方法是把设计与设备绑定。它根据最常见的设备尺寸来使用像素宽度，但我们不认为这种方法足够好。它导致了设计要基于两个非常容易变化的因素：

设备分辨率；以及

像素

设备分辨率

有成千上万种设备和可能的环境，我们无法全部支持。所以我们就选择一些流行的设备，并基于它们的分辨率做设计，忽略市场上其他的产品。随着技术发展，分辨率的提高，我们的网站看起来将会很过时，就像现在看到的600×400的网站一样。

像素

像素的大小不是固定的——至少显示出来的大小不是。在iPhone上，16像素的文字可能只有Macbook上的60%那么大。以像素为尺度的设计在不同的设备中会产生不一致的效果，并可能对可读性和可用性产生负面影响。

设备并不重要

那么，我们要如何才能像Mark Boulton建议的那样，根据内容做设计？在实践中，这表示从内容的最常见形式——段落元素开始，然后逐步完善整个布局。

我们常常倾向于先设置body的文字尺寸。但制造商和用户已经为浏览器设置了适合阅读的默认尺寸，我们认为没有太好的理由，你不应该改动它。

然而，如果你的整个设计是基于这个基本的文字尺寸（即设计中使用em作为单位），随着基本文字尺寸的增加或者减小，你的设计也会发生相应的变化。使用em令你的设计独立于分辨率。

接下来，用max-width设置段落的行宽，尽可能保证可读性（一行66个字符）。不同的字体之间会有区别，但一般来说，30em左右的效果通常不错。这个设置的是你的单栏布局的宽度，让它刚好适合阅读。

“金发女孩”方法

现在，不管使用什么设备来观察你的设计，可用的空间可能是更大、更小，或者刚刚好。你可以用media queries来充分利用它们。

太大

如果有比单栏的宽度大很多的宽度，你可以考虑使用一个多栏的排版。例如，如果单栏的宽度是28em（此外左右各有1em的外边距），屏幕的宽度超过45em，你有足够的空间切换到三栏布局——栏宽13.5em，1em的间距，主容器占两栏（这样保留了阅读的最优宽度）。

太小

如果空间小于最优阅读宽度，你需要尽量利用所有的空间。例如：

将外边距减少为原来的一半（但不要去掉它）；同时/或者

将悬挂的标点设为行内（这样它不会被截断）。

刚刚好

如果空间刚好适合你的单栏，你就没什么好担心的。你的工作完成了，去喝杯茶吧。

我们并不是说单栏布局对每个网站来说都是最好的布局。我们不知道用户会看到哪一种排版，所以我们需要让网站在单栏和多栏状态看起来都一样好。然而，在实践中，我们发现这样有助于做好单栏的状态，再将其他更大或更小的情况处理好。

优点

我们认为“金发女孩”方法是有很多优点的。

使用目前流行的方法，即使你只需要为苹果的设备设计（很幸运哦），也需要考虑五种状态：

1 iMac（大显示器）

2 Macbook（小一点的显示器）

3 iPad（平板，可能是横放的或者竖放的）

4 iPhone4（Retina屏幕，译者注：640×960）

5 iPhone（非Retina屏，译者注：320×480）

Edenspiekermann网站看起来使用了这种方法，并且工作得很好，但不是一个可放大的解决方案。而使用金发女孩方法，你只需要考虑三种状态：

1 太小的屏幕

2 太大的屏幕

3 刚刚好的屏幕

不需要考虑设备的分辨率，你的布局在所有的设备和环境中都能工作，甚至还未出现的设备。如果一个用户的基本字体尺寸是80像素（不管处于何种原因），这种方法应该仍然会为可用的空间提供合适的布局。这就是设备独立的。

最终，技术会变化，但人体在过去的几千年里一直相当的稳定。为人（的阅读）设计，而不是为技术（设备尺寸和分辨率）设计，你的布局不会很快就过时的。

从此，设计师们过着幸福的生活……

via designbyfront

作者：Chris Armstrong

译文出处：Seemeloo西米露