网站交互设计模式:第2版

《网站交互设计模式》由电子工业出版社出版。本书是一本专门解决网站可用性和易用性问题的实用书籍，全书分成3个部分，第1部分论述了以用户为中心的设计模式的基本概念、基本规则和流程；第2部分分别论述了13个模式组（共107种模式）的设计模式，其中包括移动设计模式；第3部分为附录。

图书信息

内容简介

图书信息

作　者：（美）杜月（Duyne,D.K.），（美）蓝帝（Landay,J.A.），（美）宏（Hong,J.I.）著孙昕等译

出版社：电子工业出版社

出版时间： 2009-9-1

页　数：652页

开　本： 16开

I S B N ：978-7-121-09204-6

定价：108.00元

内容简介

设计一个网站并不难，但要设计出一个让用户能够乐在其中，并且从中很快找到所需内容的网站并不是一件容易的事情。本书适合网站设计工程技术人员阅读，对高等院校计算机相关专业的教师和学生也有很好的参考价值。

Douglas K. van Duyne是一位企业家和发明家，是Naviscent（一家网站研究和设计公司）和Dune Design Group（一家战略数字产品设计公司）的创办人和负责人之一，也是NetRaker有限公司的共同创办人和CEO。该公司是在线可用性和市场调研方面的先锋，其团队已经为包括MBNA、Yahoo、Intel、Safeway、Agilent和其他全球2 000多家公司开发了多种创新产品。带着在GO Corporation和KidSoft的公司中积累的产品设计和开发方面的20多年的工作经验，他已成为在线购物、电子商务、软件与多媒体开发方面的一位改革者，并且拥有加州大学伯克利分校的计算机科学学位，目前他住在旧金山、纽约和伦敦。

James A. Landay是华盛顿大学的一名教授，先前是英特尔公司西雅图研究中心的一位总监，主要从事新兴的ubiquitous computing领域的研究，他还曾是NetRaker的首席技术官和共同创办人，以及加州大学伯克利分校的副教授。他于1990年获得了伯克利分校的电子工程和计算机科学的学士学位，并且分别于1993年和1996年在卡内基梅隆大学获得硕士和博士学位。其博士论文第1个论证了用户界面设计工具的草图作用，并且已经在人机交互领域发表了大量的文章，包括用户界面设计和评估工具、网站设计、姿态识别、笔式用户界面、移动计算、ubiquitous computing，以及视觉语言等方面的文章。他还是许多硅谷公司的顾问，目前与其妻子Eileen、儿子Andrew和Timothy及其爱犬住在西雅图。

Jason I. Hong是卡内基梅隆大学人机交互系的计算机科学教授，在乔治亚技术学院获得学士学位，并且在伯克利获得博士学位，其论文研究了在ubiquitous computing环境中的秘密。Jason曾在IBM、Fuji Xeox Palo Alto实验室和Xerox从事研究工作，在那里他研究了许多课题。例如，协作的Java应用程序、纸式用户界面和在手机中观看和导航网页的技术。他当前正在从事使用隐私和安全，以及防止诈骗和定位服务的研究。Jason喜欢从Internet、印刷物、电视、电影及音乐媒体中获得大量的信息咨询，其主要的兴趣在世界历史、科技、科技的社会影响，以及超自然的因素，他与其妻子住在宾州。

译者序

Internet的发展在最近几年仍然保持一个很高的增长速度，而随着网络的成熟和发展，网站的设计也开始从以技术为中心。即以追求技术的新颖性和技巧性的网站设计思想逐渐发展为以用户为中心的设计思想，网站的可用性及易用性等逐渐成为网站能否吸引访客的要点。实际上，设计一个网站并不难，但是要设计一个让目标客户能够乐在其中，并且能够从网站上很容易地找到自己希望寻找的内容的网站，则是一门学问。因此如何能够提供一个良好的交互界面，并且让网站的目标客户能够很好地认同网站的价值，是网站设计的最终目标。

本书提供了107种成功的网站设计模式，网站设计者可以根据不同特点的用户群选择不同的设计模式。从而有针对性地选择有效的设计模式，设计出符合客户需求的网站。

本书主要针对网站规划和设计人员，其内容并不在于描述网站开发中所需要的技术细节，而是论述如何利用已经在诸多知名网站上验证得出的良好的设计原则，并采取标准的开发流程设计出以用户为中心的成功网站。

本书的特点如下。

（1）所列的设计模式均在诸多知名网站上得到有效的实证。

（2）论述的设计模式从针对网站整体的模式到网站上具体某个展现方式的模式均有涵盖，非常全面。

（3）在各个设计模式的论述中专门开辟一个小节论述与本模式相关的其他模式，具有很好的参考价值。

