笨活儿

浅谈前端新人的职业规划

慵云 — Sun, 06 Dec 2009 14:56:17 +0000

拿到淘宝offer已经有一段时间，西湖、百淘、D2、实习、各位前端牛人的亲身指导，美好的生活正向我招手。本来决定12月7号报道，但因为一些不可抗力，行程有变（事实上能否进入淘宝工作尚有变数）。在这焦急的等待过程中，还是静下心来，整理一下最近关于职业规划方面的诸多思考，希望能对和我一样的前端新人们有所帮助。

淘宝一面时，与一舟的谈话中很大一部分内容和自己的职业规划有关，二面时也和小马谈及许多关于前端未来的东西。后来试玩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名人就是其中的典型…… 作为“互联网重度用户”，有一大优势，那就是对网页结构、交互需求的直观理解，懂得网民需要些什么，写出的程序也往往有更佳的易用性。当然，易用性要靠所谓“交互设计师”，不过，交互设计不也是前端的一部分么？

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

前端新人何处去？

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

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

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

设计中的美学体验

同时作为用户和设计师，完成一项交互产品时的参与感

coding时的逻辑性对自己的锻炼

debugging完成后的成就感

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

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

避免成为“死做网页的”

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

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

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

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

不轻易重复自己
不断学习

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

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

平时做整套网页，前端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 ，本文将是笨活儿博客上最后一篇前端技术相关的文章。各位大大，各位新人们，你对这个问题有什么看法？想听听你的意见。

分类于：前端开发, 生活琐碎标签: 前端开发, 职业规划

淘宝开源编辑器KISSY Editor试用报告

慵云 — Thu, 29 Oct 2009 11:57:57 +0000

前几天淘宝发布了自己的富文本编辑器KISSY Editor，主要开发者是TaobaoUED的前端工程师玉伯，网上的可视化富文本编辑器众多，本人前段时间也因为要做一个论坛，尝试过在网页中整合这些已有的编辑器（因为自己实在写不出来啊…… =.= ）。网上已有的编辑器基本试了个遍，最后选定了人人网的实现方式——自写插件整合TinyMCE。不仅参考了他们的源代码，而且很无耻地盗链了xnimg.cn上的 js 文件（示例 发布后又发现了一些bug，还没来得及修正）。咳咳，只是学习学习而已，还望淫淫的同学不要来追究我的责任。

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

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

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

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

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

更多兼容性问题，请继续参考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上的项目主页 | 开发者博客

分类于：前端开发标签: JavaScript, RTE, 淘宝

面试心得

慵云 — Mon, 26 Oct 2009 08:12:41 +0000

笨活儿最近在找工作，上个星期去了趟成都，呆了差不多整整一个星期。把找工作的处女面奉献给了腾讯，另外也参加了淘宝的笔试面试。有一点小小的心得体会，送给同样需要找工作的各位同学，也顺带给招聘企业提点建议。希望对大家有帮助。

写给求职者

我不能为大家分享成功经验，因为我的面试很不成功 =.= ，仅此说一点经验教训。职业选择和简历准备方面的问题我就不多说了，重点谈谈面试。

1. 要有精气神

我一直有一种很畏缩的气质，尤其是上了大学，开始天天对着电脑之后。这应该是大部分宅男的通病。在面试之前，一定要把它克服了。年轻人，就要有活力，说话有精神，别老一副死人样。扑闪扑闪一下你的大(小)眼睛，让自己心中充满欢乐（想一些乱七八糟的笑话自娱自乐一会儿）…… 可能个人性格问题，你就喜欢安安静静不言不语，那至少也得给人一个乐观向上的印象。这个没什么诀窍，内心温暖开放的人总是会散发阳光的。

2. 学会引导话题

引导话题，掌握主动权。这似乎意味着和面试官对着干？完全不是。正确控制自己的谈话，能够实现在一种轻松的氛围里不动声色地引导话题。大家都说面试看运气，要是面试官碰巧问的碰巧你都知道就好了，其实面试是双方的互动，你给的回应直接决定了他接下来要说的话/要问的问题，即使遇到困境，你也有机会轻松摆脱。比如说遇到你了解一点，但是又不够熟悉，不知道怎么组织语言的问题，与其在那儿结结巴巴，还不如直接说一句“这个问题我以前了解过，但不是很熟悉”，把你的弱势跳开。另外，如果没有特别正当的理由，就不要解释你为什么在这方面比较弱。“这一技术在以前的项目里需求不多，所以我没有深入研究”——根本就是废话，不能为你加分的，只会让面试官怀疑你的学习能力。还是这么说吧：“这个问题我没有了解过，因为我平时的重点放在了…”

3. 自我介绍很重要

自我介绍环节十分重要，因为它也有一个“引导话题”的作用。自我介绍是帮助面试官直观地认识你，专业相关的学习经历可以说一下，重点应该强调你的技能和实践经历，也可以谈一下你所从事的行业与你个人生活的联系，其他方面从简。

