关于网站重构和用户体验几本热门书籍的学习笔记

冰寒是个珍珠达人，是左岸女人网站当家的，他的学习精神非常可佩。在他同意之后，把他的读书笔记转载在咱们坛子里，给大家参考。

这次一共读了四本书，都是当下在行业里非常热门的书，分别是：李超的《CSS网站布局实录》(第二版)、Steve Krug原著的《Don’t Make Me Think》、Jesse James Garrett写的《用户体验要素》、Jeffrey Zeldman原著的《网站重构--应用Web标准进行设计》，除李超的作品本身是中文以外，其它的都是中译本。

 1、 李超的《CSS网站布局实录》(第二版)。

个人认为总体上来说这是一本值得一读的书，可以说它深入浅出地、以实例为基础详细地解剖了一个CSS网站布局的过程，版式和内容组织也相当合理，读后可以说受益匪浅，如果是初开始学习DIV+CSS，这本书可以列为必读。

本书尤其提到了非常多的实用技巧和一些有用的代码，稍加改造就可以为自己所用。该书关于如何组织CSS文件的部分非常有价值——CSS将样式分离，通过CSS的重用，使得代码数据量大幅度减少，但如果不加合理组织，CSS将非常繁杂、混乱，难以管理；也可能导致页面加载不必要的代码而使打开速度变慢，从而让使用CSS的初衷在一定程度上被减弱。合理组织CSS代码的问题非常值得重视。这本书也有一些小问题，有个别错字和漏字，但不影响理解和阅读。

在此提一下，该书中对一些问题的论述不够全面和深入，比如说对于IE6.0那个3px BUG的论述中，没有提到使用HTML代码注释会造成此问题，而网上有人对此进行了更为深入的研究，论述得也更加全面；网址附在这里，供诸君参考：http://bbs.blueidea.com/thread-2692486-1-1.html。当时我碰到过这个问题并且在这里得到了答案，关于3PX BUG的详细描述，可参考这里：http://topic.csdn.net/u/20080218/10/81178301-5527-40fd-a29b-4132de126046.html

个人建议作者对float的论述可以再加强一些。Float属性对于CSS布局来说如此重要，甚至可以说到了不理解float就可能做CSS布局的地步；但在实际使用过程中，float属性也会带来很多让初学者难以理解的问题（本人就碰到过这个情况，卡了三四天就是不知道怎么回事），而很多问题都必须要正确运用float:clear这个值才能解决，我想作者如果能加一些实例就更好了（我有一个实例，会稍后另文说明）。

本书的后半部分好象写得比较匆忙，过于简略了一些，有的好象是直接引用的，希望以后再版时有所改进。

2、 Don’t Make Me Think，原著Steve Krug

本书主要论述的是，如何让网页更易用、用户体验更好？如何通过合理的布局，让网页结构明晰、让用户不需要什么帮助就知道你的网页是做什么的、该如何去操作？

我得说：这是一本好书，无论是从原著的内容、结构还是翻译水平的角度来讲，都是如此。书中讲的一些东西我原来是知道的，但它以更加系统化、容易理解的方式总结了出来，当然，也带来了我所不知道的东西，比如如何低成本进行可用性测试。

书中运用了大量实例、图片来展现如何设计出用户体验更佳、更易用的网页——其中一句名言值得铭记（大意如此，我就不去翻书了）：用户体验好的网页要能够不证自明，或者，至少要能够自我证明。

在书的后半部分，Steve建议了“跳楼大甩卖价格”的可用性测试方法——看到这个方法时我感到比较怀疑，不过我很快用它来作了一个实验，发现——作者建议的方法很管用：当时我们希望设计出一个非常好用的购物车页面，让哪怕是初次购买的用户都能够很容易地、几乎可以不需要外来帮助（也就是“不证自明”）地顺利提交掉订单，于是我找到一位从未在网上购买过东西的网友“疯狂钻石”帮助作了一个可用性测试，结果发现了至少五个问题——疯狂钻石所代表的这一类用户的行为，与我们原先预想的可以说完全不同！

测试结果到了让我吃惊的地步，因为如果换作是我，我是绝对不会象他那样去点击一些地方的。我们随后根据测试的结果对页面进行了改进，再请他来看，评价是“我觉得清楚很多，我知道该点哪儿了”。

限于篇幅，就不再这里详细论述测试的过程了。我想说的是：Steve建议的测试方法很简单、很管用，只要读了Steve的书就能学得会。 Don’t Make Me Think应当是界面设计师的必读书，至少我是这么认为的。

3、《用户体验要素》，Jesse James Garrett原著

这本书主要是论述了一张图：设计一个有良好用户体验的网站（而不仅是网页），需要从五个层面上去考虑问题，从底层到表层，顺序分别是：

