前端开发工程师、前端设计师、前端架构师和用户体验设计师等新兴职业的出现，为前端设计和开发领域注入了新的生命和活力。随着用户对应用的体验的要求越来越高，前端领域面临的挑战越来越大，问题也越来越突出。其中最突出的问题便是缺少复合型的前端人才。

从知识体系上讲，复合型的前端人才需要掌握和了解的知识非常之多，甚至可以用“庞杂”二字来形容。这导致一名出色的前端开发人才需要很长的时间来成长，因此行业对此类人才的需求极其迫切，从业前景看好。作为一个没有太多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前端开发与设计的未来会怎样？

前端设计的重要性
    如同一个人的着装与外表，站点的设计总是最先吸引人们的眼球。布局是否合理、风格是否简洁、配色是否和谐、流程是否通畅、操作是否便捷，这些前端特性都影响着用户对站点的认可度。随着用户体验、可用性、可交互性等越来越多前端术语的出现，我们可以看到，前端设计在更吸引人关注的同时已进入一个新的发展阶段。随着前端架构师、用户体验设计师等新职位的出现，前端设计正逐渐成为软件开发人员的新焦点，越来越多的开发者开始在这个领域展开研究。
    作为保证Web应用产品价值的核心元素，前端设计已经不是简单的HTML、CSS、Ajax等元素的整合了，它更关注交互的流畅性、操作的便利性、流程的合理性、结构的清晰度及可维护性、页面展现的兼容性以及同后端程序的良好桥接等，应该能够在真正理解Web应用的需求的基础上放眼全局，把握整个前端的解决方案。因此，新的时期赋予了前端开发人员新的使命，业内需要更为全能的开发人才。

前端设计面临的问题
    目前国内前端设计的水平参差不齐，业内有个奇怪的现象，更多的开发人员倾向且擅长后端架构的设计。这些年笔者参与招聘的时候也发现了这个问题，几乎所有来应聘的大学生都表示他们擅长做后端开发，对前端往往一窍不通，甚至带有鄙夷的味道，认为没有水平的人才会去做前端设计。这其实是对前端设计的一种非常错误的看法，在校大学生有这样的想法则更令人担忧，这意味着中国软件行业的前端设计领域将面临人才储备匮乏的困境。
    造成这种现象的原因是多方面的：

•     前端涉及的技术概念多而繁杂，参考资料系统性不足。
•     现有的关于前端的书籍往往只针对某个点，并没有针对设计思路和整合思路进行讲解。
•     我国大学计算机基础教育并不重视前端设计领域。
•     国内许多企业对前端设计人员的重视程度不高。

为什么要写这本书
    这本书的第一个目的是修正人们对前端设计的错误理解，尤其是针对那些有一定工作经验的开发人员和即将进入计算机行业的莘莘学子。前端设计所涉及的技术非常繁杂，因此许多关于前端设计的书籍往往只关注其中的某个点，比如图片处理或CSS设计等。久而久之，就有人对前端设计产生了误解，有的人认为前端设计人员就是美工，有的人则认为前端设计人员就是做页面的，其实前端设计的世界远比他们想象中的要广阔和精彩。
    本书的第二个目的是从更全局的角度对前端设计的知识进行一次系统的梳理，让读者能宏观地领略到整个前端设计领域的全貌。同时，本书结合具体案例描述了如何理解需求、如何提高用户体验、如何为Web应用提供最佳的解决方案等现实中常见的问题。希望本书能让大家对前端设计有新的认知并重视起来，为前端设计行业的发展尽绵薄之力。

本书面向的读者
    本书主要针对以下三类读者：

•     有一定Web应用或企业级应用开发经验的开发人员，本书中的一些解决方案对你们实施项目会有所帮助。
•     前端设计师与用户体验设计师，希望本书中的一些思路或者案例能够点燃你们的思想火花。
•     准备投身软件行业的大学毕业生，这本书对你们来说是一份总纲，以此书为纲要，再根据自己的实际需求去阅读其他的相关书籍，可以迅速提高你们对前端设计的理解。

    此外，本书也适用于关注以下这些关键词的读者：

•     HTML
•     CSS
•     JavaScript
•     XML
•     Web 2.0
•     REST

如何阅读本书
    在开始阅读本书之前，请先迅速地浏览本书的目录。建议初学者通读此书，同时辅之以一些技术书籍，这样更有助于理解书中的一些观点和思路；对于有经验的前端设计人员，你可以选择感兴趣的章节来看；对于希望改进自己开发的应用的读者来说，你可以把本书的性能优化章节当成工具书来翻阅，其中包含了许多常见的优化方案。
    为了将更多精彩的设计案例和经典的代码实现分享给本书的读者，我们特为本书做了一个网站一，它也是我们与读者朋友沟通的一个平台和窗口。此站点从构思以及技术实现上都贯彻了本书中描述的思路，可以说该站点就是本书的最大案例。同时，我们会在站点上与读者分享许多前端设计的创意及解决方案。

致谢
    五月本书初稿完成，这时福州的天气已经逐渐热起来了，回首过去的几个月感慨万千。我素来喜欢写作，但是真正尝试动笔去完成一本书的时候，才体会其中的艰辛。尽管本书封面上只署了两个人的名字，但是完成本书的却不只两个人。罗马不是一个人建造的，这本书仅凭借我和asone也是不能完工的。
    首先，必须感谢华章公司的每一位工作人员，尤其是杨福川先生和曾珊女士，他为我们提供了新作者所必需的指导与支持。
    其次，特别感谢傅一民先生，他对本书性能优化的章节贡献巨大，同时感谢新大陆公司的部门同事以及业内的同仁，他们也对本书提出了宝贵的意见。
    再次，感谢那些所谓的“狐朋狗友”，写这本书占用了我许多的业余时间，有他们的鼓励才促使我和asone坚持下来。
    最后，感谢我们的家人，特别是我善解人意的老婆snow、赖嫂以及最可爱无敌的赖雅心小朋友，正是他们的爱为这本书注入了鲜活的生命。
林  坚   
2010年6月

本章内容

•   Web大局观
•   地位、曲线和使命
•   前端开发所需掌握的技术
•   前端开发常用的工具
•   小结

网络已经融入了人们的生活，很多人一打开电脑就会去上网，可以在网上看新闻、订票、写博客、分享照片、听音乐，或者通过YouTube看一位流浪歌手的表演，Web已经成为人们生活中不可缺少的部分。到目前为止，Web技术已经有接近 20 年的发展历史，如果算上Web的史前阶段，其发展历史就更加长了。下面就请大家随着我的笔触，将时钟倒拨，回顾那段曾经的岁月。

1.1.1  混沌初开—Web的诞生
1969年10月29日晚10:30（美国西部时间），互联网的前身ARPAnet迎来了关键时刻，Leonard Kleinrock 教授（见图1-1）通过一条电话专线把加州大学洛杉矶分校（UCLA）的一台主机连接到斯坦福大学研究院（SRI）的一台主机上。为了测试连接是否畅通，Kleinrock 安排UCLA的一些学生发送单词“log”，而SRI的主机在接收到该单词后则输入“in”作出回应。研究员Charley Kline负责发送“log”这个单词，然而，当他输入字母“L”和“O”，还没来得及输入字母“G”时，系统就崩溃了。紧接着的下一次传输虽然成功了，但“LO”这个未敲完的词却成了互联网第一次发送的单词，其意义一点儿也不亚于莫尔斯的第一篇电文—“上帝都做了什么？”或者贝尔的第一个电话—“来吧，沃森，我需要你。”这一天，互联网诞生了，其深远的意义不言而喻。
1983年6月23日，第一个DNS数据包从互联网上仅有的数百台主机中的一台中发出，并且得到了正式的响应。这意味着Paul Mockapetris、Craig Partridge和已故的Jon Postel构建的域名系统诞生了。如果没有DNS，可能就没有现在的互联网。
1990年12月25日，世界人民收到了Tim Berners Lee（见图1-2）送出的最值得感恩的圣诞礼物—这一天Web诞生了，Berners Lee和Cailliau利用全球首台Web服务器进行了通信。Berners Lee最初开发的是一个超文本系统，目的是为了能够跟踪CERN高能物理部门的上百个项目、软件和计算机的研发和使用情况。利用一台NexT计算机，Berners Lee在1990年秋编写了一个相当简陋的浏览器，然后与Cailliau一起创建了第一份Web文本：CERN的电话簿。1991年8月，Berners Lee向全球公布了这项发明。


图1-1  互联网之父—Leonard Kleinrock


