IOS-Web-设计开发高级教程-一-

IOS Web 设计开发高级教程（一）

原文：Pro iOS Web Design and Development

协议：CC BY-NC-SA 4.0

零、前言

“千里之行始于足下。。."

-老子

移动设备的发展

对于那些每天生活和工作都与技术打交道的人来说，这是一个令人兴奋的时代，无论他们是从出生开始就使用技术的年轻人，还是像许多其他人一样，不得不适应技术。

这是一个激动人心的时刻，因为近年来没有其他技术像移动设备的发展一样如此显著地改变了我们的生活。

因为了解了过去，你就能更好地理解现在，并帮助创造未来，所以在本书中，我们将在讨论如何实现这一目标之前，先介绍一下智能手机的简史，手里拿着我们心爱的 iPhone 或 iPad。

卑微的开始:早期的移动网络

一切都始于 1908 年，当时肯塔基州默里的内森·b·斯塔布菲尔德获得了第一个无线电话专利。

40 年后，零代(0G)手机问世。它们主要用作汽车电话，旨在将汽车中的移动用户连接到固定公共电话网络。

第 0 代没有被正式归类为移动设备技术，因为它不支持在呼叫(切换)期间自动改变信道频率，这将允许用户从一个小区(目前的无线电基站覆盖区域)移动到另一个小区。

图一。 零一代:移动车载电话(20 世纪 60 年代)

20 世纪 60 年代，贝尔系统公司推出了一种新的全双工甚高频/超高频无线电系统，随后由美国电话电报公司改进，称为“改进的移动电话服务”(IMTS)，带来了许多改进，如直接拨号而不是通过接线员连接，以及更高的带宽。

第一代(1G) 蜂窝系统开发于 20 世纪 60 年代末至 70 年代初，是模拟的，仍然基于 IMTS 技术。这些系统是“蜂窝”系统，因为覆盖区域被分成更小的六边形区域，称为“小区”，每个小区由一个低功率发射机和接收机提供服务。

**注:**蜂窝系统是由许多无线电小区组成的无线电网络，每个小区至少由一个固定位置的收发器(既是发射器又是接收器的设备)服务，该收发器称为基站。这些小区覆盖不同的区域，组合起来提供比一个小区更大范围的无线电传输。

The simple structure of the cellular mobile-radio network consists of the following:

• PSTN:公共交换电话网
• HLR:归属位置注册
• MSC:移动交换中心
• VLR:游客位置登记
• RBS:无线电基站

图二。 普通(且简单)的个人通信服务(PCS)网络架构

移动通信的 1G 模拟系统在 10 世纪 70 年代经历了两个关键的改进:微处理器的发明和移动电话与基站之间控制链路的数字化。

**注:**微处理器将计算机中央处理器(CPU)的大部分或全部功能集成在一个集成电路(IC 或微芯片)上。

1973 年，摩托罗拉大学的马丁·库珀博士发明了第一部现代便携式手机。传说他的第一个电话是打给他的竞争对手贝尔实验室的研究主管乔尔·恩格尔，告诉他他们之间的竞争结果。

十年后的 1983 年，摩托罗拉推出了第一款商用手持移动电话，名为 DynaTAC。这款砖状手机重 28 盎司(0.8 千克)，价格“仅为”4000 美元。

历史记录:马丁·库珀是世界上第一部手机——摩托罗拉·戴纳塔克手机的发明者，他的第一个想法来自于 20 世纪 60 年代著名的电视连续剧《??》中詹姆斯·t·柯克船长通过他的通讯器说话。

在当今世界，在旅途中通话似乎很正常，但回到 20 世纪 60 年代初，当《星际迷航》首次播出时，大多数人的手机只能通过线缆工作。

扩展手机的覆盖范围:GSM 设备

第二代(2G)数字蜂窝系统于 20 世纪 80 年代末首次开发。这些系统不仅数字化了控制链路，还数字化了语音信号。

新系统以更低的成本向消费者提供了更好的质量和更高的容量。GSM(全球移动通信系统，最初为专用移动通信集团)是第一个使用 TDMA 协议(时分多址)作为其信道接入方法的商业运营数字系统。

注:信道接入方式允许连接到同一多点传输介质的多个终端通过发送和接收来共享其容量。

通道接入方案的基本形式如下:

• FDMA:频分多址
• 时分多址
• 码分多址
• SDMA:空分多址

GSM 网络率先实现了低成本的“短消息服务”(SMS)，也称为文本消息，此后它也得到其他移动电话标准的支持。新的 GSM 标准还包括全球紧急电话号码功能。这个三位数的号码是本地化的，一些国家的各种紧急服务有不同的紧急号码。一些常见的号码是 112、999 和 911。

20 世纪 90 年代，随着新的信息传输方式的出现，新一代 100-200g 的小型手持设备开始取代砖头大小的手机。这种变化之所以成为可能，要归功于技术进步，包括更小的电池和更节能的电子设备。20 世纪 90 年代是摩托罗拉公司及其著名的 MicroTAC 手机的辉煌岁月，这款手机于 1989 年发布，并在近十年的时间里一直是地位的象征。

1997 年，新的 GPRS(通用分组无线业务)扩展了 GSM 系统的分组数据能力，1999 年，又扩展了称为 EDGE(GSM 演进的增强数据速率)的更高速数据传输协议。这两个新版本的 GSM 协议分别被称为 2.5G 和 2.75G 网络。

同年，诺基亚推出了 7110，这是第一款支持 WAP(无线应用协议)的终端，首次允许手机直接上网。"协议的一小步，却是人类的一大步."

注: WAP 1.0 标准，发布于 1998 年，描述了一套完整的手机上网软件栈。诺基亚也是 WAP 标准的创始成员之一。

WAP 浏览器提供基于计算机的网络浏览器的所有基本服务，但是被简化为在移动电话的限制内操作。用户可以连接到用 WML(无线标记语言)编写或动态转换成 WML(无线标记语言)的 WAP 站点，并通过 WAP 浏览器访问它们。

在 1992 年发布了第一款手机(诺基亚 1011)后，21 世纪初，诺基亚从摩托罗拉手中夺取了移动设备市场的控制权，目前有 12 亿部手机在使用，超过 806 种不同的设备在生产和销售，仍然领先于其他国家。

图 3。 第二代:GSM 设备(90 年代)

又向前迈进了一步:UMTS 设备

第三代(3G)系统承诺更快的通信服务，包括随时随地的语音、传真和互联网，以及无缝的全球漫游。3G 技术是对国际电信联盟 IMT-2000 规范的回应，最初被认为是一个单一、统一的全球标准，但实际上 3G 世界已经分成三个阵营: UMTS 、 CDMA2000 和 TD-SCDMA 。

**注:**UMTS 标准如下:

• UMTS: 基于 W-CDMA 技术，是以欧洲为中心，使用 GSM 的国家普遍首选的解决方案。UMTS 由也负责 GSM、GPRS 和 EDGE 的 3GPP 组织管理。
• CDMA2000: 这是早期 2G CDMA 标准 IS-95 的衍生产品。CDMA2000 的主要支持者在美洲、日本和韩国的 GSM 区域之外。它由 3GPP2 管理，3GPP 2 独立于 UMTS 的 3GPP。
• TD-SCDMA: 这项技术由大唐和西门子公司在中国开发。

第一个(预商用) 3G 网络于 2001 年在日本开发，支持高速移动(例如车辆)的 144 千比特带宽、384 千比特(例如校园内)和固定使用(例如室内)的 2 兆比特带宽。

注: 3G 系统旨在为全球移动提供广泛的服务，包括电话、寻呼、消息、互联网和宽带数据。 3G 网络的简单结构包括以下内容:

基于 IP 的网络 PSTN:公共交换电话网 CN:核心网 UTRAN: UMTS 陆地无线接入网 VLR:访问者位置寄存器

图 4。 普通(且简单)的个人通信服务(PCS)网络架构

3G 协议的最新发展是 HSDPA(高速下行链路分组接入)，于 2005 年开发，称为 3.5G。3.5G 是 W-CDMA 下行链路中基于分组的协议数据服务，数据传输速率高达 8–10 Mbits。

扩展智能手机的移动功能

第一款智能手机名为 Simon，由 IBM 于 1992 年设计，并于当年在拉斯维加斯举行的计算机行业贸易展 COMODEX(计算机经销商展览会)上作为概念产品展示。

西蒙于 1993 年向公众发布，并由南方贝尔公司出售。除了作为一部手机，它还包含日历，地址簿，世界时钟，计算器，记事本，游戏，以及邮件和传真功能。

下一次尝试是在 1996 年，由诺基亚进行的，它的移动设备叫做“通信器”这款独特的掌上电脑风格的智能手机是与惠普合作的成果，结合了早期成功和扩展的惠普个人数字助理(PDA)和当时诺基亚最畅销的手机。诺基亚 9000 Communicator 是第一款真正的智能手机，其操作系统名为 GEOS 3.0。

2000 年发布的爱立信 R380 是第一款作为“智能手机”销售的手机，也是世界上第一款触摸屏手机。R380 拥有通常的 PDA 功能和一个大触摸屏，结合了创新的翻盖，因此它也可以用作普通手机。它也是第一款商业化的 Symbian OS (5.0)手机。但是，它不能运行本地第三方应用。

**图 5。**3G 一代:智能手机(2000 年代)

**注:**智能手机没有行业标准定义，但我们可以将其视为“提供高级功能的移动电话，运行完整的操作系统软件，为应用开发人员提供标准化的界面和平台。”

来源:智能手机应用

2002 年，Handspring 发布了 Palm OS Treo 智能手机，利用全键盘将无线网络浏览、电子邮件、日历和联系人管理器与移动第三方应用相结合，可以下载或与计算机同步。

同样在 2002 年，RIM 发布了黑莓手机，这是第一款针对无线电子邮件应用进行优化的智能手机。到 2009 年 12 月，它已经拥有了 3200 万用户。

重新定义移动范围:下一代协议

第四代(4G)系统是 3G 的继任者，旨在为移动和固定用户提供高达超宽带(千兆位速度)互联网接入的广泛数据速率。这个新项目的名称是 LTE(长期演进),是对 UMTS(通用移动电信系统)架构的一系列增强。

LTE 规范提供了至少 100 兆比特的下行链路峰值速率和至少 50 兆比特的上行链路，并且 RTT(往返时间)小于 10 毫秒

但除了这些数字，LTE 草案最重要的一点是“说服性网络”，它描述了一个无定形的、目前完全假设的概念，用户可以同时连接到几种无线接入技术，并可以在它们之间无缝移动(垂直切换)。接入技术可以是 Wi-Fi、UMTS、EDGE 或任何其他未来的接入技术。

**注:**垂直切换是指网络节点改变其用于接入支持基础设施的连接类型，通常是为了支持节点移动性。

4G 网络将基于 OFDM(正交频分复用)协议，并可能使用智能天线。

**注意:**智能天线是具有智能信号处理算法的天线阵列，用于识别空间信号特征，例如信号的到达方向(DOA ),并使用它们来跟踪和定位移动设备上的天线波束。

移动 WiMAX (IEEE 802.16)移动宽带接入标准也被称为 4G，并提供 128 Mbits 下行链路和 56 Mbits 上行链路的峰值数据速率。

高级人机交互:触摸屏设备

2007 年 6 月 29 日，当苹果在“MacWorld 大会暨博览会”上推出第一款 iPhone 时，移动市场发生了不可逆转的变化。在苹果公司的 iPhone 引领下，越来越多的触摸屏手机开始出现在市场上。

触摸屏越来越受欢迎，在手机上变得越来越普遍，这有助于使手机使用起来更加直观、舒适和高效。

具有直观用户界面的手机可以快速方便地访问各种应用和服务。另一方面，许多具有有用和创新功能的智能手机和高端手机在商业上失败了，仅仅是因为它们的用户界面过于复杂，难以方便使用。

**注:**触摸屏是一种电子视觉显示器，可以检测显示区域内触摸(通常是手指或笔)的存在和位置。

触摸屏技术有几种类型:

• 电容式(用于 iPhone)
• 电阻的
• 表面声波
• 应变仪
• 光学成像
• 分散信号技术
• 声学脉冲识别
• 双向屏幕上的编码 LCD

2008 年 11 月 11 日，HTC 生产了“Touch HD”，这是一款屏幕比其前辈大得多的设备。这款设备和所有其他 HTC 设备一样，运行 Windows Mobile 和 HTC 专有的用户界面 TouchFLO 3D。

2009 年 6 月 6 日，Palm 发布了 Palm Pre，这是一款基于 webOS 的智能手机，配有多点触摸屏和滑动 QWERTY 键盘，webOS 是 Palm 基于 Linux 的新操作系统。

历史提示:QWERTY 键盘布局是由 Christopher Latham Sholes(1819-1890)在 19 世纪 70 年代早期设计和创造的，他是一位住在威斯康星州密尔沃基的报纸编辑和印刷商。这种布局的名称来自键盘顶行左侧的前六个字符。

资料来源:维基百科

2010 年 1 月 5 日，谷歌推出了“Nexus One”，这是一款基于谷歌开源移动操作系统 Android OS 的触摸屏技术智能手机。与苹果 iPhone 一样，大电容触摸屏能够处理多点触摸手势。

不幸的是，对于竞争品牌来说，苹果的真正秘密不像许多人认为的那样只是触摸屏，而是 iPhone 通过触摸屏技术能够实现的东西:全新的用户界面体验。

我说“不幸”是因为尽管任何品牌都可以利用最新的先进“投影电容”技术，但不是每个品牌都有像 iOS 这样的操作系统，来实现所有的服务和杀手级应用，这有助于使 iOS 设备独一无二。

这就是为什么，从操作系统的角度来看，苹果至少领先所有其他竞争对手几年，这就是为什么一个优秀的开发团队，即谷歌的人，首先专注于开发其 Android 操作系统，然后是 Nexus 系列智能手机。

**注:**在本书的后面，我们将分析这项技术如何改变了用于构建每个专用于移动世界的用户界面的范式。现在要记住的关键思想是，你需要实现的结构越复杂，与用户交互的界面设计就必须越简单。

图 6。 史蒂夫·乔布斯展示 iPhone (2007 年)并介绍 iPad (2010 年)

2010 年 1 月 27 日，苹果推出 iPad，填补了 iPhone 和 MacBook 之间的空白。苹果 iPad 运行 iOS 3.2(当时称为 iPhone OS)，分辨率为 1024x768 像素，并提供针对这一新环境优化的新原生应用。

iPad 的屏幕由单片多点触控玻璃组成，没有上下左右。没有单一的方向，因此可以根据用户的需求进行定位。这确实是苹果 iPad 背后的大事情，这就是为什么，如果有了苹果 iPhone，我们能够实现新的设备体验，有了 iPad，我们将能够把这种体验带给成千上万的潜在用户，他们直到现在还从未想过在他们的生活中拥有一台“计算机”。

**阅读笔记:**如果你想分析多点触控技术将如何影响台式电脑的未来，以及我们的生活将如何根据这场革命而改变，请跳到最后一章。

我喜欢把 iPad 想象成移动生态系统的 Wii。任天堂 Wii 受到了铁杆游戏玩家的批评，但他们没有意识到的是，任天堂 Wii 是为除他们之外的所有人准备的。

引用:“我们都希望事情变得更简单，现在这里有一个简单的事情。我认为这将是一个巨大的成功。”

苹果公司的联合创始人史蒂夫·沃兹尼亚克。

2010 年 6 月 7 日，苹果发布了最新版本的 iPhone，名为 iPhone 4，一切都改变了。iPhone 4 运行第四代 iPhone OS 固件，最初于 2010 年 6 月 21 日发布，并更名为 iOS 4。苹果的新智能手机引入了 FaceTime，视频通话功能，高清视频录制和多任务处理，用户可以同时使用多个应用。

**注意:**多任务和 iOS5 只在 iPhone 4 S、iPhone 4、iPhone 3G S、iPad 和 iPad2 上运行。iPhone 2G 的最新固件版本是 2010 年 2 月 2 日发布的 3.1.3，iPhone 3G 的最新固件版本是 2010 年 11 月发布的 4.2.1。

iPhone 4 S 和 iPhone 4 的分辨率为 960 x 640，基于苹果公司开发的新视网膜显示屏，326 ppi。它被称为视网膜显示器，因为它超出了视网膜感知不超过 300 ppi 的能力。

图 7。 移动设备历史时间轴

出于这个原因，也多亏了触摸屏技术，未来对于那些想为 iPhone 甚至 iPad 设计和开发的人来说充满了机会。

简介

“唯一真正的发现之旅。。。不是去陌生的地方，而是拥有另一双眼睛。。."

-马塞尔普鲁斯特

谁需要这本书

这本书是为想要开始设计或开发 iOS 用户界面或 iOSWebApps (iPhone、iPod Touch 和 iPad)的设计者和/或开发者而写的。

这本书是本着简单的思想编写的，目标是带你参与苹果移动设备设计和开发的整个过程，实现一个名为“商店”的真实用例

您将使用 HTML5、CSS3 和 JavaScript 等 web 标准进行设计和开发，并且阅读本书不需要任何这些技能。我们将从基础开始使用 HTML5 和 CSS3。我们将提供一个 JavaScript 速成班，也将使用 JavaScript 框架使事情变得更容易和更快。

你将从这本书中学到什么

我们将这本书分成三个逻辑部分，以便实现更好的学习导向路径。

在第一部分中，我们将介绍移动网络设计和开发的基础，以及如何超越它们。

在 第一章 “思考移动触摸”中，你将学习如何以面向移动的方式思考，学习移动设备的演变，分析苹果的独特风格。

在 第二章 “面向 iOS 设备的敏捷项目构建”中，您将学习如何通过从基本策略到草图和原型的步骤来实现移动信息架构。我们还将展示 iOS 移动设计的系统方法，首先介绍内容输出方法，然后介绍页面模型和用户界面模型，包括 iPad 使用的新的反向方法。你也会看到苹果设备的可访问性和可用性。

在 第三章“iOS 设备的 web 开发”中，您将学习如何使用 Web 标准和一些有用的工具来更快速、更轻松地开发您的 iOS Web app。将向您介绍我们将在案例研究中使用的框架，并且，通过分析 NativeApps 和 WebApps，您将看到使用 web 标准的 web 开发模型与使用 Cocoa Touch 和 Objective-C 的 SDK 开发模型之间的差异。您还将看到设计和开发 WebApp 的不同层次的方法。

**注意:**这本书主要关注 iOS 的设计和开发，使用了 HTML5、CSS3 和 JavaScript 等 web 标准；因此，我们不会在本书的任何项目中使用 Cocoa Touch 框架或 Object-C 语言。

