设计师的工作一直与“可视性（affordance）”有着密切的利害关系。这个词自唐纳德·诺曼（Donald Norman）的名著《设计心理学》^[注1]后便声名鹊起，之后更是被阿兰·库伯（Alan Cooper）的《交互设计精髓》^[注2]一书带入用户界面设计社区。

注1:  The Design of Everyday Things, 直译为“日常用品的设计” 。“可视性”一词即沿用的本书中文版的翻译。
注2:  About Face，交互设计名著，目前已出到第三版。

可视性允许我们一见到某事物就直截了当地知道如何与其交互。例如，当我们看到一扇门旁边的小按钮时，我们会马上意识到这是要用指头来按的；常识又告诉我们，一旦按下去就有声响发出，然后房间里的人就会知道“有人正站在门外呢”。把这一概念移植到视觉设计领域：当我们在网页上看到一个有3D样式的按钮时，我们立马就能明白这是一个可以用鼠标来“按”的东西。

可视性仅仅是成功的一半

设想这样一种情景：人们虽然能轻松懂得如何使用某件物品，但是却缺乏执行操作的能力。绝大部分坐轮椅的人都知道楼梯应该怎么用，但楼梯的“可视性”无助于他们爬上楼梯。这时，问题便出现了。

相反，便利店的宽大自动门对于有或没有特别通过需求的人都具可视性，并且能被二者轻松使用。我们把这种可视性和广泛亲和性^[注3]（all-embracing accessibility）的结合称为“通用设计（universal design）”。在通用设计中，自觉的可视性——也就是对如何与物品进行交互产生的隐式理解——实则与用户执行操作的能力相辅相成。因此，通用设计天生具有亲和性（inherently accessible）。

注3:  Accessibility，表示用户获取所需内容（结果）的容易程度。根据语境，可翻译成“可访问性”、“亲和性”、“可及性”，等等。下面译文中出现的这三个词都表示英语中的“Accessibility”。Accessible 又表示“无障碍的”、“可访问的”。

有些设计师觉得通用设计限制了他们的创新。他们争辩说，要满足通用性，就必须从“最底层的用户（neediest-user）”出发进行设计。要设计一部对老年人和青少年都方便使用的电话，那我们就必须先考虑老年人的需求：大的数字按键，大的显示屏等等；然而一旦我们这么做了，那些年轻的消费者，那些“潮人”们，可能就对这电话没有购买欲了。如此，设计的最终结果就是一件只对某特定社群有用的产品——我们达到了无障碍设计（accessible design）的要求，但不能算是通用设计。设计的可及性非常重要，却无法通过一种方式就满足所有人。因此，明智的做法是，在任何时候都尽量争取可行的通用设计，而只在必要的时候专注于无障碍设计。

无障碍设计的困境

这种差别在Web设计中意味着什么？“通用设计”和“无障碍设计”在什么情况下会被广泛认为是对等的？无障碍设计元素包括视频的说明字幕（caption）和音频文件的文字副本（text transcription）。它们被用作原始内容必需的替代品。另一方面，结构化标记（structural markup）则是一个实现通用设计的有力技巧。使用h1和h2这样的实义标签来按照逻辑关系组织内容，有助于形成可访问性，因为读者总是习惯在阅读文字前先扫描标题。设计师能创建独特的标题样式，却是由用户个人来决定要不要接受设计师的想法。他们大可以关闭图片显示或者在运行过程中替换掉你的样式。

话说至此，对很多设计师来说，因通用设计产生的交互过程的不可预见性会带来很多麻烦。他们怨声载道——“我完全不知道屏幕阅读器是如何工作的”，诸如此类。作为设计师，我们始终没能完全了解可访问性或者通用性究竟意味着什么。要改变局面，就必须先改变我们看待任务的方式。

不得要领

网页设计师通常喜欢在页面底部加一些文字和一个到第508条^[注4]的小超链接来宣告其网页的可访问性。当然，这也是一项符合法律精神的实践。他们的说明大概都是这样写的：“我们尽力让本站能无障碍访问。我们会持续测试和修改站点的可访问性。如果您在访问任何内容时遇到困难，请尽管联系我们。”但只要稍微做点可访问性测试就会发现，很多站点拥有者和开发者都只是想靠声明的后半部分来轻松逃脱入狱的危险^[注5]。

注4:  Section 508，美国推行的保障残障人士能够有效使用电子和信息产品的法律。台湾也有类似的法案，请参看维基百科网页亲和力条目。
注5:  没有达到无障碍访问要求的站点会受到法律制裁，作者在此讽刺部分开发者对可访问性不够重视。

网站开发者们有时候以为，采用基于标准的开发原则，利用外部CSS和基于DOM的浏览器脚本技巧分离表现层和行为层，再为图片加上alt属性，就算达到第508条要求了。除非遇到问题的访客找上门来，他们是不会想在网站的可访问性上多花精力的。这里的逻辑似乎很公平：好的商业实践总是将各种需求按照项目约束条件和预期投资回报率（ROI）进行优先级排序。尽管规范的编码有助于达到无障碍要求，也必须有正确的施行意图才会产生效用。

以alt属性为例。所有正规的HTML编辑器和验证工具都会指出缺少alt替换文本的错误。大部分开发者也会纠正这个错误——不管是出于通过验证的目的还是为了获得可访问性。不过，通过验证并不等同于获得了可访问性。W3C的HTML5规范(草案) 明确指出了这一点，并详细示范了如何撰写基于功能和上下文的替换文本。你也许要反驳说大部分开发者都了解这一区别，但很多网站的表现恰好说明事实并非如此。

可访问性：分寸之末

就在不久前，一个流行的Web开发论坛上的一篇帖子引起了我的注意。帖子题目是“在<img>标签里使用alt和使用title的对比，Firefox里的alt不起作用”。一些回复让我震惊了，比如下面这条（不是因为他蹩脚的语法）：

Alt被要求去验证，但是除非是政府网站，并没必要使用alt标签。除非信息实在重要，并且相等的信息发挥了作用，这作用到底是什么也不重要了……