4. 展示自己的潜力

潜力怎么体现出来？我觉得的话，大都来自一些小细节，而且还得面试官的提问配合才行。各种玄机微妙，无法道破。还望各位看官自己体会啦。总之，积极向上，态度良好，就对了。

写给招聘方

大家可以把以下内容看作是我腾讯二面没过的一点小怨念。哈哈……

1. 追问的必要性

遇到面试者不懂的问题（包括双方对问题的理解偏差和确实不懂问题涉及到的技术的情况），或者迟迟给不出满意答案的问题，是否有继续追问的必要？如果你决定追问，那你追问的目的是什么？是引导面试者说出正确答案吗？是为了消解提问欠严密而让面试者产生的疑惑吗？对应聘者的考察，当然是越全面越好，遇到面试者卡壳的时候，就还是换个方向再前进吧。

2. 面试流程安排

HR很幸苦，一般都是大半夜发通知…… 经常在求职论坛看到有同学抱怨说准备时间不足，我本人也深受四处赶乘公交的奔波之苦。我不知道还有没有更好的操作办法。最开始我还以为两三天就搞完，一面完了直接二面，二面完了直接三面…… 我以为是只要面试官觉得技术过关，有培养潜力，就可以推到下一轮，到最后再来卡人，考虑名额限制什么的…… 当然，这适合于优秀人才比较多的时候。如果大部分面试者都不让人满意呢？那就等最后一轮觉得人不够时再把人给叫回来啊……

显然，腾讯不是这么操作的。他们是把所有人都面完，综合考虑排了个序后再把这一轮过关的人推到下一轮。各轮面试官并不同时出现在一个城市。可能是因为全国同时进行的招聘点太多，面试官不够，那有没有可能少面几轮呢？为什么一定要拉这么长的战线？

很无耻地说一句：搞这么多轮结果还是把我这种人才错过啦~ 哈哈哈哈…… O(∩_∩)O 开玩笑，开玩笑…….

3. 一点小提醒

请HRMM/GG打电话说面试时间的时候，不要说时间段，比如：“请于明天下午一点到一点半来川大就业指导中心…参加面试”，请直接说一个明确的时间点：“请于明天下午一点到川大…参加面试”。我理解成了1:00至1:30去都可以。我当时还说淘宝真自由……

最后，祝所有要找工作的同学都能找到一个好东家；所有用人单位都能招募到满意的人才。

祖国繁荣昌盛~ 民族团结~ 社会进步~

我的作业早日做完………. =.=

分类于：生活琐碎标签: 找工作

[The X Factor] 多巴哥救生圈女 Rozelle Phillip

慵云 — Wed, 09 Sep 2009 08:57:53 +0000

前几天才和同学说为什么《舞林争霸(So You Think You Can Dance)》这种选秀节目里没有国人去参赛，然后我告诉她其实加拿大版的SYTYCD里有一个中国姑娘去跳蒙古舞，而且还晋级了。有兴趣的同学可以搜一下。

今天我要介绍的不是到外国参加选秀的中国人，而是来自多特立尼达和多巴哥共和国（The Republic of Trinidad and Tobago）的黑人女Rozelle Phillip。我很不厚道地称她为“救生圈女”，因为她腰间的那坨肉，可是实实在在的一救生圈啊……

她参加的是秀是《英国达人》的孪生兄弟 —— The X Factor 。这节目相当于英国的《美国偶像》，也是一个歌唱选秀节目。其前身正是American Idol 的原型 Pop Idol 。等idol系歌唱比赛真人秀在全球遍地开花后，英国的电视制作人又独辟蹊径，把 Pop Idol 改名为 The X Factor ，并重新包装。 “ the x factor ” 指的是成为优秀歌手的不可知因素。《极限要素》是我个人的译法，我觉得还挺恰当的，反正翻译这个东西，见仁见智吧。今年的 The X Factor 有一个大的变化—— 海选阶段也像《英国达人》一样加上了几千人的现场观众。观众的反应与歌手的表现相呼应，使得节目气氛更加具有感染力。毋庸置疑，节目变得更好看了！

回到“救生圈女”上来…… 这绰号是难听了点儿，但她的演唱却很动人…… ：

看不到视频点这里

这位胖胖的黑人女孩，来自一个名不见经传的小国（虽然也属英联邦，但评委都会把其名字念错呢），为了实现梦想，到千里之外的国家参加选秀。历经艰辛之后，几千观众为你欢呼，这种人生体验，说真的，不亲身试验一下是体会不到的……

她和苏珊大妈有一个共同点，那就是她们都有可爱的personality。丑是丑，但是我快乐，而且我会唱歌…… 苏珊大妈热辣奔放，救生圈女则憨厚可爱，还带一口难以听辨的“千里达”口音……

英国人能否超越种族偏见和外貌歧视，把Rozelle捧为下一位pop star？我们拭目以待……
（好吧，我觉得没啥希望。还有其他优秀的选手，空了发上来。）