图1-2  Web之父—Tim Berners Lee
1993年3月15日凌晨1:11（美国中部时间），图形浏览器诞生。Marc Andreessen和Eric Bina都是伊利诺伊大学国家超级计算机应用中心的天才学生。然而，当他们宣称他们为X Windows终端开发的Mosaic浏览器（见图1-3）的首个Beta版可以下载时，他们并未意识到这个图形浏览器将会对Web的发展带来多么巨大的影响。大约一年后，Andreessen和SGI的Jim Clark共同创建了Mosaic通信公司，后更名为Netscape。微软购买了Mosaic的许可证，将其源代码用在了IE 1.0中。于是，浏览器大战从此开始—这场疯狂的竞赛让静态的Web页面演变为多媒体的奢华场所。


图1-3  第一个图形化的浏览器Mosaic

1.1.2  网络技术的领导者—W3C
1991年，CREN正式发布了Web的技术标准。如今，与Web相关的标准和规范都是由著名的W3C组织来进行管理和维护的。W3C是World Wide Web Consortium的简称，即万维网联盟，又称W3C理事会，其官方网站为http://www.w3.org。它的成立是为了解决Web应用中不同平台、技术和开发者带来的不兼容性，保障信息的完整流通，同时制定一系列的标准来督促Web应用开发者及内容提供者遵守这一标准。它的会员包括生产技术及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门，它们一起协同工作，致力于在互联网的发展方向上达成共识。Web标准不是某一项标准，而是一系列的技术标准，所有的Web都应由三个部分组成：结构、表现、行为。所以我们在做一些架构时经常会强调这样一种说法：“结构与表现分离”，这也是前端开发人员遵守的第一原则。在这样一个结构组成的Web页面中，W3C也相对应地提出了以下与之对应的技术标准。
1. 结构标准
HTML/XHTML：HTML是Web的基础之一，基于HTML，Web上开始出现丰富多彩的页面，蕴涵了各种信息：文本、图像、视频。W3C先后推出了多个HTML版本，分别是1997年12月的首个版本、1998年4月的更新版本和1999年12月推出的HTML 4.01版。XHTML是对HTML 4.01的扩展，在其中可以使用XML的语义功能。XHTML 1.0已于2000年1月作为推荐标准发布。XHTML Basic是对XHTML 1.0的独立于设备（如手机、PDA等）的扩展，于2000年12月发布。随后，2001年5月推出了XHTML的模块化版本XHTML 1.1。目前HTML 5草案最终版也将在2011年制定。
XML：1998年2月发布的XML 1.0是W3C最具前瞻性和最有影响力的标准之一。XML作为下一代Web的第一块重要基石，为分布式的、异构的数据交换提供了强大的功能，并且将数据本身和数据的表现分离。同时，就数据本身而言，数据的值和语义也是适当分离的。事实上，XML已经发展为一组技术，包括2001年5月发布的XML Schema、1999年1月发布的XML Namespaces、1999年11月发布的用于处理XML转换的XSLT和用于在XML文档中定位的XPath，以及2001年6月发布的XLink和XML Base等。此外，XML的出现为程序能够自动地处理Web数据和信息，以及Web服务（WSDL、SOAP、UDDI规范）提供了一种公共基础。
2. 表现标准
CSS 1.0于1996年12月推出，1998年5月CSS 2.0发布。CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。
3. 行为标准
DOM是Document Object Model（文档对象模型）的缩写。根据W3C DOM规范，DOM是处理可扩展语言（XML）的标准编程接口，使得你可以访问页面的其他标准组件。由于不依赖于任何程序设计语言和网页描述语言，它为有效处理HTML和XML数据提供了一种标准的、独立的接口。DOM先后经历了3个版本，分别是1998年10月发布的DOM Level 1、2000年11月发布的DOM Level 2和2003年发布的DOM Level 3。
ECMASCript：ECMAScript是ECMA（European Computer Manufacturers Association）制定的标准脚本语言（JavaScript）。JavaScript的出现使得信息和用户之间不仅仅是一种显示和浏览的关系，而且实现了一种实时的、动态的、可交互式的表达能力，从而使得基于CGI的静态HTML页面将被可提供动态实时信息，并反映客户操作的Web页面取代。
至今，W3C制定的规范已超过50多项，以上这几种规范大家早已耳熟能详。此外，还有一些未来的前瞻规范，如基于语义Web的RDF规范、基于图像技术的PNG规范、基于Web协议的SOAP规范等，W3C将这些标准技术作为Web应用的基础框架，见图1-4。


图1-4  W3C全貌
在整个Web应用的技术架构上，W3C将互联网应用体系划分为一系列的层，自下而上依次为：

•   URI/IRI、HTTP
•   Web Architectural Principles
•   XML Infosets; RDF(S) Graphs
•   XML、Namespaces、Schemas、XQuery/XPath、XSLT、DOM、XML Base、XPointer、RDF/XML、SPARQL

在最上层包含了6个框，分别与W3C主要的活动组（Web Applications、Mobile、Voice、Web Services、Semantic Web、Privacy Security）相对应。
在整个W3C应用体系中，一个横条把这些领域（Web Accessibility（Web可访问性）、Internationalization（国际化）、 Mobile Access（移动访问）、Device Independence（设备独立）和 Quality Assurance（质量保证））联系在一起。URI、HTTP、XML和RDF支撑着这5个方面。无障碍网页、国际化、设备无关和质量等已融入到W3C的各项技术之中，未来的Web将是一个语义化、人性化、可管理、可信任的Web。
然而，在微软和网景统治浏览器的时代，各浏览器所做的并没有遵循标准，而是不断推出新版本，实现不同的功能，都想在这个市场中赢得优势，但最终还是以被美国时代在线收购而告终。如今，浏览器已是群雄逐鹿，出现了IE、Firefox、Safari、Chrome、Opera等浏览器，它们都在适应Web的标准及其变化。

1.1.3  不断优化的客户端技术
1990年，Tim Berners Lee在SGML的基础上为Web量身打造了HTML标准。最初的HTML只能显示静态文本与图像信息，这显然无法满足人们的广泛需求。能展现和存储二维动画的GIF技术第一次为HTML页面注入了动态元素，时至今日，这项技术仍然被广泛应用。
1. Java与脚本
变革发生在1995年，这一年Java语言问世，其平台无关性为人们打通了一条在浏览器中开发动态应用的捷径。1996年，网景公司的第二代产品宣布支持JavaApplets与JavaScript，而同年IE 3.0也宣布支持Java技术，从此，Web开发人员可以随心所欲地丰富Web页面的功能了。1996年，微软为了与JavaScript抗衡，设计了一款至今仍声名显赫的语言—VBScript。以JavaScript为代表的脚本技术的诞生与繁荣对Web行业的发展产生了极其深远的影响。
脚本技术赋予了HTML页面交互能力，而CSS和DHTML技术的诞生则让页面又酷又炫，而且更加动感。1996年年末，W3C提出了CSS的建议标准，同年IE 3.0引入了对CSS技术的支持。有了CSS的标准，开发人员可以更加容易且规范地掌控HTML页面的格式。1997年Netscape 4.0推出，它在支持CSS的基础上还提供了许多网景公司自定义的HTML标签，这些标签在CSS的配合下显得动感十足。1997年微软发布了IE 4.0，将动态HTML标签、CSS以及动态对象模型发展成了一套完整、高效、实用的开发技术体系，并称之为DHTML。
2. 样式与多媒体
CSS的发展让页面变得更加美观，但是人们并未满足于此，而是将音频、视频等更加复杂的多媒体应用融入了HTML页面。1996年，Netscape 2.0成功引入了对Quick Time插件的支持，而这种插件式的开发方式也迅速在浏览器世界风靡。同年，微软在IE 3.0中加入了革命性的功能—对ActiveX控件的支持，这为第三方Web服务提供了窗口。各种各样的插件大大丰富了浏览器的功能。1999年，RealPlayer插件在Netscape和IE上都取得了成功。当然，不得不提的是至今大红大紫的Flash插件。20世纪90年代初，Jonathan Gay在FutureWave公司开发了一种名为Future Splash Animator的二维矢量动画展示工具。1996年，Macromedia公司收购了FutureWave，并将Jonathan Gay的发明改名为Flash，从此Flash动画成为了Web开发人员、实现特效、展示个性的最佳方式。
3. XML的发展
1996年，W3C在SGML语言的基础上提出了XML语言的草案。1998年正式发布了XML 1.0的标准。按照Tim Berners Lee的说法，XML的提出对于Web来说是一次新生，XML的出现让Web页面的信息与表现形式的分离成为了可能。HTML语言关注信息的表现和实现，XML关心信息本身的格式与数据内容，这对于信息展现技术而言，不得不说是一次可喜的飞跃。1999年W3C开始讨论设计基于XML的通信协议，2000年，提出了SOAP协议的1.1版本，2001年发布了WSDL协议的1.1版本，一个伟大的应用模型WebService诞生了。WebService让不同类型的计算设备、客户端、服务端及应用间的通信成为了可能。
4. Ajax的诞生
随着JavaScript、CSS以及XML等技术的不断成熟，随着对用户体验的更高追求，人们开始尝试着将这些技术组合起来应用，从而实现一些特效，让Web应用看起来与桌面应用更加接近，直到Jesse James Gaiiett将这些技术的集成定义为Ajax，Ajax成为了Web 2.0时代最火的词汇之一。
Ajax技术被广泛应用之后，人们发现浏览器的兼容性、脚本的运行效率等问题成为Ajax发展所面临的最大阻碍，于是开始出现一系列纯脚本的技术框架，如Prototype、jQuery、ExtJS等。这些脚本框架的出现极大地推进了Ajax技术的发展与应用，大量的特效插件与兼容性的支持让Ajax真正站上了Web 2.0的舞台中心。