Alt attributes are required to validate, but unless it is some sort of gov’t website they are not required to use alt tags unless the information is vital and the equal information act, or whatever that act is called.

（囧，确实蹩脚，根本不知道他到底想说个啥……）

就我在论坛上的回复，我提到了国家盲人联合会（National Federation of the Blind, abbr. NFB）对Target公司的集体诉讼^[注6]。最终，Target支付了大量金钱，并且同意对他们的网页开发者进行昂贵的关于可访问性的强化培训。

注6:  Target是一家零售企业，在美国各地都有连锁店。NFB控告他们的网站不方便盲人获取信息，并且让盲人无法实现线上购物。关于alt和title的问题，另外推荐Rexsong的 使用Alt提升可访问性一文。

如果一家《财富》500强企业都不能正确处理网页可访问性，我们就能想象小公司要达到无障碍需求是多么的困难。由于下列原因，网页的可访问性总是获得较低的优先级：

1. 我们也想实现无障碍访问，但是我们只是一个很小的团队。
2. 话说回来，也没人真的抱怨过访问障碍。
3. 无障碍网页缺少审美上的乐趣，限制了我们的设计选择。
4. 我们真的不知道该怎样让我们的网站/Web应用变得对残障人士无障碍。
5. 我们的目标用户不包括残障人士。

就上面的几点，只有第四条才算是一个网站或Web应用出现可访问性问题的正当理由。而这一问题亦是可以解决的——给网页设计师和开发者少量的循序渐进的可访问性培训，然后持续关注这一问题。至于其他几点…… 只需一点思维上的转变即可。这一转变很小，却将意义重大。

运用包容原则，提升可访问性的地位

让我们来探索 包容原则 的奥妙。它允许我们忘记在社交行为中根深蒂固的那种“他们”和“我们”之间的对立。聚焦于包容能够将无障碍/通用设计的争论从上述利益冲突中解放出来，让我们拥抱一种更宽阔、更接近自然的设计哲学。最重要的一点，聚焦包容也帮助我们了解到，我们不仅是为了别人才重视可访问性，也是为我们自己好。

来看一下来自包容性研究机构（Institute for Inclusion）的定义：

包容行为是指平衡且尊重众人不同才能、信仰和生活方式之独特性的实践和行为。[…] 当某人被定义为某个社群的一员，人们即被他们对这个特定群体的理解和念想所限制。而包容则是在个人层次和群体层次均接受相互之间的类似点和不同点，以达到众人齐心协力之目的。

Inclusive behaviors are those practices and behaviors that leverage and honor the uniqueness of people’s different talents, beliefs, and ways of living. [...] When one is defined by the concept of a group, people can be limited by their knowledge or beliefs about that particular group. Instead, inclusion embraces similarities and differences at the individual and group levels for the attainment of the common endeavor.

此研究机构亦对包容的核心意义（key elements）做如下探讨：

通过在个人、群体和组织机构层面创建与维续条件来蕴育平等、自主赋权、自我知觉和胜任感，从而认知与支撑全人类的内在价值。

Recognizing and supporting the intrinsic value of all human beings by creating and sustaining conditions that foster equity, empowerment, awareness and competence at the personal, group and organizational levels.

只要我们敞开胸怀拥抱包容原则，我们就很难再把他人看作是一个特定群体（比如“视觉障碍用户”），于是也不再排斥他们。如果我们肯放弃传统的“我/他”思想，我们就不会再为逃避可访问性找任何借口。他人的需求变成了我们自己的需求。有了包含原则，我们将不再忽视网页可访问性的要求。在我们眼中，可访问性成了一个通过接受彼此异同实现自主赋权的机会（a chance to create empowerment by embracing our similarities and differences）。

现实世界的一应包容

这样的讨论似乎并无必要——对可访问性的理论解剖。你可能会说注重包容性并不会立即解决你平常遇到的网页设计问题。不过别忘了：重视通用设计能让我们利用好相似性，实现无障碍设计能让我们处理好相斥性。一些“通用的”技巧和要素如下：

• 为图像添加恰当的alt属性。W3C的WCAG 2.0技术规范 清楚明确地解释了这一点。
• 使用多级标题（h1, h2,等等）结构化页面内容。
• 如《WCAG 2.0技术规范》示范的那样正确使用简单数据表， 复杂数据表，以及th元素。
• 为表单的输入域创建文本标记（label）。这在WebAIM: Creating Accessible Forms（创建无障碍表单）一文中已有描述。

当我们学会普遍运用这些技巧时，它们就成为了我们的“第二天性”（second nature），我们架设网站时的思维模型（mental model）。最终，我们不会觉得这是所谓的可访问性技巧，而开始把它们当做固有的、普遍的Web技巧（innate, universal web techniques）。我们将会经历从运用范例到一应设计（inclusive design）^[注4]的转变。

注4:  inclusive design，也被翻译为“和合设计”、“包容性设计”。“一应”是指所有一切，一应设计即包含一切的设计。

这样做既能减少用户的麻烦，也能减轻开发者的负担，因为剩下的可访问性任务已经被更好地独立出来。这就为实现完全无障碍的网页打好了坚实的基础，开发者也能更加客观地掂量如何提供额外的亲和效果（provide a more objective estimate for additional accessibility efforts）。

如果说无障碍设计和通用设计更多地是以结果为导向的，那么这一新的一应设计的模型就显然是以过程为导向的。有一点至关重要：设计师必须认同（indentify with）项目的可访问性需求。没有认同，就没有热情；没有热情，我们就又走回老路——将可访问性任务视为分寸之末。

让我们大踏步向前

现在来看看如何将包容性原理融入实践。试试看将其应用到那个针对可访问性的反对意见列表中：

