阿祥 2008-4-8 23:58
网站重构和用户体验几本热门书籍的学习笔记
这段时间可能是自毕业以来读书密度最高的时间（不过自打毕业以后就没怎么看过书，大部分时间读的都是网上的东西），心得总结一下，也希望同有兴趣的朋友分享：）
@r M Sm K6i8xT%q
f
本轮读书主要的关注点是关于DIV+CSS重构和用户体验。我想不必要在这里再强调DIV+CSS架构的优点了，作为一个未来的趋势，必须跟上；也无须再在这里强调用户体验的重要性了，因为用户是上帝，上帝的体验不好，咱的日子就不好过……因此，用户体验的重要性怎么强调都不过分。*Cw%]9p mcTA
在这里分别向各位交待一下都读了些啥书，以及有哪些看法和重要的收获。
b K ]2F#\CL W2L
{$Z`V l c?}
[b] 本轮一花读了四本书，都是当下在行业里非常热门的书，分别是：[/b]
o l tiYf]
0~'E)U/T9w*ZT
Eh2V
[list][*]李超的《CSS网站布局实录》(第二版)、[*]Steve Krug原著的《Don’t Make Me Think》、[*]Jesse James Garrett写的《用户体验要素》、[*]Jeffrey Zeldman原著的《网站重构--应用Web标准进行设计》，[/list]除李超的作品本身是中文以外，其它的都是中译本。5oA3o*aPEs.f
5_x/c
l C
[b] 1、 李超的《CSS网站布局实录》(第二版)。[/b]
k*? V9_*Rk
,w\ oR*_QWf(Vs n
个人认为总体上来说这是一本值得一读的书，可以说它深入浅出地、以实例为基础详细地解剖了一个CSS网站布局的过程，版式和内容组织也相当合理，读后可以说受益匪浅，如果是初开始学习DIV+CSS，这本书可以列为必读。
+| IxFg-i'soE
本书尤其提到了非常多的实用技巧和一些有用的代码，稍加改造就可以为自己所用。
9i y je-~1[
该书关于如何组织CSS文件的部分非常有价值——CSS将样式分离，通过CSS的重用，使得代码数据量大幅度减少，但如果不加合理组织，CSS将非常繁杂、混乱，难以管理；也可能导致页面加载不必要的代码而使打开速度变慢，从而让使用CSS的初衷在一定程度上被减弱。合理组织CSS代码的问题非常值得重视。
K4IgJ9q#wx
这本书也有一些小问题，有个别错字和漏字，但不影响理解和阅读。:u6H x8MP;B
在此提一下，该书中对一些问题的论述不够全面和深入，比如说对于IE6.0那个3px BUG的论述中，没有提到使用HTML代码注释会造成此问题，而网上有人对此进行了更为深入的研究，论述得也更加全面；网址附在这里，供诸君参考：[url=http://bbs.blueidea.com/thread-2692486-1-1.html][color=#0000ff]http://bbs.blueidea.com/thread-2692486-1-1.html[/color][/url]。当时我碰到过这个问题并且在这里得到了答案，关于3PX BUG的详细描述，可参考这里：[url=http://topic.csdn.net/u/20080218/10/81178301-5527-40fd-a29b-4132de126046.html][color=#0000ff]http://topic.csdn.net/u/20080218 ... b-4132de126046.html[/color][/url]
^%U$v,V p
个人建议作者对float的论述可以再加强一些。Float属性对于CSS布局来说如此重要，甚至可以说到了不理解float就可能做CSS布局的地步；但在实际使用过程中，float属性也会带来很多让初学者难以理解的问题（本人就碰到过这个情况，卡了三四天就是不知道怎么回事），而很多问题都必须要正确运用float:clear这个值才能解决，我想作者如果能加一些实例就更好了（我有一个实例，会稍后另文说明）。
;k
B@$m @ xx"p_b
本书的后半部分好象写得比较匆忙，过于简略了一些，有的好象是直接引用的，希望以后再版时有所改进。
(bTj5U7d1oZg
p r9J2b'\ B6`
[b]2、 Don’t Make Me Think，原著Steve Krug[/b] W+i-nQ1@hr
2Z6s u"a#YTO \}
w
本书主要论述的是，如何让网页更易用、用户体验更好？如何通过合理的布局，让网页结构明晰、让用户不需要什么帮助就知道你的网页是做什么的、该如何去操作？E$v|lf
我得说：这是一本好书，无论是从原著的内容、结构还是翻译水平的角度来讲，都是如此。书中讲的一些东西我原来是知道的，但它以更加系统化、容易理解的方式总结了出来，当然，也带来了我所不知道的东西，比如如何低成本进行可用性测试。f*l:@y#pa
书中运用了大量实例、图片来展现如何设计出用户体验更佳、更易用的网页——其中一句名言值得铭记（大意如此）：用户体验好的网页要能够不证自明，或者，至少要能够处我证明。's$I[ O"Wz
在书的后半部分，Steve建议了“跳楼大甩卖价格”的可用性测试方法——看到这个方法时我感到比较怀疑，不过我很快用它来作了一个实验，发现——作者建议的方法很管用：HY p j
V(AE&A
~
当时我们希望设计出一个非常好用的购物车页面，让哪怕是初次购买的用户都能够很容易地、几乎可以不需要外来帮助（也就是“不证自明”）地顺利提交掉订单，于是我找到一位从未在网上购买过东西的网友“疯狂钻石”帮助作了一个可用性测试，结果发现了至少五个问题——疯狂钻石所代表的这一类用户的行为，与我们原先预想的可以说完全不同！测试结果到了让我吃惊的地步，因为如果换作是我，我是绝对不会象他那样去点击一些地方的。我们随后根据测试的结果对页面进行了改进，再请他来看，评价是“我觉得清楚很多，我知道该点哪儿了”。限于篇幅，就不再这里详细论述测试的过程了。我想说的是：Steve建议的测试方法很简单、很管用，只要读了Steve的书就能学得会。
!uG-Ky%Hkz$MY
Don’t Make Me Think应当是界面设计师的必读书，至少我是这么认为的。
6u9c Z^g;KC0T
~.z]n1k
[b]3、《用户体验要素》，Jesse James Garrett原著[/b]
^5CJ,U X/ix
感谢我的朋友晓毅将这本书赠送给我，使我觉得倍儿有面子：） y x!aP(a1@Gx0Ga
这本书主要是论述了一张图：设计一个有良好用户体验的网站（而不仅是网页），需要从五个层面上去考虑问题，从底层到表层，顺序分别是：YAh } nH~.l
I
战略层：网站要做什么事？目标是什么？0N"G!p5w9F
\ ~$x
范围层：为了实现目标，有哪些事情是应当做的？（另一面就是：哪些是不应当做的）
;Lz1[+B6o
n+u
D9j
结构层：这些事情应当如何组织？相互关系？
E`OTCG:C,t3m
框架层：页面布局？各个元素的位置？z S }d"lWS x
表现层：图片、文字、颜色……这些最终的视觉元素如何表现rYW!ooE-?
本书的基本观点（冰寒个人的理解，不一定正确）是：在建设网站之前，必须从这五个层面去考虑用户体验要素；从底层开始考虑，而不是首先去考虑表层的问题；表层对于实现底层的设计初衷至关重要。y4y ~ `D8} f+b9[
这些观点无疑非常重要，对于一个网站/项目负责人来说，从五个层面去考虑问题可以说非常必要，本书会提供很多帮助，理清思路。-m&o%Te:k1r q1T @
这本书中没有太多实际的案例，有一些论述相当晦涩（也可以从另外一个角度说本人的阅读和理解水平有限）。造成理解困难的也可能主要是翻译的原因，在我看来本书的中译本基本上是以英语式中文为主，不是很符合国人的表达习惯，如果换一种译法，变成中国人更易懂的语言，也许更能使原著者的思想产生广泽众生。,q-p)U4zL.U:L-GW
在具体内容方面，有两个亮点值得赞扬：
w*C2VWE
A、虚拟的用户角色——作者建议，为了让开发团队时刻心中记着用户的特征，直接虚拟一个真实的代表性用户，为其制作一个胸卡，上面有她/他的照片、名字、年龄、职业等……挂在办公室里，在开发过程中，看一眼这个具体化的虚拟人物，就会将她/他的需求牢记于心。 sm/kX5Z)n.z'|
这个方法很值得赞扬，不过实际情况可能复杂得多——我们的用户假如涵盖了一个更大的范围呢？这样做会否就有限制了？不过毫无疑问，对于专门化的网站来说，此法大有价值——要知道，如果对于用户需求没有相对准确的把握（当然，最好是精确的把握），再漂亮的页面也没有太大的用处。C)`+y#Gd
B、在表现层开发方面，建立一个视觉元素规范。其实这个对于做平面设计的人来说并不陌生，可以说是平面设计里面VIS系统（Visual Identifying System，视觉识别系统）在Web领域的延伸。我们见过太多滥用颜色、线条、风格的网站，实在是太需要有一套规范的视觉识别系统了。5l Q] fJs`9N
2}r vA v v)gu
个人认为这本书可被列为“可读书”，主要理解“五个层面”的精神即可，就具体方面而言，其它的书籍应该实用、详细得多，尤其是Don’t Make Me Think。 ^n6Pxn(J }
L!E kg cXr
4[b]、《网站重构--应用Web标准进行设计》，Jeffrey Zeldman原著[/b]
zNh)R}+V
hJ x)E;n
我不得不说，总体上来说这是一本糟糕的书——当然，也有有价值的东西，一分为二地看待比较公平。y
~#}6l9_`2L2QfU
该书花了大量的篇幅讲述了W3C的起源和背景、WEB标准的提出和推进历程，字里行间掺杂了大量可能影响/打断读者思路的口头语和一些并无必要的比喻，内容中经常会出现“你会在某处看到更详细的内容……”之类的打扰，加上不少文字错误和大量英文式的中文，致使读起来颇为拗口。书的后半部分有连续的拼写错误，比如“URL”被写成“URI”等等（当然这是编辑的失误）。就“如何应用Web标准来构建一个网站”这一中心议题来说，该书讲述得可以说不够全面、具体和深入。如果读者对于HTML和Web本身的理解基础不够的话，看了这本书以后不太可能获得顺利重构一个网站的能力。aA?3y8TZ `)\U
书中的一些内容与中国目前的实际也不是很对路，比如花了大量篇幅讲述Netscape4浏览器的兼容代码方法。中国目前的主流浏览器仍然是IE，而且是IE6，因此基本没有必要讨论低版本Navigator浏览器的问题（不知冰寒这个意见是否恰当，诸君可以讨论），个人认为我们构建的（面向国内中文用户的）网站完全可以一步到位，直接上DIV+CSS，而不需要采用表格+DIV+CSS的过渡结构，也算是一种“后发优势”吧。
)S R+A \8N W A,s^
%G__#^ec
该书中值得赞扬的部分包括： g.AlU!r c.zmA#W7Q
详细阐述了使用结构性XHTML标签的重要性：XHTML的标签都是有意义的，因此当我们尽可能使用结构性标签的话，网页内容对于机器（不同平台的浏览器、搜索引擎蜘蛛）更易理解，即使是在没有样式的情况下，浏览者也能够无障碍地理解网页中的内容。作者给出的测试方法是：去掉网页中的样式来浏览网页，看看是不是能有条理、有顺序地看懂。
:k/k3X Ao(l2E~
冰寒已经就此作过测试，发现这个方法非常管用，能够非常清楚地看到在无样式的情况下网页内容的结构是否合理，而且非常利于发现一些代码中的错误（在加载样式的情况下，有一些错误可能被IE强大的容错能力所掩盖，当剥掉样式这层皮，问题就浮出来了）。%u[^0n
_OD-l
另外，作者比较详细地讲述了XHTML的规范，可以说比较全面和深入的。
(^i*O M9Zs F
Z
如果是要获取用CSS重构网站的能力，这本书是不适合的，还是《CSS网站布局实录》来得更详细、实用和具体。/`'p)Qa9zx Ba
基本上，这本书可以列为“可不读”一类。