1.1.4  服务端技术的成熟
与客户端技术从静态到动态不断丰富发展相对应，服务端技术也在逐步完善。
1. CGI是领路人
最早的Web服务器简单地响应浏览器发来的HTTP请求，并将存储在服务器上的HTML文件返回给浏览器。第一种真正使服务器能根据运行时的具体情况动态生成HTML页面的技术是CGI（Common Gateway Interface）技术。NCSA于1993年提出CGI 1.0的标准草案，1995年则开始制定CGI 1.1标准，1997年制定CGI 1.2标准。CGI技术的普及使客户端与服务器的动态信息交互成为了可能，聊天室、论坛、电子商务等各种Web应用蓬勃发展。
早期的CGI程序都是由C、C++或者Pascal等语言编译完成的，为了简化CGI程序的修改过程，人们开始探寻用脚本语言实现CGI程序的可行方式。1995年，第一个用Perl写成的CGI程序问世，由此开启了脚本语言实现CGI的新篇章。
2. Web编程
Web服务端的编程语言始于PHP。1994年Rasmus Lerdorf（见图1-5）发明了PHP，将HTML与PHP指令合成为完整的服务端动态页面，为Web开发者提供了方便与快捷的开发方式。1996年，微软推出了ASP技术，配合Visual Studio等开发工具取得了巨大的成功。1997年，SUN公司重拳出击，推出了Servlet技术，1998年推出了JSP技术，Servlet和JSP的组合为Java开发者提供了Web开发的利器。


图1-5  PHP之父Rasmus Lerdorf
3. 企业级开发平台
Web服务端开发技术的完善使开发复杂的Web应用成为了可能。为了给用户提供更可靠和完善的信息服务，两个最重要的企业级开发平台—Java EE与.NET（见图1-6）在2000年前后分别在Java与Windows阵营诞生了。两大阵营的较量促使Web开发技术以空前的速度向前发展。2000年以后出现了许多有影响力的技术融合方案，比如MVC的设计模型、门户服务（Portal Server）、内容管理等。2001年Struts 1.0发布，从这一年开始，Apache等开源组织开始活跃于Web开发的舞台，各种开源的技术集成方案及框架大放异彩，比如Joomla、Struts、Spring等。这几年，随着.NET 3.5与Java EE 6的相继发布，这场企业级开发平台的战争愈演愈烈。


图1-6  Java VS .NET

随着JavaScript 2.0、CSS 3.0、HTML 5.0、Servlet 3.0等字眼的不断涌现，我们感受了Web技术发展的蓬勃生机，看到了那美好的未来。

打开网页，映入眼帘的是万紫千红的互联网世界。当你在享受RSS订阅时，当你在Blog上分享你的旅游经历时，当你通过电子商务为你的女友订购玫瑰花时，当你通过E-mail处理日常事务时，你是否想过是谁创造了这一切？是谁为那些冗长深奥的二进制代码赋予了如此有生命力的皮囊？

1.2.1  前端开发路漫漫
通常人们认为Web 1.0时代始于1994年，标志性的事件就是1994年年初斯坦福大学的博士杨致远（Jerry）和David Filo发布了一份他们最喜爱的Web网站列表，这份列表最初的名称是“Jerry&David的Web指南”。两个月后，它又有了一个新的、带有挖苦意味的名称—“Yet Another Hierarchical Officious Oracle”（不过是又一份等级制的非正式的神谕），或者缩写为Yahoo。Yahoo是Web史上的一个伟大瞬间，国内的网易、新浪等门户网站均是Web 1.0时代的杰出代表。在Web 1.0时代，网站的主要功能还是发布信息，通过专业人士编辑某些信息，然后将其发布到站点上供用户浏览与检索，用户的参与程度不高，用户主要做的事情是浏览，因此访问这些站点的客户端工具被称为浏览器。
Web 2.0从什么时候开始并没有一个确切的说法。多数人认为它是从2001年互联网泡沫破灭后逐渐兴起的，以Blog、RSS、SNS这些概念的提出为代表。
如果说Web 1.0是以数据为核心的，那么Web 2.0则是以人为出发点的互联网，用户的参与程度大大超过Web 1.0。现在互联网上的大部分资源都是由用户自己发布并管理的，用户在互联网上的作用越来越大—他们贡献内容、传播内容，而且提供这些内容之间的链接关系和浏览路径。从这个角度看，互联网变得更有序，每个用户都在贡献—要么贡献内容，要么贡献内容的秩序。人们对于Web 2.0，众说纷纭，但是有一点可以肯定，Web 2.0是以人为核心的网络，提供方便用户“织网”的工具，鼓励用户提供内容。根据用户在互联网上留下的痕迹来组织浏览的线索，提供相关的服务，给互联网不断产生新的价值。Blog、Wiki、RSS、SNS等都是Web 2.0时代的价值体现。
随着互联网进入Web 2.0时代，用户体验越来越受企业及用户的关注，前端设计师所要担负的责任越来越重，所需要掌握的技术范围也在不断扩大。现在的前端设计师早已不是一名写HTML、关注页面展现的网页设计师了。

1.2.2  千军易得，一将难求
不知道人力资源经理是否有这样的感慨，要找一个称职的前端设计师是多么的困难，而领导却往往无法理解为何找一个做页面的人会这么困难？原因很简单，现在的前端设计师已经不仅仅是做页面的程序员了。有别于原先的网页设计师，如今已经出现了许多新兴的、针对Web开发人员的前端设计职位：交互设计师、用户体验设计师、前端架构师，等等。这说明如今的前端开发人员已经不仅仅局限于关注用户所看到的界面的美观程度，他们更需关注的是是否能让用户获得良好的体验。现在，出色的前端设计人员（或者说前端架构师）已经是“千军易得，一将难求”，造成这样的局面有许多深层次的原因，且听我慢慢道来。
1. 社会的定位
业内多数公司都存在这样一些不幸的现象：除了少数的前端设计师之外，大部分的前端设计人员都没有得到公司领导应有的认可，前端开发人员所要担当的责任及履行的义务和他们所获得的待遇处于一种不对等的状态，这样的环境造成了前端开发人员的职业发展受到了严重影响。某些领导甚至这样认为做页面很简单，没有工作经验的人也能胜任前端开发的职位，还省时、省力、省工。这样的社会定位造成的恶果是很明显的，每年笔者都会参加应届毕业生的招聘会，面对好几百份简历，往往很难找出一个致力于前端开发的大学生。大多数人都表示希望或者擅长做后端开发，在大家的意识里，前端开发人员似乎就是公司中地位较低微的人员，没有什么晋升机会，只会写页面。如今，很多人认为前端开发人员的工作只是做页面，这无疑是一种悲哀。
2. 教育资源的匮乏
为什么说教育资源匮乏呢？现在也有很多高校开设了“网页设计”课程，不是吗？这又回到了我们之前提到的问题，前端设计师不仅仅是网页设计师，他首先必须是一位合格的程序员，必须具备相关的计算机基础。但是现在大多数学校计算机相关专业的课程设计都是以语言及算法为核心的，并没有针对与Web有关的课程设计，即便有，也只是选修课程。因此，学生在进入社会后，要从事与Web相关的工作，大多数人都只能通过自学来补充知识。
说到自学，问题更严重了。放眼现在的各种关于前端设计的书籍，要么单纯讲HTML，要么单纯谈论CSS，有的甚至具体谈论某一个脚本框架的使用（如关于jQuery的一些书籍）。这些书籍都只涵盖了前端设计中的某一个小小的点，并不能很好地展现整个前端设计知识体系的全貌以及整个学习的线索。这也正是笔者写这本书的原因，希望能够给开发人员梳理整个前端设计的知识体系，同时结合具体案例，根据笔者的线索来贯穿前端领域中的各个重要的知识点，为读者指明学习的思路。
3. 旁人眼中的不规范
由于某些历史原因，现在的前端开发在人们眼中的直观印象是：繁杂、不规范，诸如此类，这也间接导致了前端开发职位的吸引力不大，干活吃力又不讨好。当后端技术如ASP.NET、Java、Rails等框架变得越来越强大、越来越抽象的时候，前端技术的潜在发展也日益复杂。Web的前端技术包括W3C的所有结构体系技术，还包括W3C之外的一些技术（如Flash）及表现逻辑。它不仅仅是HTML+CSS+JavaScript，所谓的Web标准也不仅仅是DIV+CSS，能正确使用这些技术服务于Web和用户才是Web前端应该深入的问题。
当你看到1.1.2节的图1-4中的体系时，你也许会问，有些技术我从来就没有听说过，真的能够实现吗？有没有成型的案例呢？实际上，这是一幅理想的蓝图，使用这个标准体系建造起来的Web应用可以实现对各浏览器的兼容，还能实现移动设备的访问—无障碍访问。现在已进入3G的互联网时代，但是在手机上看新闻和在IE下看新闻获得的是相同的体验吗？你确信你的站点在IE 5.0、IE 6.0、IE 7.0和IE 8.0下都能够正常工作吗？答案是令人遗憾的，现实和理想的差距也不只是一点点。
以前许多公司根本无视W3C标准的存在，最典型的就是某公司的浏览器版本在每次更新时都推出所谓的自己的标准。浏览器作为Web应用的基础平台，其标准的不统一将直接导致Web应用实施团队需要花费额外的精力去实现浏览器的兼容（见图1-7所示的某商业应用的友情提示），而这些工作本来都是可以避免的。Firefox、Safari、IE、Opera、Chrome（问世不久，不过市场占有率上升得很快）等，如此多厂商的浏览器，该如何处理兼容问题呢？


