Yining.write()

今天（4月9日）是今年的，也是第三个CSS裸奔日

嗯，如果你是在Feed阅读器上读到这里，是看不出来裸奔效果的，直接点这里看裸奔效果。

CSS裸奔日的中文介绍页面上说活动目的是：

推动Web标准。简洁为美。使用正确的(x)html，语义标记，良好的层次结构。

碰巧，下午给刚来的实习生介绍HTML和CSS，跟很多毕业生一样，他也是没有DreamWeaver一类工具就不会做网页，从来没有接触过Web标准，更不要说相关的开发经验。因此期待能在短短的一个小时内让他体会到使用Web标准的优势是不可能的。

也许只有在实践中实实在在地feel the pain，才会开始欣赏简洁的符合标准的设计，和开发上提高的效率吧。

另外，在裸奔的时候，就能发现我现在的WP的主题不是非常好，因为Categories，档案，还有blogroll等的列表都排在前面，而正文反被摆在最后了。

测试了一下，裸奔时，WP还是可以留言的。

从卓越上订购的Prioritizing Web Usability的中文版到手两周，周末翻了一遍，非常失望。

这是本翻译过的书，所以要评价的话，得把原书内容和翻译编辑排版部分分开来说。

先说原书内容部分吧，

首先，大部分内容是非常基本的应该是大多数设计者甚至是程序员所了解的常识，比如字体颜色和背景的搭配要有一定的反差，不要有弹出窗口等。大部分在网络上已经有很多类似的可用性注意点的列表以及详细的讨论 － 它们是免费的。

其次，书里列出的网站的例子，说少也不少（有必要把这些网站的首页截图都打印在书上么？），但是绝对不能说是多，因为它们之中典型的类型并不多，大部分是商业机构厂家，web2.0以来在网页设计和使用上很有影响力的网站几乎看不到一个（注：这本书可是06年才再版的）。

自然，原书作者根本没有介绍或者讨论最近（宽恕我，我知道的，2005年在互联网上已经算不上“最近”了）的以AJAX为主的新的用户界面元素所带来的在可用性方面的影响（再注：这本书可是06年才再版的）。

再说说原书犯的错误和缺陷：

P162, 第六章，6.10，“从主页直接访问”一节关于Mozilla网站首页上的下载区域的评论： “…显然，该区域主要服务于那些想要适用于Windows英文版的人。…”，显然，作者没有明白该网站是根据用户浏览器发送的HTTP请求里的UserAgent以及Accept-Language头信息判断用户的操作系统以及语言设置来生成相应的页面，而想当然地认为是因为“主要服务于Windows英文版的人”（其实是因为作者用的是英文Windows而已）。

关于复杂的URL，“尽管复杂的URL对可用性和搜索引擎优化都有危害…”，很遗憾，没看到作者对于复杂的URL对可用性的危害的解释（至少连粘贴到email里的URL会被email软件断行导致收件人点击无效链接的问题都没提到）。相反，作者推荐了TinyURL这样的服务，却没有提到TinyURL对可用性的影响（比如用户无法从URL看到链接实际指向的地址）。

在关于选择字体的部分，没有提到可以使用CSS和Javascript让用户自己选择字体（至少是Serif还是Sans Serif）和大小，这在今天这样的技术已经很成熟的时候，居然丝毫不提，更不要说提及sIFR这样的手段了。

如果要放截图，没必要整个页面的截图都放进来，只要把相关的，说明问题的页面部分就可以了。一个例子：P72的占了半个页面的截图，说明相关问题的仅仅是右下角的“skip intro”的几个按钮，更不要说这张图片明显要比实际的原图大（图片边缘的锯齿）。

关于上面讲的P162的Mozilla的界面用了前后比对的两个页面，也是只需要把页面的相关部分抠下来，并排摆放，这样用户比较起来更明显更容易，可是，居然用了整页的截图，而且放在不同页面！又是一个毫无必要的浪费，以及其所导致的在可用性上的失败。