1. 我们也想实现无障碍访问，但是我们只是一个很小的团队。
   要踏上无障碍设计之路并不需要多大付出。WebAIM.org 提供了一份很好的快速参考（英文）。如果你已经知道一些基本的东西，请与团队分享你的可访问性知识。例如，听到其他开发者在讨论Ajax时，告诉他们关于无障碍Ajax的信息。利用诸如Word或PDF的非HTML格式，与团队成员分享核对清单（checklists），你会发现它们将带来很大帮助。（美国卫生及服务部网站上有很好的资源。[可惜没有中文版的]）
2. 话说回来，也没人真的抱怨过访问障碍。
   有人在抱怨的——只是没当着你的面罢了。上一次你遇到一件很难用的产品却没有写信骚扰厂家是什么时候？如果你的网站有可访问性问题，不满和抱怨无疑是与设计共生共存的。抓住机遇，投身变革！
3. 无障碍网页缺少审美上的乐趣，限制了我们的设计选择。
   恕我不敢苟同：比如尼克·戴（Nick Day），英国聚焦无障碍（Accessibility in Focus）奖的获得者，他的网站English in Chester的外观设计就非常出彩。多看看别人怎么做的吧，互联网不就是用来帮助我们学习别人的么。
4. 我们真的不知道该怎样让我们的网站/Web应用变得对残障人士无障碍。
   可访问性对于复杂的网站或者富互联网应用（rich internet application , abbr. RIA）来说会比较难以实现。但如果你真的拿到一个复杂的、运用了多媒体的丰富应用（multimedia-rich application），那就拿出一点创意来。在附近找一个特殊教育学校，请一名残障学生志愿者为你演示他们是如何与电脑交互的；调查研究其他为影片添加注释的方式，比方说dotSUB（一个基于wiki概念的影音翻译网站）。
5. 我们的目标用户不包括残障人士。
   如果事实果真如此，那就专注于你的目标客户群。你自己是否亦算其一？想想看：你可一直都是你项目的利害关系人（stakeholder）。那么，认真考虑你的需求，为了自己，加点猛料。猜猜看，然后结果会怎样？

倾听你自己

要如何才能快速入门包容原则？把你的电脑屏幕想象成《2001太空漫游》中的大黑石^[注7]，然后开始你的冒险：在脑海里构建你的站点。接下来，更进一步，想象你正用耳朵听你的站点，而不是盯着它看。这有助于你暂时放弃把你的网站当成一本书来对待。有时候大家都遗忘了一点，网站其实是一种形象而生动的媒体（colloquial medium），其表现力与其外显形式是不可分割的（its narrative is not inseparable from its form）。

你的网站听起来如何？禁用掉样式表，看一下你面前是什么。突然之间，你就变得和使用屏幕阅读器的人一模一样了——你们有着同样的需求。获取最高等级的可访问性是很有必要的，并且应该成为你日常设计活动的一部分，因为这样你就不再需要为自己找辩护的理由。拥抱包容原则，你的网站将成为下一个可访问性的典范。

注7:  2001: A Space Odyssey，一部1968年拍摄的科幻电影。讲述2001年人们寻找黑石根源的故事。黑石在片中的概念相当于激发人们智慧的神秘物。

插图绘制： Kevin Cornell

关于作者

德国出生的 Margit Link-Rodrigue 是一名用户界面设计师，在她自选的Web前哨战Red Stick工作和生活，这地方另一个更著名的名字是巴吞鲁日（Baton Rouge，路易斯安那州首府）。她的格言“浏览器是你的第一个用户”保证了她的工作根基牢靠。她在她的网站vanillacloud.com上几经艰辛，体会到原来要写好博客也不是件容易的事。

© 版权声明

Source:  The Inclusion Principle by Margit Link-Rodrigue

Translated with the permission of A List Apart Magazine and the author.

Translator: Benhuoer.

译文原文：网页设计中的包容原则

任何网站或个人转载本文均需依原样保留本声明。

笨活儿译后感

这篇文章的翻译用了我三天时间（当然，期间也有干其他事啦）。太专业了，术语很多。翻译完，我整理的生词有30多个，有些句子也特别不好理解，逻辑太跳跃，译成中文后感觉不够连贯，希望能有高手忙我眉批找茬一下。

其实作者的主要观点无外乎“把你自己也当做用户”。考虑网页可访问性时，要胸怀用户，尤其是残障用户（包括视觉障碍和听觉障碍）。中国的网页无障碍设计发展得很差（看一下百度盲道就知道了），《残疾人保障法》也已经近20年没有修订过了。想来残障人士访问互联网应该是很恼火的一件事。其实本来就像作者说的那样，只要“胸怀天下”，可访问性基本上是举手之劳。

©2009 笨活儿 | 永久链接 | 已经有11条评论了 | 推荐到豆瓣

英文原文：Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?

译文原文：固定 vs. 流动 vs. 弹性：哪种布局更适合你？

©请尊重作者和译者   若需转载   请依原样保留本声明

另有一篇《自适应CSS布局——流动布局新时代》，在我草稿箱里放了快一个月了，一直没翻译完。但另有高手已经完成，请看：http://www.denisdeng.com/?p=324

有一个问题已经困扰网页设计师们很久了：该使用固定、流动、弹性，还是混合布局呢？它们各有优缺点。最终的决定取决于网站的可用性，单用某一种布局就想达到目的，可能没那么容易。那么，既然如此令人困惑，是否有做出正确决定的诀窍呢？考虑好几个问题，恰当地设定目标结果，你也能做出融合各方优点的成功布局设计。

本文将讨论每种布局方案的利与弊。其实，只要你时刻注意可用性，每种方案都能实现成功的网站布局。

您也可以参考一下我们以前的文章：

• Flexible Layouts: Challenge For The Future
  讨论弹性布局对未来的挑战
• Applying Divine Proportion To Your Web Designs
  阐述如何将神圣比例（divine proportion）运用到固定布局中

为什么要争论这些？网页设计受可用性的大棒指引，而由于网站用户的多样性，已经很难做出对不同用户都有足够可用性的网站。

当设计的网站会面向众多用户时，设计师必须考虑访客之间的下列潜在差异：