图1-7  某商业应用的友情提示
不解决也许是最好的解决方案，有的应用商甚至提供了指定的浏览器下载，这又何尝不是另一种悲哀呢？
上述这些都是造成目前前端开发领域中出现各种问题的因素，此外还有一大因素不得不提，那就是前端开发那令人望而却步的学习曲线。

1.2.3  令人望而却步的学习曲线
我们先来看看作为一名合格的前端人员应该掌握或具备哪些技能：
首先就得熟悉HTML，掌握W3C的标准，要学就得学最规范的标准。浏览器最少也要了解四五种，如IE、Firefox、Chrome等。样式也得掌握，以CSS2为主，多看看欧美牛人的风格DIV布局，特简约的那种。可用性也很重要，甭管有事没事总把用户放在心里，再买本工艺美术理论方面的书，有事没事就翻翻，设计个按钮就得花个七八天的时间。交互更重要，现在不是Ajax，就是RIA的，你要是用alert弹框啊，你都不好意思跟人家说去，这样学下去，得学多少年啊？两年时间？那是入门。四年以上？你还别嫌多，就是复杂。认真掂量下这些技术，学好其中的任何一门都要花好几年工夫。什么叫成功的前端开发人员？就是不但代码写得好，还要懂设计，懂美学。所以，前端开发的口号就是：不求最好，但求最全。
1. 角色的特殊性
也许有人会问：“为什么一个做页面的人要掌握这么多知识？”前端设计师这个职位有其特殊性：前端作为与用户直接接触的一层，与用户的相关度高，需求变化频繁。用户不会关心数据库是MySQL还是Oracle，也不会关心你是用Java还是用.NET，用户关心的是按钮是否在正确的地方出现、提示信息是否排列整齐等之类的问题。这意味着什么？这意味着前端更需要设计良好的架构。但是由于其自身的特殊性，想要做出良好的抽象是比较困难的，当然也需要日积月累的实践。
2. 知识的多元性
对于刚入行的朋友来说，前端开发领域所需要学习的知识非常多，它们犹如一块块零散的拼图碎片（如图1-8所示），看似存在联系又独立存在。这些知识往往关联性不高，常常还是一些跨领域的知识的融合，这些因素均造成整个前端开发领域的知识的学习很难速成。此外，由于许多前端开发人员的知识面单一，直接造成了前端架构的无序和混乱。


图1-8  前端领域的知识犹如零散的拼图碎片
可以说前端开发的学习曲线比较特殊，会存在一个明显的阶梯性的成长过程。在很长的一段时间内，你甚至会感觉自己停滞不前，但是请不要灰心，当你对相关的知识有了一定程度的积累时，你的水平就会上一个新的台阶。

1.2.4  前端开发人员如何自身定位
前面发表了很多关于前端开发的消极言论，比如，提到前端开发人员费力不讨好、前端开发的一些不规范现象、前端开发的学习曲线比较特殊等。这些是否暗示这个职业没有发展前途呢？答案是否定的，虽然目前前端开发领域确实存在这样那样的不足，但是笔者认为这个行业的未来是光明的。那作为一名前端开发人员要如何对自己进行定位呢？下面是一些建议，和大家分享一下。
第一，这是份很有前途的职业。选择新行业，选择新企业，选择新部门，这很适合一些刚入行的朋友们。互联网行业相对于传统行业算是新行业；如今的互联网公司也在蓬勃发展，公司的种类与数量都在上升；前端开发这块领域也正被业内重新认识，一些中高端和一些崭新的前端职业的出现就是一个可喜的标志。
第二，想一下自己是否适合和喜欢这份工作。Web 前端工程师并不是设计师，笔者更倾向于将这个岗位定位为开发人员。在这个岗位上每天接触到的更多的仍然是代码。如果你喜欢的是设计，那么应该适当调整自己的学习重点。Web 前端工程师应该是那种完美主义者。术业有专攻，多想想自己的职业规划，要有长远的打算，不能总是停留在网页设计这个初级阶段，要逐步地涉及用户体验、前端架构等领域。
第三，通过努力找到好的雇主。如果你将自己定位为 Web 前端工程师，那么去投靠对该岗位有一定认识的公司比较合适。现在国内的很多互联网公司已经逐渐开始重视中高端前端开发人员的培养，这是一个良好的契机。在这样的公司里会有明确的职位说明和职责范围，以及完善的培养计划。
也许你已经摩拳擦掌，想要投身到这个充满活力的行业了。在这之前，先让我为你梳理一下前端开发的知识体系，看看一名前端开发人员需要掌握哪些技术。

阅读了第1.2.3节后，也许你对前端开发所要掌握的技术有了大概的了解，下面我们再来看一下下面这段招聘信息：
网站前端工程师（Front-end Web developer）
工作职责：
负责网站前端设计及开发。
职位要求：
计算机相关专业，本科以上学历。
精通Java/Ajax/JavaScript/XML/CSS，有至少3年相关工作经验。
了解不同浏览器之间的差异，写出的代码具有良好的兼容性。
熟悉页面架构和布局，对Web标准和标签语有深入了解。
对用户体验、交互操作流程及用户需求有深入了解。
能根据设计效果图严谨落实界面，精确到像素意识。
有丰富的网站前端工作经验。

笔者认为上面这段招聘信息仅仅列出了一些基本的要求，一个优秀的前端工程师需要掌握很多与之相关的技术，绝大部分的团队都需要一个真正理解及应用这些技术的人才。正确地深入理解前端所应用到的各项技术和技能，并且能做到有的放矢，这对于个人及团队都是有利的。下面我们进行整体的概括。
1. 业内标准
关于业内标准，首先必须了解的是W3C的一系列标准，前面的章节中已经详细地介绍了，这里不再赘述，需要重点关注的有：HTML、XHTML、XML、CSS、JavaScript。
其次，根据你所归属的阵营熟悉一些标准，比如需要Java EE的相关标准或者是.NET的相关标准。
最后，需要掌握一些常用的前端设计的思路以及最佳实践。
2. 语言
在众多的开发语言中，属于前端技术的语言并不多，除了W3C所发布的HTML、CSS、XML等描述性语言外，还包括客户端脚本语言JavaScript等。另外还有一种语言也是非常重要的，即ActionScript，它是开发Adobe RIA的基础语言，Flex、Flash和AIR都采用它作为脚本语言。为什么这里要提到Flash？Flash并不是W3C标准，但它在目前的互联网领域中扮演着非常重要的角色。相比以前，如今声音、图像、动画、视频已遍布大大小小的网站，不管它们是以JavaScript实现的还是以Flash为基础实现的，今后的互联网都将是RIA的天下。而且目前90％的计算机都已安装Flash Player，基于Flash的应用将会越来越丰富。即使不知道如何设计一个Flash广告，你也要知道如何修改里面的字体，它与后台数据层如何交互。它的ActionScript编程是非常有趣的，它也是基于EMACScript这一标准的脚本语言，与JavaScript相似。本书不详细介绍Flash，有兴趣的读者可以关注Adobe实验室网站：http://labs.adobe.com。
3. 视觉设计
视觉设计最早被应用于印刷宣传，电影海报、报刊杂志等传播媒体都可以理解为平面设计或图形设计，它们是利用视觉符号来传递各种信息的。随着科技的日新月异和互联网的发展，视觉设计在互联网这个大媒体中的作用越来越重要。不管是静态的网页还是画面炫丽的Flash动画或魔兽世界中的游戏画面，它们都离不开视觉设计。在软件系统领域中一般称视觉设计为UI（User-Inteface）设计。如果仅从UI来理解，那么它就是指界面设计，即在网页上看到的效果。抛开Web的话题，回到传统C/S模式的应用系统，那它要做哪些事情呢？我们先来看一下图1-9所示的苹果操作系统Xcode软件的界面。