在第二部分的中，我们将深入探讨 iPhone 和 iPad 的设计，分析方法、最佳实践和一些有助于加快工作流程的有用工具。

在 第四章“iOS 设备的用户界面设计”中，您将开始真正的移动 iOS 用户界面设计过程，使用 iPhone 和 ipad 设备，还将介绍 iOS 用户界面设计过程的认知方法背后的概念。将向你介绍正负接口和主动-被动接口的概念；你会看到感知法则，色彩心理学，以及如何在 iOS 设计中使用最常见的阅读模式。最后，我们将分析 iPhone 和 iPad 用户界面的单一元素。

在 第五章“iPhone UI 设计:简单思考”中，你会深入到 iPhone 用户界面设计过程中，你会学到这种特殊方式设计用户界面的概念和规则。您将看到如何从草图阶段开始，使用笔和纸，并进入设计阶段，使用 Adobe Fireworks，分析用例用户界面的每个图形元素。

在 第六章《iPad UI 设计:反向思考》中，你会深入到 iPad 用户界面设计中，你会学到这种特殊方式设计用户界面的概念和规则。将向您介绍反转简单的概念，您将看到如何对 iPad 用户界面元素进行优先排序、造型和分组。您将看到简单-复杂悖论的关键点，您将看到如何从草图阶段开始，使用笔和纸，并进入设计阶段，使用 Adobe Fireworks，分析我们的用例用户界面的每个图形元素。

在第三部分中，我们将开始扩展 iOS 设备、iPhone 和 iPad 的网络标准开发。

在 第七章“WebKit 的 Web 标准:最大化移动 Safari”中，我们将开始比较 iPhone 和 iPad，我们将展示混合网页和专用网页的优缺点。我们将接近 HTML5 这样的 web 标准，呈现 HTML4 中重新定义的标签和全新的标签，如<画布>、<视频>和<音频>，使用这些标签为我们的 WebApp 用例添加功能。我们将用所有新的 3 级属性来介绍 CSS3，用一个真正的速成班来分析 JavaScript，也分析 BOM(浏览器对象模型)和 DOM(文档对象模型)。

在 第八章 “原生 iOS 环境开发”中，您将学习如何开发 WebApp，从视觉基础上模拟 iOS 环境，如进入全屏模式，添加跳板图标，或与地图、电话、短信或电子邮件应用等 iOS 服务进行交互。您将了解 iOS 设备中的触摸事件和手势交互，还会看到一些自定义触摸事件处理程序的示例，包括方向更改事件。在本章的最后，你将看到如何扩展我们用例所使用的 iOS Web 框架。

在 第九章 “原生 iOS 设计实现”中，我们将学习网络概念和 iOS 网页背后的代码。您将学习如何模拟原生的 iPhone 界面，观看逐步实现 WebApp 中每个用户界面元素的代码，或者学习如何模拟新的 iPad 界面。在这两种情况下，我们将以一个真实的案例研究结束。

在 第十章 “优化 iOSWebApp”中，我们将介绍如何优化我们的 WebApp 或移动网页以及我们环境中使用的所有资产。您将了解如何优化您的 WebApp 性能，最大限度地减少带宽使用，如何使用 web 标准最佳实践优化您的 WebApp 代码，以及如何压缩您的 WebApp。您还将了解如何优化 WebApp 的可用性，解决可能影响用户的最常见的可用性问题。您将了解如何使用新的 HTML5 缓存清单功能使您的 WebApp 离线可用，在本章的最后一部分，您将了解如何使用 Google 的新移动 SEO 工具，以及如何以面向搜索引擎的方式设计您的 WebApp。

在 第十一章 “测试 iOSWebApps”中，您将看到 web 开发生命周期，并了解如何使用敏捷方法测试您的 WebApp 或 iPhone 或 iPad 的移动网页。我们将展示如何选择正确的测试以节省您的预算，如何用统一建模语言(UML)组织您的测试，以及如何以正确的方式评估您的测试结果。这一章将以一些真实的例子结束。

在第四部分中，我们将探讨基于网络的移动设备的未来，这场革命将如何改变我们的日常生活，以及这项技术将如何影响台式电脑的未来。

在 第十二章 “最大化 iOSWebApps 市场”中，我们将展示如何最大化 iOSWebApps 市场。你将学习如何使用不同的方法来推广你的 WebApp，比如 beta testers。您将了解如何将您的 WebApp 提交到 Apple WebApp 门户和其他第三方门户，以及如何利用社交网络的病毒式传播来接触所有潜在用户。在本章的最后一部分，你会看到一些将你的 WebApp 货币化的工具。

在 第十三章 “超越移动网络，展望无处不在的计算”中，我们将关注移动网络背后，讨论移动设备和无线通信的爆炸。我们还将分析多点触摸屏技术的下一代可用性，桌面计算机的未来将如何改变，以及它将如何改变我们的日常生活。

这本书会把你带到哪里？

阅读这本书，你将掌握整个设计和开发流程；你将对现实世界中 iOS 设计和开发的整个工作流程有一个全面的了解；作为一名设计师和/或开发人员，你将确切地知道“做什么和如何做”。

这本书会给你一个面向移动的心态，一个苹果移动设备特性的坚实知识，以及设计和开发过程中涉及的所有 web 标准的知识。

掌握了本书中使用的概念和技术，你将迈出作为设计师和开发者的第一步，在这段旅程结束时，你将准备好在 iOS 上开始你自己的第一个移动项目。

你将如何开始，然后你将如何使用你所学到的东西？

这本书的结构是非常面向学习的，因为整本书的结构是基于 iOS 设计和开发中使用的真实工作流，并在本书中通过一个名为“商店”的真实用例来实现。

阅读每一章，你将经历这个工作流程，除了学习 web 标准、特定技术、工具以及设计和开发所需的一切，你还将体验学习在每个面向移动的项目中使用的真正的工作流程。

一、思考移动触摸

“个人的一小步，人类的一大步…”

—尼尔·阿姆斯特朗

对于那些每天与技术一起生活和工作的人来说，这是令人兴奋的时刻，无论他们是一生都在使用技术的年轻人，还是已经适应了技术的人。这是激动人心的时刻，因为近年来，没有任何其他技术像移动设备的发展那样如此显著地改变了我们的生活。

在这本书里，你会看到移动革命如何改变了我们开发应用的方式，以及触摸屏技术如何带来新的变化。首先，您将学习如何使用新的触摸设计技术来设计基于触摸的用户界面。然后，您将学习如何根据 iPhone 和 iPad 的特定需求来调整基于触摸的设计原则。我们的项目基于标准信息架构过程的敏捷版本，用于优化用户和单个开发人员(或小团队)的需求。

在设计阶段之后，您将学习如何在开发阶段实现设计，以及如何使用 web 标准和基于 WebKit 的框架来实现项目目标。

作为该过程的最后一步，您将学习如何测试移动触摸应用，以及如何在通过 Apple WebApp 门户或其他第三方门户发布应用之前，以用户为中心的方式评估测试。

为什么是移动网络？

移动市场是存在的，它每天都在增长，这是一场影响我们生活方式的革命。问题是，“我们为什么要在这个市场上投入时间和资源？”

从桌面到移动

根据摩根士丹利(Morgan Stanley)的说法，计算的历史经历了五个主要周期(如图 1–1 所示):大型机计算(20 世纪 60 年代)、微型计算(20 世纪 70 年代)、个人计算(20 世纪 80 年代)、桌面互联网计算(20 世纪 90 年代)和移动互联网计算(21 世纪初)。看看移动互联网计算时代，你可以找出这种演变的原因。

图 1–1。 计算史上的技术周期

首先，新的触摸屏技术增加了界面的可用性，同时减少了移动网络浏览的挫折感。其次是脸书和 Twitter 等社交网络的惊人发展。第三是新的 VoIP 服务，它是传统 2G 和 3G 蜂窝通信的有吸引力的替代品，这是当地 ISP 在过去几年中提供的新的廉价数据计划。

iPhone 处于这一过程的中心，因为它催化了这三个因素(也是其中一些因素的先驱)，正如你从图 1–2 中看到的，它已经逐月获得并保持了其在市场上的主导地位。这是今天开始为 iPhone 和 iPad 设计和开发的另一个好理由。在短时间内，学习 Objective-C(用于本地应用)或 web standards(用于 web 应用)这样的语言所花费的时间肯定是值得的。

**图 1–2。**2011 年市场上的顶级制造商(来源:MobileMix)

在不久的将来，移动设备的不断发展将涉及一些交互，推动移动生态系统优化其一些服务，并将它们作为所有设备的标准功能，同时引入其他新服务，如以下服务:

增强现实

移动设备可以使用来自网络服务的信息来“浏览”现实。

作为钱包的移动设备

我们可以通过我们的设备进行安全支付，将普通的智能手机转变为借记卡或信用卡。移动商务也变得越来越普遍。

移动电视

移动用户可以广泛访问由专业公司和普通用户创建的传统和面向移动的内容。

“智能”移动网络

这使得移动电话能够自动连接到位于用户附近区域的所有可用接入点。

全球定位服务

用户的位置会自动更新并导出，以供私人和公共应用使用。

口袋里的互联网

今天，你可以用市场上的几个触摸屏设备浏览互联网，但在未来，即使是“大规模生产”的手机也将配备 HTML 浏览器。

改进的人体工程学和可用性

大多数用户都知道，要在“大规模生产”设备上运行应用或输入数据，必须在手机键盘上进行大量点击。在不久的将来，许多这样的设备将配备触摸屏技术。

移动市场

如今，超过 40 亿人拥有或使用移动设备。其中，近 50%的人通过移动设备访问网络，而且这个数字还在逐年增长。

今天，市场上有六种主要的移动操作系统:

• ios
• Symbian 操作系统
• 机器人
• 肾脏 OS
• Windows Phone 7
• WebOS

您可以在 Figure 1–3 中看到全球每个操作系统的不同百分比。

**图 1–3。**2011 年操作系统份额(来源:MobileMix)。

根据这些百分比，今天开始为移动设备设计和开发的第一个好理由是市场很大，比桌面市场有更多的工作机会。

随着移动市场的迅猛发展，如今越来越多的人通过移动设备而不是台式电脑访问网络。对于电子邮件、RSS 或社交网络等服务，移动互联网接入和桌面互联网接入之间的差距甚至更大。今天，在最近的 MobileMix 报告中显示，这三种服务是移动设备上使用最多的。(“美国 60%的流量来自有 WiFi 功能的设备，iPhone 比其他智能手机更多地用于 WiFi。”2011 年 5 月报告，第 17 页。)就我自己而言，我很难想象每天去上班却不能在 iPhone 上访问 RSS 提要和电子邮件。

为什么现在要移动？

随着移动设备发展中的增长路径变得显而易见，你终于有理由投入时间开发苹果设备了。原因是这些类型的服务在非触摸屏设备和一些有触摸屏的非苹果设备上不可用。

今天是跳上移动设备开发列车的正确时刻，因为我们(计算机)活动的中心无疑正在从我们的房子里转移到我们的口袋里。

面向移动的方法

移动设备的设计和开发需要一个小的范式变化；所涉及的技术不同，用户界面不同，甚至环境条件也不同，因为大多数时候，您的应用和服务是在户外使用的，而不是在安静舒适的房间里。

尽管如此，你始终需要记住的唯一建议是常见而明显的:试着站在移动用户的立场上，一切都会好的。

在本书的第二部分，我们使用 iPhone 和 iPad 现在，我们向您展示一些在接触面向移动设备的范例时需要记住的要点。

面向移动的指南

要解决移动网站设计带来的问题，并获得与标准网站一样用户友好和有用的结果，需要一些创造性的解决问题的技巧，包括:

• 了解可用的硬件和软件
• 给用户一种访问标准站点的感觉
• 给予用户访问标准站点的选项
• 为纵向和横向视图设计
• 只包含标准站点中的重要内容
• 为线性用户体验区分内容的优先级
• 优化手指导航
• 优化代码以减少带宽使用
• 最大限度地减少图像的使用，以减少带宽使用
• 确保您的重定向正常工作
• 测试，测试，测试！

作为设计者和开发者，你的目标是构建一个 Web ，在这个 Web 中，相同的信息是可用的，并且针对不同的设备进行了优化，正如图 1–4 中所详述的。

一网打尽

W3C 对一个网站的概念定义如下:

“一个网络意味着尽可能合理地向用户提供相同的信息和服务，而不管他们使用什么设备。但是，这并不意味着在所有设备上，完全相同的信息都以完全相同的方式呈现。移动使用环境、设备能力变化、带宽问题和移动网络能力都会影响表示。此外，一些服务和信息更适合并针对特定的用户环境。”

摘自“W3C 移动 Web 最佳实践 1.0”第 3.1 章

根据 W3C 标准，不要害怕提供不同版本的内容，因为内容的作用是向用户传递信息；因此，专注于提供相同的(优化的)信息，而不一定是完全相同的内容。

图 1–4。 视觉上的一网范例

这个概念与跨浏览器设计中使用的概念相同；不幸的是，许多设计师仍然认为设计一个跨浏览器的网站意味着在所有现有的浏览器中实现相同的网站外观。

从内容输出的角度来看(不仅仅是从这个角度来看)，跨浏览器设计的主要功能是使相同的消息可以在不同的浏览器中使用。

注:我们将在第二章的中深入解释内容提取方法。

苹果手机硬件

你在这本书里提到的一个关键点是“硬件不那么重要；用户体验才是真正的杀手级应用。”尽管如此，深入了解项目中使用的硬件是设计和开发高质量作品的基础和必要条件。

通常，人们会在设计网站或 Web 应用时寻求指导，以兼容同一设备的不同型号，答案总是相同的:如果您设计网站，请针对最老的设备优化您的工作，因为网站是一个通用资源，您需要向用户保证其功能的可用性。

如果您设计一个 iOS web 应用，您需要保证一组功能从最旧的设备到最新的设备都可用，并且这些功能的子集只针对最新的设备进行了优化。合理的比例可能是 30%到 70 %,其中 70%的功能可用于所有设备型号。

总结

这一章展示了计算技术是如何经历了四代以及使用了哪些技术。它还展示了在其高级功能之上运行 iOS 的设备如何成为本地和 web 开发人员的最佳解决方案。

本章描述了一种面向移动的范例的一般方法，以及解决移动网站和 web 应用设计中出现的问题的一些基本原则。

向您介绍了一些基于触摸屏设备的杀手级服务，并看到了几乎所有这些服务都是如何在移动中使用的。此外，您还看到了设计人员和开发人员需要如何处理这种新型的移动环境来优化移动用户体验。

二、面向 iOS 设备的敏捷项目构建

“…给我印象最深的是我们认为人们使用网站的方式和他们实际使用网站的方式之间的差异。”

——史蒂夫·克鲁格

移动策略和信息架构过程是项目流程中最重要的两个变量。通过这些过程，您构建了网站或 web 应用的基础。接下来的一切都建立在你在那个阶段创造的基础之上。

因此，本章涵盖了这些重要过程的许多基本细节，首先定义一个移动策略，然后展示如何实现信息架构过程。

接下来，您将学习信息架构过程中的三个主要步骤，以及如何在设计 iOS web 应用时调整这些步骤。我将讨论这种方法的“黄金法则”,以及可用性和易访问性在这个过程中是如何相互作用的。

在本章的最后一部分，我将研究 iPhone 和 iPad 的设计模型，并分析它们的用户界面元素。

实现移动信息架构

在我们阅读这本书的过程中，你将跟随一个视觉流程(见图 2–1)，这样你就能清楚地知道我们在任何给定的时间点都在哪里，以及我们将如何到达我们想要去的地方。移动项目流程的第一步是分析阶段。在此阶段，您将定义您的移动战略。你的项目越大，这第一步就越重要。规划一个合理的移动策略可以减轻项目的主要风险。

图 2–1。 移动项目流程-步骤 1.1:信息架构

在第一步分析之后，您就可以开始信息架构过程了。您的角色是为移动环境解释内容。在移动信息架构过程中，您需要发现您想要交付或提供的信息或服务的种类，将这些信息与用户的需求相匹配。该过程包括根据每个用户的环境确定要使用的适当元数据结构。

用户的即时环境是移动环境和桌面环境的主要区别，在桌面环境中，用户与信息的交互总是相同的，从不改变。

**注意:**正如您将看到的，使用移动应用与使用桌面项目没有什么不同。我将详细介绍一下这个过程，以确保您能看到全貌。

什么是信息架构，为什么它很重要？

信息架构(也称为 IA)是每个项目的基础，根据 Richard Saul Wurman(来自 AIA(美国建筑师协会)全国会议，1976)的说法，我们可以将信息架构师定义如下:

• 组织数据中固有模式的个人，使复杂的信息变得清晰。
• 一个创建信息结构或地图的人，允许其他人找到他们个人的知识之路。
• 新兴的 21 世纪专业职业的一员，致力于时代的需求，专注于清晰性、人类理解和信息组织的科学。

不能仅仅因为你的新网站或 Web 应用有好看的视觉设计或提供市场上最新的服务就保证成功，因为如果信息架构不良，一个设计良好的产品仍然可能失败。从桌面到移动，信息架构是几乎每个项目中最被低估的步骤之一。

在使用移动信息架构的过程中，我们不仅要定义信息的结构，还要定义用户在特定环境中与信息的交互方式。

信息构建不是一个固定的过程；它可以适应不同的环境，优化努力和成就之间的比例。以下是我个人对这一过程的看法，分 9 个阶段呈现。

信息架构的九个阶段

完整的信息架构流程由九个阶段组成:

• 信息研究，
• 信息管理，
• 内容架构(CA)，
• 体验设计(XD)，
• 用户体验(UX)，
• 信息设计(ID)、
• 可用性工程(UE)，
• 交互设计(ID)，以及
• 人机交互(HCI)。

在第一个 IR(信息研究)阶段之后，从 IM(信息管理)到 HCI(人机交互)，围绕圆圈顺时针移动(参见图 2–2)，细节的相对深度增加。

在即时消息阶段，顾问关心的是很少的细节，而不是大局。

图 2–2。 信息架构流程:从设计到实现

很明显，在这个过程中有迭代的空间(就像在大多数现代开发方法中一样)，但是一般来说，随着时间的推移，细节的级别会提高。

现在该详细看看九相了。

信息研究(IR)

这是收集信息的第一步。这是一个至关重要的阶段，因为未来的决策将使用以下信息:

• 使用的技术，
• 市场分析，
• 竞争对手对比，
• 输出文档，以及
• 项目要求。