书里常常提及用户的“挫折感”，可是，没有看到有关于用户为什么会产生挫折感的深入和系统的讨论，关于这方面，还是推荐《Dont’ Make Me Think》这本经典。

再说说这本中文版：

原书名是Prioritizing Web Usability，中文名称：网站优化。关于这点，请编辑和译者自己读读第三章的3.1.7“浮夸的内容以及空洞的夸大宣传”以及第八章的8.3.2的标题：减轻夸大的宣传。

一本关于可用性的书最难的在于能在各方面要能“可用”，至少不与自己所“推销”的可用性原则产生矛盾。可是我却能在这本书里找到许多反例：

这本中文版没有索引！这是不是指望读者从头到尾就看一遍，还是希望读者将来为了找某个要点得再从头翻一遍？

书里有很多在正文外的文字框，这些文字框的标题栏背景有橘黄色，绿色，深蓝色，而文字背景有白色，绿色，和橘黄色，不同颜色代表什么意思呢，我以为在前言或者介绍部分应该有“如何阅读本书”的部分做对应的介绍，遗憾的是，没找到。仔细看看发现每个章节的小结标题都有不同的背景颜色，比如第一章的是浅蓝色，第二章是浅橘黄色，第三章是浅绿色……有必么？这不仅让读者阅读的时候产生混淆，也让书的成本增加，这都是毫无必要的。

页面排版，每页竖的两栏，跟报纸似的，这跟我们平时看书的习惯不一样（请编辑和译者自己再阅读一下第8章的“为什么用户会进行扫描式阅读”），而且往往中间插入一段横跨一页的说明文字，打破两栏文字的文字框，整个阅读过程必须不断避开跳过这些隔断正文的文字框，跟玩贪吃蛇一样。

总结我的意见：

1. 如果用《连线》杂志常用的评价来描述原书给我的印象，那就是：TIRED and EXPIRED。
2. 从其内容和内容质量来看，这标价89元的书太贵了，毫无必要的贵，不值得买。

如果你从来没有接触过关于网页/网站可用性的介绍和讨论，那么建议你去借一本来看，要是借不到，就在书店里花一两个小时先看看，实在觉得对自己有用那么再买。如果已经对可用性有一定了解，那么没必要看这本书了。

最后，我斗胆在这里做些建议：

1. 读《Don’t Make Me Think》；
2. 学习和掌握网页标准(Web Standards)，近期一些关于CSS和Javascript的书里有很多对可用性的讨论；
3. 网络资源：有很多网站提供可用性研究和讨论；
4. 参与在线讨论（比如DeDream’的Google Group）；
5. 最重要的，多看看一些好的网站，多用些common sense；

Remy Sharp wrote a web service to look up HTML Entity Character. The service “allows you to quickly find the entity based on how it looks”. There is also an OpenSearch plugin and MacOS Dashboard widget. Kudos to Remy!

I figured a Firefox extension clone would be handy, and it wouldn’t be too difficult to make one, thus:

This extenion is simple: a GUI wraps and calls the Javascript code Remy wrote (with a little modifiication, basically renaming global variables to make them unique) and then displays the result. The code is licensed under Creative Commons by-sa 2.5, same as Remy’s code.

It should work on Firefox from version 1.5 and above (have tested on 3.0aPre7 too), also on Netscape Navigator and Flock, let me know if you have any problem using it.

To try out, go to the extension’s home page and click install (it’s currently hosted on my server, so you have to let Firefox allow download and install extension from my server).

I could have made the extension remotely invoke Remy’s web service, parse the return html and present the result, but it might not be a good option, because:

1. I need it work while off-line (too much distraction online);
2. HTML entities character set doesn’t change that often, what’s the last addition? € maybe?
3. Overhead from network traffic and CPU cycles parsing html;
4. Not really a reason though: I could later make use of the new Online and Offline Events and provide user the options;

为了更方便阅读网页(”Improves readability”)，有人专门针对Lifehacker.com（我每天必看的网站）页面写了个Greasemonkey用户脚本，把多余的页面元素删除掉(”Removes various elements from the Lifehacker site”)。