图1-9  苹果操作系统Xcode软件
无论是软件的工具栏还是菜单等，Mac都为其提供了相应的接口调用，操作时只需要执行文本及命令即可。同样的，开发VB应用时，开发库已为你提供了丰富的UI组件，那开发这样的应用软件需要视觉设计师吗？回答是需要，因为视觉设计师的工作不仅是将控件美化，为其加上一些色彩，对于Web视觉设计师来说，他还要将信息架构的内容友好且美观地表现在浏览器上或是PS工作区中，就像传统的海报设计一样，它还需要应用排版和字体。
我们常常会发现，UI设计师设计出来的稿子无法进行HTML编码，有些背景根本无法实现，或者只能像十年前的网页一样，通过先使用Photoshop画界面，然后转换到Firework切片，再自动导出为HTML这样一个工作流程来实现，得到的网页中全是图片，这样的效果是不符合目前的Web标准的。
所以，在了解色彩设计的同时，我们还需要了解Web的排版艺术及交互艺术。对于Web应用的视觉设计，不仅需要了解诸如Photoshop这类画图工具，还需要了解设计Web应用的一些方法，如布局、排版、色彩、字体、表单等的设计方法，能迅速将PSD文件内的要素或PNG图片的特殊效果通过HTML、CSS等代码来实现，比如，需要将相册内的所有图片都加上属于自己的印章，则首先应该想到要将印章制作成PNG格式的透明图片，再使用CSS的一些技术给相册图片加上印章。
视觉设计是前端开发的一项基础技能，前端开发的一个重要意义就是给予用户良好的视觉体验。
4. 交互设计
一般做UE的人都会强调可用性的概念，将可用性视作产品设计的最高层次。软件是人与机器的交互，这是软件所体现的“能力”。在ISO中这样定义可用性：某一事物的可用性应当可以以效力、效率、满意度三个维度进行衡量。效力即用户可以完成任务，效率即用户完成任务的快慢，满意度即衡量用户是否很享受完成任务的这个过程。不管是Web软件还是桌面软件，在可用性方面都必须遵守这三个标准。网站的可用性在很大程度上反映了其产品的人性化操作，这是交互设计中的一个部分。人机交互中包含的具体理论及技术如图1-10所示。

图1-10  交互设计概念图
从图1-10可以看出，从比较基础的界面设计开始到概念表达，都能够完整地贯穿整个软件交互设计过程。交互设计必须以用户为中心，应用“以目标为导向的设计”方法。从用户角度来说，交互设计是一种如何让产品易用、有效且让人感到愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在与产品交互时彼此的行为，了解人的心理和行为特点。交互设计体现在小到一个链接的设计，大到一个大的操作流程等的过程都应受到重视。这些年人们对于用户体验及可用性等的研究也越来越多。最后我们要明白，交互设计是一个过程设计，不管是开发DVD播放机还是开发互联网应用，都需要交互设计。
5. 表现层逻辑
很多前端开发人员并不重视这部分内容，在有的公司，这部分内容根本就不属于前端开发人员的责任范畴。但是笔者认为，表现层是页面与后端程序沟通的桥梁，作为一名出色的前端开发人员必须关注它，这将有助于应用的可维护性。单纯从页面的角度来讨论前端架构是比较片面的，这也常常会造成对于前端设计人员设计的页面或风格，后端开发人员没有办法实现的局面。因此，结合表现层的逻辑来考虑整个前端架构更为合理，比如，在实体设计的时候就可以考虑到未来在页面上要如何展现这些设计，是否能够实现原型的效果。前端开发人员介入表现层开发将有助于解决原来前端开发所存在的一些问题。
在软件体系架构中，三层的结构是最常见的，通常客户端不直接访问数据库，而在它们之间加入服务层，用于处理业务逻辑及数据访问。图1-11是最常见的Java EE三层结构图。

图1-11  Java EE三层结构图
表现层的实现上，在Java EE领域与.NET领域，主流设计模式是MVC（Model View Controller）模型。它强制性地使应用程序的输入、处理和输出分开。使用MVC应用程序被分成三个核心部件：模型、视图、控制器，它们各自处理自己的任务。MVC模型具有低耦合性、高重用性、便于维护、部署成本低等优点。
业内主流的J2EE MVC框架如下所示：

• Struts：Apache曾经最为流行的MVC组件，目前大量的Java EE项目仍然在使用。
• Struts2 ：Apache用Struts 和 WebWork组合出来的新产品，目前上升势头强劲，本书的后续章节将以该框架作为表现层逻辑的实现方案。
• WebWork：老牌的MVC组件，后来组合成了Struts 2，不过自身仍在发展。
• Spring MVC：SpringFramework整合自己Spring的优势推出的MVC组件，其用户也不少。
• JSF：这个是一个规范，Sun、Apache、Jboss都有各自的实现，用户量很大，被众多IDE支持。
• Tapestry：最彻底的MVC开发框架，有丰富的组件资源，重用性很高。

6. 兼容性技术
兼容性所引发的问题近年来逐渐引起人们的重视，其实兼容性问题一直都存在，为什么如今才这么引人关注？这是有原因的。
首先，IE正在失去一家独大的局面，曾经IE占据浏览器市场90%的日子已经一去不复返了。同时，由于IE6、IE7、IE8对于W3C标准的支持程度都不尽相同，IE体系内部已经存在了兼容性的问题，再加上FireFox、Chrome等浏览器的强势崛起，各厂商与IE间的兼容性问题逐渐显著。
其次，在Web 2.0时代，随着Ajax技术的普及与发展，时常用大量的脚本与DOM操作来实现页面上的各种特效，在DOM操作、XML解析、创建异步通信对象等常用操作上的浏览器兼容性问题就逐渐显现出来。
最后，随着3G时代的到来，手机接入互联网的速度已经有了空前的提升，3G手机用户可以直接访问普通的网页。这时，要解决手机显示屏尺寸与普通显示屏尺寸不匹配而引起的用户体验的问题，需要考虑在布局框架上做相应的调整来实现兼容，然而布局又恰恰是浏览器兼容问题的“重灾区”，在各互联网应用越发重视手机用户的今天，此类问题自然越发引人关注。
因此，作为一名前端开发人员，必须掌握以下各个主流浏览器的特性：

• Mozilla Firefox
• Chrome
• Microsoft Internet Explorer
• Opera
• Apple Safari