信息管理(IM)

这是这一过程的战略部分。此活动的目的是规划组织管理信息的总体方法。信息管理方法包括

• 使用的技术，
• 头脑风暴，
• 流程图，
• 流程图，
• 路标
• 信息管理策略，
• 输出文档，
• 信息管理规范，以及
• 移动战略。

内容架构(CA)

在这里，您可以在一个相当宽泛的层次上设计网站或应用中的内容，以及这些内容的结构和组织方式。为此，您可以依靠

• 使用的技术，
• 内容外方法，
• 语义标记，
• 网站地图，
• 思维导图，
• 蓝图，
• 灰色方框线框，
• 泳道图表，
• 电子原型，
• 输出文档，以及
• 内容规范。

体验设计(XD)

这从资产之外的更广阔的角度看待设计，并考虑用户将拥有的总体体验。该过程包括以下内容:

• 使用的技术，
• 整合营销活动，
  • 多渠道战略，
  • 客户生命周期计划，
  • 客户关系管理策略、
  • 流程图，
  • 站点地图，以及
• 输出文档，
  • 体验设计规范。

用户体验(UX)

在这里，您可以根据不同的用户上下文来设计网站或应用内容的组织方式:

• 使用的技术，
• 线框，
• 纸上原型，
• 电子原型，
• 输出文档，
• 用户体验规范等。

信息设计(ID)

这是设计信息传达方式的实践，无论是文本还是图形:

• 使用的技术，
• 纸上原型，
• 页面模板，
• 线框，
• 输出文档，
• 信息设计规范等等。

可用性工程(UE)

这主要是通过设计模式来设计用户体验。

**定义:**设计模式

在给定的环境中，对一个经常发生的问题的可重用的解决方案。

设计模式不是可以直接转换成代码的成品设计。它是如何解决一个问题的描述或模板，可以在许多不同的情况下使用。“(维基百科)

如果我们应用一个迭代过程，UE 也可以利用在 HCI 级别进行的研究来解决可用性问题。毕竟，重点更多的是关于界面的以下细节，而不是美学:

• 成果和人工制品，
• 详细的线框，
• 纸上原型，
• 电子原型，
• 流程图，
• 输出文档，以及
• 可用性工程规范。

交互设计(ID)

在这个阶段，您开始设计一个用户界面，使用户能够与站点或应用进行交互。以下是可以用来改进交互设计的工具:

• 成果和工件
• 情节串连图板
• 交互序列图
• 交互式原型
• 状态图
• 输出文档
• 交互设计规范

人机交互(HCI)

这是最详细的活动，涉及用户如何与计算机系统或移动设备交互的科学和机制。

• 成果和工件
• 任务分析
• 用户场景
• 电子原型
• 输出文档
• 人机交互规范

面向 iOS 设计和开发的敏捷且优化的信息架构流程

苹果应用商店的范例给了许多个人开发者单独开发他们的应用的机会，或者至少可以组成小团队。根据我的经验，从事中小型项目的单个设计师或小型开发团队不需要遵循并严格应用信息架构过程中定义的所有阶段。当然，IA 流程中的所有原则都很重要，但是您可以将它们分组到几个活动中，这样既节省了工作时间，又不会降低效率。

我真的相信敏捷流程，一个适用于 iPhone 和 iPad 的敏捷且优化的信息架构流程是确保工作时间和结果之间平衡的最佳方式。

在您的 iPhone 和 iPad 优化项目流程中，信息架构包括以下阶段。

1. 信息研究使用的技术:竞争对手比较
2. 信息管理(IM) 使用的技术:头脑风暴、流程图、路线图
3. 内容架构(CA) 使用的技术:内容输出、网站地图、思维导图、国标线框
4. 体验设计(XD) 使用的技术:流程图、网站地图、国标线框
5. 用户体验(UX) 使用的技术:线框图，纸上原型
6. 信息设计(ID) 使用的技术:线框、纸原型、页面模板
7. 可用性工程(UE) 使用的技术:纸质原型，电子原型，流程图
8. 交互设计(ID) 使用的技术:交互序列图
9. 使用的技术:电子原型

**注意:**敏捷流程在每一步结束时都会向团队的所有成员发出反馈请求。只有当你是自由职业者时，你才可以忽略这个要求。然而，在团队中工作时，你不应该忘记这一点。

如您所见，您在不止一项活动中使用了 IA 流程中的常用技术，因为在工作时间和结果之间建立良好平衡的最佳方式是遵循两条原则:

• 为移动环境选择最灵活和优化的技术。例如，在第四个 UX 阶段，使用纸质原型而不是电子原型。
• 使用流程中最常见的技术。例如，通过使用纸质原型，您可以为第四个 UX 阶段、第五个 ID 阶段和第六个 UE 阶段“重用”您的工件。

**注意:**我所说的“重用”并不是指您将一个过程中的完全相同的工件用于另一个过程，因为当在 IA 过程中前进时，您的工件的详细程度会增加。

重用同一个工件意味着从最初的工件开始，并对其进行开发以使工件进化，并在项目流程的后续步骤中使用这种工件进化，从而避免了为流程的每个步骤实现和使用新技术的成本。

至此，您已经看到了整个信息架构过程。现在，您还知道如何修改这个过程，以便在中小型项目中优化您的工作时间。现在，让我直观地展示一下这一切。

在图 2–3 中描述的流程直观地显示了在信息架构过程中在哪里应用 IA 技术重用。

图 2–3。 针对 iPhone 和 iPad 设计优化的敏捷信息架构流程

要明确的是，敏捷流程通常是更好的选择，尤其是对于一个大项目，但这里的关键点是，在中小型项目中，我们不需要按照整个 IA 流程来设计和开发我们的产品。

信息构建的三个主要过程概述

九个信息架构阶段包含在三个主要流程中(如图 2–4 所示):

• 发现，
• 分析，以及
• 建筑。

在发现过程中，您开始收集有关网站或应用市场环境的信息。这个过程包括 IR 阶段。

在分析过程中，您可以通过规划制定移动战略的正确方法，开始处理收集到的信息。分析过程包括信息管理(IM)阶段。

架构流程是完成设计工作的地方。架构过程包括体验设计(XD)、内容架构(CA)、用户体验(UX)、信息设计(ID)、可用性工程(UE)、交互设计(ID)和人机交互(HCI)阶段。

图 2–4。 信息架构框架中的三个过程

正如您到目前为止所看到的，移动信息架构与您可能设计的桌面项目架构没有太大的不同。我只补充了一点:用户上下文。

用户环境(如图 2–5 所示)是一个改变用户体验的过滤器。

图 2–5。 信息架构框架:内容、上下文和用户

想象一下，躺在沙发上平静地阅读 RSS 阅读器上的最新信息，想想那是什么感觉。现在，想象一下同样的经历，在地铁里，或者更糟，在早上 7:30 拥挤的公交车上。

通过描绘这些场景，您可以理解当用户体验的环境发生变化时，用户的体验也会发生巨大的变化。

**例子:**同一个上下文可以有不同的实例。

`- Context: “Reading RSS Feeds”

• Context instances: Sofa RSS Reading, Walking RSS Reading, Subway RSS Reading, and Bus RSS Reading`

出于这个原因，小心地对上下文实例建模是我们项目中的一个关键因素。在分析阶段，犯了一个错误而忘记了一个具体的实例会花费“1”，但是同样的错误在设计阶段会花费“10”，在开发阶段会花费“100”。

在分析阶段，忘记一个实例的上下文结果是一个相对较小的错误，因为我们总是可以拿起笔，向我们的上下文实例清单中添加一个条目。使用来自分析阶段的不完整信息来设计用户界面意味着设计的界面可能永远不会满足所有用户的需求。基于设计糟糕的界面开始开发阶段意味着发布一些用户永远无法利用的服务。信息构建过程中的错误成本可以在图 2–6 中看到。

图 2–6。 信息构建过程中的错误成本

因此，一旦你在项目流程中走得更远，事情就会改变。如果您需要在项目流程中后退一步，以便处理信息架构中的错误，那么整个项目流程将会受到截止日期和时间范围的影响；或许在延期期间，甚至商业目标也会改变。

现在，您可以看到如何使用该流程的敏捷和优化版本来优化每个 IA 阶段花费的工作时间。

遵守移动战略的黄金法则

手机是一种不同的媒介，由一套不同的规则管理。但是，一旦您定义了敏捷信息架构过程，您就可以开始遵循一些黄金法则来处理一般的架构案例。

了解用户及其需求

试着了解用户是谁，他们从网站或 web 应用中寻找什么，以及当他们使用它时他们实际上在哪里。

考虑移动性的设计

我已经讨论了上下文实例，理解上下文在创建任何移动产品时都是至关重要的。预测用户环境可能很困难，因为不可能预测所有可能影响用户体验的情况。

以移动用户为目标确保你的产品可以在任何时间任何地点使用。一旦你清楚地记住了应用的目标，试着描绘出所有可能的应用场景，然后就潜在用户通常的移动应用环境采访他们。

不转换，创造

简单地将桌面网站或 Web 应用移植到移动设备上是一个很大的错误。我们必须创造新产品，而不是为小屏幕重新构思。专门为移动设备创建而不是转换体验，可以让用户更快、更友好地获取信息。

保持简单

如果有一条规则我们绝对不能忘记，那就是这条:iPhone 和 iPad 是智能电脑，但人们希望以简单的方式使用它们。人们(经常)在做其他事情时使用苹果移动设备，如走路、说话、听音乐或演讲、开车(请不要这样做！)，等等。人类的认知资源是有限的，如果我们在其他功能活动中使用这些资源的一部分，我们将无法同时管理像典型的桌面用户界面这样的复杂结构。遵循这个原则，你的应用越简单，用户的移动体验就越好。如果你理解了这一关键点，你也开始欣赏苹果在 iPad 上使用 iOS 而不是完整版 OSX 的决定。

内容-出方法

网站是用来传递信息的。在网络的早期，设计对网站的存在没有任何作用。今天，我们仍然将内容视为网站或 web 应用最重要的部分，一切都必须从这里开始(如图图 2–7 所示)。

内容外方法是一种全新的方法，内容向设计者展示最终的布局应该是怎样的。设计师利用这些内容来设定他们可能性的边界，使整个过程变得更容易、更快。

图 2–7。 HTML W3C 兼容标记(左)及其在华尔街日报和纽约时报网站上的语义标记实现(右)

内容输出方法与语义标记密切相关。这种技术的目标是使用适当的语义元素来标记 web 内容的结构。这些元素是根据它们的意义来使用的，而不是因为它们在视觉上的表现方式。

从上到下，这是语义的一般层次。

1. 导航(主)
2. 品牌区域
3. 主要内容
4. 补充内容
5. 导航(辅助)
6. 网站信息

**注:**这些 mantic 方法是 W3C“Web Accessibility Initiative”(WAI)发布的“Web Content Accessibility Guidelines 2.0”(wcag 20)的一部分，旨在支持开发更易访问的 Web 内容。

以下是我们每次采用内容外包方法时使用的一些步骤。

1. 定义内容。
2. 将内容转换为 HTML5。
3. 使用语义标记来设置内容层次结构。
4. 使用灰框线框来分配布局空间和比例。
5. 设计和样式的布局。

换句话说，在构建网页的过程中，所有内容都必须在任何标记、线框或 CSS3 样式发生之前生成并转换为 HTML5。一旦你把我们所有的内容放到一个非样式化的网页中，你就可以自由地继续这个过程，思考哪种设计最适合你的内容。

用站点地图表示信息架构

一旦您完成了信息研究和信息管理阶段，并使用内容外方法构建了项目的基础，您就可以表示信息并在内容架构和体验设计阶段工作，如图 2–8 所示。

图 2–8。 阶段 3 和阶段 4 的敏捷信息架构过程:表示信息架构

在使用内容外方法定义内容之后，我们用来定义移动信息架构的第一个项目是站点地图。它直观地展示了我们所有的内容是如何联系在一起的，并为用户如何浏览信息空间提供了一条清晰的路径。

移动站点地图与 web 上使用的站点地图没有什么不同，但是有一个重要的区别，我们将在下面看到。

犯错的机会有限

信息架构师总是在争论宽和深的站点地图哪个是最好的选择。像计算机科学中的其他事情一样，这个选择从来不是非黑即白的。

**注意:**内容架构是您开始插入内容的地方，显示它是如何组织的。组织你的内容的最好的工具是线框，但是你在线框中插入的所有内容将是你之前在站点地图上表示的内容的实现。

在桌面站点地图上，你可能决定选择宽的或深的站点地图来满足特定的网站需求，如图 2–9 所示。在移动站点地图中，您只有一个选择:宽站点地图。出现这种情况是因为用户体验与桌面完全不同，一切都应该在 2 到 4 次线性点击中实现。

图 2–9。 宽(左边的结构)和深(右边的结构)场地图的视觉对比

想象一下，用你的 iPhone 浏览一个具有图 2–10 所示结构的页面，其中两个结构在导航的主要级别都有三个链接。通过浏览宽结构并选择链接号 1，您有 100%的机会为我们的信息选择正确的路径。通过浏览深层结构并选择 3 号链接，你只有 33%的机会选择正确的路径，如果你选择 1 号链接，你的机会下降到 25%。

现在，想象一下在一个典型的网站中你可能会面对多少个链接。用户做出错误选择的风险有多大？如果坐在台式电脑前的用户走错了路，他们一眼就能看到如何返回主导航层。但对于 iPhone 来说，这不是在你的(二元)生活中寻找平静的正确方式。

在这一阶段，您通过在非常基础的层面上测试用户将与网站或 web 应用进行哪些类型的交互来建立用户体验的基础。

**注:**我们可以将用户体验中的交互定义为每当人类使用界面以实现目标或获取资源时，发生在人类与人类界面之间的一种行为。

通过处理表示站点地图结构的内容架构，您也开始处理(即使是间接的)用户体验。

提供显示导航路径的方向

在移动用户体验中提供方向是一个关键因素，因此记住我们需要在每个页面上显示页面标题和导航路径是很重要的。对于两级结构和选项卡式导航菜单，我们可以省略导航路径，因为在这种情况下，页面标题和导航路径提供相同的信息。使用基于标签的界面，我们需要突出显示当前页面的标签，就像在 You Tube 的视频页面上那样。).

**注意:**在页面中显示导航路径意味着显示从 A 点到 b 点的某个站点地图路径。如果您愿意，您可以将导航路径视为单个站点地图实例。

移动用户可用于浏览的认知资源数量有限，很容易体验到迷失在空间中的感觉。如果我们的用户界面不是基于标签，我们可以使用面包屑来达到同样的目的，并避免用户的挫折感。

如果我们有一个很宽的站点地图，我们可以在界面中插入几个选项卡或者插入一个下拉菜单。iPhone 和 iPad 可以很好地处理这种菜单，即使它包含一长串选项。在图 2–10 中，我们有两个标签导航和下拉菜单的好例子:谷歌和纽约时报。

图 2–10。 标签式菜单和下拉式菜单的好例子:谷歌和纽约时报

用线框勾画信息架构

网站地图显示了信息空间中的内容是如何组织的。现在，是时候使用你的第二个信息架构工具:线框来改善用户体验了。目前，您正处于敏捷信息架构流程的第四阶段，如图 2–11 所示。

图 2–11。 敏捷信息架构过程第 4 阶段:勾画信息架构

使用线框，你在页面上展示信息，使信息空间变得有形。使用线框为站点地图提供了视觉效果，并定义了用户如何与体验交互。

第一种方法是用一些手绘草图来勾画线框结构，如图 2–12 所示。我相信徒手设计，当我需要创造一些东西时更是如此，因为创造过程与手工活动密切相关。

图 2–12。 一个手工绘制 iPhone 或 iPod 线框的工具(图像培养代码)

一旦你的想法变得更加具体，你可以用一张打印出来的纸来更详细地重新设计结构。

我发现线框是最有价值的可交付信息，因为它们清楚地传达了布局思想，并且因为你可以在项目流程的下一阶段重用那些可交付的部分:原型。

线框的唯一缺点是它们不能传达复杂的结构；这就是原型的用武之地。

通过原型可视化交互

原型制作听起来可能是多余的或耗时的，许多开发人员更喜欢跳进去开始编码，但是正如前面提到的，原型开始发挥作用是因为在有了线框结构之后，您需要处理细节。

有了原型，你就处于第 5、6、7 和 8 阶段(见图 2–13)，在这些阶段你可以进入信息设计、可用性工程、交互设计和人机交互阶段。

图 2–13。 敏捷信息架构过程的第 5、6、7 和 8 阶段:可视化信息架构

在原型上工作也减少了设计阶段的许多主要风险，最终节省了您的时间和金钱。

原型(纸质的和电子的)也是设计、迭代和集体讨论概念的最快可能方式。一旦一个原型被创造出来，就有了一个坚实的基础(即使是草图形式)可以讨论，这就把概念带入了生活。

开发团队中典型的原型迭代路径是

1. 勾画出你的想法，
2. 向团队展示，
3. 与团队一起评论，
4. 让它活起来，然后
5. 回到步骤 1(重复这个过程)。

如果你设计一个网站，你可以使用线框结构来制作页面模板。

继续你的敏捷设计和开发方法，你会看到使用原型的两种方式:纸质和电子。

纸上原型

最基础的是纸质原型(如图 2–14 所示)，我们可以通过使用模板工具在打印出的线框上制作，以设计精确的用户界面，甚至可以用纸笔手绘结构草图。

图 2–14。 一个纸质原型工具与一个真实的 iPhone 对比

纸质原型在测试阶段也很有用。使用它让你有机会在可用性测试阶段重用你的工作。你将在第十一章中更深入地了解这项技术。

电子原型

下一个层次是电子原型。使用这个工具，您可以分析原型结构的行为。使用电子原型，您可以模拟人机界面交互，并在编码之前获得有效的反馈。

一个好的解决方案是使用基于 HTML5、CSS 和 JavaScript 的轻量级结构，用临时内容和数据填充。将这个原型结构加载到您的设备上会产生最接近最终产品的体验，因为您可以看到屏幕上会显示多少内容。使用远程文件和带有电子原型的服务器，您还可以开始处理加载时间和网络延迟。电子原型对于在可用性工程阶段继续你的可用性工作也很重要，在这个阶段你使用更详细的原型作为基础。

电子原型也有助于支持人机交互阶段，在这一阶段，您可以使用交互序列图进行人机交互和交互设计。

图 2–15。 一个完整的敏捷信息架构过程