• 屏幕分辨率
• 用的哪款浏览器
• 浏览窗口是否最大化
• 是否启用占位置的浏览器的额外组件（如历史、书签、Google工具栏等等）
• 乃至操作系统和硬件情况

由于并无标准规定网页大小，网页设计师工作时就需要解决不计其数的问题。

1. 固定布局和流动布局的差异

尽管大部分设计师和开发者都对固定和流动网页布局有基本的了解，我们还是简单明确一下概念。

固定网页布局

固定网页布局指网站内容被一个固定宽度的容器包裹，容器内的区块都有固定的百分比或者像素宽度值。最重要的一点——容器是不能移动的。不管屏幕分辨率如何变化，访客看到的都是固定宽度的内容。

上图显示了固定宽度网页布局大体上的实现方式。内部组件被分别设定为固定的520、200、200像素宽。960像素宽度已经成了现代网页设计的一项标准，因为大多数用户的屏幕分辨率都在1024×768及以上。

流动网页布局

流动网页布局，也称为流体网页布局，其实现方法则是大多数组件（包括主容器）都设成百分比宽度，并且根据用户的屏幕分辨率自适应。

上图展示了一个流动网页布局。尽管大多数设计师会给流动布局内某些特定元素（如外边距和内留白）以固定宽度，整个布局大体上还是使用百分比宽度，并根据用户不同而自动调整实际宽度。

2. 固定布局的网页设计

很多设计师都更喜欢固定布局，因为他们觉得固定的比较保险：设计师看到什么，用户看到的就是什么。不过，说到其利与弊，则同流动布局一样让人揪心。

利

• 固定宽度布局的设计更简便，更容易自定义。
• 任意浏览器下的显示宽度都一样，对于图像、表单、视频等宽度固定的内容，潜在的冲突更少。
• 不用设定min-width（最小宽度）和max-width（最大宽度），这两个属性并不被所有浏览器支持。
• 即使网页被设计成兼容最小屏幕分辨率800×600的大小，在大分辨率显示器下，内容仍然足够易读。

弊

• 固定宽度的布局可能会给高分辨率屏幕用户带来巨大的页面空白，从而破坏“神圣比例”、“三分割法则”、整体平衡，乃至其他设计原则。
• 小屏幕上可能会出现水平滚动条，影响用户体验。
• 无缝材质拼图，纹样和其他连续图像需要针对大分辨率做出优化。
• 总体来说，固定宽度的可用性更低。

固定布局的设计实例

下列五个网页的设计师都充分利用了固定布局网页的特征。这些网站无不融合了大量设计元素，利用固定布局创建出完美的场景。在固定宽度的助益下，设计师方能更好地控制站点内容周边额外的设计元素，从而更为精准地调节内容和导航的宽度。

请特别注意设计师们是如何针对宽屏幕设计连续图像的（不妨把你的屏幕分辨率调高一点试试）。

3. 规避固定布局的坏处

如果你已经决定要用固定布局，下面这些小技巧你可就不得不知。它们帮你弱化固定布局的坏影响，助你做出成功的设计。

译注：下面这段有凑字数赚稿费之嫌，点此跳过这段。

先看下统计数据

现在大部分设计师都是假定大部分互联网用户都使用的1024×768或更高的分辨率。 W3Schools公布的一份投票结果显示，事实并非如此（请注意W3Schools的数据并不能完全相信，后面会有详细解释）：

如您所见， 640×480 甚至不够格在这张表上出现。W3Schools的数据表明这个分辨率似乎已经完全被用户抛弃了。而事实上，确实还有用户在使用这个分辨率，只不过用户数量太少，设计师完全把他们忽略掉，去做一些更合适、对较高分辨率有更佳可用性的设计。

即使对于使用这种分辨率的用户来说，他们也可能只是在一些方便携带的小型电脑商使用，并不是他们平常使用的主要屏幕分辨率。

不过，这里的统计数据可能也没有大家期待的那么准确。因为W3Schools的访客基本上都是一个特定群体（设计师和网页开发者），结果会和普通公众有点偏差。不过，其他调查也都大同小异。根据一些独立公司在2009年的调查显示，800×600的分辨率使用者比例在10%以下。（译注：根据笨活儿的网站统计数据，这个数值在2%以下）

下面这张有趣的表格来自SohTanaka.com，他们研究了一些大型网站对屏幕分辨率的兼容情况：

调查中涉及到的所有网站，最终都完成了华丽大变身。即使是最大的互联网公司，也都确定他们的主要受众是拥有较大屏幕分辨率的用户。

关于屏幕分辨率的其他研究，您还可以参考下面的资源：

• W3Counter
• TheCounter.com Global Stats
• OneStat.com

960px 还是 760px?

综上所述，大多数设计师都是要么选择960，要么选择760作为总的像素宽度。前者更适合1024×768以及更高分辨率的屏幕，还能有一点留白。后者则是800×600分辨率下的最佳显示宽度，设置成这一宽度能够照顾到那10%，而较大屏幕上看起来也还不赖。

总是将布局整体居中对齐

如果要使用固定宽度设计，务必保证主容器居中对齐，以保持平衡（一般利用margin: 0 auto;就可以了）。不然，遇上宽屏用户，你的内容就会被挤到某个角落，很不好看。

4. 流动页面布局

设计师有很多理由不使用流动布局，不过大家很多时候也看不到流动布局的好。下面列出有运用流动布局时的打算时需要考虑的利与弊：

利

• 流动网页布局拥有更强的亲和力，因为它能根据客户端的情况自适应。
• 在不同浏览器和屏幕分辨率下的额外空白量都差不多，更符合视觉吸引力要求。
• 如果设计得当，流动布局能避免在小屏幕上的水平滚动条。

弊

• 设计师对客户端的显示效果更难以控制，由于他们使用特定大小的屏幕，也更不容易发现潜在问题。
• 图片、视频以及其他拥有固定宽度的内容不得不被设置上不同宽度，以配合不同的屏幕分辨率。
• 对于特别大的显示屏，内容不够多的话就会造成过量空白，破坏美感。

