经典畅销书全新升级,10余年长销不衰,被翻译为近10种文字在全球范围内出版,被誉为网站设计领域的典范之作。书中系统讲解了网站设计与规划的流程、步骤、方法、技巧、普适性原则,以及应该避免的错误,为建设**的网站提供了大量*佳实践。
全书一共12章:第1章介绍了网站设计的步骤,旨在让读者对网站设计有宏观的认识;第2章讲解了网站设计中通用的可用性设计原则和方法;第3章则从信息架构的角度科学地阐述了网站内容的规划方法;第4章详细讲解了各种类型的网站的界面设计;第5章介绍了网站的整体架构思路和方法;第6~8章分别讲解了网站的页面结构、页面设计和版式设计等细节问题;第9章讲解了网站的编辑风格以及在线样式的设计;第10~12章介绍了如何在网站设计中巧妙地使用表格、图形和多媒体等元素,从而使网站更有吸引力。

【序言】
很久以前,有一头名叫威伯的猪。什么?你是希望看到有关设计的方��或者是网络方面的介绍,还是更喜欢通过比喻这样一种修辞,一种形象却真实的方式来指明与William Strunk和E. B. White所撰写的《The Elements of Style》之间的渊源呢?
真的,本书包含了样式。它涵盖了从CSS和排版到HTML以及散文结构在内的所有元素。但是,如果我们将视野过窄地锁定在连词和逗号上,我们或许会看不到构图本身。
所以还是让我们再回头来看看这个成为了“某头猪”的小矮个儿,这可都归因于《Charlotte抯 Web》(夏洛特的网)里面的描写。威伯和他的蜘蛛伙伴夏洛特,感动了所有的读者,无论老少年幼,让我们从中明白了忠诚和友谊。
本书以类似的方式,向看似不同的读者传递价值和意义,从那些可能会成为网站管理员的神童到头发斑白、经验丰富且一直在从事信息组织的信息架构师。
对初学者而言,本书用简洁易懂的语言讲述了界面设计、信息架构以及可用性方面的基础知识。你会发现它是一本*清晰、*实用的有关网站设计的指南。
专家们将对本书有不同的见解。在这样一个专业化的时代,我们往往会陷入千篇一律之中。本书再次邀请我们从全局出发,从相关学科和实践社区中学习*新的技巧。
但是,本书并非仅是一本手册。它不仅讲述了我们要做什么,而且说明了其中的原因。Patrick Lynch和Sarah Horton鼓励我们努力争取通用可用性。由于并非每个人都可以欣赏到漂亮的图像和印刷品的版式,因此两位作者将在线免费共享本书的英文版,他们真正地践行了这一承诺。
别忘了,去关注一下那些位于设计核心地带的人们。我们在帮助别人的同时也会提升自己。正如夏洛特在她的故事结尾向威伯解释的那样:“我是因为喜欢你才为你织网的。”这不也是我们所要说的吗?
—Peter Morville
信息架构协会(Information Architecture Institute)
联合创始人兼前总裁 【第3版序言】
我们取得了很大的进展—本书和万维网。本书的*初版本是一个在1993年发布的名为Yale c/aim Web Style Guide的网站。那时,除计算和学术界之外的世界也开始普遍意识到这一新的媒介和互联网。早期的网站严重缺乏美感,不过潜力巨大。本书以数十年积累的印刷、超媒体以及多媒体设计和著作方面的经验为基础,为人们提供了结构和设计方面急需的指导。
1997年,我们对本书进行了更新,以反映日渐成熟的设计趋势和Web技术的变化。小说在网页中开辟了新天地,这好比大海中升起的新大陆,等待着***和建设者的到来。来自艺术界、出版界以及计算学科的人们大量涌入,为Web增色不少,在他们引入数个世纪积累的媒体及设计文化财富的同时,各种可能存在的界限也浮出了水面。Web发生了改变以适应这些新的定居者,他们对Web环境能够实现的效果的期望往往超过了Web自身的能力。这个时期是视觉设计和界面精致方面取得巨大进展的一个时期,不过是以标准化和可访问性为代价的。
1999年,我们有了本书的**个印刷版本。随着越来越多的组织开始选择网页作为他们的主要沟通方式,“Web Style Guide”网站赢得了众多的追随者。那些对设计知之甚少甚至一无所知的人们开始承担起了网站开发的义务,他们希望从本书中寻求平和、可靠和实用的指导。对很多人来说,言简意赅的本书非常受欢迎,它将人们从那些摆放在书店书架上那些难懂、亢奋、冗长的关于网页设计系列的书中解脱了出来。
自从1993年以一个网站发迹到它的第3版以来,本书提出了基于经典设计原则的可靠设计建议,在尽量避免让媒体酷炫的功能压倒“崇尚良好感觉、以信息为目标的”审美的同时,它也认可了当前Web技术的可能性和限制。由于HTML和CSS方面取得的大量进步,以及构建网站的“Web标准”哲学的出现,本书第3版并没有包含关于跨平台方面的内容以及关于制作残障人可访问网站的特殊技巧。基于现有的Web技术,我们*终得以集中精力于制作好的设计和内容,我们知道,我们手头有能够将Web制作为更友好、更**以及更富有成效的阅读和工作场所的工具。
在本书第3版中,在万维网的第19个年头里,我们为我们所取得的进步以及我们在提升Web的可访问性以及适用性方面能够实现的程度感到欣喜。
除了所有那些为本书前两版做出过贡献的人以及我们在之前的序言中感谢的人,我们还要感谢Jean Thomson Black、Laura Jones Dooley、Matthew Laird、Christina Coffin、James Johnson以及耶鲁大学出版社的Aldo Cupo为本书付出的辛勤劳动。我们尤其感谢Peter Morville所写的序言。
我还要衷心感谢我的朋友们以及我在耶鲁大学的同事们在这些年间所给予我的支持—如果没有他们,我无法实现这一切:David Bolinsky、Roger Despres、Frank Gallo、Carmine Granucci、Sean Jackson、Carl Jaffe、Janet Jeddry、Chris Kielt、Jane Livingston、Philip Long、Andy Newman、Kimberly Pasko、John Paton、Noble Proctor、Stacy Ruwe、Phillip Simon、Virginia Simon以及Victor Velt。我要特别感谢Carl Jaffe二十多年间慷慨的友谊以及明智的忠告。Carl的很多智慧以及见地都在本书中有所体现。此外,我还要感谢本书的另一位作者Sarah Horton,同时也是我亲爱的朋友,感谢她为本书持久的付出,以及她在普及Web的适用方面所做的努力。
如果没有家人,所有这一切将毫无意义。我要感谢我所认识的*明智的女性Susan Grajek,感谢她坚贞不渝的爱、支持以及慷慨的鼓舞。因为有了他们的爱、支持以及大量的建议,这些人对网络所知道的东西远远要超过了我:Devorah Lynch、Alex Wack以及Tyler Wack。
—Patrick J.Lynch
首先也是*重要的,我要感谢我的合作作者,Patrick Lynch。我感激Pat在我整个职业生涯中所给予我无穷尽的支持以及对我的信任。他是一位让人吃惊的导师,一位鼓舞人心的艺术家,同时也是*好的朋友。如果Pat以及其他那些当时就职于耶鲁大学的先进教学媒体**的伟大、才华横溢的人(尤其是Carl Jaffe和Phillip Simon)不接受我,我可能就走不到今天。
达特茅斯学院为我提供了环境以及鼓励,以实践以及改善本书中的方法和技巧。我非常感谢我的朋友、学院以及导师给予我的支持和启发:Rick Adams、Malcolm Brown、Dave Bucciero、Sheila Culbert、Joe Doucet、Alan German、Karen Gocsik、Martin Grant、Tim Hozier、Brian Hughes、Ellen Kanner、Barbara Knauff、Joe Mehling、Rita Murdoch、Mike Murray、Mark O’Neil、Marie Stebbins、Ellen Waite-Franzen以及Susan Warner。
*后,我要把我*真挚的感谢送给两个小伙子:Malcolm,感谢他一直以来让家中温情四溢;Nico,感谢他为温暖的亲情锦上添花。
—Sarah Horton
【书摘】
第1章
步骤
商业Web先驱们花了很长的时间才明白“如果你建成它,就会有人来”只是一个空洞的笑话:你必须得好好地创建它,投入想法、激情和创造力,否则要想吸引人气的话,还必须重新审慎地对待它并且重建之。
—斯科特罗森伯格(Scott Rosenberg),Salon.com
网站设计的**步就是确定目标。如果没有清晰的任务和目标,项目就会偏离初衷、陷入困境或者过犹不及。细致的计划以及明晰的目标都是成功创建网站(尤其是在你身为开发团队一员时)的关键之举。
规划网站分两步:首先,召集开发团队,分析需求和目标,然后列出开发过程纲要以提炼出计划;其次,创建项目章程,明确阐述要怎么做、为什么要这么做,需要哪些技术及内容,项目执行的时间长度,要在它上面花费哪些成本,以及如何达成想要的结果。项目章程是创建成功网站的重中之重:它不但是项目的蓝图,还是用于检验项目是否一直遵循既定目标和交付结果的标准。

