淘宝一面时，与一舟的谈话中很大一部分内容和自己的职业规划有关，二面时也和小马谈及许多关于前端未来的东西。后来试玩Google Wave，又心血来潮发起了一个《重构是否有必要单独作为一项职业》的问题。我承认，这个问题很讨打，尤其是对“重构界”的各位大大来说。想来也真是好笑，我实在太小心眼儿了，当初还在庆幸腾讯有一个专门的页面重构职位（因为我编程基础很差，只会CSS），被他们鄙视后，发觉了这职位其实大有学问，反而开始怀疑起它的必要性来。不过这个不是重点，重点是在这个怀疑的过程中，我对自己在前端领域该如何发展，有了更为理性和系统的认识。

前端新人哪里来？

我想相对于其他技术职位来说，前端算是最不挨踢的IT职位了。我注意到很多校招进来的“页面重构师”、“前端开发工程师”等等都是非计算机相关专业的（像我，木材科学…. 扯蛋~）。这当然是因为互联网行业吸引人以及html和CSS入门起点低，大学里尚能全民考C（计算机二级），全民做网页有什么不可以？而且，因为职位所处位置的交叉性，注定有很多前端人员是转行而来：

1. 设计师转前端

这个最常见。小公司里的“美工”至今还干着这样的工作 —— 出图（Photoshop） -> 切图（HTML/CSS）。我本人也是因为帮我姐（设计师+代码盲）切图才踏上前端这个道路的。搞设计出身的前端有一个优势是能更好地把握设计稿的表现重点，对于某些视觉设计师不合规范的操作能轻松地化解。劣势也很明显，缺乏数理基础，写出的代码不够严谨，JavaScript基础也普遍较差，不能做真正的“前端开发”。

2. 后台程序员转前端

淘宝的第一位前端工程师本身是写Java的，今年校招也有一位同学面Java结果被推到前端然后被录取的（哇，复杂的中文句式）。之所以现在前端有很多非计算机专业的人，还有一大原因是学计算机的都“不屑于”来搞前端。你说学四年计算机，结果跑去切图写CSS，丢不丢人？所以从后台转战前端的，一般也要去搞所谓的Web Apps，基于Ajax和各种复杂架构的Web运用。而这一技术方向，其实才是前端的大势所趋（下文再议）。

3. 网虫转前端

现在很多小孩，特喜欢上网，老打游戏也没意思，所以想学点互联网相关的东西，首选自然是前端了！（因为简单嘛。）有兴趣搞这些的90后，个个成了全才：Photoshop能玩，CSS能玩，php也能玩…… 包括奶瓶嘴作者在内的几位Twitter名人就是其中的典型…… 作为“互联网重度用户”，有一大优势，那就是对网页结构、交互需求的直观理解，懂得网民需要些什么，写出的程序也往往有更佳的易用性。当然，易用性要靠所谓“交互设计师”，不过，交互设计不也是前端的一部分么？

此外，还有很多在实践中成长起来的站长，也还是有一定的“前端修养”。可能他们最初就只是想搞几个站玩玩，在不断建站的过程中学到一些前端技术。有些人在前端方面精专下去，有些人则持续地做着重复性的工作或一直坐吃山空。此是题外话，不表。

前端新人何处去？

从不同渠道接触前端的同学自然会走不同的道路，而前端作为联系服务器数据与用户的纽带，作为视觉设计与程序逻辑的碾钵，也发散出很多不同的分支。

面试前准备自我介绍时我写过一些要点（后来因为紧张没有用上）：

我认为平常做网页时，我能获得的心理满足包括：

1. 设计中的美学体验
2. 同时作为用户和设计师，完成一项交互产品时的参与感
3. coding时的逻辑性对自己的锻炼
4. debugging完成后的成就感

这其实大致描述了在前端领域可能面对的挑战——视觉，交互，前端开发。这也正是大部分互联网公司UED部门的职位划分。平常所说的前端，一般指狭义的“前端开发”，此文标题里所说的“前端新人”，也是指作为程序员的各位刚入行的前端开发者。程序员有什么成长轨迹，前端新人自然也八九不离十——一日千行代码，钻研细节成为技术大拿，自写程序贡献开源社区，出书立著；学习管理经验，负责团队项目架构，跳槽或创业，当老板赚大钱……

有一些搞前端的同学，投身这个职位时并没有意识到自己是名程序员（说实话，我本人现在对“程序员”这个称谓的认同感也不强）。他们进入这个行业的初期，就是一“做网页的”，或出于个人兴趣，或出于工作需求（传奇的网络工作部），可以说是在一种“全民有个站”的浪潮中成长起来的。他们什么都会一点儿，设计、交互、SEO、站点架构，都是在潜移默化中进行着无意识实践（或有意识的浅实践）。而一旦决定把“做网页”当做自己赖以谋生的职业，这样模糊的定位肯定行不通了。你要自信地对自己说：“其实，我是一名前端工程师（or 交互设计师 / 视觉设计师）。” 不然你就只能吃青春饭，干一些“笨活儿”，走不出一条可持续发展之路。

避免成为“死做网页的”

如果你一定要说我是做网页的，可不可以不要在前面加‘死’字。

个人觉得，现在搞前端的确是要什么都会，什么都要了解。在这种“大前端”的趋势下，先有一个明确的目标职业比较重要。你是更爱设计还是代码？亦或者用户研究更对你味？小公司（小项目）里没有那么明确的职能划分，要求你什么都会，这无可厚非，而且对你的成长很有帮助。但做到一定程度，确立一个能力重点，是十分有必要的。

拿“前端开发”这一块来说，有重视视觉的展示类站点，有重视交互的应用型站点，前端开发也自然地划分出两个方向—— 普通应用和RIA。普通应用只需单纯的psd2html，把psd文件转化成html。而RIA则需要和“广义前端”的各个部门分工协作，同时又兼具较高的程序员素养（算法、逻辑严密性，etc…）。话说回来，psd转html的过程也大有学问，很多CSS tricks让人抓狂，页面重构的细节多多，而且别忘了，它还是RIA的前期准备。考虑到将来Web应用的复杂性（交互越傻瓜化，支撑交互的脚本就越复杂），互联网产品的迭代周期越来越短，分工合作乃大势所趋。要避免成为“死做网页的”，就要理解这个“分工”与“合作”的过程，并在某一方面有所精专（要么CSS，要么JS，要么Flash），同时不断学习其他相关技能。

在这一点上，我坚持着两个信条：

1. 不轻易重复自己
2. 不断学习

不论做设计还是写代码，我都不喜欢重复自己。新鲜的布局往往让我激动万分。只要看到新的技巧，就要在下一个项目里亲自实践。这也是为什么我只做过五六个站（一些小练习不算），却能面上淘宝的原因（好吧，其实是因为运气，哈哈）。

而怎么选择自己的能力重点，也是一个问题。在面试前，我如此帮自己分析：

平时做整套网页，前端coding所花时间最多。项目需求、学习条件所限，导致我在网页视觉设计和交互设计上的学习，不及前端开发深入，可能还不能满足融入一个大公司团队的需求。而且前两者需要很强的沟通能力，相对来说，写代码的活儿独立性更强，应该更适合我一些。

现在想来也不无道理，但随着工作的深入，自身能力的提高，兴趣点发生转移也不是不可能。总之，无论如何选择职业，都以能实现自己已有长处，同时不埋没自己的潜能为准。

追随职业的发展需求

互联网瞬息万变，前端行业发展喜人，Web 2.0网站风光无限，同时也给从业者提出很多新的要求。而你跟随时代的脚步有多紧，很大程度上决定了你将来会有多成功。前端开发这一职位，将来会怎么发展；如果还有新人转过来，会是程序员们更适合，还是设计师们更适合？把这个问题想通了，也就预知了前端的未来。

HTML5/CSS3会带来什么？

HTML5新增了很多方便富应用的标签，CSS3新增了很多方便视觉设计的属性，这即能简化开发，也提供了功能实现上的更多可能。更强大的Web应用，更灵活而方便的构建方式，更需要前端人员具有“大前端”的思维。是理性的程序员更容易大起来，还是感性的设计师更容易呢？

IE6什么时候能死？

浏览器兼容一直是前端开发的重中之重。既是最费时也最无趣的部分，也是需要前端开发作为独立职位的一大原因。既有人抱怨“IE6去死吧！”，也有人说“IE6死了，我们就没工作啦”（当然，后者目光比较短浅）。IE6已经活了整整10年，上个月淘宝的访客还有70%是IE6用户。IE6一日不死，HTML5/CSS3这些新东西就一日不能全面部署。

不过，IE6生命力再顽强，它总归是会死的（浏览器标准会越发统一）。是否能把握先机，决定了你将来的竞争力。

跨平台，跨设备的前端

互联网前所未有地慎入移动设备。君不见，手机黄祸的影响力已经大道让家长们个个如坐针毡。作为前端开发人员，这些社会问题我们无力过问，但我们至少能看出，手机等移动设备上的开发潜力是非常大的。淘宝已经新成立了无限事业部，联通“iPhone拥有各种应用程序”的广告铺天盖地袭来，你还在等什么呢？

前端和后台同质化，交互与视觉何去何从？

所谓Web App被大力提倡，很多前端程序已经比某些后台程序还要复杂。当你投身于复杂的JavaScript海洋时，心中对交互和视觉还能保有多少敬畏？嗯，这个问题比较悬了，还待我真的能写得出复杂程序时再议。

安全、性能，你不可不知之事

这些东西，就是“专业”和“半罐水”的区别。互联网上有很多渠道可以接触这些新热点，我不再赘言。

算法，Geek的乐趣

JavaScript游戏，JavaScript绘图，酷炫的ActionScript动画，你能写出来几个？

你的意见呢？

我是不想再在前端方面干“笨活儿”了，所以我打算把技术文章都转移到 亲泥巴 – Kiss The Mud ，本文将是笨活儿博客上最后一篇前端技术相关的文章。各位大大，各位新人们，你对这个问题有什么看法？想听听你的意见。

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

作为行业标杆的淘宝前端放出自己的开源编辑器，当然要关注一下。

首先简要评价一下我用过的一些编辑器（比较八卦，技术牛人请自动跳过）：

1. CKEditor 以前的FCKEditor，最老牌的JavaScript RTE之一，换名字后的新网站很漂亮，但是皮肤比较丑，所以我自己做站肯定不会用他。目前在用CKEditor或FCKEditor的网站包括译言、cnBeta、百度空间等…
2. TinyMCE 界面很优雅，最出名的应用就是WordPress后台的文章编辑页面了… 文档完善，自定义插件也相当容易。这大概也是人人网选用TinyMCE的一大原因。
3. Google Docs的编辑器 岂可用“强大”二字形容。必须说“很好很强大”…. 不过我辈只有观瞻的分，人家没有开源，开了源你也用不上…
4. QQ邮箱的编辑器 小巧而强大，但用户体验欠佳。而且英文版的时候，在Firefox下是一塌糊涂……（不知道现在修正过来没有）
5. QQ空间的编辑器 一些交互细节值得称道，但可用性不敢恭维。
6. 搜狐白社会的编辑器 简单的功能造就了迅猛的加载速度。icon有点丑。=.=
7. Discuz的编辑器 完全就是一个怪物。

此外，还有NicEdit、openwysiwyg等独立js编辑器，和一些基于类库的编辑器。jQuery有jwysiwyg (读作/dʒei’wiziwig/)，YUI有YUI RTE，mootools也有wysiwyg插件，不过好像都缺少后续更新。还是TinyMCE和CKEditor比较活跃啊~

淘宝此次发布的编辑器，基于YUI构建，而且是YUI 2.x，诚如“摇滚肉包子”所言，这多多少少会给编辑器的推广带来一些阻碍。但到底好不好用呢？还是试过之后才知道：

1. 界面

现在这款皮肤，和Google Docs很接近，字体颜色拾取器也是借鉴了Google Docs，很好用。总体来说清新舒爽，不油不腻，简洁实用…  不过不太喜欢字体下拉菜单的蓝色：

这是绝对的链接色。这种菜单，用黑色就很好：

（弹出层和按钮左侧有两个像素的距离，我不知道作者是不是故意不对齐的。）

期待淘宝UED的视觉设计达人们能加入到后续版本的开发中，设计出一套更加漂亮的皮肤来。感觉淘宝整站的这种“外凸渐变”实在太多了，不够elegant…

据说插入链接/图片的浮动层样式参考了搜狐白社会，十分紧凑，适合这种小巧的社区发帖编辑器。

2. 功能

目前只实现了一些常用的编辑器功能，字体样式、图片和链接插入、缩进和对齐等。没有清除样式的按钮，直接添加标题（h1~h6）、引用（blockquote）等语义化标签的按钮也没有，从Word中复制内容得到的html源码也十分混乱。不过通过查看js源码，可以看出作者预留了很多接口，底层代码也算是博采众长，插件和皮肤和的自定义还算方便。