本书分为3个部分，第1部分论述了以用户为中心的设计模式的基本概念、基本规则和流程；第2部分将设计模式分成13个模式组（共107种模式）分别进行论述。

第2部分中根据设计的过程顺序，首先讨论了网站整体的流派，以及如何为网站建立导航框架并建立有效和可信任的内容。然后讨论了电子商务网站的相关问题，进而讨论链接和导航栏、检索和提高网站访问速度的相关问题，最后讨论了如何为手机设计网站的问题。

第3部分为附录，其中提供了在网站设计时十分有用的大量资源。

由于译者的水平有限，所以翻译中的不妥或错误之处在所难免，敬请广大读者批评指正。

译者

2009年6月于北京

前言

4年前，我们在本书开始写到一个人发现了一条会说话的狗的故事。当问到那条狗说了什么时，那个人回答：“谁关心这个？它是一条会说话的狗啊！”在这件事情发生几年后，即20世纪90年代早期，Web就是那条会说话的狗。其存在是那么令人着迷，商务人士发现可以通过Web来销售，而不需要支付巨大的用于平面媒体和电视广告等产品和分销的费用。Web网站几乎在一夜之间变成了商业的投机对象，与此同时这种新的媒体迎来了一个快速变革的时代。随着Web的发展，开发人员所面临的问题与其他任何行业成熟时所面临的一样。即人们越来越关心价值、便利性和易用性等因素，而不是技术本身是否新颖。由此产生了一个新的说法，即“以用户为中心的设计”来应对这种变化的尝试。

对我们这几个作者来说，以用户为中心的设计对电子商务并不是一个热门话题。8年前，当我们还分别是一个具有软件设计背景的企业家、一位加州（伯克利）大学的计算机科学教授和一位博士研究生时，我们就为开发Web这个新媒体的商务应用的人们提供了客户需求广泛性的观点。虽然这些观点最终带来了Web开发产业的繁荣和本书的诞生，我们仍然在这个领域存在很多疑问。我们研究的一部分在于分析大多数Web网站没有达到客户期望的原因，因此对两个问题很感兴趣，一是典型的设计机构如何开展自己的工作；二是为什么公司会雇用公司外的Web网站设计公司来设计Web网站，而不是自己亲自设计。

为了帮助回答这些问题，我们派了一些研究人员直接与Web设计人员及其客户沟通。我们认识到那些被公司雇用来设计网站的代理公司曾有建立知名品牌网站的成功经验。然而在那时，是通过界面的美观性，而不是通过衡量为客户带来多大的成功来区分Web设计者的水平的。但是当我们了解到绝大多数Web设计者在转行之前工作在印刷、电影或者电视等所有非交互性媒体等行业之后才不觉得奇怪，并且只有很少的工具能够用来帮助设计者理解Web用户的体验。事实上，当研究一个新的客户网站时我们能够认识到网站对生意有所影响，现在我们知道这是因为初始的设计者完全无视网站的交互性设计且秉承外观重于功能的传统观念来完成网站设计。

这个想法在我们的日常工作中变得越来越清晰，我们遇到了很多困难的网站设计问题并且解决了。我们看到很多客户虽然在设计网站时的所有要点都是正确的，但是网站设计仍然失败了。在一个这样的失败项目中我们测试了一个客户的大型电子商务网站，要求典型的网站访问者查找一种指定的产品。我们的客户已经在其内部进行了网站设计，并且设计者也知道如何从网站上找到各种产品，因此自信其顾客也能够找到。然而经过测试，我们发现产品的定义很模糊，导航控制并不清晰。而且在很多网页中都有要查找的产品，顾客需要自己判断哪个页面是自己需要的。当测试完成时，绝大多数测试人员都报告测试成功，但是实际上只有极少数人找到了所要的产品。这样一个对于设计者很清晰的网站设计，对于顾客来说是那么令人困惑，以至于他们甚至不知道自己根本没有找到所要的产品。经过我们的努力，客户终于明白了这个网站的设计没有达到预期效果。只有通过反复设计和严格测试，我们才能够创建出一个既美观，又有实用价值的网站。

在早些年我们曾发现一件很有意思的事情，即以用户为中心的设计在网站设计思想中的地位已经逐步上升到最重要的位置。在这段时间里，我们使用查询工具和方法论按照自己的视角开发了多个世界著名并有最好管理制度的公司的网站。我们企业的法人和软件设计者Douglas K.Van Dugne是Naviscent公司的创始人和负责人，这个公司从事从事网站研究和设计；James A.Landay是华盛顿大学的计算机科学教授，在这之前是Intel西雅图研究室的主管，这个研究室主要研究无处不在的计算机世界；Jason I.Hong是卡内基梅隆大学人机交互系的计算机科学教授。

