本书以Web前端设计的流程为主线，以前端设计的方法和原则为基础，围绕原型设计、模型设计、可用性设计、一致性设计和以用户为中心的设计等关键技术探讨了前端设计的规范、技巧与最佳实践。同时对Web前端设计领域的经典设计思维进行了剖析，为读者提供了极具指导价值的思想和极具操作性的实践方法。此外，本书还讲解了前端性能的测试和度量方法，总结了大量前端性能优化技巧。
本书适合于经验还不够丰富的前端工作者（前端设计师、前端开发工程师、前端架构师和用户体验设计师），希望它能帮助大家从复杂、繁琐、无序的前端设计、开发和维护工作中解放出来，以良好的设计思维与架构方法为前端开发和设计保驾护航。
重剑无锋、大巧不工。Web前端设计之道不在页面之上，而在页面之下，具备了可用性、可维护性、一致性和不让用户思考的前端设计和架构才能满足用户日益提高和变化的体验需求。在很多前端工作者看来，Web前端设计是一门纷繁而复杂的学问，不易掌握，更难精通，本书却能高屋建瓴、化繁为简，通俗易懂，不仅体现了作者深厚的技术功底，而且体现了作者优秀的写作水平。希望本书能帮助大家从复杂、繁琐、无序的前端设计、开发和维护工作中解放出来，以良好的设计思维与架构方法为前端开发和设计保驾护航。
作 者 简 介
赖定清 英文名asone，从事Web前端工作近10年，是资深的Web前端开发工程师、架构师和项目经理，先后还担任过UI设计师、交互设计师和平面设计师，实战经验丰富。精通HTML、CSS、JavaScript、RIA和ROR等前端开发技术，对前端设计和用户交互体验都有着非常独到的理解，擅于总结归纳，能将各种技术融会贯通并付诸实践。是本书读者交流网站fedonline.cn的创始人，常年活跃于各种前端开发和设计相关的社区。此外，他还从事Java企业级应用开发多年，曾经领导并参与了重庆交通征费系统和兴业银行网上银行项目的架构、设计与开发。
林 坚 英文名lotin，资深Web前端开发工程师、UI设计师和项目经理，对原型设计、可用性分析和用户体验等前端设计关键技术有着独到的理解，实战经验非常丰富。擅长Java 企业级应用开发，谙熟各种流行开发框架，尤其对MVC框架有深刻认识，曾参与和负责重庆交通征费系统和兴业银行网上银行项目等多个大型项目的开发，积累了大量的经验。长期关注国内外互联网应用的发展，对互联网的发展趋势有前瞻性的认识和了解。关注敏捷开发，有丰富的敏捷团队实施经验。擅于写作，曾担任网站和刊物的业余撰稿人，能够将所学和所悟用文字系统性地表达出来。
全面探讨Web 前端设计的方法、原则、技巧和最佳实践
5大专业社区一致鼎力推荐！
前端开发工程师、前端设计师、前端架构师和用户体验设计师等新兴职业的出现，为前端设计和开发领域注入了新的生命和活力。随着用户对应用的体验的要求越来越高，前端领域面临的挑战越来越大，问题也越来越突出。其中最突出的问题便是缺少复合型的前端人才。
从知识体系上讲，复合型的前端人才需要掌握和了解的知识非常之多，甚至可以用“庞杂”二字来形容。这导致一名出色的前端开发人才需要很长的时间来成长，因此行业对此类人才的需求极其迫切，从业前景看好。作为一个没有太多Web前端开发和设计经验的程序员，我们如何才能投身于这个充满美好前景和想象空间的领域？如何修炼自己的内功才能让自己从不会到会，从合格到优秀，从优秀到卓越？本书能在你修炼的过程中提供良好的指导与参考。
如果你在思考下面这些问题，也许本书就是你想要的！
作为一名合格的Web前端开发工程师，究竟需要具备哪些技能和素质？为什么说如果要精通Web前端开发这一行，必须先精通十行？
前端设计者如何才能正确地理解自己的用户？如何理解并实践以用户为中心的设计原则？
原型设计应该注意哪些问题？如何更好地利用工具快速地进行原型设计？
可用性设计的关键要素是什么？如何设计高可用性的页面元素（导航、表单、链接等）？
“可用性”的首要原则是“别让我思考”，你的网站如何才能做到不让用户思考呢？
可用性测试的5项目标是什么？如何通过可用性测试发现问题现象背后的本质？
如何保持设计的一致性？一致性设计的三项原则是什么？
如何理解“样式就是设计”这句话？有哪些样式技术是前端开发者和设计者必须掌握的？样式究竟有哪些功能？
如何编写易于管理、维护和复用的JavaScript代码？JavaScript有哪些最佳实践？
如何理解HTML文件、CSS文件和JavaScript文件之间的关系？如何良好地组织这些文件从而让它们更易于管理、复用和维护？
如何平衡网站的色彩？如何让你的网站设计简洁而美观？页面排版的艺术你知多少？
Web前端设计领域有哪些经典的设计思维？如何才能掌握这些设计思维的本质？
如何测试前端的性能？前端性能优化的基本原则是什么？如何进行页面内容的优化和服务器端的优化？如何利用SEO技术让你的网站更容易被发现？
CSS 3与HTML 5将带来哪些全新的设计方式？
Web 3.0真的来了吗？Web 3.0的先驱者们有哪些杰出的表现？Web前端开发与设计的未来会怎样？
前端设计的重要性
如同一个人的着装与外表，站点的设计总是最先吸引人们的眼球。布局是否合理、风格是否简洁、配色是否和谐、流程是否通畅、操作是否便捷，这些前端特性都影响着用户对站点的认可度。随着用户体验、可用性、可交互性等越来越多前端术语的出现，我们可以看到，前端设计在更吸引人关注的同时已进入一个新的发展阶段。随着前端架构师、用户体验设计师等新职位的出现，前端设计正逐渐成为软件开发人员的新焦点，越来越多的开发者开始在这个领域展开研究。
作为保证Web应用产品价值的核心元素，前端设计已经不是简单的HTML、CSS、Ajax等元素的整合了，它更关注交互的流畅性、操作的便利性、流程的合理性、结构的清晰度及可维护性、页面展现的兼容性以及同后端程序的良好桥接等，应该能够在真正理解Web应用的需求的基础上放眼全局，把握整个前端的解决方案。因此，新的时期赋予了前端开发人员新的使命，业内需要更为全能的开发人才。
前端设计面临的问题
目前国内前端设计的水平参差不齐，业内有个奇怪的现象，更多的开发人员倾向且擅长后端架构的设计。这些年笔者参与招聘的时候也发现了这个问题，几乎所有来应聘的大学生都表示他们擅长做后端开发，对前端往往一窍不通，甚至带有鄙夷的味道，认为没有水平的人才会去做前端设计。这其实是对前端设计的一种非常错误的看法，在校大学生有这样的想法则更令人担忧，这意味着中国软件行业的前端设计领域将面临人才储备匮乏的困境。
造成这种现象的原因是多方面的：
q 前端涉及的技术概念多而繁杂，参考资料系统性不足。
q 现有的关于前端的书籍往往只针对某个点，并没有针对设计思路和整合思路进行讲解。
q 我国大学计算机基础教育并不重视前端设计领域。
q 国内许多企业对前端设计人员的重视程度不高。
为什么要写这本书
这本书的第一个目的是修正人们对前端设计的错误理解，尤其是针对那些有一定工作经验的开发人员和即将进入计算机行业的莘莘学子。前端设计所涉及的技术非常繁杂，因此许多关于前端设计的书籍往往只关注其中的某个点，比如图片处理或CSS设计等。久而久之，就有人对前端设计产生了误解，有的人认为前端设计人员就是美工，有的人则认为前端设计人员就是做页面的，其实前端设计的世界远比他们想象中的要广阔和精彩。
本书的第二个目的是从更全局的角度对前端设计的知识进行一次系统的梳理，让读者能宏观地领略到整个前端设计领域的全貌。同时，本书结合具体案例描述了如何理解需求、如何提高用户体验、如何为Web应用提供最佳的解决方案等现实中常见的问题。希望本书能让大家对前端设计有新的认知并重视起来，为前端设计行业的发展尽绵薄之力。
本书面向的读者
本书主要针对以下三类读者：
q 有一定Web应用或企业级应用开发经验的开发人员，本书中的一些解决方案对你们实施项目会有所帮助。
q 前端设计师与用户体验设计师，希望本书中的一些思路或者案例能够点燃你们的思想火花。
q 准备投身软件行业的大学毕业生，这本书对你们来说是一份总纲，以此书为纲要，再根据自己的实际需求去阅读其他的相关书籍，可以迅速提高你们对前端设计的理解。
此外，本书也适用于关注以下这些关键词的读者：
q HTML
q CSS
q JavaScript
q XML
q Web 2.0
q REST
如何阅读本书
在开始阅读本书之前，请先迅速地浏览本书的目录。建议初学者通读此书，同时辅之以一些技术书籍，这样更有助于理解书中的一些观点和思路；对于有经验的前端设计人员，你可以选择感兴趣的章节来看；对于希望改进自己开发的应用的读者来说，你可以把本书的性能优化章节当成工具书来翻阅，其中包含了许多常见的优化方案。
为了将更多精彩的设计案例和经典的代码实现分享给本书的读者，我们特为本书做了一个网站一，它也是我们与读者朋友沟通的一个平台和窗口。此站点从构思以及技术实现上都贯彻了本书中描述的思路，可以说该站点就是本书的最大案例。同时，我们会在站点上与读者分享许多前端设计的创意及解决方案。
本书内容全面，对前端设计的工具、原则、方法和思想进行了全方位的阐述；本书循序渐进、注重实践，包含大量的实例和技巧，强烈推荐。
—Web前端设计用户组
对于刚入行或不太有经验的Web前端工作者来说，本书不可多得，不可不读，它不仅从宏观上探讨了Web前端设计的思想和方法，而且从微观上讲解了Web前端设计的具体操作和最佳实践。
—Web前端技术交流小组
很高兴看到Web前端设计和开发这几年来越来越受到业界的重视，也非常高兴看到有像本书这样专业的Web前端设计类书籍出现，它能给Web前端设计者和开发者很好的指导，强烈推荐。
—中国UI设计交流中心
Web前端设计的方法、流程、思想和最佳实践都在这本书中，它是为前端工作者准备的一顿大餐，赶紧享受吧！
—CSS用户组
前端开发工程师、前端设计师、前端架构师和用户体验设计师等职位的出现为前端领域注入了生命与活力，本书的出现为这些前端工作者提供了宝贵的学习和参考资料。
—用户体验设计交流小组
计算机\程序设计
前端开发工程师、前端设计师、前端架构师和用户体验设计师等新兴职业的出现，为前端设计和开发领域注入了新的生命和活力。随着用户对应用的体验的要求越来越高，前端领域面临的挑战越来越大，问题也越来越突出。其中最突出的问题便是缺少复合型的前端人才。
从知识体系上讲，复合型的前端人才需要掌握和了解的知识非常之多，甚至可以用“庞杂”二字来形容。这导致一名出色的前端开发人才需要很长的时间来成长，因此行业对此类人才的需求极其迫切，从业前景看好。作为一个没有太多Web前端开发和设计经验的程序员，我们如何才能投身于这个充满美好前景和想象空间的领域？如何修炼自己的内功才能让自己从不会到会，从合格到优秀，从优秀到卓越？本书能在你修炼的过程中提供良好的指导与参考。
如果你在思考下面这些问题，也许本书就是你想要的！
1.作为一名合格的Web前端开发工程师，究竟需要具备哪些技能和素质？为什么说如果要精通Web前端开发这一行，必须先精通十行？
2.前端设计者如何才能正确地理解自己的用户？如何理解以用户为中心的设计原则？
3.原型设计应该注意哪些问题？如何更好地利用工具快速地进行原型设计？
4.可用性设计的关键要素是什么？如何设计高可用性的页面元素（导航、表单、链接等）？
5.“可用性”的首要原则是“别让我思考”，你的网站如何才能做到不让用户思考呢？
6.可用性测试的5项目标是什么？如何通过可用性测试发现问题现象背后的本质？
7.如何保持设计的一致性？一致性设计的三项原则是什么？
8.如何理解“样式就是设计”这句话？有哪些样式技术是前端开发者和设计者必须掌握的？样式究竟有哪些功能？
9.如何编写易于管理、维护和复用的JavaScript代码？JavaScript有哪些最佳实践？
10.如何理解HTML文件、CSS文件和JavaScript文件之间的关系？如何良好地组织这些文件从而让它们更易于管理、复用和维护？
11.如何平衡网站的色彩？如何让你的网站设计简洁而美观？页面排版的艺术你知多少？
12.Web前端设计领域有哪些经典的设计思维，如何才能掌握这些设计思维的本质？
13.如何测试前端的性能？前端性能优化的基本原则是什么？如何进行页面内容的优化和服务器端的优化？如何利用SEO技术让你的网站更容易被发现？
14.CSS3与HTML5将带来哪些全新的设计方式？
15.Web 3.0真的来了吗？Web3.0的先驱者们有哪些杰出的表现？Web前端开发与设计的未来会怎样？
赖定清 林坚 著：赖定清 英文名asone，从事Web前端工作近10年，实战经验非常丰富。是资深的Web前端开发工程师、架构师和项目经理，先后还担任过UI设计师、交互设计师和平面设计师。精通HTML、CSS、、RIA和ROR等前端开发技术，对前端设计和用户交互体验都有着非常独到的理解，擅于总结归纳，能将各种技术融会贯通并付诸实践。是本书读者交流网站fedonline.cn的创始人，常年活跃于各种前端开发和设计相关的社区。此外，他还致力于Java企业级应用开发多年，曾经领导并参与了重庆交通征费系统和兴业银行网上银行项目的架构、设计与开发。 林坚 英文名lotin，资深Web前端开发工程师、UI设计师和项目经理，对原型设计、可用性分析和用户体验等前端设计关键技术有着独到的理解，实战经验非常丰富。擅长Java 企业级应用开发，谙熟各种流行开发框架，尤其对MVC框架有深刻认识，曾参与和负责重庆交通征费系统和兴业银行网上银行项目等多个大型项目的开发，积累了大量的经验。长期关注国内外互联网应用的发展，对互联网的发展趋势有前瞻性的认识和了解。关注敏捷开发，有着丰富的敏捷团队实施经验。擅于写作，曾担任网站和刊物的业余撰稿人，能够将所学和所悟用文字系统性地表达出来。
赞 誉
前 言
致 谢
第1章 Web前端开发ABC/1
1.1 Web大局观/2
1.1.1 混沌初开—Web的诞生/2
1.1.2 网络技术的领导者—W3C/4
1.1.3 不断优化的客户端技术/7
1.1.4 服务端技术的成熟/8
1.2 地位、曲线和使命/11
1.2.1 前端开发路漫漫/11
1.2.2 千军易得，一将难求/12
1.2.3 令人望而却步的学习曲线/14
1.2.4 前端开发人员如何自身定位/16
1.3 前端开发所需掌握的技术/17
1.4 前端开发常用的工具/25
1.4.1 设计类工具/25
1.4.2 原型类工具/26
1.4.3 调试类工具/27
1.4.4 辅助类工具/32
1.5 小结/33
第2章 打造前端设计的基石—交出你的原型稿/34
2.1 UCD—以用户为中心的设计原则/35
2.1.1 关注用户/36
2.1.2 用户调研/39
2.1.3 更含蓄的方式/42
2.2 交出第一份设计稿/46
2.2.1 为什么原型设计很重要/47
2.2.2 原型如何表现/48
2.2.3 做好原型产品的注意事项/56
2.3 让工具帮助你/57
2.3.1 创建用户模型/58
2.3.2 Balsamiq Mockups设计概念图/59
2.3.3 Axure RP设计交互原型/60
2.3.4 更真实的表现/66
2.4 小结/71
第3章 从过去到未来—前端设计演变之路/72
3.1 最熟悉的陌生人/73
3.1.1 浏览器之争/73
3.1.2 性能对比/74
3.1.3 IE PK Web 标准/77
3.2 结构的变迁/83
3.2.1 表格噩梦/83
3.2.2 基于DIV和CSS的布局结构/86
3.3 不单纯是脚本/90
3.3.1 JavaScript的原貌/90
3.3.2 华丽的进化/92
3.3.3 Ajax不得不提/95
3.3.4 脚本框架的出现/96
3.4 接触未来（一）—初探HTML 5/101
3.4.1 摘要/101
3.4.2 结构/102
3.4.3 Flash杀手Canvas？/105
3.4.4 设计一个布局结构文档/107
3.4.5 对表单的支持/109
3.5 接触未来（二）—CSS 3的世界很精彩/110
3.5.1 选择器的变化/113
3.5.2 布局的变化/116
3.5.3 样式的变化/119
3.5.4 动画/120
3.6 小结/121
第4章 让你的设计深入人心—可用性设计/122
4.1 可用性原则/123
4.1.1 别让我思考/124
4.1.2 停止你的假设/129
4.1.3 针对扫描而设计/132
4.2 高可用性页面/136
4.2.1 导航之道/137
4.2.2 当链接变成云/145
4.2.3 设计可用的表单/147
4.2.4 拒绝写作艺术/153
4.3 可用性测试/156
4.3.1 如何测试/157
4.3.2 现象与本质/158
4.4 巧妙地应对错误/159
4.4.1 提前预防/162
4.4.2 设计有用的信息/165
4.4.3 人性化操作/169
4.5 系统一致性设计/170
4.5.1 规范设计/172
4.5.2 有始有终/172
4.6 小结/173
第5章 原型模型化/174
5.1 布局之道/175
5.1.1 基本布局样式属性/176
5.1.2 基于网格系统的CSS框架布局/179
5.1.3 流体布局/183
5.2 样式就是设计/185
5.2.1 必须了解的样式技术/185
5.2.2 使用样式完成所有事情/191
5.3 动态交互之美/207
5.3.1 JavaScript设计新思维/207
5.3.2 jQuery是最佳实践/214
5.3.3 一个关于Tab导航的交互例子/223
5.4 设计理念的碰撞与融合/226
5.4.1 PNG透明色应用/226
5.4.2 大菜单/228
5.4.3 Tab选项卡/230
5.4.4 模态窗口/232
5.4.5 unobtrusive的Web开发/234
5.5 小结/237
第6章 探索、品味、总结—经典设计思维/239
6.1 平衡网站的色彩/240
6.1.1 色彩的联想/240
6.1.2 色彩三要素/247
6.1.3 流行配色/249
6.2 简洁的思想斗争/254
6.2.1 有效利用空白/255
6.2.2 是时候“减肥”了/256
6.2.3 简洁的背后/260
6.3 排版艺术/262
6.3.1 充分了解你要使用的字体/263
6.3.2 其他重要排版要素/267
6.4 80%的情况下我们可以这样做/270
6.4.1 轻松导航/270
6.4.2 便捷检索/273
6.4.3 快速选择/278
6.4.4 有效帮助/280
6.5 小结/282
第7章 让你的设计更加完美—优化技巧和最佳实践/283
7.1 性能在前端的重要性/284
7.2 前端性能优化的基本原则/286
7.2.1 页面内容的优化/286
7.2.2 服务器的优化/299
7.3 让自己更容易被发现/304
7.3.1 SEO策略/304
7.3.2 前端搜索引擎友好/310
7.3.3 其他/311
7.3.4 维护SEO效果/312
7.4 小结/314
第8章 思考与展望—浅谈Web发展的未来/315
8.1 不可思议的Web 2.0/316
8.1.1 Web 2.0是一场必然的革命/316
8.1.2 Web 2.0的新生活/317
8.1.3 云时代的脚步/322
8.2 REST/323
8.2.1 什么是REST/323
8.2.2 REST初探/325
8.2.3 Ajax和REST组合/330
8.3 Mashup与Widget/333
8.3.1 什么是Mashup/333
8.3.2 Mashup实践/336
8.3.3 1+1>2/342
8.3.4 Widget/343
8.4 拥抱未来，拥抱Web 3.0/346
8.4.1 Web 3.0到底什么样/348
8.4.2 语义网/350
8.4.3 Web 3.0先行者/353
8.5 小结/362