• 战略层：网站要做什么事？目标是什么？
  
• 范围层：为了实现目标，有哪些事情是应当做的？（另一面就是：哪些是不应当做的）
  
• 结构层：这些事情应当如何组织？相互关系？
  
• 框架层：页面布局？各个元素的位置？
  
• 表现层：图片、文字、颜色……这些最终的视觉元素如何表现

本书的基本观点（冰寒个人的理解，不一定正确）是：

在建设网站之前，必须从这五个层面去考虑用户体验要素；

这本书中没有太多实际的案例，有一些论述相当晦涩（也可以从另外一个角度说本人的阅读和理解水平有限）。造成理解困难的也可能主要是翻译的原因，在我看来本书的中译本基本上是以英语式中文为主，不是很符合国人的表达习惯，如果换一种译法，变成中国人更易懂的语言，也许更能使原著者的思想产生广泽众生。

在具体内容方面，有两个亮点值得赞扬：

A、虚拟的用户角色——作者建议，为了让开发团队时刻心中记着用户的特征，直接虚拟一个真实的代表性用户，为其制作一个胸卡，上面有她/他的照片、名字、年龄、职业等……挂在办公室里，在开发过程中，看一眼这个具体化的虚拟人物，就会将她/他的需求牢记于心。这个方法很值得赞扬，不过实际情况可能复杂得多——我们的用户假如涵盖了一个更大的范围呢？这样做会否就有限制了？不过毫无疑问，对于专门化的网站来说，此法大有价值——要知道，如果对于用户需求没有相对准确的把握（当然，最好是精确的把握），再漂亮的页面也没有太大的用处。

B、在表现层开发方面，建立一个视觉元素规范。其实这个对于做平面设计的人来说并不陌生，可以说是平面设计里面VIS系统（Visual Identifying System，视觉识别系统）在Web领域的延伸。我们见过太多滥用颜色、线条、风格的网站，实在是太需要有一套规范的视觉识别系统了。

个人认为这本书可被列为“可读书”，主要理解“五个层面”的精神即可，就具体方面而言，其它的书籍应该实用、详细得多，尤其是Don’t Make Me Think。

4、《网站重构--应用Web标准进行设计》，Jeffrey Zeldman原著

我不得不说，总体上来说这是一本糟糕的书——当然，也有有价值的东西，一分为二地看待比较公平。

该书花了大量的篇幅讲述了W3C的起源和背景、WEB标准的提出和推进历程，字里行间掺杂了大量可能影响/打断读者思路的口头语和一些并无必要的比喻，内容中经常会出现“你会在某处看到更详细的内容……”之类的打扰，加上不少文字错误和大量英文式的中文，致使读起来颇为拗口。书的后半部分有连续的拼写错误，比如“URL”被写成“URI”等等（当然这是编辑的失误）。

就“如何应用Web标准来构建一个网站”这一中心议题来说，该书讲述得可以说不够全面、具体和深入。如果读者对于HTML和Web本身的理解基础不够的话，看了这本书以后不太可能获得顺利重构一个网站的能力。

书中的一些内容与中国目前的实际也不是很对路，比如花了大量篇幅讲述Netscape4浏览器的兼容代码方法。中国目前的主流浏览器仍然是IE，而且是IE6，因此基本没有必要讨论低版本Navigator浏览器的问题（不知冰寒这个意见是否恰当，诸君可以讨论），个人认为我们构建的（面向国内中文用户的）网站完全可以一步到位，直接上DIV+CSS，而不需要采用表格+DIV+CSS的过渡结构，也算是一种“后发优势”吧。

该书中值得赞扬的部分包括：

详细阐述了使用结构性XHTML标签的重要性：

XHTML的标签都是有意义的，因此当我们尽可能使用结构性标签的话，网页内容对于机器（不同平台的浏览器、搜索引擎蜘蛛）更易理解，即使是在没有样式的情况下，浏览者也能够无障碍地理解网页中的内容。作者给出的测试方法是：去掉网页中的样式来浏览网页，看看是不是能有条理、有顺序地看懂。冰寒已经就此作过测试，发现这个方法非常管用，能够非常清楚地看到在无样式的情况下网页内容的结构是否合理，而且非常利于发现一些代码中的错误（在加载样式的情况下，有一些错误可能被IE强大的容错能力所掩盖，当剥掉样式这层皮，问题就浮出来了）。

另外，作者比较详细地讲述了XHTML的规范，可以说比较全面和深入的。

如果是要获取用CSS重构网站的能力，这本书是不适合的，还是《CSS网站布局实录》来得更详细、实用和具体。基本上，这本书可以列为“可不读”一类。