作者透露的开发计划是：

紧接着的二期里，将进一步完善基础架构和插件体系，并提供 Undo/Redo, 插入Flash, 表格编辑和预置模板等功能。

另外一些细节，比如说插入图片时URL没有基本的正则验证，当没有p标签包裹时按回车键只会出现br换行，字体的样式和颜色是使用的font标签来设置，等等…… 可能会让一些细节控/语义控觉得受不了。

更多bug和改进建议可以参考updates list。（话说淘宝影响力就是大啊，发布不过一周，提交的bug已经近80个了…）

3. 浏览器兼容

稍微测试了一下，发现的问题有：

1. ie和ff之外的浏览器不能使用图片大小重设
2. opera里缩进按钮失效
3. ie中把图片右对齐，会出现烦人的横向滚动条
4. …

更多兼容性问题，请继续参考updates list…..

4. 大小

KISSY以“小巧灵活，简洁实用”为开发理念，功能实现上遵循着实用主义，但是又保持了相当高的灵活性和可扩展性。

KISSY Editor依赖于YUI的yahoo-dom-event，两者压缩到一个文件后的大小为94k，而TinyMCE在同样的压缩规则下大小为162k。相比于TinyMCE强大的功能，KISSY的尺寸似乎略显臃肿… 对广大站长的号召力似乎不是很大。yahoo-dom-event占到总代码量的近2/3，不知道如果让KISSY独立起来，总代码量会减少多少？

很早以前我就想要一个jQuery版的TinyMCE，因为那得节省多少代码啊~  KISSY Editor还这么新，不知道有没有可能从一开始就整一系列基于多类库的版本？（哇… 类库，内裤，这个词好….）同步开发应该好维护些，不然以后代码庞大起来，要转移内裤就更难搞了。

5. 性能

把插件弹出层的HTML代码写到js里，真是一个好idea… 非常受不了WordPress后台那基于远程HTML文档的模态窗口，网速慢的时候，插入链接这么简单的操作，都要等十秒以上……

至于KISSY这个编辑器的内存占用、代码洁净程度等需要高强度测试的高科技问题，就还是等其他牛人来搞啦… 笔者没有这个水平。

报告完毕！———~—~–~–~-~–妖艳的分割线–~-~–~–~——–

即刻试用KISSY Editor |  在Google Code上的项目主页 在 GitHub 上的KISSY项目主页 |  开发者博客

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

设计师的工作一直与“可视性（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 笨活儿 | 永久链接 | 已经有12条评论了 | 推荐到豆瓣

()

()

()

()

()

那么，为什么现在还有15%至25%的网页浏览量来自这火星时代（也就是2001年）的浏览器？作为一名coder（程序员），designer（设计师），UI guy（用户体验工程师），这破浏览器给我们带来的困扰简直是罄竹难书。为了兼容性这位大美女，我们在IE6这个糟老头上耗费了难以计数的精力和时间。

尽管IE6增加了我们的负担，但只要有克服困难的决心，我们开发出的Web应用也还是有一定可用性。不过现在，HTML 5 的正式登场近在眉睫，我们乘坐的Web列车正火速开往一场巨大变革的重要拐点。IE6无疑是这条“革命之路”中间的巨大障碍。革命的号角已经吹响，在接下来的几个月，我们的主动行动将越来越重要。Web技术要发展，IE6必须进坟墓！

Internet Explorer 6 的那点破事儿

是的… Facebook 也不欢迎 IE6 了哦…

现在，也许你应该问自己两个问题：IE6到底哪里不好？为什么现在还有这么多人用它？

第一个问题的答案相对简单：互联网生态急剧变化，Internet Explorer 6在技术上显得越来越落伍。你只需想象一下在一台2001年的电脑（20GB硬盘，256MB的内容，还有么？）上使用现在的社交网站、微软Office、iTunes、即时通讯、电子游戏，以及你的其他桌面软件…… 就是这个理：很多新的Web技术就是没办法兼容IE6啊。下面是一个IE6不支持的功能简表，大部分coders应该都对它们了然于胸了:

- CSS 2 (层级样式表): 这是Web设计视觉表现的基础所在。毫无办法呢，设计师总是必须针对IE6做一些hack。

- PNG 透明度: 能够实现柔和渐变透明度的png图像不能在IE6内正常显示。而漂亮的半透明效果已经是网页设计的基本技巧之一。

- 常见安全问题: 如果不更新防毒软件，就更容易中毒。同样道理，不更新浏览器也更容易遭受黑客攻击。网上随处可得让IE6崩溃的代码。 我就不告诉你完整代码了，你可以在Wikipedia上找找看。IE6就是这么不稳定……

- Digg()， Facebook()，以及 YouTube () [即将不支持]: Digg和YouTube都发布公告宣称，他们将逐渐放弃对IE6的支持。Facebook已经开始对IE6用户下手——使用IE6登录会出现一条建议你升级浏览器的提示信息。是的，在不远的将来，你将无法使用Digg挖文章，用Youtube收看视频…… （笨活儿：在墙内，根本不用等到将来…）

其他互联网公司也宣称，IE6对它们造成了很大限制。37Signals，很多极为流行的基于Web的商业软件（如Basecamp ()）的缔造者，就决定削减对IE6的支持。他们说：“继续支持IE6就代表我们无法优化用户界面，或者为我们的程序添加增强的客户体验。”（笨活儿：国内互联网好像还未见有公司有这么勇敢？）

那么，为什么还有那么多人使用这过时的IE6呢？我觉得有两大主要原因：一是Windows XP绑定了IE6，将其作为系统的默认浏览器；二是很多公司的IT部门都怕麻烦而懒得为公司的电脑升级——还得去说服那些电脑小白去习惯新浏览器。小白们都很容易满足，除非遇到什么大事——比如说Google在IE6下打不开了——他们才不会有什么不满。

尽管如此，Web世界还是勉强能够突破IE6强加的重重限制。不过，“好日子”不长了，新技术正在攻占Web世界的战略要地。有一项IE6完全无法处理的重大技术即将登场：HTML 5。

下一站： HTML 5

HTML （超文本标记语言）是塑造万维网的基础 —— 任何一个写博客的人，肯定都接触过HTML标签。HTML 5是下一代HTML语言，随之而来的一系列特性是非常耀眼的，尤其是自从Google () 和 Apple 公司的专家加入之后（分别是Ian Hickson 和 Dave Hyatt），新特性的光芒越发闪耀。

Google尤为努力地推动着HTML 5的发展。因为HTML 5确实能带来可用性的增强，也将为Web开发提供无限可能。 在今年的Google I/O会议上，Google介绍了HTML 5的预期功能（有视频（需翻墙），笨活儿过几天发布中文字幕版）。其中最酷的地方包括：

- Video 标签: 通过使用<video>标签来标记视频，你可以直接在HTML里插入视频。而且，你能很容易地控制视频播放界面的外观。

- Audio 标签: 和视频标签类似，<audio>让您更容易地插入音频。

- Time 标签: 此标签能让浏览器识别HTML页面里的时间。同时也提供<meter>标签标记度量值。

- 拖放: 尽管这一特性还存在争议，但HTML 5将最终实现直接拖放文件到浏览器中给HTML页面处理的功能。拖放操作在Google即将发布的通讯整合产品Google Wave ()中应用广泛，这大概也是他们如此努力推动这项功能的重要原因之一。

- 本地存储: Web应用使用起来的感觉已经和桌面应用差不多了，只是它们还无法直接在本地电脑上保存你的工作。HTML 5将解决这一问题。

- 地理位置: 使用HTML 5，您可以实现让Web应用通过读取你的所在地信息而提供更加密切关联的信息。随着利用所在地位置的移动设备的崛起，这一点将越来越重要。

- 即时二维绘图: HTML的canvas元素允许你利用脚本来绘制位图。也就是说你可以完全在HTML的框架内绘制漂亮的图像。很多Web应用的界面将变得更加丰富和有动感。 Mozilla Bespin 是一个非常强大的项目，它利用HTML 5实现了一个在线代码编辑器。你应该也猜得到，它并不支持IE6。

和任何一门优秀的语言一样，未来的HTML 5还会加入更多功能。如果你有兴趣完整了解HTML 5，我推荐您阅读IBM developerWorks上的一篇文章：HTML 5 中的新元素。不过，重点在于：旧有的浏览器也能处理使用HTML 5标记的网站，只不过有部分新功能无法实现罢了。只要越来越多的公司放弃IE6，就可以将这部分守旧的用户忽视不管了。

IE6已经阻碍我们的创造力太久太久

从2001年起，我们就持续忍受着IE6百年不变的苦瓜脸，现在终于就要抵达突破的时刻。各大互联网公司都对此有所察觉。YouTube和Digg显然已经失去了继续支持老旧浏览器的耐心，才会放出话来说他们将逐渐放弃对IE6的支持。越来越多的公司加入进来，因为他们最终都会发现，付出那些让网站在微软的破浏览器里也正常运作的代价，是越来越不值得了。

不过如果我们向前展望，HTML 5作为标准将方便我们建立起更为丰富多彩的Web应用。我们的生活和互联网的联系越来越紧密，Facebook 之类的应用将更为不可或缺。Google适时地宣布了Google Chrome OS的消息。这一建立在浏览器基础上的操作系统将能够完美运行各种Web应用程序。然而，如Google Wave之类的富应用项目，如果必须屈身于一只老旧的浏览器，它的潜能将会或多或少（或者完全地）被埋没。

IE6在2001年时的确够用了， 但对于不断发展的Web应用程序——那些作为工具的需要和桌面应用一样无缝运行的Web应用——来说，这种需要大量HACK，需要花费大量时间和精力才能保证网页正常工作的浏览器实在应该靠边站。现在，让保守者升级浏览器的唯一方法只能是——让他们发现自己最喜爱的网络工具突然不能在IE6下正常使用了。而只有让用户转变，开发者才能更放心地使用HTML 5这种新技术，而不是继续在过时的技术中沉迷。

简而言之，我们正处在Web技术发展的十字路口，要继续前行而不走弯路，我们就必须把IE6这个路障清除干净。行动起来吧，朋友们！

笨活儿的旁白

这篇文章是在Twitter的热门关键词里发现的。前天“IE6 Must Die”一直在Twitter上晃来晃去。

原文在此：http://mashable.com/2009/07/16/ie6-must-die/

目前，mashable发起的这一抵制IE6的活动已经有7700多名Twitter用户的参与（并且还在不断增加中……）。你也可以到Twibbon参加这个改头像请愿的活动。

而在实际项目的开发中，你也可以和你的产品经理商量一下，要么给IE6用户增加一些提示升级的推广信息；要么对他们关闭某些功能（前提是务必说明你有这些高级功能，并且为什么给他关了……）。【更多实际行动，请参考Shawphy的这篇博文。】

笨活儿博客就添加了明显的“扰民信息”……

“升级您的浏览器”链接到这里：http://fallwith.me/no-ie.html。欢迎您直接套用我的模板。

本文极为渴求被转发！不注明出处也没关系！！搞前端的，都行动起来吧！

本文蓝色理想讨论帖：http://bbs.blueidea.com/thread-2939958-1-1.html

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

英文原文：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条评论了 | 推荐到豆瓣

1. 使用最新版本
2. 合并、最小化脚本
3. 用for替代each
4. 用ID替代class选择器
5. 给选择器指定前后文
6. 建立缓存
7. 避免DOM操作
8. 避免使用concat()，利用join()处理长字串
9. 返回false值
10. 利用小抄和参考文档

1. 使用最新版本

jQuery一直处于不断的开发和改进过程中。 John 和他的团队不断研究着提升程序性能的新方法。

一点题外话，几个月前他还发布了Sizzle，一个据说能在Firefox中把程序性能提升3倍的JS选择器库。

如果你不想时刻关注是否有新版本，然后再花时间下载上传，Google 就又能帮你一把了。他们的服务器上存储了大量Ajax库供您选择。

<!-- 利用一个简单的script标签调用API -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
/* 加载 jQuery v1.3.2 */
google.load ("jquery", "1.3.2", {uncompressed: false});
/* 加载完成后弹出消息 */
function onLoad () {
alert ("jQuery + Google API!");
}
google.setOnLoadCallback (onLoad);
</script>

编辑按：另一个更为简单快速的方法是直接使用脚本链接。如果要使用特定版本的jQuery，你可以使用上面的方法；如果想直接使用最新版，下面这句代码就够了：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

笨活儿：特定版本的还可以这样加载：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

2. 合并、最小化脚本

大部分浏览器都不能同时处理多个脚本文件，所以它们都是排队加载——加载时间也相应地延长了。

考虑到你网站的每个页面都会加载这些脚本，你应该考虑把它们放到单个文件中，然后利用压缩工具（比如 Dean Edwards 的这款）把它们最小化。更小的文件无疑将带来更快的加载速度。

