网站交互设计模式

来源: | 发布时间:2021-03-19 07:27


编辑推荐

《网站交互设计模式》由电子工业出版社出版。

媒体推荐

在我从事全球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 斯坦福大学计算机科学教授,《将设计带给软件》一书的作者

作者简介

作者:(美国)杜月(Douglas K.Van Duyne) (美国)蓝帝(James A.Landay) (美国)宏(Jason L.Hong) 译者:孙昕 焦洪

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设计:不只是一个好主意 2
1.1 Web设计的发展史 2
1.1.1 第一代 2
1.1.2 第二代 3
1.1.3 第三代 3
1.1.4 第四代 4
1.2 “以用户为中心”设计的重要性 4
1.3 统一设计、可用性和市场的第1步 5
1.4 为什么倾向于以用户为中心的设计 6
1.4.1 以使用者为中心的设计 6
1.4.2 以公司为中心的设计 7
1.4.3 以技术为中心的设计 7
1.4.4 以设计者为中心的设计 7
1.4.5 以用户为中心的设计的优势 7
1.5 9种关于以用户为中心的荒谬说法 8
1.5.1 谬误1:好的设计很普通 8
1.5.2 谬误2:只有专家才能实现好的设计 8
1.5.3 谬误3:Web界面能够在发布前重新设计 9
1.5.4 谬误4:好的设计会花费太长的时间且成本太高 9
1.5.5 谬误5:好的设计只是一些美观的图形 9
1.5.6 谬误6:Web界面指南会帮助完成好的设计 9
1.5.7 谬误7:用户总可以依赖文档和帮助信息 9
1.5.8 谬误8:市场研究会揭示所有用户的需求 10
1.5.9 谬误9:质量保证小组会确认网站是否工作良好 10
1.6 实施以客户为中心的设计 10
1.6.1 原则 10
1.6.2 过程 10
1.6.3 模式 11
1.6.4 使用原则、过程和模式 11
1.7 小结 11第2章 Web设计模式 12
2.1 什么是模式 12
2.2 一个模式的例子 13
2.3 如何阅读模式 15
2.4 随着时间的流逝,模式会如何变化 16
2.5 如何使用模式 23
2.6 一个使用模式的例子 24
2.7 小结 26

第3章 了解用户:规则和技术 27
3.1 了解用户的有关规则 28
3.1.1 自己并不是用户 28
3.1.2 理解组成单元,平衡影响力 28
3.1.3 理解用户 29
3.1.4 用户是不同的 29
3.1.5 用户又是一样的 29
3.1.6 理解用户的业务 31
3.1.7 减少工作 32
3.1.8 业务培训 32
3.1.9 帮助人们成为专家 33
3.1.10 理解技术 33
3.1.11 理解用户的社会问题 34
3.2 用于了解用户的技术 35
3.2.1 开始业务分析 35
3.2.2 构建应用场景 36
3.2.3 选择业务 38
3.2.4 观察用户并与其面谈 39
3.2.5 用户调查 43
3.2.6 运用焦点组 44
3.2.7 分析已经存在的网站 45
3.3 小结 45

第4章 与用户一起做迭代设计 46
4.1 迭代设计过程 46
4.2 采用迭代设计的原因 47
4.2.1 在错误还很容易修正并且开销很小时修正它们 48
4.2.2 构建正确的网站和正确地构建网站 48
4.3 有目标和原则的设计 49
4.3.1 设定可度量的设计目标 49
4.3.2 坚持设计原则 51
4.3.3 信息结构、导航设计和图形设计 52
4.4 快速原型 53
4.4.1 网站地图、故事板和图表 53
4.4.2 真实度从低到高的渐进式提炼 56
4.4.3 横向原型和纵向原型 60
4.4.4 原型的局限 61
4.5 评估网站 61
4.5.1 专家评审 61
4.5.2 非正式评估 62
4.5.3 正式可用性评估 63
4.5.4 选择一种评估技术 63
4.6 小结 64

第5章 开发以用户为中心网站的过程 65
5.1 开发过程概览 66
5.2 发现阶段 67
5.2.1 发现过程 67
5.2.2 发现过程的交付物 69
5.3 探索阶段 71
5.3.1 探索过程 71
5.3.2 探索过程的交付物 71
5.4 精炼阶段 71
5.4.1 精炼过程 71
5.4.2 精炼过程交付物 72
5.5 制作阶段 72
5.5.1 制作过程 73
5.5.2 制作阶段交付物 73
5.6 实现阶段 74
5.6.1 实现过程 74
5.6.2 实现阶段交付物 75
5.7 执行阶段 75
5.8 维护阶段 76
5.8.1 维护过程 76
5.8.2 维护阶段交付物 77
5.9 小结 77