流动布局的实例

下面两例都使用了百分比宽度来适应不同屏幕分辨率。第一个例子通过调整内容区块的宽度来适应，第二个例子则调整空白区域大小。

5. 设计适用的流动网页布局

尽管流动布局会带来某些问题，但这些问题其实能通过一点小把戏解决。

采用简单设计

应用到流动网页布局的图案和复杂技巧越少，其建立和维护也就越容易。同时也能更方便地适应不同屏幕分辨率。有了更加精炼的代码和设计，就能更好得避免、发现和解决兼容问题。

以Smashing Magazine为例，他们就采用了流动布局。设计非常简单，只有顶部的黑色+橘色导航条是延伸开的，各内容区域的宽度会根据情况有一定的改变。利用CSS兼容了所有可能的情形，杜绝了侧边栏和内部内容发生错位。

最小宽度(min-width)和最大宽度(max-width)

这两个CSS属性，min-width 和 max-width，可以用来为过大或过小屏幕的用户指定一个固定宽度。屏幕过小的时候，内容区块固定成指定宽度，屏幕下方也出现一个水平滚动条；屏幕过大的时候，内容也固定到最大宽度，以免延展得太开，影响文字的可读性。更多细节请参考：

• W3School上关于CSS最大宽度属性的页面，
• W3School 上关于CSS最小宽度属性的页面。

不幸的是，大多数版本的IE浏览器都不支持这两个属性值。这一问题可以通过IE特有的expression来解决：Maximum and Minimum Height and Width in Internet Explorer（另：中文参考）。

6. 弹性设计

其实设计网页布局时还有第三种选择。部分设计师更喜欢采用糅合了两种主要布局类型特点的所谓“弹性布局(elastic layout)”。其要点就在于使用单位em来定义元素宽度。下面的引言介绍了何谓em，而它又是如何发挥作用的：

“电脑屏幕上的‘像素’是一个不可缩放的点，而em则是相对于字体大小的单位宽度。它随着字体大小的变化而变化，反应用户对字体大小的设定。”
- Patrick Griffiths, A List Apart

尽管弹性设计貌似会带来很多好处，它仍然像前两种布局一样有利有弊。

利

• 如果合理运用，这种布局设计能带来非常友好的用户界面。目标效果是所有东西都能根据用户的偏好增大或缩小尺寸。
• 弹性布局更适合面对流动和固定布局难以抉择的设计师，因为二者的优点弹性布局都有。

弊

• 尽管第一条“利”说得没错，弹性布局还是为可用性埋下了很多地雷。得需要十分的聪明才智和不断测试才能让布局适合所有用户。
• 这种布局比前述两种要难实现得多，可能那一小点的可用性并不值得你花这么多功夫。
• 由于这种布局的特殊性，有些弹性布局设计可能需要额外的样式表，并针对IE6做些特别的调整

弹性布局的实例

弹性布局的流动布局表面上看起来十分相似，因为大部分时候大家都把它们混淆了。其根本区别在于，弹性布局的长宽单位是em，而流动布局使用百分比，并且弹性布局的尺寸主要根据字体大小而变化。这类设计根据用户浏览器中的字体大小来做出自适应。

7. 哪一种布局更适合你？

选择何种布局应该由网站的性质决定。权衡上述利弊，根据你的网站需求找到合适的解决方案

以作品集网站为例，这种网站可能固定宽度布局最为适用。这样你就能做出更有设计感的东西。你不仅能更好地控制设计中的单个元素，作品的图像展示也变得更易处理。对很多设计师来说（包括那些非作品集站点的设计师），固定布局就是一个既容易相处，又能给人安全感的好朋友。

而那些要追求100%的兼容性的设计师最好就考虑一下花点时间在流动布局上。最大的挑战不在于宽屏上的可能出现的过多留白，而是那一小撮小屏幕上的显示效果。对于有大量用户的网站来说，百分比很小的用户群，绝对数目也相当可观。就算不考虑这点，大网站也应该有简洁干练的设计感，而这可以利用流动布局高效率地实现。

还是做不了决定？别担心，还有弹性或部分弹性的布局设计可供选择。如果运用得当，弹性布局能完全整合两大主要布局的优点。聪明的设计师懂得如何利用弹性设计的原则，在字体和容器大小上使用em单位，然后混合运用百分比和像素宽度来设定其他布局元素。

其他设计师怎么说

Heidi Cool 在帖子 Fixed vs. Liquid vs. Elastic Layout 上的回复

这位设计师的发言针对与他人合作运用布局的情况，而这些人可能对网页设计了解得并不多：

“我反复思考过这一问题。在case.edu上我们最终采用了固定布局，因为：

1. 流动布局更复杂，我们为那些有不同技能的用户提供了模板化的设计，而他们的工作非常容易破坏流动布局（模板只是一些普通的HTML文件，并不是Dreamweaver模板）。
2. 我们不想看到网站维护者们做出太宽的页面——那种文本行很长，非常难以阅读的页面。
3. 我们想限制那些总是想填满所有空白的人所面对的空白量。如果他们用的是大屏幕显示器，就很容易把页面填满，而忽略了在小屏幕上其显示效果是多么糟糕。

大家都看得出来，最主要的问题还是集中在我们的网站是由拥有不同技能水平的人所维护、构建、增删内容这一事实上。如果是我一个人做网站，写代码的时候我可能就会更多地根据目标、内容等等来做决定。”

madr 在 Where Have All the Flexible Designs Gone? 上的回复

他提出了固定宽度布局的另外两个优点：

“barner和广告通常都是用图像和Flash来实现的，这些内容让弹性或灵活的布局更难制作。我曾在newspaper world工作过一年半，广告给区块真的特别难伺候。文章配图也是，如果用上弹性布局，阅读区就可能变得过大，相对顶部图片而言。