另外再说一下One Night Only这首歌，这是美偶冠军Jenifer Hudson主演的歌舞电影《Dreamgirls》的插曲。而Rozelle在赛前采访时提到的Leona Lewis大家应该都很熟悉了，Bleeding Love ，肯定都听过吧？她是 The X Factor 06年的冠军，而05年的冠军则是 Shayne Ward 。还记得当年还在上高中，CCTV-4 新闻里播他的 That’s My Goal 的MV，直接把我秒杀…… 新闻里说这个MV是 The X Factor 的宣传片，于是当时我就认为它是英国版的《唱得响亮》……

分类于：娱乐至死标签: Rozelle Phillip, The X Factor 极限要素, 字幕

对《民主的细节》赠送活动的一点小牢骚

慵云 — Sun, 06 Sep 2009 14:48:48 +0000

实在没料到会收到如此多的回应。

发文不过24小时，我已经送书14本，这里面还不包括我身边的朋友早前预定了的6本。以及很多留了言但是未发邮件告知我地址的朋友。

免费货的号召力就是大呀……

暂时不再接受新的索书请求。再过几天等这批书确认收货，我就能成VIP了，到时候如果还有需要的话，以VIP价给大家买咯。哎，今天突然发现，好像这本书出第一批的时候（现在这批是第一批售罄后加印的），售价才17块嘛…… 现在连VIP价都要17块5。

我当然希望这样的好书能送出越多越好，但我穷学生一个，个人财力有限，自然只能说“尽一点绵薄之力”。送书的钱还不是只有靠平时个人生活里节俭。所以我觉得，如果有人拿了书，又不好好读，翻两页就觉得“太枯燥”、“太遥远”（虽然这样的可能性极小），一篇完整的文章都没看完就拿它来擦屁股了，那这样的人于我来说是绝对无法原谅的。

另外有一种人，我也不甚欢迎——自己本来不差那几个钱，却硬要等着别人的免费货送上门。

这里面涉及到一些微妙的平衡：

你有没有那18块钱？ – 如果你没钱买书，我买来送你，我自然觉得十分荣幸。
如果你有，用在其他地方会不会比用来买这书更有意义？ – 对于我来说，花这点钱送书给别人，不仅是表达我对作者的支持，也让我获得与他人分享知识的快乐。
获得陌生人的惠赠是否会让你更重视这本书？ – 但愿如此。
获得免费的东西能给你带来多大的快乐？ — 拿了不要钱的东西，大家都会很开心。如果我能让你这么开心一把，我自然很荣幸。不过，如果你本来就挺不在乎这几个钱，拿了东西也没啥感觉，那可就有点可惜了。
你有多么期待这本书？ — 自然是越期待越好。

只是感兴趣，但是下不了决心买么？那你看我这么强推，甚至自己买来送人，就应该晓得这本书不会让人失望了吧？何不自己买来看看？自己已经有了本，还想要本免费的来送人？我日，你自己想一想你这个要求过不过分，当我是啥了，提款机啊？真想让我送，也等我月薪过万再说。既然觉得这个书好，为什么就舍不得花点钱自己买？

然后心底其实有一个很温暖的打算，我希望以后有机会能办一个长期的相互赠书的项目。大家读到什么好书，如果手头又有几个闲钱，就主动买来送给朋友们。这和私底下的赠送读过的书不太一样，我们就这样在网上买全新正版来送，虽然说有点不环保，但是支持了作者，勉强也算是好事。把钱花在这些地方，总比吃吃喝喝玩玩乐乐挥霍掉要强。

最后再推一下本书作者刘瑜的博客：http://www.drunkpiano-liuyu.net/。相信大部分同学都有订阅吧？

嗯，承蒙她的光华，让蔽博又小小地热闹了一把，呵呵。

分类于：生活琐碎标签: 民主的细节

《民主的细节》免费赠送

慵云 — Sat, 05 Sep 2009 10:28:35 +0000

最近看了《民主的细节》，深深同意和菜头“中国人应该人手一本”的看法。最近又想冲击一下卓越网VIP……第三个最近：卓越网现在买书全场免运费。第四个最近：这本书又降价啦！比我当初￥22的价格整整便宜了4块钱呀~~

因此，决定把这场《民主的细节》免费赠送的活动扩展到我博客来，初步打算赠书10本，需要的朋友请留言或e-mail告知。确认您的收件地址后，我会尽快为您下单。

唯一的要求是，希望拿到书以后你不要翻几页就丢一边了。虽说是免费的东西，也希望你珍惜。如果觉得这本书好，请向朋友们推荐。

如果能写点书评那就更好了。

此次赠书活动也算是《啵啵朵朵》网络杂志的推广活动之一，还望拿到书的朋友能不吝笔墨，为我们写一点读后感。过段时间将重新设计杂志外观，此后的栏目和专题策划，以及约稿组稿也将更为正规。

希望大家能转发本文或者在您自己的地盘提一下这个活动，我有点担心鄙博人气太低，10本书都送不出去。