猜猜看Lifehacker的反应是什么?

It removes too many elements of the site’s design, but this custom Lifehacker user style is still a compliment. You like us enough to mod us!

稍微有点不满意(删除掉太多页面设计元素了)，但这对Lifehacker.com还是一个认可，因为用户喜欢Lifehacker到了改装页面（mod的感觉没翻译出来）的地步。

所以：

• 如果有用户用user script改装你的页面，那这是一件好事情（你提供了他们不愿意放弃的内容），同时也是一件需要考虑的事情（页面设计也许太花哨或者色彩搭配不够好）；
• 页面的mark up不能太复杂，否则user script不好写 ;)
• 页面的mark up不能经常变动，否则user script会失效；

这就让我想起几天前看到的一句话：

Your Markup is an API. With all the hype about APIs and mash-ups, it’s easy to forget that your HTML is also an API, and your users are experimenting with it right now.

— Matthew Magain

但页面设计和编写的重要性绝对不仅仅在为了考虑用户使用Greasemonkey user script（毕竟这样用户比例特别小），在结构化的数据的发布和读取上，尤其是microformats的推广更是证明了“页面是API”。下一个版本的Firefox，Firefox3.0，已经在考虑集成对microformats的支持，这里有一些Firefox3在支持microformats的用户界面设计模拟图，已经包括hCard, hCalendar等格式。

话说回来，无聊一下，如果写Greasemonkey user script来改装网页，你会改装国内的哪个网站？怎么改？

在提到雅虎通Pingme服务的那篇里，我说到网页上的文案内容不该用图片来显示，但是没说为什么，只是加了个链接到W3C的相关规范。现在做个小结，说说把文案放在图片里显示的缺点和应该采用的办法，也算是补记一下笔记。对这方面很熟悉的读者可以不必看了。

• 图片比文字占用带宽大得多，因为用户在使用带宽质量不好的时候或者在流量计费的情况下会特意关掉图片，但是不应该因此在使用网页上受到影响；
• 图片不能缩放，视力不好或者显示器分辨率高的用户看起来就很吃力，再说浏览器上对文字放大缩小的功能已经存在很久了；
• 为了自己工作省力省心，如果文字需要修改或者调整，那么每次修改（包括标点符号），负责文案的都得找你协调，你要重新再做一次，这还不包括不同语言和繁体简体的处理；
• 除非搜索引擎做了对图片进行OCR或者其他分辨识别功能，否则搜索引擎爬虫是看不到图片里的文字的；

我当时说在IMG的ALT里添加图片上的文案内容其实只是一个勉强和粗糙的办法，最好的办法是用一个HTML元素，比如DIV，将图片的URL放在CSS该元素里的background-image属性里，文字内容就放在HTML里，直接写或者从数据库或者CMS系统提取，这么做基本上弥补了上面讲到的把文案放在图片里显示的缺点，一个例子就是雅虎自己的雅虎收藏+的首页Banner。

当然这种办法也有一些难度，主要有两个：

1. 需要一定的CSS技巧（比如如何保证放大缩小时外框不会“破”掉，以及保证在跨平台跨浏览器上显示的统一），在此推荐一本好书：Bulletproof Web Design，里面有很多精彩的灵活使用HTML/CSS的方法和技巧。
2. 不像用图片，使用CSS需要在不同的操作系统下和不同的浏览器里进行测试，这是比较麻烦，但也不是没有办法解决，这里提供一个在线测试页面在不同平台和浏览器下显示的服务：browsershots.org，另一个办法就是使用虚拟机，比如Virtual PC等。

再推荐个我刚刚发现的一个网页设计的专业Blog：淘宝UI团队的Blog，专业、专注，并乐于分享。我自己还没开始用淘宝，不过已经从几个地方听说淘宝的网页设计很专业，很高兴能看到他们也在使用blog这个工具。希望明年的网志年会能有一个专门的技术track，并且有个用户界面和网页标准方面的研讨会，让这样的团队blog跟大家见面和交流。