在我们各自的经历中都遇到过上百个管理人员，并与其讨论其商务模式和市场策略，当然也包括网站开发计划。我们发现由于网站商务已经成熟，因此各个公司都认识到把注意力集中在提升用户体验的需要上。事实上，我们发现在这些管理人员中，地位越高的人越清楚地认识到以用户为中心的设计思想的重要性。

我们的经验并不仅仅局限于以用户为中心的设计思想，最近电子商务分析师在评估设计公司时已经越来越少地关注这些公司的商标设计工作，而是更多地关注其在网站用户体验方面的经验和成效。虽然关注点发生了变化，在分析最优秀的设计公司之后，分析师们仍然得到了令人惊讶的结果。虽然很多最大的网站代理公司许诺在网站设计服务中包含用户测试，但是通过分析仍然发现其设计实际并没有始终如一地提供更好的用户体验，其中仍然有很多工作要做。

当今的公司对以用户为中心的设计知识、经验、方法论和工作实践有最迫切的需要，本书目的在于通过我们这些年在Navisent、UC（加州大学伯克利分校）、华盛顿大学和卡内基梅隆大学的研究实践，以及对超过300个客户的网站研究和设计项目的分析来满足读者的需要。我们希望通过保持对以用户为中心的网站现状的研究，可以让我们的工作紧跟当前发展的趋势。

第2版中的新内容

在第1版出版以后，我们与很多读者和教师讨论了他们阅读本书后的感受。有两个相关联的原因使我们产生了写作第2版的想法，其中一个是虽然读者都赞扬第1版选题广泛，但是看起来我们还是忽略了一些重要的模式。读者建议增加一些第1版没有包括的模式，如进度条模式。

另一个想法是两个主要的Web新技术的产生，即基于AJAX（异步Javascript和XML）的界面和移动Web。由于有了AJAX，所以以前只能用于桌面应用软件的互动技术，如直接处理现在也可以应用于设计增强的Web网站和应用，从而拓宽了设计者的选择范围。而随着手机用途的不断扩展，手机浏览器技术也在不断发展。移动Web创造了大量的商务机会和对设计的挑战，在本版中我们将介绍多个适用于移动Web领域的新模式。

除增加了多个新模式以外，在这一版中还更新了其他一些模式，以适应技术的发展。对于其他一些模式，也提出了我们在这一段时间研究的新成果。事实上，在第2版中超过三分之一的内容是新的或者更新过的。

为什么使用这本书

读者可能会对本书和其他大量的Web设计书籍有何不同感到好奇，本书并不关注编程或者任何特定的技术，也不会为设计者及其团队在网站开发中遇到的问题提供快速的解决方案。其实没有一本书可以独立地做到这一点，本书提供的是帮助设计者成功开发以用户为中心的网站的规则、过程和模式。通过本书的帮助，设计者可以开发易于理解并易于使用的网站，而这些正是以用户为中心思想的核心。

创建一个Web网站很容易，而创建一个成功的Web网站，从而为目标用户提供成功的体验则完全不同，而这也正是本书所要阐述的内容。阅读本书后，它还可以作为一本有价值的参考资料保留在你的手边。当设计、改进或评估网站时，本书可以为你提供一些有益的建议。

你的目标用户不同，依照所从事的行业，他们可能是俱乐部的成员、大学的学生、市民或者购物者。这些用户的目的可能是多样化的，但是对我们的挑战性却相同。即创建一套互动的界面，从而使访问网站的用户得到切实的收获。

本书中描述的模式为设计者及其团队提供了一种通用的语言以清晰地描述Web设计的无限可能，我们开发这样一种语言的原因是由于看到开发人员为了解决相同的设计问题而一次又一次地花费大量的时间和精力，模式提供了这些问题的解决方案。我们综合分析了自己的咨询、研究和Web开发经验，并从中得到了最佳实践。在本书中我们为设计者提供一个工具以帮助他们能够更好地理解用户，并且设计一个用户会感到容易使用并能够找到有用信息的网站，也会帮助设计者缩短开发周期并减少维护成本。

如果没有用户，则考虑你的目标受众。本书主要关注的是设计电子商务Web网站，然而你仍然可以使用其中的主要内容设计任何Web网站。

这本书的读者是谁

这本书写给工作在网站设计和实现领域的所有人，而重点是那些网站设计专家。例如，交互模式设计师、可用性工程师、信息架构师和可视化设计师，本书也作为参考提供给Web开发团队中从商务主管、广告经理、软件开发人员到内容编辑在内的所有人员。由于一个最好的团队中的每一个人都会知道一个Web网站是如何产生的，因此这样一个团队应该理解并且掌握以用户为中心的设计思想。

Web设计专家