第2部分 模式
模式组A 网站风格 79
A1 个人电子商务 80
A2 新闻马赛克 85
A3 社区会议 90
A4 自我服务的政府 97
A5 提供帮助的非营利性网站 100
A6 大众信息网站 105
A7 有价值的公司网站 109
A8 教育论坛 114
A9 有刺激性的艺术和娱乐内容 119
A10 Web应用程序 123
A11 内部网 128
A12 博客 131

模式组B 创建导航框架 141
B1 导航的不同方法 142
B2 可分类浏览的内容 145
B3 层次化结构 148
B4 基于任务的组织结构 151
B5 字母顺序的组织结构 155
B6 时间顺序的组织结构 156
B7 基于流行度的组织结构 158
B8 目录页 161
B9 站点可达性 164

模式组C 建立一个强有力的主页 174
C1 主页入口 174
C2 提前价值定位 180

模式组D 制作和管理内容 184
D1 页面模板 185
D2 内容模块 190
D3 标题和简介 194
D4 个性化内容 198
D5 留言簿 205
D6 制作符合搜索引擎要求的网站 213
D7 倒金字塔编写方式 219
D8 可打印的页面 224
D9 与众不同的HTML标题 226
D10 国际化和本地化内容 231
D11 样式表 235

模式组E 建立信任和信誉 240
E1 网站商标 241
E2 E-mail订阅 245
E3 公平信息处理条例 249
E4 隐私政策 253
E5 关于我们 257
E6 安全连接 262
E7 E-mail提示 265
E8 隐私偏好 270
E9 防止诈骗 275

模式组F 基本电子商务 284
F1 快速结账 285
F2 清晰的产品详细资料 290
F3 购物车 297
F4 快速选址 303
F5 选择快速运输方式 307
F6 付款方式 311
F7 订单概要 315
F8 订单确认和感谢 319
F9 轻松退货 322

模式组G 高级电子商务 326
G1 特色产品 326
G2 交叉销售和提升销售 332
G3 个人推荐 337
G4 推荐社团 342
G5 多重目的地 348
G6 礼品赠与 351
G7 订单跟踪和历史 355

模式组H 帮助用户完成任务 361
H1 过程漏斗 362
H2 登录/新用户 365
H3 客人账户 370
H4 账户管理 373
H5 持久的用户会话 377
H6 浮动窗口 381
H7 常见问题 384
H8 上下文帮助 388
H9 直接操作 391
H10 明文形式 397
H11 预言性的输入 403
H12 向下钻取选项 406
H13 进度条 411

模式组I 设计让人印象深刻的页面布局 417
I1 表格式布局 417
I2 折线之上 420
I3 清晰的第一印象 423
I4 扩大屏幕宽度 426
I5 固定的屏幕宽度 430
I6 相关内容的一致侧边栏 434

模式组J 加速网站并恰当地搜索 438
J1 搜索动作模块 438
J2 直接搜索形式 441
J3 有组织的搜索结果 443

模式组K 轻松导航 448
K1 统一的浏览层次 449
K2 导航栏 451
K3 标签行 454
K4 动作按钮 457
K5 高可见动作按钮 459
K6 位置面包屑 461
K7 嵌入式链接 463
K8 外部链接 465
K9 描述性的长链接名 468
K10 显著的链接 471
K11 熟悉的语言 474
K12 预防错误 476
K13 有意义的错误消息 479
K14 页面没有找到 481
K15 永久链接 483
K16 跳跃菜单 489
K17 网站地图 495

模式组L 加速网站 500
L1 少量的文件 501
L2 快速加载的图片 503
L3 独立的表格 508
L4 HTML POWER 510
L5 可重用的图片 513
L6 快速加载的内容 515

模式组M 移动网站 523
M1 手机屏幕尺寸 523
M2 手机输入控制 530
M3 定位服务 535

第3部分 附录
附录A 运行可行性测试 543
A.1 设定目标 543
A.2 提出任务 544
A.3 招募参与者 545
A.4 测试 547
A.5 分析数据 551
A.6 呈现结果 552
附录B 网站评估方案示例 554
B.1 角色 554
B.2 介绍 554
B.3 任务 555
B.4 听取报告 555
附录C 样品知情同意书 556
附录D 样品观察者表格 558
附录E 在线研究 559
E.1 开始:定义研究目标 561
E.2 分阶段研究 561
E.3 研究类型 562
E.4 测试 564
E.5 分析数据 567
E.6 研究方法的比较 568
E.7 小结 570
附录F 术语表 571
附录G 资源 594
第1部分 Web网站设计基础 594
第2部分 模式 600
第3部分 附录 626
专业组 628

