1、网站设计解构有效的交互设计框架和模式Interaction Design Frameworks that WorkWeb Anatomy人 民 邮 电 出 版 社北 京Robert Hoekman, Jr.Jared Spool著美向怡宁 译图灵交互设计丛书目 录2内 容 提 要本 书 主 要 介 绍 了 交 互 设 计 框 架 化 体 系 结 构 的 各 个 组 成 元 素，并 使 用 成 功 与 不 成 功 的 网 站 作 为 案 例，深入剖析了它们的功能以及工作原理，目的是解决 Web 项目中反复出现的三类问题：如何将高层面的程序目标转化为低层面的设计细节，如何创新，以及如何用低成本换来
2、高回报。书中案例形象生动，语言诙谐幽默，是 Web 交互设计师必备的完整指南。本书适合各层次 Web 设计人员和开发人员使用。网站设计解构：有效的交互设计框架和模式图灵交互设计丛书定价：59.00元读者服务热线：(010)51095186 印装质量热线：(010)67129223反盗版热线：(010)67171154著 美 Robert Hoekman, Jr . Jared Spool译 向怡宁责任编辑 傅志红执行编辑 李 静人民邮电出版社出版发行 北京市崇文区夕照寺街14号邮编 100061 电子函件 网址 http:/北京 印刷开本：8001000 1/16印张：12.25字数：200千
3、字 2010年 8 月第 1 版印数：1 3 500册 2010年 8 月北 京第 1 次印刷著作权合同登记号 图字：01-2009-1523号ISBN 978-7-115-23375-23Authorized translation from the English language edition, entitled Web Anatomy: Interaction Design Frameworks that Work by Robert Hoekman,Jr., Jared Spool, published by Pearson Education, Inc., publishing
4、as New Riders. Copyright 2010 by Robert Hoekman, Jr. and Jared Spool. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission
5、 from Pearson Education, Inc. Simplified Chinese-language edition copyright 2010 by Posts & Telecom Press. All rights reserved.本 书 中 文 简 体 字 版 由 Pearson Education Inc. 授 权 人 民 邮 电 出 版 社 独 家 出 版。未 经 出 版 者 书 面许可，不得以任何方式复制或抄袭本书内容。版权所有，侵权必究。版 权 声 明4目 录 5Robert Hoekman, Jr. 感谢以下人士null nullWendy Sharp，再次感
6、谢，你真是一位伟大的编辑和朋友；Jacqueline Aaron，因为你又完成了一次卓越的审稿；Kathleen Cunningham，因为你非凡的图书设计；感谢Nancy Reunzel，令人尊敬的出版人，因为，唔，你是我们尊敬的出版人；以及其他许多人，包括但不限于Glenn Bisignani、Nancy Davis、Gary Paul Prince，还有New Riders公司其他头脑冷静、处乱不惊的诸位nullnull现在我要说啦nullnull没有你们，这本书不可能完成。当然了，我还要感谢我的妻子Christine，她在我第四次叫嚷着null上帝，这本该死的书什么时候才能完成null
7、的时候，满怀鼓励地对我点头微笑。（事实证明，写作的过程并不总是充满了魅力和玫瑰。）* * * * * *Jared Spool感谢以下人士null nullUser Interface Engineering公司令人叫绝的团队（所有离去和留下的人），尤其是那些为本书引述的研究成果出过力的人。UIE的座右铭就是null通过令人震撼的体力劳动来推动知识向前发展null。收集那些人们如何使用技术的统计数据的确是一项繁重的工作。这些人包括Will Schroeder、Lori Landesman、Carolyn Snyder、T ara Scanlon、Nina Gilmore、Matthew Kle
8、e、Joshua Porter还有Christine Perfetti，正是他们（以及其他很多人）把研究变成了现实。我们在本书中看到的一切都源于这些人的努力和付出。我还要感谢Wendy Sharp以及New Riders的团队耐心地纠正书中的错误，正是他们的奉献让这本书得以成形。我还要衷心地感谢本书的合著者。Robert包揽了所有吃力不讨好的工作，是一个值得信赖的好伙伴。他在工作中永远动力十足，而且（除了有时我会让他抓狂之外）整个过程中我们得到了极大的乐趣！还要特别感谢我的孩子Ari和Reed，当我努力为他们创造一个更美好的世致 谢Acknowledgements2 致 谢界时，他们给予我大力
9、的支持和鼓舞。最后，我应该给Dana Chisnell赠送一座荣誉雕像，以纪念她在此过程中给予的支持和做出的贡献。* * * * * *我们两人要共同感谢所有的先行者们，感谢你们在提倡设计模式和组件的标准和最佳实践方面所付出的艰苦卓绝的努力。这些人包括Christian Crumlish、Luke Wroblewski、T eresa Neil、Bill Scott、Martijn van Welie、Dan Brown以及Eight Shapes公司的Nathan Curtis，还有Jenifer Tidwell，等等。没有你们的努力，互联网将变成庞大、无组织的一团乱麻。唔，真的会相当地乱。
10、目 录 1第一部分 框架体系简 介第1章 框架体系呼之欲出.21.1 可重用策略.71.1.1 模式：预期行为的锦囊.71.1.2 组件：高效利用可重用的代码.81.1.3 框架体系：最后的拼图定乾坤.91.2 超越常规.121.2.1 分解工作量.121.2.2 古老问题有新解.121.2.3 问题，答案与灵感.13第2章 可重用铁三角142.1 设计模式.162.1.1 设计模式六要素.172.1.2 模式资源库.212.2 组件.232.2.1 组件六要素.232.2.2 组件资源库.262.3 交互设计框架体系.272.3.1 交互设计框架体系包含的元素.282.3.2 框架体系的特质
11、.332.3.3 第一个框架体系资源库.362.4 自然环境下的框架.38第二部分 框架体 系第3章 目录框架.423.1 描述.43目 录Contents目 录23.2 上下文情境.433.3 任务流程.453.4 其他必备框架.453.5 相关框架.453.6 构成元素.453.6.1 分类页.453.6.2 陈列页.493.6.3 内容页.543.6.4 引导链接.583.7 设计标准.613.7.1 支持用户的探索.633.7.2 公布分类方法.69第4章 搜索框架.714.1 描述.724.2 上下文情境.734.3 任务流程.754.4 构成元素.764.4.1 快速搜索.764.
12、4.2 搜索结果.804.4.3 搜索产出.824.4.4 高级搜索.834.4.5 过滤器.864.4.6 分页.884.5 设计标准.904.5.1 提供多条通向内容的路径.904.5.2 使内容与用户的用词相关联.914.5.3 让内容便于识别.91第5章 注册框架.935.1 描述.955.2 上下文情境.955.3 任务流程.965.4 构成元素.965.4.1 价值声明.965.4.2 投入成本明细.98目 录 35.4.3 推荐语.1015.4.4 行动号召.1025.4.5 白板/即时参与.1045.4.6 注册表单.1065.5 设计标准.1085.5.1 传达明确的价值声明
13、.1085.5.2 建立起用户的预期.1095.5.3 证明应用程序运行良好.1105.5.4 鼓励操作并确保取得进展.1115.5.5 让用户和他们的操作相联系.111第6章 关于我们.1146.1 描述.1156.2 上下文情境.1156.3 任务流程.1166.4 构成元素.1176.4.1 公司背景.1176.4.2 财务状况.1186.4.3 客户名录.1216.4.4 团队介绍.1216.4.5 时事与新闻.1236.4.6 工作机会.1246.4.7 联系方式.1276.5 设计标准.1306.5.1 建立品牌信誉度.1306.5.2 打开沟通的渠道.131第7章 电影网站.13
14、47.1 描述.1367.2 上下文情境.1397.3 构成元素.1407.3.1 初始页.1407.3.2 引子/预告片.1427.3.3 演职员名单.1447.3.4 故事梗概.1457.4 设计标准.146目 录47.4.1 建立良好的声誉.1477.4.2 实现口口相传的营销.1487.4.3 让他们感兴趣.1507.4.4 融入他们的生活.151第三部分 框架体 系 的使用第8章 搭建框架体系工具.1548.1 打造你的框架.1558.1.1 标识出问题.1558.1.2 品鉴资源.1568.1.3 把它写出来.1608.1.4 分配工作量.164第9章 使用框架体系1659.1 组
15、织计划.1659.2 搭建框架.1669.2.1 在上下文中考虑上下文.1679.2.2 选用模式.1719.2.3 应用设计标准.1729.3 让框架切实可行.1739.3.1 资源库.1739.3.2 模板.175第10章 改善我们的未来.17710.1 挫折成本17910.2 资源182第一部分框架体系简介第 1 章 框架体系呼之欲出21998年，可用性专家Rolf Molich分别给9个团队3周的时间对Web邮箱进行评估。该实验是被他称为CUE（Comparative Usability Evaluations，相对可用性测试）系列实验的一部分，试图建立起一套切实可行的可用性测试标准。
16、在每一项测试中，Rolf都会请多个可用性团队对同一个设计进行自由评估。这次测试被称为CUE-2，因为它是该系列实验中的第二项测试。在各团队记录下的结果中，反映出一个令人惊诧的趋势。尽管可用性专家们在检测界面问题时宣称使用的方法非常科学，但是可用性评估本身却null并不十分科学null。1. 框架体系呼之欲出 Rolf Molich于1984年投身于可用性方面的研究，1993年在丹麦创立了可用性咨询公司DialogDesign。他同时也在Nielsen Norman Group（由Donald Norman、Jakob Nielsen和Bruce Tognazzini三位著名用户体验专家创办的可
17、用性咨询公司）的大型可用性测试项目中担任首席研究员。R olf Molich也是null启发式评估法null的发明人之一（另一位发明人是Jakob Nielsen），并著有User Friendly Computer Systems（用户友好的计算机系统）一书，英文版本名为Usable Web Design（易用网页的设计）。nullnull译者注（以下未特别说明的均为译者注） 该实验包含了7项研究案例（CUE-1至CUE-7），聘请了60多个专业可用性团队为同一个应用程序进行测试或评估。3在一次接受Christine Perfetti（她当时还在Jared的公司User Interface
18、Engineering即UIE）的采访时，Rolf谈起了自己的评估，说道：CUE-2的各团队总共提交了310个不同的可用性问题。提到次数最多的问题有7个团队提交。只有6个问题被超过半数的团队提交，而有232个问题（75%）只被提交了一次。许多标记为null严重null的问题都只有一个团队提交。即使是那些所有团队都测试过的常见任务，得到的结果也完全不同nullnull这些任务中有70%左右的发现都是唯一的。在2003年进行的CUE-4（参见http:/www.dialogdesign.dk/Summary3.htm）中，共有17个团队被聘请对进行评估，该网站有一个基于Flash的酒店客房预定系统
19、，由iHotelier开发。在这17个团队中，9个进行可用性测试，其余的8个进行专家评审。所有团队共提交了340个可用性问题。然而，这些问题中只有9个被超过半数的团队提交。而且共有205个问题（占提交结果的60%）只被发现过一次，其中又有61个被标记为null严重null或者null极为严重null的问题。思考一下。为了在评估过程中发现所有null严重null的可用性问题，Hotmail项目聘请了9个可用性团队。而在CUE-4中，为了找出所有61个严重问题，Hotel Penn则需要聘请17个可用性团队。17个啊！在被问到开发团队如何确信已经准确标识出网站中存在的问题时，Rolf总结道：很简单
20、：他们根本没法确定！那么在今后创建可用性网站的过程中，可用性测试是否仍将扮演重要角色？Rolf继续解释道： Christine Perfetti是一位颇受欢迎的讲师和技术指导，经常出席世界各地的会议并且是最受欢迎的发言人之一。她曾任UIE公司副总裁兼行政董事，后自己创办Perfetti Media。 User Interface Engineering（用户界面工程）是一家专注于网站和产品可用性方面的咨询培训公司，由资深用户体验专家Jared M. Spool（也就是本书的第二作者）于1988年创立。公司网站是http:/ 是宾夕法尼亚酒店的网站。宾夕法尼亚酒店是世界上最著名的酒店之一，总部位
21、于纽约曼哈顿核心区。 iHotelier现已更名为TravelCLICK。这家1989年创立的公司专为宾馆及酒店提供一站式电子商务解决方案，在全球140多个国家拥有15000多位客户。网址为http:/ 1 章 框架体系呼之欲出第 1 章 框架体系呼之欲出4（我们）应该主要在项目的中期阶段使用它们，以此来增进同事间的信任。然后应采取其他更合算且有效的预防措施，例如为界面进行高可用性的模块化分组，以成熟的标准和准则为基础进行评审，以及情境式调查。 我们认为Rolf的回答并不完整。首先，为了判断你是否在解决最重要的问题nullnull解决这些问题可以让我们获得最大的收益，可用性测试也许并不比一位专
22、家或者一位评估人员执行的启发式评估来得更为准确或可靠，但可用性测试可以而且确实已经为我们理解人们的网络交互行为提供了巨大的帮助，它仍然应当被视为一种必不可少的工具。其次，任何评估或观测的方法都应当被放在上下文情境中分析。null页面浏览量null和null平均页面花费时间null这两个指标都曾经被视为判断网站效率高低的衡量标准，但它们必须结合被访问页面自身的目标来考虑，否则就毫无意义。一个用户访问了一系列的页面，这种举动是因为任务流程很有效呢，还是因为他根本找不到想要的内容？用户在某个页面上花费了大量的时间，是因为他们很感兴趣呢，还是因为遇到了困难？NYT（纽约时报的网站）无疑希望读者能在网页
23、上逗留足够长的时间，阅读整篇文章或者浏览所有的标题，但Google的目标却是让用户能在搜索页面中尽快找到需要的内容，然后绝尘而去。较长的null花费时间null在NYT上可能预示着一篇高质量的文章，而在G上却可能预示着开发团队一次重大的失误。不管怎样，可用性评估无法告诉设计师怎样才能做出好的设计，它只能帮助我们发现已有设计中存在的问题。从这一点来看，下面这段Rolf的陈述颇能引起我们的共鸣：我希望有一天我们能拥有庞大的资源库，里面存放着经过现实用户的周详测试而且证明可用的通用界面模块（building block）。我还希望我们能向大家展示，由可用性专家把这些模块组装成完全成熟的网站，从而高效
24、地生产出大量具有极高可用性的网站。 情境式调查（Contextual Inquiry）是一种以用户为中心的设计方法（User -Centered Design，UCD）。它要求研究者在自然情境下旁观研究对象的实际工作，并记录下详细的信息。在该过程中，研究者应避免影响到研究对象的日常工作环境。研究者试图通过这种观察和讨论帮助他们设计出能协助、缩短甚至削减用户工作流程的产品。 启发式评估法（Heuristic Evaluation Method）的发明人正是Rolf Molich和Jakob Nielsen。它是一种null打折null的可用性观测方法，用于在计算机软件中标识用户界面设计方面的问题
25、。观测者依据已经过证实的可用性原则（启发式方法）对界面执行的交互进行评估。这种评估方式如今被广泛应用于新媒体领域，尤其适用于需要在短期内设计出用户界面，或者由于预算金额的限制无法进行其他界面测试的情况。5庞大的资源库。界面模块。周详的测试。如果你正在疑惑Rolf的故事和手中的这本书有什么关系，上面这三个词已经包含了答案。这是一本关于模块的书。这里没有原理，没有概念，没有代码，只有模块。本书的第一个目标是近距离地观摩这些界面模块nullnull认出它们，剥离它们，分析它们的功能以及工作原理。只有通过这些，身为设计师的我们才能将它们null组装成完全成熟的网站null并且创造出null极高可用性n
26、ull。但这只是第一步，我们还有其他的一些目标。准确地说，我们希望本书能够解决在每个Web项目中都反复出现的三种问题。首先，我们对一个应用程序目标的理解是高层面的，而要想把它转化为低层面的设计细节，这个过程可能会非常艰难。这就好像拿走你的魔杖，绑住一只手，然后要你把蒸汽变成石头一样。在整个过程中，弄明白从哪里开始可能是最困难的一步，而即使你认为一切都已搞定，也很难确保不会有任何遗漏。当你忙着迎合业务目标的时候，又如何能保证自己完全满足了用户的需求呢？其次是标准与创新的问题。在绝大多数情况下，标准就意味着无趣。我们也许都会同意，在设计项目中最大快人心的部分就是凭空创造出一个前人尚未想到的解决办法
27、。这种时刻非常令人兴奋nullnull心如撞鹿、肾上腺素急速上升。但是大部分项目中，这种情况非常罕见。这是因为，即使是最具创新精神的项目，能称得上null前所未见null的地方可能也只占整个项目的20%，其余都是基于标准的支撑功能。这些工作不会让我们心如撞鹿、肾上腺素急速上升nullnull它们只是null苦力活null，是每个项目都必须要做的一部分。也正因为如此，我们往往不太重视它们。比如说，此刻某个团队正在创建一个新的设计，里面包含了某些令人惊叹、前所未见的功能。但要想运用这些突破性的成果，用户需要先注册并登录。注册功能并不新颖，并不会让人激动，对开发也没有太多挑战。但是无数团队都不得不一
28、而再、再而三地设计这个功能，就好像之前从未创建过一样。这使得设计null注册null的工作非常枯燥乏味，但是忽视它却会给开发者带来很大的麻烦。因为它不是项目中最null帅null的部分，所以往往得不到重视，结果却可能给用户带来难以使用的挫折体验，甚至造成公司在收入上的损失。而另一方面，创新也可能会产生问题。如果你已经致力于可用性界面设计第 1 章 框架体系呼之欲出第 1 章 框架体系呼之欲出6一段时间了，你可能会和我们注意到同样的事情：可用性和创新常常会互斥。酷和易用有时候是一对欢喜冤家。L在它首次发布的时候就遇到了这种麻烦，其中使用了一种有争议的无限滚动设计模式。开发者的本意是，如果用户希望
29、查看更多搜索结果，这个方案将为他们省去被迫翻页、等待载入新页面的麻烦，而可以直接在单个页面中即时载入后续的搜索结果，这样当用户往下滚动页面时就能随时看到新的内容。然而，实际的结果并不如人所愿。用户们并不熟悉这一变化，因此当他们发现这个页面似乎永远也拉不到头时，很容易就会产生挫折感，而且很快就会厌恶这一创意。一句话，他们觉得它的表现不像Google。无限长的页面滚动可能确实很酷，但是它对用户来说太莫名其妙，因此完全没有达到预期的效果。（第4章详细讲述了这个故事。）每个人都渴望自己的产品能在市场上引起轰动，这需要我们创造出光芒四射的界面，但不能因此而牺牲可用性。要想做好这一点可能非常困难。当我们打
30、破陈规时，实际上是在冒险，因为很可能用户根本无法理解我们设计出的界面。框架体系为我们提供了一种方法，把无趣的支撑功能进行标准化，这样就能避免重复开发，从而有更多的时间进行真正的发明创造。最后是null低成本、高回报null的问题。W eb开发的团队越来越精简（很多团队的规模都只有10年前的一半），但公司对每个团队的期望却越来越多。与此同时，项目也变得比以往更为精密和复杂。为了节省时间和精力，开发团队必须开始考虑使用以前曾经完成过的功能。就像我们之前所说的，开发者不得不反复设计注册功能，就好像之前从未曾创建过一样。它确实被创建过（全世界的开发者都在往自己的产品里添加注册功能，估计已经不下数百万次
31、了），但尽管它就在那里，却仍然要从头再来一遍。所有这些重复创造、重复开发的工作导致效率极为低下。为了降低在这方面耗费的精力（并且给刺激、有趣的创新部分留下更充裕的时间），开发团队需要可重复利用的设计。重用是如今最应该优先考虑的事。 L本是Windows Live Personalized Experience（W indows Live个性化体验）的用户自定义门户，由微软于2005年11月发布。它是最初发布的Windows Live服务之一。但是随着微软的战略调整，L被My.L所取代，而原来的域名L则指向了搜索引擎Bing（取代了之前的Live Search）。因此，作者文中所提到的L实际上指
32、的是2009年6月首次发布的Bing。 如今的Bing图片搜索仍然采用了无限滚动的交互方式。不过所谓的null无限滚动null仍然是有限的：无论搜索到多少结果，Bing最多显示前1 000个，而且不提供翻页功能。1.1 可重用策略 71.1 可重用策略要想解决我们之前所述的所有问题，核心理念其实非常简单：W eb开发团队需要日积月累、稳步实施可重用策略。可重用策略可以划分为三种资源库：模式、组件，以及交互设计的框架体系。这些资源库能让开发团队充分利用丰富的成品资源，从而提高工作的速度和效率。我们发现，那些成功实施可重用策略的团队已经尝到了实实在在的甜头。首先，他们可以调用已经（按最基本水平）实
33、现的成品集，快速地拼凑起有效的设计雏形，从而达到让设计尽快启航的目的。这些团队完成整个设计的时间似乎也更短，而且可以周全地涵盖一切有利于提升用户体验的细节和精妙之处。其次，尽管他们在无趣的支撑功能上并未花费太多时间，其设计成果却似乎具备更高的可用性，而且在所有功能中的表现都始终如一。最后，团队进行迭代设计更为快捷，这让他们有机会在设计尚具可塑性的时候对它进行精细的调整。 在团队的可重用策略中，模式、组件和交互设计的框架体系三者扮演着不同的角色，但都举足轻重。在下一章，我们会更为详细地讨论每一种资源，不过首先请允许我在这里进行一个简要的介绍。1.1.1 模式：预期行为的锦囊设计模式是重用拼图中的
34、第一块零件，它的灵感来自于Christopher Alexander提出的建筑模式这一概念见其1977年所著的A Pattern Language: Towns, Building, Construction（建筑模式语言：城镇、建筑、构造）一书，牛津大学出版社。Alexander观察人们生活和工作的具体行为，然后创建出一系列关于楼房建筑如何支持这些行为的可重用描述。模式并不会使建筑师们落入一成不变的窠臼，相反地，它为他们提供资源以确保所有细节的正确性。 迭代设计是一种具有更高成功率和生产率的软件开发方式。在迭代式设计中，整个开发过程被分解为一系列周期短小、固定的小项目，被称为一系列的null
35、迭代null。每一次迭代都包括需求分析、设计、实践与测试。通过这种方法，开发工作可以在需求全部确定之前启动，并在一次迭代中完成系统的一部分功能或开发，然后通过客户的反馈来细化需求，并开始新一轮的迭代。 Christopher Alexander于1936年出生于奥地利维也纳。他是当代建筑大师，以其设计理论和丰富的建筑设计作品而闻名于世。Alexander认为，建筑的使用者比建筑师更清楚他们需要什么，因此创造并以实践验证了模式语言（与Sarah Ishikawa和Murray Silverstein合作）。建筑模式语言赋予所有人设计和建造的能力。1958年Alexander移居美国，目前是加州大
36、学伯克利分校的终身荣誉教授。第 1 章 框架体系呼之欲出8如今的设计模式也与之类似。比如，让我们假设一位正在订票的用户需要输入日期。有哪些支持输入日期的设计呢？一个带自动分析功能的文本框？分别表示年、月、日的三个数字下拉列表？可以直接点选日期的弹出式日历？ 针对同一种行为，不同的选择体现出了不同的设计。当开发团队指定一种最适合他们（及其用户）的设计时，就能将其定义为一个模式。日后，当团队需要响应类似的行为时，就能以相似的方式进行响应，利用之前的工作成果来满足用户已经确立的需求。图1-1为一个模式文档。图 1-1雅虎设计模式库定义的一个模式 雅虎设计模式库（Y ahoo Design Patte
37、rn Library）目前已发布了50个雅虎认为最优的设计模式，包括分页系统、导航和页面布局等。网址为http:/ 组件：高效利用可重用的代码除了模式之外，开发者们还需要一种简便的方式来重用具体的代码。我们选定了可用的设计模式以后，就需要考虑具体的实现问题了。要想让弹出式日历能顺利工作，屏幕上必须得显示日期。日历必须得响应鼠标的点击。它的外观还得与其他的界面元素保持一致。这些都是组件大显身手的地方。1.1 可重用策略 9组件会从像素级别来详细指定设计响应。它们通常以代码的形式来体现，因此组件实际上也体现了具体的交互行为。它们是具备了诸如字体、颜色和布局等样式元素的功能性设计方案，如图1-2所示
38、。图 1-2 S上某个组件的存档记录开发人员用组件来拼凑出设计的所有细节。组件构建完成以后，就变成了随时待命的现成元素，能轻易地嵌入到任何新界面中去。这使得每一个环节的开发速度都得到了提高，从早期的原型阶段到最后的部署阶段莫不如此。简而言之，组件就是将设计模式进行完整代码化、模块化后得到的可执行版本。1.1.3 框架体系：最后的拼图定乾坤交互设计的框架体系（也就是本书主题）是这个三位一体中的最新成员。如果说设计模式是某个常见问题的通用解决方案，那么交互设计的框架体系则是一 S是Sun公司的网站。Sun这个名字其实来自于Stanford University Network（斯坦福大学网络）的首
39、字母缩写。该公司推出的著名产品包括Solaris操作系统、Java平台技术及MySQL数据库系统等。Sun在行业中被认为是最具创造性的企业之一，不断尝试新的软件方式和定价模式，但在2009年，该公司以74亿美金的价格被Oracle（甲骨文）公司收购。第 1 章 框架体系呼之欲出10系列设计模式再加上其他元素和信息，用以指导完整的系统或站点上下文的设计。和人体一样，每一个Web应用都由一系列相互合作的子系统所组成。每一个子系统都包含许多独立的单元，每个单元都具有各自的功能和用途。如果对这些成功的（和不成功的）网站及应用进行详细的解剖和分析，我们不仅能够标识出那些在不同环境下满足用户需求的常用元素
40、，而且能够更加深刻地理解人类行为，从而改善这些标准，同时在不牺牲可用性的前提下将我们的设计提升到新的高度。图1-3为一个框架体系。图 1-3 一个框架体系的存档文件1.1 可重用策略 11换句话说，如果仔细观察那些已然运作良好的案例，并且分析其背后的原因，我们就能同时解决两个问题：其一是明确设计的切入点；其二是了解如何才能创建出更好、更强、更快而且和那些老牌经典一样易于使用的交互设计。比如，在第4章中我们将描述一个注册框架，包含了数个常用于鼓励用户注册的设计元素。其中每一个元素都可以被看作是一个独立的设计模式。例如null电梯陈述null（关于应用程序本身价值的一段简要声明），它可以让人们快速
41、、高效地了解这个网站或应用能提供什么。然而，尽管null电梯陈述null消除了用户脑海中的疑点，解决了问题，但它本身其实并没有多大意义。事实上它隶属于另一个更大的问题nullnull如何劝服人们在崭新的Web应用中注册。框架体系不去为null狭隘的null问题提供null狭隘的null解决方案，它处理的是较为复杂的问题。它从产品的整体背景出发，为设计确定指导方针。当一位用户到达某个新网站，犹豫是否注册的时候，注册框架为他做出清楚的介绍、解答疑问、指明起点，并提供注册的方法。没有哪一个单独的设计模式能处理所有这一切。实际上，真正解决问题的是这些元素的组合。进一步说，任何独立的设计模式都不能告诉我
42、们如何满足用户的所有需求，也不能告诉我们为什么需要首先处理这些需求。为了弥补这一点，框架体系为包含该模式的整个子系统进行了描述。一个注册子系统需要有输入用户ID和密码的模式。但它也需要有重新获得密码的模式、建立用户档案的模式、创建新ID的模式，以及修改密码的模式。开发团队通过观察其他设计并提取共性的方式来标识、记录自己的框架体系。这些元素变成了一个清单，列出了一个完整的系统所需要的一切，从而帮助团队确保拥有所有正确的模式，以便开展设计工作。框架体系是一种高度的抽象。它不涉及具体的品牌化或视觉设计需求nullnull那是组件来完成的事情。相应地，组件又以独立的设计模式为基础。确切地说，框架体系是
43、某种范围更广的结构化系统，从一开始就能帮助设计师对模式进行选择。我们相信，这种和模式、组件相配合的结构化系统，就是Rolf所说的null界面模块null。 null电梯陈述null（elevator pitch）是一个风险投资行业的术语，指的是关于产品、服务或项目的摘要性概述。原意是指在和投资家同乘电梯的时间内，创业者用极为简要的方式介绍自己的项目并争取投资。在本书第5章和第7章都有关于null电梯陈述null的进一步讨论。第 1 章 框架体系呼之欲出121.2 超越常规除了能有效地加快迭代，产生易用的设计之外，框架体系还能帮助我们更深刻地理解现有标准背后的逻辑依据。通过这种null解剖镜nu
44、ll，设计师可以反向追溯影响当今各种设计决定的最初逻辑原理，然后将自己的理解转化为准则，应用到更加新颖的设计上。我们将在第2章更为深入地讨论框架体系的这一方面内容。1.2.1 分解工作量需要提到的是，重用带来的好处并不是无偿的。识别可重用的元素需要花费时间和精力，为它们备案、存档也颇为耗时，而且保持资源库的更新也是一项长期而且劳心费力的任务。但如果把它们分为模式、组件和框架体系三位一体的形式，事情就好办多了。因为这样一来，我们就能让设计师和开发人员对工作进行分配。组件更接近于最后的实现工作，因此我们通常能让开发人员来管理这个库。而交互式设计框架体系则重点关注用户体验，因此更适合让设计人员来负责
45、。模式库则介于设计和开发两者之间。小型的公司也许无需耗费大量精力来保持资源库的更新，但是规模较大的企业则需要付出更大的努力。管理者需要鼓励团队成员为资源库标识新的元素（或者直接新增元素），同时还要确保已录入的元素能与时俱进。由于资源库是一种共享的资源，整个团队也应当分担监管的义务。这种劳动分工能够避免让某人独自身负重担，同时也有利于让资源库在团队成员的工作中随时保持活跃，提醒他们可以利用其中的资源。构建完成以后，这些资源库就能为设计团队提供强有力的援助。它们能为整个设计流程注入活力，加快产品交付的过程，同时为优秀的设计扫清障碍。长期实施可重用策略节省下来的费用无疑要高于最初的开发投入。以上三种
46、资源库聚集到一起，就组成了我们所谓的可重用铁三角（The Reuse Trinity）。我们会在下一章深入描述这三种资源，并详察三者之间的关系。在此之后，我们会对数个常用框架进行挖掘，以弄清它们的来龙去脉。1.2.2 古老问题有新解通过把Web视作多个结构化系统，并标识其中与你自己的项目相关的结构1.2 超越常规 13化系统，不仅便于你快速开展设计工作，还有助于积累经验，设计出业界前沿的解决方案：适合用户使用，以低投入实现高产出，缩短项目周期，而且从一开始就确保设计的可用性。通过框架体系，我们能清楚地看到基于当今标准的设计方针。我们同时也会看到组合更佳用户体验的可能性。但这里却没有什么包治百病
47、的良方。换句话说，交互设计的框架体系并不深奥。它们只是系统框架而已，是服务于系统及其上下文背景的设计指南，可以无缝地构成完整的解决方案。它们可以（而且应该）进行调整，赋予独特的风格，也能被定制。它们就是一个易用设计的构成模块。而更好的是，它们可以告诉我们如何演变和进化。1.2.3 问题，答案与灵感当我们致力于编写本书时，Robert曾在数次讲座和会议中谈到过交互设计的框架体系，会议期间Robert记录了许多听众和与会者提出的问题。我们据此对本书的内容和结构不断地进行修改，以期涵盖并解决这些问题。我们发现，仅仅写一本有关框架体系的参考工具书是远远不够的，更为重要的是能清楚地解释它们为什么能产生如
48、此重大的影响、它们的组成及其原因，在自己的设计项目中使用框架时需要考虑哪些问题、如何标识和共享框架如何备案和记录框架，如何使框架融入设计过程，以及如何能充分利用它们的潜能，从而达到启发创新的目的。因此，在本书的一开始，我们会近距离地观察各种模式、组件和框架体系，了解它们如何相互协作以形成一个完整的可重用策略。随后我们将察看若干重要的框架体系，揭示它们的历史和效能，讲解如何使用这种崭新的方式来剖析网页，并且深入理解这些框架能够成为标准的原因，以及从中学到的知识和经验。在此之后，我们会演示如何利用框架体系来完成一个项目，同时强调你能进行的调整，以便充分利用这些新的资源。最后，我们会说明在你自己的公司或组织中，应当如何标识并开始使用框架体系。我们衷心希望，你在读完本书之后能受到鼓舞和激励，从而着手构建一个庞大的、属于你自己的、经过周详测试的界面模块资源库。第 2 章 可重用铁三角14在本章中，我们将深入探究可重用策略中的三个组成部分，以便在后续的内容中你能更好地理解设计模式、组件和交互设计框架体系三者之间是如何相互关联、相互协作的。可重用铁三角的诞生并非轻而易举，产生的顺序也绝非符合逻辑。模式的概念最初始于Christopher Alexander于1977年写的书，其后又被Luke Wroblewski、Bill Scott、