Web设计专家可以通过第1章和第2章理解以用户为中心的设计动机和模式，并且在Web设计中验证它们。如果读者在以用户为中心的设计的规则（第3章和第4章）和过程（第5章）方面具有很强的背景，则可以跳过这些章节而直接进入模式部分（本书的第2部分）；如果读者只有很少的经验，则无论开发何种网站，第3章~第5章中对于以用户为中心的设计和开发的描述都会提供有效的帮助。

商务主管

通过阅读第1章~第5章，商务主管可以理解以用户为中心的设计思想的商务重要性，也可以学到创建一个以用户为中心的网站所必需的规则和过程。电子商务网站开发失败的风险很大，这些章节阐述了减少风险和需求漂移，以及最小化实现及维护成本的技术。以用户为中心的设计也可以帮助缩短开发周期，并且提高用户满意度，尤其是用户的持续满意度。

商业客户

如果你是Web网站开发的投资方，请阅读前5章。由于需要投资开发，所以你会对为什么用户关注点是最迫切的需求，以及设计团队通过何种步骤确认对用户需求感兴趣。通过本书你可以了解到如何降低成本，并且让用户访问网站后更为快乐，回头客也更多。

使用这本书的好处

我们都知道提高用户的Web使用体验确实可以比阅读本书带来更多利益。对于你遇到的问题，本书中谈到的规则、过程及模式并不是万能的解决方案。然而通过把这些内容应用到Web网站设计和评估的实践中，你完全可以提升整体用户的体验，成功要求绝对满足用户的需求。从长期来看，这样做绝对物有所值。通过学习各个章节中的内容，你的工作将提高用户满意度，获得良好的Web设计方案并且不断积累设计经验。

提高用户满意度

通过在开发过程中不断关注用户以发现其需求，根据这些需求设计Web网站，并且评价设计是否可以满足这些需求。设计者应该与典型用户一起反复测试网站，从而发现严重的问题，并且在这些问题变得难以解决以前解决它们。以用户为中心的设计重点在于确认Web网站体现了正确的目标，并且正确地实现了这些目标。

获得良好的Web设计

已经有太多的图书读起来只是告诉你应该和不该如何做，但是行文却像古文一样晦涩难懂。这样的书对Web设计来说太过教条，Web设计需要一个广泛范围内的灵活性和可变性。Web已经带给用户很大的多样性体验，也同时带来了与以前相比更为广泛的用户目标和业务。然而我们知道，用户需求必须与商务目标、可用性需求、美学，以及技术影响力相平衡。

我们把注意力放在普遍规则、过程和模式上的原因在于其可以适应大多数Web网站类型，我们描述规则、过程和模式的原因在于其都是整体解决方案的一部分，模式提供建立Web网站的语言；规则和过程提供如何使用这些语言的指导。

不断积累设计实践

在最近一段时间里并不是每个人都有时间阅读一本完整的关于以用户为中心设计Web网站的书，并且把所学放到实践中验证，因此我们把这本书分为多个小的并容易消化的部分。前5章描述了以用户为中心的设计的关键思想，其余部分则讲述了能够在各种Web网站开发中实践的Web设计模式。读者可以根据需要阅读、跳过或融合书中的内容，这并不是一本要求读者必须从头到尾阅读并且必须遵循的书。

读者并不需要完全采用本书中的主张，可以选择其中的一部分来看看是否适合自己的工作。事实上，由于书中的很多思想必须需要实践才能变成经验，因此我们更希望读者一小步一小步地实践书中的思想，而不是大面积地采用。例如，可以通过使用本书中描述的设计模式来提高自己的设计实践经验。也可以只是使用在本书第1个部分中描述的技术，如观察一些使用网站的典型用户。虽然这样的观察通常不能获得足够的信息，但是仍然可以帮助了解用户在想什么，并且长期使用后可以帮助提高网站设计的效果。

本书的约定

模式名称（A2）

括号中的内容表示模式的组号及其组内的编号，A2即A模式组中的第2个模式。

HTML标记和属性会被包含在一组尖括号之间，如<meta>。

声明

书中使用了很多网站截图来表明好的和不好的设计，我们为那些好的Web设计团队和公司提供了奖赏，然而提出那些不好的设计例子并不能被视为我们在攻击设计这些网站的团队和公司。即使在Internet社会，人们仍然要努力面对技术、经济和组织方面的各种挑战，而改变总是那么缓慢。因此任何人都需要继续学习，我们仍然是在一起的。

我们很愿意听到你的意见

我们对你在自己的工作中实践标准模式的效果很感兴趣，非常愿意听到你对改进这些模式的建议，并且计划分享你和其他读者发现的新模式。

Douglas K. Van Dugne

James A. Landay

Jason I. Hong

2009年4月

在线查询网-手机版

网站交互设计模式:第2版

网站交互设计模式:第2版

图书信息

内容简介

关于作者

推荐序

译者序

前言

目录