最后发点牢骚，卓越网应该至少把那四块钱退还给我！哼~~~

UPDATE: 请已经留言索取的同学尽快邮件联系我 jyyjcc#gmail.com。直接告知我您的收件地址即可。请同时提供联系电话和收货方式（是否能在工作日送货，等等。具体细节请注册一个卓越账号查看相应选项）。

这么多人索书，实在出乎我的意料。我的建议还是，如果不缺那几个钱，您就还是自己买…… 或者能在图书馆和书店读的，就在图书馆或书店去读读…… 毕竟我也是个穷学生，无法满足所有人的需求。

这活动本来只是想朋友内部赠送的，可惜身边想读这本书的朋友不多，所以才扩展到博客上来。

已经留言的朋友，我会尽量满足你们。嗯哼，请尽快与我联系。已经发邮件的同学情稍安勿躁。

分类于：好康推荐标签: 免费资源, 民主的细节

没事儿找事儿之“食物在人体内的时间”？

慵云 — Wed, 26 Aug 2009 06:31:16 +0000

这个问题起源于一次和朋友的吃饭时的闲聊。结果后面闹得越来越深入。问题是：

判断这个命题的正确性：我们吃过的食物在身体内呆的平均时间是24小时。

当时的争论没有结论，谁也没说服谁，于是我在淫淫网发了篇日志，在更广的范围内讨论这个问题：

请判断以下命题的正确：

我们吃过的食物在身体内呆的平均时间是24小时。

先别忙判断，听我的理由先：

1. 人从出生至死就不断吃食物，虽然最后生命末期得重病什么的吃不了东西，但可以忽略不计

2. 人体内每时每刻都是有一定食物的。不可能存在完全没有食物在体内的情况。同理，出生时和将死时的情况可以忽略不计。

3. 人吃饭的周期是24小时，虽然有晚点，但平均下来，早餐的周期是24小时，午餐的周期也是24小时…… etc..

所以，平均来说，所有食物作为一个单体统计起来算，其在体内呆的时间是24小时……

此命题的讨论仅限逻辑学范围，请勿搬出科学是非。

请大家发表自己的看法，谢谢！

有人回复：三餐的周期都是24小时，那总的周期不是24小时吧。。。

我说：把三餐作为一个集合，这个集合的周期也是二十四小时

另外回复：吃完晚饭，睡一觉，再吃早饭，中间间隔差不多十二小时。也就是说，作为整体，上一次和下一次的间隔是十二小时不是二十四小时。

我说：为什么要把这个整体当做一个时间段，而不是一个点？因为你是讨论的三餐平均……

我的表达好像有点问题，之后又在QQ上进行了深入讨论，过程如下：

汪洁淼 13:01:02
对了
汪洁淼 13:01:06
我觉得你那个逻辑学
汪洁淼 13:01:11
一点逻辑也没有

蘑菇先生 13:01:38
额。。。。
蘑菇先生 13:01:54
但是我还是觉得我的推论没得啥说不通的地方啊
蘑菇先生 13:02:00
你觉得哪里逻辑不对嘛？

汪洁淼 13:02:04
你的假设可以成立
汪洁淼 13:02:14
但是推不出你的结果啊- -
汪洁淼 13:02:50
就算你吃饭周期是十二个小时- -不代表你排泄周期是十二个小时嘛
汪洁淼 13:03:20
你说体内不存在完全没有食物的时候，我觉得这个也不对哦
汪洁淼 13:04:53
错了，是二十四小时= =!

蘑菇先生 13:05:19
嗯哼？
蘑菇先生 13:05:50
人体内肯定是一直都有食物的啊，至少是无限接近于一直都有食物的状态

汪洁淼 13:06:03
好嘛，就算有食物

蘑菇先生 13:06:44
那就是24小时咯？

汪洁淼 13:06:48
- -不是啊
汪洁淼 13:06:58
你只是说吃饭周期是二十四小时- -
汪洁淼 13:07:36
你怎么推出来它在体内停留时间是二十四小时- -
汪洁淼 13:07:45
或者更多喃- –

蘑菇先生 13:07:50
吃饭到排泄的时间不是24小时，但是排泄的周期平均下来是24小时的

汪洁淼 13:08:04
你的假设里面根本没有提到排泄撒

蘑菇先生 13:08:18
是咯因为排泄不重要
蘑菇先生 13:08:27
因为你每次排都不可能排完
蘑菇先生 13:08:34
你一直都有食物在体内

汪洁淼 13:08:34
= =!你的逻辑喃
汪洁淼 13:08:43
你必须从你的条件推出结果撒
汪洁淼 13:08:52
你不能自己添加条件撒

蘑菇先生 13:09:16
是嘛我的条件就是那三点嘛

汪洁淼 13:09:27
对嘛，但是你解释的时候却不得不提到排泄

蘑菇先生 13:09:59
排泄和吃饭一样是一个连续的过程