在掌握这些浏览器特性的同时，还需要掌握一些常用的Hack技术来解决一些兼容问题。
7. 开放服务
SNS网站的兴起，带动了国内外互联网的新一轮盈利模式的变化。最早将Web应用API开放出来的应该算是Facebook，它通过开放API将自己变成了一个平台，让其他企业或者个人都能基于这个平台开发各种各样的应用。由于Facebook拥有大量的用户，每天都会产生近45个应用，每个人都能在上面找到适合自己的应用。继Facebook后，国内外互联网巨头也相继开放各自的API。
设想一下，如果明天我们将要去海南旅行，我们都需要做些什么？我们需要订机票、酒店、地图、导游，还有什么？还要有这样一个应用，打开某个网址，其网页内容中嵌入了各种需要的数据及航空公司提供的出行航班时刻信息，还能快速订票，Yahoo地图会告诉我目的地旅行线路，未来几天目的地的天气，Flickr可以展示网页旅行照片及酒店信息，等等，诸如此类的数据整合，前提是利用各大公司提供的API开发小部件应用，也称做Widget。目前国内的大多数SNS网站也纷纷提供了开放的API，这里我们只是举了几个常用的API的例子来简单地了解一下。希望在Web 2.0这样一个大环境下，能为用户提供更多的数据。不管是基于REST还是SOAP，前端技术人员都应该更深入地了解开放服务。
8. SEO
SEO（Search Engine Optimization，搜索引擎优化）是一种基于互联网的营销方式，主要作用是增强网站在搜索引擎中的曝光率，从而增加销售机会或信息共享。最直观的反应是网站信息在搜索引擎中的排名。SEO是一项技术，是遵循搜索引擎科学而全面的理论机制，对网站结构、网页文字语言和站点间的互动外交策略等进行合理规划部署来发掘网站的最大潜力，从而使其在搜索引擎中具有较强的自然排名竞争优势，对促进企业在线销售和强化网络品牌起到作用。有人认为SEO很简单，就是做个排名，其实真正的SEO是通过采用易于搜索引擎索引的合理手段，使网站对用户和搜索引擎更友好，从而更容易被搜索引擎收录及优先排序。搜索引擎优化是一种搜索引擎营销指导思想，而不仅仅是对百度和Alexa等的排名。搜索引擎优化工作贯穿于网站策划、建设、维护全过程的每个细节，值得网站设计、开发和推广的每位参与人员了解其职责对于SEO效果的意义。要做好SEO，首先要做的是什么？除了SEO技术本身外，还需要面对的是W3C的技术标准，准确地运用标签，该使用<h1>的地方不能用<h6>，该在<img>元素内增加alt属性的时候应该加上。如果能够做好设计和体验，那么做好SEO也就不是难事了。
9. 性能及安全
对于Web应用，性能与安全都是需要重点关注的问题，因此作为前端开发人员必须具备相关的知识，应该能够熟悉如何在开发高性能的Web应用程序的同时，保证应用的安全可靠，避免那些常见漏洞。
在网络安全方面，需要关注OWASP（Open Web Application Security Project）这个非营利性组织，其网址为http://www.owasp.org/。它致力于提高Web应用程序的安全可视性，帮助开发人员应对应用程序的安全风险。该网站提供了大量有价值的资料，比如一些指南性质的文档、检查表与规范以及大量针对提高应用安全性的开源项目，在这里不再赘述。
对于性能这方面，开发人员需要掌握一些基础的原则（比如Yahoo的12条性能准则），保证在开发阶段就能够提供高效的代码。同时还应该掌握多种性能检测工具，确保在应用出现性能问题的时候能够进行准确定位，提供有效的解决方案。
10. 基本素质
上述提到的都是具体的技术概念，作为一名前端开发人员还需具备一些重要的素质：团队合作能力、沟通能力和掌握正确的开发流程。
良好的团队合作能力与沟通能力是每一个开发人员都需要具备的素质。与后端的开发人员合作，设计良好的前端架构，与用户接触，得到用户需求，这些都依赖于良好的沟通能力。尤其是需求挖掘，这是一个漫长的过程，如何在与用户的沟通中获取真正的需求，如何引导用户得到他们真正想要的东西，这些都建立在与用户良好沟通与信任的基础上。
掌握正确的开发方法和开发流程也至关重要，处理事情的方式的正确性将直接决定产品的质量与流程的可控程度。

“工欲善其事，必先利其器”，现在开发Web应用和前些年相比已经完全不同了。早些年开发ASP应用时，只需要掌握如何应用Dreamweaver就行了；而现在Web应用得越来越成熟，开发语言也更多样化，特别是在Web标准、兼容性、性能、调试、设计等方面得到了广大用户的重视，基于Web的工具应用也越来越多。这些工具能辅助我们在开发效率、思维拓展、协同工作等方面进行改善。下面的小节中将列举一些前端开发人员所必须掌握的工具，相信它们能给我们的工作带来便利。

1.4.1  设计类工具
Adobe公司旗下的一些软件是我们最常使用的工具集，下面分别介绍其中的一些软件。
Adobe Photoshop作为一款最早用于平面设计的软件，现在也常被视觉设计师应用于Web的视觉原型稿制作。视觉设计师可以根据线框图原型稿进行视觉设计，最终完成真实的Web视觉原型，交付评审。同时Photoshop还可以用于切割图片，将视觉稿切割成小图供编码人员使用，一些背景图、PNG图、CSS精灵的整合图片都离不开Photoshop这款史上功能最强的图像制作软件。
Adobe Flash动画制作软件虽然是制作矢量动画的软件，但是它已成为Web中不可或缺的元素，从主题广告到交互动画，都离不开Flash。
Adobe Fireworks的推出满足了网页设计师的一些需求，如切片、添加热点等，既可编辑位图，也可编辑矢量图。如果要制作一些GIF小动画，用它来编辑比用Photoshop要方便得多。
Adobe Dreamweaver是快速的HTML/CSS/脚本编辑软件，提供了自动补全功能，同时还提供所见即所得的功能。如果你不善于记住每个HTML/CSS属性，那么Dreamweaver是最好的选择。

1.4.2  原型类工具
产品原型设计的形式比较多样，可以是图表，也可以是HTML，在实现的工具上也有许多选择，一些常用工具就能够简单实现（如Photoshop、Office），当然还有一些专业的工具能帮助我们更快捷地设计。

• Adobe Flash Catalyst是Adobe公司新增的Flash平台产品，面向的是设计师及开发人员，它提供了一种协作平台，为设计师和开发人员架起一座沟通的桥梁。如果你没有开发Flash应用，那么用它来进行交互原型的开发是很简单的。
• Balsamiq Mockup是一款类似手绘涂鸦风格的界面原型工具，采用Adobe AIR技术开发，包含丰富的界面组件，可以帮助我们设计任何界面原型。
• Axure RP是一款功能很强大的原型工具，能帮助网站需求设计者快速完成原型文档、交互界面、功能流程，可以直接生成浏览器Demo版本或Word文档，它的特点是能够开发一些交互性的原型，在第2章中我们将提到它的一些简单用法。
• Pencil最早只是Firefox的插件，后来基于XULRunner发布了桌面版应用，程序使用XUL进行开发，可以用来作原型图，它也是一款不错的工具。

1.4.3  调试类工具
在前端开发中，主要以调试HTML、CSS、JavaScript为主，在编写前端应用中都需以Firefox为主进行开发。在Firefox中表现良好了，在其他的浏览器中当然也不会有特别异样的地方。IE、Firefox、Chrome、Safari、Opera等浏览器一个都不能少，特别要提到的是Firefox，它的插件非常丰富，我们主要应用两款插件完成前端的调试工作，其他丰富的组件可以访问https://addons.mozilla.org/zh-CN/firefox/browse/type:7。
1. Firebug
Firebug在Firefox的插件中属于五星级的插件工具，它集合了查看HTML结构及样式、实时编辑等功能，是开发HTML、CSS、JavaScript的得力助手，我们可以利用它全面了解页面，可以对任何网页的CSS、HTML、JavaScript进行实时的编辑、调试和监控。如图1-12所示为Firebug的运行界面。

图1-12  Firebug运行界面
2. HttpWatch
HttpWatch是一个老牌的调试工具，支持与IE和Firefox的集成，通过工具可以看到整个页面交互的详细过程，见图1-13。

图1-13  HttpWatch页面视图
对某个URL请求的具体细节也可以一一概览，比如Header内容、Cookie内容、响应时间图、提交信息、流信息等，见图1-14。

图1-14  某次URL请求的Header信息
该工具同样还支持一些报告的生成与分析。这些强大的功能有助于开发人员进行性能分析与问题定位。
3. Yslow
Yslow是由Yahoo开发的一套网页评分插件，共有12条使用准则，使用它可以评估网页设计上的不足之处。它还提供了许多改进意见，Yslow与Firebug集成在一起，所以需要先安装Firebug插件才能使用。使用Firefox访问https://addons.mozilla.org/zh-CN/firefox/addon/5369，点击“添加到Firefox完成安装”，重启浏览器即可使用Yslow。打开右下角仪表盘图标，运行测试，Yslow将对网页进行分析，并给出评分及建议，见图1-15。

图1-15  Yslow的分析与建议
根据Yahoo提出的性能优化最佳实践法则，共分7大类、35条准则，如基于内容方面的10条为：

• 尽量减少HTTP请求
• 缓存Ajax
• 推迟加载
• 提前加载
• 减少DOM元素数量
• 使用域名划分页面内容
• 尽量减少iframe的数量
• 尽可能地减少DNS的查找
• 避免404错误
• 避免页面的重定向

针对这些前端页面开发准则以及如何优化性能，在第7章将有较详细的解释。
4．Microsoft Expression Web SuperPreview
Expression Web SuperPreview支持开发人员在不同的浏览器中模拟呈现Web页以检测布局问题。SuperPreview既有独立的安装版本，也可以集成到Expression Web。如今的浏览器除了Firefox和IE，还有Safari、Opera和Chrome的跨平台版本，以及大量的手机浏览器。除此之外，这些浏览器又有多个版本，它们又有很多不同的呈现特性（如IE 6、IE 7和IE 8）。
当今的Web开发人员面临着如下困境：

• 大多浏览器的不同版本不能同时存在，应以新版本替换旧版本。所以，在同一台机器上不能同时安装IE 6和IE 7（除非使用虚拟机或者不稳定的注册表技巧）。
• 很多浏览器同时支持Mac和Windows。开发人员至少要在Mac Safari中进行测试，而Windows版的Safari中呈现的内容却有所不同。
• 浏览器的人体工学测试则更加糟糕。大多数开发人员要加载他们的网站到演示服务器上，而服务器上却运行着不同的浏览器，他们不得不在每一台机器上手动加载，然后在每台机器上对不同的浏览器进行比较。