JavaScript和CSS压缩的目的是在保持脚本的执行性能的同时，减少数据传递的字节数（可以通过减小原始文件，也可以利用gzip。大多数产品级的网络服务器都把gzip作为HTTP协议的一部分）。

— 引自 YUI compressor，一款 jQuery官方推荐的压缩脚本的工具。

3. 用for替代each

原生函数总是比辅助组件更快。

如果遇到需要遍历对象的情况（如从远程接收的JSON对象），你最好重写你的（JSON）对象为一个数组，数组的循环处理要容易些。

利用Firebug，我们能测定每个函数的执行时间。

var array = new Array ();
for (var i=0; i<10000; i++) {
array[i] = 0;
}
console.time('native');  //原生for函数
var l = array.length;
for (var i=0;i

上面的结果显示原生代码只需2毫秒就做到的事，利用jQuery的each方法需要26毫秒。而且这还只是我在本机上测试一个基本上啥也没做的函数的结果，当遇到更复杂的情况，例如设置css属性或DOM操作时，时间差异肯定更大。

4. 用ID替代class选择器

利用ID选择对象要好得多，因为这时jQuery会使用浏览器的原生函数getElementByID()来获取对象，查询速度很快。

因此，比起利用那些方便的css选择技巧，使用更为复杂的选择器也是值得的（jQuery也为我们提供了复杂选择器）。你也可以手工书写自己的选择器（其实比你想象中简单），或者为你想要选择的元素指定一个有ID的容器。

//下例创建一个列表并且填充条目内容
//然后每个条目都被选择一次
//首先使用class选择
console.time('class');
var list = $('#list');
var items = '
';
for (i=0; i<1000; i++) {
items += '
item
';
}
items += '
';
list.html (items);
for (i=0; i<1000; i++) {
var s = $('.item' + i);
}
console.timeEnd('class');
//然后利用ID选择
console.time('id');
var list = $('#list');
var items = '
';
for (i=0; i<1000; i++) {
items += '
item
';
}
items += '
';
list.html (items);
for (i=0; i<1000; i++) {
var s = $('#item' + i);
}
console.timeEnd('id');

上面的例子很好地说明了不同选择方式之间的显著性能差异。请看下图，利用class来做选择，时间无限增大，甚至超过了五秒：

5. 给选择器指定前后文

jQuery的参考文档里说：

传递给jQuery() 原始DOM节点的前后文（如果没有东西被传递，则前后文为整个文档）。

目的是连同选择器一起，实现更为准确的查询。

所以，如果你一定要利用class来指定目标，至少为选择器指定上下文，以免jQuery费精力去遍历整个DOM文档：

与其这样写：

$('.class').css ('color' '#123456');

为选择器加上前后文比较好（expression: 目标选择器；context: 前后文）：

$(expression, context)

也就是说：

$('.class', '#class-container').css ('color', '#123456');

这样做要快得多，因为它不用遍历整个DOM。只要找到#class-container就好了。

6. 建立缓存

不要犯不断重新选择同一个东西的错误。你应该把你要处理的元素缓存为一个变量。

更不要在一个循环里重复选择同一个元素！这样做十分影响速度！

$('#item').css('color', '#123456');
$('#item').html('hello');
$('#item').css('background-color', '#ffffff');
// 这样写更好
$('#item').css('color', '#123456').html('hello').css('background-color', '#ffffff');
// 甚至这样
var item = $('#item');
item.css('color', '#123456');
item.html('hello');
item.css('background-color', '#ffffff');
// 遇到循环,这样做非常不好
console.time('no cache');
for (var i=0; i<1000; i++) {
$('#list').append(i);
}
console.timeEnd('no cache');
// 下面这样要好得多
console.time('cache');
var item = $('#list');
for (var i=0; i<1000; i++) {
item.append (i);
}
console.timeEnd('cache');

如下图所示，即使是相对较短的迭代，缓存的效果还是很明显的。

7. 避免DOM操作

DOM操作应该越少越好，因为诸如prepend()，append()，after()的插入动作都很费时。

上面的例子如果用html()会更快：

var list = '';
for (var i=0; i<1000; i++) {
list += '
'+i+'
';
}
('#list').html (list);

8. 避免使用concat()，利用join()处理长字串

听起来可能挺奇怪，不过这样做真的能提升速度，尤其是当连接特别长的字串时。

先建立一个数组，放入你想要串联的东西。join()方法比字符串的concat()函数要快得多。

var array = [];
for (var i=0; i< =10000; i++) {
array[i] = '
'+i+'';
}
$('#list').html(array.join (''));

近期一项由Tom Trenka发起的测试中，得出了下表的结果：

“ += 操作符更快——比把字串片段放到数组中然后join起来还要快”，“作为字串缓冲（string buffer）的数组在大部分浏览器中都比string.prototype.concat.apply方法效率更高，Windows下的Firefox 2.0.0.14例外。”

— Tom Trenka

9. 返回false值

您可能已经注意到，如果函数执行后不返回false，你就会被跳转到页面顶部。

如果页面较长，这种反应是很烦人的。

所以，与其这样：

$('#item').click (function () {
// stuff here
});

不如多加一句：

$('#item').click (function () {
// stuff here
return false;
});

10. 额外小贴士 – 小抄和参考文档

这条建议并不直接提升函数的执行速度，不过如果你肯花时间在这上面，研究研究这些小抄和参考文档，你将来定能节约很多时间。

请在手边随时放一张小抄以作快速参考。

英文原文来自NetTut+：10 Ways to Instantly Increase Your jQuery Performance

译文原文来自笨活儿：十种方式即刻提升您的jQuery代码性能[TUTS+]。

©请尊重作者和译者。若需转载，务必保留原文链接。

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

果冻恙 – Jelly Young

这是大一暑假，也就是整整两年前做的东西。当时抱着本台湾人编的CSS实例教程（没有系统化讲解，都是一些基本属性的实例应用，书名我忘了），还有一部《Ajax基础教程》，一个人在家里捣鼓，基本上是零基础，家里又没有联网，没办法看网上的教程，基本上就靠着这两本书了。嗯…. 以及Dreamweaver的帮助文档，呵呵。

果冻恙? 嗯哼？

当年的自我介绍是这样写的：

我在我的世界里轻轻的歌唱。果冻软滑的质感，明亮的色彩，丰富而甜蜜的口味，让人开心，不得不开心呵！我做那只年轻的让认人开心的果冻，我却无力诋毁我内心的忧伤。果冻有恙，无恙？无所依矣！

同学，不装逼你会死啊？！“我在我的世界里轻轻的歌唱”这句话到底是哪里看来的？好像非常具有代表性…… 嗯哼嗯哼…… 最后一句“无所依矣！”是个嘛东西？你认为大家都像你一样不懂古文吗？唉…… 所以呀，现在我虽然挺讨厌装逼的人，也没想鄙视他们。是的，大家都要经历这个阶段。

个篱小朋友要送我域名一个，让我自己选，我本着单纯而美好的愿望，挖空心思想了这么一个“果冻恙”。想起来，jellyyoung听起来也蛮悦耳的。可惜，后来我们才发现，搜索“果冻恙”会提示：你是不是要找“果冻样”——而这结果，可就不太雅观了…… 哈哈哈。Anyway，当年做这个站的时候，还是对这事儿毫无知觉……

外观

当年已经学过一点PS，所以你能看到主页的左边放了些我自己P的图。不过，我还不知道用Photoshop来做效果图，所以这个站整个外观都是直接用CSS写的，颜色什么的也是不断改代码试出来的，没有什么mockup之类的东东…  只有背景，是一条渐变图的平铺。因为那本CSS教程上就有讲背景图啦！但是好像现在看起来渐变不够明显？还不如用纯色呢！而且哟，当年我都不知道设置背景图片的同时还可以设背景色的……

也不知道是哪里学来的设计技巧，每个子页面都是高纯度色。这种做法我一直念念不忘，乃至到后来做学生会网站的时候，也用了四种高纯度色。现在看来，这些色彩，都好囧啊。不是说看着累，而是在某些显示器上看着累…… 显示器稍微有点色差就会受不了。适用范围不广。

首页那个Flash啊，好囧啊。转圈圈，转圈圈，关键词，关键词…… 多么纯真无邪呀～ 不过最囧的还是，里面用到的一个单词meditate，我居然想不起来是啥意思了…… 刚才有道了一下，是“冥思”的意思…… 是的，热情、冥思、自信、善良，就构成了这只让人开心却要自己忧伤的果冻……   嗯…. 严肃，大家都严肃！

还有那些ＰＳ的图片，唉，看了就让我伤感呀…… 想当年我还是凌厉的小正太一枚，如今就已蜕变成面向猥琐、胡子拉碴、双目无光、人人第一印象都是“你是宅男吧？”的幽怨大叔了……

技术

都说我基本上是零基础，手边有没有网上的系统教程，所以做的时候都是靠的我对软件的敏感，自己在Dreamweaver里摸索。“站点管理”、“网页模板” 些东西都是自己搞懂的…… 然后JavaScript，是几乎毫无基础，直接抱着《Ajax基础教程》啃，然后自己写出来的。说实话，显得我的JS也不咋地，没有google就写不下去的，连最基本的字符串操作函数都必须随时有参考文档才行…… 想成大事，是还是要费脑子去背才行。

虽说我看了《Ajax基础教程》，但看懂这本书还需要Java基础和servlet的环境实践，所以我也就看了些最基本的概念就没有深入研究了。果冻恙的Ajax用在了日志和友链页面里。

突然从当年的日志里发现，原来我一直都是一个workaholic，只要专心去做一件事了，完全可以废寝忘食。不过啊，要是自己不想做的事，打死也不会去做…… 即使早就过了deadline都还是要推…… 解决办法只有让自己爱上它，或者寄希望与通过一点责任心来控制自己，不然真的没办法强迫的……

一个下午都耗在Mod_rewrite上了…

由于我的虚拟主机不支持域名绑定子目录，所以我就需要通过rewrite来实现子网站的虚拟主机。前段时间换成了Linux主机，而Apache下的mod_rewrite又和IIS上的ISAPI Rewrite的作用机制有点不一样。我试了很久发现好像mod_rewrite的[L]（停止重修）这个flag没有起作用？不知道是哪里的全局设置出了问题，还是我自己对这一flag的理解没对？有没有高手解释一下？

最终我选定的方案是：

[php]RewriteCond $1 !(test|portfolio|pf|src|demo)/
RewriteCond %{HTTP_HOST} ^(test|portfolio|pf|src|demo)\.benhuoer\.com$
RewriteRule ^(.*) /%1/$1[/php]

核心是判断host name，然后rewrite到子目录下。之所以把HTTP_HOST这个condition放到第二句是需要在RewriteRule里调用那些host前缀，使用%1进行匹配。$1匹配的是前面的RewriteRule的Pattern。第一句是为了防止已经rewrite过的再被rewrite…

有谁能提供更好的写法吗？[L]到底是怎么回事呀？谁能告诉我！

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

本文列出了24条能让你的代码编写过程更为轻松高效的建议。也许您还是JavaScript初学者，刚刚写完自己的Hello World，那这里有很多对您的工作将十分有用的小贴士；也许有些技巧您已经知道，那就试试快速浏览一下，看能不能发现一点新东西吧！

注：本文多次用到Firebug的console对象，请参考Firebug Console API 。关于firebug的更详细介绍，请猛击这里。

1. 用 === 代替 ==

JavaScript里有两种不同的相等运算符：===|!== 和==|!=。相比之下，前者更值得推荐。请尽量使用前者。

“如果两个比较对象有着同样的类型和值，===返回true，!==返回false。”

- JavaScript: The Good Parts

不过，如果使用==和!=，在操作不同数据类型时, 你可能会遇到一些意想不到的问题。在进行相等判断前，JavaScript会试图将它们转换为字符串、数字或 Boolean量。

2. 避免使用Eval函数

Eval函数把一个字串作为参数，并把字串作为JavaScript语句执行，返回结果（参考）。

此函数不仅会降低你脚本的执行效率，而且还大大增加了安全风险，因为它赋予了作为文本的参数太大的权利。千万别用！

3. 不要使用快速写法

技术上说，你可以省略掉大部分花括弧和句尾分号，绝大多数浏览器都能正确执行以下语句：

if(someVariableExists)
 x = false

不过，如果是这样的呢：

if(someVariableExists)
 x = false
 anotherFunctionCall();

你可能会认为它和下面的语句相等：

if(someVariableExists) {
 x = false;
 anotherFunctionCall();
}

不幸的是，事实并非如此。现实情况是它等价于：

if(someVariableExists) {
 x = false;
}
anotherFunctionCall();

如您注意到的，再漂亮的缩进也不能代替这华丽的花括弧。在所有情况下都请写清楚花括号和句尾分号。在只有一行语句的时候能偶尔省略掉，虽然下这么做也是极度不被推荐的：

if(2 + 2 === 4) return 'nicely done';

多考虑下将来吧，孩子

假设，在将来的开发过程中，你需要为这个 if 语句添加更多的命令呢？到时候你还不是得把括号给加上？

4. 好好利用JS Lint

JSLint 是由 Douglas Crockford 编写的一个调试器。你只需要贴上你的代码，它就能快速为您扫描出任何明显的错误和问题。

“JSLint 扫描接收的代码。发现问题，描述问题，并给出其在源码中的大概位置。可发现的问题包括但不限于语法错误，虽然语法错误确实是最常见的。JSLint也会用约定俗成的习惯检查代码的格式化风格，以及结构错误。通过JSLint的扫描并不能保证你的程序就完全正确。它只是为您提供了额外一双发现错误的眼睛。”

- JSLint 文档

完成代码之前，把它放到JSLint里检查一下，快速消灭你的无心之过。

5. 在页面底部加载脚本

正如下图所示：

请记住—— 我们要千方百计保证客户端的页面载入速度尽可能的快。而脚本没载入完成，浏览器就没法加载页面的剩余部分。

如果你的JS文件只是添加一些额外功能——例如，为点击某链接绑定事件——那大可以等页面加载基本完成后再做。把JS文件放到页面最后，body的结束标签之前，这样做最好了。

更好的写法是

<p>超哥是世界上最帅的人。benhuoer.com是世界上最好看的博客。</p>
<script type="text/javascript" src="path/to/file.js"></script>
<script type="text/javascript" src="path/to/anotherFile.js"></script>
</body>
</html>

6. 在 For 语句外部声明变量

当需要执行冗长的for语句时，不要让JavaScript引擎每次都重复那些没有必要的操作。例如：

这样不好

for(var i = 0; i < someArray.length; i++) {
 var container = document.getElementById('container');
 container.innerHtml += 'my number: ' + i;
 console.log(i);
}

这段代码每次都重新定义数组长度，每次都在遍历DOM寻找container元素 —— 太傻了！

这样好多了

var container = document.getElementById('container');
for(var i = 0, len = someArray.length; i < len;  i++) {
 container.innerHtml += 'my number: ' + i;
 console.log(i);
}

我要给留言改进这段代码的人额外惊喜！欢迎大家留言讨论！

7. 快速构建字串

要对一个数组或对象做循环操作时，不要老惦记着一表人才的for语句，拿点创意出来嘛！明明就还有很多更快的办法：

var arr = ['item 1', 'item 2', 'item 3', ...];
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

“没那么多繁文缛节来烦你；你就信我一次好了（或者你也可以自己试一试）—— 这真的是迄今能找到的最快办法了！

用点土办法，也别管它背后究竟发生了什么抽象的东西，通常土办法都比那些优雅的办法要快捷得多！”

- James Padolsey, james.padolsey.com

8. 减少全局变量

“把你踩在全局的那些乱七八糟的脚印都归于一人名下，能显著降低与其他应用、小工具或JS库冲突的可能性。”

- Douglas Crockford

var name = 'Jeffrey';
var lastName = 'Way';
function doSomething() {...}
console.log(name); // Jeffrey -- or window.name

更好的写法

var DudeNameSpace = {
 name : 'Jeffrey',
 lastName : 'Way',
 doSomething : function() {...}
}
console.log(DudeNameSpace.name); // Jeffrey

注意看，我们是如何戏剧化地把“乱七八糟的脚印”都归到“DudeNameSpace”这对象之下的。

9. 写好注释

可能一开始你会觉得并无必要，但相信我，你将来会主动想要尽可能写好代码的注释的。当你几个月后再回看某项目时，结果却发现很难想起当时写某句东西时脑子在想的什么了，是不是很让人沮丧呢？或者，如果有同事要修订你的代码呢？一定，一定要为你代码里的重要部分加上注释。

// 遍历数组，输出各自名称
for(var i = 0, len = array.length; i < len; i++) {
 console.log(array[i]);
}

10. 试试渐进增强

一定要记得为未启用JavaScript的情况提供替代方案。大家可能会认为，“大部分我的访客都启用了JavaScript的，我才不用担心”。这样的话，你可就大错特错了！

你有没有试过看看禁用JavaScript后你那漂亮的滑动器都成啥样了？（你可以下载 Web Developer ToolBar 轻松完成这项任务。）禁用之后你的网站可能就彻底失去了可用性！经验之谈：开发初期总是按照没有JavaScript来设计你的网站，之后再进行渐进地功能增强，小心翼翼地改变你地布局。

11. 不要传递字串给 “setInterval” 或 “setTimeout”

看看下面的代码：

setInterval(
"document.getElementById('container').innerHTML += 'My new number: ' + i", 3000
);

不仅执行不高效，而且和 eval 函数有着同样的高风险。千万不要把字串传递给 setInterval 和 setTimeout。恰当的做法是，传递一个函数名：

setInterval(someFunction, 3000);

12. 不要使用with语句

初识之下，“with”语句似乎还挺好用的。它用于设置代码在特定对象中的作用域。其基本用法是提供深入到对象中处理元素的快速写法。例如：

with (being.person.man.bodyparts) {
 arms = true;
 legs = true;
}

– 等价于 —

being.person.man.bodyparts.arms = true;
being.person.man.bodyparts.legs= true;

不幸的是，测试表明，若你要为对象插入新成员，with的表现非常糟糕，它的执行速度非常缓慢。替代方案是声明一个变量：

var o = being.person.man.bodyparts;
o.arms = true;
o.legs = true;

13. 使用 {}，而不用New Object()

在JavaScript有多种方式能新建对象。最传统的方法是 new 语句，如下：

var o = new Object();
o.name = 'Benhuoer';
o.lastName = 'Yang';
o.someFunction = function() {
 console.log(this.name);
}

不过，这一方法读起来却比较糟糕。我强烈建议你采用下面这种在文字样式上更为强健的写法：

更好的写法

var o = {
 name: 'Jeffrey',
 lastName = 'Way',
 someFunction : function() {
 console.log(this.name);
 }
};

注意，如果你想新建一个空对象，用 {} 就能行：

var o = {};

“对象字面符(Objects literals)帮助我们写出支持很多特性，同时又关联性强、简明直接的代码。没必要直接调用新建语句，然后再费心维护声明变量和传递变量的语句之间的正确顺序，等等。” – dyn-web.com

14. 使用[]，而不用New Array()

新建数组时的同类型运用。

行得通的写法

var a = new Array();
a[0] = "Joe";
a[1] = 'Plumber';

更好的写法

var a = ['Joe','Plumber'];

“在JavaScript编程中经常遇到的一个错误是，该用数组时却用了对象，该用对象时却用了数组。规则其实很简单：当属性名是小的连续整数时，你应该使用数组。其他情况，使用对象。” – Douglas Crockford

15. 一长列变量声明？别写那么多var，用逗号吧

var someItem = 'some string';
var anotherItem = 'another string';
var oneMoreItem = 'one more string';

更好的写法

var someItem = 'some string',
 anotherItem = 'another string',
 oneMoreItem = 'one more string';

…不言自明。我不知道这样做能否提升代码执行速度，但是确实让你的代码干净许多。

17. 千万千万记得写分号

大部分浏览器都允许你不写句尾分号：

var someItem = 'some string'
function doSomething() {
 return 'something'
}

之前已经说过，这样做会造成潜在的更大、更难以发现的问题：

更好的写法

var someItem = 'some string';
function doSomething() {
 return 'something';
}

18. “For in” 语句

遍历对象时，你可能会发现你还需要获取方法函数。所以遇到这种情况时，请一定记得给你的代码包一层 if 语句，用以过滤信息。

for(key in object) {
 if(object.hasOwnProperty(key) {
 ...then do something...
 }
}

引自 Douglas Crockford 所作： JavaScript: The Good Parts

19. 使用Firebug的“Timer”功能优化你的代码

想要轻松地快速了解某项操作的用时吗？使用Firebug的timer功能来记录结果好了。

function TimeTracker(){
 console.time("MyTimer");
 for(x=5000; x > 0; x--){}
 console.timeEnd("MyTimer");
}

20. 读，读，读……Read, Read, Read…

虽然我是Web开发博客（就像这个！）的超级粉丝，但吃饭和睡觉前除了看书好像也别无选择~ 在你的床头柜上摆一本Web开发的好书吧！下列书单都是我的最爱：

• Object-Oriented JavaScript（暂无中文版）
• JavaScript: The Good Parts（中文版）
• Learning jQuery 1.3（暂无中文版，但你可以看看老版本的中文版）
• Learning JavaScript（中文版）

阅读他们…… 反复阅读很多次！我现在都还在读。

21. 自决的函数

相比于调用函数，让函数在页面载入或者某一父函数被调用时自动执行，是十分简单方便的做法。你只需要把你的函数包在父辈之内，然后添上一个额外的括号，本质上这括号就触发了你定义的函数（了解更多）。

(function doSomething() {
 return {
 name: 'jeff',
 lastName: 'way'
 };
})();

22. 原生 JavaScript 总是会比使用代码库来的快

诸如jQuery和Mootools这样的JavaScript库，能为你写代码的过程省下不少时间——尤其是当需要 AJAX 操作时。不过你可得记住，只要你的代码写得恰当，原生JavaScript总是会比利用代码库的写法执行得快一些。

jQuery的“each” 方法对于循环操作十分便利，但是使用原生态的for语句总归会快很多。

23. Crockford 的 JSON.Parse

尽管 JavaScript 2会内建JSON处理器，但写这篇文章之时，我们还是需要自己实现。Douglas Crockford，JSON的创建者，已经为我们创作出能直接使用的处理器了。您可以在这里下载。

导入这段代码，你就能新建 JSON 全局对象，然后处理你的 .json 文件。

var response = JSON.parse(xhr.responseText);
var container = document.getElementById('container');
for(var i = 0, len = response.length; i < len; i++) {
 container.innerHTML += '<li>' + response[i].name + ' : ' + response[i].email + '</li>';
}

关于JSON，请查看更多介绍。

24. 移去“Language”

很多年前，language还是每段script标签必备属性：

<script type="text/javascript" language="javascript">
...
</script>

不过现在，这属性已经没啥用很久了…… 所以，删掉算啦！

就这些了，朋友们~

就是这些了，这就是我给JavaScript初学者的24条小建议。各位亲爱的朋友，你们的看法呢？你们有什么快速小贴士吗？感谢你的耐心阅读。

英文原文：24-javascript-best-practices-for-beginners

译文原文：给JavaScript新手的24条建议

© 请尊重版权，若需转载，务必保留链接。

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

确定明晰目标

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

改进的验收准则练习（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 笨活儿 | 永久链接 | 已经有7条评论了 | 推荐到豆瓣

在这篇文章中，我们将讨论八个布局解决方案/技巧，这些方案和技巧将有助于你创建整洁有序的内容布局。这八个技巧包括滑门(sliders)、标签式、渐进布局(progressive layouts)、结构网格、模态窗口(modal window)、翻转元素、手风琴效果(accordions)以及超大下拉菜单(mega drop-down-menus)。

1. 滑动样式与传送带(Sliders and Carousels)

滑门(Sliders)，也可称为传送带(carousels)，是一种有序的、交互性强、十分平滑地展示内容的方式。滑门样式是一个非常流行的技巧，大家都觉得它很好用，能让你在固定的区块内填充上大量内容。没有滑门的帮助，这些内容可能就要分开放到页面中的各个地方。而大多数时候，你在使用页面空间时总是捉襟见肘。或者，有些内容是你希望“用户要求”后才出现。这有助于让用户一次只关注一个内容区块，也符合他们自己的便利需求。

滑门样式的实例

导航区提供缩略图与图标
运用滑门和幻灯样式时，最好在导航区提供图标或缩略图，以便使导航更加简单直观。缩略图和图标给用户指出明路，向他们解释当前所在位置，以及有哪些浏览选项可供选择（比如说幻灯片的导航可以是水平的，也可以是垂直的）。另外，还能方便他们快速选择特定滑门页。

Coda网站的滑门顶部设计了标签卡，他们使用的是“滑动门+标签卡”的混合样式。这个主意绝顶聪明，因为通过看缩略图，用户就能快速得知特定滑门页的内容。而且，这些图标也提供了强大的、令人印象深刻的、干净整洁的视觉支持。除了图标和标签你也可以在标题前加上小图片， 或者只用数字也行。

用于展示产品的滑门样式
与上面的例子对应，滑门不仅能用于大容量信息的组织，也能为用户浏览大量产品条目提供方便。 SourceBits (见下图)使用了多层滑门（一个水平的，一个垂直的），用唱片封面作为导航条目。

水平滑门两端都有大的圆形箭头图标，实时反映左右导航的可用性。滑动的时候有平滑的动画，用起来非常舒服。同时，你也能看到，各个元素间距都精心设计过，这有助于内容组织，也提升了可用性。鼠标滑过时，每个条目还有漂亮的聚光灯效果。

垂直滑动的内容以及超大的水平“点击条”
接下来看看 QuickSnapper 的滑门。这是一个完美融入页面整体布局的十分好用的垂直滑门。滑门内容中有大量截屏图，内容被有序地组织起来。这个滑门最赞的地方就是上下方的按钮导航。按钮宽及整个滑门，大的按钮让“推拉”滑门更加容易。

还有，这些按钮的:active和:focus效果也很漂亮。

滑门脚本

你可以参考下面的脚本、技巧和教程制作你自己的滑门：

• Slick Accessible Slideshow using jQuery
• Coda-Slider 1.1.1
• jquery.scrollable 1.0.2
• Create an Amazon Books Widget with jQuery and XML
• Agile Carousel
• Easy Image or Content Slider
• Slider Gallery
• Coda Slider Effect
• iCarousel

2.标签卡导航元素

本质上标签卡导航和滑门效果是差不多的技巧。它们都能帮你把一大片内容放到一小块区域里。标签卡导航很常见，但也有很多不常见的运用方式。我们这里关注的是在一个页面内部的标签卡，而不是用于在不同页面之间跳转的标签样式主导航。标签卡很明显地将内容划分到不同区块，最终又把他们融合到占地面积很小的一个区块中。

标签卡的样式范例

出众的背景，大的可点击区域，明显的分割
第一个例子来自 Mac Pro网站 的“Performance”部分，其标签元素的组织非常值得学习。这些标签卡上的文字都十分易读，可点击区域很大，各标签视觉上的区分也很明显，这正是大部分用户期待的样式啊。你也应该能注意到，当前标签卡上还有着十分微妙的渐变背景，与主内容区块很好地融合在了一起。未激活的标签背景则略暗，主内容区块在其上有微弱的投影，这种做法加强了深度感和立体效果。十分简单而有效的技巧。

按钮区分的简洁标签卡
以下是另一个利用标签卡紧凑地展示信息的实例。根据 Atebits 的布局结构，介绍性内容的空间被挤压，不太适合做成多区块样式。所以他们介绍内容的三大部分被组织到了标签中，保持了布局的整洁有序。再一次地，当前标签卡的背景与主内容区融合，不活动标签卡则是较暗的灰色背景。你同样也会发现标签卡之间有着漂亮的分割线，使得每个标签卡看起来都像是独立的按钮。

为整个标签集提供清晰的分割线
Fontcase 的标签卡设计也很精妙，很有现代感。尽管在未激活标签之间没有分割线，当前标签却有明显的边线。你也能注意到，在整个标签集的上方和下方各有一条边线。标签卡使用了图标与留白来突出文字，提高了易用性。

标签卡效果脚本

• Create a Slick Tabbed Content Area using CSS & jQuery
• JavaScript tabifier
• Yetii – A JavaScript Tab Interface
• Tabbed Page Interface
• Updated JQuery Nested Tab Set
• Scriptaculous Tabs
• Accordian Tabs

3. 模态窗口

模态窗口（Modal windows），或者称为浮窗，一般用于在空间紧张的页面中展示额外信息。在模态窗口中，你可以放置放大版的图像、额外内容、警告/提示信息、视频等等。用模态窗口展示信息时，记得要同时明确地提示用户如何关闭它。

同时，用于打开模态窗口的链接、缩略图、图标或者其他图形元素，一定要保证与模态窗口要展示的内容有足够的关联。相似的图标、摘要、图形元素都能帮助用户建立原始链接与打开的窗口的联系。

模态窗口的例子

运用到登录和注册流程中的浮窗
模态窗口最典型的运用就是登录／注册窗口了（与诸如图像、音频、视频、Flash等“传统”媒体文件相比）。登录和注册表单不是用户每次浏览页面都要用到的必要部分，所占页面空间理所应当被节约下来。而使用浮窗，则又为用户省去了重开一个页面的时间，毕竟这只是一个很简单的非常用动作。他们能在网站的任何页面中登录/注册，而不用中断现有流程——只要网站的设计者能提供基于Ajax的“静悄悄的” 登录/注册。

Grooveshark 整个站点的每一个页面中，这个漂亮的登录窗口都触手可及。注意，点击登录（ Lodin> ）按钮后并不会载入一个新页面，而是直接把注册表单替换成了登陆表单（使用了手风琴效果）。非常方便，非常友好的用户界面。

消隐页面/使用投影
如果要使用模态窗口，让窗口下面的页面淡出焦点十分重要。你可以用半透明背景覆盖或者为窗口添加投影，或者两者结合。这么做有两个作用：一是能让用户将注意力集中到浮窗上，然后暂时忽视掉背后的页面。另外，也能增加窗口和页面之间的深度感和区分度，让人在视觉上觉得这窗口确实是漂浮着的。注意看下面的例子(KissMetrics)，半透明的黑色背景让页面消隐，有助于登录浮窗暂时成为视觉重点。另外，取消和关闭窗口的按钮也设计得很好，够明显，够漂亮。

RealMacSoftware 的浮窗只做了投影，而没有让整个页面消隐。只要深度感和区分度做得足够，这样也很有效。

模态窗口的脚本

• Fancy Lightbox
• Lightbx 2
• Facebook Image/Content Viewer
• Woork Mootools Lightbox
• nyroModal JQuery Plugin
• JQuery Alert Dialog
• LightWindow
• ThickBox 3.1

4. 翻转元素 Rollover Elements

翻转元素目前被越来越多地运用于商业网站、作品集站点和产品展示页。翻转元素的核心概念就是当用户鼠标移到某个按钮或网页元素上时，处于另一个布局区域的元素就自动显示出来。请看下面的例子深入了解我说的“翻转元素”究竟是什么。

翻转实例

标签卡翻转
下图是 Miro主页 的截屏，他们设计了一个十分精妙的巨大翻转元素。这 本质上和滑门类似 —— 只不过内容切换时不需要点击罢了。

小地方的微妙翻转
TaoEffect 向我们完美展示了如何通过设计精巧漂亮的翻转元素来添加清爽整洁的额外信息（这种效果最早是应用于前文提到过的Coda网站，但我们选择了TaoEffect作为这一节的实例）。信息的展示十分友好，您只需要把鼠标移到按钮上即可。

访问网站你会发现，翻转时有非常轻柔的动画，垂直跳动 + 淡入淡出。你应该也能注意到它的背景是半透明的，跳出来的卡片边缘还有高光和投影，与背景很好的区分开来。

内容地图上的翻转元素
OneHub 则利用翻转元素实现了另一种效果。这个页面有点像地图，在不同区域做出了标注。鼠标移到标注上时，会显示该标注的额外信息。这种方法用在需要分区域详细解释的产品介绍页上将有特效。

与幻灯切换结合的翻转元素
另一个蛮有趣的设计来自 SquaredEye —— 他们在导航按钮上用翻转元素来展示下一页内容的预览图。

小提示/翻转元素的脚本

• Prototip 2
• Coda Popup Bubbles
• Build a Better Tooltip with jQuery Awesomeness
• jQuery plugin: Tooltip
• Create a Simple, Powerful Product Highlighter with MooTools
• Easiest Tooltip and Image Preview Using jQuery

5. 渐进布局Progressive Layouts

“渐进布局”的意思是站点内容按照一定的顺序一块一块地显示给用户。这种组织内容的做法比较反常，但也能在很多网站上看到。渐进布局能帮助用户更容易地深入一长串信息。

渐进布局的实例

整个站点都由渐进布局构成
Sursly.com（貌似被墙，请点击这里代理访问）的整个作品集站点都基于渐进布局。您应该能注意到，页面右上角有一个“GO”按钮，每一页面都是从上一页面中的GO按钮链接过来的。这种页面之间的渐进系统代替了传统的导航和菜单。当然，这样做也有一个很明显的缺点：导航的交互性下降了，用户只能按照网站建设者想要的顺序获取内容。（译注：还有一个缺点是，在不同分辨率屏幕上的显示差异太大，因为你必须考虑到页面内部各区块的位置问题）

尽管单个页面布局能被存为书签（使用# 锚记），但对于随机访问者来说，则无法通过一个明晰的导航对站点内容建立起直接的整体感知。而且，这种布局一般只有一个“航向”，从易用性的角度上来说，所谓“导航”的概念在这里几乎不能适用。

译注：这种水平布局的网站大都采用了渐进布局。和上面的站非常类似的一个网站是： peter-pearson.com 相对于简单的滚动，这个站还在背景里做了非常可爱的线条，十分漂亮。另外推荐 26个水平布局网站设计，在英文原文的留言里还有很多bonus可看。

垂直方向的渐进布局
Danny Blackman 的作品集也是仅通过一张渐进式布局页面来实现的。各块元素相互独立，在一张页面上垂直展示。相邻元素之间有滚动按钮，每个元素都有返回顶部的按钮。菜单或所谓导航还是没有被使用。

译注：推荐一个做得更好的例子：searchinsidevideo.com 他们使用了固定在顶端的导航，字体也非常大的，极富视觉冲击力，用起来也很方便。

ScrollTo 脚本

• ScrollTo – 使用这个jQuery插件，就能轻松建立渐进式布局。

6. 网格

讨论布局的文章是不可能避开网格不谈的。网格通常被认为是任何平衡、有序、简练的网页布局的基础。很多设计师都认为网格是处理信息容量很大的页面时的必备武器。有时候单独使用网格就能很好的展示信息，甚至不需要其他技巧。好的网格能够将一个页面中的全部内容都整合进流动布局里，而内容的可读性，或者如果用户想快速浏览，都不会受到影响。

下面的网站使用了严格的网格布局。整个站点只有一张页面，需要融入大量信息。不过，全部信息被整合进这整洁的两栏布局网格中。整个布局严谨、强健、稳固，留白恰到好处。浏览或仔细研读内容都非常方便。

使用不同背景区分网格区域
使用网格一般是因为你需要在一个很紧凑的区域内放置大量内容。你想要创建整洁有序的网站布局，但是又不能随意添加很多留白来区分区块。如此的话，你就需要使用不同背景来区分网格区域。没了网格间的大量留白，只要网格内还有少量的内边距，也可以看起来很不错。Valleycreek.org 就用了这种战术，尽管已经有一条细线来分割网格区域，背景色的差异还是被用到，以提供更明显的区分。

网格生成器、模版和更多工具

• Grid System Generator
• Variable Grid Systems Generator
• 960 Grid System
• Grid Designer
• Grid Calculator
• 50 Useful Design Tools For Beautiful Web Typography (including grid-resources)

7. 手风琴效果（折叠菜单）

折叠菜单和滑动门以及标签卡涉及同一个概念：把大量信息压缩到一小块区域里。“手风琴效果”指的是一些被水平或垂直组织的区块，通过点击，一个内容区块滑向另一个区块，并将其内部内容展示出来，和手风琴的推拉过程有点相似。

手风琴效果的实例

功能性和大点击区域
Alex Cohaniuc 的手风琴菜单设计的很好。把作品项目藏到手风琴里是的做法其实挺有道理的，因为这能把每个项目的不必要信息隐藏起来，等访客有需要的时候再显示。说这项设计好是因为：一，每块画布的标题都很大，很好点击；二，每块标签卡都使用了一个小箭头来反映开合状态；三，鼠标滑过时，当前标签卡有将它区分出来的不同背景色。

水平内容滚动
Jason Reed 使用手风琴将整个站点糅合进一张页面里。他没有赋予手风琴以特别不一般的视觉特征，而是让它融入了页面之中。另外，这是一个水平方向推拉的手风琴（尽管标签卡是垂直方向的）。请注意看他的标签卡，每个标签卡之间的距离很大，这些标签卡，或者说标题，并不像上一个例子有那么明显的区分，设计师利用了留白来将它们各自独立。鼠标移上去的时候，这些十分易读的标签就会变成橙色，让用户能够非常明确地了解到自己将要点击的标签后面都有什么。

包含图像和信息的手风琴
Marius Roosendaal 使用另一个非常漂亮的手风琴来“储藏”他的作品图像。与上面两个例子一样，每一个内容区块都是一个项目的展示。不过，此例的手风琴里的每个图像还附加有一些文字介绍。你能注意到一个小按钮被用来显示/隐藏介绍。他同时也提供到更详细介绍或者更大预览图的链接。在一个小小的手风琴里当然不能塞进特别特别多的信息，所以如果可以的话，还是尽量给每个项目都加上到详细内容的链接吧。

手风琴脚本

• Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous
• Apple.com Downoads Page Slide out and drawer effect
• UI/API/1.7.1/Accordion jQuery Plugin
• jQuery UI Accordion
• Simple JQuery Accordion menu
• jQuery Accordion Madness
• jQuery Examples – Horizontal Accordion

8. 超大下拉菜单

导航不一定非得是几个简单的超链接组合。最近，导航设计有一个流行趋势：不仅仅提供“航向”选择，也提供网站内各“终点站”位置以及“终点站”之间的从属关系。所谓“超大”下拉菜单常见于电子常务网站，用于展示他们庞杂的商品分类。这种样式正成为设计趋势，因为它能通过普通的翻转就提供大量分类信息，而不需要用户额外的点击。

超大下拉菜单的实例

超大下拉菜单的一个经典例子是 Ruby On Rails Guide 的Guide Index。这个菜单提供了一个组织良好、样式精美的二级导航。注意，与一般的做法不同，激活二级菜单需要用户点击，Guide Index右边有“切换” 图标，并且有着与将要弹出的二级菜单相融合的背景色。弹出的二级菜单也有细微的投影。

译注：这站点在IE的Quirks模式下有显示异常……（话说显示不异常的页面还基本上没有……）

下面的截图里的投影，我也看不到……

带更多信息的多级菜单
Porsche 对于上面说到的技巧来说，简直是一个完美的例子。Porsche 的主页提供一个多级菜单，让用户不用一次点击就能快速了解他们生产的所有汽车。第三级菜单中，所选汽车的信息被直接提供：包括图片、许多链接、以及其他关于本车的快读信息。当然，这个更大的区块就是一个巨大的可点击区域。所有细节和特别介绍都直接链到相应页面。要了解究竟是怎么回事，就点击下面的图片自己去看看吧！

在下拉列表里显示搜索结果
最近还比较流行的一个技巧和上面谈到的有点类似：在下拉列表里显示搜索结果。 Media Temple Knowledge Base 就使用了这一技巧。他们没有使用一个新页面来显示用户的搜索结果，搜索结果在一个下拉列表里随着你的输入而实时变化。不过，请注意，完整搜索结果页的链接仍然存在，您若要在自己的设计中使用这种设计，还请不要忘记这一点。

在下拉区块中显示额外信息
Gateway.com 继续登场。你能看到他们在顶部菜单中使用了超大的下拉区块来展示产品。下拉区块中的产品排列组织得非常好，图片提供了强健的视觉支持。这个菜单还提供了诸如价格和屏幕尺寸等额外信息，让顾客能够在查看具体页面之前就有所选择。因为很多人都很关心产品价格——至少对于很多有购买需求的人来说。

菜单脚本

• Animated Drop Down Menu with jQuery
• Superfish v1.4.8 – JQuery Drop Down Menu
• Make a Mega Drop-Down Menu with jQuery
• How to Make a Smooth Animated Menu with jQuery
• Designing the Digg Header: How To & Download
• Create a multilevel Dropdown menu with CSS and improve it via jQuery

更多资源

你应该也会喜欢（全是英文）：

• 5 Useful Coding Solutions For Designers and Developers（代码解决方案）
• Designing Drop-Down Menus: Examples and Best Practices（下拉菜单）
• Slideshows in Web Design: Where And How To Use Them（幻灯片）
• 40 Creative Design Layouts: Getting Out Of The Box（40个创新性布局）
• Web Design Trends For 2009（2009年网页设计趋势）
• Table Layouts vs. Div Layouts: From Hell To… Hell?（表格布局vsDiv布局：走出地狱，升入……地狱？ ）

关于作者

Matt Cronin 是一位富有激情的平面设计师，网页设计师/开发者，Cocoa程序员，摄影师，数字艺术家，等等。他也热爱写作，已经为Smashing Magazine写过很多好文。他现在正着手于一个叫做i VAEOU 的项目，不久之后就能面试。 Follow Matt on Twitter.

译文原文来自笨活儿，转载请保留本链接：提升设计品质的8个布局方案。

英文原文：8 Layout Solutions To Improve Your Designs

本文译自Smashing Magazine。从今以后，凡是译自Smashing Magazine的文章都在标题后加注SM，不再另行说明。

然 后，刚才发现译言上已经有本文的翻译了，不过是分上下篇发的。虽然有译文，我还是自己独立把本文给译完了。我想说的是，我这人比较耿直，绝对不会把 原文切割，分为几个部分来发。翻译的时候忠实原文也是我很看重的，所以我不会随意精简原作者的话，大家如何觉得罗嗦，还是多多包涵吧！

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

英文原文来自Smashing Magazine。由笨活儿翻译。转载请注明出处。

正则表达式(Regular Expression, abbr. regex) 功能强大，能够用于在一大串字符里找到所需信息。它利用约定俗成的字符结构表达式来发生作用。不幸的是，简单的正则表达式对于一些高级运用，功能远远不够。若要进行筛选的结构比较复杂，你可能就需要用到高级正则表达式。

本文为您介绍正则表达式的高级技巧。我们筛选出了八个常用的概念，并配上实例解析，每个例子都是满足某种复杂要求的简单写法。如果你对正则的基本概念尚缺乏了解，请先阅读这篇文章，或者这个教程，或者维基条目。

这里的正则语法适用于PHP，与Perl兼容。

1. 贪婪/懒惰

所有能多次限定的正则运算符都是贪婪的。他们尽可能多地匹配目标字符串，也就是说匹配结果会尽可能地长。不幸的是，这种做法并不总是我们想要的。因此，我们添加“懒惰”限定符来解决问题。在各个贪婪运算符后添加“?”能让表达式只匹配尽可能短的长度。另外，修改器“U”也能惰化能多次限定的运算符。理解贪婪与懒惰的区别是运用高级正则表达式的基础。

贪婪操作符

操作符 * 匹配之前的表达式零次或零次以上。它是一个贪婪操作符。请看下面的例子：

preg_match( '/<h1>.*< \/h1>/', '</h1><h1>这是一个标题。</h1>
<h1>这是另一个。</h1>', $matches );

句点(.)能代表除换行符外的任意字符。上面的正则表达式匹配 h1 标签以及标签内的所有内容。它用句点(.)和星号(*)来匹配标签内的所有内容。匹配结果如下：

这是一个标题。
这是另一个。

整个字串都被返回。* 操作符会连续匹配所有内容—— 甚至包括中间的 h1 闭合标签。因为它是贪婪的，匹配整个字串是符合其利益最大化原则。

懒惰操作符

把上面的式子稍作修改，加上一个问号(?)，能让表达式变懒惰：

/<h1>.*?< \/h1>/</h1>

这样它会觉得，只需匹配到第一个 h1 结尾标签就完成任务了。

另一个有着类似属性的贪婪操作符是 {n,} 。它代表之前的匹配模式重复n次或n次以上，如果没有加上问号，它会寻找尽可能多的重复次数，加上的话，则会尽可能少重复（当然也就是“重复n次”最少）。

# 建立字串
$str = 'hihihi oops hi';
# 使用贪婪的{n,}操作符进行匹配
preg_match( '/(hi){2,}/', $str, $matches );  # matches[0] 将是 'hihihi'
# 使用堕化了的 {n,}? 操作符匹配
preg_match( '/(hi){2,}?/', $str, $matches );  # matches[0] 将是 'hihi'

2. 回返引用(Back referencing)

有什么用？

回返引用(Back referencing)一般被翻译成“反向引用”、“后向引用”、“向后引用”，个人觉得“回返引用”更为贴切[笨活儿]。它是在正则表达式内部引用之前捕获到的内容的方法。例如，下面这个简单例子的目的是匹配出引号内部的内容：

# 建立匹配数组
$matches = array();
# 建立字串
$str = "\"This is a 'string'\"";
# 用正则表达式捕捉内容
preg_match( "/(\"|').*?(\"|')/", $str, $matches );
# 输出整个匹配字串
echo  $matches[0];

它会输出：

"This is a'

显然，这并不是我们想要的内容。

这个表达式从开头的双引号开始匹配，遭遇单引号之后就错误地结束了匹配。这是因为表达式里说：("|')，也就是双引号（"）和单引号（'）均可。要修正这个问题，你可以用到回返引用。表达式\1,\2,…,\9 是对前面已捕获到的各个子内容的编组序号，能作为对这些编组的“指针”而被引用。在此例中，第一个被匹配的引号就由1代表。

如何运用？

将上面的例子中，后面的闭合引号替换为1：

preg_match( '/("|\').*?\1/', $str, $matches );

这会正确地返回字串：

"This is a 'string'"

译注思考题：

如果是中文引号，前引号和后引号不是同一个字符，怎么办？

还记得PHP函数 preg_replace 吗？其中也有回返引用。只不过我们没有用 \1 … \9，而是用了 $1 … $9 … $n （此处任意数目均可）作为回返指针。例如，如果你想把所有的段落标签 <p> 都替换成文本：

$text = preg_replace( '/<p>(.*?)< \/p>/',
'&lt;p&gt;$1&lt;/p&gt;', $html );

参数$1是一个回返引用，代表段落标签

内部的文字，并插入到替换后的文本里。这种简便易用的表达式写法为我们提供了一个获取已匹配文字的简单方法，甚至在替换文本时也能使用。

3. 已命名捕获组(Named Groups)

当在一个表达式内多次用到回返引用时，很容易就会把自己弄糊涂，判断N个数字（\1 … \9）都到底代表哪一部分会比较困难。这是就可以用到带名字的捕获组（下文简称“有名组”）。有名组使用(?P<pattern>)来设定，name代表组名，pattern是配合该有名组的正则结构。请看下面的例子：

/(?P<quote>"|').*?(?P=quote)/

上式中，quote就是组名，"|'是改组匹配内容的正则。后面的(?P=quote)是在调用组名为quote的有名组。这个式子的效果和上面的回调引用实例一样，只不过是用了有名组来实现。是不是更加易读易懂了？

有名组也能用于处理已匹配内容之数组的内部数据。赋予特定正则的组名也能作为所匹配到的内容在数组内部的索引词。

preg_match( '/(?P<quote>"|\')/', "'String'", $matches );
# 下面的语句输出“'”(不包括双引号)
echo $matches[1];
# 使用组名调用，也会输出“'”
echo $matches['quote'];

所以，有名组并不只是让写代码更容易，它也能用于组织代码。

4. 字词边界(Word Boundaries)

字词边界是字串里的字词字符（包括字母、数字和下划线，自然也包括汉字）和非字词字符之间的位置。其特殊之处就在于，它并不匹配某个实在的字符。它的长度是零。 \b 匹配所有字词边界。

可惜，字词边界大多数情况下都被无视了，很多人并不知道如何实际运用。 下面举个例子。比如说你想要匹配单词“import”：

/import/

注意了！正则表达式有时候很调皮的。下面的字串也能和上面的式子匹配成功：

important

你或许觉得，只要在import前后加上空格，不就可以匹配 import 这个独立的单词了：

/ import /

那如果遇上这种情况呢：

The trader voted for the import

当 import 这个词在字串开头或者结尾时，修改后的表达式仍然不能用。因此，考虑各种情况是必须的：

/(^import | import | import$)/i

别慌，还没完呢。如果遇到标点符号呢？就为了满足这一个单词的匹配，你的正则可能就需要这样写：

/(^import(:|;|,)? | import(:|;|,)? | import(\.|\?|!)?$)/i

对于只匹配一个单词来说，这样做实在是有点大动干戈了。正因如此，字词边界才显得意义重大。要满足上述要求，以及很多其他情况，利用字符边界，只需如此写：

/\bimport\b/

上面所有情况都得到了解决。\ b 的灵活性就在于，它是一个没有长度的匹配。它只匹配两个实际字符之间想象出的位置。它检查两个相邻字符是否是一个为单字，另一个为非单字。情况符合，就返回匹配。如果遇到了单词的开头或结尾， \b 会把它当成是非单词字符对待。由于import里面的 i 仍然被看成是单词字符，import 就被匹配出来了。

注意，与\b相对，我们还有\B，此操作符匹配两个单字或者两个非单字之间的位置。因此，如果你想匹配在某个单词内部的‘hi’，可以使用：

\Bhi\B

“this”、“hight”，都会返回匹配，而“hi there”则不会返回匹配。

5. 最小组团(Atomic Groups)

最小组团是无捕捉的特殊正则表达式分组。通常用来提高正则表达式的效能，也能用于消除特定匹配。一个最小组团可以用(?>pattern) 来定义，其中pattern是匹配式。

/(?>his|this)/

当正则引擎针对最小组团进行匹配时，它会跳过组团内标记的回溯位置。以单词“smashing”为例，当用上面的正则表达式匹配时，正则引擎会先尝试在“smashing”里寻找“his”。显然，找不到任何匹配。此时，最小组团就发挥作用了：正则引擎会放弃所有回溯位置。也就是说，它不会尝试再从“smashing”里查找“this”。为什么要这样设置？因为“his”都没有返回匹配结果，包含有“his”的“this”当然就更匹配不了了！

上面的例子并没有什么实用性，我们用/t?his?/ 也能达到效果。再看看下面的例子：

/\b(engineer|engrave|end)\b/

如果把“engineering”拿去匹配，正则引擎会先匹配到“engineer”，但接下来就遇到了字词边界，\b，所以匹配不成功。然后，正则引擎又会尝试在字串里寻找下一个匹配内容：engrave。匹配到eng的时候，后面的又对不上了，匹配失败。最后，尝试“end”，结果同样是失败。仔细观察，你会发现，一旦engineer匹配失败，并且都抵达了字词边界，“engrave”和“end”这两个词就已经不可能匹配成功了。这两个词都比engineer短小，正则引擎不应该再多做无谓的尝试。

/\b(?>engineer|engrave|end)\b/

上面的替代写法更能节省正则引擎的匹配时间，提高代码的工作效率。

6. 递归(Recursion)

递归(Recursion)用于匹配嵌套结构，例如括弧嵌套， (this (that))，HTML标签嵌套

。我们使用(?R)来代表递归过程中的子模式。下面是一个匹配嵌套括弧的例子：

/\(((?>[^()]+)|(?R))*\)/

最外层使用了反义符的括号“(”匹配嵌套结构的开端。然后是一个多选项操作符( * | * )，可能匹配除括号外的所有字符 “(?>[^()]+)”，也可能是通过子模式“(?R)”来再次匹配整个表达式。请注意，这个操作符会尽量多地匹配所有嵌套。

递归的另一个实例如下：

/<([\w]+).*?>((?>[^<>]+)|((?R)))*<\/\1>/

以上表达式综合运用了字符分组，贪婪操作符、回溯，以及最小化组团来匹配嵌套标签。第一个括弧内分组([\w]+)匹配出标签名，用于接下来的应用。若找到这尖括号样式的标签，则尝试寻找标签内容的剩余部分。下一个括弧括起来的子表达式和上一个实例非常相似：要么匹配不包括尖括号的所有字符 ?>[^<>]+，要么递归匹配整个表达式(?R)。表达式最后的<\/1>代表闭合标签。

7. 回调(Callbacks)

匹配结果中的特定内容有时可能会需要某种特别的修改。要应用多重而复杂的修改，正则表达式的回调就有了用武之地。回调是用于函数preg_replace_callback中的动态修改字串的方式。你可以为preg_replace_callback指定某个函数为参数，此函数能接收匹配结果数组为参数，并将数组修改后返回，作为替换的结果。

例如，我们想将某字串中的单词全部转换为首字母大写。十分不巧，PHP没有直接转化字母大小写的正则操作符。要完成这项任务，就可以用到正则回调。首先，我们要匹配出所有需要被大写的字母：

/\b\w/

上式同时使用了字词边界和字符类。光有这个式子还不够，我们还需要一个回调函数：

function upper_case( $matches ) {
return strtoupper( $matches[0] );
}

函数upper_case接收匹配结果数组，并将整个匹配结果转化成大写。 在此例中，$matches[0]代表需要被大写的字母。然后，我们再利用preg_replace_callback完成这次回调：

preg_replace_callback( '/\b\w/', 'upper_case', $str );

一个简单的回调即有这般强大的力量。

8. 注释(Commenting)

注释不用来匹配字串，但确实是正则表达式中最重要的部分。当正则越写越深入，越写越复杂，要推译出究竟什么东西被匹配就会变得越来越困难。在正则表达式中间加上注释，是最小化将来的迷糊和困惑的最佳方式。

要在正则表达式内部加上注释，使用(?#comment)格式。把“comment”替换成你的注释语句：

/(?#数字)\d/

如果你打算把代码公之于众，为正则表达式加上注释就显得尤为重要。这样别人才能更容易看懂和修改你的代码。和其他场合的注释一样，这样做也能为你重访自己以前写的程序时提供方便。

考虑使用“x”或“(?x)”标记位来格式化注释。这个修改器让正则引擎忽略表达式参数之间的空格。“有用的”空格仍然能够通过[ ]或\s，或者\ （反义符加空格）来匹配。

/
\d    #digit
[ ]   #space
\w+   #word
/x

上面的代码与下面的式子作用一样：

/\d(?#digit)[ ](?#space)\w+(?#word)/

请时刻注意代码的可读性。

更多资源（英文）

• Regular-Expressions.info Comprehensive website on regular expressions
• Cheat SheetInformative regular expressions cheat sheet
• Regex GeneratorJavaScript regular expressions generator

关于作者

Karthik Viswanathan 是一个喜欢编程和做网站的高中生。你可以到他的博客上查看他的作品：Lateral Code。你也可以关注一下他的线上Twitter应用。

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

“高品质”是所有人追求的目标，在网页设计的世界中也不例外。不过何为“品质”，如何判断一项设计的品质是好还是坏？笔者恰好有一套找出网页设计中品质焦点的方法。一旦你了解到如何判断一项高品质的设计究竟好在哪里，你就掌握了让自己的设计更趋完美的大量技巧。

接下来我会给大家列一些要点，并附上相应的例子，与大家分享一下我在别人的网页设计中寻找“高品质”的过程。

01. 留白

在好的网页设计中我最留意的是那些对设计元素之间留白的聪明运用。留心不同内容区块之间的间距和排列方式，能让你的设计的整体感官大不一样，从而提升设计的品质。

我觉得处理好留白的关键是从整体上感知设计元素。把设计稿缩小观看会是个好办法。

出色的留白处理的实例

Good.is

页面整洁而有开放感，全都得益于设计师对文字和图像之间留白量的准确把握。

Digital Mash

在大空白上展示的元素往往更具吸引力。Digital Mash的网站创造了极佳的亲和力。

Creatica Daily 的大量空白

优秀的留白运用又一次让网页内容成为焦点。每篇文章中都有大量内容，不过该站点的设计师们并不惮于给这么多内容之间填上大量留白。并不是说你的文字不够多，就不能用很多留白。

Postbox 上也有很多空白

仔细观察Postbox的网站，你能看到边缘处的留白应该如何处理。它的方框边缘有60像素的边内留白。听起来似乎挺大的，实际看起来效果却好极了。

留白时的错误

大家在设计留白时的最常见问题就是各个区块的内容到边缘距离太小。不论你的设计多么有风格，如果你硬要把东西塞得紧紧的，这些风格连同设计的品质，就都流失了。

留白不够的例子

我们已经看到PostBox的网站那些大留白创造了多么动人的效果，所以下面我们修改一下它的页面，看看减少留白会是什么效果：

品质感明显下降了。留白的影响就有这么大。

高效控制留白的技巧

各种不同情况下，留白要求都不尽相同。你需要不断训练自己，做到对留白所能带来的改变时刻心中有数，从而有效地利用留白满足设计需求。这要靠个人感觉的，不过都能从实践中锻炼出来。

• 使用网格辅助设计
  利用网格当然能帮助你理解元素之间的空白。
  
• 不断尝试
  不断尝试—失败—尝试，直到找到最佳方案。
  
• 留白并不是浪费空间
  空白并不总是等着你去填充的。
• 没错，少就是多
  与其用尽心思填满某个区域，不如就把它留空，只保留至关重要的信息就好。

02.  像素级的完美

有一个方法能够看出某人在完成一项网页设计时是否真的用心了。有时候创造奇迹的就是一些小细节，一些别人几乎无法察觉的细节。我所说的“像素级的完 美”就是指在线条、边缘和边框描边上仔细推敲。与其就用一条单一的线，不如多加一些细节。细节可以是细微的渐变，也完全可以只是一条1像素宽的细线（用作表现阴影或高光）。有了这些细节， 你的设计会大不一样。有些设计师在这方面特擅长： Collis Ta’eed, David Leggett 以及 Wolfgang Bartelme.

像素级完美细节的实例

Envato的细节鉴赏

下图的Example 1 (例子1)中，绿色内容框的边缘有一条更亮的绿色线。而Example 2处，区块内边缘有柔和的渐变阴影，而边缘之上还有一像素的白色描边。这做法非常聪明，用阴影来强调高光。后面的绿色区域有非常柔和细微的光影效果，有助于将注意力吸引到下面的白色区块中那清新脆爽的细节上去。 尽管这种做法并不是总能让设计看起来更加精致，不过它们的确能帮助你赋予设计以三维的真实感。于是设计元素就成了镶嵌在页面上的宝石，而不是平铺在上面的一张毫无动感的纸。

Tutorial9.net上的细节

David Leggett 对于如何制造 单像素顶边条 有很深的理解。他最近重新设计的 tutorial9 集合了很多非常棒的像素化技巧。 Example 1 处你能看到，他是如何仅仅通过添加一条1像素的高光，而将导航标签变得更有质感。Example 2 处使用的技巧则更多了。相机图标的投影，下方白色区域的阴影与高光，以及导航条上的1像素高光。

RedBrick Health上 按钮和分割线上的完美像素级细节

这个漂亮的导航菜单，由Ryan Scherf 创造，是使用完美像素级细节提升设计品质的绝佳实例。红色按钮有1像素的高亮，链接之间的分割线也有同等的品质与细节。正如你所看到的，他没有满足于只用一条灰色线分割，Ryan还在下面添加了一条1像素宽的高光线，避免了设计看起来过于平坦。

完美像素级细节也适用于Grunge风格: AvalonStar

译注：Grunge风格有“做旧”、“迷幻摇滚”、“做脏”等几层意思在里面，算是平面艺术中的一个流派。

下面的例子是漂亮的AvalonStar：Distortion（扭曲）主题博客，有着极赞的grunge风格。不过，即便是肮脏做旧的grunge风，利用1像素高光也能创造大不同。下图的Example 1 处，上面的棕色区域有一个渐变阴影，下面的绿色区块的顶部则有着一条1像素高亮线。阴影与1像素线的结合，让这些区块显得更为精致。

完美细节小贴士

要在这一技巧上达到完美，不断的实践尤为重要。如您所见，一条1像素线这么简单的东西就能给设计添加非常酷的深度感。你甚至不一定要用到那些倒角或渐变，费尽心力做一些实实在在的置于某对象之上的效果。

• 一定得是细节
  小细节完善内容感官是关键。
• 思考像素级问题
  描边、渐变、线条、阴影等等，不用太宽大也能有效增强设计
• 前后对比
  应用效果后注意与没有这种效果之前进行对比。如此你就能知道这些细节到底带来了哪些改观。

03. 文字排列与字体选用的诀窍

尽管设计师大都不会亲自撰写网站的实际内容，不过他们对于内容的整体品质仍然至关重要。设计师的作用就是要保证内容的展现方式足够易读。有很多方法能保证你的字体易读易用，不过我不会给大家列一些该做什么或者不能做什么的规矩和条款，我带给大家的是一些聪明运用字体的实例和分析。

仔细考虑了字体的实例

The Netsetter上大而漂亮的字体

网页设计中，标题很重要，对于博客设计来说尤为如此。最近流行在标题上使用大而粗的字体。这样做有很多好处，不仅能提高特定内容区块的可用性，而且有助于组织设计中的空间和结构。 Netsetter 在这方面做得非常好，如您所见，标题字体很大，周围有大量留白，十分易读。

行间空白和字符间距

Viget 的网站是字体究竟对网页设计有多重要的完美实例。下面的截图来自他们的作品集展示页，再一次展示了大字体是如何帮助创建开放空间的。即使是这种清爽的细线体，他们也使用了宽阔的空白。另一个值得称道的地方是他们对于行高 (line height) [行间空白]的的绝妙选择。行间距被设定得比默认值大很多，大大增强了文字可读性。也许下次你可以在自己的设计中也试一试这个技巧。

Web Design Ledger, 配合情绪的字体

要找到完美的字体需要不断的尝试和失败，或者你还可以根据字体所代表的“情绪”来选择字体。下面的例子，Web Design Ledger， 在给人以复古和做旧感的同时，也饱含开放的情绪与现代感。他成功的关键就在于选择了能唤起人们相应情绪的字体。Henry Jones (该站的设计师) 为标题选择了一种流行的传统衬线字体：Georgia，为怀旧复古风的实现提供了很大裨益。现代感则来自与标题完全不同的字体——主内容使用的Helvetica字体，一种无衬线的、滑溜的、开放的字体。

网页设计中字体选用的快速决断

看了上面这么多好例子，将来你选用起字体来应该会更加得心应手。不过，为什么他们给人的感觉这么好？下一次在你自己的设计中，你又该如何运用？

• 是否可读？
  不要怕尝试粗大的字体
• 你可否考虑过间距？
  间距对于可读性有很大决定作用
• 你的字体带给人什么情绪？
  确保字体选择适合你的设计风格

这方面还有大量值得关注的地方，不过我不是这方面的专家，我也只是刚刚学会了如何鉴赏那些用得极好的字体而已。如果你想在这方面了解更多，强烈建议你看一下来自Smashing Magazine的这篇文章。

04. 元素的组织

设计师这一职业对很多人都有吸引力，因为那些制造创意的过程，实在是十分有趣。我知道组织内容的过程就没有那么有趣了，不过一旦你养成了组织内容的好习惯，你就会发现其实它也没有想象中那么枯燥。组织内容的方式总是需要看情况而定，比如说，这站点是什么类型？某项特定内容在页面上的重要性如何？

如何放置内容，以及放到哪里，可能的排列组合实在太多了。不过还是有一些技巧可循的。最基础的就是，先决定你的设计需要达到的效果。例如，你是在做卖东西的网站吗？是要做内容展示吗？或者是在做一个用户注册页？推广页面？等等……

靠设计做买卖: 37Signals

看看这个广受欢迎的 37 signals 的网站。他们的东西能卖这么好，可不是靠的运气。他们的网站让你尽可能容易地了解了他们的产品， 帮你做出最终决定。你所看见的东西都被精妙地设计而呈现。

如图中所示，他们提供了四大理由让你购买他们的产品。吸引注意力(Attention)是第一步，他们做了一个黑色区块，放上关于产品的简单介绍，并且使用了粗大的标题。 接着，他们通过一些漂亮的插画把你的兴趣(Interest)吸引到对产品优点的介绍上。再然后，他们想要让你产生购买需求(Desire)，这能通过放置客户评论引言和产品获奖证书来实现。在这一实例中，他们是通过几个“What our Customers have to say”（我们的客户如是说）的视频来实现的。最后要实现的即促成购买行动(Action)； 37Signals 的网站上有大量行动点(action points，即引导用户进行下一步操作的链接)贯穿于整个页面，由于页面很长，页面底部还放置了更多的行动点。

为内容(Blog)而设计: Well Medicated

设计博客页面时的情况则大不一样了。你不用花力气劝说你的用户信任你的产品，你的“产品”已经展示在他们面前—— 也就是你的博客内容。你要做的就是确保用户能轻松阅读你的文章，探索内容，与你和你的博客产生联系。

内容(Content) 应该是博客中出现在读者眼前的首要部分（之一）。在下面的例子中，一个粉红色粗体字的标题，很好地吸引了你的注意力，引导你直接关注文章内容。左侧放了张大小合适的预览图，右边则是两三段文章摘要，和一个“继续阅读”的链接。当然，也有标准的日期和作者信息。这简直就是我心目“内容设计”的完美实例。注意力(Attention) 可以被引导到任何有趣的事物上。在这个例子中，漂亮的RSS订阅按钮成为了焦点。且不说这个焦点让读者产生了与内容的联系感，它还能帮助网站获得更多的订阅量。鼓励你的读者探索你的内容相当简单，只需在边栏上加一些最新文章或最受欢迎文章的链接列表，或者制作一个下拉菜单，或者组织一个其他你想要推送的内容的高效列表。做起来很简单，效果却足够有效，尤其是对博客来说。博客是一个私人领地，通过不同的途径告诉读者你的联系方式(Connect) ，能帮助他们了解你，也说不定会带来意外的好处。

组织内容小贴士

你当然可能会遇到需要打破常规，选用非同寻常方式的时候，不过你还是可以遵循这些简单技巧，以保证内容结构和阅读顺序的良好。

• 你为何而设计?
  如前所述，确定设计的目标。
• 利用网格
  网格帮助你发挥页面的最大潜能。
• 测试元素位置
  以访问者的角度考察内容的易用性。
• 移除所有不必要元素
  不必要的东西都应该被消灭，或者至少不要放到显眼的地方
• 注意力的均衡
  有些东西需要被简单化，好让另外的事物闪耀光辉

05. 自我克制与精妙细节

设计师总是在寻找制造冲击力的方式，总是想做一个独一无二的设计，创造些前所未有的效果。不过有时候通过自我克制也能形成冲击力。量变产生质变，过多的“好”也会带出不好的结果。好的设计师晓得平衡点在哪里，并且能避免让过多的特殊效果毁了一项设计。

“Things”网站上的柔和渐变

对于我访问过的站点，我总是很关注他们的细微渐变。听起来可能有点恼火，不过我就是忍不住要去研究别人的那些小细节，以积累我将来设计时的灵感。渐变是最被滥用的设计方法之一，不过运用成功的话，还是能让设计增色不少，它所能提供的真实感和深度感是其他技巧所不能达到的。大部分人都不太注意渐变，不过别人对渐变的运用确实是我最好的灵感来源。

Icon Dock 上的投影

Icon Dock的网站简直就是各种精妙细节聚在一起开大会。像素级高光，渐变，以及投影。不过在这里我们只关注它的投影。不是很大，透明度也被调高，小心翼翼地烘托着内容区块，让其成为真正的焦点。实在漂亮~

精细的背景材质：Scouting for Girls

材质性背景要么成全你的设计，要么毁掉你的设计。很多复杂的背景除了分散读者注意力，没有带来任何好处。最终使得设计品质大为降低。所以，最好还是一直保持你的背景材质细微而柔和。 Scouting for Girls的网站在运用材质打造整体风格和设计品质方面做得极好。

做旧与撕碎的启发： Viget Advance

我从来不觉得越细微越好，任何细节的“细度”都以可见为前提。可能人们并没有清楚地意识到，不过这些细节必定确实产生了影响。博客Viget Advance的例子中，在做旧与撕碎效果方面，能给我们一点启发。 只是非常细微的做旧，不过如果没有这效果，这张人造纸就会显得平淡无奇，枯燥乏味了。正是这些小小的“不完美”让这画面显得更可信，更真实。

WebDesignerWall 上的水彩效果

使用水彩效果的时候，关键是要确保颜色混合得足够柔和，浓淡变化适宜，而且… 足够“水”。水彩效果为你的设计提供很多好处：精细而和谐的多种色彩，感染力极强的材质感…… 正因如此，越来越多的设计师选择了在他们的设计中创造水彩效果。

精妙的植物：Dara’s Garden

下面是一个充满智慧的关于精妙植物细节的设计。网上还有很多更加栩栩如生的植物图案，而且也非常漂亮，不过这个例子中，我关注的是背景上那些更清淡更微妙的细节。这个例子展现了细节的重要性，柔和的色彩，做旧的效果，唤起你对细节的感知，不过却并不形成为主要焦点。

运用精妙细节的小贴士

我认为，精妙细节能让一项好的设计升华为灿烂夺目的设计。如果你还在寻找让设计与众不同的方法，精妙细节是个不错的尝试方向。 以下是关于运用精妙细节的小贴士：

• 创建细节图层
  不要在一个笔刷或材质上吊死，多加些图层，多做点细节
• 尝试不同透明度和色彩
  有时候只有 3% 的不透明度也能产生正面影响
• 拒绝缩手缩脚
  不要担心太多细微，或者太不明显

06.  发挥色彩的全部潜能

设计师一般喜欢按照自己的品味来选择颜色，这可实在太不专业了。要决定哪种颜色是最适用的，你的脑子里想的应该一直是品牌需求，然后选好色彩的搭配组合，指定其专属的主题和目标情绪。

网页设计中色彩运用的绝妙例子

无趣并不代表无色：Oypro

Oypro的网站让我喜欢的地方是，他们告诉了我们，一项“无聊”的行业相应的设计并不一定也得“无聊”。通常企业的网站都不允许设计师有太多视觉创意上的发挥。保持简单、单调、淡彩色成了不成文的规定。不过Oypro的例子证明，不用束缚自己，你也能创造出一个有足够“企业感”的网站。

让色彩相互联系：Tennessee Summertime

Summertime in Tennessee(田纳西州夏日观光) 是一个充满活力的、明亮的，非常温暖的站点。所有一切看起来都是为了推送夏日活动而设计。该站点使用了非常多不同色相的高饱和度色，但每一种颜色都切中要害，没有一种是不适合主题的。高品质设计的色彩搭配必定与其要呈现的服务或产品密切关联。好的设计并不总是需要费尽心力选一些出奇制胜的颜色，那些最明显最该用的颜色反而能创造更好的效果。比如说 Hell Design(地狱设计)，不用象征地狱的火红色简直说不过去。

背景还可以大作文章：Saturized Studio

只涂一层单调的背景色可没法让你的设计变得有趣。有一点变化的背影才是最好的背景。此例中我们看到，漂亮的橙/红色被运用到各种各样的光照和渐变效果中。这种为背景增加变化的做法，有效避免了平淡和沉闷。另一个需要特别注意的地方是，暗深橙色背景与上层明亮内容区的对比产生了非常戏剧化的漂亮的视觉冲击。

在网页设计中运用颜色的小贴士

颜色永远是值得探索和尝试的区域。尝试不同的组合变化能为设计带来无限可能。不过选择颜色和色彩搭配时，应该做到对下面的要点心中有数：

• 尝试突破
  无趣的主题并不一定得使用无趣的色彩组合。
• 多变
  尝试在你多彩的背景上使用渐变、重复图案、笔刷，光有颜色可不容易让设计显得好看。
• 坚持主题
  确保你的用色与你需要呈现的产品/服务有关联。

07. 做别人没做过的事

最好的网站中有一些非同寻常的，奇怪的，甚至可以算得上诡异的设计。不过那些挑战传统的尝试说不定会已经改变了传统的定义。话说回来，要做到完全原创，创造出没人做过的东西实在是设计过程中最难做的事。

打破常规之后，成功与失败只有一步之遥。你要么做出令人惊艳的聪明设计，要么做出一堆垃圾饱受批评。别人从来不这么做是有原因的，因为有些点子实在是糟透了。要从人们知道并喜欢的区域走出来，你得非常勇敢才行。下面是一些相关实例：

MB Dragan 上的独特导航

不是你通常所见的站点导航，但看起来还是一个网站，同那些标准导航同样的好。这样做有点冒险，但结果非常符合该网站特质。十分切题的设计，很难让人不欣赏这导航与整个设计之间的配合呼应。

Visualbox(视觉盒子) 非常视觉化的导航

Visualbox的网站只有一个目标，向你展示他们充满智慧的作品。所以他们没有用多少文字，你第一眼看到的就是他们的名字和作品选集。 鼠标滑过预览图片时，会显示出项目名称，点击时会带你滑到页面中该项目的相应位置。这是非常高效而实用的解决方案，而且比简单地堆一个列表出来要吸引人得多。

废话不多说的Nikola Mircic

假设你是位交互设计师，你需要别人看了你的作品，能感动得雇用你。Nikola Mircic 为我们展示了“直截了当”对建造一个令人难忘的站点有多大的作用。一打开他的站点，各种风格的作品就向你问好，他的名字和职业放在页顶的醒目位置，当然，联系链接没少。没有大量多余文字来劝说你雇佣他，作品本身就证明了他的实力。当然，点击作品缩略图会出现一个详细介绍页，里面就有足够的文字了。实在喜欢他组织内容的方式。

实践新鲜想法的小贴士

上面的例子并不是为了“激发”你的独特创意，只是一些我发现的一些很独特的站点，仅此而已。事实上，你也不应该到处搜寻，寻找新想法的灵感，因为这样你的点子也是受别人的启发，与完全创新是相悖的。所以如果你打算做真的非同寻常的东西出来，就赶快忘掉这一部分！

• 保证事物之间的联系
  如果你打算做一些特别特别特立独行的事，先问问自己“真的有必要吗?”，“这样说得过去么？”，“和品牌诉求符合吗？”…… 如果答案是肯定的，再采取行动！
• 忘掉所有已知事物！
  好吧其实也并不是所有，基本原则还是要的。话说回来，也没必要从全新的想法里面寻找灵感，因为那样很容易误入歧途。
• 保证品质和水准
  基本上我觉得如果你的新想法足够好，判断品质究竟如何对你来说应该很容易。

对于高品质设计你有什么看法？

让一项设计因高品质脱颖而出，实在涉及到太多方面。我只能说我列出了一些基本要点。所以我希望能听听您对这一问题有何高见？在判断一件网页设计作品是否显示出高品质时，你最关注的是什么呢？

推荐阅读(均为中文译文)：

• 对于设计细节中的光影效果，你还可以参考：《五个为你的设计添加光影效果的简单技巧》
• 与此文类似，但更加简洁的分析和技巧：《十个简单好用的设计技巧 》
• 关于建立作品集网站的更多注意事项：《构建完美作品集网站十步走》
• 更多漂亮的博客页面设计鉴赏：《优雅的原创博客，一场视觉盛宴》

关于作者与译者

原文出自WeFunction，作者是 liam，初发表于2009年4月13日。
译文由笨活儿翻译。原始网址：http://blog.benhuoer.com/2009/05/quality-within-web-design/ 。

转载请保留出处。

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