汪洁淼 13:10:02
意思就是你也必须考虑到排泄撒

蘑菇先生 13:10:11
从你生命的整体上来看

汪洁淼 13:10:18
- -但是你一天三顿
汪洁淼 13:10:26
却不是一天三顿排泄撒
汪洁淼 13:11:06
你现在没说排泄的周期是多少，你怎么推得出来嘛

蘑菇先生 13:12:31
每次排泄的又不是对应了某次吃进去的，因此一天三顿吃和一天三顿排泄也无法建立对应关系。
我考虑到的是“随时都有食物在体内”。这部分食物必定也是要算在平均数里面的。

汪洁淼 13:13:40
的确随时都有食物在，但这食物究竟是昨天的前天的，你没有考虑到新陈代谢，你怎么肯定食物是每天更新喃

蘑菇先生 13:15:04
是当时我写完那篇日志就想起新陈代谢的问题了
而且我没有说过食物是每天更新，肯定有多于24少于24的情况，但是总体来说，平均下来应该是无限接近于24的

汪洁淼 13:15:20
我们用逆否命题来验证嘛
吃饭周期是二十四小时—所以食物体内停留时间是二十四小时
食物停留时间不是二十四小时–所以吃饭周期不是二十四小时

蘑菇先生 13:16:31
就对了噻   吃饭周期到底是不是24小时嘛？

汪洁淼 13:16:41
吃饭周期二十四小时是恒常的
汪洁淼 13:16:56
- -所以你推论根本就是错误的撒

蘑菇先生 13:17:03
1. 吃饭周期是二十四小时—所以 2. 食物体内停留时间是二十四小时

3. 食物停留时间不是二十四小时–所以 4.吃饭周期不是二十四小时

蘑菇先生 13:17:10
你承认4是错的对不？
蘑菇先生 13:17:24
那3就是错的噻？ 3是错的，那2就是对的噻？
蘑菇先生 13:17:32
那为啥子我还是错了？

汪洁淼 13:17:45
- -!老大你没学过逆否么

蘑菇先生 13:17:52
没有

汪洁淼 13:18:12
一个正确命题，它的逆否命题就是同样正确的
汪洁淼 13:18:33
反之，如果逆否推出错误结论，那就说明这个推论本身就不成立
汪洁淼 13:19:17
四边形有四个角—它是正方形
它不是正方形—四边形没有四个角
汪洁淼 13:19:22
就比如这样的- -
汪洁淼 13:19:36
因为四边形有四个角是恒定不变的- -

蘑菇先生 13:20:12
但是你忽略了一点：

1. 吃饭周期是二十四小时—所以 2. 食物体内停留时间是二十四小时

1并不是2的所有条件

汪洁淼 13:20:30
但是是主要条件撒
汪洁淼 13:21:02
你的推论本身就建立在这个上面嘛，不然你体内停留时间咋个算出来的嘛
汪洁淼 13:21:19
如果你要考虑新陈代谢
汪洁淼 13:21:28
你就应该再附加其他条件来推
汪洁淼 13:21:42
我意思就是你现有条件，根本得不出结论

蘑菇先生 13:21:49
就是不考虑新陈代谢

汪洁淼 13:22:17
- -!那逆否就没错撒

蘑菇先生 13:22:31
我们假设吃进去的食物就是出来的食物
蘑菇先生 13:22:48
哦出来的就是吃进去的   人不消化他，我们光看这个逻辑嘛

汪洁淼 13:23:20
你的逻辑有很大个疏漏撒，你规定胃内容物是恒定不变了么
汪洁淼 13:23:24
没有嘛

蘑菇先生 13:23:56
是噻，有多有少，但是平均下来是无限接近于一个恒量的咯

汪洁淼 13:24:06
你的意思就是这个人必须每天吃到胃再不能容纳任何- -!

蘑菇先生 13:24:13
不是
蘑菇先生 13:24:30
等一下我解释一下主要的条件先
蘑菇先生 13:25:57
1. 吃进去的东西的多少和吃的时间是不定的，拉出来的量和时间也是不定的。但是吃和拉都是一个无限接近于连续不断的过程。

汪洁淼 13:26:33
但是这个和你的停留时间有啥子直接结论
汪洁淼 13:26:46
因为你从头到尾都没探讨拉这个问题
汪洁淼 13:26:51
你只讨论了进

蘑菇先生 13:26:57
2. 吃的周期无限接近于24小时。那拉的周期也无限接近于24小时咯？

汪洁淼 13:27:17
- -你拉的周期是24小时，这个条件不就是你自己附加了

蘑菇先生 13:27:21
综合1，2，是否能得出2中反问的结论？

汪洁淼 13:27:32
请问你的2在哪- –

蘑菇先生 13:27:34
这个不是条件
蘑菇先生 13:27:41
已经相当于结论了

汪洁淼 13:27:49
你返回看自己的推论嘛，你的2是现在莫须有出来的

蘑菇先生 13:27:51
2的条件就是吃的周期无限接近于24小时