SuperPreview这款调试工具正好能帮你解决这些燃眉之急。它需要.NetFramework 3.5的支持，可到微软官方网站下载它的预览版。预览版只支持IE 6、IE 7和IE 8，想要支持更多的浏览器请购买商业版的产品。下面让我们一起看看效果。
SuperPreview的工作区页面见图1-16，整个页面非常简洁清晰，可以打开多个窗口来浏览同一个地址在不同浏览器中的显示效果。

图1-16  SuperPreview的工作区
以著名的门户网站为例，效果见图1-17。图1-17的左侧为IE 6的显示效果，右侧为IE 7的显示效果。看来该门户对IE6与IE7的支持都很不错，在这两个浏览器下都可以正常地显示页面。

图1-17  SuperPreview分别显示IE 6与IE 7的效果
不过精确到某个DIV的高度和宽度，IE 6与IE 7下显示的效果还是有显著区别的，通过层叠视图就可以看出（见图1-18）。

图1-18  SuperPreview的层叠视图效果
有了这样一款工具，相信可以很好地节约你解决IE各版本兼容性问题的时间。

1.4.4  辅助类工具
为了提高Web的性能，需要将脚本用样式文件压缩一，即减少文件的大小，将不必要的空格等去除，同时也可以将脚本中的变量等进行混淆。YUI Compressor是值得推荐的压缩工具，它的压缩比大约为50%，详细信息可以参考Yahoo开发者网络。
在进行CSS Sprites样式开发时，经常需要对Photoshop中制作的图片进行测算，比较麻烦。这时可以利用CSS Sprites样式生成工具快速地测算每张小图的位置，具体参考http://www.cssforest.org/blog。关于CSS Sprites的内容在以下章节中将详细描述。
Web中必不可少的就是颜色。碰到你喜欢的颜色，可又不知道它的值，该怎么办呢？除了使用Photoshop进行取色外，还可以使用Yahoo提供的取色软件（PickColor），既方便又快捷。除了取色，配色也是件麻烦的事情。如果没有好的配色方案，那么Adobe Kuler可以为你提供很多方案，还可以将完美的配色方案导入Photoshop中使用。

作为一名前端技术人员，我们应该体会到众多前人为这万紫千红的互联网世界所付出的心血与汗水。我们所做的不只是将后端的数据展现在一个HTML页面之上，还应该正确地理解基于Web的每项技术，合理地串联它们间的关系，通过互联网为用户服务。前端开发不单纯是技术问题，要从思维和概念上对前端开发有全新的理解。

本章内容

•   UCD—以用户为中心的设计原则
•   交出第一份设计稿
•   让工具帮助你
•   小结

Web 1.0是商业，Web 2.0是用户（见图2-1）。
—Ross Mayfield（Socialtext CEO）

图2-1  Web 2.0就是用户

打开网页，你是否总是希望你关注的消息显示在最醒目的位置？你是否有过这样的经历：你更换了你常用的网上银行，只因为那家新的银行的转账操作比较简单？你又是否有过这样的想法：希望网页上只出现你想看到的内容？以上三个简单的例子代表了用户的三种特性：懒惰、有想法、喜新厌旧。
在这样一个用户需求日益变化，而互联网资源极其丰富的时代，如何才能吸引用户，如何才能创造价值？设计时遵循以用户为中心的设计原则是一个不错的思路。何谓以用户为中心的设计（User-Centered Design，UCD）？简单来说，就是以用户为中心进行产品的设计、开发和维护，一切都从用户的感受与需求出发，而不是让用户去适应产品。要做到这一点，就必须时刻关注用户习惯、视觉感受、交互方式等细节。
UCD的标准流程是从用户调研开始的（见图2-2），根据调研的结果得出用户需求。此后进入设计阶段，经过原型设计、可用性设计、模型设计等一系列步骤，直至最后产出初始版本供用户试用。在用户试用后，将针对试用报告继续完善设计，直至整个产品完成。在这个流程中，用户始终处于主导地位，在部分环节中用户甚至会直接参与。

图2-2  UCD的简单流程图

2.1.1  关注用户
图2-3为2005年贝恩咨询为362家企业所做的一项调查，其中95%的企业认为自己关注用户，80%的企业认为自己向用户提供了优秀的体验，而在这些被调查的企业的用户中，只有8%的人也这样认为。虽然调查的结果不尽如人意，但是结果表明，大家都希望关注用户。

图2-3  数以万计的互联网应用

1. 用户群分析
提到关注用户，很重要的一点是要弄清用户是谁。我们的应用究竟是为何人而做的？他们都具有什么样的行为特征？要解答这些问题，我们需要进行用户群分析，将我们所要面向的用户分类。分类的维度多种多样，简单的维度有：性别、年龄、职业；较为特殊的维度有：是否有网上购物经历，是否使用苹果操作系统，是否喜好喝红酒，等等。这些维度的穷举需要研究人员的头脑风暴，当然也需要一些火花。每一个用户群都具有相应的显著特征，而这些特征都将对后续的设计与分析有重大的参考意义。为了加深我们对用户群的印象，看看下面这个例子（见图2-4），你是否可以猜出这是一群什么样的用户？

图2-4  一款知名手机的用户

他们具有如下特征：

• 认为拥有最酷的数码产品的异性最有魅力
• 通过发短信或者发送E-mail分手
• 经常使用手机观看节目
• 如果异性使用过时的数码产品，他们会觉得很倒胃口
• 与其他的手机用户相比，他们更觉得自己是媒体爱好者、性格外向者和知识分子

不知道你是否已经猜出来了，他们就是iPhone的用户，这些调查数据来自Retrevo（国外某电子数码产品搜索引擎，消费者通过它可以快速而方便地找到自己喜爱的电子产品的详细信息）的一项调查研究。因此，下次你在与使用iPhone的异性朋友约会时，一定不要在他们面前拿出你那部经典的过时的手机。
用户群分析一般有以下几个要点：

• 按照之前的维度进行用户群分类
• 分析不用群体的使用习惯
• 为不同的用户群制定不同的方案
• 确定用户群的重要级别

表2-1是某购物网站一次项目升级的用户细分。
表2-1  某购物网站对用户行为的分类
分类               典型特征                            方案
浏览者   只看不回，以顶帖为主                为他们提供方便的检索及友好的推荐
参与者   会回帖，在有强烈抒发意愿时会写帖    为他们提供简单的发布方式
分享者   积极写帖、回帖，渴望认同、奖励      为他们设置排行榜，提供及时的用户反馈
以上就是这次项目升级所涉及的三类用户，他们的特点鲜明，有着自己的需求，我们为他们制定了相应的解决方案。
2. 人物角色分析
用户群代表了具备某种用户特征的用户的集合，为了便于后续的设计及分析，我们往往在用户群的基础上将这些特征与属性细节化、具体化，形成典型人物角色。人物角色这个概念在《the User is Always Right》这本书中有详细的阐述：人物角色是对网站目标群体真实特征的勾勒。每个人物角色都是一个原型，代表的是一群真实的人物。人物角色概括了用户的研究，并使得研究成果栩栩如生。这些人物角色都将被文档化应用于后续的设计中。人物角色是一种有效的沟通工具，保证产品设计人员与开发团队对用户需求的理解统一。有的团队甚至会把人物角色卡直接贴在醒目的任务白板上，让设计人员思考怎样设定搜索功能会让用户使用起来更方便呢。
图2-5所示是一个人物角色卡范例，你是否也可以一起动手让自己的用户具体起来呢？

图2-5  人物角色卡

2.1.2  用户调研
用户调研是UCD流程的第一步，是以用户为中心设计的起点。在这个阶段中，用户参与程度最高，该环节的细致与否关乎后续的需求以及原型设计符合用户的程度。用户调研的方式有很多（见图2-6），诸如：问卷调查、可用性测试等。下面我们讲述这两种方式。

图2-6  用户调研的多种方式

1．问卷调查
问卷调查是一种最普遍的调研方式。它是将一些需要调研的问题整理成问卷调查表，再预设相关的答案由用户来作答，调查的用户对象一般就是认定的站点的主要用户（如何定位主要用户可参见2.1.1节）。下面是一个简单的范例：
问：通过安装免费的手机客户端软件可以帮助你极其简单地在网站上发布信息与共享资源，你是否会尝试安装？
答：1.肯定会 ；2.很有可能会；3.需要考虑一下；4.肯定不会。5.手机可以上网？；6.什么是手机？
通过类似的问题，你可以在一定程度上掌握用户的想法，不过用这种方式收集的用户想法可能存在一个问题—答案不真实。
一般来说，一份问卷调查需要的时间大概是20～60分钟，我们无法保证调查对象在这个时间段都能认真地作答。笔者本人对此深有体会，往往答到了调查问卷的后面部分，我很难保持思想集中，脑子里只有一个念头：“这鬼东西怎么还没结束？”因为大多数问卷都太冗长了，而且答案很难选择。因此，在设计问卷的时候应该注重这部分内容。首先主观题不能太多，其次答案的设置应注重引导，答案的辨析度与区分度要高，不要给用户模棱两可的答案，干扰用户作答。
下面介绍一下问卷调查的一些技巧与建议。