认识Windy有段时间了，一开始是一起参与SocialBrain.org组织的《Free Culture》和《We The Media》中文翻译项目，后来才知道她是专门从事用户互动和界面设计，为不少网站提供咨询。最近Windy告诉我她翻译的Steve Krug的《Don’t Make Me Think》的中文版：《点石成金：访客至上的网页设计秘笈》，已经发行了。《Don’t Make Me Think》是一本非常非常好的书（原书的第一和第二版我都买了，据说第三版快要出来），现在出了中文版，当然要买一本收藏，再给公司买了一本，推荐给同事们，并要求程序员都看至少一遍。

在书店里翻这本书时，第一个发现就是它非常忠实原著（中文版是基于英文第二版），包括从内到外的Look -and-Feel。原书使用了大量的网站截图和示意图，都在中文版基本上得到忠实重现，甚至包括小标题的颜色也是跟原书一样。这对其他类型的书没有太大的必要，但作为一本关于设计和用户体验的书，这就很重要了。相信Windy和出版社为此做出了不小的努力，可能也是因此造成了成本比较高，使得很多人嫌它太贵（平均几乎4页1块钱）。

《Don’t Make Me Think》讲的是网站设计如何提高网站的可用性(Usability)，其核心思想就是从用户的角度说的一句话：“Don’t make me think”（简称和标签：DMMT），在原书里作者对这句话做了个解释：

It means that as far as humanly possible, when I look at a Web page it should be self-evident. Obvious. Self-explanatory.

就是中文版中说的“不言而喻、一目了然、自我解释的”。这是地球人，至少是从事网页设计的都明白的道理，但是真的明白为什么，和怎么在实践中做到，并不是件容易的事情。这本书可以起到很大的帮助，因为它

1. 传递了它要说的东西（什么是DMMT, 为什么要DMMT, 和怎么做到网页设计能够DMMT）;
2. 简单，直接，清晰、有效地做到了1；
3. 以一本很薄，读起来很轻松的书，做到了1和2；

比如在第2章“我们实际上是如何使用Web的”里，短短几页就说清楚他发现用户在使用页面上的三点“事实”：

1. 我们不是阅读，而是扫描
2. 我们不作最佳选择，而是满意即可
3. 我们不是追根究底，而是勉强应付

也许这三条说出来之后，不少人都会说，切，废话嘛，就应该是这样的。但是在作者直接清楚地总结出来之前，我不知道有多少网站规划和设计者不仅真正意识到这些，并且在实践中有针对地进行网站和网页设计。在第一次读到这章的时候，这三点已经值回一半的价钱了。

还有，这本书在解释和分析的时候，用了生活中日常的体验和网站设计相互参照，比如页面标记和高速路牌，网站的导航和在大超市里购物的类比，让读者能产生共鸣，更容易理解和接受。

但这也导致了它不是一本很容易翻译好的书，因为字面上直接的翻译未必能让有不同生活文化背景的中文读者产生和美国读者能得到的同样有效的反应。那么是直接译好还是从中文里找个对应的通俗说法翻译好？我猜这也许曾经给了windy一些小麻烦。阅读的时候，大家不妨注意一下这方面，并把这当作体会从文化差异在用户使用设计上造成需要面对的一个难题，a bonus point，算是英文读者不能得到的额外收获 ;-)

在这也挑几个骨头：原书名是Don’t Make Me Think, 不知道为什么中文版的题目是“点石成金”，而这句话在书里被直接翻译成了“别让我思考”。“思考”这词在这显得似乎过于严肃了点，如果翻译回英文，恐怕contemplate, ponder, 和reflect似乎更合适。觉得翻译成“别让我动脑子”比较好些，也适合原书行文的口气和风格。另外，这本书的副标题是“访客至上的网页设计秘笈”，“网站设计”更恰当些。

最后，如果要推荐一本网站设计（非具体技术实现类）的书，我就推荐这本。