序言

4年前,我们在本书开始写到一个人发现了一条会说话的狗的故事。当问到那条狗说了什么时,那个人回答:“谁关心这个?它是一条会说话的狗啊!”在这件事情发生几年后,即20世纪90年代早期,Web就是那条会说话的狗。其存在是那么令人着迷,商务人士发现可以通过Web来销售,而不需要支付巨大的用于平面媒体和电视广告等产品和分销的费用。Web网站几乎在一夜之间变成了商业的投机对象,与此同时这种新的媒体迎来了一个快速变革的时代。随着Web的发展,开发人员所面临的问题与其他任何行业成熟时所面临的一样。即人们越来越关心价值、便利性和易用性等因素,而不是技术本身是否新颖。由此产生了一个新的说法,即“以用户为中心的设计”来应对这种变化的尝试。
对我们这几个作者来说,以用户为中心的设计对电子商务并不是一个热门话题。8年前,当我们还分别是一个具有软件设计背景的企业家、一位加州(伯克利)大学的计算机科学教授和一位博士研究生时,我们就为开发Web这个新媒体的商务应用的人们提供了客户需求广泛性的观点。虽然这些观点最终带来了Web开发产业的繁荣和本书的诞生,我们仍然在这个领域存在很多疑问。我们研究的一部分在于分析大多数Web网站没有达到客户期望的原因,因此对两个问题很感兴趣,一是典型的设计机构如何开展自己的工作;二是为什么公司会雇用公司外的Web网站设计公司来设计Web网站,而不是自己亲自设计。
为了帮助回答这些问题,我们派了一些研究人员直接与Web设计人员及其客户沟通。我们认识到那些被公司雇用来设计网站的代理公司曾有建立知名品牌网站的成功经验。然而在那时,是通过界面的美观性,而不是通过衡量为客户带来多大的成功来区分Web设计者的水平的。但是当我们了解到绝大多数Web设计者在转行之前工作在印刷、电影或者电视等所有非交互性媒体等行业之后才不觉得奇怪,并且只有很少的工具能够用来帮助设计者理解Web用户的体验。事实上,当研究一个新的客户网站时我们能够认识到网站对生意有所影响,现在我们知道这是因为初始的设计者完全无视网站的交互性设计且秉承外观重于功能的传统观念来完成网站设计。
这个想法在我们的日常工作中变得越来越清晰,我们遇到了很多困难的网站设计问题并且解决了。我们看到很多客户虽然在设计网站时的所有要点都是正确的,但是网站设计仍然失败了。在一个这样的失败项目中我们测试了一个客户的大型电子商务网站,要求典型的网站访问者查找一种指定的产品。

文摘

插图:


启发式评审对于找到潜在的可用性缺陷是一种特别有效的技术,它也可以帮助识别那些在绝大多数可用性研究时被忽略的问题。例如,选择颜色的贫乏。我们还发现启发式评估在高保真度原型方法中应用比低保真度原型方法更为有效,缺乏经验的评审会造成把注意力集中在那些不重要的片面问题上,我们建议在拥有了高保真度的HTML原型之后再进行启发式评估。
对于任何启发式评估来说,请注意下列警告。即通常专家知道的太多或者不够多。他们可能比用户更精于世故,会忽略到影响真实用户的内容;另外一个方面,如果网站是提供给那些专业领域的用户的,如医生,那么评审的专家们可能没有足够的背景知识来理解网站。
更重要的是启发式评估会展现大量的误报错误,即那些只是在启发式评估中发现的错误,但是在针对同样界面的可用性研究中根本不会发现。换句话说,专家经常会发现一些在现实中根本不会遇到的问题,修正这些误报错误可能会浪费大量的关键性设计和工程资源。不过启发式评估对于发现可能存在的可用性问题来说,仍然是一种成本低并可以只花费几个小时来执行的好方法。我们建议读者查看Nielsen的网站和论文来获取实施启发式评估的详细信息,并且在非正式和正式的可用性测试场合中使用这种技术。



本文永久链接:http://www.25308.cn/d/detail/15526495.html

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;
2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;
3.作者投稿可能会经我们编辑修改或补充。