除了Safari 3及以下（Safari 4马上就要来了[笨活儿:已经来了…]）、Firefox 2及以下、IE6及以下（马上就要被淘汰了…）的所有浏览器都支持了按照页面整张缩放，而不是只缩放字体。这种情况让设计灵活的弹性布局显得更无实用性，大部分用户甚至都注意不到你的一片好心。”

jphilapy 在 Where Have All the Flexible Designs Gone? 上的回复

流动布局的两个值得支持的地方：

“流动布局的网站可以适应很多分辨率。这样你就不用去调查讨论用户的屏幕大小。况且，屏幕分辨率的统计数据始终是个谜；几乎没人在全屏模式运行浏览器，然后还有很多工具栏、边栏、小工具之类的东西，造成了不计取数的屏幕状况。

移动电话（就说iPhone吧），游戏机等也渐渐成为网页浏览器家族的一大成员。总之，这类设备的屏幕分辨率都很小，能够从灵活的网页布局设计中获益。

Calrion 在 About Fluid- and Fixed-Width Layouts 上的回复

明确说明了运用弹性布局的情况：

“我觉得‘弹性’布局是最佳选择。某种程度上是流动的，但又有固定宽度来保证文本行不会变的过长。

我是Windows用户，一般情况下都最大化窗口。

之所以要最大化，是因为这样我能更好的关注我正在使用的应用程序。要知道我桌面上总是有很多东西。另外，最大化我的浏览器（Firefox）能给界面元素提供最多空间，尤其是书签工具栏和标签卡区域。

说到可用性，流动布局对有经验的用户可能最好用了。因为他们会主动控制浏览窗口尺寸。对于经验较少的用户，弹性布局可能最好用，因为它能自发的阻止自己变得过分宽大。

Georg 在 About Fluid- and Fixed-Width Layouts 的回复

为什么混合运用三种布局能获得最佳结果：

“我更喜欢主区域流动，侧边栏固定，（也可以）再加一点弹性部分。我也总是为文本区设定600像素的最大宽度。

使用min/max来设定整个页面，宽度保持在600至1200像素之间，并且居中对齐。

在600到2400宽度的屏幕上全面测试，其他宽度就等用户自己解决吧。文本行从不会太宽（600就是最大宽度了），页面也不会在挤压下过早错位。

我收获的大部分反馈是，用户几乎没注意到有什么东西让他们困惑。网页很易读。说明我的做法是一项有用的妥协。

你的站在我这儿看起来不错，所以我觉得它是有用的妥协。我年迈的双眼觉得文字实在太小了，那我就在1280宽屏上的Opera里把页面放大至120%。始终不会有问题。”

更多资源

您可能会愿意参考下列文章：

• CSS Layouts: The Fixed. The Fluid. The Elastic.
  讨论了三种布局的优缺点：固定、流动和弹性布局。
• Fluid vs. Fixed Websites: Which is right for you?
  解释了选择正确布局类型的问题所在，告诉你如何正确选用。
• Fixed or Fluid, you decide
  聚焦于某位设计师的选择过程。
• 960 Grid System
  固定宽度布局的流行解决方案。
• Fluid Grid System
  和960网格系统类似，不过适用于流动布局。
• How Much Longer Will We Design for 1024?
  讨论近期的屏幕分辨率统计数据。

关于作者

Kayla Knight 是一名大学生，兼职网页开发，自由职业者，blogger。他利用业余时间维护Webitect.net，一个面向网站管理员的博客，提供教程、文章、技巧和资源等。

©2009 笨活儿 | 永久链接 | 已经有7条评论了 | 推荐到豆瓣

确定明晰目标

有些人总认为自己很了解建某个站点的目的是什么，却拒绝建立起直接的、可量化的目标。模棱两可的目标叙述迫使客户自行推断，而客户一般都会把事情往好的方向想，过高的期待又往往带来失望——结果，你们之间好不容易建立起来的信任就毁掉了。像“卖更多东西”、“提高曝光率”这种目标还是少来为妙，它们太模糊了，几乎没有指导意义。

改进的验收准则练习（modified acceptance criteria exercise）是我发现用于建立清晰有力目标的最简单有效的工具。精明的开发者利用验收准则来说明为什么要执行某项任务，以及他们该如何融入大图景之中。只需做一点小优化，你就能完美地捕捉到设计目标。

样例需求:

• 我们想要重新设计我们的网站，因为我们需要更多流量和一个新形象，希望我们成为行业里更受尊敬的企业。

样例目标模板:

• 我们希望 __________ 因为____________ 然后 ___________.

样例目标:

• 我们希望把访问量提高20%，因为我们想有更高曝光率，然后我们就能每个月新建立八条客户渠道。
• 我们希望改变现在的形象，因为我们想让客户觉得更亲切，然后我们才敢把服务费提高10%。
• 我们希望每个月能写四篇行业相关的文章，因为我们想为这个行业做贡献，然后我们就能每个月找到两个合作伙伴。

请思考，区分开“手段”、“原因”、“结果”的过程是如何让项目持有者的目标变得明晰的，而且这一过程还能解释他们为什么有这些目标，又打算怎样达到目标。为设计确立验收准则是挖掘出更深层次的可能还不为所知的需求的极佳方式。它帮助设计师和项目持有者做出更好的决定，以免将来设计执行过程中遭遇“不速之情景”。请修正目标，直至项目相关各方都同意并理解这些目标。

额外提醒：多建立几个目标，以方便你自己捕获二级甚至三级目标，不过千万不要让事情失去控制——所有网站都只需要一小撮高水平目标就够了。

组织页面

人们一般都只热爱那些不用他们多做思考就能成事儿的站点。用户的精力是用来解决他们自己的问题的，而不应该浪费在搞清楚网站怎么用上面。

卡片分类是安排网站内容的好方法。要利用卡片分类，列出你网站的所有页面，把它们写在一些索引卡上。然后，把所有卡片铺到桌子上，移动卡片位置，直至所有的目录和子目录归档方式都最为有理有据。

如果你没法亲自做卡片分类，或者你们团队没有时间做这件事，那你们还可以试试利用数据表在线商讨。以下是使用一些虚拟数据在Google Docs里创建的一家新西兰投资公司网站的示例。