译者序
序言
第3版序言
第1章 步骤 ·1
1.1 网站开发团队 1
1.2 初始规划 8
1.3 网站和文档的类型 11
1.3.1 静态与动态网页 11
1.3.2 Web内容管理 12
1.3.3 Web工具的演化 15
1.3.4 平衡基于Web的服务 17
1.4 网站开发过程 18
1.4.1 网站定义和规划 18
1.4.2 信息架构 22
1.4.3 网站设计 22
1.4.4 网站建设 24
1.4.5 网站营销 26
1.4.6 跟踪、评估和维护 27
1.5 制订项目章程 29
1.6 运行Web项目的常用设备 34
第2章 通用可用性 36
2.1 通用可用性的基础知识 36
2.1.1 可访问性 36
2.1.2 可用性及以用户为**的设计 37
2.1.3 通用设计 37
2.2 通用可用性指南 37
2.2.1 超越“典型”用户 38
2.2.2 支持适应性 38
2.3 设计进程中的通用可用性 41
2.3.1 用户调研 44
2.3.2 设计和评估 46
第3章 信息架构 50
3.1 组织信息 50
3.1.1 内容目录 51
3.1.2 分块信息 54
3.2 网站结构 55
3.2.1 网站的浏览功能 55
3.2.2 使用网站搜索来导航 56
3.2.3 网站结构主题 57
3.3 展示信息架构 61
3.3.1 网站图表 61
3.3.2 线框图 63
第4章 界面设计 68
4.1 导航和路径搜索 68
4.1.1 路径:带路 70
4.1.2 区域与边界:矛盾的一致性 70
4.1.3 节点:本地咖啡馆还是泰晤士广场 70
4.1.4 **:“你在这里” 71
4.1.5 小结:网站中的路径搜索原则 71
4.1.6 浏览与搜索 71
4.1.7 定位 72
4.1.8 支持Web搜索用户 72
4.2 界面设计 74
4.2.1 清晰的导航帮助 75
4.2.2 没有尽头的页面 75
4.2.3 直接访问 76
4.2.4 单一性及一致性 76
4.2.5 设计完整性和稳定性 78
4.2.6 反馈及对话 79
4.2.7 宽带与交互 79
4.2.8 界面设计惯例 80
4.3 信息设计 82
4.3.1 独立页面 83
4.3.2 总结:信息设计指南 84
4.4 企业界面 85
第5章 网站结构 87
5.1 语义内容标注 87
5.1.1 HTML文档结构 88
5.1.2 注意浏览器的不同 91
5.1.3 关于语义标注的小结 91
5.2 网站文件结构 91
5.2.1 隐蔽的网站语义 92
5.2.2 命名惯例 92
5.2.3 **可维护的结构 94
5.2.4 HTML内容窗口的语义结构 97
5.3 搜索引擎优化 98
5.3.1 Web搜索的长尾 99
5.3.2 基本的搜索引擎原则 99
5.3.3 针对搜索优化页面 102
第6章 页面结构 108
6.1 结合环境进行网站设计 108
6.1.1 万维网 109
6.1.2 企业Web标识 109
6.2 页面结构和网站设计 109
6.2.1 页眉 109
6.2.2 浏览栏 112
6.2.3 内容区域 113
6.3 页面模板 115
6.3.1 内部页面模板 115
6.3.2 次页模板 116
6.3.3 主页 117
第7章 页面设计 124
7.1 文档设计 124
7.1.1 适应性设计 125
7.1.2 文档顺序 126
7.1.3 选择性显示 127
7.1.4 文本替代物 128
7.1.5 了解媒介 128
7.2 视觉设计 129
7.2.1 一致性 132
7.2.2 对比 132
7.2.3 空白区域 135
7.2.4 样式 136
7.2.5 简单 136
7.2.6 视觉设计的Gestalt原则 137
7.3 页面框架 137
7.3.1 固定页面宽度 138
7.3.2 灵活页面宽度 139
7.4 页面宽度和行长 140
7.4.1 页面长度 141
7.4.2 页眉和页脚 143
7.4.3 网页的垂直分层 144
7.5 网页的设计网格 146
第8章 版式 150
8.1 Web字体特色 150
8.1.1 动态构建 151
8.1.2 内容结构及视觉逻辑 151
8.1.3 层叠样式表 151
8.1.4 一致性 154
8.2 易读性 155
8.2.1 对齐与空白 155
8.2.2 对齐选项 156
8.2.3 行长 157
8.2.4 字体颜色 158
8.3 字体 159
8.3.1 选择字体 160
8.3.2 字号 162
8.4 强调 164
8.5 图文效果 167
第9章 编辑风格 169
9.1 构建散文 169
9.1.1 网站结构 170
9.1.2 页面结构 170
9.2 在线样式 173
9.2.1 对比和强调 173
9.2.2 散文风格 174
9.2.3 其他风格 174
9.2.4 关键字 175
9.2.5 标题和子标题 177
9.2.6 页面标题 177
9.3 Web文档的文本格式 178
9.4 链接 179
9.4.1 说明性链接 180
9.4.2 链接下划线 180
9.4.3 已访问和未访问的链接 180
第10章 表格及应用 182
10.1 交互支持技术 182
10.1.1 Ajax 184
10.1.2 可访问性 185
10.2 设计Web应用程序 185
10.2.1 约束与简明 185
10.2.2 设计模式 186
10.2.3 控件 186
10.2.4 交互引导 188
10.2.5 响应错误 191
10.3 设计进程 194
10.3.1 线框图 194
10.3.2 原型 194
第11章 图形 196
11.1 网络图形的角色 196
11.2 充当内容的图形 197
11.2.1 插画 198
11.2.2 解释概念以及清晰显示数据 198
11.2.3 综合的视觉展示 198
11.2.4 网络中的图形交流 200
11.3 Web图形的特点 200
11.3.1 彩色显示 200
11.3.2 屏幕分辨率 201
11.3.3 伽玛值 201
11.3.4 图形和带宽 202
11.4 图形文件格式 202
11.4.1 GIF图形 203
11.4.2 GIF文件压缩 203
11.4.3 抖动 203
11.4.4 改善GIF压缩 204
11.4.5 隔行显示的GIF 204
11.4.6 透明的GIF 205
11.4.7 JPEG图形 205
11.4.8 PNG图形 207
11.5 成像策略 207
11.5.1 界面元素 207
11.5.2 将照片另存为GIF格式 207
11.5.3 将照片另存为JPEG格式 208
11.5.4 将示意图和插画另存为矢量图形 208
11.5.5 对Web网站的图形归档 209
11.5.6 总结:文件格式 209
11.6 屏幕上的图像 210
11.6.1 屏幕显示与打印彩色艺术作品的对比 210
11.6.2 复杂的插画或者照片 211
11.6.3 用于计算机屏幕显示的示意图 212
11.6.4 图形文字 214
11.6.5 使用大图 214
11.6.6 隐藏图形 215
11.7 图形标注 215
11.7.1 高度和宽度标签 215
11.7.2 替代性文字 216
11.7.3 彩色背景 217
11.7.4 背景图形 220
第12章 多媒体 222
12.1 对多媒体的一些考虑 222
12.2 网络多媒体策略 223
12.2.1 音频 223
12.2.2 幻灯片 224
12.2.3 视频 224
12.2.4 动画 225
12.2.5 文本替代物 225
12.3 多媒体准备 226
12.3.1 加工 226
12.3.2 传输 227
12.4 设计和多媒体 228
12.4.1 通知用户 228
12.4.2 提供控件 229
12.4.3 支持键盘交互 230
12.4.4 提供选择 230
附录A 缩写词 232
附录B 参考文献 234

经典畅销书全新升级,10余年长销不衰,被翻译为近10种文字在全球范围内出版,广受好评!