加载中…译文：固定布局，流体布局，弹性布局，哪一个适合你？
(2010-12-08 23:13:43) | 分类： 英文翻译 |
这是个网页设计师困惑多年的问题：固定，流体，弹性还是混合布局设计？ 每个选项都有其优点和不足。但最终的决定更多地取决于产品的可用性，以至于很难做出选择。 那么，有没有一个正确的选择？ 通过考虑一些因素以及恰当的设计，你可以成功地完成最终的布局设计，获得所有的好处。
本文将讨论每种布局的优缺点。只要遵循可用性的原则，任何一种布局都可以做出成功的网站。
参考我们之前的文章：
- Flexible Layouts: Challenge For The Future，弹性布局：未来布局的挑战。
- Applying Divine Proportion To Your Web Designs，黄金分割法在固定布局的应用以及三分定律在流体布局的应用。
我们为什么讨论这些？网页设计归根结底是可用性并且难以平衡，因为网站的用户就是许多不同的变量。
当为大量用户设计网站时，设计人员必须考虑到访问者的差异：
- 屏幕分辨率，
- 浏览器的选择，
- 是否在浏览器最大化状态，
- 浏览器的额外工具栏的开启（历史记录，书签等），
- 操作系统和硬件。
如果没有一个标准化的网站尺寸，网页设计师在开展工作时会遇到许多问题。
1.固定布局与流体布局的差异
虽然大多数的设计师和开发人员认为固定和流体布局的定义是最基本的，我们为了更加清楚还是来温习一下。
固定网站布局
一个固定的网页布局有固定的外表，它里面的组件也是固定宽度而不是百分比。 重要的是，页面元素设置为不能移动。 无论访问者的屏幕分辨率多大，他都会看到和其他访问者同样的页面宽度。
http://s12/middle/627f359fg757d93ed8f7b&690
上图显示的是固定宽度的网页布局的总体框架。 这些内部组件尺寸分别设置为520，200和200像素。960像素宽已成为现代网页设计的标准，因为大多数网站的用户浏览被假定为1024 × 768分辨率或更高。
流体网站布局
流网站布局，也称为流动布局，在这里的大多数组件使用百分比宽度，从而适应用户的屏幕分辨率。
http://s8/middle/627f359fg96e7cc829217&690
上图显示的是流体（液态）的网站布局。 虽然有些设计师可能会给流体布局中的某些元素设定宽度，如留白，但布局一般使用百分比宽度以便视图可以针对用户调整它的大小。
2.固定网页设计
很多设计师更喜欢固定的布局而不是流体布局，因为它们更容易制作并且可以保证设计者看到的便是用户看到的。但是，它与流体布局设计一样有着利弊。
优点
- 固定宽度的布局更易于使用以及制定设计页面。
- 每一个浏览器显示的宽度都是相同的，因此少了很多关于图像，表格，视频等这些宽度固定的内容的麻烦。
- 没有浏览器不支持的最大宽度和最小宽度的说法
- 即使网站设计可以匹配最小的屏幕分辨率，800 × 600，那么网页内容仍然可以很容易的在大分辨率的屏幕上显示得足够大。
缺点
- 固定宽度的布局可能给屏幕分辨率大的用户造成过多空白空间，从而破坏“黄金分割”，“三分法”，综合平衡等其他设计原则。
- 较小的屏幕分辨率可能需要水平滚动条，这取决于固定布局的宽度。
- 无缝纹理，图案和图像的延续需要适应大的分辨率。
- 在可用性方面，固定宽度布局总体效果不是很好。
固定布局网页设计
这里有五个充分发挥固定宽度布局的例子。这些网站囊括了许多设计元素。在完美的场景中，使用一个固定的布局。设计者可以支配更多附加元素空间，这些空间在内容区域的周围，并且设计师精确地设置了工作内容和导航宽度。
http://s6/middle/627f359fg96e7d8fb7595&690
http://s13/middle/627f359fg96e81860337c&690
http://s14/middle/627f359fg96e8187eb59d&690
http://s8/middle/627f359fg96e7d9d110b7&690
http://s12/middle/627f359fg96e7da4b23db&690
请注意在所有这些例子中，设计师采用连续图像来配合更大的屏幕分辨率。
3.绕开固定网页设计的弊端
如果你已经决定使用固定布局设计，你应该知道这几个技巧来绕过这个布局的弊端，并创建一个成功的设计。
回顾统计
如今，大多数设计师假设广大互联网用户拥有1024
× 768或者更高的屏幕分辨率。根据W3Schools
公布的一项民意调查（
http://s10/middle/627f359fg96e7e2b7c309&690
正如你看到的，640 × 480的分辨率甚至没有被记录在图表上。W3Schools的分析指出没有用户使用这样分辨率的屏幕。但是，事实上，有些用户确实在使用。统计数据表明，它们构成了一个足够小的比例，因此设计师可以忽视他们并且提供广泛的可用性。
即使有人使用这个分辨率大小的屏幕，可能也是因为他们在使用小的便携式计算机，他们不会将它作为主要的屏幕分辨率来使用。
然而，这些统计数字可能不像我们希望的那样准确。 由于W3Schools的游客主要是某些固定人群（设计师和开发人员），因此信息可能存在一些偏见。其他研究来源显示的不同结果只是略有不同。据2009年个体公司的统计数据， 800 × 600分辨率屏幕在某一地区的使用者小于10％。
下面是一个来自SohTanaka.com的有趣表格。其博客研究比较了2006到2008年某些大型网站分辨率适用情况。
http://s13/middle/627f359fg96e7e55727ac&690
研究中的四个网站都有一个整体的转变。甚至网络上最大的公司现在假设他们的受众群拥有更大分辨率的屏幕。
对屏幕分辨率的其他调查研究可以查看一下资源：
960px还是760px？
大多数设计师选择760像素或960像素的固定宽度。960像素的宽度布局适合于使用1024 × 768分辨率或者更高的用户，并且会有一些留白。对于那些想要迎合使用800×600分辨率的10％用户的设计师来说，760像素宽的布局效果良好，并仍然适用于大屏幕。
始终中心布局
当设计使用一个固定的宽度，一定要至少将网页主体居中来保持平衡感（ margin: 0 aut，通常不会成功）。否则，对以使用大分辨率屏幕的用户，整个布局会藏在角落里。
4．流体页面设计
设计师可能因各种原因不使用流体页面设计，但这种布局的好处往往被忽视。以下是流体页面布局的利弊分析。
优点
- 流体页面设计更具用户友好性，因为它可以根据用户的配置进行调整。
- 在所有浏览器和屏幕分辨率中，白色空白区域大小相近，这样看起来更加吸引人。
- 如果设计得好，流动布局可以消除较小分辨率屏幕中的水平滚动条。
缺点
- 设计者无法掌控用户看到的效果，并且容易忽视一些问题，因为在他们特定的分辨率屏幕上，布局看起来很好。
- 图像，视频和其他类型的内容可能需要多个宽度设置，以适应不同的屏幕分辨率。
- 难以置信的是，大屏幕分辨率可能会因为缺少内容而产生多余的空白空间，从而减少了美感。
流体网页设计实例
下面的两种设计使用了百分比宽度来适应不同的屏幕分辨率。在每一组的第一个例子根据屏幕宽度改变了内容的宽度，而第二张截图对空白区域使用了不同的宽度。
http://s15/middle/627f359fg96e7eeb0183e&690
http://s10/middle/627f359fg96e7eecea169&690
http://s6/middle/627f359fg96e7f7a7e2b5&690
http://s1/middle/627f359fg96e7f7c65260&690
5.流体网页设计的运用
尽管流体布局会出现一些问题，但其中的一些问题可以通过一些技巧来克服。
使用简单的设计
设计越少的依赖于图形和困难技术，就越容易创建和维护。它也越容易和更新的屏幕分辨率相匹配。有了更干净的代码和设计，兼容性的问题就更容易预防，发现和处理。
例如，Smashing Magazine 就使用了流体布局，并且为了简单只是顶部的黑色和橙色导航栏会根据用户的情况扩展， 另外，内容区域的扩大和缩小会根据需要，并且巧妙地运用CSS掩盖侧边栏和内部内容可能冲突的情况。
最小宽度和最大宽度
最小宽度和最大宽度是CSS的两个属性，如果用户的屏幕对于可用布局太小或太大，这两个属性便可以创建固定的宽度。在这种情况下，布局会产生滚动条，并且在功能上成为了固定宽度布局。下面是W3Schools页面的CSS属性（最小宽度和最大宽度）详情：
不幸的是，大多数IE浏览器不支持最大最小宽度。 避开这个很简单，但是需要IE的特有表达形式。了解更多可见文章 “Maximum and Minimum Height and Width in Internet Explorer.”
6.
这是处理网页布局的第三个选项。弹性设计有时是设计师的首选，因为它结合了其他两种主要的布局形式。它通过用 em‘s排列所有元素。下面的引用解释了什么是em以及它的好处。
虽然弹性设计应该提供更多的好处，但它仍然像其他两种布局一样，各有利弊。
优点
- 如果执行正确，这种布局方式可以非常方便。我们的目标是根据用户的偏好，让一切都能按比例放大和缩小。
- 对于既爱固定布局又爱流体布局的设计师，弹性布局是完美的，因为它们各自的优点都可以在弹性布局中找到。
缺点
- 即使考虑到以上的优点，这种布局也造成了很大的可用性问题。这需要许多的领悟和测试才能得到适合所有用户的正确布局设计。
- 这种布局类型比其他两种类型更难设计，并且它带来的那些额外的可用性有时并不值得。
- 根据不同的布局细节，一些弹性的设计可能需要对IE6补充样式表和作弊文件。
弹性版面设计的例子
弹性和流体布局在外观上非常相似，以至于它们经常会被混淆。但是，弹性设计使用 EM，而不是百分比并且主要取决于字体大小。这些设计调整以适应用户浏览器的文字大小。
http://s14/middle/627f359fg96e8049bbacd&690
http://s2/middle/627f359fg96e804c970d1&690
http://s13/middle/627f359fg96e804e8133c&690
http://s11/middle/627f359fg96e80515d4fa&690
7.哪一种最适合你的网站？
固定和流体之间的选择将大多数取决于网站本身的类型。权衡上述利弊，为你的网站决定正确的解决方案。
例如，一个组合网站，固定布局可能是它的最好展现方式，这样你会有更多的设计控制权。你不仅能更好地控制设计布局中的单个元素，而且可以用固定宽度更好的把握组合展示的图像。很多设计师，不仅仅是组合网站的那些，可能更喜欢固定宽度的布局，因为它们更易用更有保证。
任何一个寻求100％兼容性的设计师都应该花时间建立一个流动布局。在这种情况下，主要的挑战不是在大屏幕分辨率下过多的白色空间，而是屏幕分辨率的小用户。对于拥有大量用户的网站，使网站适应特殊用户群可能很重要。但除此之外，拥有大量用户的网站应该有一个简单而干净的设计，这可以用流体布局有效地实现。
仍然无法决定？弹性设计或部分弹性设计仍然是一种选择。如果使用得当，弹性布局可以带来其他两种布局的所有优点。设计师通常使用弹性布局原则，对字体和框架使用EM 'S，然后用巧妙的百分比和像素宽度混合来设置其余的布局元素。（Littlemoe译）
喜欢
0
赠金笔