利用数据表进行卡片分类的示例

如果你的项目是针对某网站的再设计，那你应该先看看该站点的访问统计数据，找出哪些页面获得的流量更多，哪些更少。这么做的好处是能推断出设计的内容在哪部分还不够，在哪部分又太过了。然后，紧缩或合并类似页面，简化复杂页面。

即使已经过了正式的设计过程，好的卡片分类实践也能大大提高一个网站的可用性和内容传递效率。这是一种让网站保持关联性和实效性的聪明训练。要了解更多关于这方面的信息，请参见 用框线图 实现卡片分类（英文）， Usability.gov上的卡片分类介绍（英文），或者阅读这本关于卡片分类的专著（英文）。

额外提醒：让不熟悉公司业务的人来帮忙进行卡片分类，有助于发现大众成见，获得意想不到的反馈

铺展页面

接下来，我们需要深入理解设计的视觉优先顺序。这里我们采用注意力地图(Attention Map)并且做一点算术。

注意力地图就是为页面指定一系列目标，并且为每个目标分配一个吸引力指数。总点数不要太多，足够分配就好，这样点数之间才能更容易对比和互相参考；但也不要太少，以免分配出太多过于接近的点数。这么做的目的是让你深入理解各个目标之间的联系，从而确立稳妥的内容层次。

样例点数分配：

• 四个目标，一共分配15点

样例结果：

• 服务介绍：7点
• 带来的益处：4点
• 行业文章：2点
• 相关新闻：2点

比起简单的优先级列表，注意力地图更为高效，因为它还直观反映了各个目标在页面中占据多少空间。由于“服务介绍”的点数比“益处”所占点数要高3点（几乎是两倍了），所有你能肯定“服务介绍”需要吸引大量更多注意力。

使用注意力地图在网页上划分重要性区域

用草图表达满足目标、适合内容组织、符合注意力地图的设计选项时，应当简明直率，且富有战略。说不定这样你就能少很多搜索枯肠的烦恼。

额外提醒: 完成之后，试试反转草图，或者从镜子里面看它，看看还是否能用。为你自己的草图挑刺儿（包括那奇怪的镜像草图），能帮你想出一系列新点子。

开发个性

强健的原型(archetype)能建立起一条直接而充满力量的情感纽带。所谓原型是指一系列性格特征和行为特点，常见于一群说共同语言或有着共同历史的族群。每一原型都有其强势、弱点、天赋和畏惧。当你无所顾忌地运用这人性特征的方方面面时，人们将从内心深处对你的设计产生共鸣。这有助于强化记忆和建立信任。

Margaret Mark 和 Carol S. Pearson 所著《英雄与歹徒(The Hero and the Outlaw)》一书，强有力地覆盖了人类文明几乎所有方面的12种原型。

这些原型包括：

• 纯真 Innocent
• 探索者 Explorer
• 圣人 Sage
• 英雄 Hero
• 法外之徒 Outlaw
• 魔术师 Magician
• 普通人 Regular Guy/Gal
• 情人 Lover
• 弄臣 Jester
• 看护者 Caregiver
• 创造者 Creator
• 统治者 Ruler

如果你选择了法外之徒（想一想 Harley Davidson | 译注：一个摩托车品牌），那就开始批判你自己违背法外之徒特征的一切行为吧。说不定你会想起众多新奇有趣的想法，连你自己都要大吃一惊呢。

法外之徒的特征：

• 渴望复仇和/或革命
• 想要摧毁一切没用的东西
• 痛恨自己无能为力或被轻视
• 尝试扰乱或震惊大众
• 希望给与人们绝对的自由
• 通常被误会为魔鬼
• 有犯罪倾向

如果你能把这些“个性”持续融入不同的设计中，并且考虑如何将其用于与顾客发生交互的领域，之后再密切留意顾客的反应。那你就能建立起一个强大的品牌。

额外提醒：人们经常把公司个性与他本人的个性混而为一。请明确项目持有者或者其他重要相关人物的个性，以把个人特性与公司个性区分开来。

界定何为适度，完成

对特征进行设计能直接支持和强化内容。不幸的是，要让所有受众都能连贯地正确理解付诸视觉风格的特征，并不是一件容易的事。列出反面特征制造违规界限，是一个不错的办法。这有助于你清楚认识某项设计的特定外观，并为你提供一个在评估设计时进行量化和批判的标准。

要完成这一步，一个很好的办法是，找出会显著影响设计效果的对立特征，把它们置于滑块标尺上，如下图：

用于定义反面设计特征的滑块标尺示例

有了特征尺度，设计师就能切实体会到网站内容究竟该向用户提供何种感受。如果设计师关于“活跃”的想法太强烈，有了“冷静vs活跃”的标尺，就能很容易地确定他的“强烈”程度，然后再做适度的调整。由是产生的批判，远比仅仅一句“太强烈了”更加有建设性。

根据需要添加、删除、修改特征标尺。但请记住批判必须是可量化、可讨论的。诸如“高科技”这样的特征过分依赖于设计师的个人品味和观点，一千个人眼里就有一千种不同的“高科技”。有时候，像“高科技”这样的特征，本质上其实是一系列其他特征的组合。“高科技”可以包括“现代”、“简约”、“正式”等 —— 这些才是能放在标尺上被即使没有设计背景的人界定和讨论的特征。

额外提醒：项目完成后，评估哪一系列特征对项目的成败最至关重要，跟踪那些你后悔没有放进去的特征。

自信地设计

可靠而全面地理解站点目标、内容组织、页面布局、个性开发、恰如其分地完成等内容，能为你建立起一种环境氛围。在这环境中，你和项目持有者进行着值得信赖的严谨讨论和对想法的准确记录。通过合作，你们将会犯更少的错误，遭遇更少的恼人意外，完成目标明确的探索，最终，创造出更好的设计。

题图由 Kevin Cornell 绘制

译后感：

