网站交互设计模式
2009-10
电子工业
杜月 (Douglas K.Van Duyne),蓝帝 (James A.Landay),宏 (Jason L.Hong)
628
孙昕,焦洪
无
4年前，我们在本书开始写到一个人发现了一条会说话的狗的故事。当问到那条狗说了什么时，那个人回答：“谁关心这个？它是一条会说话的狗啊！”在这件事情发生几年后，即20世纪90年代早期，Web就是那条会说话的狗。其存在是那么令人着迷，商务人士发现可以通过Web来销售，而不需要支付巨大的用于平面媒体和电视广告等产品和分销的费用。Web网站几乎在一夜之间变成了商业的投机对象，与此同时这种新的媒体迎来了一个快速变革的时代。随着Web的发展，开发人员所面临的问题与其他任何行业成熟时所面临的一样。即人们越来越关心价值、便利性和易用性等因素，而不是技术本身是否新颖。由此产生了一个新的说法，即“以用户为中心的设计”来应对这种变化的尝试。 对我们这几个作者来说，以用户为中心的设计对电子商务并不是一个热门话题。8年前，当我们还分别是一个具有软件设计背景的企业家、一位加州（伯克利）大学的计算机科学教授和一位博士研究生时，我们就为开发Web这个新媒体的商务应用的人们提供了客户需求广泛性的观点。虽然这些观点最终带来了Web开发产业的繁荣和本书的诞生，我们仍然在这个领域存在很多疑问。我们研究的一部分在于分析大多数Web网站没有达到客户期望的原因，因此对两个问题很感兴趣，一是典型的设计机构如何开展自己的工作；二是为什么公司会雇用公司外的Web网站设计公司来设计Web网站，而不是自己亲自设计。 为了帮助回答这些问题，我们派了一些研究人员直接与Web设计人员及其客户沟通。我们认识到那些被公司雇用来设计网站的代理公司曾有建立知名品牌网站的成功经验。然而在那时，是通过界面的美观性，而不是通过衡量为客户带来多大的成功来区分Web设计者的水平的。但是当我们了解到绝大多数Web设计者在转行之前工作在印刷、电影或者电视等所有非交互性媒体等行业之后才不觉得奇怪，并且只有很少的工具能够用来帮助设计者理解Web用户的体验。事实上，当研究一个新的客户网站时我们能够认识到网站对生意有所影响，现在我们知道这是因为初始的设计者完全无视网站的交互性设计且秉承外观重于功能的传统观念来完成网站设计。 这个想法在我们的日常工作中变得越来越清晰，我们遇到了很多困难的网站设计问题并且解决了。我们看到很多客户虽然在设计网站时的所有要点都是正确的，但是网站设计仍然失败了。在一个这样的失败项目中我们测试了一个客户的大型电子商务网站，要求典型的网站访问者查找一种指定的产品。
本书的作者Van
Dugne、Landay和Hong认为设计模式可以应用在各个层面上，他们已经捕捉到了Web设计相关模式的宽广范围，并且写到了本书中。这些模式可以前后参照，很多模式都和其他模式结合使用。每一个模式都通过来自多种多样的知名网站的例子描述，书中清晰地描述了这些例子的基本原理、适当的应用和缺陷。由于Web设计语言仍然处于发展阶段，因此与第1版对比，本版更新了一些反映Web设计飞速化的模式。由于移动设备的迅速普及和广泛使用，作者也追加了一个独立的新章节来描述移动设计模式。对于Web设计的专业人员来说，这本独一无二、全面和经过仔细组织的书是无价的资源。`
Douglas K.van Duyne，是一位企业家和发明家，是Naviscent（一家网站研究和设计公司）和DuneDesignGroup（一家战略数字产品设计公司）的创办人和负责人之一，也是NetRaker有限公司的共同创办人和CEO。该公司是在线可用性和市场调研方面的先锋，其团队已经为包括MBNA、Yahoo、Intel、Safeway、Agilent和其他全球2000多家公司开发了多种创新产品。带着在GOCorporation和KidSoft的公司中积累的产品设计和开发方面的20多年的工作经验，他已成为在线购物、电子商务、软件与多媒体开发方面的一位改革者，并且拥有加州大学伯克利分校的计算机科学学位，目前他住在旧金山、纽约和伦敦。 James A.Landay，是华盛顿大学的一名教授，先前是英特尔公司西雅图研究中心的一位总监，主要从事新兴的ubiquitouscomputing领域的研究，他还曾是NetRaker的首席技术官和共同创办人，以及加州大学伯克利分校的副教授。他于1990年获得了伯克利分校的电子工程和计算机科学的学士学位，并且分别于1993年和1996年在卡内基梅隆大学获得硕士和博士学位。其博士论文第1个论证了用户界面设计工具的草图作用，并且已经在人机交互领域发表了大量的文章，包括用户界面设计和评估工具、网站设计、姿态识别、笔式用户界面、移动计算、ubiquitouscomputing，以及视觉语言等方面的文章。他还是许多硅谷公司的顾问，目前与其妻子Eileen、儿子Andrew和Timothy及其爱犬住在西雅图。 Jason I.Hong，是卡内基梅隆大学人机交互系的计算机科学教授，在乔治亚技术学院获得学士学位，并且在伯克利获得博士学位，其论文研究了在ubiquitouscomputing环境中的秘密。Jason曾在IBM、FuiiXeoxPaloAlto实验室和Xerox从事研究工作，在那里他研究了许多课题。例如，协作的Java应用程序、纸式用户界面和在手机中观看和导航网页的技术。他当前正在从事使用隐私和安全，以及防止诈骗和定位服务的研究。Jason喜欢从Intemet、印刷物、电视、电影及音乐媒体中获得大量的信息咨询，其主要的兴趣在世界历史、科技、科技的社会影响，以及超自然的因素，他与其妻子住在宾州。
第1部分 Web网站设计基础
第1章 以用户为中心的Web设计：不只是一个好主意
1.1 Web设计的发展史
1.1.1 第一代
1.1.2 第二代
1.1.3 第三代
1.1.4 第四代
1.2 “以用户为中心”设计的重要性
1.3 统一设计、可用性和市场的第1步
1.4 为什么倾向于以用户为中心的设计
1.4.1 以使用者为中心的设计
1.4.2 以公司为中心的设计
1.4.3 以技术为中心的设计
1.4.4 以设计者为中心的设计
1.4.5 以用户为中心的设计的优势
1.5 9种关于以用户为中心的荒谬说法
1.5.1 谬误1：好的设计很普通
1.5.2
谬误2：只有专家才能实现好的设计
1.5.3
谬误3：Web界面能够在发布前重新设计
1.5.4
谬误4：好的设计会花费太长的时间且成本太高
1.5.5
谬误5：好的设计只是一些美观的图形
1.5.6
谬误6：Web界面指南会帮助完成好的设计
1.5.7
谬误7：用户总可以依赖文档和帮助信息
1.5.8
谬误8：市场研究会揭示所有用户的需求
1.5.9
谬误9：质量保证小组会确认网站是否工作良好
1.6 实施以客户为中心的设计
1.6.1 原则
1.6.2 过程
1.6.3 模式
1.6.4 使用原则、过程和模式
1.7 小结
第2章 Web设计模式
2.1 什么是模式
2.2 一个模式的例子
2.3 如何阅读模式
2.4 随着时间的流逝，模式会如何变化
2.5 如何使用模式
2.6 一个使用模式的例子
2.7 小结
第3章 了解用户：规则和技术
3.1 了解用户的有关规则
3.1.1 自己并不是用户
3.1.2 理解组成单元，平衡影响力
3.1.3 理解用户
3.1.4 用户是不同的
3.1.5 用户又是一样的
3.1.6 理解用户的业务
3.1.7 减少工作
3.1.8 业务培训
3.1.9 帮助人们成为专家
3.1.10 理解技术
3.1.11 理解用户的社会问题
3.2 用于了解用户的技术
3.2.1 开始业务分析
3.2.2 构建应用场景
3.2.3 选择业务
3.2.4 观察用户并与其面谈
3.2.5 用户调查
3.2.6 运用焦点组
3.2.7 分析已经存在的网站
3.3 小结
第4章 与用户一起做迭代设计
4.1 迭代设计过程
4.2 采用迭代设计的原因
4.2.1
在错误还很容易修正并且开销很小时修正它们
4.2.2
构建正确的网站和正确地构建网站
4.3 有目标和原则的设计
4.3.1 设定可度量的设计目标
4.3.2 坚持设计原则
4.3.3
信息结构、导航设计和图形设计
4.4 快速原型
4.4.1 网站地图、故事板和图表
4.4.2
真实度从低到高的渐进式提炼
4.4.3 横向原型和纵向原型
4.4.4 原型的局限
4.5 评估网站
4.5.1 专家评审
4.5.2 非正式评估
4.5.3 正式可用性评估
4.5.4 选择一种评估技术
4.6 小结
第5章 开发以用户为中心网站的过程
5.1 开发过程概览
5.2 发现阶段
5.2.1 发现过程
5.2.2 发现过程的交付物
5.3 探索阶段
5.3.1 探索过程
5.3.2 探索过程的交付物
5.4 精炼阶段
5.4.1 精炼过程
5.4.2 精炼过程交付物
5.5 制作阶段
5.5.1 制作过程
5.5.2 制作阶段交付物
5.6 实现阶段
5.6.1 实现过程
5.6.2 实现阶段交付物
5.7 执行阶段
5.8 维护阶段
5.8.1 维护过程
5.8.2 维护阶段交付物
5.9 小结
第2部分 模式
模式组A 网站风格
A1 个人电子商务
A2 新闻马赛克
A3 社区会议
A4 自我服务的政府
A5 提供帮助的非营利性网站
A6 大众信息网站
A7 有价值的公司网站
A8 教育论坛
A9 有刺激性的艺术和娱乐内容
A10 Web应用程序
A11 内部网
A12 博客
模式组B 创建导航框架
B1 导航的不同方法
B2 可分类浏览的内容
B3 层次化结构
B4 基于任务的组织结构
B5 字母顺序的组织结构
B6 时间顺序的组织结构
B7 基于流行度的组织结构
B8 目录页
B9 站点可达性
模式组C 建立一个强有力的主页
C1 主页入口
C2 提前价值定位
模式组D 制作和管理内容
D1 页面模板
D2 内容模块
D3 标题和简介
D4 个性化内容
D5 留言簿
D6 制作符合搜索引擎要求的网站
D7 倒金字塔编写方式
D8 可打印的页面
D9 与众不同的HTML标题
D10 国际化和本地化内容
D11 样式表
模式组E 建立信任和信誉
E1 网站商标
E2 E-mail订阅
E3 公平信息处理条例
E4 隐私政策
E5 关于我们
E6 安全连接
E7 E-mail提示
E8 隐私偏好
E9 防止诈骗
模式组F 基本电子商务
F1 快速结账
F2 清晰的产品详细资料
F3 购物车
F4 快速选址
F5 选择快速运输方式
F6 付款方式
F7 订单概要
F8 订单确认和感谢
F9 轻松退货
模式组G 高级电子商务
G1 特色产品
G2 交叉销售和提升销售
G3 个人推荐
G4 推荐社团
G5 多重目的地
G6 礼品赠与
G7 订单跟踪和历史
模式组H 帮助用户完成任务
H1 过程漏斗
H2 登录/新用户
H3 客人账户
H4 账户管理
H5 持久的用户会话
H6 浮动窗口
H7 常见问题
H8 上下文帮助
H9 直接操作
H10 明文形式
H11 预言性的输入
H12 向下钻取选项
H13 进度条
模式组I 设计让人印象深刻的页面布局
I1 表格式布局
I2 折线之上
I3 清晰的第一印象
I4 扩大屏幕宽度
I5 固定的屏幕宽度
I6 相关内容的一致侧边栏
模式组J 加速网站并恰当地搜索
J1 搜索动作模块
J2 直接搜索形式
J3 有组织的搜索结果
模式组K 轻松导航
K1 统一的浏览层次
K2 导航栏
K3 标签行
K4 动作按钮
K5 高可见动作按钮
K6 位置面包屑
K7 嵌入式链接
K8 外部链接
K9 描述性的长链接名
K10 显著的链接
K11 熟悉的语言
K12 预防错误
K13 有意义的错误消息
K14 页面没有找到
K15 永久链接
K16 跳跃菜单
K17 网站地图
模式组L 加速网站
L1 少量的文件
L2 快速加载的图片
L3 独立的表格
L4 HTML POWER
L5 可重用的图片
L6 快速加载的内容
模式组M 移动网站
M1 手机屏幕尺寸
M2 手机输入控制
M3 定位服务
第3部分 附录
附录A 运行可行性测试
A.1 设定目标
A.2 提出任务
A.3 招募参与者
A.4 测试
A.5 分析数据
A.6 呈现结果
附录B 网站评估方案示例
B.1 角色
B.2 介绍
B.3 任务
B.4 听取报告
附录C 样品知情同意书
附录D 样品观察者表格
附录E 在线研究
E.1 开始：定义研究目标
E.2 分阶段研究
E.3 研究类型
E.4 测试
E.5 分析数据
E.6 研究方法的比较
E.7 小结
附录F 术语表
附录G 资源
第1部分 Web网站设计基础
第2部分 模式
第3部分 附录
专业组
启发式评审对于找到潜在的可用性缺陷是一种特别有效的技术，它也可以帮助识别那些在绝大多数可用性研究时被忽略的问题。例如，选择颜色的贫乏。我们还发现启发式评估在高保真度原型方法中应用比低保真度原型方法更为有效，缺乏经验的评审会造成把注意力集中在那些不重要的片面问题上，我们建议在拥有了高保真度的HTML原型之后再进行启发式评估。 对于任何启发式评估来说，请注意下列警告。即通常专家知道的太多或者不够多。他们可能比用户更精于世故，会忽略到影响真实用户的内容；另外一个方面，如果网站是提供给那些专业领域的用户的，如医生，那么评审的专家们可能没有足够的背景知识来理解网站。 更重要的是启发式评估会展现大量的误报错误，即那些只是在启发式评估中发现的错误，但是在针对同样界面的可用性研究中根本不会发现。换句话说，专家经常会发现一些在现实中根本不会遇到的问题，修正这些误报错误可能会浪费大量的关键性设计和工程资源。不过启发式评估对于发现可能存在的可用性问题来说，仍然是一种成本低并可以只花费几个小时来执行的好方法。我们建议读者查看Nielsen的网站和论文来获取实施启发式评估的详细信息，并且在非正式和正式的可用性测试场合中使用这种技术。
在我从事全球IBM市场工作的过程中，我得益于与一些最好的国际化交互性代理公司和公司内部的网站团队的合作。当我阅读本书的时候，（我发现）这本书提供了来自于积累多年的专业化建议和领悟。我从来没有看到过这样～本实用、有效和易用的书来解决和避免因特网设计问题。我把这本书留在午边，以便随时提醒我那些忘记的事情，并且疚得新的观点，它从来没有让我失望过。 ——John Cilio，IBM System x&z Storage synergy市场经理 这本书巧妙地将Christoptler Atexander首创的模式语言融合到体验设计之中，是有价值并且佥面的参考书。 ——CeogreHacknlan，IR。oracle公司，Pattems and Standards，L3ser Experlence for User Interface Guidelines高级主管 “这本书是我的可用性工具箱中最好的工具之一，这些Web界面设计模式让我向客户展示如何获得最有效的可用性方案变得更容易。” ——GLAUDIA ALDEN CASE 可用性咨询专家和交互设计师，Alden case公司 如果生物学课程能像这本书这样多好。青晰的文字、核心的内吝和全面的分类既是灵惑的来源，也是创造的工具。这确实是一本好书。如果您构建Web网站，就请阅读它。 ——Marc Cambell 《web设计库》一书的作者 停止您每一次设计Web网站的时候都重新设计的尝试吧！它可以帮助您重新从风格和模式的角度思考您的网站。一旦您明确了模式，并且像这本书中介绍的那样对这些模式进行了最佳实践，那么就至少可以减少50％的设计工作量。 ——PAWAN.R.VORA Seurat公司信息架构高级副总裁 这本书中的内蓉能够让一个新手在一个周末就变成专家。很多公司都花费了大量财富来获得这本书中主要章芍所描述的信息。 ——JOHN CILIO IBM系统与存储协同部市场经理 这本书有很多可以随时使用的检查列表，来告诉您在建立一个常规网站的时候哪些能做，哪些不能做。只要按照作者的建议去做，就可以让您的网站在可读性和可用性上名列前茅。 ——JEF RASKIN Macintosh计算机的创建者，人机界面的作者 此书的出版，让我们不用再忍受那些设计很糟糕的网页了。作者从成功的网站设计者那里收集到各种模式，当然也包括自己在咨询和教学方面的经验，我们能够看到他们所描述的这些模式。这本书是可读的，而且百大量有价值的信息，可以作为任何一个网站设计者的手册。 ——LINDA RISING 独立专家、《模式手册》《模式年鉴2000》和《通信软件中的设计模式》3本书的作者 本书为理论和实践之问建立了一座桥梁，使得从事网站设计的人们在工作中使用以用户为中心的设计准则成为可能，并且不需要经过额外的培训。 ——MAYA VENKATRAMAN Sun公司人机交互工程师 本书的题材非常优秀，它讨论了超出“设计最佳页面”以展示内容的经典话题，我没有看到任何其他书籍有与这本书相近的深度。 ——TERRY WINoGRAD 斯坦福大学计算机科学教授，《将设计带给软件》一书的作者
无
很有趣的角度，从交互设计模式讲网站设计，读了会有新收获。
总体感觉很好，物理实在3天内到付的，看了下书的印刷质量还是很不错的，数比较轻，适合携带，推荐搞产品的和搞交互设计的同学们多多看看这本书，而且也只得收藏！
网站设计必备
专业化的经典案例解析及设计原则，对网页交互设计很有帮助，厚厚的一本，超值
非常细致的讲解, 一定要细细的读!
看了下内容简介，觉得还不错，比较系统，还没到手，好想要啊···
很好的一本书，让你对交互设计有系统了解！
对于从事网页设计的人来说是一本很好的工具书
还没看呢，感觉不错，看完再追加评论吧
内容还可以。不过书的纸张不蛮好
很好的一本书，就是图片太模糊了！
需要学习的时候翻翻
正在读，纸张不是特别的好
交互设计未来发展趋势还是很不错的，东华英丞每周都有关于UI设计的公开课活动，更多ui设计的信息可以关注：http://site.douban.com/214504/
“英丞设计师之旅”创意思维拓展，成就非凡梦想！突破瓶颈，让您在职业生涯中增添色彩，现报读平面视觉课程，与名师名企接轨，开拓职场人脉。在课程中，迅速拔高创意思维，提升知识面，拓宽设计眼界。同时学会项目汇报及项目沟通的技巧。参与到与老师的一对一项目策划，完成创意方案，给自己迈向成功的第一步。加入英丞微信好友，报读即得课程优惠。
英丞商业应用交互设计周末班要开班啦