汪洁淼 13:28:16
你吃的周期是24小时，你咋推出来拉是24小时- –

蘑菇先生 13:28:27
“拉的周期也无限接近于24小时”这个已经算是结论了
蘑菇先生 13:28:33
和条件1综合

汪洁淼 13:28:35
你咋推出来的- -!

蘑菇先生 13:28:51
连续不断

汪洁淼 13:29:13
连续不断就是24小时- -!
我48小时也可以是个周期啊- -

蘑菇先生 13:30:29
是嘎….
蘑菇先生 13:30:43
好你赢了

汪洁淼 13:30:46
= =!
汪洁淼 13:30:52
不存在赢不赢- -
汪洁淼 13:31:00
只是好耍，就掰两哈撒 – -

蘑菇先生 13:31:15
嗯   有没得学哲学的同学？

汪洁淼 13:31:25
有，好像有一个

蘑菇先生 13:31:34
让他们把这个问题升华一下…… 我觉得可以提出一种模型

汪洁淼 13:31:38
= =!
汪洁淼 13:31:47
是个有趣的模型- –

蘑菇先生 13:31:51
O(∩_∩)O哈哈~ 真的。

汪洁淼 13:31:54
但是漏洞太多了= =···

蘑菇先生 13:32:31
提取模型的任务就是找出这些漏洞噻

汪洁淼 13:33:32
连续不断是个有趣的模型
汪洁淼 13:33:47
从宏观来分割问题是吧

蘑菇先生 13:34:10
嗯连续不断和平均数的关系

汪洁淼 13:34:37
重新建个模型比较好=，=

蘑菇先生 13:35:11
讨论拉屎的问题确实不雅。。。

汪洁淼 13:36:03
- -主要是你这个模型建立在生理上，就必须要考虑科学生理因素撒
汪洁淼 13:36:24
比如你考虑连续不断的人进站
汪洁淼 13:36:52
就没啥子其他好考虑，就单纯是平均数问题了

蘑菇先生 13:37:32
进站的变数更大咯？你还能讨论哪个平均数？
蘑菇先生 13:37:51
每个人在站点内呆的时间？

汪洁淼 13:37:56
- -差不多嘛
汪洁淼 13:37:59
我没仔细想

个人觉得偶尔讨论一下这种问题能提升你的诡辩能力，并得以了解他人的思维方式，也帮助你找出自己思维的漏洞，从而更全面地看问题。

大家对这个问题的是怎么看的呢？

其实我一点也不无聊。我还有很多事要做。这也是这段时间博客几乎没有更新的原因。这个暑假有点狂，买了N个域名……

然后推荐一下目前正在策划中的一本网络杂志——《啵啵朵朵》（http://popododo.com），我们的目标是办一本很生活很随意的人文杂志。最重要的概念是“热爱生活，热爱思考”，其他东西都可以由大家自由发挥。

分类于：生活琐碎标签: 思维, 诡辩, 逻辑

[舞林争霸]第五季冠军 Jeanine Mason 的夺冠之路

慵云 — Fri, 07 Aug 2009 13:14:47 +0000

追了两个月的So You Think You Can Dance终于落下帷幕。冠军新鲜出炉，海选时默默无闻的Jeanine夺冠。早就说过要在比赛完结的时候要写一篇冠军的星路历程。现在付诸实践。

Jeanine Mason photo. ©Fox.

粉丝们亲切地称呼这一季《舞林争霸》的冠军Jeanine Manson为“珍肥”（当然，也有其他更好听的名字），因为相比其他选手她的身材确实略显殷实。她自己也曾坦言“虽然我没有最漂亮的双腿，但我有舞蹈的激情”。不过，可能正是这份不完美，才让她有了更强大的亲和力，从而一路畅通地直达冠军之巅。

18岁的Jeanie来自佛罗里达州的迈阿密，参加比赛时刚刚从Ransom Everglades School毕业，准备就读加州大学洛杉矶分校（UCLA）。Ransom Everglades School 是一所历史悠久的以艺体教育见长的私立中学，《双面法医/Dexter》的原著作者Jeff Lindsay 就曾是这里的学生。大名鼎鼎的UCLA就不用介绍了吧？

相比最终四强的其他三位选手，海选时Jeanine的镜头少得可怜。但正式比赛（TOP 20）的第一支舞就是由她和人气颇旺的机械舞者Phillip带来（视频）：

这段舞是本季的judges’ favorate之一，前段时间也在各大SNS网站疯传。我起码看到不下10个校内好友分享了这段视频。的确，这舞作为开场舞再好不过了。当时看到这段舞，我就知道，我一定会爱死这个节目了！

此舞顺利保住他们进入Top 18，接下来的两只探戈、百老汇基本上水平一般，主要是Phillip水平有限。而评委每次都是对Jeanie赞不绝口。

然后Top 14的比赛，Jeanine和Phillip又抽到了为他们编第一支舞的hip-pop编舞Tabitha & Napoleon。这段舞讲述选手参加这个比赛的经历，从抽到搭档后就一直连在一起，不管喜不喜欢都要一起合作（视频）。