在第三章第一节中，我介绍了为 iPhone 和 iPad 构建网站和 Web 应用的框架。一旦您理解了框架结构，您就能够定义一个模板来加速电子原型的实现阶段。

手机设计的系统方法

正如您在移动信息流程中看到的，实现目标的最佳方式是设定一条从您所处的位置到目标位置的路径。在设计阶段，没有 IA 流程中的九个阶段，但仍然有一个系统的方法来专注于路径并优化整个工作流程。

设计时有两个重要的阶段:可访问性和可用性。可访问性和可用性是密切相关的，但是更重要的考虑是让所有用户都可以访问你的网站或 web 应用，然后设计和优化它的可用性。

苹果设备中的辅助功能

根据 W3C 的定义，网页可访问性是指让所有能力水平的人都能访问网站和 Web 应用的实践。MWBP(移动网络最佳实践)和 WBP(网络最佳实践)之间有重叠，因为在大多数情况下，他们有类似的障碍和类似的解决方案。移动网页可访问性旨在解决的两个最重要的需求是视觉和听觉需求。

**注:**2008 年 12 月 11 日，WAI(网络无障碍倡议)发布了 WCAG 2.0 作为推荐标准。WCAG 包含一套关于内容可访问性的指导原则，主要针对残疾用户，但也针对所有用户设备，包括高度受限的设备，如移动电话和智能手机。

解决(至少)视频和音频需求将使您的网站或 web 应用对您的大多数潜在用户都是可访问的，正如在图 2–16 中可以看到的。但不幸的是，这并不总是容易实现的，有时甚至许多知名和成功的产品至少在某种程度上缺乏可访问性。

图 2–16。 三种辅助功能服务:缩放(左)、画外音(中)、黑底白字(右)

W3C WCAG 2.0 提供了使您的网站或 web 应用更易访问的指南。不幸的是，在撰写《WCAG》时并没有考虑触摸屏设备，但以下几点背后的大部分概念都适用于 iPhone 和 iPad。

• 正确使用标准技术。
• 提供手指友好的导航结构。
• 在每个网页上提供方向信息。
• 提供字体大小控制。
• 在文本、图像和背景之间提供良好的对比度。
• 提供高对比度版本的网页。
• 提供网页的语音版本，如图 2–17 所示。

iPhone 和 iPad 有一些新功能，使残疾用户可以使用它们。例如，残疾用户不会被迫记住长键盘组合来找到他们要找的东西:要选择和打开一个项目，用户需要点击或双击它。为了让用户从这些功能中受益，设计者和开发者必须了解这些功能，以便优化内容和服务。

画外音

这一功能使您的 iPhone 或 iPad 成为第一个基于手势的屏幕阅读器，使用户能够与屏幕上的项目进行物理交互。VoiceOver 与 iPhone 和 iPad 的触摸屏配合使用，让用户可以直接与屏幕上的对象进行交互。这使得视力受损的用户能够访问内容并在站点地图上确定自己的方向。

图 2–17。 辅助功能:画外音

VoiceOver 是一种设备功能，独立于您的网站或 web 应用，让您无需付出任何特别的努力即可受益；然而，为了避免给用户带来令人沮丧的导航体验，必须应用良好的用户界面设计实践。很快，您将研究好的用户界面实践。

语音控制

除了手势之外，您还可以使用语音命令来播放音乐或拨打电话。您只需按住主屏幕按钮，聆听音频提示，并说出地址簿中的姓名或 iTunes 播放列表中的艺术家姓名。

缩放

通过此功能，如图 2.18 所示，用户可以放大整个 Spotlight 或解锁屏幕，或任何其他本地或购买的屏幕应用。

图 2–18。 辅助功能:缩放

一旦启用，用三个手指双击即可立即放大和缩小 200%，用户可以双击并拖动三个手指，在 100%和 500%之间动态调整放大倍数。

黑底白字

喜欢高对比度的用户可以使用此选项将显示改为黑底白字，如 Figure 2–19 所示。这种反极性效果适用于所有应用，包括 Home、Unlock 和 Spotlight。

图 2–19。 辅助功能:黑底白字

iPhone 和 iPad 的颜色菜单非常适合这种颜色反转，但是如果你的网站或 Web 应用使用的颜色对比度不够，结果就不会令人满意。为了防止这种副作用，在设计用户界面时，使用具有足够对比度的调色板。

字幕

iPhone 和 iPad 都支持播放开放字幕、隐藏字幕和字幕。字幕出现在屏幕上，就像用户可以在电视上看到的隐藏字幕一样。您可以使用适当的工具创建自己的。

听觉、视觉和振动警报

这些选项向用户提供听觉和视觉警报。用户可以为电话呼叫、新的文本消息、新的和已发送的电子邮件以及日历事件设置这些提醒。

无障碍软件功能

从 iOS5 开始，苹果对 iOS 设备的可访问性进行了几项重大改进。这些新功能使行动不便、有听力、视力或认知障碍的人更容易充分利用他们的 iOS 设备。首先，增加了一种新的方式来添加某些功能，让用户通过触摸触摸屏上的特定点来快速回忆它们。使用这个新菜单，用户可以访问一些设置功能，甚至可以绕过 Home 按钮立即返回到仪表板。

一个相关的功能是使用 LED 闪光灯和可定制的来电振动。当有人打电话给 iPhone 时，LED 闪光灯会打开，自定义振动会开始。新的辅助触摸功能使用户能够将手势定制为宏快捷方式。苹果还增加了一个说话选择功能，带有一个可调的语速滑块，用于发声文本选择。甚至更老的功能也得到了改进，例如 VoiceOver 现在包括自定义元素标签。

iOS 设备的可用性

可用性专家 Jakob Nielsen 认为，“可用性是一种质量属性，用来评估界面的易用性。”虽然易访问性主要影响一部分用户，但是可用性影响所有的用户。

在信息研究中仔细和深思熟虑的工作可以减轻潜在的可用性问题，例如图 2–20 中所示的问题。2008 年，Create with Context 对 iPhone 可用性进行了一项有趣的研究，名为“人们如何真正使用 iPhone ”,该研究表明设计师和开发人员有时很难预测用户行为。

图 2–20。 可用性研究:人们如何真正使用 iPhone(图片:结合上下文创建)。

Create with Context 的研究得出了 iPhone 设计和开发的八条通用规则，这些规则现在也适用于 iPad。这些规则如下:

• 利用习得的行为。“哦，这就像日历一样”
• 避免交互不一致。 “这太奇怪了，取消通常是在那边”
• 跨部件提供清晰的概念链接。这个按钮一定和那个盒子有关，因为它们紧挨着
• 在动作部件之间留出空间。 “天哪，我不是故意发那条短信的！”
• 意外过擦的计划。“我总是不小心切换到不同的屏幕”
• 不要完全依赖多点触控。“当我另一只手拿着东西时，很难做到这一点”
• 为点击提供视觉反馈。“它按下那个按钮了吗？我不确定”
• 提供交互启示。很明显，你应该左右滑动

