作者：[美]Luke Wroblewski Ethan Marcotte 著
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
移动优先与响应式Web设计(2册)试读：
前言
这本书所讲的内容真的算不上什么大学问。即使不是大学问，仍包含了深层的意义。这本书改变了个人计算机的定义，也改变了我们上网的方式。虽然看来很复杂，但我们可以步步为营，循序渐进。
移动优先
长久以来，大部分网页设计团队的产品和信息都是为台式和笔记本电脑而设计的。移动平台对他们来说只不过是后话，他们甚至干脆忽略了这一市场。很可惜，好长一段时间，这个态度曾经广受认同。以前用手机上网非常痛苦，运营商控制了网络接入，移动网络的速度也并不是非常理想。那时候很少人用手机上网（日本除外），就算用移动设备上网，也没有体验可言。
但近年来一切都前所未有地转变了。设计网页产品如果只顾台式计算机，这样可能会是过时的方法。首先，为移动平台设计网页，不但可以带来更多的机遇，还可以提升网页或应用程序的整个用户体验。
此概念回到我们的“小学问”。设计、建构网页和应用程序时，都应以移动平台为优先。优先移动平台的设计能够达到以下目的。
· 装备自己，抓紧机遇，以应付日后移动平台的迅速增长。
· 鞭策自己，清楚有什么限制，以优先注重于移动平台。
· 启发自己，善用移动平台的原有功能和用法，以创出更多崭新体验。
事实上，就算你暂时没有实际的设计概念，只学习移动平台的设计概念也会让你有所收获。只要花半天时间来思考移动平台的体验，就已经能为你带来创新灵感。
不只是我在提倡移动平台优先，全球很多大型互联网公司也开始接受这一套哲学。谷歌主席埃里克·施密特建议：“做任何事，大前提为——移动平台优先。”Facebook首席设计师凯蒂·阿洛诺维斯指出：“我们现在开始以移动平台为优先，网页平台则为次要。我们招聘的设计师必须接受移动平台的限制。我们也获益良多，学会怎样设计计算机版的程序。”Adobe首席技术员凯文·林奇指出：“我们真的需要转变，以移动平台为优先……这次转变很大，大过当年的个人计算机革命。”
对这些公司和很多人来说，移动优先是一件大事。但为何移动平台如此重要？应该怎样开始为移动平台设计？接下来的内容能够解决以上问题，不然你也不会读这本书。
一寸光阴一寸金。这本书精简到位。首先，将解释为何移动优先如此重要。然后将阐述移动版和计算机版上网体验的区别，让你可以将你现有的网页设计知识应用至移动平台。
此书不会有任何程序代码；这方面很多程序员都比我优秀。此书会介绍移动优先的商业案例、设计形成和实用技巧，在你每次进行设计和建构时，都可以以此作为参考。
还有一点值得一提，我不会用“移动网页”一词，而会用“移动体验”。基本上，互联网只有一个，在不同的设备上会有不同的体验。本书则注重于移动平台的用户体验。
我刚说过要精简到位，那么事不宜迟，直入正题。移动优先
第1章 增长
坐地铁，逛商场，或经过任何一所中学时，你都会看到人类近期的变化。你会看到在街上每个人手上都会长着一个小小的发光屏。幸好，这不是什么基因异变，只不过是我们的老朋友——手机。它无处不在。
如果你不了解最近趋势，让我给你简述一下：移动设备增长得像疯了一般（得专业，我知道）。近年来，分析师都预测移动设备会成为“下一件大事”，他们的预言终于成真了，真的很大。想知道有多大，以下就是近年的数据。
· 曾有人预测，2012年时，智能手机的销量会超越手提电脑、台式计算机和笔高本电脑的总销量。事实上，智能手机的销量早在2010年第四季度就已经超越了——比预测年份早了两年，如图1.1所示。
· 此增长说明了用移动设备上网的人将会比用计算机的人多。这个过渡早已开始了。2008至2010年，家用计算机在美国的使用率大跌20%。元凶是谁？智能手机和平板电脑正在充满网络世界。
· 还有更多证据。2010年11月，浏览器电子邮件服务的使用人数减了6%，用移动设备收发电邮的人数却增长了36%。图1.1 智能手机销量比预期早两年超越个人计算机
· 2010 年，移动版网页的流量增长了 600%。2009 至 2010 年间更是增长了3倍。
· 这种趋势只会继续增长。2009年，全球有5亿人使用移动设备上网，而到2013年，移动智能手机出货量接近10亿部（来源“移动互联网的未来”报告）。
· 现在，手机已取代计算机成为全球最普遍的网络设备，这个预测会比预期更早实现。
现在移动网络不再只是小玩意儿了。网上商店、社交网络、搜索工具等实际业务已正在移动平台上迅速发展。没错，移动平台商机处处，不容忽视。
· PayPal每天处理高达1000万美元的移动网上交易。
· 2010年，eBay的全球移动销售额接近20亿美元。
· 2010年第三季度，移动版谷歌的搜索量增长了130%。
· 50%的Pandora用户都用移动设备来注册。
你以为你的网站和软件没有受益？事实上每个智能手机用户每天浏览多至24个网站，前50%的网站只容纳了40%的移动设备的访问次数。换句话说，你的网页很大可能受益于移动平台的增长。
事实上，你不需要知道这些数字也能察觉到移动平台正在爆发。只需要看看你身边有多少人正在盯着手上的屏幕就全都了解了。移动设备已经无处不在。
1.1 变了什么？
要解释移动平台为何突然爆发，我们就要回到2006年，上一堂美国历史课。若你想象不到当年是怎样的情境，就让我跟你重新介绍一下摩托罗拉的Z3——当年大热当红的RAZR的后继者（见图1.2）。
2006年，Z3在美国是一台高端的移动电话。功能包括短信、电邮、实时通信、200 万像素镜头、音乐播放器、全彩屏幕和 WAP 2.0/XHTML 网页浏览器；能联机至AT&T的EDGE高速数据网络。用来上网，体验完全是——糟透了。图1.2 2006年，摩托罗拉Z3在美国是“鬼斧神功”
到底有多糟？由开启浏览器到完全加载网页（页面只有几个纯文本链接），需耗时两分钟。而现在网页刷新速度都以毫秒作度量单位，可以想象等待两分钟有多么痛苦。但令人痛苦的还不只是速度，还要连击手机键盘来选字，绝不轻松，就算使用T9等智能输入法也没有太大帮助。
但在不到一年的时间里，发生了一件事，从此改变了一切。2007年6月29日，史蒂夫·乔布斯召开发布会介绍首代iPhone。不论是果粉与否，都很难否认iPhone对移动网络的影响。当年只有这台手机能够流畅上网。看看AT&T 2006 年至 2009 年的移动数据流量，就会清楚它有多受欢迎（见图1.3，当年，AT&T是iPhone的独家服务供货商）。图1.3 AT&T的移动数据流量激增(来源: AT&T, 摩根士丹利研究)
那个时期，AT&T的移动数据流量增长了4932%——难怪服务一直都不太稳定！用移动设备来浏览网页，是好是坏，颇为明显。
事实上，在2009年时，一台iPhone所用的数据相当于30台基本功能手机所使用的数据——难怪iPhone的数据月费计划是定额收费的。
移动平台的增长，不只是因为质量提升，也是因为价格的下调。现在就算负担不起计算机，也可以买便宜的移动设备，配以便宜的月费计划来上网。
网速更快，覆盖更广，使移动平台的发展如虎添翼。单在2010年，移动网速就提升了一倍。随着网速的增长，智能手机的数据流量也增长了1倍。这种趋势不会就此停下来。2010年至2015年，全球移动据流量将会增长26倍！
机会正蜂拥而至。
1.2 设备不同，功能不同
在做春秋大梦前，我们应该脚踏实地。首先，移动数据流量不只是网页而已。其次，移动市场仍充斥着传统手机。传统手机和智能手机的使用模式却有着天壤之别。
何谓天壤之别？
· 35% 的智能手机用户至少每天都会用手机上网，但传统手机只有 4% 的用户会用手机上网。
· 31%的智能手机用户曾用手机浏览社交网站，传统手机用户只有7%。
· 70%的智能手机用户曾用手机收发电邮，而传统手机用户只有12%。
· 这些都是很久之前的数据，而且还包括差劲的“智能手机”。现在，两者很可能会有更大差别。
要确保每人都能够浏览你的网页，你必须想办法满足所有用户，包括功能手机、智能手机和介乎两者之间的手机。但本书主要注重于智能手机平台的设计。不是因为每卖出一部安卓手机，谷歌就会给我佣金，而是基于以下原因。
· 智能手机的网络和数据流量远超出其他手机。Cisco公司早在2009年就指出，全球手机只有13%是智能手机，但已使用了全球的78%移动数据流量。
· 越来越多的人转用智能手机，转用率亦迅速增长。2010年第三季度，智能手机的销量比往年增长了96%。每天都有更多的人转用智能手机。
· 每推出一批新设备，智能手机就会变得更大众化。以往，每部智能手机售价几百美元，现在则售100美元甚至更低。从此来酝酿新市场，吸纳更多用户。
· 日后所有手机都会是智能手机，这样说不无道理。
原因还有更多。对很多公司而言，不论拓展长期还是短期的客户服务，智能手机都拥有无穷商机。当然，现在很多功能手机也有发展潜力，尤其是短信业务方面，还有专为智能手机而设的移动浏览器，例如OperaMini，在智能手机上，能提供不错的上网体验。无论如何，移动平台现正步向智能手机，这本书也会主要讲述智能手机。
可是，功能方面，每一部智能手机都不同。2010年初，比起其他智能手机，iPhone的数据用量超出4倍。但截至2010年末，其他移动设备开始追上iPhone。iPhone和安卓手机的市场份额占比已缩小至1.75。
对于同一平台，数据用量也可以大幅增长。RIM推出了一台移动设备，名为Storm，配备以更强的浏览器。RIM设备的流量差不多实时提升了16%。RIM制的黑莓设备现在也配备了更好的浏览器，因此，其数据用量预期也会继续增长。
以上例子，不但说明更好的移动设备能提高数据用量，而且提醒了我们，一切都变得很快。不同的移动设备，演变的速度也不同，因此，亦蕴藏着不同的商机。
每当有新的功能出现，就会伴随新的互动方式，包括网页互动、数字服务、信息互动和人际沟通。有关互动方式，容后再说。现在，我只想指出，设备更好，网速更快，受惠的不只体现在更高的点击率，而是意味着将带来更多商机，接触更多用户。
以Yelp为例。Yelp提供本地点评服务，只有7%的移动用户，但他们的搜索量却占了35%。每两秒，就会有人用Yelp的移动产品，致电本地商铺，或询问驾驶路线。Yelp未推出移动版之前，根本没有这种全新的互动方式。
此外，以地产公司Zillow为例，比起计算机版网站，移动版的常用用户高出45%。移动版用户主要为活跃买家，他们经常看楼。这个用户层面是因移动平台增长而生的。
1.3 原生应用又如何？
原生应用与移动版网页，哪个较好？如果我们不提及这个争议，就无法讨论移动网络增长。有很多人都会二择其一，认为另一个比较逊色。但其实双管齐下也不无道理，而且更为优胜，原因如下。
原生移动应用程序，理所当然是原生在移动平台上的，因此能够调用很多系统资源。这些功能，是网页程序做不到的。由于资源较多，多数原生应用运作时会较为流畅，不论是用户额还是交互功能。若网页程序仿效原生应用的功能，就可能会出现问题和迟延，影响用户体验。
原生移动应用能够稳定地运用硬件，而网页应用则不可以。网页应用不能调用很多基本功能，例如通讯簿、短信、摄像头、麦克风和其他内置感应器。此外，网页应用也不能在后台运行。
如果你的移动产品或公司需要运用设备硬件、后台运行、商店上架、应用内部购买 (in-app purchase)，或融入移动平台，就可能需要原生应用程序。不过，这并不代表你不需要移动网页版。
移动策略分析师杰森·格里斯比指出，“网页链接不会开启应用，但会开启网页。”不论在搜索引擎、电子邮件、社交网络，还是网页，若想分享网上信息，就需要分享连结。如果没有移动网页版，而用移动设备开启网页的话，就算能看到整个网页，体验也不会好。但一到网页，原生应用就无用武之地了（见图1.4）。
移动网络体验用于跨平台服务，最好不过了。就算你能编写原生应用，也不可能为每个移动平台都编写。苹果 iOS 用 Objective C，谷歌安卓用 Java，微软 Windows Phone 7 用 Silverlight，三星 Bada 用 C++，RIM 黑莓用Java、WebWorks 和 Adobe Air。很少有公司会给所有平台编写程序。就算能够编写，维护成本也非常昂贵，不可能持续。图1.4 Gowalla既有移动网页版，也有iOS版、安卓版、黑莓版、Palm版
此外，网页理应是最常见的移动体验。14%的Twitter用户体验移动网页版，8%使用iPhone版，7%使用黑莓版，4%使用其他的版本。
Facebook使用情况也大同小异。19%的内容是通过移动网页体验张贴的。原生应用方面，iPhone版、安卓版和黑莓版分别只占4%。由此可见，移动网页体验很成功。
事实上，原生移动会增加网页的使用。在原生应用里，每次有人分享网页链接，就会开启网页浏览器。更多人用原生应用，就会存取更多网页。移动网页体验不需要用户更新，所以可以做更多A/B测试，以测试新的设计。若你认为以上考虑非常重要，开发移动网页程序则更有意义。
其实你已经懂得设计和开发网页了，要开发移动版网页，无需由零开始，重新再学。事实上，我认为你应立刻开始开发。
1.4 事不宜迟
设备更好，网速更快，移动网络正在爆发。移动优先不但让你大放异彩，还可替你抓紧机遇，接触用户。
移动优先不只是指开发移动版应用程序，而是指你应把握机会，提升整个用户体验。
以社交网站Facebook为例。Facebook约有2.5亿个活跃用户使用移动版。他们的使用量比非移动版用户高2倍。
结合移动和计算机平台的体验，用户会比预期用得更多。Facebook没有把移动体验当成计算机版的一部分，反而专注于移动体验，提升整体体验。
Facebook前任首席、iPhone开发员乔·休伊特曾说：“本来我只在造一个移动版程序，后来才发现原来我可以创造新的Facebook，比原来的网页版更好。”以上短短数句足以表明移动所面临的机遇。
现在，移动设备的限制和功能如何帮助我们呢？
第2章 限制
移动设备日渐完善，的确促进了移动网络的迅速增长，但移动平台仍然限制多多。屏幕很小、网络不稳，拿起设备时，什么怪事都有可能发生。可是，这些限制不会妨碍开发，反而有助设计。如果你相信设计就是不断设限，直至华丽为止，那么，限制尤其是件好事。换句话说，欣然接受限制，不强行对抗，最后就会得出更好的设计。
2.1 屏幕大小
当年，网页设计界曾掀起了一场激烈的辩论，争论哪个分辨率才是最好的，最后终于采用1024像素×768像素。移动平台则裁去了我们的画布，现在与一张便条纸相差无几。
第一代的智能手机，无论是 iOS 系统、安卓系统还是 Web OS 系统，多数都会采用320像素×480像素的屏幕，比计算机屏幕小80%。因此，在移动平台上，有80%的内容都要移除，包括链接、广告、文字、图像和种种计算机版的设计。移动屏幕真的太小，太棒了！
多数计算机版的网页体验充斥着很多无用链接、多余内容、无谓广告。因此，其实移动版移除这些内容，也未尝不是好事。用过移动版后，很多人都希望计算机版也可以“这么简约”。
为什么？以美国西南航空的网站为例（见图2.1）似乎最好不过。这个网站信息泛滥。比起减东西，加东西更简单。因此，他们什么都加进去，尤其为了顾及不同利益相关者。图2.1 美国西南航空网站填充斥着广告、产品推销
公司内部、股东、商业用户和个人用户都有不同要求，所以网页团队经常要想办法平衡各种信息，然后放进同一页中，包括广告、互动功能、内容组件、导航选项，等等。若屏幕分辨率为1024像素×768像素，当然能放进以上所有东西。
可是，以西南航空的iPhone版为例，移动体验非常集中，专注于为用户提供航空信息：网上购票、办理登机、查询航班、查询里数和接收提示（见图2.2）。没有其他信息，只有最重要的。图2.2 西南航空的iPhone版应用程序只显示重要信息
屏幕小了，团队必须浓缩内容，让用户和公司提取最重要的信息。屏幕大小有限，根本没有空间放任何垃圾信息，甚至一些次要的内容都放不进去。因此，必须知道哪些是最重要的。
要精简，必须明白用户和客户需要什么。不论喜欢与否，若想要设计好的移动体验，必须要这样做。
为了进一步阐明这一点，现在让我们来看看图片分享网站Flickr。纵使你很熟悉Flickr这个网站，你可能并不清楚内里所有功能。多年来，单击置顶菜单，就已经多了60多种导航选项（见图2.3）。图2.3 Flickr所有置顶菜单同时打开
设计Flickr移动体验时，团队能够将这60多个功能浓缩至6个。它们如何做到的？他们了解用户的习惯以及为何会有这些习惯。多数Flickr用户登录后，就喜欢看看自己的照片有没有人响应；观看其他认识的人的照片；于不同页面发掘更多有趣图片。移动版专注于这些功能（见图2.4）。图2.4 Flickr移动网页体验由原本60个选项减至6个
若首先设计移动版本，就会知道最重要的是什么，然后就能将整套哲学移至网页或其他体验。如果你明白哪些才是最重要的内容和功能，就算屏幕更大，重要次序又岂能颠倒呢？
当然，移动版和网页版用法和习惯有别，但于任何平台，最基本的服务仍然一样。事实上，你很快就会发现，原来用户在使用移动设备时，尤其是用移动设备来上网时，他们差不多什么都会做。
移动优先的话，提供的体验会更注重于用户的真正需要，让他们专心完成想做的事，无阻碍，无垃圾，不像现今大多数的网页那样。分辨率为320像素×480像素的屏幕的确有限，没有多余空间放没有用的内容。
2.2 速度
人们不论身在何处，都会尝试使用移动设备，但并不是到处都有移动网络，就算有也会很昂贵（视乎用什么套餐），并且不稳定，以致网速更慢，等待更久。
设计移动体验时，必须接受这个现实，并施展浑身解数，设法提高速度。应减少文件的发送，采用好的浏览器和服务器技术，尽量提升传送速度，减少用户每月的上网费用。
传送文件时，尽量降低文件大小，减少文件数量，要求移动用户减少下载量。可是，由于有移动网络延迟，发送HTTP要求可能会耗时更多。因此请确保做到如下几点。
· 将多幅图片压缩至单一文件（但要确保解压后不会太大）。
· 组合并简化CSS和JavaScript文件。
· 尽量不要依赖复杂的JavaScript函数库，尤其是只有一两个函数时。
· 同一道理，尽量少用CSS网格系统(Grid System)。
· 用正确的HTTP标头，确保能暂存文件至浏览器。
· 如适用，利用现代浏览器的功能，善用 HTML5，例如 Canvas 和Appcache。
· 还有我的至爱：用 CSS3 特性来做圆角、渐变色、文字阴影和方块阴影。这样做就不需要用图像来排版了，这在现代浏览器上固然美观，不过就算是旧浏览器不太支持CSS3，也能兼顾。但不要过份使用CSS的效果，否则会有太多效果需要排版，这样就会减慢速度。
速度不只在移动平台上才重要。亚玛逊、雅虎、微软等公司经常指出，就算网页加载延迟很短时间（100毫秒），用户也会察觉，然后转用其他服务。谷歌做过长期测试，发现表现差会有长远影响。延迟问题就算修复好，在随后5个星期内，用量仍然会减少。因此在桌面版上，速度同样重要。
若你以移动优先，并且连接移动网络也够快，网站和应用程序的桌面版就会快如闪电，用户一定会喜欢。为何欣然接受移动平台的限制？又有一个理由。
2.3 时与地
简单而言，某事物的周边环境，就是“执行环境”最基本的定义。例如，台式计算机多数放在桌上（在家或办公室），坐着使用，长期连接电源和网络，相对较私隐，诸如此类。当然，有人会长时间坐着使用移动设备，但更有可能在很多不同地方使用，因为移动设备是便携式的。
由于人们经常随身携带移动设备，因此时与地决定了用户如何使用。执行环境对设计影响深远。设计移动体验时，其实就是设计全天候体验。
2.3.1 地点
很多人一想到设计移动体验，就会想到街上匆忙的商人。这个画面当然存在，可是移动设备的使用地点还有很多。最近有项调查，探讨所有智能手机用户的使用地点。
· 84%在家用。
· 80%休息时用。
· 74%排队时用。
· 69%购物时用。
· 64%工作时用。
· 62%看电视时用（另一个研究为84%）。
· 47%随时用。
84%的用户都在家用移动设备，这数字颇为令人惊讶。比起街上的商人，似乎在家里使用移动设备收邮件更加符合现实。以上两个情况也有一个共通点：移动设备很难令人全神贯注。
每次我思考使用移动设备的用户习惯时，都会想象用户是“单眼单拇指”。他们只有一只拇指，因为他们单手拿着手机，用一只拇指控制；他们只有一只眼睛，因为多数情况下，他们都不会全神贯注地使用设备。
排队时看一看体育比赛战况；单手抱着孩子，单手用手机；坐地铁上班时用；又或者躺在沙发上，边看电视边用。考虑到“单眼单拇指”，就会着手简化移动体验，使其变得更简洁明了，能在以上情况下使用。
就算环境许可，用户能够专心使用，简洁明了的移动体验始终会令人用得更舒服、更轻松。
2.3.2 时间
技术上，人们可以随时使用计算机，但毕竟每天的不同时段，多数用户会用不同的设备。以作详述，图2.5展示了计算机用户于不同时段阅读储存文章的数量。很明显，用户在早上至中午读得最多，然后越来越少，但下班后又再次回升（晚6:00～9:00）。
图2.6展示了iPhone用户的阅读习惯。共有4个高峰：上午6:00（早餐）、上午 9:00（乘车并开始上班）、下午 5:00 ～ 6:00（下班和乘车）、 晚上8:00～10:00（沙发时间、黄金时间、睡觉时间）。图2.5 计算机用户每天使用手机阅读的时间图2.6 iPhone用户每天使用手机阅读的时间
很明显，计算机使用时间有别于移动设备使用时间，亦有别于平板设备使用时间。为了进一步解释不同设备用户有什么不同的使用习惯，我们参考iPad用户每天阅读所花的时间（见图2.7）。早上只有一个小高峰，下午也没有太多人使用，晚上的情况却截然不同。我发誓，我只是在读网页设计文章。
不同时间，人们会用不同的设备。有时人们只会考虑方便与否。哪台设备离我最近并且能够满足我的需求呢？但大多数时候，用不同设备是因为其各有长处。如果把计算机和移动设备的图表并在一起看（见图2.8），情况显而易见。
这些图表的解释很清晰，人们多数用移动设备来打发闲暇，因此高峰较尖。
诺基亚的瑞秋·欣曼用了很好的比喻来对比计算机和移动平台的用户习惯：用计算机就像深潜，用移动设备则像浮潜。图2.7 iPad用户每天进行手机阅读的时间图2.8 计算机和iPhone用户每天进行手机阅读的时间
有很多网页程序都比较精简快捷，为用户提供最快、最新、最有用的信息。这些程序像野草一样迅速增长。Facebook移动网页版的使用量年增长率为112%。Twitter年增长率则为347%。两者提供了完美的浮潜之所，看看朋友在做什么。
请注意，无论浮潜还是深潜，都是为了看水中的鱼。即使不同人会在不同时间和地点用移动设备互动，但网页的核心价值始终如一。因此，不要认为移动设备不需要社交内容和功能。
2.4 接受限制
移动设备限制较多，初次接触，会感到处处受限。屏幕很小，网速很慢，用户不会聚精会神，只会使用很短时间。优先设计移动体验能迫使你接受这些限制，从而开发合适的移动体验。除此之外，还有更多优点。
小屏迫使你重新考虑用户和公司需要，因为根本没有空间放其他东西。网速和数据限制迫使你动脑筋，并想尽办法提高速度，令所有平台都加载得更快。时与地限制移动体验设计的过程，迫使你重新思考用户每天的习惯，同时提供了新的机遇，让你可以接触更多用户，继续创新。接着，我们会探讨移动平台有什么全新功能。
第3章 功能
虽然移动设备、网络、用户习惯等限制多多，但这同时也帮助设计师专注于简化移动体验。设计移动体验除了要接受限制，还要不断扩展。
用户在任何地方都可以（并且会）使用移动设备。由此可见，你有更多机会可以满足用户和客户。这些机会配合现今移动设备的技术，就会创造出更多崭新体验。
这听起来很像那些公司简报，不如举例说明。
3.1 找地铁站
上次去伦敦，我想参观数个景点。我之前已经去过伦敦，所以知道游览伦敦最好就是乘地铁，但我不知怎样找最近的地铁站。要解决这个问题，只需取出手提电脑搜索，很快就能找到伦敦运输局的主页（见图3.1）。图3.1 伦敦运输局的主页
开启网页后，我很容易就找到了地图的链接，然后就到了地图专页，其中一个链接就是“地铁标准路线图”。
现在暂停一会儿，我想指出，伦敦运输局运用了很多最好的方法来构建网站信息，令网站更好用（见图3.2）。链接清晰可见，大图标以图像形式提示用户每部分的内容。此外，链接旁边还有PDF图示并列出了文件大小，供用户获取更多详情。我相信他们肯定费尽了心机来组织网站方便用户浏览。对我来说，这个网站不太难用，很容易就能找到有用资料，开启地铁路线图（见图3.3）。图3.2 将百家网页设计之大成集于一页
现在与移动平台体验相比较。移动设备上用的原生应用名为Nearest Tube。Nearest Tube 运用多个移动设备的功能，给用户带来截然不同的体验，尤其是定位服务、数字指南针（即陀螺仪）、摄像头和加速度计。
定位服务用于寻找位置，指南针用于寻找方向，摄像头则可拍下眼前街景，由该程序提供其数字信息。要找地铁站，只需要开启 Nearest Tube 即可，无需过多操作（见图3.4）。透过摄像头看街景，就会指示你到最近的地铁站的路线和距离。图3.3 PDF版地铁路线图图3.4 Nearest Tube运用移动设备的指南针和摄像头，提示用户如何到最近的地铁站
Nearest Tube还应用了加速度计（加速度计用于度量设备的移动方式），按照摄像头所指的不同方向，提供不同数据。摄像头指着前方就会显示附近车站的详情，指着上面就会显示较远车站的详情（见图3.5）。图3.5 指向不同的方向，Nearest Tube就会显示不同信息
我不是说移动“虚拟体验”一定比台式机上的网页好。实话实说，两者使用时都有一定问题。令人惊讶的是两者之间的区别。两者也可以解决同一问题，但方法却迥然不同。
Nearest Tube 运用移动设备的功能（摄像头、定位服务、陀螺仪和加速度计）来创新体验，而且方便易用。移动设备功能可以让你利用新奇的工具来开发和满足用户需要。
3.2 浏览器又如何？
首先，你应该明白Nearest Tube的功能，不是全部都可以用于移动浏览器的。其中2个功能是可行的（定位服务和加速度计），但是，目前对于大部分智能手机，另外2个功能（摄像头和陀螺仪）在网页浏览器中尚不可用。因此，正如我较早前说过的，原生应用程序的开发还是需要的。无论如何，如果你是乐观的人，你会发现其实移动浏览器还有很多新功能，而且还有更多功能会被陆续开发出来。
还有一点值得一提，最具潜力的机遇来自用户的需要，而不是指定的硬件功能。新技术能够提供很多新奇有趣的功能，来帮助我们满足用户的需要。可是，如果只是为了写而写，多数写出来的程序都不能满足用户要求。
3.2.1 定位服务
计算机用户从哪个国家浏览网页，一般都能查到。这项信息固然有用，但又不太有用。另一方面，多数智能手机都有定位服务，并可以在浏览器内使用。表3.1（拉胡尔·奈尔制）简单介绍了可用技术。
表 3.1 不同的定位技术一览，均为现代设备所用。智能手机同时采用 GPS、WiFi、发射塔三角测量法；计算机则用WiFi和IP，只有少数用GPS。
现代的智能手机会应用发射塔来实现定位，但是iPhone等智能手机大部分时候会用WiFi来定位。WiFi（以WiFi热点来定位）可于室内定位，不需额外耗电，而且可以立即寻址。GPS在以上三方面都比不上WiFi，但定位信息非常准确。如要确保准确无误，GPS和发射塔则更可靠。
其实你不用烦恼太多。需要时，浏览器用的 API 会自动提供最准确的位置。
定位服务很重要，因为我们能利用用户的实时位置提供相关信息，提升移动网络体验，例如最近的电影院、餐厅、本地天气、交通情况、其他人的评论，等等。实时位置也可用于搜索，例如智能默认和自定义选项（见图3.6、图3.7）。图3.6 Kayak用定位服务寻找附近的酒店，提供移动体验图3.7 Glympse让你知道朋友在哪里，要走多久才能会合
之前提过，准确的定位服务有助于开发新体验。每两秒钟，就会有人用Yelp致电本地公司。每小时，用户通过Zillow，共看20000座房子。定位服务的确充满机遇。
3.2.2 设备置向/加速度计
由于计算机尺寸太大，不便于经常拿起来用。移动设备却不同，刚好能置于手中，容易摆动、转动和移动。加速度计会度量其移动幅度，网页和应用程序就能相应互动。
加速度计最简单的用途为探测设备置向。这看来很简单，但对体验的改变却可大可小。
安卓系统上的原生邮件应用程序能够转向。谷歌便善于应用此功能，为用户提供更多空间来撰写邮件。横置时，文字栏加宽，完成按钮移至右方（见图3.8）。若无此功能，横置时，编写邮件会较为困难，会同时有多个文字栏，从而减少了打字空间。取而代之，谷歌只放单一文字栏，以提供更多空间，将原本的限制变为优点。图3.8 这是安卓版Gmail应用程序。横置设备，就会有更多空间编写邮件
加速度计还能度量设备在手上移动的速度。有了这项功能，就算是平淡无奇的日常动作，也能变得方便有趣。以阅读网上文章为例：每天，会有数百万人略读文章首段，或许还会进一步读下去，用鼠标滚轮或滚动条来浏览。很正常，没有什么可以改变吧？
然而，我们再一次看到移动平台的功能超越了传统计算机。以Instapaper为例，此程序能把文章存储于移动设备，让用户稍后阅读。iPhone版Instapaper利用加速度计，使用户只需倾斜iPhone，就可以滚动页面，无需触控屏幕（见图3.9）。用户还能以倾斜幅度来控制滚动速度。由此可见，就算是最平淡无奇的事，也能改头换面，以不同形式出现在移动设备上。图3.9 Instapaper有倾斜滚动功能，无需接触屏幕，也能滚动页面
敏锐的读者当然会察觉到以上例子都是原生程序，而不是移动网页程序。公平起见，以下会举2个网页程序的例子。（1）数字飘雪水晶球。摇动手机，浏览器里的雪花就会随之飘落（见图3.10）。图3.10 只需摇动iPhone，水晶球就会下雪（2）图3.11中的网页应用利用iPhone的陀螺仪，能度量360°的摆动。用户把移动设备指向不同方向，就可轻易观看整幅图片。图3.11 把移动设备指向不同方向，就可看到360°全景
3.2.3 触控
界面设计师一般都推崇直接控制。此时此刻，我们既然已经可以直接触控设备了，为何还去留恋鼠标和键盘呢？触控设备让我们可以用手指上网互动，提供了更多的可能性，让开发人员有机会创造更多的互动体验。
接下来会介绍如何设计合适的网页，才能使用户在触控设备上浏览你的网页。我想指出，触控功能可以创造出无限可能。现在，设计界才刚刚开始探究触控手势如何管理、创作和存取网络数据。久而久之，用户就会接受并预期新的互动方法，例如简单的“拉下来更新”和“滑动以得到更多选项”。
然而，触控不只限于简单的互动，有时亦可作为整个应用程序的焦点。以Sketch a Search 为例，这个原生应用程序由雅虎开发。要找最近的餐厅，只需在地图上用手指画线或圆圈即可（见图3.12）。图3.12 这个应用程序名为Sketch a Search，由雅虎研发，用户可在地图上画圆圈，搜寻该区
程序会就所圈的地区来寻找相关资料。相比传统的计算机网页，在触控设备上，省去了计算机网页先输入地区的过程，直接用手指选定即可进行搜索，既方便又有趣。
3.3 扩充功能
以移动优先原则进行设计和开发，就有机会利用新奇的功能来写网页，以创新体验迎合用户需要。很多技术在现代浏览器中都得以支持，例如定位服务、设备置向、触控，等等。在不久的将来，还会有更多技术，包括：
· 方向：数字指南针
· 陀螺仪：360度摆动
· 声音：麦克风入，扬声器出
· 影像与图像：以摄像头拍摄
· 双镜头：前后摄像头
· 设备连接：蓝牙
· 外围：设备与外围物品有多近
· 感光：光暗调节
· NFC：近场通信（透过红外线）
以移动平台为起点，试用这些技术，探所如何让用户在日常生活和网上互动。移动浏览器正在不断加入更多原生应用才有的功能，机遇只会有增无减。
3.4 移动优先
我们探讨过为何以移动优先来设计和开发网页体验。移动优先能够达到以下目的。
· 装备自己，抓紧机遇，以应付日后移动平台的迅速增长。
· 鞭策自己，清楚明白有什么限制，以优先注重移动平台。
· 启发自己，善用移动平台的技术，以创造出更多崭新体验。
希望我能说服你。移动网页体验不只是我们成长的好机会，它还提供新方向来满足用户需要。如果我已说服了你，你可能会问：“很好，但怎样开始？”我很庆幸你这样问。
第4章 组织
在移动平台上组织内容和动作时，稳固的信息架构非常重要，应做到标示清晰、长宽适中、心智模型适宜。除此之外，组织移动网页还需要做到以下几点。
· 配合并明白用户的习惯。
· 注重内容，而非注重导航。
· 提供相关选项，以供探索和转向。
· 保持清晰的焦点。
4.1 配合移动用户的习惯
上一部分提及了设计移动体验的限制和功能。类似地，计算机网页也有独特的限制和功能。因此，如果只是把计算机版整套搬到移动平台，多数都不会凑效。相反，必须考虑移动平台的独特优点，配合用户的需要。
宏观来看，就会清楚移动用户的习惯。作家乔许·克拉克写了一本书，名为《Tapeworthy》。书中提及了移动用户习惯的3大要点，即：微任务、“我身在何处”、“我很闷”。以上分类与谷歌的分析颇为相似。谷歌也把移动用户习惯分3类，分别为：现在很赶、重复不断、现在很闷。无论你选择如何分类，移动用户主要使用以下的互动类别。
· 搜索（紧急/地区性）：现在需要找答案，很多时候都与所处地方有关。
· 探索/玩乐（无聊/地区性）：打发时间。
· 打卡/现状（重复/微任务）：更新重要的事情，确保及时取得最新信息。
· 编辑/创作（紧急修改/微任务）：现在要做，不容延误。
以上分类直接阐述了移动用户的目的。这些行为通常会决定如何进行构建和组织，以迎合用户所需。例如，图片分享网站Flickr的移动网页体验有4个主要功能。从连络人的近期活动和上传信息，用户便可得知朋友近况；观看当天有趣的图片和周边照片，用户便能打发时间（见图4.1)。图4.1 Flickr和Basecamp的移动网页体验能配合移动用户的目的
相似地，项目管理应用程序Basecamp聚焦了多个功能，来提供移动网页体验，例如打卡、编辑、撰写新信息、备忘录，等等。纵使Flickr和Basecamp的服务对象各不相同，两者开发时都考虑过移动用户的习惯，并依此进行相应调整。
配合移动用户的习惯，很自然就是配合现实世界的需要。由于移动用户可能身处世界任何地方，因此必须彻底考虑到使用地点。换句话说，现实处境的需要，就是网站提供的服务。
最近找到一个很好的例子。在一则名为Mobile on Higher Ed的博文中，戴夫·欧森对一幅xkcd漫画的回应（见图4.2）。图4.2 xkcd漫画，讽刺大学网站提供的数据往往不是人们需要的
……看着这幅文氏图的右半部分，我在想：“看来这像是我们移动网站的内容，很多都是现在有或计划了的。”……移除不需要的杂草，就能配合限制（包括设备性能和网络限制），就会有助于建立更好更有用的用户体验。
他也比我说得要好。
4.2 内容比导航重要
一般而言，在移动平台上，内容比导航重要。不论用户看实时信息（例如股市、新闻或比赛分数）、看地区信息，还是用搜索引擎搜索文章，他们需要实时得到答案，而不是网站地图。
正如Flickr和Basecamp，太多网站都是以导航选项为首页，而不是内容。使用移动设备时，多数时间都很宝贵，而且下载还要付费。因此，请竭尽所能，第一时间提供用户最想要的信息。
YouTube和ESPN恰能提供这样的移动网页体验。简单的网站标题告诉你身处何网。所有导航选项集于单一按钮。其余就是最新信息（ESPN）和最热门影片（YouTube）（见图4.3）。图4.3 ESPN和YouTube的移动网页体验注重内容，而非导航选项
4.3 四处浏览
且慢，如果只注重内容，而非导航选项，用户如何浏览网站呢？我们是否需要提供导航，好让用户探索？当然要。但探索和打开有用信息并不需要一大堆导航选项而埋没内容。
以Facebook的移动网页体验为例，内容放在首页的确不错，用户能频繁登录。但是，页顶有3行导航列，剩下的只看到一项更新。谷歌财经的移动网页体验也能提供有用的实时信息，但是浪费了很多宝贵空间，在页顶放置3.5行导航列，而大部分人都用不着。这些空间原本可以用来放置有用的信息（见图4.4）。
试读结束[说明：试读内容隐藏了图片]