不过这段舞并没有拯救他们（作为一个组合）日渐低下的人气，最终他们进入了观众投票数的后三名（bottom 3），需要表演solo（独舞）来一决生死。从此，Jeanine开始展现她强大的solo实力，当晚的表演被评委称之为全场最为闪耀的独舞（视频）。

Top 12时，Jeanine和Phillip抽到的是俄罗斯民间舞（Russian Folk）和美国本土的牛仔舞（Jive），这两支都不是特别出彩。尤其是俄罗斯民间舞，更是让一向对编舞关爱有加的节目制作人兼评委Nigel Lythgoe说出了“也许我们不该让你们跳这种舞”的话。牛仔舞稍好，继续展现了Jeanine的的强大实力，以及Phillip在技巧上的欠缺（视频）。

本周Jeanine和Phillip再一次跌入bottom 3，Jeanine的solo同样精彩到不行（视频）。配乐是我本人非常喜欢的一首Baby’s Romance，来自美国的大头歌手Chris Garneau。

最终，Phillip被淘汰，Jeanine顺利升入Top 10。Top 10之后，所有选手要重新选择搭档，Jeanine抽中了同为现代舞者的Jason。Jason也是个好货啊，乖乖帅帅的，让人忍不住想捏他小脸。本周他们的编舞是《舞林争霸》第二季亚军Travis Wall，从这个节目中成长起来的现代舞者。Travis编了一段感染力很强的现代舞，讲述一对青梅竹马的朋友想要突破友谊界限时的挣扎。配乐选的是我最喜爱的歌手Jason Mraz（在本站的 About页面还有他的歌曲试听！）的If It Kills Me（The Casa Nova Sessions）（视频）。

这支舞赢得了极高的赞誉，同时也是这一季的Judges’ Favorate之一，也让两外选手直接晋级Top 8。这一集里，Jeanine的Solo再次展现了超强的实力（视频）。她有一次打破常规，选择了一首Bailongo的Violento作为配乐，要知道这其实是一支Tango曲，之前Jeanine在18强表演赛上和Phillip跳的探戈就是配的这首曲子。

注意看那个连续旋转后动作的连贯性……

八强赛Jeanine与另一位人气选手（也是本季的第二名）Brandon搭档，他们在这一集一起跳了两支舞，首先是一曲柔美的华尔兹。这支舞评委比较失望，因为这两外都被赋予了很高的期望，而他们又没能传递出评委想要的情感。第二支舞是反战题材的现代爵士舞（pop jazz），动作激烈，力量非凡。Jeanine一个女生，跳出了和强健的Brandon不相上下的力量（视频）。

这一集Jeanine的Solo同样出色！不得不承认她的选曲实在太妙了，音乐和舞蹈的配合，动作的衔接，恰到好处，简直天衣无缝（视频）。

六强赛，Jeanine与被评委称作“gentle gaint”的Ade搭档。他们的第一支舞是桑巴，评委评价Ade的动作不到位，Jeanine则继续得到了高度赞赏。随后，Jeanine第三次与编舞Napoleon & Tabitha合作，继续跳很有故事的Hip-Pop舞。这支舞讲述两位被赶出公寓的年轻人的故事（视频）。两位选手都获得了极高评价。

这一集的Jeanine同学的Solo，则展现了她性感的一面。再一次的，本来适合跳街舞的音乐被她拿来跳现代舞（视频）。不过，本集最好的solo还是上一个视频结尾，Brandon跳的那段。

为冠军而战的Top 4比赛中，每位选手都分别与其他三位选手有一只双人舞。Jeanine首先与百老汇舞者，人气超旺的乖乖熊Evan搭档，跳了一支女方很强势的爵士舞。此舞亮点不多，不提也罢。之后的访谈和Solo则把她完美的个性和完美的舞蹈技巧展现无遗（视频），凭借这段极为冒险的solo，评委Nigel放心大胆做出预测，Jeanine将成为最终的前二名。此段solo的配乐（Por Una Cabeza）亦是经典的探戈曲，曾在《真实的谎言》、《闻香识女人》、《辛德勒的名单》等电影中都有出现。

那个脚尖旋转，完全无法理解…… 重心的把握，速度的控制，不经过千百次的刻苦练习，是做不出这么完美的动作的。

之后，Jeanine与另一位女选手现代舞者Kayla合作完成了一支“脱衣舞”（视频）。在此，我不得不赞一下编舞，Mia Michaels，总是能拿出创意十足，概念性非常强，同时又不乏视觉冲击力的舞蹈。两位舞者动作的相互呼应，对舞台的运用，都被安排得恰到好处。虽然偶有动作不一致的地方，但并不影响整支舞的流畅程度。（囧，说得我俨然已经是一个专家。囧囧囧。）

最后，Jeanine再次与Brandon合作，为观众献上一支节奏紧凑的斗牛舞（Pase Doble），完美结束了整季比赛（视频）。

