固定与流式布局
2003年12月15日星期一（格林威治标准时间下午1:30）
继简要介绍完弹性布局后，我将就近期再次引起热议的两种“老派”布局——固定布局和流式布局——之间的争论贡献我的观点。
它们之间的权衡大致如下：
流式布局，内容会根据窗口宽度自动调整（例如 HTML Dog），能够充分利用“屏幕空间”和用户计算机的处理能力，减少滚动条的出现，并使更多内容显示在视口内（above the fold）。
固定布局，内容区域具有固定宽度，可以用来缩窄内容呈现的列，使其更易于阅读，就像报纸的排版一样。
刚开始从事网页设计时，我偏爱固定宽度页面。我认为那样看起来更好。多年来，随着对可用性理解的加深，我逐渐被说服流式布局是更好的选择。我的看法是，减少用户需要做的工作量（即滚动）可以使网页更易用。
这场争论的焦点在于可用性。问题是，两种方法都各有其可用性上的优势和劣势。流式布局会填满屏幕，从而在视口内显示更多内容，最大限度地减少垂直滚动，但跨越很长距离的文本可能更难阅读。同时，横向滚动的可能性（在小屏幕设备如移动设备上可能发生）也得以最小化。然而，固定布局提供了最初更容易阅读的格式，但同时也带来了增加滚动可能性的问题。
最近的大部分争论（例如来自Mike Golding 和 Paul Scrivens）都倾向于固定宽度布局。我看到的根本原因在于设计师更喜欢它。没有证据表明这种方法更易用——乍一看，窄列可能更容易阅读，就像报纸一样，但正如我在 Mike Golding 的文章中所评论的：
……我们不能直接将印刷媒体的问题与电子媒体的问题进行类比。更窄的列可能确实更容易阅读，但报纸读者可以看到整版——他们不需要滚动任何东西，而且如果报纸每页的一侧完全空白，他们可能会有点恼火！
我认为，许多知名设计师偏爱固定布局的论点并不能证明什么。尽管我喜欢有吸引力的设计，但我更关注功能而非形式。我希望利用设计来实现最佳的用户响应——优化可用性并最终优化功能，而不是让它仅仅在我的视觉上更令人愉悦。当可用性专家开始采用固定宽度时，我才会真正重视这样的论点。
滚动（尤其是垂直滚动）以及将信息放在“视口内”（即在页面未滚动时显示在窗口中的上部区域）的重要性，确实不如以往那么重要了。如今，大多数用户已经习惯了滚动，并且明白内容也会出现在视口下方。然而，我仍然认为，这些问题尽管不那么重要，但仍然很重要。
我主要讨论了流式布局相对于固定布局的优点，因为其他地方出现的高调争论都赞颂了固定布局的优点，提出了一些很好的观点，但却忽略了流式布局的许多优势。
我在扮演“反对派”。我真的看不到任何绝对优越的方法——两种方法都有优缺点。
在最近这场辩论再次爆发并出现一些支持固定宽度布局的非常有见地的评论之前，我非常倾向于流式布局。现在我不得不说我还在观望——我开始更倾向于固定宽度，但尚未完全信服。
我认为这是网页设计中最重要和最有趣的辩论之一，我非常希望看到一些真正硬核的可用性测试结果。
评论
评论2
窄文本列与长文本列的可读性相对容易度，是设计师们在这个话题上发泄时总是会提到的论点。但其中有多少真实性呢？
关于印刷媒体得出这一结论的研究可以追溯到几十年前，但我所知的没有一项针对屏幕阅读得出相同结论的研究。事实上，我看到的几项研究表明，“最佳”行长度——如果存在的话——对于屏幕来说可能比印刷品宽得多。（http://www.humanfactors.com/downloads/nov02.asp 提到了这方面的一些有趣观点。）
总之，
报纸列-
的长度
显然不是
最佳行
长度，即使
是对于印刷品。
（与书中
使用的相比。）
我想，
可能还有其他
布局方面的考量
导致了
使用这种
宽度。
当然，这里存在一个折衷方案：完全可以使用百分比来设置尺寸，并使用 min-width 和 max-width 样式将每行字符数保持在合理范围内。IE/Win 对此的支持问题可以通过我网站上的 JavaScript 技巧来避免（没错！）。
但是，对于（非特殊展示项的）通用正文来说，如果我必须在完全固定的 ems（甚至更糟的 px）宽度和完全流动的 %/auto 宽度之间做出选择，我总是会选择流动的。我还没有傲慢到认为我比用户更了解他们希望如何查看页面。而且没有人喜欢横向滚动。
Andrew Clover 于2003年12月15日星期一下午7:29 GMT 如是说。
评论3
印刷品的行长传统值得怀疑，但你却引用了“视口内”？我认为带滚轮的鼠标才是这场争论的致命一击，正如你暗示的那样。我目前使用的 Logitech 鼠标有三个滚动按钮，外加一个滚轮。我改用固定宽度的主要原因并非易于实现，而是我确实相信较短的行长，尽管我自己的行长有点偏长。我曾被“传统”设计师千百次地告知较短的行长更好，但我将他们视为不适应我们当时都在探索的这种新媒介。然后我开始注意到，至少以我个人的阅读/浏览方式，我在阅读行长较短的网站时，信息处理和记忆效果更好。事实上，在我开始写这条评论时，我原本想说的与现在完全不同，因为我匆匆浏览了你文章的一部分，改变了我的意思和我的反应。我可以阅读几十篇研究报告，听别人谈论这件事一整天，但我只能确定地谈论我自己的经历，而这些经历极大地影响了我对限制行长的偏好，而这通常是在固定宽度设计的情况下。如果你开始留意自己的习惯和信息保留情况，你可能会注意到类似之处，或者你可能只是认为我疯了。无论哪种方式，我都公平对待。：）
Matt 于2003年12月16日星期二上午9:48 GMT 如是说。
评论4
我个人认为有一个简单的解决方案。与其使用固定的 px 宽度列，不如使用全流动的列。如果将所有列（包括导航）都设为百分比宽度，那么你就可以控制中间的列。我发现这是最好的折衷方案，并且如果你根据需要设置 div，还可以混合使用 max-widths。
但说实话——流式设计的真正问题不在于可读性。而在于用 Photoshop 设计固定宽度设计要容易得多！你可以将所有内容完美地定位在宽度内——你甚至知道你的标题图形能有多长，而不是不得不设计一个循环的或长达 1600px 的图形！
这最终是问题所在，也是为什么这个问题永远不会消失的原因。
Andrew Bowden 于2003年12月16日星期二上午9:52 GMT 如是说。
评论5
哦，我还要补充一点——如果有人想将他们的浏览器最大化到 1600px 甚至更宽——为什么不行？如果他们想那样阅读，没问题。如果不想，他们可以把浏览器调整到合适的宽度 :-) 在我看来，一切都取决于用户选择！
Andrew Bowden 于2003年12月16日星期二上午9:56 GMT 如是说。
评论6
是的，我同意 Andrew 的观点。我认为这才是问题的核心。让用户拥有选择权总是最好的方式。流式布局允许用户选择文本的宽度。这 surely 是最佳解决方案。我认为，总的来说，可用设计就是为用户提供选择，而不是在查看内容时强加太多规则。如今，用户知道如何调整窗口大小，这是一种基本的计算机技能，所以这肯定不是问题。
然而，这种流式设计确实让设计师的工作非常困难。传统上，平面设计师是为固定页面尺寸设计的（“在这个框里画你的设计”之类的）。对于流式设计，页面可以是任何宽度、任何高度，文本大小也几乎可以任意调整。这基本上使传统的平面设计方法在网页设计中几乎无效。这是否意味着是时候开发一种新的网页设计方法了？
Dan Webb 于2003年12月16日星期二下午2:08 GMT 如是说。
评论8
我一直偏爱固定宽度设计，因为我认为在 95% 的情况下它们看起来更好，并且因为较短的句子长度。
许多网站已经提供了增加字体大小、更改字体系列甚至通过切换样式表更改网站颜色的选项……也许从流式切换到固定宽度的选项也不错。
Bart Noppen 于2003年12月16日星期二晚上9:29 GMT 如是说。
评论10
这会更简单，但我至少不愿意这样做。我做所有事情都全屏，包括上网，所以如果句子太长，我无法舒适地阅读，那是网页设计师的错，而不是我的错，因为我不想调整浏览器大小。我使用 Firebird 进行标签式浏览……我不想调整我的“整个”浏览器窗口大小，因为选项卡 1 上的一个网站太宽，而其他选项卡上的其他（固定）网站在全屏时看起来不错。
我将坚持使用固定宽度，直到所有主流浏览器都支持 min-width / max-width。
Bart Noppen 于2003年12月18日星期四凌晨1:17 GMT 如是说。
评论13
我发现设计师普遍喜欢固定比例，因为它能保持设计的比例。传统设计师喜欢这一点，而且谁又能责怪他们呢。正如 Andrew 指出的，这也容易得多。根据我的经验，许多设计师（并非全部）发现很难想象他们的设计可以拉伸。我更喜欢并且现在尽可能地构建所有网站的流式布局。即便如此，固定布局也有其用武之地。结合使用固定宽度的列和能够扩展以占用额外屏幕空间的流动区域效果相当好。
Chris 于2003年12月20日星期六凌晨3:20 GMT 如是说。
评论14
关于阅读习惯的印刷研究有很多，我敢打赌其中大多数研究也适用于网络。长行的阅读难度更大是事实，我经常会增加字体大小以便清晰阅读（这会减少每行的词数），我在这里就是这样做的。设计师习惯于设计固定宽度也是事实，我甚至让我的网站看起来像页面。对我来说，说流式布局在可用性上更好，意味着我所知的排版学的一切都是错误的，而我不会这么说。
可用性专家的一个问题是，他们对排版几乎一无所知，有时简单的排版解决方案更有意义。我曾与可用性专家有过多次争论，他们总是坚持将东西移到页面顶部，而良好的色彩和排版有时可以达到同样的效果。
我有点跑题了，但 Web 可用性专家确实不考虑排版规则，这就是为什么我认为固定布局更好，而一个更好的布局是 min/max-width……
Stephane 于2003年12月21日星期日凌晨6:42 GMT 如是说。
评论15
Stephane，我不确定你认识的“可用性专家”是如何工作的，但一个真正的专家肯定不会忽视排版。可用性测试的最终目标是看用户使用某样东西有多容易。因此，如果改进排版能提高可用性，那就太好了。忽视良好排版以使某样东西更容易使用的可用性专家根本不是专家。
不幸的是，印刷排版的稳健、经过考验的规则并不直接适用于网络。印刷文字的读者不需要处理滚动，这是我在本篇博文条目中举的一个例子。我同意较短的行更容易阅读，提高了可用性，但它们会带来降低可用性的问题，而这就是问题所在——没有绝对正确或错误答案——固定布局和流式布局都有优缺点。
Patrick 于2003年12月21日星期日晚上1:24 GMT 如是说。
评论16
考虑一下：如果你使用百分比，当用户缩小视口时，列也会变小，最终会出现僵硬的瘦列问题。而且百分比的使用也可能导致无法维护导航元素的完整性，例如当列突然比列表中最长的单词还要窄时。无论你使用什么百分比，列都不会自动调整大小，最终会出现问题。
固定设计可以实现，主要内容只占用 500 像素宽度。这使用户能够调整大小和滚动，以便他们可以在查看其他窗口的同时阅读内容。最少的横向滚动——说实话，如果你要将浏览器调整到 500 像素宽，你怎么能不期望进行横向滚动呢？
（这涉及我的一大怪癖——让标准浏览器无法访问是一回事，但未能考虑到那 0.03% 倾向于在金毛寻回犬头上投影内容上网的用户，又是另一回事。我们应该在哪里划界限？在什么点上我们应该停止并说，“不，我不会迁就这个，你不需要那种灵活性？”在这个屏幕宽度普遍不低于 800 像素的时代，将页面调整到 200 像素宽真的重要吗，还是有点过度了？）
Neal 于2003年12月29日星期一上午9:31 GMT 如是说。
评论17
纯粹从个人角度来说；我倾向于将固定布局用于“艺术化”的东西，而将流式布局用于旨在清晰传达信息的网站。例如，我自己的主页使用固定宽度，并且不太适合增加文本大小，但却引人注目且图形密集。考虑到该网站的作用是吸引注意力而不是传达严肃信息，我并不为它可能在可用性方面受到批评而感到内疚。
然而，对于我最近设计的一个企业网站，情况则完全相反，它纯粹是为了传达大量信息。因此，该设计已被构建为允许一定程度的流动性和弹性。将字体大小提高到 90pt 或将窗口缩小到 100px 宽时，它仍然看起来会很奇怪，但在 500px 宽的窗口中，36pt 的文本看起来会非常完美。我相信这应该能满足大多数用户的需求和偏好，而无需在美学上过多妥协。
我个人认为，关键在于为特定情况正确处理可用性，而不是争论所有网络信息的布局优劣。
Ian 于2004年7月14日星期三下午4:00 GMT 如是说。
评论18
我完全同意 Ian 的看法。试图决定哪种设计总体上是好的，就像试图决定哪辆车是最好的。对谁来说是最好的，在什么路上，以什么速度行驶，等等？这些是人们首先需要问的问题。此外，单个网站上的多个模板正变得越来越普遍，这应该支持不同类型媒体（图形与文本等）的交付，而不会给用户带来任何不便。
一个绝佳的例子，而且已经存在相当长一段时间了，那就是 http://www.iht.com。 点击任何文章标题，你就会进入一个“读者”视图——一个专门为文本交付设计的视图。那里有多种选择：更改字体大小，选择列数（包括单列垂直滚动文本的选项），通过点击屏幕的任一边进行非常用户友好的文本导航。如果我们争论可用性和选择自由，这应该排在前面。这种设计更多地基于概念和理解用户需求，而不是通过调整广泛使用的设计使其看起来新颖。请注意，文本交付模式（文章阅读器视图）与网站首页不同，这进一步支持了可以通过不同方式实现不同目标的论点。
关于专家的最后一点：在当今看似过于复杂的世界中，专家越来越多地是指那些在一个非常微小、专业化的知识领域里无所不知的人，而在其他所有方面却差不多是白痴。以至于他们在那个微小领域里高度专业化的知识也变得没什么用处，因为他们很难将其与人类经验的广阔图景联系起来。我在此为那些例外情况的专家致歉，但遗憾的是，你们只是茫茫愚海中的一滴水。所以，少听专家的，多用常识。它很可能在大多数时候会让你得出更好的结论。
附注：我使用的是 1600 x 1200 的显示器，我发现这个网站绝对难以阅读。我也讨厌调整窗口大小，因为我（使用 Firefox）会失去标签页的视线，而且我不喜欢看到当前工作窗口后面的部分窗口。字体也显得非常小，我不得不调大 4-5 步才能舒适阅读（因此行长度也缩短了）。问题是，当我离开这个页面时，我必须再次调小。这比我用鼠标滚轮省了几个滚轮要好多少？
[匿名] 于2005年2月11日星期五下午6:13 GMT 如是说。
评论19
如今，屏幕尺寸平均来说，65%是 1024px，20%是 800px，10%是 1280px，只有 0.5% 是 640px 宽度。（这是我最新的访客统计数据，2005 年 2 月有 500,000 次点击。）其余部分屏幕宽度甚至更宽。那么，您的最佳固定宽度尺寸是多少？？
从网上打印内容怎么办……没有人考虑很多人仍然觉得从打印机阅读长篇文本更容易。在欧洲，A4 纸比 Letter 纸窄，我们经常遇到右侧内容被截断的问题（你不讨厌它吗）。您必须支持大约 590px 的宽度才能打印。当然，通过 CSS，您可以尽情发挥您的宽度，但一个好的弹性设计仍然胜过一切。
弹性设计可以轻松适应所有这些宽度。它在任何宽度下都能显示良好，人们可以自己决定最佳阅读长度。在更大的屏幕上，1600px+（据我所知，没有人会全屏使用他们的窗口），人们可以自己决定。
我的经验是，固定布局更多地与设计师的纸质 DTP 相关，而不是在线设计。这就是为什么他们讨厌弹性布局，因为它不适合他们的创意过程。我认为弹性布局设计就像一栋有活动墙壁的房子。适应空间要求并优化空间利用。您会看到它逐渐渗透到其他设计中，例如带有可移动后座椅的汽车或滑动的 PDA 以显示多 50% 的屏幕……打破您的界限……这就是我的感受……
David Vandermeersch 于2005年3月3日星期四下午5:42 GMT 如是说。
评论1
我一直在抱怨 Photo Matt 在这个话题上的偏颇评论
http://photomatt.net/archives/2003/12/11/death-of-flexible-width-designs/#comment-1696
感谢您挺身而出，提出了论点的另一方！我完全同意您关于两种方法都有优缺点的说法。正如我在上述评论中所说，如果有人能在一页上概述一下优缺点，那就非常有用了，这样设计师就可以做出明智的决定，并使用最适合任务的方法。
Joshua Kaufman 于2003年12月15日星期一下午6:34 GMT 如是说。