HTML5触摸界面 提升网站速度，创造惊人的用户体验

    设计与开发

    人民邮电出版社

    北 京

    【美】 Stephen Woods 著

    覃介右 谷 岳 译内容提要

    本书专注于触摸界面的开发，内容结构和优化网站思路大概一致。上半部分涵盖了能

    使各种网站，特别是移动网站变快的基本概念。第2章和第3章告诉你如何创建一个

    简单的网站，并使其加载速度快。第4章可以帮助你使用缓存来提高用户再次访问时

    的速度。第5章是关于要摒弃一次性的页面加载方式和重构应用程序以使实际上和感

    觉到的性能都达到最优的。书的后半部分是专门讲触摸界面的，特别是尽可能地让它

    们更平稳和快速。本书适合具有一定经验的 Web开发者阅读参考。 献给“生鱼片”—最棒的猫致谢

    感谢 Jeff Riley、Nancy Peterson、Michael Nolan，还有 Peachpit 的工作人员，你们

    推动了本书的诞生，并让文字变得通顺。感谢Nicholas Zakas对本书非常细致、深思

    熟虑的批评，还有他在 Yahoo!的指导。

    还要感谢Stoyan Stefanov的终审和他在技术文章写作领域上的宝贵经验。同样感谢

    Guy Podjarny为本书付出的时间和做过的研究。

    如果没有我的经理Ross Harmes以及Flickr前端团队其他同事们的支持，绝不会有这

    本书的诞生。

    感谢 Benjamin为我展示了移动设备的众多用途。

    最后，感谢 Elise 容忍我每天晚上一连几个小时地盯着电脑和一堆手机。前言

    在我写作时, 11.42%的网页流量来自移动设备(根据StatCounter.com的统计数据)。

    这个数字一年前是7%，三年之前是1.77%。虽然桌面设备还会陪伴我们一段时间，但是 Web的未来是在移动设备上的。

    对于Web开发者，支持移动设备是自21世纪初的Web标准革命以来最大的变革。

    移动设备都搭载了支持HTML5的完全现代的浏览器。它们还装有容量较小的内存和

    缓慢的 CPU，经常通过高延迟的网络来链接。而且它们几乎全都有触摸界面。

    为移动设备开发就是为触屏开发。许多桌面Web开发中的技巧对于移动Web依然

    适用，不过有些却是完全不同—弄清楚这些不同会有一定难度。我写这本书来帮

    助你去弄清楚它们。

    谁适合读这本书

    这本书是为两类读者写的 :

    ■ 经验丰富的 Web开发者，但从未开发过移动或触摸界面的网页，想要学习

    ■ 一直致力于让他们的移动版网站更优秀的移动站点开发者

    这本书不适合绝对的初学者。你需要有Web前端的背景知识：HTML、CSS和

    JavaScript。对 HTML5、CSS3 的新接口和功能有一定经验会更好。

    最重要的是，这本书适合那些并不觉得他们的移动网站已经足够好的人。如果你想要

    建设一个迅速而流畅的网站，这本书再适合你不过。

    你将能学到什么

    本书专注于触摸界面的开发，内容结构和优化网站思路大概一致。上半部分涵盖了我

    认为能使各种网站，特别是移动网站变快的基本概念。第2章和第3章告诉你如何创

    建一个简单的网站，并使其加载速度快。第4章可以帮助你使用缓存来提高用户再次

    访问时的速度。第5章是关于要摒弃一次性的页面加载方式和重构应用程序以使实际

    上和感觉到的性能都达到最优的。书的后半部分是专门讲触摸界面的，特别是尽可能

    地让它们更平稳和快速。随着层层深入，本书也逐渐复杂深奥。如果你觉得后面的章节

    太难了，先尝试在工作中运用你所学到的东西，再回头来看我在本书末尾介绍的一些想

    法。一个好用的移动网站不需要双指缩放的功能。你需要用到什么

    如果你想要在本书中学到更多东西，除了你的电脑外，你至少还需要一台触屏设备。

    如果只能有一台，我推荐iOS6或Android 4的设备。如果条件允许，上述两台都有是

    最理想的了。

    开发移动网页时，设法利用尽可能多的设备。iOS和Android模拟器无法取代真机。

    在写这本书时，我使用了一台搭载 Android 4.0.4 的 Samsung Galaxy S III、一台

    iPhone 4、一台 iPhone 5、一台 iPad 1，还有一台 HTC 8X (Windows 8)。再用模拟

    器作为补充。

    在Flickr，我们拥有的设备和上述类似，不过还有一些Android平板和一台Kindle

    Fire。

    框架

    本书没有用jQuery或是其他任何JavaScript框架。你会了解到一些专用的库，不过

    我们还是尽可能多的关注原生的DOM API。这并不是说你应该避免使用框架或者

    远离框架!只是我想要确保你能理解这些东西最根本的原理。当你决定使用jQuery

    mobile、Backbone.js、Zepto.js或是其他框架时会更轻松，因为你理解其内部的工作

    原理。

    理解原生DOM API的另一个巨大的好处是，当你在某个库中找到一个bug的时候，你可以自行修复并创建一个包含你修复代码的 pull request，从而造福整个社区。

    配套网站

    本书上的所有示例代码和最新的改动可以在配套网站：touch-interfaces.com上找到。

    这些代码也在GitHub上做了镜像，在这你可以找到有关示例代码的issue，还可以提

    交到：https:github.comsawtouch-interfaces。欢迎进入移动网页

    网站是用HTML、CSS和JavaScript构建的。移动网站也是一样。只需要一个网页浏

    览器和一个文本编辑器就可以开始，但要更高效的话，我建议再多几个工具。

    工具

    最简单的过程，是用一个文本编辑器和桌面浏览器开发，然后在旁边准备

    一个触屏设备用来测试。

    一 个 文 本 编 辑 器 一 个

    WebKit内核的浏览器

    我 用 适 用 于 Mac OS X 的

    TextMate 2 (github. com

    textmatetextmate)，不过任

    何其他的编辑器都没问题。

    因为绝大多数的移动设备运

    行的是 WebKit 的浏览器，所以，你会发现 Chrome 或

    Safari 是能提高效率的必备

    工具。虽然与真实设备上的

    测试会有些不同，但它简单

    易用，必不可少。

    一个Web 服务器

    为了在真实的设备上测试网

    站，你需要通过无线局域网

    提供页面。在 Mac 上，我发

    现 MAMP (www.mamp.info)

    是一个非常方便的工具，不

    过使用内置的 Apache Web

    服务器同样可以。

    一台触屏设备

    没有什么可以替代一台真实

    的设备。如果你能负担得起

    的话，我建议至少有一台近

    期的 Android 手机和 iOS 设

    备。如果你只买得起一台，找到愿意借手机给你测试一

    段时间的人，会有很帮助。跨设备平台测试

    不能想当然地认为所有的Webkit的浏览器都是一样的。你应该在iOS 5、iOS 6、Android 2.3、Android 4.0、Android 4.1 (Chrome)、和 IE 10 里面测试你的 App。如

    果你不能直接使用这些设备，这里是如何对它们进行测试的指南。

    IOS SAFARI

    Apple 提供了一个相当好的

    模拟器 XCode。它可以模拟

    搭载 iOS 5 或 6 的平板和手

    机。它还支持结合 Safari 浏

    览器的远程调试。这真的是

    一个伟大的工具，假如你有

    一台 Mac，这是这堆工具中

    关键的一部分。 XCode 在

    Mac App商店免费提供。

    ANDROID

    谷歌提供了几乎所有版本

    的 Android 的 模 拟 器。 这

    些 都 可 以 在 Android SDK

    (developer.android.com

    SDK)中找到。只要有了

    Android SDK，就可以分别下

    载各种Android版本的镜像。

    请记住，这些都是谷歌官方

    的版本，Android 版本在实际

    设备上可能有很大不同。

    WINDOWS 8

    微 软 确 实 提 供 了 一 台 针

    对 Windows Phone8 模

    拟 器， 它 在 SDK(dev.

    windowsphone.com en-us

    downloadsdk)中。模拟器

    只 能 在 Windows 上 运 行。

    IE10 的移动版与桌面版是相

    同的，所以大部分 Debug 工

    作可以在桌面上进行，而不

    是在模拟器里面。

    DEBUGGING

    调试手机网站是一个苦差，但也有很多工具使其变得更

    容易。我提供了一些工具的

    列表，在配套网站上的附录

    A中。作者简介

    Stephen Woods是Flickr的一名高级前端工程师。自20世纪末开始，他一直致力于

    研发 Web 用户界面。他从 2006 年开始在 Yahoo! 就职。在 Flickr 之前，他开发了为

    Yahoo! 主页提供支持的 JavaScript 平台，还曾在 Yahoo! Personals 的 UI 团队工作。

    他是精通所有网站开发技术的专家，但他的主要兴趣是用网络技术制作响应式的用户

    界面。Stephen曾在SXSW和HTML5DevConf就触屏交互发表演说，并曾被《.NET》

    杂志报道。目录

    前言

    欢迎进入移动网页

    第 1 章 移动设备概述 0

    1.1 触屏设备和桌面设备之间的差异2

    1.2 广泛使用的设备 3

    1.3 HTML5 6

    1.4 神秘谷，是什么让触摸界面反应灵敏？7

    1.5 总结9

    第 2 章 创建一个简单的内容型网站 10

    2.1 选择一个观念：移动优先或置后12

    2.2 创建标记 13

    2.3 奠定基础的 标签 15

    2.4 理解 Viewport 15

    2.5 响应式的CSS 19

    2.6 总结24

    第 3 章 提高第一次加载的速度 25

    3.1 浏览器是如何加载页面的27

    3.2 为什么页面加载缓慢？ 27

    3.3 用YSlow 和 PageSpeed 提升速度 30

    3.4 解决常见的问题 33

    3.5 将它们全部放在一起 40

    3.6 总结41

    第 4 章 加快下一次访问的速度 42

    4.1 在HTTP中缓存 44

    4.2 为移动优化 45

    4.3 使用Web Storage 46

    4.4 应用缓存(Application Cache)53

    4.5 总结57

    第5章 使用PJAX 提升触屏体验 58

    5.1 页面加载的代价 60

    5.2 浏览器历史 API 62

    5.3 加入 PJAX 69

    5.4 总结 77第6章 轻触VS 单击：基本的事件处理78

    6.1 是什么让轻触不同？80

    6.2 触摸事件简介80

    6.3 处理轻触83

    6.4 总结89

    6.5 项目89

    第7章 CSS 过渡、动画和变换 90

    7.1 动画元素92

    7.2 CSS变换 105

    7.3 总结 111

    7.4 项目112

    第8章 JavaScript 性能最优化 113

    8.1 性能测试和调试115

    8.2 只写入DOM 116

    8.3 用户反馈的优先级117

    8.4 将它们一起使用：无限滚动118

    8.5 总结127

    8.6 项目127

    第9章 手势的基本内容 128

    9.1 为什么用手势呢？130

    9.2 创建一个循序渐进增强的触摸控制131

    9.3 创建一个触摸控制的灯箱(lightbox)136

    9.4 总结150

    9.5 项目150

    第10 章 滚动与滑动 151

    10.1 滚动 153

    10.2 布局失效159

    10.3 让鸟类浏览工具可滑动161

    10.4 总结176

    10.5 项目177

    第 11 章 双指缩放和其他复杂的手势 178

    11.1 了解多点触摸的限制和支持情况180

    11.2 处理多点触摸 180

    11.3 处理双指缩放 185

    11.4 总结195

    11.5 项目19502_BuildingTouch_012-029 R.indd 12 2213 4:19 PM

    第 1章

    移动设备概述02_BuildingTouch_012-029 R.indd 12 2213 4:19 PM

    一切都因 iPhone 开始。在这之前，手机网站就是其桌面网站的简化

    版。极少数浏览器能够支持 JavaScript，大多数浏览器只是将网站转化

    成适合小屏幕而已。iPhone 上的 Safari 是一个真正的 Web 浏览器，它

    支持 JavaScript 和 CSS。不仅如此，它还是一个非常前沿的浏览器。为

    iPhone 设计的网站可以使用一些新生的工具套件，即现在的 HTML5。

    如今，市面上有数百种的移动设备在售。它们千差万别，各有千秋，但

    它们有一个共同的特点：先进的Web 浏览器和触摸界面。HTML5触摸界面设计与开发 2

    1.1 触屏设备和桌面设备之间的差异

    大多数触屏设备是移动设备。为桌面设备开发网站的开发者最担心的是它们的网页能否

    兼容各种浏览器。所以，开发者很大一部分的工作是理解各种浏览器之间的差异。

    移动领域问题不在于各种浏览器，而在于不同的移动设备。当然，有几种不同的移动

    浏览器，并且它们之间的确存在一些差异，但大体上移动设备版本与其相应的桌面版

    本差异不大。移动设备和桌面设备真正差异在于以下浏览器的 4 个因素：

    ■ 规格 ■ 计算能力不足

    ■ 人们如何使用它们 ■ 触摸界面

    1.1.1 规格

    移动设备和台式电脑(或笔记本电脑)之间最明显的差异是尺寸。移动设备的尺寸比

    较小，所以搭载较小屏幕，且没有鼠标，大多数情况下也没有键盘。

    触屏设备目前主要有三种规格：手机、小型平板和大型平板。大型平板包括iPad(不

    包括 iPad mini)和各种 10 英寸的 Android 平板，如 Nexus10。小平板屏幕一般约为

    7 英寸，如 Nexus7、Galaxy Note和 iPad mini。

    所有这些设备上的浏览器始终都是全屏的。用户“调整”浏览器大小的唯一途径是通

    过旋转移动设备在横向和纵向模式之间进行切换。只为一种尺寸的设备优化并不困难，困难的是要确保你的网站适用于所有的设备。

    1.1.2 移动设备的计算能力不足

    写本书时，最强大的触摸屏设备是第四代iPad。它是性能强大的机器。根据相同的

    标准，它的性能与 2004年发布的 Power Mac G5—最后一代摩托罗拉版相同。

    可以肯定地说，大多数用户并没有使用最新和最强大的移动设备。大多数运营商提供

    “合约”手机，如iPhone 4和三星Galaxy Exhilarate，这些手机的运行速度要慢得多。

    它们的CPU性能和20世纪末、21世纪初最快的台式电脑差不多。iPhone 3GS仍然

    被广泛使用，它拥有单核处理器、256 MB的内存，CPU性能大致相当于最后一代与

    CRT显示器搭配销售的iMac。虽然移动设备的性能仍在继续增长，但与一般桌面电

    脑的性能相比，它们还是太慢了。值得高兴的是，大部分近期发布的设备都拥有独立

    的GPU。一个iPhone 4在性能上可以被认为是一台装有强大图形处理器，但性能稍

    逊的电脑。第1章 移动设备概述 3

    1.1.3 人们使用触屏设备的方式大相径庭

    人们使用手机和桌面电脑的习惯不同。人们使用桌面电脑一般是为了完成特定的工作，所以可能不会做很多其他的事情。至于移动设备，不论是手机还是平板电脑，通常人

    们都是在做别的事情的间隙来使用它们。他们可能正在乘坐公交车、排队等候或只是

    在参加一个无聊的会议。

    例如，你搭建了一个财经新闻网站。在桌面电脑上，用户可能会花费一段时间点击几

    次链接，然后用几分钟的时间阅读一篇文章。而移动用户可能正在做一件别的事情，只会在空闲时的几秒时间来完成上面的操作。桌面网站的速度一般不慢，但桌面用户

    的容忍时间更长。如果您的网站载入时间有一点长，用户就会切换到别的标签去看其

    他的东西，然后再回来。但在手机上，用户永远不会给你这样的机会。

    移动设备就是触屏设备

    所有在售的新型智能手机和平板电脑有着一个非常重要的共同特点：它们都具有触摸界面

    —在大多数情况下，还可以多点触控。合适的大小、美观的屏幕以及其他的先进功能，这

    些功能相对于使用触摸屏这样的革命性革新，都只是微小的改进而已。

    1.2 广泛使用的设备

    在2007年，iPhone刚出现时，没有任何一部其他的手机拥有真正能触摸感知的Web

    浏览器。也没有任何支持多点触控的设备。其他的智能手机大多数使用手写笔进行交

    互，当时市场上的几种平板电脑也是一样。今天，市面上流通的有数百种触屏设备。

    我们不可能了解每一种新设备，不过它们可以根据操作系统、规格、搭载的Web浏

    览器将它们分为几类。

    1.2.1 操作系统

    如今市场上有四种主要的操作系统适用于触屏设备：

    ■ iOS ■ Blackberry OS

    ■ Android ■ Windows 8

    Android 是目前手机上最流行的操作系统。根据 International Data Corporation (IDC)

    的数据， 2012年第三季度智能手机出货量的75%运行的是Android系统，14.9%

    运行的是iOS系统。其他操作系统的市场份额只有个位数(这不包括的Windows

    Phone 8，因为它在2012年 10月才发布)。HTML5触摸界面设计与开发 4

    iOS

    iOS是所有苹果手机和平板运行的操作系统。因为苹果控制着硬件，所以所有的

    iPad 和 iPhone 能以相同的方式运行，只有大小和处理能力上的差异。苹果推出软件更

    新时无需依赖运营商，这意味着，苹果设备更容易运行最新版本的操作系统。iOS开发者，David Smith，发现他开发的应用程序的用户中，有79.2%正在使用的iOS 6或更高

    版本(相对2012年12月)的操作系统，有94%的人正在使用5.1或更高版本的操作系统。

    注 : David Smith 会在他的网站(david-smith.orgiosversionstats)上更新这些统计数据。

    苹果随着操作系统的升级同步升级浏览器，它不允许用户安装不同内核的浏览器。至

    少现在，可以认为 iOS 用户主要安装着上一个较新版本的 iOS 和 iOS Safari。

    ANDROID

    Android的情况很不一样。Android是开源的，手机厂商有权自由定制成他们认为合适

    的样子，所以在手机之间实际的用户界面差异很大。

    Android 有三个主要的版本：2、3 和 4。Android 3.0(蜂巢)是平板专用操作系统。

    大约 50%的 Android 手机运行着 2.3.x(姜饼)。最新版本的 Android 4.1(果冻豆)

    并没有被广泛使用，在2013年1月，只有不到10%的设备在运行它，不过这一数字

    正在迅速增长。时下的“旗舰”手机，如 Samsung Galaxy SIII，仍然搭载着 Android

    4.0.x(冰淇淋三明治)系统出售。 Android 4.1同时支持平板电脑和手机。

    注 : 谷歌在developer.android.comaboutdashboards提供了各版本的统计

    Android包括一个默认的浏览器，而且允许让用户安装不同的浏览器。4.1版之后，Android上的默认浏览器改为了 Chrome。

    Kindle Fire

    Amazon Kindle Fire运行着高度定制版的Android，这个定制后的版本不包括任何原生

    的Android应用程序，并拥有自行研发的浏览器，称为Silk。值得注意的是，Silk因

    其在客户端设备和Amazon云上的运行能力而知名。这样可以显著地提高性能，尤其

    在高延迟的网络链接下。这对开发者有一些影响，我们将在第4章“提高下一次的访

    问速度”中阐述。

    BLACKBERRY OS

    Blackberry手机是最早真正获得成功的智能手机。但到了2012年12月，其市场份额已经

    迅速减少至大约 4.3%。Blackberry 也出售平板，称为Playbook。这两种设备使用相同的

    基于 WebKit 的网页浏览器。尚存的非触摸屏式的黑莓设备占据着智能手机市场的长尾。第1章 移动设备概述 5

    WINDOWS

    Windows Phone 8包含了微软第一个完全触摸式的浏览器。这款手机配备了内置的

    Internet Explorer 10，也就有了创建运行于HTML5环境的应用程序的能力。

    1.2.2 设备规格

    桌面和移动设备之间最显著的差异是规格。移动设备有两种主要的规格：手机和平板

    电脑。

    手机

    最常见的触摸屏设备是智能手机。除了极少数例外，它们都具有相同的基本规格：呈

    矩形并有纵向的触摸屏。开发手机网站时要考虑的最重要的事就是小尺寸的屏幕。需

    要保证交互元素的尺寸大到可以用手指来操控，并且内容能在小屏幕上展现得合适。

    平板电脑

    平板电脑的类型更多样化。它们中从微型的Galaxy Note(5.3英寸屏幕)到13英寸

    的Windows 可变形平板电脑。有些平板电脑，比如iPad，通常在纵向方向使用。其

    他的则是在横向模式下使用。就像手机一样，所有平板电脑都装有全屏的浏览器。

    尽管有着这样的区别，但实际使用中的平板电脑是差不多的：iPad的销量超过了所有

    的竞争者，并稳定赢利。唯一拥有两位数市场份额的其他制造商是三星。平板电脑最

    流行的规格是 10英寸(如 iPad)和 7 英寸(如 iPad Mini 和 Kindle Fire)。

    硬件图形加速

    正如之前所提到的，一部iPhone在性能上可以被认为是一台装有不错的显卡的性能

    稍逊的电脑。各个设备的CPU和内存各异，图形硬件也是这样。在Android 3.0之前，浏览器完全没有图形硬件加速功能。这意味着，某个动画的效果可能会在 iPhone 5 上

    流畅，但在运行 Android 2.3.3的旧手机上不会同样流畅。

    目前所有的移动设备在绘图上，都使用所谓的“共享内存”。与桌面电脑上的显卡不同，移动设备上的图形硬件没有专用的内存，只是共享系统内存。这意味着，随着越来越

    多的东西被添加到图形存储器，系统可用的内存会越来越少。在我们随后讨论图形加

    速时，牢记这一点很重要。

    1.2.3 浏览器

    幸运的是，浏览器的情况远没有移动设备复杂。WebKit无疑是最流行的移动浏览器

    内核，它支撑着所有的苹果、Android和黑莓设备的默认浏览器。Windows手机运行

    IE 10。最流行的另类手机浏览器是 Opera Mobile，但只有不到1%的市场份额。HTML5触摸界面设计与开发 6

    WebKit

    WebKit起源于名Konqueror的开源浏览器的引擎。苹果将它进一步开发为WebKit，即Safari背后的浏览器引擎。WebKit的是一个非常强大的引擎，也是第一代iPhone

    如此成功的原因之一。在 Android 4.1 之前，一个通常被称为“Android Browser”的

    基于 WebKit 的浏览器被安装在了 Android 设备上。4.1 时，它被同样是 WebKit 内核

    的“Chrome for Android”浏览器取代。

    基于WebKit内核的浏览器比较相似，但又不完全相同。不同的WebKit的浏览器之

    间的渲染行为非常近，不过因为存在一些小的分支，所以在功能支持上有很大不同。

    当它们出现差异时，我会提醒大家。

    iOS Safari

    iOS版的WebKit是iOS上唯一允许的浏览器引擎。它通常通过Safari浏览器运行，也可以在原生应用程序中通过 Cocoa UIWebView类运行。

    Android Browser

    Android Browser，即在Android中名为“浏览器”的应用，是Android内置的浏览器。

    它是基于WebKit的，但并不是Chrome。Android浏览器的功能在不同版本中有很大

    差异。令人惊讶的是，并不是越新版本的浏览器有越多的功能。Android 2.3.3的浏览

    器在某些方面比 4.0.1 功能更全面。我稍后会指出它们之间的差异。

    Android 版的 Chrome

    Android 版的 Chrome 通常比桌面版 Chrome 的稳定分支落后一个版本。在 Android

    4.1 Chrome已取代了先前的原生浏览器。

    Windows版的IE10

    IE10 不同于所有先前版本的 Internet Explorer，它与 WebKit 的功能相同或相近。

    IE10 有完全不同的触摸屏事件 API，但功能是相同的。

    其他浏览器

    还有许多其他的浏览器。最流行的是Opera Mobile和Firefox移动版，它们都适用于

    Android。这两种浏览器都非常强大，能实现的功能与WebKit大致相同。我会提醒大

    家它们语法的不同点。

    1.3 HTML5

    所有移动浏览器所共有的，为支持先进浏览器而存在的功能，被统称为HTML5。那

    究竟什么是 HTML5？第1章 移动设备概述 7

    严格地说，HTML5是指网页超文本技术工作小组(WHATWG)规定的标记语言和

    API集合。它通过定义能满足网络应用需求的功能，取代了HTML4，在HTML5提出

    伊始，就已经超越了 HTML最初以文档为中心的模型。

    实践中，HTML5已经成为一套标准化技术和新兴技术的代名词。这个新兴技术极大

    地拓展了传统的“Web堆栈”(HTML，CSS 和 JavaScript)。

    1.3.1 规范

    不像以前的 HTML 规范，WHATWG 决定不定义 HTML5 的正式版本。相反，HTML5

    (现在正式更名为“HTML”)是一个动态的标准，允许在一个临时的基础上增加新

    的 API 和功能。万维网联盟(W3C)正在努力创造一个官方的、规范的版本。

    由于HTML5是一个动态的标准，那么浏览器制造商增加新功能时，该功能可能还没

    有标准化。这意味着，不同浏览器之间在功能的整体上是类似的，但可用的特定功能

    和实现有差异。

    知道它们成为规范的原因是固然是有用的，但现在，开发人员需要知道不同浏览器各

    有什么特点，以及如何处理它们。在这本书中，我会注意哪些功能是已部分标准化的，哪些功能是新出现的。

    注 : HTML5 的“动态标准”规范写在了 www.whatwg.org 上，完整的

    W3C官方规范写在了w3.org 上。

    1.3.2 组件

    我们所说的HTML5，它的能力来自广泛的技术组件。用CSS3(以及来自浏览器厂商的

    尚未列入标准的其他CSS功能)创造动态和优美的界面，不会以牺牲响应效率为代价。

    在这本书中，我把HTML5作为更广泛的组件来考虑。不幸的是，目前完全“遵循规

    范”，不足以给我们提供能创建强大触屏交互的工具。未来，我希望有更多的标准化

    的功能和新的API。与网络相关的事总是让人兴奋，包括移动网络，因为它总是在变化，我们作为开发人员也必须随之改变。

    1.4 神秘谷，是什么让触摸界面反应灵敏？

    我有个两岁半的儿子。他从一岁开始就能解锁iPad并找到他想要的应用程序。他还不

    会说话，就会解锁iPad。我与其他家长交流意见，我的儿子并不是智商超群。触摸界

    面给了孩子们直观的感受：触摸和移动东西，是人类做的最基本的事情之一。触摸界HTML5触摸界面设计与开发 8

    面直观又强大。但它也很容易令人失望。

    有一个理论在机器人学里被称为“神秘谷”：机器人看上去越像人，就越对我们有吸

    引力，但当机器人的外形快要逼近真人的时候，会让我们觉得很奇怪，毛骨悚然。“谷”

    是机器人与人类相似程度与人类舒适度等级的映射关系的拐点。

    触摸界面让人感觉很自然，感觉像在移动周围真实的物体。不正确的运用时，给人的

    感受不是慢，而是失望。直接操纵的假象被打破时，触摸界面也不再让用户感觉自然。

    这种失望感仿佛掉进了神秘谷，用户不再感觉自然，而是感觉怪异。

    1.4.1 传送长奥布莱恩和直接操纵

    像我这一代的许多人一样，我第一次触摸界面是通过《星际迷航：下一代》。如果你

    没有看过的话，可以想象一下：船上所有的控制面板为触屏，实际上是多点触控界面。

    显然，这样做的原因完全是因为预算。电影的创作者希望在所有的控制面板中表现大

    量的复杂性，但一个以脱口秀节目的预算支付不起建造这些设备的费用。于是，他们

    想出了在胶片上印出界面，并在后面用灯光，创造出触屏的外观的方法。

    传送长奥布莱恩，也就是操纵这艘飞船的人，用三指滑动手势来发动飞船。我觉得那

    个手势真的很有趣。界面上有三个滑块，演员会自然想到去触摸和拖动滑块，就好像

    操纵真正的物体。这是人们所期望使用触摸界面的方法。当他们触摸屏幕时，能凭直

    觉感到，与它进行交互，就像在移动一个真正的物体。

    苹果的触摸接口指南称这个概念为“直接操纵”，而不是通过控制器来控制。在理想

    情况下，触屏界面给用户的印象是，直接操纵交互的东西。

    你会注意到，当传送长奥布莱恩的手指移动时，小指示器也在随之移动。这就能保持

    直接操纵的假象。小指示器也提供反馈，表明计算机正在记录他的动作。

    1.4.2 用户反馈

    我会想，用户界面只需让人感觉快，而无需真的快。只需及时响应—立即响应用

    户，让他知道有反应了。我最喜欢的例子是TiVo。这不是我现在的高清电视，而是在

    1999 年发售的 TiVo。那个电视盒有一个 54 MHz 的 CPU 和仅有的 16 MB 的 RAM。

    虽然TiVo有特殊的硬件对视频编解码，但从用户点击一个影片到开始播放可能还是需

    要一段相当长的时间。TiVo的投诉有很多，但从来没有人抱怨它的速度慢。这是因为

    TiVo有用户熟悉的哔嘣声。

    当用户点击一个影片时，能立即听到声音。我不知道工程师花费了多少时间才确保声

    音出现的及时性，这恰恰就是高明的地方。声音让用户能立即知道机器已经收到了他

    的请求。第1章 移动设备概述 9

    在网站的用户界面上，这种即时反馈是同样重要的。对于桌面电脑的网站，大多数人

    和设备的交互是分离的：点击后对应的效果出现。对于触摸界面，许多交互是连续的，因为它们是手势交互。当用户在屏幕上用手势操作时，不能等到手势完毕再做反馈，因为根据用户的了解，它们甚至会认为手势没有生效!

    我们来谈谈滑动。滑动是指在屏幕上移动手指来执行一些操作。理想的情况下，界面

    元素应该随着用户的滑动而移动。如果是在页面之间滑动，整个页面应该随着手指移

    动。如果界面不动，那么在滑动结束之前，就无法知道到底发生了什么。没有反馈的

    滑动手势会像一个键盘，在你输入一个字母之前，它不会有任何反馈。手势不能等到

    完成时才反馈。为了让界面感觉反应迅速，还必须是连续的反馈，当用户的手指移动

    的时候，界面也应该移动。

    如果用户在用手势操作，即使在操作完毕时，界面也必须跟着移动。如果界面在手势

    操作时中途停止移动了，就感觉像死机了一样。

    例如，如果你创建了一组幻灯片，用户可以在幻灯片之间滑动，当用户到达最后一张

    幻灯片时，你不会希望手势响应停止，用户会以为界面卡死了。而是让用户继续滑动，当用户松手时，应该快速地将前一张放进来。用户得到了她的手势已经被机器接收到

    了的反馈，只是幻灯片已经放完了。这是苹果如此严重地依赖在手势结束时的“迅速

    返回”的原因。这是告知用户已经到了最后，而又不破坏手势喻意的唯一办法。

    规范

    每个用户界面有它的规范。在桌面上有窗口、按钮、滚动条、关闭框。在移动界面，有一组新的规范。先行者苹果创建了两套 UI 规范。

    你不需要一切都与原生的iOS应用程序完全一样。但知道一些手势和元素在移动领域

    的意义十分重要：不要使用滑动手势来表示选择，因为原生应用程序中这表示删除。

    不要更改操作系统通常会保留的手势(比如按下并保持一段时间表示呼出内容菜单，双指捏紧为缩小，双击为放大)，除非你重新实现相同的基本功能。(你会在第10

    章中了解更多有关“滚动和滑动”的知识，在第11章中了解更多有关“双指缩放和

    其他的复杂的手势”的知识。)

    1.5 总结

    触屏设备总体上在不断变化，大部分Web浏览器之间的差异是很小的。虽然在性能

    上的差异较大，但只用 HTML5就足以在触屏设备上做出优秀的用户界面。

    鉴于触屏设备的性质，速度快是至关重要的。为了让它看起来更快，最重要的是要及

    时反馈用户。HTML5触摸界面设计与开发 10

    02_BuildingTouch_012-029 R.indd 12 2213 4:19 PM

    第 2 章

    创建一个简单的

    内容型网站02_BuildingTouch_012-029 R.indd 12 2213 4:19 PM

    第2章

    创建一个简单的

    内容型网站

    内容型网站组成了 Internet 的很大一部分。毕竟，网站就是为了

    浏览文本而建立的，人们在网上做的最多的事情就是阅读文字。内容

    型网站在触屏设备上保持良好的体验固然很重要，但实际上许多内容

    型网站做得还不够好。

    在本章中，我们将为客户—Awesome 鸟类基金会，建立一个

    关于加州鸟类的网站。鉴于人们普遍无法在家中观赏鸟类，我们网站

    目标就是通过移动设备和桌面电脑，使之成为可能。客户想让数以

    百万计的网站文章被链接到 Twitter 上，用户通过点击即可阅读关于

    鸟类的精彩文章。我们不希望读者在网站加载完成之前流失，必须争

    分夺秒。在对服务器端进行一切优化之后，还需要网页能尽快加载。12 HTML5触摸界面设计与开发

    显然，网站在高延迟的3G网络下的加载速度会比在办公室的100MB网络下慢。但是，一旦开始接收数据，就必须立刻吸引住用户。我们将从基本要素开始制作这个网站：

    文档对象模型(DOM)和层叠样式表(CSS)。

    设计师给了我们两个模拟样式图：一个桌面版本(图2.1)和一个移动版本(图2.2)。

    图 2.1 加州鸟类网站的桌面版样式图 图 2.2 加州鸟类网站的移动版样式图

    我们来看这些模拟的样式图。很明显，开发这个网站的难度不大。但不要忘了，此网

    站在移动设备和桌面设备上都要能够使用。作为开发者，我们喜欢尽可能地减少代码

    量，因为我们知道，写的所有代码都要自己维护。同时，我们还希望网站在任何屏幕

    上的体验都是最好的。

    理想的情况下，我们只写一次代码就可以用在所有的设备上。在许多情况下，我们完

    全可以利用CSS3的新特性—媒体查询来避免分支。如同我们在第1章“移动设备

    概述”中讨论的，移动设备与桌面设备相比，性能还有一定差距。一些美好但复杂的

    交互，在桌面设备上可以良好地运行，在比较差的移动设备上可能会卡死。确实需要

    对每种情况单独处理。但作为一般规则，简单的内容型网站应该能在桌面设备和移动

    设备上共用一些代码。加州鸟类网站就是一个完美的例子。

    2.1 选择一个观念：移动优先或置后

    短语“移动优先”是指在Web开发中的几个趋势。它是一个设计理念，一个开发方式，也是一个构建 CSS 的方法。

    这种设计理念仅仅是一个观念，即首先针对移动设备设计，然后通过调整使它适应

    桌面设备。因为本书不讲设计，所以我将这部分留给其他更有资格的人来讲(Luke 第2章 创建一个简单的内容型网站 13

    Wroblewski的书《Mobile First》是一部伟大的开山之作)。开发方式是一个类似的观

    点：先为移动设备编写代码，然后再适应桌面设备。在实践中，一个交互复杂的移动

    网站，肯定会与桌面网站的运行方式截然不同，因此会产生大量的不能共用的代码。

    这没有什么不好，只是我不认为它能节省时间。

    真正的移动优先，对于大多数生产环境的网站而言还为时过早，因为Internet

    Explorer 8不支持媒体查询。(我们会在本章后面的部分详细地探讨媒体查询)。对

    于这个网站，我们会使用一些HTML5标签。这意味着，为了正确地支持IE浏览器，需要做一些额外的工作，或引入一个库，比如Modernizr。本书不是关于如何支持IE

    浏览器的，所以我不打算涉及这一点，但在实际生产中，支持移动设备和桌面设备的

    网站，就必须支持 IE8。

    2.2 创建标记①

    对于这个网站，我们会用“移动置后”的方案来编写，但我们会在移动版和桌面版上

    使用相同的标记。我们将专注于语义标记，因为网站需要在移动设备上工作，所以我

    们还得考虑 DOM 和 CSS 的性能。

    注: “移动置后”的缺点之一是移动设备需要下载和解析所有的桌面样式。

    如果采用“移动优先”，那么移动设备可以安全地忽略那些不需要的样式。

    另外，这是一个需要逐一分析的问题。

    标记一个文档时，我把它分成区域，这样不仅有合理的语义，而且在设计和添加样式

    时也很方便。对于加州鸟类站点，我把导航链接放置于一个