上面引用的所有视频版权归FOX公司所有。

视频中文字幕分别来自人人影视（YYeTs），风软（FRM）和伊甸园（YDY），在此感谢字幕组成员的幸苦劳动。

分类于：娱乐至死标签: Jeanine Mason, 舞林争霸, 舞蹈

网页设计中的包容原则[ALA]

慵云 — Mon, 27 Jul 2009 02:23:03 +0000

设计师的工作一直与“可视性（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开发论坛上的一篇帖子引起了我的注意。帖子题目是“在标签里使用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强企业都不能正确处理网页可访问性，我们就能想象小公司要达到无障碍需求是多么的困难。由于下列原因，网页的可访问性总是获得较低的优先级：

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

就上面的几点，只有第四条才算是一个网站或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）项目的可访问性需求。没有认同，就没有热情；没有热情，我们就又走回老路——将可访问性任务视为分寸之末。

让我们大踏步向前

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

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

分类于：交互和UE 标签: A List Apart, Web标准, 可访问性, 用户体验

舞林争霸 – Melissa & Ade

慵云 — Fri, 24 Jul 2009 00:17:11 +0000

《英国达人》完了之后，我就一直在追着看《So You Think You Can Dance / 舞林争霸》。

看了这么多舞，也激动了很多次，不过直到今天，才让我真正激动到想要自己做字幕，第一时间拿出来和大家分享。这一对选手（Melissa & Ade）在第一次作为couple登场时就有上佳表现，当时那段Right Here Waiting的现代舞应该也算是当集top 2了（Philip和Jeanie的hip-pop也实在精彩）…… 正是这段舞让我发现，原来舞蹈也是如此动人的东西…… 是真真正正感觉到舞蹈也有打动人心的力量…… （额…… 有点矫情了，不过确实是这样。囧rz…）先看视频吧：

有没有觉得，那些跑动，那些托举，那些依靠…… 就如行云流水般，拂动你心底最柔软的一部分……

之后他们一直稳定发挥，大部分routine都跳得很出彩…… 其实最难能可贵的是Melissa是这一季选手中年纪最大的，已经29岁了；Ade的话…… 好像是最黑的？…… 囧。其实，他是正式比赛前人气最低的，可以说是真真正正的黑马。

《舞林争霸》的赛制是十强之后，原先配对的选手就要分开来，然后随机抽取舞伴。这一次八强赛Ade抽到了Melissa，于是他们又能重新组合在一起。5555…. 多有缘啊…… 这次为他们编舞的Tyce Diorio排得最多的是百老汇舞，如果没记错，这是这一季里他第一次排现代舞吧？还是先看视频吧：

这个routine的主题是乳腺癌，癌症患者和其亲人的挣扎和痛苦，被两位舞者演绎的淋漓尽致。后面评委点评的时候，我也陪着他们泣不成声…… This is all about love, compassion, and hope. 我想，所有心中有爱，心怀悲悯的人都会被深深打动吧？感动是如此之深，以至于后面Jason和Kayla画着浓妆笑嘻嘻地出来时，突然觉得接受不了。

分类于：娱乐至死标签: 舞林争霸, 舞蹈, 视频

Web技术要发展，IE6必须先消失！

慵云 — Sun, 19 Jul 2009 07:00:04 +0000

仅仅六年之前，互联网还是一个独裁者的世界——Internet Explorer ()（主要是Internet Explorer 6）垄断着浏览器市场。没了Netscape的竞争，加上与Windows XP的绑定，微软获得了令人艳羡的市场份额——巅峰时期将近95%。时至今日，可供我们选择的浏览器种类也令当年的用户艳羡——Firefox (), Safari (), Opera (), Chrome ()，以及Internet Explorer 8。

那么，为什么现在还有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 标签: 通过使用标签来标记视频，你可以直接在HTML里插入视频。而且，你能很容易地控制视频播放界面的外观。

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

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

- 拖放: 尽管这一特性还存在争议，但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

分类于：Web技术标签: CSS, HTML5, Web标准, 浏览器

固定 vs. 流动 vs. 弹性：哪种布局更适合你？[SM]

慵云 — Mon, 13 Jul 2009 08:26:02 +0000

英文原文：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，他们研究了一些大型网站对屏幕分辨率的兼容情况：

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

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

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

不幸的是，大多数版本的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上我们最终采用了固定布局，因为：

流动布局更复杂，我们为那些有不同技能的用户提供了模板化的设计，而他们的工作非常容易破坏流动布局（模板只是一些普通的HTML文件，并不是Dreamweaver模板）。

我们不想看到网站维护者们做出太宽的页面——那种文本行很长，非常难以阅读的页面。

我们想限制那些总是想填满所有空白的人所面对的空白量。如果他们用的是大屏幕显示器，就很容易把页面填满，而忽略了在小屏幕上其显示效果是多么糟糕。

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

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%。始终不会有问题。”