移动触摸设备的新思路 “这是我个人的一小步，却是人类的一大步……” ——尼尔•阿姆斯特朗 正如前言中所言，即便是生活在当今这样一个高科技的年代，近来也几乎没有什么技术能像移动设备这般令我们的生活日新月异。 在本书中，读者可以了解这场移动技术革命如何革新了我们开发应用程序的方式，以及触摸屏技术又带来了哪些新的变数。读者首先会学习如何利用新的触摸设计技术来设计基于触摸的用户界面，随后会进一步学到如何在同一套基于触摸的设计原则上，针对iPhone和iPad的特殊需求进行适配。我们将基于一个敏捷版本的标准信息架构流程来构建我们的项目，以尽可能地同时满足用户和个人开发者或小型开发团队的需求。 在设计阶段之后， 即会开始学习如何在开发阶段实现具体设计，以及如何使用Web标准技术和基于WebKit的框架来完成项目目标。 最后讲述了如何测试一个移动触摸应用，以及在通过Apple Web应用门户或是第三方门户来发布应用前，如何以用户为中心来评估测试结果。 1.1 为什么要选择移动互联网 移动市场从诞生之日起便一天天壮大，如今已经发展成为一场非同小可的席卷我们日常生活的革命。然而问题是：“为什么我们应该在这个市场上投入时间和资源呢？” 1.1.1 从桌面端到移动端 根据摩根士丹利的说法，计算史经历了五大阶段（如图1-1所示）：20世纪60年代的大型机计算、20世纪70年代的微型机计算、20世纪80年代的个人电脑计算、20世纪90年代的桌面互联网计算，以及21世纪初的移动互联网计算。回顾一下移动互联网计算时代，读者便能确知引发这一变革的种种原因。 首先，新的触摸屏技术大大提升了界面的易用性，减少了用户浏览移动网页的障碍。其次，以Facebook和Twitter为代表的社交网络已呈燎原之势。最后，全新的VoIP（IP语音电话）服务，相比传统的2G和3G蜂窝通信来说，极具吸引力且颇有取而代之之势。近年来，本地ISP服务商已经开始提供2G和3G蜂窝通信这一新的廉价数据套餐。 图1-1 计算史上的各技术阶段 iPhone正处在这众多进步的焦点之中，因为它极大地促进了前述三因素的发展，同时也开始率先利用它们。从图1-2中也能看出，iPhone逐渐夺取了市场地位，并已经遥遥领先。这也是现在就应该开始为iPhone和iPad做设计和开发的一大理由。若肯花一些时间来学习一门开发语言，例如Objective-C（用于原生应用），或是Web标准技术（用于Web应用），绝对是磨刀不误砍柴工。 图1-2 2011年度市场份额领先的厂商（来源：MobileMix） 移动设备马不停蹄地更新换代，在不远的未来便会促使移动生态系统优化一些服务，使之成为通用标准以适用于所有设备。而同时，不少新的服务也会被不断引入，例如： 增强现实 移动设备可以通过Web提供的服务来获取信息，从而“浏览”现实。 移动支付 我们可以利用手中的移动设备来安全地进行支付，使一部普通的智能手机摇身一变成为借记卡或信用卡。移动电子商务也将变得更加普及。 移动电视 凭借高带宽优势，移动用户可以获取由商业公司或是普通用户提供的传统的和面向移动的 内容。 “智能”移动网络 这一特性使得移动电话能自动尝试连接用户附近区域内所有可用的网络接入点。 全球定位服务 用户所处的位置可以自动更新，并被各种公开或私密的应用程序所利用。 随身携带的互联网 如今，市场上只有少数几款触摸屏设备可以浏览互联网，而不久之后，即使大规模生产的手机也将内置有HTML浏览器。 改进的人体工程学和易用性 大多数人都知道，要在大规模生产的手机上运行一个应用或是输入一些文字，免不了要在手机键盘上进行大量按键操作。而在可见的未来，很多这样的设备也将能配备上触摸屏。 1.1.2 移动市场 如今，已经有40多亿人拥有或者可以使用移动设备。其中，有几乎50%的人通过移动设备接入了互联网，而且这一数字每年都在增长。 在当前的移动市场上存在着6大主流移动操作系统 ： iOS Symbian OS Android RIM OS Windows Phone 7 WebOS 在图1-3中可以看到各大操作系统在全球范围的占有率。 从占有率来看，如今为移动设备做设计与开发的第一动力显然来自于这个庞大的市场，而它也提供了比桌面市场更多的工作机会。 随着移动市场突飞猛进的增长，现如今使用移动设备访问互联网的用户已经超过了桌面电脑用户。对于像电子邮件、RSS或是社交网络之类的服务，移动互联网访问与桌面互联网访问的差距就更加悬殊了。最近的MobileMix报告指出，上述三大服务已经成为了移动设备上最常用的服务。（“美国互联网流量的60%来自具有WiFi的设备，而iPhone比起其他智能手机更常使用WiFi。”——出自2011年5月的报告，第17页。）就笔者个人而言，我实在难以想象每天上班路上不能用iPhone查看RSS信息和邮件会是什么样的情形。 图1-3 2011年度移动操作系统市场占有率（来源：MobileMix） 1.1.3 为何现在就进军移动领域 移动设备正快速地更新换代，其发展势头迅猛无比。在Apple设备上投入时间的最后一个原因就是，很多类型的服务在非触摸屏设备和部分有触摸屏的非Apple设备上无法使用。 现在正是搭乘移动开发的东风的大好时机，因为我们使用电脑的场所正在毋庸置疑地从房间里转移到口袋中。 1.1.4 面向移动的做法 为移动设备设计和开发需要对过去的习惯做法做一些调整。为移动设备设计和开发时，所使用的技术不同，用户界面不同，甚至环境条件也不同，因为大多数时候你的应用和服务是在户外而不是在一个安静舒适的房间内使用的。 话虽如此，你需要记住的唯一一条建议实际上相当简洁明了：站在移动用户的角度，设身处地考虑问题。 在本书的第二部分中，我们会实际用到iPhone和iPad。但现在，我们只是向你展示一些通用理念，在学习用于触摸设备的面向移动的范式时需要加以记忆。 1.1.5 面向移动的指南 要解决在移动站点设计中遇到的问题，并期望得到和标准版网站 一样实用且用户体验良好的结果，一些创新的解决问题的技能是必备的，下面仅列举其中几项。 了解可用的硬件和软件。 给用户一种正在访问标准版网站的感觉。 给用户访问标准版网站的选项。 同时设计横屏和竖屏两种视图。 只包含标准版网站的重要内容。 对内容进行权重排序，以提供线性的用户体验。 优化导航以适合手指操作。 优化代码，减少带宽占用需求。 尽量少使用图片，以减少带宽占用。 确保重定向正确无误。 测试，测试，反复测试！ 设计者和开发者的目标是建立一个通用网站（One Web），其中的信息对于不同的设备都是可用和优化的。详情可参阅图1-4。 通用网站 W3C对通用网站给出了如下的定义： “通用网站，即只要在合理的前提下，就应给予用户相同的信息和服务，而无论他们使用什么样的设备来访问。然而，这并不是说必须在所有的设备上以完全一样的展现方式传递完全一样的信息。移动应用的场景、设备能力的不同、带宽问题以及移动网络的负载能力等都对具体展现有所影响。更具体而言，有一些服务和信息更适合或者更应定向呈现给特定的用户场景。” 出自“W3C移动Web最佳实践1.0版”，第3.1小节 依照W3C标准的说法，对于提供多个版本内容的做法就毋须太过担心了，因为内容的作用只是为了给用户传递信息。基于这一点，我们只需专注于提供等价（经过优化）的信息即可，而并非要完全一样的内容。 这一观念同样运用于跨浏览器的网站设计。不幸的是，很多设计者仍然认为设计一个跨浏览器的站点就意味着在所有现有的浏览器上达到完全一样的显示效果。 从纯内容标注法（content-out）的角度来说（当然也不光基于这一种观点），跨浏览器设计的主要功能是让同样的信息在不同的浏览器上都可用。 说明 第2章会详细解释纯内容标注法。 图1-4 视图化的通用网站示范