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

关于网站重构和用户体验几本热门书籍的学习笔记这段时间可能是自毕业以来读书密度最高的时间（不过自打毕业以后就没怎么看过书，大部分时间读的都是网上的东西），心得总结一下，也希望同有兴趣的朋友分享：）

本轮读书主要的关注点是关于DIV+CSS重构和用户体验。我想不必要在这里再强调DIV+CSS架构的优点了，作为一个未来的趋势，必须跟上；也无须再在这里强调用户体验的重要性了，因为用户是上帝，上帝的体验不好，咱的日子就不好过……因此，用户体验的重要性怎么强调都不过分。在这里分别向各位交待一下都读了些啥书，以及有哪些看法和重要的收获。

这次一共读了四本书，都是当下在行业里非常热门的书，分别是：李超的《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网站布局实录》来得更详细、实用和具体。基本上，这本书可以列为“可不读”一类。