• 真诚待人

进行调查时需要平等、真诚地对待每一位受访者，这就要求访问人员应该在访问过程中与受访者建立信任的关系。这一切都是从细节中逐步建立起来的，比如一个令人赏心悦目的微笑；在访问的过程中，如果遇到了一些比较棘手的问题，访问人员应该坦诚地应对，而不是隐瞒自己的不足。更重要的是，不要随便为用户设定身份，比如在一次访问中，你发现坐在你面前的是一个看似举止行为粗鲁的中年男性，因为他的长相就和电视剧中常出现的那种类型的人非常吻合。于是你断定他是一个非常可怕的访问对象，同时主观地认为这样的人员显然不能给你的调查带来什么有效的反馈。接着你准备草草地处理这次访问，但在随后的访问中，你却发现这位先生和你想象中的完全不同。这样的情况是不是很常见？比如，刚才帮你扫地的人居然是董事长，这样的事情在现实生活中时有发生。因此，不要随便地定位你的用户，要认真地对待每一个人。

• 主动适应，适当引导

之前提到了答案的设置需要考虑用户的回答，访问过程中也是一样，应该主动适应用户的习惯，同时需要适当引导用户，帮助他完成访问。你会遇到各种各样的访问者，有的内向，有的外向，有的沉默不语但是一鸣惊人，有的滔滔不绝但是无关信息太多。这就要求访问人员应该主动观察用户的习惯，并且主动适应他。比如，笔者在一次调查中遇到一位极其腼腆的女士，沟通一直不大顺利，笔者便尝试着去适应她的说话节奏，同时适当地引导、帮助她把想表达的东西描述出来。可以多使用“我是不是可以这样理解”这样的语句与用户确认，保证用户反馈的准确性。

• 不忽略细节

不要忽略任何一个细节。你需要用户原汁原味的答案，而不是经过自己异化过的结论。比如，在一次访问中笔者问道：“你觉得这样指引式的操作方式是否比较清晰？”“嗯，我觉得—我想应该算清晰吧。”这是一个非常奇怪的回答，似乎并没有把话说完。在几次刨根问底后，笔者终于清楚地知道了他要表达的意思，他认为这样的方式对于我们的用户应该是挺合适的，但是他个人就觉得繁琐了。笔者随即表示：“你就是我的用户，请说你最真实的想法。”在访谈过程中，用户的一颦一笑我们都需要留意，这些都可能是有用的信息。有的访谈还需要录音，就是为了尽可能地保留用户留下的信息。
2．可用性测试
一起来看看下面这份2009年全球著名的搜索引擎网站的眼球活动跟踪研究报告（见图2-7）。当时，该公司担心在“通用搜索（universal search）”界面中加入缩略图会让用户分散精力，因此通过可用性测试来验证。
研究人员在报告中称，缩略图不会对用户浏览过程产生重大影响。相反地，当缩略图和用户搜索内容无关时，用户更容易忽略这些搜索结果。他们还指出浏览搜索结果页面、目光停留的位置，以及点击什么内容等几乎完全是下意识行为。

图2-7  眼球活动跟踪图

可用性测试是一种直接的用户调研方式，通常邀请一些特定的用户对将要发布的功能进行试用，而设计人员则在一旁观看用户的使用情况。测试结束后，将获取到的用户信息进行相应的分析，有条件的企业还可以使用眼动仪这样的设备来分析用户的眼球活动情况。关于可用性测试更为详细的阐述以及可用性测试的案例请参见4.3节。

2.1.3  更含蓄的方式
当你在商场、健身俱乐部或者百货公司里观看大屏幕上的广告（见图2-8）时，有个别广告也在盯着你看，而且这类广告会越来越多。这类广告系统将根据摄像头上收集到的信息，为你播放合适的广告。也就是说，如果你是男士，为你播放的广告可能是关于剃须刀的；如果是女士，则可能是化妆品；如果是小孩，则可能是一款新的电子游戏产品—这是Adspace公司正在尝试的一个项目。这个项目的典型思路是：通过隐性的手段收集用户的数据，然后进行相应的分析，得出用户的需求，与用户调研（我们称之为显性收集的方式）相比，这种方式显得比较含蓄。

图2-8  LED广告看板

有这样一个公开的秘密：很多网站都在或多或少地收集你的信息—性别、职业、年龄、兴趣爱好、使用习惯等。如果可以的话，你的家人的信息应该也在收集的目标范围之内。当然，你不用恐慌，至少目前来看，他们这样做的目的只有一个，就是更好地为你提供服务。
用户从最初由于IP被收集、所在地被暴露而惊诧，到现在欣然接受各大网站发来的广告与产品，用户行为数据采集与分析已经取得了很大的进展。下面介绍一下两种常见的用户数据的形态。
1．服务器端数据
服务器端数据通常由以下部分构成：Web 服务器日志文件、网络监视器中收集到的数据和服务器端存储的其他类型的信息。比如，用户提交的用户资料、与其相关的交易数据或者是一些通过隐藏域的方式收集到的用户信息，这类数据有一个显著特点—数量巨大。
以Apache的访问日志为例（见图2-9），它记录了用户访问站点的数据，每当站点的资源被用户访问一次，Web 服务器就在日志文件中添加一条相应的记录。这些记录数据反映了用户对Web站点的访问行为，此类数据是较早被收集和利用起来的数据。

图2-9  Apache的访问日志

另一种典型的方案即服务器端实时数据分析，在站点中置入相应的跟踪代码，就可以进行服务器端数据的实时收集与分析，将大量的服务器端数据以可理解、直观的方式展现，见图2-10和图2-11。

图2-10  直观的数据概览

图2-11  访问趋势图表

2．客户端数据
客户端数据采集是近年来业内研究的一个热点，它建立在用户的行为源上，与服务器端数据采集相比，它显得更加直接有效。此类数据有一个特点—容易理解、不易收集，比如，与用户鼠标移动的轨迹或用户鼠标停留的区域相比，用户鼠标点击的区域更接近真实行为的数据。业内通常采用Java Applet、脚本技术、插件技术以及网页跟踪等来收集客户端数据。此方式收集的数据比来自服务器端的数据更加直接且准确，当然结果也是令人拍案叫绝的。
图2-12就是曾经在搜索引擎领域盛传的百度与国外某搜索引擎的鼠标热点图。从这张图上可以发现两个网站用户行为的显著区别，这对站点后续的设计和相关战略都是非常有用的。几年前，有一个统计领域的专家说过这样的话：搜索引擎，在技术上能够足够做到分析你是一个男人还是一个女人。当然，这一切的基础都源于数据的收集。

图2-12  百度与国外某知名搜索引擎的鼠标热点图

3．数据挖掘
面对浩如烟海的各种数据，我们往往手足无措，我们需要一种手段将大量的数据转换成便于理解的模式及过程。数据仓库技术与数据挖掘技术就是这样一种手段。20世纪90年代以来，数据挖掘技术得到了长足的发展。为了强化对数据挖掘技术的印象，这里举一个数据挖掘领域最经典的例子。
这个例子的主角是尿布与啤酒，这是发生在美国沃尔玛连锁超市的真实案例，并一直被商家所津津乐道。沃尔玛拥有世界上最大的数据仓库系统，为了能够准确了解顾客在其门店的购买习惯，沃尔玛对其顾客的购物行为进行购物篮分析，从而知道顾客经常一起购买的商品有哪些。沃尔玛数据仓库里集中了其各门店的详细原始交易数据。在这些原始交易数据的基础上，沃尔玛利用数据挖掘方法对这些数据进行分析和挖掘。
一个意外的发现是：“跟尿布一起购买最多的商品竟是啤酒！”经过大量实际调查和分析，沃尔玛揭示了一个隐藏在“尿布与啤酒”背后的美国人的一种行为模式：在美国，一些年轻的父亲下班后经常要到超市去买婴儿尿布，而他们中有30%～40%的人同时也为自己买一些啤酒。产生这一现象的原因是：美国的太太们常叮嘱她们的丈夫下班后为小孩买尿布，而丈夫们在买尿布后又随手带回了他们喜欢的啤酒。按常规思维，尿布与啤酒风马牛不相及，若不是借助数据挖掘技术对大量交易数据进行挖掘分析，沃尔玛是不可能发现这一数据内在的有价值的规律的。
数据挖掘技术往往可以从采集的用户数据中获取一些隐含的、有新意的用户信息，而这些信息都有助于指导我们的设计。
在用户调研过后，我们便可以开始原型设计了。那就动手吧，交出你的第一份设计稿。