**注:**在 [www.slideshare.net/createwithc…](http://www.slideshare.net/createwithcontext/how-people-really-use-the-iphone-presentation).的 Slideshare 上可以看到该研究的完整介绍

如需下载 PDF，请访问 [www.createwithcontext.com/how-people-…](http://www.createwithcontext.com/how-people-really-use-the-iphone.html)。

这些问题既是产品可用性的基础，同时又很难预防，因为你掌握的东西越多，你就越不能站在新手的角度考虑问题。这就是为什么伟大的教授如此罕见的原因之一。

什么时候进行可用性研究

到目前为止，您已经看到了为了向尽可能多的用户提供良好的用户体验，可访问性和可用性在您的项目中是多么重要。这里，最重要的问题是:你应该什么时候在可用性上工作？

我可以确定一些关键时刻，在这些时刻，对可用性的仔细研究可以提高你的项目的整体感知质量。这些要点如下:

1. Before Starting the Project

   您需要收集有关竞争对手的信息，并了解他们如何解决特定的应用问题来实现项目目标。

   您需要理解用户应用上下文，并找出如何优化它们。

2. Before Starting to Design

   如果你改编了一个桌面网站或者一个 Web 应用，你需要决定从网页结构中保留什么(因为它可以在移动环境中工作)和丢弃什么(因为它不能)。创建站点地图以测试和分析网站或 web 应用内容结构。

3. In the Design Phase

   区分所有网页内容的优先级。

   使用线框、纸质原型和电子原型来表示站点地图。

4. In the Test Phase

   使用原型来测试用户体验的水平。

您可以看到可用性原则是如何应用于项目流程的许多阶段的。在下一章，我将介绍一个清单，它可以帮助你在项目中获得高水平的用户体验。

iPhone 和 iPad 可用性的差异

iPhone 和 iPad 运行 iOS，它们共享相同的导航模式，但它们使用不同尺寸元素的不同显示器在一定程度上改变了用户对用户界面的感知，从而导致用户体验的可用性和质量发生变化。

这就把我们带到了 iPad read-tap 字体不对称的话题上。在每一个 iPhone 网站或 Web 应用上，如果字体太小而无法阅读，那么它也太小而无法触摸。

**注意:**这里，当我说“字体”时，我指的是所有基于字体的结构，比如导航栏、侧菜单、表单、简单段落等等。

在 iPad 的世界里，这并不是在每种情况下都会发生。有时字体大到可以阅读，但太小了不能触摸。在这种情况下，我们说字体不是手指友好的。在本书中，您将看到如何使用 CSS3 样式表处理这种情况。

从可用性的角度来看，这在 iPhone 和 iPad 上设置了一个重要的界限。另一个重要的区别是 iPad 视窗中没有底部栏。

如果没有底部栏，用户体验的质量会降低，因为导航结构的这一部分丢失了。用户可以解决这种情况，轻按状态栏以快速滑动到页面顶部，并访问 Safari 栏中的导航结构。不幸的是，并不是所有的用户都知道 iOS 的这个特性，当他们寻找导航结构的时候，经常会努力向上滑动到顶部。

当你把你的 iPhone 和 iPad 网页放在上下文中时，这是要记住的两个要点。在下一节中，您将会看到在项目流程中的什么地方和什么时候您需要应用您的可用性原则。

移动设备可访问性和可用性清单

以下是在设计项目时要寻找的易访问性和可用性项目的一般列表。

可访问性

• 合理的现场装载时间
• 足够的文本与背景对比度
• 易于阅读的字体大小/间距
• 节约使用额外的 JavaScript
• Alt图像标签
• 自定义未找到/404 页面
• 优化的打印样式表
• 优化的本地设备服务集成
• 针对不同 iPhone 型号的优化布局
• 纵向和横向的优化布局
• 纵向和横向的优化图像
• 提供了到标准站点的链接

可用性:导航

• 易于识别的主导航
• 导航标签清晰简洁
• 合理数量的按钮/链接
• 链接到主页的公司徽标
• 手指友好的链接和图标
• 一致且易于识别的链接
• 突出显示的当前位置
• 页眉中的后退按钮
• 描述性文本内链接
• 自定 spotlight 屏幕图标
• 相关错误信息的返回
• 易于访问的站点搜索

可用性:内容

• 宽站点内容地图结构
• 页面设计中的负空间
• 清除可视页面层次结构
• 优先内容
• 折叠上方的关键内容
• 解释性 HTML 页面标题
• 主要标题清晰且具有描述性
• 款式和颜色一致
• 少用文本强调
• 有意义且用户友好的 URL

重要的是，在你的下一个项目中，从这个总列表开始，你要根据对你的项目来说最重要的东西，把你自己的可用性清单联系起来。

iPhone 页面模型

iPhone 页面模型是指每个 iPhone 页面的基本构建块。每一个网站，web 应用，甚至原生应用都是基于这个概念，所有的 iPhone 内容都是一栏一个线性结构。

使用页面模式时，iPhone 支持 320° 480 和 480° 320 的纵向和横向，iPhone 2G、3G 和 3GS 支持 163 ppi(每英寸像素), iPhone 4 支持 326 ppi 的 640° 960 和 960° 640。每个方向都有它的优点；一般来说，纵向更适合列表，而横向使大多数内容更容易阅读。

页面模型是网站或 web 应用内容共享的概念结构，通过屏幕显示在一个叫做可视区域的区域内，如图图 2–21 所示。

iPhone 页面模型基于五个部分。

• 品牌区域
• 导航(主)
• 内容
• 导航(子)
• 网站信息

**注意:**在原生应用(使用 Objective-C 和 Apple SDK 开发)和模拟原生 iPhone 用户界面的 web 应用中，品牌区域和导航部分通常合并到一个没有导航的标题中。

每次用户与链接交互时，都会在屏幕的可视区域内加载一个新页面(可视区域将在下一节“iPhone 用户界面”中分析)，旧页面将被完全替换。这在纵向和横向视图中都会发生。

图 2–21。 带有语义标记的缩略图(左)和全屏视图(右)中的 iPhone 页面模型

iPhone 结构页面也是持久的，这意味着当用户从纵向切换到横向时，它会保持其结构不变。这个概念听起来可能相当明显，但是当我分析 iPad Block 模型时你会看到，它不是一个固定的规则。

现在我们已经了解了 iPhone 页面模型，是时候分析它的用户界面了。

iPhone 用户界面

iPhone 用户界面是一个基于图标和触摸的软件，在电容式触摸屏显示器上工作。这个接口由两个逻辑部分组成。

• 本地用户界面(NUI)
• 可视区域

NUI 和可视区域一起占据了整个可用的屏幕区域。从上到下，iPhone 屏幕区域由四个不同的部分组成。

• 状态栏(NUI 的一部分)
• 网址栏(NUI 的一部分)
• 可视区域
• 底部酒吧(NUI 的一部分)

NUI 由出现在 iPhone 页面顶部或底部的所有元素组成。在各种本地或 web 应用上使用不同类型的 NUI，但对于移动 Safari Web 浏览器，只有三种，如表 2—1 中所总结的。

在纵向和横向模式之间切换时，状态栏和地址栏的大小不变，但底部的栏从纵向模式下的 44px 变为横向模式下的 32px，如图图 2–22 所示。这意味着可用的可视区域没有固定的大小。

如前所述，每部 iPhone 的页面都显示在屏幕的可视区域内。可视区域不会占据 100%的可用屏幕，因为 NUI 在纵向视图中会占据 124 像素，在横向视图中会占据 112 像素。

图 2–22。 带地址栏的纵向和横向视图中可用的可视区域数量

**注意:**在 iPhone 上，用户总是可以选择在地址栏下方显示调试控制台，从可视区域窃取 50 个像素。

这个事实很重要，因为根据 iPhone 的方向，我们有不同数量的屏幕可用空间。尽管 iPhone 4 的 Retina 显示屏分辨率更高，但它的显示区域在状态栏、地址栏和底部栏等用户界面元素之间将具有相同的比例和相对大小。从用户的角度来看，除了拥有一个清晰度更好、可读性更高的屏幕，他或她与 iPhone 4 的交互方式不会有任何改变。在 Figure 2–23 中，我们可以看到新的 Retina 显示屏显著提高了清晰度和锐度。

图 2–23。 视网膜显示器传递的分辨率

表 2—2 显示了所有 iPhone 型号在每个方向上 3.5 英寸可用屏幕的百分比。

iPad 积木模型

iPad 内容是基于块模型概念构建的。整个页面不再是内容的构建块；这个概念基于内容页面中的块。在 iPhone 上，信息是线性显示的，而 iPad 上的内容主要基于两栏布局的一些不同变化。

iPhone 和 iPad 支持两种方向，但与旧款 iPhone 的 163 ppi 和 iPhone 4 的新 Retina 显示屏的 328 ppi 相比，768×1024 的纵向和 1024×768 的横向(均为 132 ppi)的清晰度有点低。就像 iPhone 一样，每种方向都有其优势，但这次不是在空间方面，因为可用的屏幕空间足以轻松完成几乎所有事情，无论使用哪种视图。

iPad 令人兴奋的新东西是双方向选项和新的屏幕分辨率让我们能够设计两种布局。我们可以针对屏幕分辨率优化两种布局，并可以在每种设计中添加或删除资产。

正如 2007 年第一代 iPhone 问世时一样，一个很好的例子和隐含的指导方针直接来自苹果设计师。在图 2–27 中，我们可以看到原生笔记应用如何使用块模型来呈现两种不同的布局。横向视图中的用户与基于两个块的布局进行交互，其中他或她可以在左侧块中查看待办事项列表，在右侧主块中查看所选待办事项列表条目。

图 2–24。 一个两块模型应用的例子:iPad 的注意事项

正如上一节所介绍的，iPad 的信息结构不像 iPhone 那样是严格持久的。正如我们到目前为止所看到的，这对我们来说不是一个问题，而是一个令人兴奋的机会。

**注意:**在这种情况下，两个块在两列中，但这种相等并不总是成立的。在其他情况下，添加或删除的块(纵向或横向)可能是一个补充导航、某种行动按钮或其他有用的东西。

查看笔记应用，我们可以看到在纵向视图中缺少的块包含一些用户可能需要的有用信息，即使他或她在纵向视图中。因此，提供对该块的访问总是一个好的做法，即使它没有以给定的方向显示。

苹果设计师再一次为我们提供了一个简单的解决方案:使用一个弹出菜单，通过标题应用中的一个按钮即可访问。因此，我们无需改变方向就可以访问这部分信息，如图 Figure 2–25 所示。与 iPhone 一样，所使用的块模型显示在可视区域内。

图 2–25。 一个两块模型应用的例子:纵向视图访问横向内容

iPad block 模型也基于相同的五个部分:

• 品牌区域，
• 导航(主)，
• 内容，
• 导航(子)，以及
• 网站信息。

当用户与链接交互时，我们的行为更类似于我们在与桌面页面交互时看到的行为。由于 iPad 支持 768×1024 或 1024×768 的原生分辨率，大多数设计师并不觉得有必要为这种设备设计和开发一种特定的优化结构。

在开发者社区，我们谈论了很多关于如何优化网页的问题，对于新的苹果设备，我们看到了关于如何实现 HTML5 标记或使用 HTML5 视频播放器而不是 Adobe Flash player 的指南。

为了与 iPhone 完全兼容，网站总是需要一个完全不同的版本，但只需修改一些代码，你就可以将你的网页内容变成完全兼容 iPad 的内容。问题是，为鼠标导航设计的网站对于有视力问题或手指稍大的移动用户来说可能是糟糕的体验，如图 Figure 2–26 所示。

在这一点上，我们只能依靠移动 Safari 提供的缩放功能来获得愉快的体验，但对我来说，这不是展示设计师如何发挥创造力并利用他们的想法改善用户日常生活的最佳方式。

图 2–26。 官方时间网站:拥有一个支持 iPad 的网站并不意味着我们的工作做对了

现在我已经讨论了 iPad block 模型，您可以开始分析它的用户界面了。

iPad 用户界面

iPad 运行与 iPhone 相同的操作系统(iOS)；因此，我们有几乎相同的用户界面外观和感觉。iPad 用户界面仍然由两个逻辑部分组成，但在以下方面有所不同。

• 本地用户界面(NUI)
• 可视区域

NUI 和可视区域再次占据了整个屏幕区域，但这次是从上到下。iPad 的屏幕区域由三个不同的部分组成。

• 状态栏(NUI 的一部分)
• 网址栏(NUI 的一部分)
• 可视区域

**注意:**像 You Tube 或 iTunes 这样的一些原生应用使用了底部条，就像我们在 iOS UI 中看到的那样。这个底部条的高度为 48px，用于向用户提供高级选项。

NUI 由出现在 iPhone 页面顶部或底部的所有元素组成。作为苹果设备的设计者和开发者，我们对 Safari Web 浏览器界面感兴趣，因为我们的网站和 Web 应用将在这个应用中呈现。

即使在 iPad 上，我们也有不同类型的 NUI 用于各种本机或 web 应用，但对于移动 Safari Web 浏览器，只有两种(第三种是可选的)，如表 2—3 中所总结的。

可视区域仍然没有占据 100%的可用屏幕，因为 NUI 在纵向和横向视图中都占据了 66px。结果是，有了 URL 栏，我们在纵向视图中有 94%的可视区域可用，在横向视图中有 92%的可视区域可用。没有了 URL 栏，我们几乎达到了 100%的屏幕可用性；我们有 98%的纵向和 97%的横向。

**注意:**在 iPad 上，用户可以随时选择在地址栏下方显示书签栏，从可视区域窃取 28 个像素。

与 iPhone 相比，我们可以注意到两个方向上的可用可视区域都有显著的相对增加，如图图 2–27 所示。

图 2–27。 在带有地址栏的纵向和横向视图中可用的可视区域数量

凭借 9.7 英寸的显示屏和几乎 100%的可用屏幕空间，我们有空间大幅改善移动用户体验，并提供前所未有的交互程度。表 2—4 显示了可用屏幕的百分比。

苹果手机设计工具

本章中使用的工具既有购买的也有免费的。这个列表展示了一些有用的工具，您可以利用它们来设计您的下一个网站或 web 应用。

总结

在这一章中，你开始了作为一名移动设计者和开发者的旅程。从信息架构过程及其九个步骤开始，我说明了过程的每个步骤最适合使用哪些工具，定义了典型的、更复杂的 IA 过程的敏捷变体。

我在 Apple device design 中介绍了可访问性，您看到了如何以及使用哪些硬件和软件功能来解决可访问性问题。

在本章的最后一部分，我讨论了 iPhone 和 iPad 的可用性，展示了如何处理它，并且我提供了一个可用性检查清单，用于在跳到实现阶段之前控制项目。我还展示了 iPhone 和 iPad 用户界面及其内容的范例:iPhone 页面模型和 iPad 块模型。

最后，我提供了一个本章中使用的工具列表，以帮助设计师完成他或她的下一个移动项目。

三、iOS 设备的 Web 开发

“…如果您知道如何使用最现代的 web 标准编写应用，您就拥有了所需的一切…

开发者们，我们为你们准备了一个非常甜蜜的故事。您现在就可以开始构建您的 iPhone 应用了…”

—史蒂夫·乔布斯

Web 开发过程涉及许多技术和原则，因此，这一章将介绍许多主题，恐怕会很长。

在第一部分，我们将介绍框架的概念，解释它们通常是如何构造的。然后我们将介绍在 iOS 设备上开发 WebApp 的两个框架。

首先，我们将看看 WebApp 的四种不同方法，然后讨论移动网站和 Web app 之间的区别。我们还将解释 WebApp 和本地应用之间的区别，并展示 Web 开发模型的优缺点。

在这一章的中间部分，我们将提出这本书的核心论点之一，即网络标准。我们将介绍 HTML5 的新标签和 CSS3 的新属性，然后我们将介绍 JavaScript 的最佳实践。

在本章的最后一部分，我们将分析 Safari Mobile 和 WebKit 引擎的浏览器支持，我们将介绍一个与任何类型的触摸开发过程相关的基本概念:手指不是鼠标。

我们将探索一些用于 Safari 的开发工具，因为开发人员清楚地了解 web 和本地开发流程所提供的可能性非常重要，所以我们将介绍 SDK(本地)开发模型。

Web 开发工具

有许多工具可以帮助 web 开发项目变得更快、更高效。除了像 Espresso(如图图 3–1 所示)这样具有智能代码片段、代码折叠和代码感知功能的便捷文本编辑器之外，您还会发现大量工具、实用程序和框架可以大大提高开发速度，减少调试和测试时间，并提高输出质量。

图 3–1。 Espresso 是一个很好的网页编辑器，有很多有用的功能，比如 LivePreview。

本章末尾的表 3–30 中列出的工具包括各种实用程序、优化器以及测试和调试工具，旨在帮助我们更高效地创建网站和 web 应用。

对于一个 web 开发人员来说，最重要的工具就是他将作为项目基础的框架，所以我们来分析一些有用的 iPhone 和 iPad 框架。

开发框架

正如在第二章的中的“iPad 模块模型”中提到的，iPad 设计的趋势是使用桌面方式，依赖于 iPad 完美呈现这类页面的能力。

由于这个原因，我们在网上可以选择的 iPad 框架非常少(例如，JQuery Mobile，Sencha Touch)。如果我们想为 iPhone 开发，情况就完全不同了。现在我们有很多 iPhone 框架可以从网上免费下载。

出于我们的目的，我们将使用为 iPhone 开发网站或 WebApp 的最佳框架之一:iWebKit 框架。

什么是框架，它是如何构成的？

计算机编程中的框架是一种抽象，它允许提供一般功能的公共代码被用户代码覆盖或定制，以提供更具体的功能。

框架具有以下具体特征:

• Control

  整个程序的控制流程不是由调用者决定，而是由框架决定。

• Behavior

  框架有一个默认的行为。此默认行为必须是有用的行为，而不是一系列的无操作(不执行任何操作)。

• Extensibility

  框架可由用户通过选择性覆盖来扩展，或者由提供特定功能的用户代码来定制。

• Modifiability

  框架代码不允许修改。用户可以扩展框架，但不能修改其代码。

在我们的上下文中， WebApp 框架是设计用来支持动态网站或 WebApp 开发的软件。这种框架旨在减轻与 web 开发中执行的常见活动相关的开销，并促进代码重用。

所提出的框架共享相同的结构，并提供 3 种资源:

• HTML Templates (page-name.html)

  HTML 模板是作为例子给出的；我们所需要做的就是使用这些作为我们的起点，并根据我们的特定需求定制这些页面。

• CSS File (file-name.css)

  CSS 文件定义了页面，苹果原生的布局和 HTML 页面中使用的所有标签。

• JavaScript File (file-name.js)

  JavaScript 文件定义了所有 HTML 页面中使用的类似本机的行为

从一个框架到另一个框架的变化将是项目(文档)结构，文件如何组织，以及我们使用的 CSS 类名或 JavaScript 函数名。除此之外，它们在终端用户交互方面的功能都是相同的。

**注:**我们可以用不同的框架达到相同的最终结果。使用为我们的开发需求提供“最佳”特性的框架是一个好主意。

现在是时候看看这些框架能提供什么了。

用于 iPhone 的 iWebKit 5 框架

iWebKit Framework 5.04 ( 图 3–2)将用户界面(UI)分为不同的<div>元素，用于顶栏、内容区域、页脚和其他块元素。给<div>分配一个特定的 id，我们可以把它归类为一个特定类型的用户界面元素。

**图 3–2。**iPhone 主页的 iWebKit】

连接框架元素

为了链接框架元素，我们需要在 HTML 文档头中插入一个从页面到 CSS 和 JavaScript 文件的链接。

<meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667,  user-scalable=no" name="viewport" /> <linkhref="css/style.css" rel="stylesheet" type="text/css" /> <scriptsrc="javascript/functions.js" type="text/javascript" language="JavaScript" > </script>

UI 元素:标题栏

内容栏充当页面标题的容器。通常在这个区域的两边，我们有一个或多个后退或导航按钮。该区域定义如下:

<div id="topbar"></div>

在标题栏内，我们将添加一个标题:

`

`

然后我们添加一个导航按钮:

`

`

id="leftbutton"指定了一个包含在标题栏上的左按钮。我们还可以使用id="rightbutton"在标题栏的右侧包含一个右按钮。

或者，我们可以使用<div id="leftnav"></div>或<div id="rightnav"></div>在标题中添加多个导航按钮。多个按钮使我们能够实现可视化的导航路径，就像桌面网站中可点击的面包屑轨迹一样。

例如，请注意下面的图 3–3 中显示的页面标题中的导航。我们可以选择返回上一次访问的页面(“表单”页面)或跳回主页(房屋图标)。

**图 3–3。**iWebKit 框架:标题栏(左)和导航路径(右)

提供一个可以将用户带到我们网站桌面版本的按钮也很重要(见图 3–3，左侧)。这是因为我们的移动信息架构中的一个基本步骤是优先选择内容作为原始桌面版本的子集。换句话说，有时用户无法使用移动应用访问桌面版网站中的所有信息。

在标题栏下方，我们还可以使用<divid="tributton"></div>添加一个补充导航栏。

`

`

UI 元素:内容区域

内容区域充当页面所有内容元素的容器。该区域定义如下:

<div id="content"></div>

所有的页面内容都将放在这种内容包装器中，如图 Figure 3–4 所示。

**图 3–4。**iWebKit 框架:内容区域(左)和灰色标题(右)

UI 元素:内容框容器

内容框充当内容的容器。通常，在这个区域的顶部，我们有一个使用<span>定义的标题，两个元素都使用:

<span class="graytitle">Features</span>

类graytitle用典型的 iOS 浮雕样式定义了标题，在这个标签下面，我们有一个内容框容器，使用:

<ul class="pageitem"></ul>

在这个pageitem容器中，我们可以定义许多不同类型的元素，每种元素都有自己的风格，定义在 CSS 类或 id 中。

UI 元素:文本框

使用textbox类，我们为文本定义了一个框，通常用作页面的描述。

<li class="textbox"></div>

在图 3–5 中，我们可以看到textbox如何包含另外两个元素，一个文本框标题和一个描述。

**图 3–5。**iWebKit 框架:内容框容器(左)和文本框标题和描述(右)

UI 元素:文本框标题和描述

在textbox,中，我们可以定义任何类型的标准 HTML 内容，但是在本例中，我们使用一个框架类来添加一个标题，使用:

        <span class="header">Discover iWebKit 5</span>

然后，我们可以加上一段描述:

`

        Discover iWebKit 5         

Welcome to this demo. please "touch" around to discover  iWebKit's features!

`

UI 元素:菜单项

菜单项是我们用户界面的主要组成部分。现在，我们将定义一个类似设置的菜单，它是使用以下内容定义的:

<li class="menu">         <a href="technology.html">                 <img alt="list" src="thumbs/plugin.png" />                 <span class="name">The Technologies</span>                 <span class="arrow"></span> `        

`

每一行都由一个列表元素<li class="menu"></li>组成，该元素包含一个链接元素<a></a>，该元素包装了另外三个标签:左边的一个图像<img />，一个文本<span class="name"></span>，以及右边的一个图标<span class="arrow"></span>。

如果我们想要添加更多的链接(行),我们需要添加如上所述的其他块。

UI 元素:页脚

页脚，如图 3–6 所示，可以用来添加任何关于站点的相关信息，在这里是关于框架的信息。页脚的定义使用:

`

` 

**图 3–6。**iWebKit 框架:其主页底部和应用商店列表页面

到目前为止，我们已经分析了 iWebKit 主页及其结构。如图 3–7 所示，该框架提供了许多其他页面样式，包括:

• 经典列表
• App Store 列表
• iTunes 经典列表
• iTunes 音乐列表
• iPod 列表

即使有所有这些选项，方法总是相同的:打开代码，分析它，然后开始按照您的项目需求定制它。通过使用源代码，我们可以在不知道框架的情况下开始使用它。

**图 3–7。**iWebKit 框架:其他页面列表样式和 App Store 列表页面

下面是一个帮助您了解 iWebKit 框架的练习。

探索 IWEBKIT 框架

这里有一个练习，可以增加你对可能遇到的每个框架样式或页面元素的了解。以下是指导方针，逐步显示在这个练习中你需要做什么。

1. 从iwebkit.net/下载 iWebKit 框架
2. 在您喜欢的开发 IDE 中打开文件“applist.html”。
3. 使用您的设备在 Mobile Safari 中打开页面“applist.html”的预览
4. 首先在代码中插入注释，解释每个标签的特征。如果你需要一个例子，回头看看上面我介绍 iWebKit 主页的那一段。
5. 尝试添加、删除或自定义框架元素。

对 iWebKit 框架中的所有其他页面样式重复这个练习。一旦你完成了这个练习，你就完成了准备开始使用和定制框架的第一步。

前面的内容实际上只是对 iWebKit 结构的介绍；我们将从第八章(创建 WebApps:移动应用开发)开始详细了解如何使用这个框架。

移动网站

移动 iPhone 或 iPadweb 站点是专为苹果设备设计的，不应与在移动浏览器上查看桌面浏览器的站点相混淆。这类网站的特点是典型的 iOS 环境风格。

正如我们前面看到的，在本书的信息架构部分，桌面和移动版本之间的内容从来都不相同。在大多数情况下，移动网站提供主要内容的一个子集，并以优先的方式提供。但首先让我们看看移动市场是如何发展的。

苹果设备出现之前的移动网络就像十年前的网络一样:速度慢，使用成本高，而且没什么好看的。

**注:**在计算中，分辨率无关是指计算机屏幕上的元素可以以独立于像素网格的尺寸绘制的概念。

我们可以推测出移动网站的一些优点和缺点，如下所示:

优点

• 使用与桌面版本相同的 Web 标准创建
• 易于维护和发布
• 提供更高级别的用户体验(设备核心功能交互)
• 提供移动服务

cons

• 提供的内容有限
• 由于网络延迟，加载缓慢

移动应用

移动 iPhone 或 iPadWebApp 不需要从 App Store 下载并安装在设备上。使用 HTML、CSS 和 JavaScript，WebApps 能够在移动 Safari 浏览器中运行时为最终用户提供类似本机的应用体验。图 3–8 展示了两个知名的 web app:mobile me 和 GoogleLatitude。

**注意:**在本书中，从现在开始，我将使用单词 native 来指代真正的 iOS 原生应用，使用术语 native-like 来指代我们的 WebApp，它是为了模拟 iOS 的(真正的)原生用户界面而构建的。

具有类似本地应用体验的 WebApp 提供了一个不同的范例。这种实时范例基于在当前视图中执行动作的触摸。正如我们将在下一节“WebApp 的四种不同方法”中看到的，这是一种 4 级(类似本机)体验，代表了这种设备上可能的最高级别的用户体验。这种体验与桌面体验非常不同，桌面体验是基于页面隐喻的，在页面隐喻中，点击等同于刷新视图中的内容。

图 3–8。 两个著名的 WebApps:苹果的 MobileMe(左)和谷歌的 Google Latitude(右)

通过使用 WebKit，iPhone(甚至在更大程度上，iPad)可以以一种完美可用的方式呈现尚未针对移动设备进行优化的 web 应用，包括 DHTML 和 Ajax 支持的内容。

出于这个原因，我们现在看到，移动网络的大部分使用来自具有更好浏览器的设备(通常是基于 WebKit 引擎的浏览器)，在一些市场中，比例为 7:1。

在探讨 WebApp 的利弊之前，我们需要考察一下 Web 开发模型(WDM)。

Web 开发模式

web 开发模型(WDM)用于使用 HTML、CSS 和 JavaScript 等 Web 标准开发 iPhone 和 iPad (web)应用。

Web 开发模式:利弊

正如我们在第二章中看到的，不同的项目有不同的需求。有些应用比其他应用更适合 web 开发模型(WDM)。了解利弊将有助于我们做出正确的决定，哪条道路可能更合适。

自 2008 年第一个 SDK 发布以来，许多事情都发生了变化，WebApp 与原生应用之战开始了。今天，在 2011 年，随着最新版本的 HTML 和 CSS 以及最近全球范围的网络升级，事情明显不同了。

尽管本地应用和 web 应用之间的差异仍然存在，但茶叶似乎表明，在未来这种差距将在某种程度上缩小。2010 年 5 月，在 I/O 开发者大会上，谷歌宣布基于 Android 的 web app 将很快获得本地硬件功能(运动传感器、摄像头和谷歌的语音识别)。对我来说，这一事实表明，一旦 Android WebApps 能够访问硬件功能，iOS WebApps 将不会等待很长时间来遵循相同的路径，并填补 WebApps 和原生应用之间的最后差距

在我们等待这激动人心的一天的同时，我们需要对我们的项目进行彻底的研究，以便清楚地了解它的需求，并能够选择正确的方法来实现项目的目标。

本质上，在以下情况下，WebApp 是更好的选择:

1. 我们需要经常更新我们的内容。
2. 我们不需要苹果商店的任何功能。
3. 我们不需要特别快的图形性能。
4. 我们不依赖于本机功能。
5. 我们不依赖于在后台运行我们的应用。
6. 我们不依赖发送(推送)通知。

如果我们的应用不是游戏，不需要摄像头、GPS、加速度计、多媒体声音/图形、大量视频或完全离线访问，那么编写 WebApp 可能是个好主意。一个好的 WebApp 的例子是用于 iPad 的 Gmail WebApp，如图 3–9 所示。

本地应用当然应该更快，因为我们可以定义我们的缓存策略、网络服务和事件/线程模型。本机应用也在用户的控制之下，用户决定安装、更新和卸载什么。唯一涉及网络的部分是获取安装包的过程。相反，WebApps 在服务器的控制下，最终可能会离线，在这种情况下，更新必须由应用的创建者发起和实现。

图 3–9。 谷歌为我们提供了一个如何为 iPad 开发 WebApp 的好例子。

本机应用还可以访问摄像头、GPS(不仅仅是 WebApp 中的单一地理位置)和其他很酷的硬件功能，如加速度计。他们还可以在自己的本地数据存储中保存和访问数据，甚至能够使用 SQLite，从另一个应用访问数据，并允许完全离线访问其内容。

iTunes 应用商店页面上也有原生应用，提供大量免费流量、推广和收入。

**图 3–10。**Google Reader:MobileRSS 原生 UI(左)和 Google Web UI(右)的比较

另一方面，Safari 中 JavaScript 引擎的速度有了很大提高，我们现在能够编写与原生应用具有相同性能的 web 应用，至少在大多数情况下是如此。使用 HTML 缓存系统，我们还可以提供对 WebApp 数据的离线访问。在图 3–10 中，我们可以看到我们如何通过 Google Reader WebApp 实现类似本地的用户体验。图 3–10 还显示了原生应用 MobileRSS 和类似原生应用 Google Reader 之间的比较。

如果我们的应用不是游戏，不需要摄像头、GPS、加速度计、多媒体声音/图形、大量视频或完全离线访问，那么编写 WebApp 可能是个好主意。现在，我们可以继续我们之前的讨论，编辑两个易于阅读的列表，列出 WebApps 的一些重要优点和缺点，我们将继续进一步讨论。

web 应用的一些优点有:

• 目标-不需要 C 技能
• 不需要订阅苹果开发计划
• 不需要在运行 OSX 的 Mac 上开发
• Web 标准技能可以在其他开发领域重用
• 开发生命周期很快
• Bug 修复是实时的
• 企业 WebApp 不需要企业许可证
• WebApps 不需要下载和安装
• 苹果和非苹果设备都可以访问 WebApps
• WebApps 将在每一台装有浏览器的设备(手机或台式机)上运行
• WebApps 可以用 PhoneGap 这样的工具打包到本地应用中
• 我们不必与苹果分享我们的收入

web 应用的一些缺点有:

• 在一些繁重的环境中，web 应用比本地应用要慢
• 一些复杂的用户界面效果很难实现
• 存储在文件系统中的数据不可访问
• 某些硬件功能不可访问
• 如果我们想为应用收费，个人支付系统是必需的

其中一些观点非常相关。我喜欢 Objective-C，我喜欢编程，我喜欢原生方法范例，但是通过使用 WDM，许多有创造力的网页设计者和开发者将能够重用他们的(网页标准)技能，并立即开始在 iPhone 和 iPad 上工作。

能够及时修复漏洞也是一个重要的优势。有了 WDM，修复一个错误是几天的事情，有时是几个小时，我们只需要修复错误并将修复上传到服务器。每当我们修复原生应用中的一个 bug，苹果就会开始一个新的审批流程。这个过程超出了开发人员的控制，有时会有压力。在第十二章中，我们将看到如何部分解决这个问题，但是在一般情况下这个问题仍然存在。

要讨论的另一个重要的“优点”是，从开发人员的角度来看，构建 web 应用而不是本地应用提供了开发跨平台应用的机会。

我知道您在想什么:谁关心跨平台开发？我在这里不是要告诉您为 Android 或 WebOS 开发(尽管在信息架构过程中考虑这些设备可能不是一个疯狂的想法)，但是我会建议开发一个具有高度可移植性的项目是一个目标，您可能不想低估它的价值。在开发 iOS WebApp 的过程中，你只需对代码做最少的修改，就能为 Android 或 WebOS 创建相同的 WebApp。

今天，跨平台开发不仅仅意味着为不同的品牌开发。有了分辨率为 480×320 像素、分辨率为 163 ppi 的旧 iPhone，分辨率为 960×640 像素、分辨率为 326 ppi 的新 iPhone 4 和 iPhone 4 S，分辨率为 1024×768 像素、分辨率为 132 ppi 的 iPad，以及新的 iPod 系列，我们必须能够处理许多具有类似服务和操作系统的不同设备。

**注:**记住，对于第四代 iPhone，我们有两种不同的屏幕分辨率:新款 iPhone 4 和 iPhone 4 S 的 326 ppi 下的 640×960，以及旧款的 163 ppi 下的 320×480。我们也有两个不同的固件历史:iPhone 2G 和 3G 都运行旧的 iPhone OS 3.1.3(或更早版本)，iPhone 3G S、iPhone 4 和 iPhone 4 S 以及 iPad 运行最新的 iOS 固件；此外，多任务只能从 iOS 4 开始使用。

必须区别对待这些设备，因为它们的硬件不同，性能不同，提供的服务也不同。我们拥有的是一个伪跨平台场景，我称之为跨平台上下文中的**。每年都会推出新的 iPhone 型号，从现在开始，每年都会宣布新的 iPad 型号，因此最好准备好使用内部跨平台方法进行开发，因为我们迄今为止看到的只是开始。**

最后一个非常重要的优势是，WebApp 可以通过 PhoneGap 这样的开源工具打包成原生应用。通过这种方式，你可以两全其美:编写一个 WebApp，然后从它生成一个本地应用。

web app 的四种不同方式

当我们为可以在浏览器中运行的 WebApp 开发网站时，我们可以从四种不同的方法中进行选择。所有这 4 种 web 应用都是使用相同的 web 标准编写的，如 HTML4、HTML4、CSS2、CSS3 和 JavaScript(1.6 版以及 1.7 和 1.8 版的一些功能)，但每个级别提供的用户体验质量是不同的。

第 1 级:兼容

这是一种基本的开发方法，旨在为苹果的所有移动设备提供完全兼容的结构。这种结构使用 HTML4 和 CSS2 标记，并且基于块，以便于导航和缩放，如图图 3–11 所示。然而，对于移动用户来说，它仍然过于面向桌面。

图 3–11。 兼容的网站:W3C 官方网站没有针对 iPad 的优化布局。

这种级别的方法还必须避免不支持的技术，如 Flash、Java 和其他插件，并且确实不做任何专门针对 iPhone 或 iPad 用户的事情。这里的主要目标是确保不设置任何障碍来阻止令人满意的浏览体验。

所有不使用不支持的技术的在线 W3C 标准 WebApp 都属于第一类。

二级:优化

对苹果设备的第二级支持旨在提供基本的移动用户体验。这意味着布局仍然是面向桌面的，尽管网站或 WebApp 使用 HTML5、CSS3 进行标记，并使用 JavaScript 提供用户交互，但它以非常基本的方式使用它们，不支持 WebKit 浏览引擎提供的最新功能。它也不提供任何硬件交互，如 GPS 地理定位，或一触式短信和电话。图 3–12 显示了一个优化的 WebApp 的例子。

图 3–12。 一个优化的网站:TED 网站在其页面中使用 HTML < video >标签。

每个网站或 WebApp 都应该至少属于这一类，尤其是如果有一个指向专用或本地资源的活动重定向。苹果官方网站上推广的支持 iPad 的网站属于第二类。

第三级:专用

第三级支持的主要区别是定制的视口尺寸。这是真正的移动用户体验的第一步。然而，尽管这些网站和 web 应用是为 iPhone 或 iPad 浏览而定制的，但它们并不试图模仿原生的 iOS 用户界面。图 3–13 显示了一个专用 WebApp 的例子。

图 3–13。 专用的 web app:Gmail 页面中空格的使用是面向 iPad 的。

这些网站和应用使用 HTML5、CSS3 进行标记，并通过 JavaScript 提供用户交互，但以非常基本的方式使用这些标准，不支持 WebKit 浏览引擎提供的最新功能，也不提供 GPS 地理定位或一触式 SMS 和电话等硬件交互。

在这第三个层次的方法中，我们有一个 WebApp 的所有 iPhone 和 iPad 专用(移动)版本。

第四级:类似原生的

类似原生的方法提供最高级别的移动用户体验，旨在模拟原生 iOS 用户界面，提供与设备服务的直接集成，包括电话、消息、邮件、联系人、地图和通过 GPS 或 GSM 三角测量的地理定位服务。图 3–14 显示了一个类似本地的 WebApp 的例子。

图 3–14。 一个类似原生的 WebApp:使用类似原生结构设计的苹果商店用例

为了在项目中与客户的需求保持一致，考虑和评估我们想要在信息架构过程中使用哪种程度的开发方法是很重要的。

web 应用和本地应用:对用户来说有什么不同

开发一个在移动 Safari 上运行的 WebApp 与一个作为原生应用运行的 web app 有一些基本的区别。到目前为止，我们已经从发展的角度看到了这些差异。

下一个问题是:对最终用户来说，有什么明显的不同吗？当移动用户依赖一个 WebApp 时，用户体验会有什么变化？

用户界面

正如我们在第二章中看到的，web 和原生应用用户界面由两部分组成:原生用户界面(NUI)和可视区域。

一般来说，原生用户界面随着从原生到 WebApps 而改变。它由以下模块组成:

• WebApp

  状态栏

  栏 URL(移动 Safari)

  标题栏

  底部栏(iPad 上没有)

• Native Application

  状态栏

  标题栏

  下鼠笼条

当在 Mobile Safari 中呈现我们的 WebApp 时，我们必须处理状态和标题栏之间添加的栏，如图 Figure 3–15 所示。我们可以使用 meta 标签来解决这一差异，并获得与原生应用完全相同的外观和感觉。

图 3–15。 从 WebApp 到类似原生的观感:iPhone 上的 Gmail。

你将在第八章中看到如何模拟本地应用的外观。NUI 的底部也从原生更改为 WebApp，由以下部分组成:

• WebApp

  应用选项和功能栏

• Native Application

  移动 Safari 底部栏

这是一个无法解决的问题，因为我们无法通过 meta 标签来隐藏它。我们可以做的是在它上面放置一个页脚，但是这种做法会从可视区域窃取更多的像素，在大多数情况下不推荐这样做。

图 3–16。 Native 和 WebApp UI 对比:两个不同的底栏

就我个人而言，我不认为这最后一点是一个真正的问题。让移动 Safari 的底部栏可见，如图 3–16 所示，对我来说很有意义。由于我们使用 Mobile Safari 作为应用的自然环境，从语义的角度来看，这就像有一个原生的底部栏。

用户体验(UX)

用户体验是一个广泛的话题，遍及我们的 web(和本地)应用的许多领域。除此之外，我们还可以发现原生应用和 web 应用之间存在显著差异的一个主要领域:应用控件。

在本机应用中，用户可以更改他的应用的许多设置，并以这种方式对用户体验进行某种控制。用数学术语来说，他可以定义用户体验的几个子集。这在 WebApp 中是不可能的，因为除了创建模仿本地选项页面的外观和感觉的选项页面，我们唯一可以交互的选项是移动 Safari 设置。这些设置不会改变用户体验，因为浏览器和 WebApp 是两个不同的实体。换句话说，您可以在 Mobile Safari 中更改的设置不是 WebApp 的设置。

图 3–17。 Native 和 WebApp UI 对比:呈现应用选项的两种不同方式

谷歌界面为我们提供了一个解决这个问题的很好的例子，它使用下拉菜单呈现了有用选项的子集，如图图 3–17 所示。这个优秀设计的例子并没有真正解决问题，但是它确实极大地改善了用户体验。

另一个明显的区别是，WebApp 需要在我们打开浏览器后再打开。启动操作分为两步:打开浏览器，打开 WebApp。

对于这个问题，我们可以使用 iOS 的功能来创建一个链接到我们的 WebApp 的跳板图标，我们只需点击一下就可以启动它，就像我们对其他所有原生应用所做的那样。我们在第八章中讨论了这一点。

人机交互

与基于 Safari 的 WebApp 相比，用户与原生编译应用的交互反应更灵敏(人机交互)。这是因为两个原因:

• 网络脚本的解释性
• WebApp 的网络依赖性

然而，尽管有技术限制，我们可以执行优化阶段，以实现可接受的性能。其中一些技术将在第十章中介绍。

在表 3–1 中，我们可以看到平台内的另一个实例，因为我们必须处理在不同硬件上实现的三种网络协议:四个不同版本的 iPhone、一个版本的 iPad 和一个版本的 iPod Touch。

接下来，我们将介绍 web 标准、HTML 和 CSS 的新特性以及 JavaScript 最佳实践。

Web 标准:HTML、CSS 和 JavaScript

在本书中，我们将假设您已经了解 HTML、CSS 和 JavaScript 的基础知识。我们将在第七章中以面向苹果设备的方式接触 HTML、CSS 和 JavaScript，但在本书中，我们不会涉及网络标准的基础知识。原因是不可能从基础知识开始涵盖所有这三个(非常重要的)主题，并保持关注和实现我们的主要目标:展示如何为 iPhone 和 iPad 设计和开发的基础知识。

**注意:**如果你需要学习 HTML 和 CSS 基础，一本好书是来自 Apress 的《从 CSS 和 XHTML 开始 HTML》。

如果你需要了解 JavaScript 和 DOM 基础，一本好书是《用 DOM 脚本和 Ajax 开始 JavaScript:从新手到专业人员》Christian Heilmann (Apress 2006)。

然而，在我们进入第七章之前，我们现在要探讨的是那些 web 标准在开发阶段的作用，以及我们将如何使用这些新引入的特性来达到我们的目的。与此同时，如果你需要回到 web 标准的基础，找一本好书，填补你所缺少的知识的空白。

图 3–18。 基于 3 种 Web 标准的 iPhone 和 iPadWebApp、CSS 和 JavaScript

在接下来的页面中，您会发现两个表格，一个包含 HTML 中的新标签，另一个包含所有的<video>标签属性，用作小型标准参考。

如图 3–18 所示，HTML、CSS 和 JavaScript 用于实现以下目标:

• HTML:页面结构(语义方面)
• CSS:页面表现(美学术语)
• JavaScript:页面行为(在用户交互方面)

HTML:介绍新功能

HTML 旨在成为 HTML4 的后继者，旨在通过制定关于如何处理所有 HTML 元素以及如何从错误中恢复的精确规则来提高互操作性并降低开发成本。

在这之后，HTML 还允许开发人员通过更加语义化地表达内容来创建跨平台的设计。一个例子是一组新的标签，如<header>、<nav>、<section>、<aside>和<footer>，这些标签使内容更易于机器阅读，从而使移动浏览器和搜索引擎更容易正确处理内容。

HTML 中的一些新特性还包括嵌入音频、视频、图形、客户端数据存储和交互式文档的功能。HTML 引入的五个最激动人心的特性是:

• Web Workers

  允许网页浏览器超线程(iOS5 支持)。使用单独的后台线程进行处理，而不会影响网页的性能。当我们开发 WebApps 时，以及(通常)当我们依赖繁重的脚本来执行功能时，这是一个重要的特性。

• Video Element

  嵌入视频，无需依赖第三方(通常是专有的)插件或编解码器(苹果移动设备上没有)。现在，嵌入和操作视频就像嵌入和控制图像一样简单。

• Canvas

  允许我们即时渲染图形和图像。在我们移动环境的某些情况下，使用画布而不是图像来节省带宽是非常有利的。

• Application Caches

  能够在本地存储 WebApp，无需连接到互联网即可访问。对于任何开发 WebApps 的人来说，这是一个巨大的进步，因为现在他有了一个本地应用的有效替代品。

• 地理位置

该 API 使用与托管该 API 的设备相关联的高级接口(GPS)来定义位置信息。这是另一个很棒的功能，因为以前只有本地应用可以与 GPS 等很酷的硬件功能交互(即使只是针对单一的地理定位服务)。需要注意的是，HTML 的语义本质要求深入理解每个标签的确切含义。我们可以通过阅读 W3C 网站上的官方 HTML 参考来深入了解这一点。

**注意:**官方 W3C HTML 元素参考可从:[dev.w3.org/HTML/html-author/#the-elements](http://dev.w3.org/HTML/html-author/#the-elements)获得

在 Table 3–2 中，我已经按字母顺序列出了 HTML 中所有的新标签。这些标签将被添加到 HTML4 中旧的、受支持的、不被否决的标签中。HTML 仍然是一项进行中的工作；你可以在官方网页上看到完整的参考资料:[www.w3.org/TR/HTML/](http://www.w3.org/TR/HTML/).

新的<video>标签是整个 HTML 列表中最著名的标签，因为苹果和 Adobe 之间关于 Flash 技术支持的争议众所周知。图 3–19 中显示了一个例子。

**图 3–19。**HBO 网站:iOS 不支持 Adobe Flash 技术，而是支持 HTML 视频标准。

今天，如果我们想插入与任何苹果设备兼容的视频，我们需要使用这个标签。为此，在表 3—7 中，我们显示了每个<video>属性及其相关描述。

HTML 代码是:

<videosrc="videos/name-of-the-video.mov" controls="true"É poster="img/video-preview.jpg" width="300" height="200" />

使用 HTML 为桌面开发还带来了浏览支持的兼容性问题，但在我们的环境(苹果移动设备)中，这个问题不存在，因为移动 Safari 支持上一个 HTML 草案中的所有新标签和功能。我们将在第七章更详细地考虑整个 HTML 标准。

CSS 3:介绍新功能

旧的 CSS2 规范太大太复杂，不能一大块更新，所以万维网联盟(W3C)把它分成了几个小块。包括的一些模块有:

• 盒子模型
• 多栏布局
• 背景和边框
• 列表模块
• 文本效果
• 超链接演示
• 语音模块

注意: CSS 仍然是一个“进行中”的项目，你可以在:[www.w3.org/Style/CSS/current-work](http://www.w3.org/Style/CSS/current-work).查看完整的模块列表

CSS 的主要影响是能够使用新的选择器和属性来实现新的设计功能，如动画或渐变，并以更容易的方式实现当前的设计功能。

现在我们将看到一些最常见的属性，这些属性将出现在我们为 iPhone 和 iPad 设计和开发的每个框架中。当我们扩展我们的框架时，了解这些属性将在第八章中有用。

**注意:**在所有 CSS 模块达到推荐状态之前，每个浏览器供应商都有能力决定如何实现那些属性。由于这个原因，在每个属性前面都有一个专有的前缀。

特定于供应商的前缀的目的是让其他呈现引擎知道可以安全地忽略该属性而不会产生错误，同时让开发人员知道这些属性是实验性的，并不完全受支持，即使 W3C 计划这样做。

一旦 CSS 被完全定义、支持，并正式成为 Web 标准，所有这些前缀都将被移除。

一个例子是:

border-radius: 3px; -webkit-border-radius: 3px;(基于 WebKit 的浏览器实现) -moz-border-radius: 3px;(基于 Gecko 的浏览器实现)

Safari(和其他基于 webkit 的浏览器)从版本 3 开始就支持带有-webkit-前缀的border-radius(从版本 5 开始不再需要)。

目前，当使用桌面网站和 WebApps 时，我们需要多次指定相同的属性，至少为每个最常用的浏览器指定一次，以便实现最低级别的 CSS 属性可访问性。

**注意:**在我们的苹果设备环境中，我们唯一需要做的事情就是实现 WebKit CSS，因为我们只会使用基于 WebKit 的浏览器，比如 Safari。

边框半径

使用 CSS2 编码实现圆形边框可能很棘手，正如我们所知，iOS 到处都有圆形边框。有许多可用的方法，但是没有一个非常简单。这需要我们使用额外的标记，并为每个边界创建单独的图像。

使用 CSS，创建一个圆形的边界是令人难以置信的快速和容易。如表 3–4 所示，我们可以将此属性应用于所有角或单个角，宽度和颜色很容易改变。

CSS 语法是:

-webkit-border-radius: <length>;

**图 3–20。**CSS 中圆形边框属性的例子(图片 Christian Krammer)。

边框图片

边框图像是最有用的附加功能之一——请注意，iPhone 上所有从底部滑入的大按钮也可以用这个属性来设计。CSS 能够根据您的选择重复或拉伸边框图像，如表 3–5 和图 3–21 所示。

CSS 语法是:

-webkit-border-image: <source><slice><width><outset><repeat>;

**图 3–21。**CSS 中边框图像属性的例子(images Christian Krammer)。

渐变

渐变是完全在 CSS 中指定的浏览器生成的图像，由几种颜色之间的平滑渐变组成。渐变是使用-webkit-gradient函数指定的，可以代替图像 URL 传递。有两种类型的渐变，线性和径向。您可以指定多个中间颜色值，称为色标，渐变功能会在它们之间插入颜色值。

您用来创建颜色停止的函数称为color-stop。将该函数作为参数传递给-webkit-gradient函数，以指定线性和径向渐变的开始、中间和结束颜色。指定色标之间的颜色被内插，如表 3.6 和图 3–22 所示。

CSS 语法是:

-webkit-gradient ( <gradient-line><color-stop><color-stop><color-stop> ); -webkit-gradient ( <gradient-line><color-stop><color-stop><color-stop> );

**图 3–22。**CSS 中渐变属性的例子。

盒子尺寸

新的盒子模型是 CSS 草案中最广泛的领域之一。这个框大小方面允许您定义某些元素以某种方式适应某个区域。如果出于某种原因，我们想在用户界面中设计一个两列边框的框，并将这两个框并排放置，使用这个模型就可以实现。这将强制浏览器呈现具有指定宽度和高度的框，并将边框和填充放置在框内。

CSS 中的框大小属性如表 3–7 所示，CSS 语法为:

-webkit-box-sizing: <box-sizing value>;

方框阴影

用 CSS2 添加一个盒子阴影是困难的；通常我们需要使用额外的标记。当我等待在不久的将来切换到一个完整的 CSS 网站时，我个人已经为我的网站添加了一个额外的<div>，以便为主要内容添加一个纸阴影效果。CSS 替代方案更加优雅和简洁。

CSS 中的方框阴影属性如表 3–8 所示，CSS 语法为:

-webkit-box-shadow: <offset-x><offeset-y><blur radius><color>;

Figure 3–23 展示了 CSS 中方框阴影属性的一个例子。

**图 3–23。**CSS 中方框阴影属性的例子(图片 Christian Krammer)。

概述

CSS2 中已经提供了设置元素轮廓的功能，但是在 CSS 中包含了根据我们定义的值来偏移元素轮廓的功能。它在两个方面不同于边框:

• 轮廓不占用空间
• 轮廓可以是非矩形的

**注意:**所有的轮廓形状都是长方形，但一个轮廓可以是长方形的集合体。

CSS 中的大纲属性如表 3–9 所示，CSS 代码为:

outline: <width><style><color>; outline-offset: <offset>;

背景尺寸

在 CSS 出现之前，背景大小是由所用图像的实际大小决定的。这个新的 CSS 属性使得用百分比或像素来指定所需的背景图像大小成为可能。当模拟 iOS 用户界面时，我们总是尽可能使用 CSS 属性而不是图像。

在任何情况下，background-size属性，在需要的地方，将允许我们在几个不同的上下文中重用图像，并且扩展背景以更精确地填充区域。

CSS 中的背景大小属性如表 3–10 所示，CSS 语法为:

-webkit-background-size: <length-x><length-y>;

图 3–24 展示了 CSS 中背景大小属性的例子。

**图 3–24。**CSS 中背景大小属性的例子。

背景由来

CSS 还允许我们指定如何计算背景的位置，如 Table 3–11 所示。这允许在放置背景图像方面有很大的灵活性。

CSS 语法是:

background-origin: <origin-value>;

图 3–25 显示了 CSS 中背景原点属性的例子。

**图 3–25。**CSS 中背景起源属性的例子(图片克里斯蒂安·克拉默)。

多重背景

使用多种背景的新功能可以节省大量时间，并允许我们实现以前需要多个背景的效果。多种背景属性与 backgroundsize 相结合，为我们提供了一个强大的工具，以缩小本机 UI 外观和我们的模拟(web)用户界面之间的差距。

CSS 中的多重背景属性如表 3–12 所示，CSS 代码为:

background: <source-1><position><repeat>, <source-n><position><repeat>;

Figure 3–26 显示了 CSS 中多重背景属性的例子。

**图 3–26。**CSS 中(多个)背景属性的例子。

文字阴影

对于想要模仿原生 iOS 用户界面的人来说，文本阴影是一个基本的 CSS 属性。iOS 中几乎所有的文字都是浮雕的，我个人觉得可读性很强。

CSS 中的文本阴影属性如表 3–13 所示，CSS 代码为:

-webkit-text-shadow: <offset-x><offeset-y><blur radius><color>;

文本阴影属性的示例如 Figure 3–27 所示。

**图 3–27。**CSS 中文本阴影属性的例子(图片 Christian Krammer)。

文字溢出

文本溢出是 iOS 本地用户界面仿真中涉及的另一个基本属性。菜单标题中的省略号表示菜单允许的不仅仅是简单的点击查看结果操作(例如，选择一个网络…)，但是在 iPhone 环境中，标题经常会溢出标题栏，如果我们使用标题栏左侧和右侧的按钮来帮助用户更好地浏览内容，情况会更糟。

在这种情况下，text overflow Text Overflow 属性允许我们用一些漂亮的省略号(“…”)来剪辑文本，作为对用户的视觉提示，文本已经被剪辑。有了 iPad，这个问题就不再存在了，因为屏幕更大了。

文本溢出属性如表 3–14 所示，CSS 语法为:

text-shadow: <overflow-value>;

自动换行

使用 CSS2，如果一个单词太长而不能放在一个区域的一行中，它会扩展到外部。这种情况并不常见，但时有发生。新的自动换行功能，如 Table 3–15 所示，允许我们强制文本换行，即使这意味着在单词中间将其拆分。

想象 CSS

CSS 语法是:

word-wrap: <wrap-value>;

CSS 代码是:

word-wrap: break-word;

网络资源

这个新属性将是网页设计的革命性变化，但对于我们这些需要使用原生 iOS 用户界面的人来说，这个属性并没有那么有用。因为 Safari 的字体库中有 Helvetica。使用 web 字体属性可能意味着下载潜在的大文件，并有一些奇怪的标识来表示文本。

CSS 中的 web 字体属性如表 3–16 所示，CSS 语法为:

@font-face { <font-family>; <source>; }

点击高亮显示

在触摸屏设备范例中，我们所知的桌面用户体验中的悬停状态并不存在，但是通过这个有用的 WebKit 扩展，我们可以突出显示一个链接或一个 JavaScript 可点击的元素。也支持 alpha 通道。

CSS 中的点击高亮属性如表 3–17 所示，CSS 语法为:

-webkit-tap-highlight-color: <color>;

多列

从桌面的角度来看，多栏属性更令人兴奋，因为 iPhone 和 iPad 用户界面不经常使用多栏布局。在某些情况下，该属性对于实现一些漂亮的内容表示仍然很有用。这个属性允许我们指定文本应该分成多少列，以及它们应该如何显示。

CSS 中有四个与多列布局相关的属性，允许我们设置列数、宽度、每列之间的间距以及每列之间的边框。这 4 个属性是:

• 列计数
• 列宽
• 列间隙
• 列规则

CSS 中的多列属性如表 3–18 所示，CSS 语法为:

.TwoColumnLayout { <number-of-column><width><gap><rule> }

跨越列

如果我们希望一个元素跨越多列，就使用这个属性；通常我们将它用于标题、表格或图像。

CSS 中的 span column 属性如表 3–19 所示，CSS 语法为:

column-span: <number-of-column>;

过渡

属性可以用来扩展 CSS 属性值的修改，比如高度、宽度或颜色。并不是所有的属性都可以用过渡来制作动画，但是对于 iPhone 和 iPad 开发来说，所有重要的属性都在列表中。

第一个值表示正在转换的属性，第二个值控制持续时间，第三个值控制转换的类型。

CSS 中的过渡属性如表 3–20 所示，CSS 语法为:

-webkit-transition: <property><time><function>;

Figure 3–28 显示了 CSS 中过渡属性的例子。

**图 3–28。**CSS 中过渡属性的例子(图片 Christian Krammer)。

变换

变换用于通过数学运算修改对象的几何图形。该属性是在页面之间模拟一些典型的 iOS 效果的基础，对于创建有趣的视觉效果和动画非常有用。

在transform属性中，一列转换函数将被用作值，并按提供的顺序应用。与其他 CSS 值完全一样，各个转换函数由空格分隔。

transform属性与 transform-origin 属性一起工作，设置过渡发生的原点。

可用的转换函数有:

• matrix(number，number，number，number，number，number) 以六个值的变换矩阵的形式指定 2D 变换。matrix(a,b,c,d,e,f)相当于应用变换矩阵【a b c d e f】。
• translate(translate-value，translate-value) 通过向量[tx，ty]指定 2D 平移，其中 tx 是第一平移值参数，ty 是可选的第二平移值参数。如果未提供 ty，则 ty 的值为零。
• **translate X(translation-value)**指定 X 方向上给定量的平移。
• **translate Y(translation-value)**指定 Y 方向上给定量的平移。
• scale(number，number) 指定由 2 个参数描述的[sx，sy]缩放向量的 2D 缩放操作。如果没有提供第二个参数，它将采用与第一个参数相等的值。
• scaleX(number) 使用[sx，1]缩放矢量指定缩放操作，其中 sx 作为参数给出。
• scaleY(number) 使用[1，sy]缩放矢量指定缩放操作，其中 sy 作为参数给出。
• rotate(angle) 根据 transform-origin 属性的定义，按照参数中指定的角度，指定元素原点的 2D 旋转。
• **倾斜(角度，角度)**指定沿 X 和 Y 轴的倾斜变换。第一个角度参数指定 X 轴上的倾斜。第二个角度参数指定 Y 轴上的倾斜。如果没有给定第二个参数，则值 0 用于 Y 角度(例如，Y 轴上没有倾斜)。
• skewX(angle) 指定一个给定角度的沿 X 轴的倾斜变换。
• skewY(angle) 指定一个给定角度的沿 Y 轴的倾斜变换。

CSS 中的转换属性如表 3–21 所示，CSS 语法为:

-webkit-transition: <transform function> <type of effect>; -webkit-transition-origin: <transform origin>;

Figure 3–29 显示了 CSS 中转换属性的例子。

**图 3–29。**CSS 中变换属性的例子(图片 Christian Krammer)。

动画

与过渡类似，动画会随着时间的推移修改属性。使用transition属性，我们实现了从一个值到另一个值的单向效果。这种属性对于模拟 iOS 页面过渡或创建类似 Flash 的动画非常有用。

使用animation属性，我们可以提供任意数量的不一定是线性的中间值，实现相当复杂的动画。这些中间值称为关键帧，是所有动画过程的基础。

**注:**动画和电影制作中的一个关键帧，就是定义任何平滑过渡的起点和终点的一张图纸。它们被称为“帧”,因为它们在时间上的位置是以胶片上的帧来测量的。关键帧序列定义了观众将看到的图像，而关键帧在电影、视频或动画时间轴上的位置定义了移动的时间。

CSS 中的动画属性如 Table 3–22 所示，CSS 语法为:

animation-name: <name>; animation-duration: <time>; animation-iteration-count: <integer>; animation-timing-function: <function>; @keyframes <name> {         from {                 left: <start-x>;                 top: <start-y>;         }         to {                 left: <destination-x>;                 top: <destination-y>;         } }

在我们的框架中，JavaScript 负责用户界面的行为，但是在许多其他情况下,animation属性提供了一个有效的替代方法。这个属性也是所有 CSS 模块中最复杂的。为此，我们将详细分析它的所有属性。更多详情见表 3–23。

关键帧

关键帧用于在动画过程中的不同点指定动画属性的值。关键帧指定动画的一个循环的行为；动画可以迭代一次或多次。

使用专门的 CSS at-rule 指定关键帧。一个@keyframes规则由关键字@keyframes组成，后面是给动画命名的标识符animation-name，后面是一组样式规则。

关键帧规则的 CSS 语法是:

keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}'; keyframes-blocks: [ keyframe-selectors block ] ; keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | É  PERCENTAGE ] ];

下面的例子将产生一个动画，在五秒钟内将一个元素从(0，0)移动到(100px，100px)并重复九次(总共十次迭代)。请注意，我们没有使用上面列出的所有属性，因为我们不需要它们来实现这种特殊的效果。

反思

没有其他 CSS 属性像反射属性一样具有苹果风格。在苹果商店的每一个产品展示上都会用到倒影，结合负空间的使用，这是实现漂亮整洁设计的一个很有价值的工具。

**注:**负空间，在艺术中，是图像主体周围和主体之间的空间。当主体周围的空间，而不是主体本身，形成一个有趣的或艺术相关的形状时，负空间可能是最明显的，并且这种空间偶尔被用作图像的“真实”主体的艺术效果。负空间的使用是艺术构成和视觉设计的关键要素。

为了达到最终效果，box-reflection 属性由 3 个参数或值组成。第一个参数设置反射的方向。第二个参数指定反射的偏移量。第三个参数是应用于反射的遮罩，使用名为gradient的属性传递。详情见表 3–24。

CSS 语法是:

-webkit-box-reflect: <direction> <offset> <mask-box-image>;

JavaScript:介绍最佳实践。

基于浏览器的开发是 JavaScript 的主要平台，通常在网页环境中执行。为 iPhone 或 iPad 编写 JavaScript 时需要考虑的一个因素是这些设备提供的糟糕性能，如图图 3–30 所示。

**图 3–30。**Mac OS X(左)和 iOS(右)的 JavaScript 性能对比

在这些情况下，遵循高性能代码的最佳实践变得更加重要。下面将介绍一些最佳实践原则，帮助我们在 iPhone 和 iPadweb 站点和 WebApps 中开发更干净、更快速的代码。

让代码可以理解

第一点很容易解释:为变量和函数选择容易理解和简短的名字。用变量或函数名描述一个值总是一个好的做法。

不要使用全局变量

使用全局变量通常是一个糟糕的想法，因为我们冒着代码被添加到页面中的其他 JavaScript 覆盖的风险。

使用严格的编码风格

我们必须始终使用有效的代码。一般来说，浏览器非常宽容 JavaScript 解析器，但是当我们转移到另一个环境或者将项目交给另一个开发人员时，使用松散的编码风格会伤害我们。JavaScript 验证器将帮助我们实现有效性。

**注意:**与 HTML 和 CSS 不同，W3C 没有为我们的 JavaScript 代码提供任何官方验证服务，幸运的是，JSON 和 JSmin 的创始人道格拉斯·克洛克福特已经创建了 JSLint JavaScript 验证器。www.jslint.com/的有 JSLint

根据需要对代码进行注释

重要的是要记住，无论你的代码有多好，它仍然不会自我解释。在注释我们的代码时，避免“行注释”也很重要。使用/* */要安全得多，因为它不会在删除换行符时导致错误。

不要使用混合技术

我们可以在许多上下文中使用 JavaScript，比如计算、转换、访问外部资源(Ajax)，以及定义接口的行为(事件处理)。对于其他任何事情，坚持使用我们已经拥有的技术来完成工作是一个好主意。

一个很好的例子是，如果我们试图用 JavaScript 改变表示。这确实是一个糟糕的方法，因为人们不应该为了改变演示的外观而改变 JavaScript 代码。我们将使用的所有框架都将这一原则付诸实践。它让我们不用编写一行 JavaScript 代码就可以使用许多定制的用户界面组件。

使用快捷符号

使用快捷符号，一旦我们对它足够熟悉，我们可以让我们的代码变得简洁易读。

模块化代码

对于开发人员来说，保持代码模块化和专门化总是一种节省时间的做法。特别是当我们是初学者时，我们倾向于编写单个函数来实现我们所有的(行为)目标。不幸的是，当我们开始扩展代码时，我们面临着在几个函数中编写相同代码的风险。为了避免这种情况，重要的是编写更小的、通用的助手函数来完成一个特定的任务。

允许渐进增强

在编写代码时，我们必须只使用 JavaScript 来实现特定的行为。在任何其他情况下，我们必须使用其他 web 标准，如 HTML 和 CSS。这里的要点是避免大量依赖于 JavaScript 的代码。以这种方式开发，我们将提供渐进的增强和第一级的优化，因为 DOM 的生成是缓慢和膨胀的。

**定义:**渐进式增强是一种强调可访问性的网页设计策略……渐进式增强以分层的方式使用网络技术，允许每个人访问网页的基本内容和功能、更高级的浏览器软件或更多地体验网页的增强版本。 ——(来源维基百科)

允许维护和定制

我们代码中所有可能改变的东西不应该分散在整个代码中。一个好的做法是将这些代码放到一个配置对象中，并将其公开，这样维护和定制将更容易实现。

不要编写大量嵌套循环

在循环中嵌套循环总是一个坏主意，因为这意味着要处理几个迭代器变量。我们可以使用专门的工具方法以更简洁的方式达到同样的效果。

优化循环

在 JavaScript 中，循环会变得非常慢，大多数时候是因为糟糕的编码。一个好的指导方针是始终将计算量大的代码放在循环之外。

尽量少用 DOM

正如我们前面所说的，DOM 的生成是缓慢而庞大的，所以重要的是要记住不要滥用它，或者过度使用和分散它，而不是使用组操作。

总是测试任何元素

我们不能简单地相信任何进来的数据。如何避免这种情况的一个例子是使用typeof测试进入我们函数的数据的格式，或者在改变或使用 DOM 元素之前测试它们的可用性。

仅使用 JavaScript 添加行为

在编写 JavaScript 代码时，很难跟踪我们生成的 HTML 的质量。我们知道，在任何情况下，JavaScript 旨在实现我们的网站或 WebApp 中的行为，因此，如果我们发现自己用 JavaScript 创建了大量的 HTML，我们可能做错了。

首先为人类开发代码

作为良好的实践，在开发过程的某些点上，我们总是优化我们的代码。重要的是要记住，活代码是为机器做的，开发代码是为人类做的，所以我们不想过早地优化，惩罚我们自己或其他必须接替我们的开发人员。

浏览器对标准的支持:WebKit 和 Safari

在为 iPhone 和 iPad 开发网站或 web 应用时，浏览器代表了我们所有项目的基础。苹果浏览器是在 WebKit 浏览器引擎上开发的，使用的网络标准有:

• HTML，HTML4，XHTML，XHTML-MP
• CSS， CSS2
• Java Script 语言
• 创建交互式、快速动态网页应用的网页开发技术
• 挽救（saving 的简写）
• 用于文本、视频、音频等的其他技术。

把 Safari 想象成你最好的朋友(也许是这样，因为你在这个浏览器前花的时间会比和你所有真正的朋友在一起的时间都多):你对它越了解，你就越不会遇到问题。

Safari 和 Mobile Safari 都基于相同的 WebKit 浏览器引擎，都支持完整的 CSS2 规范，以 100%的分数通过 CSS Acid3 测试(见图 3–31)。这两种浏览器还支持几乎所有的新 CSS 规范，我个人假设我所有的 iPhone 或 iPadweb 站点和 WebApp 都支持所有的 CSS 规范，因为所有对开发有用的属性都得到支持。Safari 还引入了一些新的 WebKit 属性，如 CSS -webkit-reflection和-webkit-tap-highlight-color，我们希望它们能很快包含在 CSS 规范中。

**图 3–31。**Safari(左)和 Mobile Safari(右)上的 Acid3 测试

Safari 和移动 Safari 之间最著名的行为差异是position: fixed问题(仅从 iOS5 开始支持)。当我们想要在底部(或上部)或我们的网站或 WebApp 中插入某种 UI 元素，如固定的页脚(或页眉)时，这可能会成为一个问题。在这种情况下，如果用户上下滚动页面，UI 元素也会上下滚动。

为了理解这种情况发生的原因，我们需要记住，我们在 iPhone 上(有时在 iPad 上)看到的只是整个 HTML 页面的一个窗口。

**注意:**桌面环境中的视窗区域是 2D 区域的可见部分，比可视化屏幕大。

就好像我们面前有一本打开的书，手里拿着一张纸，中间切出一个 320×416 像素的方孔。一旦我们把纸放在书的页面上，如果我们想阅读页面，我们需要移动 320×416 的方孔(视窗)并把它放在我们想阅读的单词上。这正是 Mobile Safari 视窗所做的，当我们轻弹和滚动时，我们移动视窗，而视窗后面的网站保持静止。下面的图 3–32 显示了这一原理。

**图 3–32。**iOS 和 OS X 视口尺寸对比。

因此，CSS 属性是有效的并且正在工作。因为视窗在移动而不是页面在移动，所以元素看起来也在移动。我们有几种方法来解决这个问题，我们将在第八章中看到各种方法。

移动 Safari 浏览器是 A 级浏览器，这意味着它可以与桌面级浏览器相媲美。在本节中，我们看到了浏览器支持 web 标准的重要性，在下一节中，我们将看到 iOS 的限制和约束，以及这对 Web 开发人员意味着什么。

iOS 限制和约束

既然 iPhone 和 iPad 都是移动设备，它们肯定有限制，既然这个世界上没有什么是无限的(除了数学上的无限)，它们肯定有一些限制。

最后，我总是对限制和约束做出积极的反应，即使在开始的时候，它们有时会让我心烦意乱，紧张，甚至生气。我仍然记得有一天我意识到旧的 iOS 固件(称为 iPhone OS)不允许任何本机和第三方应用的多任务功能，可能最好忘记在那些短暂的时刻我脑海中闪过的东西。

作为人类和开发者，我们的角色是将限制和约束转化为机遇，为我们生活中的一切和我们遇到的一切赋予价值。

我们今天面临的是一些硬件和软件的限制和约束。表 3–28 显示了其中最重要的几项。

正如我们从表格的第二部分看到的，在许多情况下，不支持的技术不是基本的，而在其他情况下，我们有很好的替代或很好的解决方法；所以让我们往积极的方面想！

下面是一个如何按照触摸屏范例重新设计用户体验的例子。想象一下，我们正在浏览桌面上的网页，然后点击菜单中的链接。会生成一个带有几个选项的下拉菜单，将鼠标悬停在这些选项上会导致该项目的描述出现在附近的信息框中。点击链接会将我们带到另一个页面。

这种用户体验在 iPhone 或 iPad 上是不存在的，因为不支持 CSS hover 属性。

我们可以做的是设计一个针对 iPhone 或 iPad 优化的界面，并在第一次点击链接时让信息框出现，并在用户第二次点击时激活链接，将他带到所需的页面。一个名为tap-highlight-color的 WebKit 扩展也可以用来使被点击的元素被一种颜色全部或部分遮挡。

在下一段中，我们将看到为用户界面的第一行提供支持的设计是多么重要:手指。

手指不是鼠标:手指友好的重要性

作为 iPhone 或 iPad 开发人员(以及一般的触摸设备开发人员)，我们需要掌握的第一件事是，手指不是鼠标。出于几个原因，记住这一点很重要。

当我们用鼠标浏览网页时，我们在页面上移动指针。指针只有几个像素宽，顶部只有一两个像素宽。从手指角度来看，我们可以有手指细的小用户，和手指粗的大用户。大多数用户将处于中间位置，但几乎所有人都无法用手指点击桌面网页上的典型链接。不管我们谈论的是什么样的链接，一个手指不友好的链接在任何一种触摸设计中都是不可接受的，如图图 3–33 所示。

图 3–33。 链接完全是手指不友好不使用缩放功能。

现在，我能听到你说，感谢上帝我们有变焦镜头！你说得对，但是我们关于移动 UX 的黄金法则是，一切都应该用最少的操作就可以轻松访问。在触摸设备上，我们必须设计最小高度为 30px 的链接。如果链接高度为 30px，并且在链接之间使用了适量的不可触摸空间，那么可以假设几乎所有的用户都能够点击链接并使用界面。

另一个重要的方面是手指输入并不总是对应于鼠标输入。鼠标有一个左按钮和一个右按钮，中间有一个滚动条，它可以快速移动到用户想去的任何地方。

许多开发者说，这里的重点是支持所有可能的鼠标事件，以增加触摸用户体验。我完全不同意。对我来说，重点是从零开始设计用户体验，忘记经典的鼠标用户体验，向前看，甚至不要向后看一眼。

在 Table 3–29 中，我们展示了实现优化的触摸用户体验的手势，以及它们如何根据不同的环境而变化:网站、WebApp 和本地应用。

我们也有几个在 iPhone 或 iPad 上没有手势事件等效物的鼠标交互，以及其他一些只属于过去的交互，因为它们在触摸屏范式中并不有趣。这些互动包括:

• 悬停效果
• 悬停生成的内容
• 拖动窗口应用
• 一些基于点击的互动

内部渐进增强

渐进式增强是一种使用分层技术的实践，允许任何人访问我们的内容，不管他的能力如何。一些技术与沟通有关，而另一些则侧重于互动。

为了采用**渐进增强范例，**我们只需要从内容分离的方法开始，正如我们在第二章中看到的。从使用 HTML 的内容输出方法标记我们的文本的基础层开始，我们使用 CSS 为表示添加了一个额外的层，并使用 JavaScript 为行为添加了一个最终层。

这种方法是我们需要应用的 web 标准最佳实践的一部分，但是当我们为苹果设备开发时，它不足以保证最终的结果。在这种情况下，我们有其他变量要处理，以提供我们用户体验的优雅降级。这就是内部渐进增强进入场景的地方，如图 Figure 3–34 所示。

图 3–34。 网站和 WebApp 上的渐进式增强范例

正如我们在关于 WebApp 的利与弊以及本机和 WebApp 之间的区别的部分中所看到的，要考虑的问题是内部跨平台实例。在这里，我们的主要目标是让用户体验从市场上最后一部 iPhone 或 iPad 温和地退化到它的第一个祖先(iPhone 2G 和 iPad 3G)。

提供内部渐进增强的有用准则由以下几点组成:

• 制定设备计划:了解哪种设备型号将是您的主要目标。
• 如果你想访问不同类型的设备，比如 iPhone/iPod 和 iPad，那么就计划同一 WebApp 的不同版本，然后分别优化每个用户的体验。
• 在所有支持的设备之间开发一个公分母，以共享基本(和通用)级别的用户体验。设想如何从相同的内容输出代码实现不同的版本，以便优化每个用户体验。
• 以一种语义的方式使用 Web 标准，用 HTML 标记内容，用一种 ?? 的方法来标记内容。在添加任何 CSS 样式之前，先从这第一层的页面可用性着手。
• 使用 CSS 添加表示层。
• 使用 JavaScript 提供用户交互。
• 在信息架构和开发的所有阶段使用可用性测试,以确保尽管存在硬件差异，用户体验仍能逐步改善

Safari 的开发者资源和工具

新版 Safari 带来了一些新的开发功能。这些功能在 Mobile Safari 上不可用，但如果我们需要处理特定的任务，如 JavaScript 调试，或监控资产活动，我们总是可以使用 iPhone 和 iPad 项目的桌面版本。

图 3–35。 Safari 开发工具:数据库(左)、JavaScript 调试器(中)、资源(右)。

我们可以通过打开 Safari 偏好设置的“高级”面板中的“开发”菜单，从菜单栏访问 Safari 5 中的所有开发人员工具，如 Figure 3–35 所示。这样，我们就可以一键访问所有的开发人员功能。

网页检查器

Web 检查器是开发人员工具的命令中心，Web 开发人员可以在这里轻松访问所有可用的工具。您将在下一段中看到的所有功能都可以通过 Web Inspector 访问。

元素

有了这个工具，我们可以访问网页的结构。使用 Elements Pane，我们还可以对 DOM 和 CSS 代码进行更改，并立即看到更改的预览。

资源

使用这个工具，我们可以访问应用的资源，从而允许我们查看和修改本地数据和 SQL 数据库信息。我们还可以获得被访问域的信息。

网络

有了这个工具，我们可以监控资源是如何通过网络加载的，并且我们可以处理任何类型的加载延迟问题。

脚本

有了这个工具，我们可以在运行时检查 JavaScript 代码和调试。这个工具还提供了 JavaScript 代码使用的所有资源的信息。

时间线

有了这段代码，我们在 WebApp 的交互时间线上有了一个窗口。我们可以看到网页是如何加载和渲染的。

移动 Safari 的开发者工具

Mobile Safari 有一个集成的调试控制台，如图 Figure 3–36 所示。这不像使用桌面版本的浏览器，但它可以用于检查我们的网站或 WebApp 中的错误。

图 3–36。 手机 Safari 调试控制台

要激活这个功能，你需要进入设置页面，进入 Safari 页面设置，然后选择开发者。在开发人员页面中，打开选项调试控制台。一旦激活，调试控制台将显示一个(有限的)控制台消息列表。

SDK 开发模式

2002 年，苹果推出了 Mac OS X，当时它为每一位麦金塔用户提供了一整套应用开发工具。自从名为 Panther 的 10.3 版本出现后，这些工具就作为名为 Xcode 的集成开发环境的一部分出现了。所有 OS X 应用，如 Safari、iTunes、Mail 或 iChat，都是由 Apple 使用相同的 Xcode 工具开发的。

在这一节中，我们将简要介绍这种范式及其组件，因为即使这本书是关于 web 开发模型的，对开发人员来说，对苹果开发世界有一个 360 度的视角也是有好处的。

苹果的 Objective-C、Cocoa Touch 和 Xtools 模型

Xtools IDE、Cocoa Touch 框架和 Objective-C 语言构成了每个 iOS 开发人员的三位一体。一切从这里开始。

Xcode IDE

当我们谈论 Xtools 时，99%的情况下我们指的是 Xcode IDE、界面生成器和 iPhone/iPad 模拟器。

Xcode 是一个 IDE。有了这个工具，我们还可以管理我们所有的测试设备，使用适当的证书自动打包到 iPhone/iPad 应用中，并在 iPhone/iPad 上安装应用。

远程调试器功能还可以实时连接到设备，在设备上控制应用时管理断点，并为实时测试提供良好的工具。

iPhone/iPad 模拟器

iPhone/iPad 模拟器运行我们的应用的方式与实际的 iPhone/iPad 设备非常相似。这个工具是每个开发人员在测试第一阶段最好的朋友。使用 iPhone/iPad 模拟器，我们甚至可以通过使用鼠标来模拟触摸手势，并且我们还可以为我们的应用创建视频教程提供良好的资源。

目标-C 语言

Objective-C 是一种面向对象的语言，它有一个动态的类系统，是标准 C 语言的超集。这种语言建立在 Cocoa (Mac OS X)和 Cocoa Touch (iOS)框架之上。

Objective-C 还推出了针对多核 MAC 优化的垃圾收集器，但作为 iOS 开发者，我们可以忘记这个功能，因为在 iOS 上，我们必须手动优化我们的内存使用。

可可触摸框架

Cocoa Touch 框架驱动了所有的 iOS 应用，并分享了许多在 Mac 上发现的成熟模式，但它特别关注基于触摸的界面和优化。

Cocoa Touch 框架由以下部分组成:

• 基础框架
• UIKit 框架
• 框架集合

基础框架

基础框架是一个抽象层，它从 UIKit 中的用户界面对象中抽象出许多底层的操作系统元素，比如基本类型、包管理、文件操作和网络，我们将在下面介绍这些内容。这个框架是所有不属于用户界面的东西的入口，并且定义了 Objective-C 类的基础层。

除了提供一组有用的基本对象类之外，它还引入了几个范例，这些范例定义了 Objective-C 语言没有涵盖的功能。基础框架的设计考虑了这些目标:

• 提供一小组基本的实用程序类
• 通过引入一致的约定来简化软件开发，比如解除分配
• 支持 Unicode 字符串、对象持久性和对象分布。
• 提供一定程度的操作系统独立性以增强可移植性

基础框架包括根对象类，表示基本数据类型(如字符串和字节数组)的类，用于存储其他对象的集合类，表示系统信息(如日期)的类，以及表示通信端口的类。

这个框架引入了几个范例来避免常见情况下的混淆，并引入了跨类层次的一致性。

UIKit 框架

Mac OSX 程序员使用一个名为 AppKit 的框架，它提供了所有的窗口、按钮、菜单、图形上下文和事件处理机制，这些都是定义 OSX 体验的基础。可可触感等同物被称为 UIKit。UIKit 框架提供了为 iPhone、iPad 和 iPod Touch 构建和管理应用用户界面所需的类。它提供了专门为触摸屏界面设计的应用对象、事件处理、绘图模型、窗口、视图和控件。

除了 UIKit 之外，Cocoa Touch 系列框架还包括创建世界一流的 iPhone 和 iPad 应用所需的一切，从 3D 图形到专业音频，到网络，甚至是控制相机或从 GPS 硬件获取位置信息的特殊设备访问 API。

这些框架的例子包括:

• 音频和视频
  • 核心音频
  • open al！open al！open al
  • 媒体库
  • AV 基金会
• 图形和动画
  • 核心动画
  • OpenGL 是
  • 石英 2D
• 数据管理
  • 核心数据
  • 数据库
• 网络和互联网
  • -你好
  • WebKit
  • BSD 插座

Cocoa Touch 建立在模型-视图-控制器范式之上，包括强大的 Objective-C 框架，只需几行代码就能执行全部任务，同时提供基本的 C 语言 API，以便在需要时直接访问系统。

**注:**模型-视图-控制器(MVC)是软件工程中使用的软件架构模式。该模式将“领域逻辑”(用户的应用逻辑)与输入和表示(GUI)隔离开来，允许独立开发、测试和维护每一个。

SDK 开发生命周期

当我们用 SDK 开发模式开发时，生命周期基本相同。改变的只是我们有一个启动阶段，在这个阶段我们需要注册苹果开发项目，还有一个最后阶段，我们向苹果提交我们的申请以获得批准。

在图 3–37 中，我们以“构建”的通称来表示三个阶段:设计、实现和测试，但是过程结构与我们在第二章中看到的是一样的。

生命周期还显示了最后一步如何变化，因为原生应用将进入 iTunes 应用商店，而不是像所有 web 应用那样在线。

图 3–37。 SDK 开发模式生命周期

我们将不再深入探讨 Objective-C、Cocoa Touch 和 Xtools，因为这本书的重点是使用 web 标准设计和开发 WebApps。

嗨，我在 Mac 上

在本章的最后，我想和你分享史蒂夫·乔布斯在 2007 年 WWDC 大会上关于使用网络标准为 iPhone 进行 Web 开发的话。我知道如果史蒂夫·乔布斯说了什么，那总是自私地支持苹果，但我也觉得他的许多引用非常鼓舞人心。

“…完整的 Safari 引擎在 iPhone 内部。因此，您可以编写出令人惊叹的 Web 2.0 和 Ajax 应用，它们看起来和行为都与 iPhone 上的应用一模一样…”

“…他们可以打电话、发电子邮件，甚至可以在谷歌地图上查找位置…”

“…如果你知道如何使用最现代的网络标准编写应用，你就拥有了你需要的一切…”

“…所以开发者们，我们认为我们已经为你们准备了一个非常甜蜜的故事。您现在就可以开始构建您的 iPhone 应用了…”

用于苹果移动开发的工具和框架

本章使用的工具既有免费的也有付费的。Table 3–30 列出了一些你可以用来设计下一个网站或 WebApp 的有用工具。

总结

在这一章中，我们介绍了框架背后的概念，我们看到了开发阶段的框架方法和结构如何为开发人员提供有用的构件。

在第二部分中，我们研究了 web 开发模型、它的优点和缺点，以及开发 WebApp 的四种不同方法。我们还分析了 WebApp 用户的不同之处，比较了本地和 WebApp 用户(和开发人员)的体验。介绍了 Webkit 和 Safari，展示了典型的设备限制和约束，并介绍了内部跨平台概念。

在本章的第三和最后一部分，我们研究了 SDK 开发模型，介绍了 Xtools、Objective-C 和 Cocoa Touch 框架。通过说明原生应用的生命周期，我们还看到了如何使用 PhoneGap 等其他开源工具，让我们从使用 web 标准开发的 WebApp 开始开发原生应用。