太囧了。这文章太高深了。译言上先前有人发过一篇译稿，比原文还难懂…… （译者莫生气哈…… 大家都是学习交流~ ）希望大家看我这个版本的时候还不算太迷糊。

欢迎留言讨论，这其实是一个很值得认真探讨的话题。别认为在中国我们就没法做这种“特别花精力”的所谓“高端”设计。很高端吗？都是一些与客户交流和安排自己工作的实际技巧而已。不是你能不能做高端，而是你自己到底想不想。就算做不出高端，“想做高端”也比“自甘堕落”要值得褒奖得多吧。

Source:  Taking the Guesswork Out of Design by Daniel Ritzenthaler

Translated with the permission of A List Apart Magazine and the author[s].

Translator: Benhuoer

若需转载，务必依原样保留本声明。

©2009 笨活儿 | 永久链接 | 已经有5条评论了 | 推荐到豆瓣

[译注: 可能你会说不翻译里面推荐的参考资料一切都是枉然，但是重要的是文章作者提供的学习思路。具体的参考内容你可以去Google相应知识的中文版。]

翻译不当的地方还请留言指正！

帮帮我！我不懂JavaScript [Help! I Don't Know JavaScript!]

June 5th, 2007, 作者 Michelle

为了帮助所有对Mootool有兴趣却碰上很多麻烦的人，我整理了这些能够教给你开始从事客户端应用开发所需的所有知识的网上资源。

职业必备工具

这些是从事Web开发的前提条件。

Firefox: 从事开发工作一定少不了Firefox。但你还需要在你的电脑（以及其他测试计算机）上安装好你打算兼容的所有浏览器，以方便进行跨浏览器支持测试。

必不可少的扩展

• Firebug: 有史以来最优秀的插件。Firebug让面对一大堆代码抓狂的你清楚地了解处理你的页面时浏览器内部都发生了些什么。
• Web Developer Toolbar: 赋予你全面掌控站点的伟大力量。禁用JavaScript，查看网页不带CSS时的样子，禁用访问来源，启用严格警告，以及更多。所有你能想到的Web Developer Toolbar都能给予。

学习基础知识

别因为不懂HTML就在学习Web开发的道路上止步!

How to Create

这地方非常棒，不仅详细介绍各种麻烦的细节，而且对语义化和实践优化方面的课题也有所涉及。 总的来说，是非常不错的人性化设计的基础知识概览。

• HTML
• CSS
• JavaScript

Mozilla开发者中心[MDC]

大概是网上最全面的Web开发信息中心了, 特别是关于Firefox或Mozilla的信息。她应该会成为您主要的参考资源。

• HTML
• CSS
• JavaScript
• 特别收录: DOM

W3 Schools

基本上W3 Schools 可以提供给您所有Web技术的快速参考，而且比W3C提供的原始参考文档要易读得多。 MDC虽然更好，但手边有一些快速参考资料总归要好得多。

• HTML
• CSS
• JavaScript

微软开发人员网络 [MSDN]

不要被他们的名字唬住了——JScript是和JavaScript一样的东西。如果没记错微软应该因为这一站点获得了一两个可用性方面的奖项。当你和IE的不规范做斗争时应该常来这里看看。

• HTML & CSS
• JavaScript

[译注：最近发现梦都网（中文）的HTML和CSS基础教程和参考文档很不错，建议看看]

其他资源

如果你有点好奇心，可以经常看一看 A List Apart ，了解一些巧思妙技。另外，请注意，Mootool在 strict doctype [严格文档类型]中使用最佳。译注：Doctype即XHTML文档头部声明指定的文档类型。一般是如下形式：

[html]&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;[/html]

JavaScript详细

JavaScript，世上最酷的编程语言。 要想掌握JavaScript，首先您需要明白，它和 <此处用你最喜欢的编程语言代替>完全不同。当你明白了这一事实后，你可能会想要看看下面这些指导文章：

了解基础

现在来点轻松的。Yahoo的一些大好人为世人上传了很多普及性的视频教程。这真的是件大好事，因为我们对JavaScript的学习简单到了只需要花几个小时看这些聪明的伙计们讲话。

激动人心的 JavaScript三部曲

• JavaScript编程语言
  • 第一部分
  • 第二部分
  • 第三部分
  • 第四部分
• DOM的理论研究
  • 第一部分
  • 第二部分
  • 第三部分
• 高阶JavaScript
  • 第一部分
  • 第二部分
  • 第三部分

特别收录

• Nicholas Zakas谈可维护代码
• Joe Hewitt介绍Firebug

自食其力地进阶

一旦你已完成上面的学习，试着利用Google找寻您想知道的问题的答案，直到您能用原始的JavaScript代码编写出几个有趣的跨浏览器Ajax应用。没什么不可能的，用不了多久你就可以抛开Google自己动手了。我认为靠你自己的力量做点这些可以帮助你理解一个框架是如何实现应用的，以及这些丰富的应用背后的过程。

你可能也会觉得 JavaScript的知识鸿沟 是篇有意思的文章。

通过实例进行学习

如果你真的很想成为一个好的JavaScript代码编写者，最好的方式就是阅读已洞悉个中奥妙的人编写的代码。也就是说，你可能需要 浏览MooTools的源码 获得一些启迪。你不仅可以吸收很多好点子，通过这一过程，你还能更深层次的理解这一框架。

进阶到更高水平

现在是时候下载Mootools啦！如果你确实完成了我上面列举的大部分内容的学习，我们欢迎你到论坛上提问，在IRC聊天室里潜水，为Mootools社区做出您的贡献。 试试下载完整的，未经压缩的源码并将其应用于你的开发工作。看看当你对其做出修改时都会发生什么事。试着找出一些bug，提出相应的解决办法。做几个插件。但是请保证在为你的插件命名时让其看起来和Moo有关。

持续关注

常来这个blog逛逛，这里有调试代码时你所须知的一切以及一些让你与函数打交道的过程变得有趣的延伸阅读。

©2007 笨活儿 | 永久链接 | 板凳还在 | 推荐到豆瓣