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/createwithcontext/how-people-really-use-the-iphone-presentation](http://www.slideshare.net/createwithcontext/how-people-really-use-the-iphone-presentation).的 Slideshare 上可以看到该研究的完整介绍

如需下载 PDF，请访问
[www.createwithcontext.com/how-people-really-use-the-iphone.html](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>

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

`

        

iWebKit 5 Demo

`

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

`

        

iWebKit 5 Demo

        

                PC Site
        

`

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

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

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

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

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

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

`

        

                Home
                Changelog
                About
        

`

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 所示，可以用来添加任何关于站点的相关信息，在这里是关于框架的信息。页脚的定义使用:

`

        Powered by iWebKit

` 

图 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 开始开发原生应用。

四、iOS 设备的用户界面设计

“简单是终极的复杂”

莱昂纳多达芬奇

用户界面设计阶段是整个项目中最重要的阶段之一。用户界面是 WebApp 中一切的基础:内容、功能和所有类型的服务都是通过组成用户界面的元素来访问的。

在这一章中，我们定义了什么是触摸屏生态系统中的界面。我们探索积极和消极空间的概念，因为它在用户界面设计阶段发挥作用，并看看感知规则如何帮助我们在头脑中概念化我们的界面设计。

我们讨论颜色心理学理论，建议你如何以一种有效和令人愉悦的方式组合颜色，并看看颜色如何影响用户的情绪。然后我们检查用户阅读模式，看看你如何用你的界面设计来影响他们。

在这一章的最后一部分，我们检查了用户界面设计过程的所有阶段，然后我们在三个不同的项目中实现它:一个与 iPad 兼容，一个具有特定于 iPad 的类似本机的结构，一个仅用于 iPhone 的类似本机的结构。

用户界面设计

大多数设计师都把简单放在第一位，我们也是。我们重视简单的事情，因为它们很容易做我们需要的所有事情，没有一件事情我们不需要。简单就是和谐。人们引用莱昂纳多·达·芬奇的话说:“简单是终极的复杂。”当你坐在电脑前设计你的用户界面时，你应该记住这句话。简单就是优雅。

这些年来，我们看到了苹果风格的变化，逐渐形成了自己对“简单”的诠释。在图 4–1 中，你可以看到周围的世界是如何被这种风格影响的。

图 4–1。 不同品牌，相同款式:苹果(左)和 Palm(右)。

Palm 是一家大公司，它沿着苹果开辟的道路改变了营销品牌的方式。就连其他公司的最新广告，比如微软，也是受到这种思维方式的启发。简单正迅速成为基于触摸屏显示器的新技术革命的基础。

完成了项目流程步骤 0 中的分析阶段后，我们进入步骤 1 中的设计阶段。在这个阶段，我们开始处理我们的界面。正如我们从图 4–2 中看到的，用户界面设计是整个设计阶段的一个子步骤，在此阶段设计和批准的所有东西都在项目流程的下一个阶段开发，称为“实现”

图 4–2。 项目流程背景下的用户界面设计阶段

本章讨论的用户界面设计过程是基于简单性的。在介绍了一些重要的主题后，如负空间和正空间、主动空间和被动空间、色彩心理学背后的理论以及阅读模式，我们讨论了如何从兼容的第一步(兼容的 WebApp)到完全兼容的类似本机的方法。

在开始之前，我们需要引入一个重要的新概念:“界面”这个词在触摸屏生态系统中到底意味着什么？现在让我们来看看。

什么是接口？

作为设计师，你对用户界面、的概念很熟悉，但是在我们周围有很多种界面。每当我们有一个想要控制或与之互动的对象时，在这个对象和我们自己之间就会有某种界面。这个界面给了我们一个简单的方法来实现我们的目标。

定义:界面

两个系统之间的交互点。

定义:用户界面

计算机应用或操作系统的可视部分，用户通过它与计算机或软件进行交互。

对于像 iPhone 或 iPad 这样的设备，我们有两种界面，如图 Figure 4–3 所示:

• 软件界面
• 硬件接口

iOS 为我们提供了一些不同的软件界面，每种不同的 iPhone 视图都有自己特定的类型。地址簿样式视图使用具有边对边链接的典型列表方法界面，关于我们样式视图可以使用圆角矩形方法。

图 4–3。iPhone 的接口类型:软件接口(左)和硬件接口(右)。

在软件接口之下，我们有一个由硬件接口提供的更原始的交互层。这些软件和硬件接口使用户能够与设备的各个方面进行交互。使用 Table 4–1 中显示的硬件接口，您可以调整麦克风和扬声器音量，打开和关闭设备，并且通过触摸屏使用操作系统提供的所有软件接口。

当我们在 iOS 设备上使用任何一种移动软件时，我们也会使用触摸屏进行交互。在我们的触摸屏环境中，显示器也是一个硬件接口。这是很重要的一点，因为它直接将我们引向一种新的范式，这种范式是我们以前从未在传统桌面或旧的移动电话方法中见过的:一切都是界面。

一切都是一个界面

这是什么意思呢？用这些词，我们指的是 iOS，因为它的触摸屏功能，你的软件中的每个部分都变成了一个界面。在这一章中，我们将看到如何设计每一个技术上可触摸的 WebApp 部件，而不仅仅是桌面范例过去使用的“经典界面”。

使用触摸屏，您可以缩放、挤压、滚动以及做其他手势动作。这些手势使用户能够与整个视口中包含的所有对象进行交互，换句话说，就是与 WebApp 的所有可见部分进行交互。Figure 4–4 展示了如何使用触摸屏设备，即使是内容也必须被视为一个界面，在这种情况下是一个被动界面。

图 4–4。iPhone 的接口种类:主动接口(左)和被动接口(右)。

在经典的导航范例中，当你使用鼠标(或老式手机中的操纵杆)时，你通常只指向或选择 WebApp 的可链接部分。没有人试图点击一个死区并期望会发生一些动作。

注:单词死区指布局内不可点击的区域。因为它是不可点击的，所以布局的死区部分不会给用户提供任何级别的交互。

一旦你理解了这个重要的概念，你就会意识到你的界面的每一部分，以及你的 WebApp 的每一部分，都需要精心设计。

从现在开始，我们将使用主动界面作为我们界面中可触摸或可点击的部分，我们将使用被动界面作为我们布局中仅仅可触摸(可缩放)的部分。请记住，主动界面基于软件功能(链接)，被动界面基于硬件功能(触摸屏显示)。在图 4–4 中，你可以看到 iPhone 和 iPad“兼容”网站中的主动和被动界面。

作为设计师，意识到这个概念可以极大地提高你的设计技能，并提升你的项目所提供的用户体验水平。

新的触摸模式也改变了你的界面和布局的要求，所以现在的问题是，你应该如何设计你的触摸界面和布局？

您的触摸界面和布局设计基于:

• 对颜色的认知运用
  利用颜色获得的情绪强化了品牌信息。
• 新的视觉层级
  优先考虑界面和布局，针对触摸屏设备进行优化。
• 一种新的触摸屏阅读模式结构
  在原生和兼容项目中优化触摸屏 UX。
• 被动和主动消极空间的认知运用
  主动和消极空间都是基于感知规律。

现在你知道了要使用的工具，问题是，“你想用这些工具达到什么目的？”

在设计你的界面和布局时，你应该努力做到:

• 统一
  在界面和布局元素之间创造和谐。
• 平衡
  利用界面和布局元素创造视觉平衡。
• 层次
  区分界面和布局元素的优先级。
• 主导权
  在界面和布局元素上创造焦点。

所有这些概念理解起来都很重要。但是意识到它们，认识到它们，并在你的设计中使用它们完全是另一回事，需要实践。

图 4–5。 用户界面设计阶段的工具和目标。

首先，我们为这个新的触摸范例引入一个基本概念:负空间概念。你可以看到这个简单的想法是如何彻底改变你的设计风格的，以及它与触摸屏范式的密切关系。

用户界面设计中的感知规则

感知规则是每一种设计师的基础。这些规则是过滤器，用于生活中的互动，是我们经验的基础。这些规则的作用是解释和整合来自外部环境的单一刺激成为一个单一的连续形式。

为 Apple 设备设计界面时，为了实现设计的特定目标，了解这些规则非常重要。有时候，你可能想传递激情、能量、简单，或者只是极简主义者。感知的规则帮助你在质量方面取得更好的结果，并使整个过程更加容易。

邻近定律指出，感知场中的邻近元素被感知为单一实体。您可以使用此规则为设计创建基于语义的组或实体。

图 4–6。 两列设计中的邻近定律。

相似性定律表明，感知领域中的相似元素根据其几何形状、颜色或尺寸被视为同一实体的一部分。您可以使用此规则来创建非邻近元素之间的设计一致性。

图 4–7。 网站菜单和产品细节中的相似法则。

连续性定律表明，感知领域中的连续元素被感知为结合成一个具有模式和方向的单一实体。您可以使用此规则来创建和添加视觉图案和连接到设计中。

图 4–8。 盖流设计中的连续性定律。

闭合定律表明，感知领域中的某种元素被感知为某种形式，即使某些视觉信息缺失。我们可以使用这个规则在物理上不可能的地方创造视觉形式或元素到设计中。在图 4–9 中，你可以看到几乎所有的角落都被物理地打开了(图 4–9 中的红圈)，但是头脑使用闭合法则，填补了这个信息空白并感知到了连续的线条(和形式)。

图 4–9。 版面设计中的闭合定律。

共同命运法则表明，在感知领域中具有相同方向的元素被感知为单一的运动实体。您可以使用此规则来创建运动并为设计添加方向。

图 4–10。 聚光灯设计中的共同命运法则。

图形背景关系法则表明，感知领域中的元素被感知为其形式与背景的结合。你可以使用这个规则来创建单个元素之间的联系，创造优势，并在设计中增加对比。

图 4–11。 标志设计中的图底关系法则。

过去的经验法则表明，感知领域中的元素是根据我们过去的经验及其意义来感知的。过去的经验储存在长期记忆中，当前的经验与已经储存的信息进行比较。图 4–12 中显示了一个示例。这个词并不完整，但是根据以往的经验法则，你能够确定正确的词是“iPhone4”你可以使用这个规则来优化每一种与设计和用户体验相关的视觉感受。

图 4–12。 以往标志设计经验法则

负空间

在第三章中，我们开始理解为什么界面和布局中的空间是如此重要的考虑因素。用户使用手指执行操作，需要更多的物理空间，以便以舒适的方式与您的界面交互。

此外，正如你在上一节学到的，考虑你看到的每一个图形都与一个背景有关。对我们设计师来说，这意味着我们界面或布局的每一部分都与其周围的空间有着密切的关系。利用这个空间，你可以极大地改变用户的情感效果，改变用户体验的水平。

出于我们的目的，负空间，也称为空白，一般可以定义为某个页面或界面中未被内容占据的区域。对于设计师来说，负空间是页面上特定项目之间的空间，不必是白色或纯色；它可能包含渐变、图案或背景对象。

定义:负空间

图像主体周围和主体之间的空间。当周围的空间，而不是主体本身，形成一个有趣的或艺术相关的形状时，负空间可能是最明显的。负空间的使用是艺术构图的一个关键要素。

设计一个网页或用户界面包括采用不同的对象，并以一种逻辑的、功能的和吸引人的方式来排列它们。要记住的关键概念是，你的界面的吸引力远远超出了你所使用的设计元素；你还必须考虑到这些元素周围的负空间的美学质量。

每个元素占用的物理空间与页面上的所有其他项目相关。这个物理空间有自己的规则。这些规则，从简单到复杂，都依赖于上下文。它们都有一个共同的关键点:它们都受到负空间的影响。

图 4–13。 标志设计中完美运用负空间的范例(图片 Richard Fonteneau)。

你需要学习的第一件事是如何在你的界面或布局中看到负空间。你必须做的是重新训练你的大脑，不仅要看内容，还要看内容的反面。如果你认为一个元素是一个项目和项目周围的空间的组合，你的大脑使用一个称为图形背景的定律的过程，将项目和它周围的负空间组合起来，以表示该元素。

尽管你现在已经熟悉了负空间背后的概念，但是为你的设计决定正确的负空间数量需要大量的视觉敏感度和技巧。基本上，适量的负空间取决于三个因素:

• 你想要获得的心情
  (作品集网站比在线杂志需要更多的空间)
• 要传递的信息量
  (因为负空间很贵)
• 您为
  设计的媒体(iPhone、iPad、台式电脑、打印机等，可能需要不同的数量)

在了解如何处理负空间之前，你需要考虑在我们的设计中可能很重要的两种情况:

• 主动负空间
  (用于将观者从一个元素引向另一个元素)
• 被动消极空间
  (用于创造平衡、和谐、呼吸的空间)

现在，我们提供一些方法来帮助更容易地使用这个强大的工具。

被动否定空间

这种负空间对于获得某种情绪和强化品牌背后的信息非常重要。在图 4–14 中，你可以看到苹果网站上使用了大量的被动否定空间。苹果广泛使用这种技术，以正确的方式推广和传播其品牌。在这一点上，重要的是要记住，有效利用负空间不仅仅是数量的问题，而是恰当利用的问题。有时候增加更多的空间是一个好主意，而在其他时候，你会想在你的设计中吃掉一些空白的空间。

图 4–14。 苹果官方网站上被动否定空格的使用。

在这个例子中，为了改进你的界面和布局设计，你需要分析当前负空间的数量和适当性，然后决定哪些区域过多，哪些区域过少。在苹果网站的例子中(图 4–14)，你可以看到大量的固体消极空间是如何创造出一种经典、优雅和高档的氛围的。

被动负空间还能达到什么目的？

创建单独的内容组

你可以用消极空间来分隔不同的信息组或区域，用更少的空间来分隔相似的组，用更多的空间来分隔差异更大的组。您还可以通过配置使用的空间量来创建子分组。

通常，这种技术在元素上同时使用边距和填充值。在 Figure 4–15 中，您可以看到适量的消极空间是如何创建独立的内容组的，其中每条内容都由一幅图像和一段文字描述组成。

图 4–15。 利用负空间创造群体内容，消除视觉紧张。

消除视觉紧张

当一个形状与其他形状不平衡时，它在美学上受到影响，用户对这种不平衡关系的认知反应是视觉紧张。看图 4–16(并与图 4–15 进行比较)，注意当你看这些形状时，你的眼睛会自动转向哪里。

图 4–16。 两组内容之间视觉张力的例子。

你的眼睛可能会自动进入图 4–9 的左上部分，在那里两组内容之间的不平衡关系造成了视觉上的紧张。

可以利用被动负空间，让眼睛得到一些休息，消除视觉紧张。通常，这种技术在布局元素之间使用边距值。您可以在 Figure 4–16 中看到如何创建独立内容组的示例。

聚焦一个元素

你可以使用消极空间来突出你界面或布局中的一个重要元素。一个典型的例子是将徽标放在远离导航栏的地方(反之亦然)。这样，你就给了这个元素需要被用户注意的空间。

使用这些技术，通常在突出显示的元素和元素设计的其余部分之间使用边距值。

图 4–17。 利用负空间来突出一个元素并创造优势。

创造优势

你可以使用消极空间在你的界面或布局中创造元素优势。一般来说，你可以结合使用负空间和其他技术来实现元素优势，但是一个很好很简单的技巧是让一个元素吃掉另一个元素的负空间。这样做的元素往往会脱颖而出，如果布局或界面元素的间距相等，这种技术会更加有效。

通常，这种技术在主要元素和相邻元素之间使用负的边距值。您可以在不使用任何边距值和不处理元素的透视和位置的情况下实现相同的视觉效果，如图 Figure 4–18 所示。

图 4–18。 通过吃负空间实现元素变色的图形方式

提高阅读体验和理解

你可以使用消极空间来改善用户的阅读体验和理解。当用户试图在旅途中操作移动设备时，由于繁忙的现实世界的环境和干扰，他/她总是难以理解其内容。在 iPhone 和 iPad 上实现良好的阅读体验和用户理解同样重要，但是，因为它的屏幕小得多，所以在 iPhone 上保持高质量的用户体验尤为重要。

通常，这种技术不仅控制字符的大小，还通过使用单词和字符之间的行高、单词间距和字母间距值来控制被动负间距。在图 4–19 中，你可以看到line-height属性的使用如何增加文本的可读性，并在布局中给你更多的喘息空间。

图 4–19。 手指友好的图标和间距良好的段落。

提供高水平的用户体验

你可以使用消极空间来设计触摸友好的界面和布局。在你的 WebApp 中，一切都是一个界面，因为手指比鼠标指针需要更多的空间，所以负空间起着重要的作用。每一个界面最大的敌人是由非触摸友好设计产生的挫折感。这个问题在兼容的 WebApp 中比在类似本机的 web app 中更常见，因为用于类似本机的基于界面的项目的框架保证了用户舒适的导航。

通常，这种技术对主要内容部分使用一个line-height值，并在组成界面的元素组之间使用一个边距值。在图 4–11 中，你可以看到对于一个兼容的网站来说，图标是多么的方便手指操作。整个突出显示的区域都是可触摸的，元素的width为 73px，line-height为 1.5em。通过这种结构，实际上很难在错误的地方点击。

主动负空间

一旦你用被动负空间定义了你的内容，就该用主动负空间为用户定义导航路径了。积极的负空间对于抓住用户的注意力和引导用户浏览你的 web 应用的内容非常重要。

通过预测用户的导航路径，您可以优化内容，从而优化用户体验。在图 4–20 中，你可以看到在苹果网站中，粗体风格是如何被用来将注意力引向内容的关键点的。在这种情况下，活动负空间是由粗体样式创建的空间，换句话说，粗体样式在所有粗体字符周围添加的空间。

图 4–20。 苹果官方网站中负空格和正空格(虚线矩形)的使用。

活动负空间形状在内容内部创建一个路径。在图 4–20 中，你有三个不同的线性路径(从左到右)，用户可以自由地从一个路径跳到另一个路径，但总是在粗体字形成的“游泳线”内。

归根结底，你可以在你的作品(界面或布局)中增加更多的空间，以更好地强调或组织内容，并为用户创建某种路径导航。

主动负空间的先决条件是正确使用被动负空间，因为如果内容太复杂，用户的认知过程就不可能在内容中创建任何类型的导航路径。在这些情况下，由于高水平的背景噪音，大脑无法分离出任何类型的模式来决定如何阅读内容。

色彩心理学

色彩心理学是设计理论中一个复杂的课题。你在界面和布局中使用的颜色会显著影响用户对你的 web 应用的看法。

注意:正如你在第二章中读到的，如果你想保证你的 Web 应用的高度可访问性，颜色也是基本要素。当你选择你的调色板时，你必须像记住你的品牌信息一样记住这一点。

本书没有深入讨论这方面，但是为了设计简单有效的界面，你需要知道如何使用这个强大的工具来强化你的信息。

颜色可以用三种方式描述:

• 顾名思义
• 因其纯度
• 通过其亮/暗值

根据这种三向方案，用于描述颜色的一些术语是:

• 色相
  一个物体的实际颜色。绿色是一种色调，红色、黄色、蓝色、紫色等等也是。
• 强度
  一种颜色的亮度或暗度。向颜色添加白色或黑色会降低其强度。强烈和高度饱和的颜色具有高色度。
• 饱和度
  一种色调的纯净程度。纯色是高度饱和的。当添加灰色时，颜色变得不饱和。
• 色度
  相对于灰色的色调纯度。当颜色中没有灰色阴影时，颜色具有高色度。给一种色调添加灰色阴影会降低其色度。
• 亮度
  一种颜色反射的光量的量度。向色调中添加白色会使其更亮，并增加其值或亮度。因此，添加黑色会使其更暗，并降低值或亮度。
• 色调
  将灰色加入某一色调的结果。阴影和色彩是极端的色调。
• 阴影
  把黑色加到一个色调上产生较暗色调的结果。
• 淡色
  将白色加入某一色调以产生较浅色调的结果。

在 Figure 4–21 中，您可以观察孟塞尔配色方案，了解价值、色调和色度是如何协同工作的。

图 4–21。 蒙塞尔配色方案(image Jacobolus)。

艾伯特·亨利·芒塞尔(1858-1918)是一位美国画家、艺术教师，也是芒塞尔颜色系统的发明者，这是一种早期的尝试，旨在创建一种精确的颜色数字描述系统。

颜色通常使用色轮呈现，分为两个基本组:

• 暖色
  红色、橙色、黄色
• 冷色调
  蓝色、紫色、绿色

暖色唤起了从温暖、舒适、惬意到愤怒和侵略的各种情感。通常，冷色被描述为平静和安宁，但也可以与悲伤或冷漠联系在一起。

使用颜色作为触发器，你可以在用户的体验中引导他/她的注意力，并在你的内容中创建一个视觉(阅读)路径。

颜色如何影响用户情绪

重要的是要记住颜色的含义来源于人类历史，这意味着有些含义是世界上所有的人所共有的，而另一些则是某些文化所特有的，可能会随着时间的推移而改变。

尽管在不同的文化中颜色的含义有所不同，但是颜色有许多共同的因素。对我们来说，最重要的因素是用户对颜色的反应是即时的、无意识的，并直接影响他的情绪。下面，我们介绍了所有基本颜色的含义，以帮助你在设计用户界面时选择正确的颜色。

蓝色

这种颜色被认为是值得信赖、可靠和忠诚的。蓝色是天空和海洋的颜色，被认为是我们生活中不变的一部分。它唤起休息，使身体产生镇静的化学物质。尽管如此，并不是所有的蓝色都是宁静和稳重的；电蓝色或亮蓝色变得富有活力和戏剧性。

蓝色是最没有性别区分的颜色，对男性和女性都有同样的吸引力。

身体和精神上的影响如下:

• 刺激平静
• 刺激冷却
• 鼓励和帮助直觉

绿色

这种颜色在人眼可见的光谱中占据了更多的空间。绿色是自然界中最普遍的颜色，从森林到石灰的天然绿色被视为宁静和清新，具有冷色调和暖色调(蓝色和黄色)的自然平衡。

身体和精神上的影响如下:

• 促进放松
• 刺激平滑
• 提供一种更新、自我控制和和谐的感觉

黄色

这种颜色闪耀着乐观、启迪和幸福。金黄色带着积极的意义，通常是乐观、活力和创造力。

身体和精神上的影响如下:

• 刺激精神活动
• 刺激记忆
• 鼓励交流

红色

这种颜色比其他任何颜色都更有个性。红色是公认的兴奋剂，令人兴奋。这种颜色的数量直接影响到感知的能量水平。红色吸引注意力，敏锐地使用这种颜色作为强调可以立即将注意力集中在某个特定的元素上。

身体和精神上的影响如下:

• 激发能量
• 增加热情
• 鼓励行动和信心
• 提供一种免受恐惧和焦虑的保护感

橙色

这种颜色是红色的近亲，比光谱中的任何其他颜色都更有争议。橙色可以带来积极和消极的联想，通常会引起人们更强烈的“喜欢它”或“讨厌它”的反应。有趣而艳丽的橙色散发出温暖和能量，一些色调，如赤土色，具有广泛的吸引力。

身体和精神上的影响如下:

• 激发创造力
• 激发活力和热情
• 鼓励社会化

紫色

这种颜色体现了红色刺激和蓝色平静的平衡。这种二分法可能会导致不安或不安，除非清楚地定义其含义。此时，紫色呈现出其底色的特征。紫色给人一种神秘和高贵的感觉，通常被认为是富有创造性和古怪的。

身体和精神上的影响如下:

• 刺激平静
• 鼓励创造力
• 给人一种灵性的感觉

棕色

这种颜色代表稳定、可靠和平易近人。棕色是地球的颜色，与所有自然或有机的事物联系在一起。

身体和精神上的影响如下:

• 唤起稳定
• 给人一种健康的感觉
• 提供一种有序感

白色

这种颜色代表纯洁、干净和中性。通过与明亮的光线联系在一起，白色也与清洁和安全相关。

身体和精神上的影响如下:

• 刺激和帮助头脑清晰
• 实现新的开始
• 鼓励我们清除杂乱或障碍
• 唤起思想或行为的净化

灰色

这种颜色是永恒的，实用的，坚实的。灰色是智力、知识和智慧的颜色，可以与任何颜色很好地混合，但过度使用会带来一种失落或沮丧的感觉。如果在银色底色中使用，这种颜色可以与聪明和坚强的性格联系在一起。

身体和精神上的影响如下:

• 唤起传统主义和严肃性
• 给人一种期待的感觉
• 给人一种聪明和智慧的感觉

黑色

这种颜色具有权威性和强大的力量。黑色能唤起强烈的情感，它的过度使用会让人不知所措。

身体和精神上的影响如下:

• 唤起一种潜力和可能性的感觉
• 给人一种不显眼的感觉
• 给人一种神秘和正式的感觉

当你为一个网站或 Web 应用设计界面时，分析用户在与你的用户界面交互时可能想要做的每一个可能的任务是很重要的。有些任务在特定的环境下工作得最好，而另一些则在完全不同的环境下完成得更好。这方面的一个例子可能是一个在线购物车，在你的界面中使用过多的黑色可能会不经意地产生一种不祥的神秘感，潜在地增加了用户的退房率。在 Table 4–2 中，我们总结了一些与颜色相关的情绪和感觉。

如何组合颜色

一旦你知道每种颜色的含义，显而易见的问题是你如何为你的设计选择正确的颜色？简单的答案是，你应该总是选择一种或多种颜色来强化设计信息，但是如果你想为你的设计创建一个基于几种颜色的调色板，会发生什么呢？你怎么能把多种颜色放在一起呢？

我们有三种类型的模式来帮助我们为您的设计创建调色板。

单色配色方案

该图案使用不同深浅的单一颜色(参见图 4–20)。结果是一个舒缓和令人愉快的调色板，令人赏心悦目，特别是在蓝色或绿色色调。

类比配色

此模式使用色轮上彼此相邻的颜色。

图 4–22。 一个单色配色方案的例子(左)和类似的配色方案(右)。

补色方案

该图案使用从色轮上相对位置选择的高对比度颜色(参见图 4–21)。结果是以一种赏心悦目的方式将暖色和冷色结合在一起。

分割互补色方案

这种模式使用一种颜色，然后再使用两种与初始颜色的补色相邻的颜色。

图 4–23。 一个补色方案的例子(左)和分割补色方案(右)

三色配色方案

该模式使用色轮周围等间距的三种颜色(参见图 4–22)。结果是一个和谐的配色方案。

四色配色

此图案使用色轮上矩形角上的颜色。

图 4–24。 一个三色配色方案(左)和四色配色方案(右)的例子。

使用这六种模式，你可以根据各种颜色创建许多调色板。在图 4–24 中，你可以看到一个如何根据三色和互补色方案选择颜色的例子。

在本章的最后，我们推荐一些工具来为你的调色板选择或生成颜色。然而，记住某种颜色背后的含义总是很重要的。为了与你的 Web 应用品牌保持一致，你需要选择正确的颜色。

界面层次结构

主动界面的主要作用是在内容的不同部分之间建立联系，而对于被动界面来说，是为整个内容提供一个总体结构。除此之外，主动和被动界面都有一个更重要的作用:引导用户。

界面引导用户浏览你的内容。你的界面也必须有优先级，因为你内容的不同部分也有优先级。当你设计用户界面时，引导用户浏览你的内容是一个重要的目标。

您用于类似 iPad 原生版本的优先内容是您桌面内容的适当子集，而您用于类似 iPhone 原生版本的优先内容是您 iPad 内容和桌面的适当子集。

当我们介绍移动信息架构的概念时，您看到了在移动设备中区分内容的优先级是多么重要。但是，在实现可视化层次结构时，如何区分界面的优先级呢？

注意:视觉层次在页面设计中是用来帮助浏览者处理信息的。视觉层次是大多数人看到和识别内容元素的顺序。

除了本章前面介绍的主动和被动空间的使用，你现在将学习其他工具可以帮助你在主动和被动界面中实现视觉层次。

通过调整元素的视觉权重，可以在设计中创建层次结构。更大的视觉权重通常被视为更重要且更容易被用户注意到，而较小的视觉权重被视为不太重要。

• 尺寸
  较大的元素承载更多的重量，集中用户的注意力。
• 一些颜色被认为比其他颜色更有分量。红色似乎是最重的，而黄色似乎是最轻的。
• 密度
  增加某个空间的元素数量，赋予那个空间更多的权重。
• 值
  较暗的物体比较亮的物体重量大。为什么红色被认为是最重的颜色还不知道。
• 负空间
  利用感知法则，你可以创造出许多层次的等级体系。

正如你从 Figure 4–26 中看到的，层级有助于给你的主动和被动界面以秩序。等级优先级与通信接口并帮助通信。在图 4–26 中，你可以看到右边的层次结构加重了阅读体验。这对用户的认知资源产生了额外的需求，并导致不太令人满意的用户体验。

图 4–25好的内容层次结构(左)和坏的内容层次结构(右)之间的区别。

创建我们的层次结构应该从对页面目标的深思熟虑开始。只有当你理智地决定了你的页面的层次结构，你才应该尝试视觉设计这个层次结构。

阅读模式

我们第一次在 WebApp 上运行可用性测试时，我们总是会惊讶地收到结果。事实是，用户阅读模式与你设计界面时的预期完全不同。

实际上,“阅读模式”一词是恰当的，因为用户实际上并不阅读网页，他们只是浏览网页。他们浏览网页，寻找引起他们注意的单词或短语。现在的问题是:用户为什么要这么做？我们可以提出几个答案。

• 用户通常很匆忙
  用户浏览网页的动机是希望节省时间，因为他知道答案就在附近，而他的目标只是发现他需要看哪里。
• 用户知道他/她不需要阅读所有内容
  用户知道大多数时候他/她只对页面提供的部分内容感兴趣。出于这个原因，用户将只寻找相关的内容，而忽略他/她认为不相关的所有其他部分。
• 用户过去已经学会使用其他媒体进行扫描
  用户在过去阅读杂志、报纸或书籍的经历中，已经学会扫描内容以找到他们感兴趣的部分。

注:阅读模式因不同文化采用的不同阅读方向而异。重要的是要记住，我们在这一节中讨论的内容只适用于从右向左的阅读文化。

尽管用户扫描内容而不是阅读内容，但在从左到右阅读的世界中，我们仍然可以隔离出一些阅读模式。这些模式受内容中出现的图像的影响很大，但有趣的是，用户倾向于在我们的 WebApp 上使用“F”或“Z”模式来阅读，而不是使用微观或宏观线性模式。这意味着我们对内容有两种不同的主要方法，都基于用户在 10 年或 20 年或更长时间的内容浏览中所采用的惯例。

用户被训练去关注某些地方，因为那里通常是最重要的信息所在。因此，重要的是要记住，如果我们在设计界面时背离了这些传统的模式，那么我们就要承担风险。

Z 字形图案

Z 阅读模式是我们在阅读网页内容时想到的典型模式。通常，我们从徽标所在的左上角位置开始，然后下降到内容的第一段，从这里开始 Z 移动。

如果用户在阅读完段落的第一行后对内容感到满意，他将继续阅读并跳转到同一段落的下一行。

图 4–26。 苹果天才吧页面中的 Z 形图案。

当用户读完段落的第一行后，发现内容不是他想要的，故事就改变了。在这种情况下，用户将直接跳到下一段的第一行或下一部分内容。

这改变了每个 Z 子模式的高度和组成整个 Z 读取模式的 Z 子模式的数量。在图 4–27 中，我们可以看到 Z 模式是如何根据用户是否对段落的第一行感兴趣而变化的。

Z 形图案的含义

Z 模式与纸质报纸、杂志或期刊的经典阅读模式密切相关，并具有相同的含义:

• 用户可以从一个段落跳到另一个段落
  如果用户对段落的第一行不感兴趣，他会跳到下一个段落的第一行或者下一组内容。
• 用户总是会看图案的左下方
  设计师可以确信用户会看内容的某一部分，他可以通过在这个区域放置一些重要的号召按钮来利用这些信息。

Z 模式在非专家用户中更常见，或者更普遍的是当用户发现感兴趣的内容时。尽管这通常不是最常见的模式，但记住这一点很重要，因为每当用户发现一点感兴趣的内容时，他/她就会倾向于切换到这种模式。这意味着用户可以从不同的图形开始，然后切换到 Z 图形，再返回到原来的图形。

F 形图案

F 读取图案通常由两个水平条纹和一个垂直条纹组成。F 也可以代表快速，因为这是用户在匆忙模式下使用的典型模式。

这种模式由三种眼球运动组成:

1. 用户在内容区域的上部水平移动阅读。这个元素构成了 F 的顶栏。
2. 然后，用户将页面向下移动一点，并在更短的第二次水平移动中开始阅读。这个元素构成了 F 的下横杠。
3. 用户在垂直移动中扫描内容的左侧。这个元素构成了 F 的垂直词干。

在这种模式下，用户的阅读模式并不总是恰好由三部分组成，也不总是像字母 F 一样，但是即使有不同的变化，我们也可以很容易地识别出该模式。

图 4–27。 苹果支持页面中的 F 形图案。

任何熟悉面向对象编程的人都可以看出，F 读取模式就像超类，不同的用户行为就像超类的不同实现。

F 形图案的含义

F 模式的含义表明，为了优化用户体验，在设计阶段遵循指导方针是多么重要。这些影响如下:

• 用户不会逐字逐句地通读内容
  穷尽式阅读很少见，尤其是在互联网研究期间。一些用户可能会阅读你的大部分内容，但大多数人不会。
• 最重要的信息必须在前两段陈述
  这是唯一能让用户真正阅读内容的方法。多读第一段可能会让用户更深入地理解内容。
• 以承载信息的词语
  开始段落，这是因为“F”字形的主干比顶部的横条更难抓住用户的注意力。在这部分模式中，用户只阅读段落的第一个单词。
• 在左侧插入用户界面最重要的链接
  F 模式从左到右降低用户注意力；用户界面最右边的链接不太可能被注意到。

关于阅读模式的一个重要因素是它也可能受到浏览环境的影响。如果用户寻找包含数字的东西，例如价格，F 模式可以转换成“E”或“Comb”模式。

阅读模式中的图像

图像是网页设计的强大工具。通过使用正确的图像，你可以解释一个概念或唤起一种感觉，从而提高用户体验的水平和向用户传递正确信息的可能性。

工具有两种使用方式，一种是好的，另一种是坏的。使用错误的图片会浪费布局中的空间，迷惑用户，打破他没有建设性目的的阅读模式。

什么能真正抓住用户的注意力，把他吸引到一个图像上？根据诺曼·尼尔森集团的最新研究，用户选择观看的图像具有以下特征:

• 高对比度和高质量
  明快而多彩。
• 裁剪而不是叠加缩小
  必要时适合一个小空间。
• 易于解读和近乎标志性的
  当都不过分详细。
• 与内容高度相关
  到页面的内容。
• 具有磁性特征
  当一个形象充满魅力时。

磁性特征在图像中很重要，但是什么样的图像是磁性的呢？磁性图像包括以下内容:

• 平易近人的笑脸
• 人们看着摄像机
• 性解剖学
• 开胃的食物
• 明确的指示或信息
• 形状动态

在选择你的图片时，你也需要知道用户忽略了什么样的图片。这些类型的图像具有以下特征:

• 低对比度和低质量
• 冷酷，虚伪，或者过于圆滑
• 为空间而忙碌
• 普通的，或明显的股票艺术的人或物体
• 与内容无关
• 乏味的

当你在布局中使用糟糕的图像时，用户会认为它们是他/她浏览内容的障碍。它们改变了用户的阅读模式，吸收了额外的认知资源，并且通常会降低用户体验的质量。

影响阅读模式

关于阅读模式的规则是适用于大多数情况的通用规则。有趣的是，在某些情况下，我们可以使用一些强大的视觉层次来影响阅读模式。

在 Figure 4–29 中，我们可以看到，在某些情况下，强烈的视觉层次会扰乱用户焦点，打破“F”或“Z”模式规则。在这个例子中，一切都是有意设计的，以优化品牌信息而不损害用户的阅读体验。

强烈的视觉层次引导用户从页面标题，通过图像，到突出的页面子标题，最后，到网站的子部分。这些类型的设计技术对于任何想把他们的设计技能提升到一个新的水平的人来说都是很重要的，因为它们可以决定一个好的设计和一个专业的设计之间的差别。

图 4–28。 眼球追踪测试(左)和对应的热图(右)。

正如我们在图 4–29(右图)中看到的，眼球追踪测试通常用热图来表示。热图是数据的图形表示，其中二维表中变量的值用颜色表示。热图为眼球追踪测试表增加了第三个维度，用红色表示大数值，用蓝色表示小数值。

硬币还有另一面。正如斯坦·李所写的“强大的力量也必然带来巨大的责任。”这是真的，因为如果设计师没有意识到这些规则，他将冒无意中改变阅读模式的风险，并通过在页面上加入不必要的信息来损害界面层次。换句话说，访问者可能在找到他们要找的东西之前就离开了页面，因为他们可能认为它不在内容中。

历史笔记:斯坦·李是一位美国作家、编辑和回忆录作者，他将复杂的自然主义角色和完全共享的宇宙引入了超级英雄漫画。

定义:共享宇宙是一个由不止一个作者贡献的虚构宇宙。(来源维基百科)

作为这一部分的最后一点，我们想指出的是，如今用户没有针对触摸屏设备的优化阅读模式，至少没有针对任何大于 iPhone 3.5 英寸显示屏的设备的优化阅读模式。iPad 的 9.7 英寸显示屏将在未来几年内改变用户的浏览习惯，Safari Mobile 打破垂直阅读流的能力也将改变这一点，这使用户能够通过双击或缩放内容从一点跳到另一点。这种趋势很可能会创造一种新的平板阅读流，由许多微 F 和 Z 阅读模式组成。

作为设计师和开发者，你需要注意收集尽可能多的反馈。如今，用户是建立设计下一代触摸屏用户体验的新方法的唯一可靠信息来源。

阅读模式指南

到目前为止，我们已经介绍了 F 和 Z 路径，这是最常见的用户阅读模式。我们看到，在某些情况下，为了实现特定的目标，改变这些模式是非常有用的。

眼球追踪研究揭示了人们如何阅读网站和 Web 应用并与之互动的有价值的信息。我们可以从这些研究中学到一些优化我们界面的策略。

这些策略总结如下:

• 左上角的标识效果最佳
  正如我们在本节的第一部分所看到的，用户多年来一直被训练在页面的左上角寻找特定种类的信息，比如品牌标识。只有闻名世界并立即被用户认可的著名品牌，才有机会打破这一规则。
• 标志下的标语提高了一般页面的理解
  这与前一点有关。当用户看着徽标时，下面的标语会让他更好地理解徽标，并有更好的机会理解内容，他离开页面的可能性也会更小。
• 页面顶部的导航效果最好
  作为主要的导航，水平的导航条比垂直的导航条效果更好。
• 头条必须在 1 秒以内抓住注意力
  你需要以一种快速的方式抓住用户注意力，瞬间切入正题。
• 标题比图片更能吸引用户的眼球
  如果你使用一个强有力的标题，你可以支配任何其他的影响力，甚至是来自图片的影响力。在图 4–27 中，你可以看到为了避免干扰标题“iPod Touch ”,标题的重量比图片轻了很多。
• 纯粹的阅读模式只适合“折叠之上”
  今天，滚动一页不再是 90 年代沮丧和困惑的来源。现在，使用触摸屏设备，用户可以比使用鼠标更快地向下滚动页面。这意味着“折叠线以下”的阅读模式变得更加不可预测。如果你的设计因为用户的某些眼球运动模式而有效，你必须确保你设计的每一个重要元素都在你的 WebApp 的第一个可见部分，在那里用户用更高的关注度来“阅读”内容。
• 用户通常只浏览标题的前几个字
  这意味着长标题不好用。在这些情况下，用户在决定是否继续阅读之前会先浏览前几个单词。因此，用最有趣、最具煽动性的词语放在标题前面是很重要的。
• 人们浏览左侧一列标题
  这与前一点有关。当出现标题或链接列表时，用户将向下扫描列表的左侧，查看前几个单词，以找到他/她感兴趣的内容。用户不必从头到尾阅读每一行。出于我们之前讨论过的同样的原因，你需要在前面插入最引人注目的词语。
• 更大的字体改善用户体验
  如果用户没有被强迫放大和缩小，他/她的挫折感会降低，而用户体验会反过来得到改善。在 iPhone 上实现这种方法并不总是可能的，但是在设计 iPad 兼容的 WebApp 时，这是一个需要记住的重要要求。
• 短文鼓励阅读
  大块的字体看起来气势汹汹，难以阅读。出于这个原因，最好将内容组织成一个想法流，而不是大的、不同的段落。
• 段落间更多的负空间有助于集中用户注意力
  如果用户在你的内容中搜索某样东西，段落间有“足够”的空间会暗示一个着陆点，强调下一段的第一行。
• 对于不熟悉的或概念性的信息，多媒体比文本更有效
  或者换句话说，“一张图片胜过千言万语”阅读依赖于人们对主题的理解。用户对某个主题越不熟悉，如果您使用多媒体消息而不是文本，他/她会理解得越快越容易。
• 阅读模式末尾的行动号召按钮效果最佳
  行动号召按钮的自然位置是在阅读模式的末尾。该按钮可以放置在内容的末尾和/或单个段落的末尾。
• 强烈的视觉层次可以影响用户的阅读模式
  通过给图片或标题添加一些权重和动态，我们可以改变阅读模式的结构。

这些策略中的大多数在桌面和鼠标环境以及触摸屏和手指环境中都有效，因为用户在这个等式中不是变量而是常数。变量是用户用来与软件接口交互的硬件接口。在接下来的段落中，我们将会看到在某些情况下这是如何稍微改变用户体验的。

同样重要的是，在可能的情况下，继续使用这些惯例和习惯进行设计，以提供桌面 PC 用户体验和新的触摸屏用户体验之间的平稳过渡。剩下的就交给时间的流逝和人类的自然进化了。现在，我们准备看看用户界面的设计过程。

用户界面设计流程

这个过程包括一些你已经在第二章中看到的步骤。你通过规划界面来开始这个过程。你勾画出它的结构，研究用户和界面之间交互的层次和类型。您创建界面的美感，并最终为开发阶段生成可交付成果。如果您还记得在第二章中介绍的信息架构过程，您将顺利地完成以下阶段。

研究

研究阶段经常被误解和忽视；有时是因为我们的预算很少，有时只是因为它比流程中的其他阶段更不明确。

尽管如此，事实是，没有良好的研究，你不能真正理解你的界面的需求，或者对你的市场竞争对手以前做了什么有一个想法。更糟糕的是，你不清楚你想要的界面交互的层次和类型。

正如您之前在第二章中看到的，在此阶段收集的信息对于最终结果至关重要，这一点上的错误会极大地影响整个过程。

结构

设计我们的接口结构时，您需要考虑两种情况:

• 活动界面
  基于活动链接的界面——例如导航栏
• 被动界面
  基于被动负空间的界面——例如，页面布局

首先，使用负空间的概念设计被动界面，选择哪些布局区域将填充一部分内容，哪些将保留空白。如你所知，由于认知和互动的原因，负面区域在我们的布局中很重要。

一旦你定义了布局的正负空间，你就可以开始设计活动界面并勾画其内容结构。upi 使用的工具是一个流程图，然后是一个网站地图来规划活动界面的内容。

为了与我们的内容输出方法保持一致，一旦你对界面的内容有了清晰的想法，你就开始组织它的视觉结构。视觉结构是用线框和纸原型绘制的。

审美

一旦你知道了界面的结构，你就可以深呼吸，记住感知的规则，享受下一步:设计界面的美感。这通常是每个设计师最满意的部分。对于这一步，您使用您首选的图形设计程序。在下一节中，我们假设您将使用 Adobe Fireworks，但这取决于您的选择。重要的是要记住，处理界面的美学部分意味着处理设计风格和排版。

互动

一旦界面的结构和设计达到了你的审美要求，你就需要致力于它们与用户的互动。在这个阶段，使用序列图来开发用例，并使用电子原型在真实环境中测试它们。如果你需要为你的界面开发一个简单的用例，没有复杂的上下文，你只是想知道“用户会做什么”，你可以使用用例图，既省时又省力。致力于界面的交互意味着致力于导航元素、表单元素、音频和视频元素以及基于负空间的被动界面。

交付物

当你的交互设计工作的艺术部分完成后，你需要为下一阶段的开发制作可交付物。为了完成这个过程的最后一步，你需要设计构图、电子原型和风格指南。

设计构成

设计构图是展示整个界面的艺术品，由主动和被动界面组成。该交付件也用于向客户展示项目的状态，因为它是最终成为你的 WebApp 的一张图片。

电子原型

电子原型是我们基于 HTML5、CSS3 和 Javascript 的设计的交互版本。我们在互联网上有几个可用的框架，可以帮助我们开发我们的电子原型，而不用浪费太多时间。在本章的最后一段，你会发现界面设计过程中使用的工具。

风格指南

通过设计风格指南，你可以确保品牌将进入下一个发展阶段。样式指南就像页面模板，设计者在其中展示如何将设计的某些部分应用于页面，而不考虑可变内容。

如果你是一个独立的设计师和开发人员，你可以跳过一些可交付的东西，比如设计构图或电子原型，但是我们仍然建议你制作一些风格指南，以防你将来需要回到你的项目。样式参考线帮助您避免因忘记项目的信息、样式或其他细节而可能发生的错误。

图 4–29。 将移动信息流程应用于界面设计流程。

正如您可能注意到的，我们应用了我们在移动信息架构过程中使用的相同过程。事实上，界面设计过程是移动信息架构过程中的一个小循环，并且基于相同的模式。

在下一节中，我们将实现界面设计流程，并为 WebApp 设计一个 iPhone 和 iPad 兼容的布局。

iPhone 和 iPad 兼容的用户界面设计

要使 WebApp 兼容 iPhone 和 iPad，它必须满足苹果设备兼容性的第一级要求。正如你在第三章中看到的，为 iPhone 和 iPad 做好准备并不意味着拥有 HTML5 和 CSS3 兼容的布局；这意味着它是以面向触摸屏的方式设计的。

从 iPhone 开发的角度来看，这个问题不太重要，因为尽管 Safari Mobile 在过去三年中彻底改变了移动浏览体验，但为了让用户体验到与 WebApp 的优化交互，需要一个真正的原生布局。出于这个原因，如果一个 WebApp 没有针对 iPhone 进行触摸屏优化，也不是一件坏事。兼容版本不是 iPhone 的主要信息来源，因为在大多数情况下，相同布局的原生版本也会发布。

当我们使用 iPad 时，情况发生了变化，因为 9.7 英寸的显示屏提供了 1024768 像素的分辨率。这意味着兼容的布局可能是 WebApp 移动战略的合理选择。类似 iPad 原生版的布局总是能为用户提供最好的用户体验，但对于 iPad 来说，兼容版本仍然能提供次好的东西。

现在，让我们(重新)设计一个面向触摸屏的苹果官方网站，同时确保应用前面介绍的所有原则。苹果网站设计得很好。从美学的角度来看，它是无可挑剔的，到目前为止，我们已经在几乎所有的设计示例中使用了它，尽管事实上它并不是非常面向触摸屏，也没有尽可能地进行认知优化。

研究

研究阶段基于许多技术，从简单地使用搜索引擎寻找竞争对手到先进的市场研究技术。在这个阶段，您使用流程图和站点地图，以便对内容及其部署有一个直观的表示。

研究阶段旨在了解三点:

• 竞争对手对比
  确定实际设计与竞争对手相比有多大不同。这是一项广泛的研究任务，涵盖从品牌到市场预测的许多领域，比较从提供的服务到用户体验的一切。
• 弱点研究
  找出设计结构中的弱点。
• 设计的改进
  确定改进实际设计的方法。

在研究苹果网站用例时，我们忽略了竞争对手的比较，因为苹果品牌是市场上最漂亮、最实用的品牌之一，不需要改进。在这个用例中，我们直接进入要点 2:弱点研究。

当我们从可用性，尤其是触摸屏可用性的角度来看待事物时，情况就不同了。弱点研究告诉我们的关于苹果网站的第一件事是，它的三栏布局结构还有待改进。

这个结构由一个主要的内容区域组成，它的两边都有一个窄的侧栏。三栏结构过去是，现在仍然是博客和在线商店的流行选择。世界上最著名的两家商店就是基于这种布局:苹果商店和亚马逊。

图 4–30。Amazon.com 使用的三栏布局结构。

从逻辑的角度来看，三栏布局似乎是一个不错的选择，因为它使我们能够隔离三种不同的内容。在博客中，通常在左栏有一个菜单或各种与网站相关的链接，在右栏有各种各样的广告。

近年来，许多博客已经将它们的结构转换成更实用的两栏布局，但同样的事情并没有发生在大多数在线商店网站上。在两栏布局中，我们通常在左栏显示主菜单和其他与网站相关的链接，在右栏显示带有一些促销横幅的购物车。

我们可以将三栏布局的优点总结如下:

• 对称会令人愉悦
• 三列提供了三个不同的内容区域
• 居中的主要内容有助于用户关注它

以下是三列布局的缺点:

• 对称不利于视觉内容的层次结构
• 对称性消耗了用户更多的认知资源
• 两个侧边栏会引入视觉噪音，分散内容的注意力
• 三栏布局使阅读模式不可预测

除了这些布局问题，当用户需要使用像 iPhone 这样的小屏幕设备与活动界面进行交互时，也缺乏可用性。在这种情况下，用户经常不得不使用缩放功能来增加内容的可读性。

用 iPad 浏览是一个不同的故事，因为拥有 9.7 英寸显示屏的 iPad 用户可以同样好地浏览兼容的和类似原生的 web 应用。在这种情况下，用户对兼容内容和类似原生内容的可用性有很高的期望。

图 4–31。 用户必须放大才能与侧边栏的链接进行舒适的触摸互动。

正如我们在前一章中建议的，链接必须是手指友好的，可触摸的，而不强迫用户使用缩放功能，因为缺少负空间会增加触摸错误点的风险。在结构阶段，我们看到如何在当前用例中克服这个问题。

通常在研究阶段结束时会产生一份报告。通常这份报告是用来给客户看的，但在这种情况下，它仅供我们参考。我们可以将研究阶段的结果总结如下:

• 网站信息
  苹果专卖店(www.apple.com
• 强点
  利用版块模型页面
  利用视觉层次
  品牌和身份
• 弱点
  三栏布局结构
  大部分活动界面不支持触摸
• 改进点
  两列布局结构的使用
  主动界面上被动负空间的使用

现在我们已经收集了所有的信息，我们对项目中什么可行，什么不可行有了更好的了解，我们准备进入下一步:(重新)设计。

结构

研究阶段告诉你关于设计你需要知道的一切，因为你开始知道它的弱点和如何改进它们。第一步是使用两列布局的线框技术来绘制结构草图，但重要的是要记住您想要实现的目标。

结构阶段需要实现以下目标:

• 提供更好的布局结构
  两栏布局为呈现和查找内容提供了更好的结构，使用户能够节省有限的认知资源来理解内容，而不是寻找内容。
• 提供一个触摸友好的界面
  使普通用户无需使用缩放功能即可浏览内容，提高了用户体验水平。

在下一节，我们将看到如何实现这些目标，设计一个触摸友好的布局，然后致力于触摸友好的排版。

触摸屏布局

此时，您需要记住现有设计的优点，并保持结构中的一切正常工作。你应该保持原来的块结构，因为它非常适合任何一种具有缩放功能的触摸屏设备，并且以这种方式工作，你就不必改变每个内容块之间的被动负空间。

图 4–32。 新 iPad 的两栏布局结构基于旧网页的三栏布局。

在图 4–34 中，我们可以看到，从上到下，我们没有触及 980x38 像素的主导航栏(图 4–34，数字 1)，同样也没有触及这个导航栏和面包屑栏之间的空间。

我们采用面包屑栏，在不改变其 30 像素高度的情况下，我们将其转换为 980 像素的二级导航栏(Figure 4–34，Number 2)，添加了几个链接到各种 Apple Store 实例。

图 4–33。 新的两列布局结构基于旧的三列布局。

我们将主要内容(Figure 4–34，number 3)移到了左边，并保留了 8 像素的装订线。我们以语义方式合并了两个侧栏。我们没有将它们并排放置，而是将每个侧边栏及其内容分组到一个由两列框组成的侧边栏中。使用这个框，用户可以很容易地一目了然地找到关于主题的信息，而不用像在旧设计中那样向下滚动。

在侧边栏中，我们将框标题(图 4–34，数字 7)的高度从 24 像素增加到 32 像素，子标题行(图 4–34，数字 8)的高度从 24 像素增加到 30 像素。我们还改变了侧边栏框内的排版，这将在接下来讨论。

触摸屏排版

到目前为止，你已经尝试通过增加结构的不同高度来为用户的手指创造一个更舒适的空间，直到你达到 30 像素的最小高度。如第三章所示，考虑到用户的平均手指尺寸，30 像素的目标是非常安全的。如果有机会，你可以在我们的布局中为每个单独的空间设置 40 像素的下限，但在这种情况下，如果不引入打破设计的光视觉平衡的风险，这是不可能的。

从上到下，我们改变主导航栏中的字体大小(图 4–35，编号 1)，将值从 12 像素增加到 14 像素，在次导航栏中(图 4–35，编号 2)，将值从 10 像素增加到 12 像素。

图 4–34。 (重新)设计新的两列布局结构的顺序。

在侧边栏主菜单中，我们将字体侧边从 14 像素更改为 16 像素，并将左栏的行高设置为 20 像素(图 4–35，数字 5)，将右栏的字体大小设置为 14 像素，行高为 18 像素(图 4–35，数字 6)。

在侧边栏标题中(Figure 4–35，number 7)，我们将字体大小从 12 像素增加到 14 像素，行动号召圈的大小从 13 像素增加到 16 像素。在侧边栏框的内容列表部分(图 4–35，数字 9)，我们将字体大小从 10 像素增加到 12 像素，并将行高设置为 20 像素。

审美

设计的审美部分也差不多；我们想改变一些东西，以便它们在新的结构中更好地工作。

我们将呼叫中心图标集成到侧边栏主标题中(图 4–35，编号 4)，并且在将侧边栏主标题从页面左侧移到右侧后，我们移除了搜索引擎框，以避免设计中的冗余。在(重新)设计的右边部分，侧边栏主标题位于主导航栏之下，主导航栏已经包含了自己的搜索引擎框。

图 4–35。 前(左)后(右)的(重新)设计。界面更易访问，对手指更友好。

侧边栏主标题中的呼叫中心图标(图 4–35，数字 4)使用了我们在图 4–10 中看到的相同技术，用于在视觉层级中创造优势并吸引用户的注意力。图标占据了侧边栏主标题和次级导航栏之间的一些空白空间。

互动

到目前为止，我们所做的是为了保证一个触摸友好的交互，在大多数情况下，不需要使用任何缩放功能。增加字体大小值、重置行高值和增加侧边栏中的行间距使用户能够触摸每个链接，而不会有点击错误位置的风险。这些简单的变化对用户体验的质量产生了巨大的影响。

图 4–36。 (重新)设计的 Pad 界面现在为用户提供了舒适的触摸交互。

一旦所有的接口都准备好被测试，你需要开发一些用例，然后使用序列图或者用例图来实现它，如果我们处理低复杂度的情况。图 4–35 展示了两个用例的用例图:购买新 iPhone 和搜索新 iPhone。

图 4–37。 一个表示用户界面交互的 UML 用例图的例子。

请注意，用户图标不是标准图标。我们使用这个图标有两个原因。首先是因为，在可能的情况下，我们在工作时总是试图不冒犯我们的眼睛，因此我们避免了那种通常被当作标准的“我们是个人电脑”风格。第二是因为这些图仅供我们自己参考，或者至少供我们的小团队参考。如果我们需要与我们的团队分享我们的图表，或者当我们为一家大公司工作时，我们必须使用标准符号。

下一步是使用电子原型测试用例。为了做到这一点，我们需要使用 HTML5、CSS3 和 Javascript 框架。通过使用电子原型，我们可以对我们界面的真正手指友好功能有一个现实的想法。如果由于某种原因，我们必须在没有时间或预算的情况下继续进行任何电子原型测试，我们必须确保至少用纸质原型进行一些快速测试。

交付物

当交互阶段完成时，我们需要为过程中的下一个阶段准备可交付成果:实现。如果你是独自工作，只有当你需要在项目发布几个月后回到项目中时，可交付成果才是有用的，这样你可以一眼就记住关于你的设计的要点。当你在一个团队中工作时，你必须确保你的可交付物“为我们说话”，并且清楚地展示你的设计，避免在开发人员的头脑中有任何可能的怀疑。

如前所述，你产生了三种可交付物:设计作品、设计风格指南和电子原型。设计组合，顾名思义，显示了您的设计的组成，设计风格指南使用模板显示了如何将我们的设计应用于各种类型的页面。如果你有一个重要的信息要传递，你也可以分析，解释，或突出你的设计的一个特定部分，添加注释和描述。电子原型以互动的方式展示了设计是如何工作的。我们和开发人员在实现的启动阶段使用相同的原型。

iPad 原生式用户界面设计

设计一个 iPad 版本的网站和 Web 应用并不重要，因为你正在创建 iPhone 版本。如果兼容版本具有触摸屏优化结构并提供高质量的用户体验，最重要的是首先将精力集中在设计 iPhone 版本的内容上。

iPad 的浏览功能使用户能够通过任何桌面内容获得高水平的用户体验。然而，为 iPad 用户开发一种类似本土的体验应该永远是你的首要任务。类似本机的结构总是提供更高级别的用户体验。

在不久的将来，你将会看到许多类似 iPad 的 WebApps，所以我们建议你不要忽略这个选项，但是一定要把它包含在你的项目路线图中。

研究

当您执行兼容版本的研究阶段时，您正在同时处理我们计划的所有版本。这是因为我们在其他 iPad 版本和后来的 iPhone 研究步骤中重复使用了我们的研究结果。这样，我们优化了预算，节省了资金和时间，并在流程中摊销了固定成本。

市场研究告诉我们，我们的内容的哪一部分应该插入我们的 iPad 版本，哪一部分最好留给兼容版本。

结构

当你在本地版本的站点或应用上工作时，你不能像以前在兼容版本中那样重新设计结构。兼容版本专注于改进结构，以提供手指友好的用户体验。这里，重点在于如何根据类似本机的结构来区分内容的优先级。

如何对你的内容进行优先排序是一个依赖于市场研究的选择，而不是由设计师决定的。当研究阶段已经确定了哪些部分的内容要包含，哪些部分要留给桌面版，只有这样你才能开始组织原生式的布局。

与 iPhone 原生版本相比，iPad 原生版本可以提供很大一部分桌面内容，在某些情况下，它可以包含所有桌面内容。当这种情况发生时，我们的工作只是给它一个类似原生的优化结构，而不必削减任何东西。

图 4–38。iPad 原生两栏布局结构及其(重新)设计顺序。

如图 4–39 所示，从上到下，从左到右，你将商店菜单(图 4–39，数字 1)插入顶部位置，以使用户能够从他/她的第一次触摸中选择一个上下文化的路径。

紧接着，我们插入选项来更改商店及其配置(图 4–39，数字 2)，然后我们插入选项来直接访问服务支持(图 4–39，数字 3)。

主内容与侧边栏中的链接无关，它显示了英雄形象(图 4–39，数字 4)，在它的下面，是所有入门级产品(图 4–39，数字 5)，带有指向它们特定页面的链接。这个区域与兼容的和原始的设计完全相同，因为它是整个站点中对手指最友好的部分。

审美

iPad 的原生结构在内容栏中提供了大量空间。主要目标是与强大的品牌美学保持一致，并能够提供优化的结构。在 iPad 版本中，这很简单，因为我们只需要将其缩放到内容栏大小，工作就完成了。这一次，9.7 英寸 iPad 显示屏提供的空间让我们的工作变得简单了。

图 4–39。 我们 Apple Store 用例的 iPad 原生(重新)设计。

在内容栏(Figure 4–40，number 4)中，从上到下插入英雄图像，该图像在兼容版本中起到介绍页面的作用。正如我们所说的，风格与您在原始版本和兼容版本中看到的完全相同。

在英雄图像下方，插入入门级产品盒。每个产品都有其可触摸的整个可视区域，就像在内容栏中插入另一个菜单一样。通过这种方式，我们可以在商店菜单中插入必要的条目(图 4–40，数字 1)，减少用户体验中的认知噪音。

互动

在这个阶段你需要做的是测试你的界面的一致性，看看使用这些界面的用户是否能够访问他/她正在寻找的特定内容。我们可以基于最重要的用例建立一些初步的测试来检查用户界面的一致性和用户体验的质量。

图 4–40。 (重新)设计的 iPad 原生界面提供了目前最高水平的用户体验。

使用类似原生结构的最大优势是，您的内容有一个坚实的基础。然而，这并不能阻止我们插入错误的内容，错误的链接，或者使用错误的排版。我们必须注意这些细节，因为它们正是我们在这个阶段测试的内容。

交付物

在流程的最后，您需要根据设计组合、风格指南和电子原型，生成与兼容版本相同的可交付成果。

iPhone 原生用户界面设计

iPhone 原生界面是提供优质用户体验的唯一方式，因为原生界面是优化 3.5 英寸内置 iPhone 显示屏使用的唯一解决方案。不幸的是，苹果商店提供了令人难以置信的大量内容，因此在这个例子中，优先级迫使我们做出一些艰难的决定。

当你对内容进行优先排序时，就像你在每个移动 Web 应用中必须做的那样，你会被迫删除一些重要的部分。这是撰写本文时苹果网站的 iPhone 版本尚未开发的主要原因。你可以做的是对其内容进行优先排序，如果用户正在寻找 iPhone 版本所不提供的东西，就提供一个桌面版网站的链接。

研究

关于 iPad 研发过程中的研究阶段的说法仍然适用于兼容版本。在 iPhone 界面设计过程中，研究阶段更迫切地需要解决内容优先级的问题。我们只使用最重要的内容，就像我们对 iPad 版本所做的那样，我们甚至可能改变展示顺序。

一旦市场研究告诉你你的内容的哪一部分将被包含在你的 iPhone 版本中，是时候进入下一步了。

结构

在 iPhone 原生版本上工作，正如在 iPad 原生版本上所做的那样，我们不能改变结构，因为该结构是原生解决方案的优势。正如你在第二章中看到的，iPhone 采用了一种叫做“iPhone 页面模型”的结构。

结构阶段旨在实现以下目标:

• 将原始品牌应用到 iPhone 页面型号
  在兼容版本和 iPhone 版本之间建立联系非常重要，这样可以确保品牌贯穿整个设计。
• 提供内容的优先部分
  如果我们想要保持高质量的用户体验，你不能把你所有的内容都插入到 iPhone 页面模型中。你需要区分内容的优先次序，选择最重要的部分，剩下的部分留给兼容的版本。
• 使用合适的链接结构
  合适的链接结构能让用户以一种舒适的方式访问你的内容，即使有大量的信息。
• 为用户提供方向
  在移动环境下，用户很容易在我们的站点地图内迷失方向，当有大量内容时这种概率更大。

你所做的，甚至比你在 iPad 原生版本中所做的更大程度上，是为你的原生结构优先化你的内容。这一次，用户只能看到内容中最重要的元素。如果需要，桌面版本的链接会引导他/她找到其他部分。

注意:我们总是尽量避免深度移动网站地图，因为(移动)用户很容易迷失方向。当出于某种原因，你别无选择时，重要的是使用适当的导航结构，并使用面包屑或其他技术清楚地显示导航路径，如第二章所述。

从上到下，我们找到了品牌区域(图 4–43，数字 1)，在这个区域中，我们设计了面包屑，以便为用户提供方向。从语义上来说，品牌区域还包含下面的部分，称为“英雄形象”(图 4–41，数字 2)。英雄图像直观地表示了页面的主要信息，并且在用户每次加载页面时会变成其他图像之一。在这种情况下，您有三个可用的英雄图像。

图 4–41。iPhone 原生的一栏式布局结构及其(重新)设计顺序。

在品牌区域下面，您设计内容区域，采用边到边导航(Figure 4–41，number 3)，只有三个基本选项。因为 iPhone 版本是自动加载的，所以您需要给用户切换回兼容版本的能力，或者如果他/她需要，直接访问支持页面。如果用户需要进入商店，他可以触摸第一个链接，商店主页就会加载。

注意:在现代网页设计中，你总是试图避免介绍页，但在这种情况下，我们保留了原始设计的结构，使用介绍页来提供一个大的视觉信息。

在页面的末尾，有站点信息部分。你使用苹果在移动页面中使用的相同方法，像极简主义的 MobileMe，只插入苹果标志，没有任何补充信息。

审美

当我们在一个移动版本的网站上工作时，比如苹果商店，这个网站有很强的品牌，很多性感的视觉吸引力和很棒的设计，审美阶段成为工作中最容易的部分。在这种情况下，我们需要做的只是保持桌面网站的外观和感觉，并在不破坏它的情况下适应较小的屏幕。

类似原生版本的(布局)规则甚至比 iPad 版本更严格。这里几乎没有空间来进行花哨的设计，但是感知法则仍然帮助我们为你的用户提供更好的视觉层次和令人愉快的外观。

图 4–42。 我们 Apple Store 用例的 iPhone 原生(重新)设计。

品牌区域保留了为 iPad 兼容版本设计的侧边栏主标题(图 4–35，编号 4)的样式，面包屑位于其下方。我们总是在品牌区域插入英雄形象。下面，我们将相同的样式应用到内容区域。

通常，设计师不会在 iPhone 版本中使用太多空间来显示图像，因为 3.5 英寸显示器中有限的可用空间通常被视为需要解决的问题，而不是机会。通过这种(重新)设计，我们希望打破这一规则，我们很高兴地报告，由苹果开发的最新(原生)应用 Apple Store 使用了相同的方法。

互动

如果美学阶段受到类似本机结构的严格布局规则的限制，则相同的规则使交互阶段的工作更容易，因为它们提供了一些专门开发的标准结构，使用户能够与移动设备进行舒适的交互。

图 4–43。 (重新)设计的 iPhone 原生界面提供了现在最高水平的用户体验。

正如我们对 iPad 版本所做的一样，我们只需要测试对类似原生环境所提供的接口的正确使用。如果用户触摸一个链接想要访问一个特定的信息并且成功了，这意味着你的界面工作正常，你做得很好。如果这不起作用，您可以尝试插入不同的接口部分，就像您可能在拼图玩具中插入不同的部分一样，直到一切都正常工作(至少在测试上下文中)并且您已经创建了一个语义正确的结构。

可交付成果

在流程结束时，如果您在项目中创建了兼容的 iPad 和 iPhone 版本，您可以选择将所有可交付成果一起发送给开发团队，但这仅在处理小项目时才可行。对于一个更大的项目，在可能的情况下，在团队的不同部分之间创建某种并行的工作流总是更可取的。

用户界面设计工具

本章中使用的工具包括应用和 web 应用两种类型。Table 4–3 列出了一些你可以用来设计下一个用户界面的有用工具。

总结

在这一章中，我们介绍了界面设计过程。您已经看到，为触摸设备设计意味着采用不同的界面设计理念，因为每种设备都为用户提供缩放功能，因此一切都变得可触摸，一切都变成了界面。

我们引入了一个新概念，定义了触摸屏设计过程中的主动和被动界面，并了解了如何使用它们来优化 WebApp 内部的结构。

按照这种新的方法，我们还探索了主动和被动负空间的使用，色彩心理学的基础，以及色彩如何影响用户的情绪。

我们介绍了视觉层次的概念，这是最常见的用户阅读模式，并讨论了如何使用强大的视觉层次来影响这些模式，并在您的设计中实现特定的目标。

在第二部分，我们使用 Apple Store 用例进行兼容设计。我们展示了负空间和触摸导向排版的使用，以优化苹果平板电脑及其 9.7 英寸显示屏的桌面网站的用户体验。在第三部分中，我们使用了相同的方法，但是面向我们的 Apple Store 用例的 iPad 本地版本。始终遵循相同的界面设计流程，我们在第四部分设计了一个 iPhone 版的苹果商店网站。

五、iPhone UI 设计：简单思考

“少即是多……”

卢翼密斯·凡德罗

这一章是关于 iPhone 用户界面设计的。我们将首先介绍设计该界面的基本概念，即“简单思考”，然后看看 iPhone 用户的体验和用户认知资源限制的本质。

在这个简短的介绍之后，我们将探索使用手绘草图技术的草图解剖，并将解释如何用一些有用的工具模拟一个用户界面，比如 Balsamiq。我们将探索 Balsamiq 的界面，并展示如何优化它。

接下来，我们将直接进入 Adobe Fireworks，并解释如何逐个像素地设计用户界面。设计用户界面时，你需要控制所有元素的每一个像素。Adobe Fireworks 为处理像素提供了更好的工具和界面，因为与使用 Adobe Photoshop 相比，它使您能够更稳定地控制用户界面元素，并更容易地移动和修改它们。与 Photoshop 相比，Adobe Fireworks 还提供了更好的导出工具，允许您更好地优化每个图形元素的权重。你在这本书里设计的所有东西都可以用 Adobe Photoshop 来实现，所以如果你愿意，可以随意使用。

在最后一部分，我们将向您展示如何重用您的设计来创建一个用例，并提供用户体验的可视化表示。

用户界面草图

在第四章中，你学习了界面设计流程，看到了一个 iPhone 版的“商店”用例。第四章重点讲述了用于设计令人惊叹的触摸界面的界面设计原则。

在本章和下一章，我们将详细解释我们是如何设计我们的触摸优化界面的。我们还将经历从草图到最终产品的整个创意过程。

想得简单

少往往就是多。因此，“简单思考”是我们 iPhone 设计和开发活动的主题。在前面的章节中，我们建立了基础来更好地理解为什么“简单思考”的概念是优化像 iPhone 这样的小设备上的移动体验的正确方法。

注:主旋律是一个音乐术语，指的是与特定想法相关的重复出现的主题。推而广之，这个词在其他生活语境中也用来指任何一种重复出现的主题、实践或想法。

在接下来的段落中，我们将讨论“简单思考”概念背后的要点，从而将您在前面章节中学到的内容联系起来。

iPhone 是一款移动设备

对于大多数用户来说，iPhone 是在移动中使用的。如果你在家或在工作，有一台台式机、笔记本或平板电脑，你可能不会使用 iPhone。

自从 iPad 发布以来，这个概率就更大了。在 iPad 出现之前，需要使用移动服务的人可能会使用 iPhone。然而，现在这种情况已经发生了变化，已经售出了数百万台 iPads。

为了在旅途中使用 iPhone，用户需要具有简单结构的资源，以允许设备在各种环境中运行。

iPhone 页面模型的本质

iPhone 页面模型是我们所有作品的基本结构。这是一个线性和简单的结构，与 iPhone 完美配合。然而，它不允许设计者和开发者以更详细的方式呈现内容。

使用 iPhone 浏览内容的线性流动非常适合移动环境，坚持这一概念而不试图添加任何桌面或平板电脑使用的技术非常重要。甚至 iOS4 中引入的多任务功能也使用了页面模型，这使得用户可以使用多个应用，尽管一次只能使用一个页面。

iPhone 的局限性

iPhone 基于 3.5 英寸的显示屏，无论 WebApp 的设计或开发有多出色，屏幕大小都是一样的。即使视网膜显示器具有相同的尺寸，可视区域内的用户界面比例也是相同的。这意味着，尽管用户界面元素的可读性更好，但用户体验的水平保持不变。

我们还需要记住，尽管 iPhone 彻底改变了用户体验和浏览移动网络的模式，但它仍然是一款针对移动内容优化的小型手机，硬件功能有限。例如，新的触摸键盘比旧智能手机中使用的 qwerty 键盘有了巨大的改进，因为它可以根据应用的需要而改变，并可以在纵向和横向模式下使用。然而，对于 3.5 英寸的显示器，它将总是被限制在可能的使用案例的子集。

用户认知资源的性质

这个世界上的一切都是有限的，大多数东西都是有限的。事情就是这样。在我们的移动环境中，屏幕尺寸是有限的，可用带宽、提供的服务和 RAM 也是有限的。因此，用户的认知资源是有限的。

因为用户体验是在大脑中诞生和发展的，用户的认知资源影响着他们的 iPhone 体验。意识到这一点很重要。有限的认知资源意味着用户界面必须以一种简单的方式进行优化，我们必须意识到一些环境比其他环境需要更多的认知资源。

最后，我们所能做的就是永远不要忘记列奥纳多·达·芬奇的话:“简单是最后的复杂。”

素描解剖学

草图可能看起来是整个设计过程中很容易的一部分。你拿一支笔和一张纸，你就完成了。毕竟不一定要画西斯廷教堂！然而，事实远非如此。绘制一个视图，在本地开发中被称为，意味着将你的手与你头脑中的创造性部分同步。因为这个原因，像素描这样简单的事情需要多年的练习。

历史注释:现代素描的第一个例子可以追溯到 15 世纪上半叶的锡耶纳，当时马里亚诺·迪·雅各比·德托·塔科拉创作了一套关于民用和军事技术的四卷本素描，名为 De Ingenisis 。

对我们来说幸运的是，画一个视图比其他种类的工程或建筑草图简单；但是，基础是一样的。在勾画用例之前，您必须记住以下几点。

• 快速
  一幅速写必须旨在给人一种印象。
• 直接
  速写使用简单明了的措辞。
• 最少的
  草图只包括传达信息所需的内容。
• 自由
  素描给人一种开放的感觉，因为它由本能的线条组成，而不是紧密、精确的线条。
• 分组
  一个草图在其他草图创建的上下文中是有意义的。
• 建议
  草图并不明确陈述什么，而是探索一个概念，暗示一条设计和开发的道路。

现在你对草图的意思有了更好的理解，第一步是用纸和笔勾画出你的想法。这是重要的一步，因为你的大脑和你的手比和你的鼠标连接得更好。

在草图阶段，您将:

1. 在白纸上画些手绘草图，
2. 创建草图之间的逻辑连接，以及
3. 使用模板重新设计你的手绘草图。

Figure 5–1 显示了在纸上绘制的三个 iPhone 视图。对于这些草图，我们使用了 1:1 尺寸的手工木模板。您可能会注意到，标准的 X 框用于表示所有的图像。这是线框设计的标准做法，但也推荐用于草图设计，以便专注于表示页面结构。关于绘制用户界面的最佳实践的更多信息将在第六章中详述 iPad 用例。

当从头开始一个项目时，在视图之间建立逻辑联系将有助于你阐明你的想法，并使你的设计有条理。把所有的观点打印出来，贴在墙上，和别人讨论你的想法是个好主意。

图 5–1。 “商店”用例的手绘草图。

对于这个用例，您不需要处理逻辑(内容)连接，因为您正在处理一个(重新)设计。进行(重新)设计意味着你已经对桌面版本的内容进行了优先排序，并且制作了一个显示内容结构和关系的优化的 iPhone 站点地图。

图 5–2。 界面设计流程的第一步。

如果您与开发团队合作，并且需要展示您的作品，您可能需要使用模板重新设计草图。图 5–3 展示了如何使用模板重新设计手绘草图。

图 5–3。 使用 iPhone 的 UI 模板重新设计草图。

一旦你用纸和笔画了草图，并用模板重新设计了它，你就可以用工具来构建你的视图了。在下一节中，您将看到如何使用工具将您的原始草图转换为使用 Adobe Fireworks 的最终设计。

使用工具进行设计

当你头脑中的想法清晰时，进入过程的第二步，即使用工具设计你的视图版本。对于我们的项目，我们选择了 Balsamiq 模型(我们在本章末尾插入了本书中使用的所有其他工具的相应网页的链接)。

Balsamiq 是一个 zenware 项目，这意味着它可以帮助你“进入状态”并呆在那里。Balsamiq 是界面设计过程第二步的完美程序(见图 5–4)。

注: zenware 的意思是 Zen 软件，帮助你集中注意力，达到被称为心流的超高效认知状态，并保持这种状态的软件。zenware 的目标是消失，在你需要的时候支持你，但尽可能不碍事。你应该忘记软件就在那里。

这个程序提供了几乎和用铅笔素描一样的速度和粗糙感，但是具有数字媒介的优势。例如，放大容器只是一个拖动操作，重新排列元素不需要重新开始，你的线框将足够清晰，你明天就能理解它们。

图 5–4。 界面设计流程的第二步。

探索 Balsamiq 模型界面

Balsamiq 模型有一个工具栏，您可以从中选择一个元素类别，如下所示。

• 所有
  你可以看到所有可用的元素。
• 大
  你可以看到所有类别中的所有大元素，包括 iPhone 和许多其他图像，如封面流。
• 按钮
  你可以看到所有的按钮，包括 iPhone 的开/关切换开关。
• 常见元素
  你可以看到所有类别中所有的常见元素。
• 容器
  你可以看到所有的容器元素。尽管有一个通用的矩形容器，这个类别对于桌面项目更有用。
• 布局
  你可以看到所有的元素，以便组成一个布局。
• 你可以看到有用的元素来标记你的作品。
• 媒体
  你可以看到所有的媒体元素，包括图标、封面流、图片和视频播放器元素。
• 文本
  你可以看到所有的文本元素，比如标题、导航栏、面包屑、树形窗格以及其他类似桌面的对象。
• iPhone
  你可以看到所有的 iPhone 元素，包括键盘、值选择器、iOS 菜单和提醒框。该类别在图 5–5 中显示。

图 5–5。Balsamiq 样机应用:iPhone 部分。

Balsamiq 范式非常简单。拖放您的元素，修改它，并组成您的模型。Figure 5–6 显示了用于组成“商店”用例模型的一些元素。

图 5–6。Balsamiq 原型范例:拖放和修改。

代表连接

当第一个视图准备好时，复制并粘贴它，以便创建另一个要修改的实例。现在的目标是创建几个并排的视图来表示关系，并给出关于上下文的视觉感受。

图 5–7。 用 Balsamiq 样机进行草图阶段。

图 5–7 显示了三个视图之间的联系。此图显示了“商店”用例中的“转到 iPhone 配件页面”操作。

图 5–8。 统一建模语言(UML)用例图为“转到 iPhone 配件页面”。

一旦你所有的视图和关系都处理好了，Balsamiq 模型的工作就完成了，你就可以使用图形程序来完善你的视图的美学部分了。

使用 Adobe Fireworks 进行设计

在使用 Balsamiq 等工具根据你的草图创作了一个模型之后，是时候进入该过程的第三阶段，并切换到 Adobe Photoshop 或 Fireworks 等图形程序来处理美学方面的问题了。Adobe Photoshop 可能是处理位图的最佳图形程序，但如果您使用许多矢量形状进行 WebApp 设计，并且需要控制、移动、变换或修改像素，Fireworks 是最佳选择。

Adobe Fireworks 比 Photoshop 更加面向 web。位于界面左下角的属性工具就是一个很好的例子。属性工具向设计者提供关于元素的 X 和 Y 坐标及其像素尺寸的持续反馈。属性框在用户界面设计过程中很有用。再比如导出工具；与 Photoshop 中的算法相比，Fireworks 优化算法效果更好，给出的结果也更好。从这个角度来说，Fireworks 甚至比 Photoshop 还要好。

图 5–9。 界面设计流程的第三步。

注意:在下一节中，我们将介绍用于设计“商店”用例的功能。我们显示了所有可以找到的命令，以及圆括号内的键盘快捷键。

我们从《超越 CSS:网页设计的艺术》的作者安迪·克拉克那里学到了这一课。

创作画布

打开 Adobe Fireworks 后，您需要创建一个新文档。选择File New ( N)。

图 5–10。 Adobe Fireworks:创建新文档。

现在用下面的画布大小创建一个新文档。

• 宽度: 320(像素)
• 身高: 480(像素)
• 分辨率 : 163 (ppi)

此画布大小遵循 iPhone 2G、3G 和 3GS 显示功能，但如果您想要使用新的 Retina 显示屏，则需要设定以下画布大小。

• 宽度: 640(像素)
• 身高: 960(像素)
• 分辨率 : 326 (ppi)

图 5–11。 Adobe Fireworks:一个新的空白文档。

在 3.5 英寸的 iPhone 屏幕上，两种分辨率的比例相同。

组织层级

您的设计将在几个级别上部署。为此，首先要做的是创建一些文件夹来组织您的资产并保持您的环境整洁。使用语义方法，创建以下文件夹。

• IOs ui
• 品牌区域
• 内容区
• 信息区
• 背景
• 模板

图 5–12。 Adobe Fireworks:资产文件夹的语义结构。

第一个文件夹名为“iOS ui”，将包含状态栏和底部栏。接下来的文件夹(品牌、内容和信息区域)将包含 WebApp。在这些文件夹下，创建两个级别，称为“背景”和“模板”在品牌、内容和信息区域，再添加两个文件夹，一个叫做“文本”，另一个叫做“图标”

版面设计

首先要做的是添加另一个名为“标尺”的文件夹该文件夹将包含四行，两行用于固定可视屏幕边界，两行用于固定侧面的 10 px 填充。添加标尺后，选择选择矩形工具(U)插入背景层。

图 5–13。 土坯礼花:可视区域和填充标尺。

现在画一个 320×480 像素的矩形。这个矩形将是画布的基本背景色，但更重要的是，它将用于使用 align 函数对齐画布对象。新矩形绘制在背景文件夹内，以便位于 iOS 文件夹的 iOS 界面资源下。

注意:Align 函数是一个相对函数。我们不能只选择一个对象并寻找对齐功能，因为它将不可用。在这个环境中作为一个相对函数意味着你需要传递两个或更多的对象给这个函数来对齐。这是必要的，因为函数会将“某物”与“另一物”对齐

现在，您已经准备好了画布，可以开始添加设计元素了。

界面设计

使用矩形工具，添加以下元素。

• Header Bar

  矩形:45 × 480 像素

  渐变:线性

  颜色:#566E93，#314F7B

• Breadcrumb Bar

  矩形:20 × 480 像素

  颜色:#ffffff

图 5–14。 土坯烟花:品牌推广区。

添加两个条后，通过选择选择文本工具(T)添加文本。文字定义如下。

• Header Text

  字体:Myriad Pro，常规，30 磅

  投影:1 像素实心，#3B4C66，270 度

• Breadcrumb Text

  字体:Myriad Pro，轻半浓缩，12 磅

要在页眉文本中间对齐页面标题，请通过选择修改对齐居中水平( 5)来选择页眉文本和白色背景。

最后要添加的元素是房子图标。手动绘制，定义如下:

• House Icon

  尺寸:14 × 11 像素

  颜色:#2B2B2B

既然品牌区域已经完成，那么就转到内容区域。选择背景级别，并使用矩形工具绘制一个矩形作为内容背景，定义如下。

• Content Background

  矩形:350 × 480 像素

  颜色:# D8D8D8

既然已经定义了灰色背景，选择选择线条工具(N)给内容区域的顶部添加一些光线。该行定义如下。

• Content Area Light

  行:1 × 480 像素

  颜色:#ffffff

图 5–15。 土坯烟花:内容区。

下一步是通过选择选择圆角矩形来插入英雄内容。创建两个圆角矩形，如下所示。

• Hero Content 1
  Rectangle: 190 × 300 px

  颜色:#ffffff

• Hero Content 2
  Rectangle: 190 × 302 px

  颜色:#ffffff

  边框:1 像素纯色#000000

当绘制圆角矩形时，选择两个矩形，调整角的大小，并通过选择修改 展平选区 ( Z)来展平图像。

图 5–16。 土坯烟花:英雄内容区。

注意:在使用柔和的线条边框时，由于抗锯齿的原因，很难有锐利的 1 px 角度边框。因此，当使用 CSS 时，有必要使用一些小技巧来获得与实现阶段相同的清晰边框效果。将英雄内容 1 放在英雄内容 2 之上。因为英雄内容 2 是 302 px 宽，而英雄内容 1 只有 300 px，所以只有一个 1 px 的边框会保持可见。

当英雄内容区域准备好时，插入文本，如下所示。

• Hero Heading

  字体:Helvetica，Bold，22 pt

  颜色:#000000

• Hero Sub-Heading

  字体:Helvetica，普通，12 磅

  颜色:#666666

在这两个标题下面，插入 iPhones 4 图像和三个代表 Hero Carousel 的 6 px 圆圈。

图 5–17。 Adobe Fireworks:内容区的边到边菜单。

在英雄内容之后，基于边到边的结构设计菜单区域。使用圆角矩形工具设计一个矩形，如下所示。

• Menu Area

  矩形:300 × 132 像素

  颜色:#ffffff

  边框:1 像素纯色#000000

菜单的高度是每个菜单项的标准 44 px。文本条目定义如下。

• Main Menu Text Entry

  字体:Helvetica、Bold、16 pt

  颜色:#111111

在每个菜单项的左侧，我们有一个 34 像素高的图标，在最左侧，有一个 6 × 12 像素的右箭头。

注意:与英雄内容区一样，使用柔和的线条边框。这意味着，如果你想获得一个清晰的 1 px 的边界，你需要应用同样的技术，使用两个重叠的盒子。

现在，菜单区域和内容区域的设计已经完成，添加信息区域。像苹果品牌标志一样，这个区域的设计应该是极简主义的，只包含标志，不包含其他任何东西。图 5–18 显示了整个设计，信息区位于底部。

图 5–18。 Adobe Fireworks:底部带有信息区的整个设计。

至此，流程完成。在这个过程中产生的资产被重用，以创建电子原型，用于可用性的初步测试，并为移动信息架构过程中的下一个实现步骤做准备。

重用设计

重用是设计和开发界的一个重要词汇。重用通常既省时又省力，为项目提供了一个坚实且经过测试的基础。这种实践在本地开发中更有用，在本地开发中，可重用代码是过程的基本部分；即使是一小段经过测试的代码也可以节省开发人员的大量精力。设计模式与代码或设计重用实践共享相同的范例，我们在其中识别问题或需求，并提供解决方案或代码/设计/模式。

在我们的设计项目流程中，我们使用为“商店”主页创建的视图来设计另外两个视图，“商店”商店页面和“商店”iPhone 商店页面。我们鼓励您在未来的项目中实现这种重用方法。

图 5–19。 “商店”用例:三个 iPhone 视图。

在我们的过程中，我们重用了为“商店”主页设计的视图，以设计另外两个视图。这有助于给最终的 WebApp 设计一个更具体的感觉。我们设计的其他视图是“商店”商店、“商店”页面和“商店”商店 iPhone 页面。

查看图 5–19，您可以看到主页和其他两个页面之间的一些小差异。这是因为我们想在主页上使用一个更大的基于图片传送带的英雄内容页面来创造优势。由于主菜单中只有三个文本条目，所以能够实现这一结果。这样，英雄内容区和主菜单都在可见区，不需要用户滚动。

图 5–20。 用户界面交互中的“转到 iPhone 配件页面”用例。

首页上，主消息依托英雄内容区；主菜单只提供明显的选项，比如“进店”。在其他视图中，主要信息包含在主菜单中，而(缩小的)主要内容区域只是让用户看一眼就知道他们的页面是否是想要的。英雄内容区也提供一些产品的信息，引诱用户购买。然而，这与用户体验无关，从营销的角度来看，这只是一个次要目标。

一旦你的 WebApp 的所有视图或页面都设计好了，你就可以通过创建几个用例给用户一个可视化的表示，如图图 5–20 所示，或者通过给出一个界面-内容关系的概述，如图图 5–21 所示。如果您需要在进入实现阶段之前检查接口的一致性，这两者对团队的其他成员和您自己都很有用。

图 5–21。 “商店”用例中界面-内容关系的部分表示。

用户界面设计工具

本章中使用的工具包括物理工具和软件应用。Table 5–1 列出了一些你可以用来设计下一个用户界面的有用工具。

总结

在这一章的第一部分，我们分析了界面设计的过程，讨论了草图的剖析和“简单思考”的范例。我们讨论了 iPhone 的局限性、iPhone 页面模型和用户的认知资源如何影响设计风格，并解释了所有这些元素如何成为“简单思考”设计范式的来源。

在第二部分中，我们解释了如何使用像 Balsamiq 样机这样的工具来改进用笔和纸制作的基本草图。我们解释过，您可以开始创建一些内容和界面连接，以创建概念设计的初始视觉表示。

在本章的第三部分，我们告诉你如何使用 Adobe Fireworks 设计用户界面。从创建新画布到界面设计，我们一步一步地处理这个过程。在这个过程的最后，我们引入了重用你的设计来创建另外两个视图或页面的想法，我们建议将界面-内容关系的可视化表示作为实现阶段的可交付成果。

六、iPad UI 设计：反向思考

”。。如果你想创造什么东西，
你一定是什么东西……

约翰·沃尔夫冈·冯·歌德

在前一章中使用 iPhone 用户界面后，现在您将能够开始使用项目的 iPad 版本。当你为苹果平板电脑做项目时，你需要选择是想要一个兼容的用户界面还是一个类似原生的用户界面。没有正确或错误的方法，因为一切都是由项目需求决定的。

在本章中，您将看到如何应用这两种方法。在上一章中，你看到了“简单思考”是设计 iPhone 用户界面的基本概念。现在，您将看到 iPad 设计如何需要视角转换来优化设备功能。

首先，将介绍一种称为“反向思考”的简化新方法，然后您将学习如何从桌面界面设计 iPad 兼容的用户界面，展示项目流程中这一重要步骤背后的原则。

然后，像在 iPhone 章节中一样，你将学习如何绘制用户界面草图，之后，你将学习如何用 Adobe Fireworks 设计它。整个设计过程将分别针对 iPad 兼容版和 iPad 原生版进行介绍。

用户界面草图

在第五章中，你设计了苹果商店用例的 iPhone 版本。在第六章中，你将使用相同的程序，但是你将看到兼容版本和 iPad 原生版本。由于这两个版本分享了大部分 iPad 的原理，但并不完全相同，当其中一个版本特别需要某些东西时，就会被识别出来。

你将使用 iPad，而不是使用 iPhone 来展示兼容版本，因为对于 iPhone 来说，尽可能切换到原生版本会更好，而对于 iPad 来说，这并不总是正确的。

想倒了

这一节的标题并没有说明一切，大概也没有表现出和 iPad 有什么直接的关系。这个标题背后的意思可能听起来像是:继续简单地思考，但是以相反的方式。这定义了一个反向的(简单的)方法。这种颠倒的方法源于这种新设备的中间位置，就在 iPhone 这样的纯移动设备和 iMac 或 Mac Pro 这样的纯固定桌面之间。术语“反转”代表不同的方法，需要相反的方法来实现与 iPhone 版本相同的目标。

在 iPad 原生版中，由于纵向和横向方向背后的新概念，有必要重新考虑您的思维。在纵向模式下，设备呈现一列布局，在横向模式下，呈现两列布局。

图 6–1。 从桌面和移动的角度看简单性的实现过程

这意味着你经常需要对相同的内容使用两种相反的方法来优化两个方向。在横向提供的两栏设计中，您应该使用左(小)栏作为主要内容的支撑。左栏为用户提供了方向，使其更容易浏览复杂的站点或应用内容。

在纵向方向，单栏设计没有这种导航支持，因此，用户必须使用标题中的按钮，以弹出菜单的形式访问左栏。这个事实建议使用第二个 CSS 文件来修改主要内容结构，包括一些设计元素来弥补缺少的左栏。在主要内容里面提供一些导航信息，你将能够通过弹出菜单减少对左栏的访问，增加用户体验的质量。

在 iPad 兼容版本中，重新分解是必要的，因为您将在桌面版本上工作，但您需要应用移动(触摸)环境中的一些规则，以便优化用户触摸体验。在 iPad 出现之前，桌面和移动规则存在并应用于两个不同的世界。在这种新的设计风格中，你将合并两种类型的方法，比如桌面和移动，使用一个基于简单概念的公共背景。在 iPad 问世之前，这两种方法指向相反的方向。

从混沌理论中可以了解到，有时在设计阶段将事情简单化需要更复杂的程序。正如您将在下一节中看到的，有时您需要添加特性来降低复杂性并使模式更简单。

颠倒的简单

你怎么能用简单来指向一个方向，为了实现你的设计目标，而指向相反的方向呢？这种概念的例子是对内容进行优先排序(移动方法)，保持类似桌面的结构(桌面方法)，或者用桌面结构(桌面方法)和面向移动的结构(移动方法)来呈现内容。每种情况都是两种方向相反的力的例子。

现在你会再一次看到，简单的概念是如何成为明显不同的事物之间的一个基本的共同因素，你会看到你的设计目标影响这些相反的力量指向同一个方向。

注:简单性理论是一种认知理论，旨在解释某种人类与环境的互动对人类思维的吸引力。这个理论声称有趣的情况对观察者来说比预期的要简单。这一理论的一个众所周知的实现是奥卡姆剃刀(来自英国逻辑学家和神学家的名字，和方济各会修士，奥卡姆的威廉)。

从认知的角度来看，简单性是一个领域的属性，只需要很少的信息就可以详尽地描述。简单的对立面是复杂。

谷歌主页是颠倒简单的完美例子——如何以一种非常简单的方式呈现一件非常复杂的事情。正如谷歌负责搜索产品和用户体验的副总裁玛丽莎·梅耶尔(Marissa Mayer)所说，“谷歌拥有非常复杂的瑞士军刀的功能，但主页简单、优雅，可以放在口袋里。”

注:玛丽莎·梅耶尔以优异的成绩毕业于斯坦福大学计算机科学专业，在谷歌搜索和 Gmail 方面有着显著的公众参与，可以认为她对这些 ui 的成功负有高度责任。《财富》杂志将她列为世界上最有权力的 50 位女性之一，也是有史以来最年轻的女性。她被认为设计了谷歌地图、谷歌地球、iGoogle 等等。

谷歌很好的利用了这个概念，苹果也是。它的一体化 iMac 是如何通过简化事情来降低复杂性的完美例子。

在开始勾画 iPad 用例之前，在下一节中，您将看到如何将简单性应用到您的设计中，并应用这个概念背后的一些规则。

删除并优先排序

“移除”听起来很简单，但是想想看——你怎么知道从你的设计中去掉什么呢？这是每个设计师在试图做到简洁时都会面临的主要问题。这个问题引发了三大担忧

• 害怕错过某些东西:设计师担心从设计中删除元素会降低用户找到他所需要的东西的可能性。与这种恐惧作斗争的设计者在没有应用任何内容优先排序的情况下添加了无尽的内容。
• 害怕被误解:设计师担心从设计中删除元素会降低用户理解内容信息的可能性。与这种恐惧作斗争的设计师在并非绝对必要的地方添加了技术信息或许多说明。
• 害怕失败:设计师害怕从设计中去除元素会增加失败的概率。与这种恐惧作斗争的设计师依赖于信息的数量而不是质量。

克服这些恐惧对设计师来说很重要。通过简单的概念，你可以降低你的网站或 Web 应用的噪音水平，这一事实将使有用的内容或功能更加突出。这是每一个伟大(简单)设计背后的基本概念。

下一个问题是，你如何知道你已经尽可能简单地做出了一些东西？不幸的是，这个问题没有答案；除了良好的测试阶段之外，你的经验对你帮助最大。在你的界面设计过程中，好的指导方针应该如下

• 理解设计元素的核心:在网站或 web 应用上下文中全局地查看元素。
• 决定移除元素是否会增加全局设计值:你需要确保移除元素不会破坏设计。

当你移除一个元素时，总是因为你把它看作是拼图的一部分，你决定移除它。如果你在设计中看不到它的全球意义，你将永远没有机会增加你设计的全球价值。

隐藏和塑造

有时无法从设计中移除元素或子元素。在这种情况下，你可以做的是隐藏这些元素，以便将(有限的)用户认知资源集中在最重要的部分，并保持这些元素对第二类用户可用。

记住你的次要用户是很重要的，但是你不想混淆或分散你的主要目标用户对主要设计信息的注意力。这个概念的一个很好的例子是苹果商店网站的产品页面的结构。主产品页面上的信息简洁明了，但是每个产品的顶部都有一个工具栏，让高级用户可以访问硬件细节。

图 6–2。iPhone 4 页面:内容设计中的隐藏与塑造

在图 6–2 中，你可以看到主要目标用户并没有从设计背后的信息中分心，但是高级用户也对所有细节感到满意；请注意，这种策略非常有效，因为高级用户在寻找内容时不会感到沮丧，因为他们不必扫描网站或 web 应用的内容结构。这种用户交互不会发生在新手用户身上。

这一步将极大地影响用户体验的全球水平，因为如果你忘记了一类受众，你将失去大量的潜在用户。想象以下两种情况

• 苹果商店在 iPhone 主页中展示了所有的硬件功能，没有隐藏任何类型的元素或内容——CPU、RAM、Wi-Fi、功能、应用；一切。一个新手用户会迷失在无尽的难以理解的单词列表中，他很可能不会与新手机建立任何形式的关系。这只会意味着一件事:在 90%的情况下，他永远不会买 iPhone 4。
• iPhone 主页只显示手机的基本信息，没有提供具体硬件信息的链接。高级用户可能会认为新手机是给没有经验的用户的，不会满足于通过网页与品牌建立的关系类型，也不会购买新 iPhone。

图 6–3。 苹果支持页面:内容设计中的隐藏与塑造

Figure 6–3 显示了另一个缩小部分内容，同时隐藏经典下拉菜单条目的例子。下拉菜单可以取代设计中的水平菜单。当这种类型的菜单隐藏了一部分内容，同时隐藏了另一个水平菜单中的条目时，Apple Store 在支持页面中使用了这种方法。

这仅仅是以战略方式使用隐藏和形状概念能够真正提高用户体验水平的两种例子。

收缩和分组

有时还会出现一个元素或一部分内容不能被删除或隐藏的情况。典型的情况是当这个元素或部分内容对于次要类型的用户非常重要并且必须快速访问时。在这种情况下，您将使用收缩和分组方法。为了在你的小组中达到完美的组织水平，必须制定一个计划。缩小一个元素或内容的一部分可能意味着在视觉上缩小它的大小，这样做可以减少用户注意力的影响。内容的元素或部分仍然可用，但是它在用户的消息中不再具有主要角色。

图 6–4。iTunes 页面:内容设计中的收缩和分组

Figure 6–4 展示了内容的三个部分对于页面的整体理解是多么重要，以至于不能从设计中隐藏或删除。解决方法是缩小它，把它放在主图片下面，如果需要的话，让用户有机会轻松阅读。在图 6–4 中突出显示的元素中，来自苹果的设计师应用了相似性、接近性和对称性法则。

最后一点，重要的是要记住，对于收缩和分组，有时你需要添加，而不是删除设计中的一个元素或一部分内容。

简单-复杂悖论的要点

到目前为止，您已经看到，通过应用这三个基本概念，您可以在设计中降低复杂性并增加简单性。您还可以看到，在移动环境中，简单性与高质量的用户体验密切相关。

重要的事实是，简单与复杂有着天然的联系，两者都只是发生在我们头脑中的同一事件的两种不同表达方式。出于这个原因，试图用简单来消除复杂是完全徒劳的，因为正如混沌理论对简单-复杂悖论的暗示，复杂模式中包含更简单的模式，它们是更复杂模式的反映。

几个重要的要点:

• 简单不能消除复杂:使用简单的概念，你不能从你的设计中消除复杂；简单需要复杂才能在我们心目中脱颖而出。
• 简单会让你变得复杂:移除、隐藏或缩小设计中的错误元素会增加整体的复杂性。
• 简单是主观的:简单是一种感知，源于用户的想法。你不能假设每个用户都认为你的设计简单。

现在，是时候进入实用部分，开始分析你的 Apple Store 用例的兼容和原生类 iPad 版本了。

描绘用户界面

在这一节中，您将学习如何将三个简单性原则应用到兼容的和类似本机的版本中。从 iPad 兼容版本开始，你可以在图 6–5 中看到草图和最终设计构图的关系。在开发这个版本时，除了手指友好和优化结构以获得轻松的触摸用户体验之外，设计方法与桌面版本相差不远。

应用删除和优先原则，删除特殊交易框和融资选项框。尽管如此，最重要的一步是消除内容的布局优势。

如果用户需要在两个相反的地方寻找重要的信息，他在浏览体验中需要更多的认知资源。众所周知，由于认知资源是有限的，如果导航结构从用户那里拿走了太多的资源，那么只有少量的资源可供用户理解内容。这将降低用户体验的水平。

作为这一步的结果，你将把主要内容放在内容结构之上，把一些导航元素放在其他元素之上。

图 6–5。iTunes 页面:内容设计中的收缩和分组

您应该应用隐藏和形状原则，将软件盒和礼品卡盒从流行的配件盒中隐藏起来。这些盒子将被隐藏，但仍然可以通过使用“更多”中的一个，从新的流行配件盒中一键访问链接。你还应该藏一些 iPhone 和 iPad 的畅销商品；该框将显示前十名中的随机项目，完整的前十名可使用“更多..”列表底部的链接。

您应该应用隐藏和分组原则，将两个侧栏合并并隐藏到一个更大的侧栏中。合并这两列将对导航元素进行分组，因此，您将把用户焦点分组到(仅)布局的一个区域中。与其他设计改进相比，真正改变的是用户体验水平。

在图 6–6 中分析您的用例的原生 iPad 版本，您可以看到与之前的兼容版本相比，该设计方法更加面向移动设备。

这一次，由于可用的屏幕空间有限，与桌面显示器相比，您将以更积极的方式应用删除和优先原则。您需要将商店索引页面中的英雄图像整合到主页中，并仅插入主要内容框作为主要英雄图像信息的支持。

在侧边栏中，您需要根据一个设备和非标准用户改变商店配置文件的可能性，对四个商店选项进行优先级排序，以便将您的购物置于上下文环境中。因为您已经积极地对导航和主要内容进行了优先排序，所以您已经打开了切换到商店的兼容版本的可能性，并且，作为最后的选择，您应该插入一个到客户支持的快捷方式。

图 6–6。iTunes 页面:内容设计中的收缩和分组

第一个原则，删除和优先化，在这种移动方法中占主导地位，隐藏和成形原则以及收缩和分组原则应用较少。一旦你明白了这个事实，你就能够隐藏以下四个选项背后的几乎所有内容，Shop Mac，iPod，iPhone，和 iPad，并且你不需要收缩设计的任何部分，因为你将移除原则应用于一些明智的设计元素。

设计使用工具

草图已经准备好了，这意味着您已经准备好使用 Balsamiq 样机工具，这个工具与您用于 iPhone 样机的工具相同。Balsamiq 样机工具为您的兼容版本提供了一些伟大的设计元素，即使是面向触摸的，也仍然具有类似桌面的结构。原生版本将使用 Adobe Fireworks 设计，因为到目前为止，您还没有任何用于表示 iPad 草图的优化工具。

选择大菜单，并使用浏览器窗口元素来表示您的 iPad Safari 应用，如 Figure 6–7 所示。它看起来并不完全像 iPad Safari 窗口，但它可以满足您的需求:

• Browser Windows

  宽度:1024px

  高度:2000 像素

图 6–7。 Balsamiq 样机:浏览器窗口。

打开浏览器窗口后，选择常用菜单，拖动主导航栏的一个菜单栏元素和次导航栏的另一个菜单栏元素，如下所示:

• Primary Navigation Bar

  宽度:980 像素

  高度:36px

• Secondary Navigation Bar

  宽度:980 像素

  高度:30px

Figure 6–8 展示了如何使用按钮元素来表示搜索引擎栏，从而完成主导航栏。

现在导航区域已经完成，您可以从通用菜单中拖动 Rectangle/Canvaz/Panel 元素，并将其设计如下:

• Content Main Area

  宽度:626 像素

  高度:385 像素

图 6–8。 Balsamiq 模型:主要和第二导航栏和内容主要区域

在内容主区域的下方，是聚光灯区域，可以通过从通用菜单中拖动一个图像元素来绘制，尺寸如下:

• Spotlight Area

  宽度:628 像素

  高度:250 像素

接下来是五线谱选择框。它是使用通用菜单中的对话框/窗口元素绘制的，如下所示:

• Staff Picks Box

  宽度:628 像素

  高度:425 像素

图 6–9。 Balsamiq 模型:聚光灯区域和五线谱选择框

在五线谱 Picksbox 下面，使用 Rectangle/Canvas/Panel 元素绘制附件框，然后使用 Dialog/Window 元素绘制信息框。这两个元素都应该从公共菜单中选择。这两个元素具有以下尺寸:

• Accessories Box

  宽度:628 像素

  高度:215 像素

• Informational Box

  宽度:628 像素

  高度:395 像素

图 6–10。 Balsamiq 样机:配件盒和信息盒

现在，您已经完成了设计中与内容相关的部分。现在，您需要插入与导航相关的区域，并绘制侧栏。使用矩形/画布/面板，绘制侧栏主标题，并为侧栏主菜单添加另一个矩形/画布/面板元素。这两个元素具有以下尺寸:

• Side Bar Main Header

  宽度:340 像素

  高度:80px

• Side Bar Main Menu

  宽度:340 像素

  高度:165 像素

图 6–11。 Balsamiq 模型:侧边栏主标题、侧边栏主菜单和搜索引擎栏

接下来，使用对话框/窗口元素绘制新的存储框。下面新到店盒子，为了设计流行的配件盒子，把两个 Balsamiq 元素结合起来。为流行的附件框标题拖动一个矩形/画布/面板元素，为框的其余部分拖动一个对话框/窗口元素，包括侧栏副标题行，以及侧栏内容列表。

图 6–12。 Balsamiq 样机:侧栏主标题和侧栏主菜单

最后，站点信息区会有很多链接。为了绘制这些链接，选择文本菜单并拖动两个标签/字符串文本元素。使用水平标尺/分隔符元素选择布局菜单。

图 6–13。 Balsamiq 样机:现场信息区

模型现在已经准备好了，可以使用模型导出快照进行导出，然后转换为 PNG 文件。对于原生的 iPad 版本，你需要改变你的方法，因为，到目前为止，市场上还没有一个优化的模型工具。如果你需要模拟一个设计作品，你可以使用 OmniGraffle。但是您需要设计一个草图，最好直接进入 Adobe Fireworks，将草图和设计阶段合并在一个步骤中。这是您将在下一节中为类似原生的 iPad 版本所做的事情。

用 Adobe Fireworks 设计

到目前为止，您已经绘制了兼容的和原生的 iPad 版本，但是您只使用 Balsamiq 样机工具模拟了兼容的版本。在下一节中，您将学习兼容版本的标准设计组合方法，然后学习如何使用类似本机版本的灰色框设计来合并草图和设计阶段。

兼容 iPad 的版本

在这一部分中，您将开始处理兼容版本，然后您将呈现类似本机的版本，两个版本都遵循用于 iPhone 过程的相同过程。

创建画布

打开 Adobe Fireworks 后，您需要使用 File New ( N)创建一个新文档。

图 6–14。 Adobe Fireworks:创建新文档

您的文档应该具有以下画布大小:

• 宽度:768 像素
• 高度:1024(像素)
• 分辨率:132 (ppi)

这块画布，按照 iPad 9.7 英寸 IPS 显示屏，使用 132-ppi 分辨率。请记住，配备传统 LCD 3.5 显示屏的 iPhone 在标准显示屏上使用 163 ppi，在 Retina 显示屏上使用 326 PPI 分辨率。

注:IPS(面内切换)是一种液晶显示技术，它将液晶单元沿水平方向排列。在这种方法中，电场通过晶体的每一端施加，但这需要每个像素两个晶体管，而不是标准薄膜晶体管(TFT)显示器所需的单个晶体管。

虽然智能手机上大多数旧的 LCD 技术都有 35 度的视角，但新的 IPS 显示屏为苹果用户提供了高达 180 度的视角。这项技术可以在苹果 iMac、iPad 和最新的配备 Retina 显示屏的 iPhone 4 中找到。

使用 iPad 的好消息是，你不必像使用 iPhone 那样处理不同的显示分辨率——至少在下一个 iPad 版本发布之前不会。

组织层级

您的设计将部署在几个级别上，因此您首先要做的是创建一些文件夹来组织资产并保持工作环境整洁。

众所周知，iPad 和 iPhone 运行的是同一个操作系统；iOS。这意味着用户界面元素具有不同的宽度和高度，但具有相同的语义，因此工作区的组织级别看起来完全相同，除了一个名为 Safari 的额外文件夹，您将在其中插入 Safari 用户界面资源。

基于语义方法，您将创建以下文件夹:

• ios
• 旅行队
• 品牌区域
• 内容区域
• 信息区
• 背景
• 模板

图 6–15。 Adobe Fireworks:资产文件夹的语义结构

最后一个文件夹是模板文件夹，用于收集某些重要资源的副本，这些资源可用于设计作品的关键部分。

版面设计

现在，您将为设计合成边界添加标尺文件夹。您将绘制四条线，但是这一次，在 Safari 环境中工作，您将没有底部栏，取而代之的是 Safari URL 栏。

在两侧，边界线限制了 15px 的边距，在顶部，iOS 状态栏限制了 20px，在底部，Safari URL 栏限制了 58px。一旦你添加了标尺，你可以添加一个背景层，使用选择矩形工具(U)。

图 6–16。 土坯烟花:可视区域和填充标尺

现在，您将在背景文件夹中绘制一个尺寸为 768 × 1024px 的白色矩形。这个矩形将是画布的基本背景色，正如你在 iPhone 版本中看到的，它还将激活画布对象的对齐功能。

现在你已经准备好了画布，一切都准备好开始添加设计元素了。

界面设计

从顶部开始，您将设计主导航栏(PNB)和次导航栏(SNB)。您将在画布的每一侧留 22px 的边距，在顶部和底部留 20px。将使用选择圆角矩形添加以下元素:

• Primary Navigation Bar

  宽度:980 像素

  高度:36px

  渐变:线性

  颜色:#8484、#CACACA

• Secondary Navigation Bar

  宽度:980 像素

  高度:30px

  渐变:线性

  颜色:# eccec # F7 F7 F7 F7

  边框:1px 纯色#CBCBCB

图 6–17。 Adobe Fireworks:主导航栏(1)和次导航栏(2)

每个主导航栏按钮都有一个固定的尺寸。内容如下:

• Primary Navigation Bar Button

  宽度:100 像素

  高度:36px

  右边框:3px (1px + 1px + 1px)

  高度:36px

主导航栏按钮的右边框由 3px 组成，每个单个像素定义如下:

• PNB Right Border Left Vertical Line

  渐变:线性

  颜色:# 8c8c8c # ce ce

• PNB Right Border Center Vertical Line

  渐变:线性

  颜色:#727272，#B6B6B6

• PNB Right Border Right Vertical Line

  渐变:线性

  颜色:# 8c8c8c # ce ce

接下来，使用选择文本工具(T)添加文本。该文本将定义如下:

• Navigation Bar Text

  字体:Myriad Pro，常规，16 磅

  颜色:#262626

  投影:1px 纯色，#FFFFFF，270 度

• Breadcrumb Bar Text

  字体:大型、常规、12pt 高光

  颜色:#666666

在设计中向下移动，下一个要处理的区域是内容主区域。选择背景级别，使用圆角矩形工具(选择圆角矩形)在内容背景中绘制一个矩形。其定义如下:

• Content Main Area

  宽度:628 像素

  高度:385 像素

  颜色:#ffffff

  边框:1px 纯色#CBCBCB

图 6–18。 土坯烟花:内容主区(3)

在内容主区域下方，为聚光灯区域绘制另一个圆角矩形(选择圆角矩形)。这应绘制如下:

• Spotlight Area

  宽度:628 像素

  高度:250 像素

  颜色:#ffffff

  边框:1px 纯色#CBCBCB

在聚光灯区域下方，为五线谱精选、附件和信息框再画三个圆角矩形(选择圆角矩形)。这应绘制如下:

• Staff Picks Box

  宽度:628 像素

  高度:425 像素

  颜色:#ffffff

  Border: 1px solid #CBCBCB

• Accessories Box

  宽度:628 像素

  高度:215 像素

  颜色:#ffffff

  边框:1px 纯色#CBCBCB

• Information Box

  宽度:628 像素

  高度:395 像素

  颜色:#ffffff

  边框:1px 纯色#CBCBCB

图 6–19。 土坯烟花:聚光灯(4)和工作人员采摘区(5)

每个框的高度在这里并不重要，因为它会根据内容的类型而变化。重要的是，为了保持与桌面版本相同的外观和感觉，要与(通用)内容框标题保持一致。这通过使用以下值来完成:

• (General) Content Box Header

  宽度:628 像素

  高度:24px

  渐变:线性

  颜色:#224272，#5C6F8D

• Informational Content Box Header

  宽度:628 像素

  高度:24px

  渐变:线性

  颜色:#999999，#C2C2C2

(常规)内容框标题中使用的文本如下:

• (General) Content Box Header Text

  字体:大型、常规、12pt 高光

  颜色:#ffffff

图 6–20。 Adobe Fireworks:边栏主标题(9)和边栏主菜单(10-11)

下一步是使用选择圆角矩形工具插入侧栏主标题。您需要创建一个圆角矩形，并满足以下条件:

• Side Bar Main Header

  宽度:340 像素

  高度:80px

• Gradient: Linear

  颜色:#294876，#5B7396，#A9B5C8

  边框:1px 纯色#5E7598

注意:要设计三种颜色的线性渐变，您需要在 Adobe Fireworks 默认提供的两种颜色中添加一种颜色。要添加颜色，只需双击颜色条纹。

侧栏主标题中使用的文本如下:

• (General) Content Box Header Text

  字体:Myriad Pro，常规，30 磅

  颜色:#ffffff

  投影:1px 纯色，#3B4C66，90 度

侧栏主菜单位于侧栏主标题下方。使用矩形工具(选择圆角矩形)绘制圆角矩形，如下所示:

• Side Bar Main Menu

  宽度:340 像素

  高度:165 像素

  颜色:#ffffff

  边框:1px 纯色#CBCBCB

侧栏主菜单中使用的文本如下:

• Side Bar Main Menu Text Right Column

  字体:Myriad Pro，常规，20 磅

  颜色:#333333

• Side Bar Main Menu Text Right Column

  字体:Myriad Pro，常规，16 磅

  颜色:#333333

图 6–21。 土坯焰火:边栏内容列表(14)

侧边栏的底部由另外三个框组成:商店新品、流行饰品和畅销品框。每个箱子都由三部分组成(除了新到商店的箱子，它由两部分组成)，标识如下:

• Side Bar Box Header

  渐变:线性

  颜色:#224272，#5C6F8D

  字体:Myriad Pro，常规，18 磅，#FFFFFF

• Side Bar Sub Title Row

  颜色:#efefef

  边框:1px 纯色#CBCBCB

  字体:Myriad Pro，常规，16 磅

  图标:圆形，16px

• Side Bar Content List

  颜色:#ffffff

  边框:1px 纯色#CBCBCB

  字体:Myriad Light，常规，16 磅

设计的最后一个元素是信息区。该区域未被包裹在盒子内，显示了与以下文本相关的一些一般信息:

• Site Information Area Text

  字体:Myriad Pro，常规，12 磅

  颜色:#999999

• Site Information Area Link

  字体:Myriad Pro，常规，12 磅

  颜色:#0085CF

图 6–22。 Adobe Fireworks:信息框(7)和站点信息区(8)

当您的兼容版本完成时，设计合成也就完成了。一旦一切都完成了，您就可以开始工作了。

iPad 原生版

画布值和工作空间组织与您在兼容版本中看到的相同。您的设计合成设置不会发生任何变化。改变的是画布尺寸，因为你必须从纵向切换到横向。

创建画布

打开 Adobe Fireworks 后，您需要使用文件新建 ( N)创建一个新文档。

图 6–23。 Adobe Fireworks:创建新文档

您的文档应该具有以下画布大小:

• 宽度:1024px
• 高度:960 像素
• 分辨率:132 像素

灰色盒子设计

灰色方框设计将代表你的纸上草图，并将成为你设计作品的基础。这是设计阶段的另一种方法。最终目标是两种方法的设计组合；每种方法都是主观的，由您(或您的团队)决定选择哪种方法。

Figure 6–24 向您展示了您在浏览器窗口的构成中保留了 78px，还向您展示了如何使用矩形工具(选择矩形工具(U))来设计侧栏标题和内容标题。侧栏标题和内容标题应满足以下条件:

• Side Bar Header

  宽度:300 像素

  高度:44px

  颜色:#999999

  正文:Helvetica，粗体，20 磅

  文字阴影:1px 实线，#333333，270deg

• Content Main Header

  宽度:724 像素(723 像素内容+1 像素左边框)

  高度:44px

  颜色:#999999

  正文:Helvetica，粗体，20 磅

  文字阴影:1px 实线，#333333，270deg

图 6–24。 Adobe Fireworks:侧栏和内容主标题

现在已经分配了设计的两个区域，所以您可以开始使用侧栏来添加元素。使用矩形工具(选择矩形工具(U))，添加符合以下要求的九个菜单项和两个菜单标题:

• Menu Entry

  宽度:300 像素

  高度:44px

  颜色:#999999

  下边框:1px 纯色，#ADADAD(最后一个元素#666666)

• Menu Title

  宽度:300 像素

  高度:26px

  颜色:#999999

  上边框:1px 纯色，#CCCCCC

  下边框:1px 纯色，#666666

  正文:Helvetica，粗体，18 磅

  文字阴影:1px 实线，#333333，270deg

图 6–25。 Adobe Fireworks:边栏菜单元素和标题

侧栏现在已经完成，您现在可以跳转到另一栏中的内容主区域。使用圆角矩形工具(选择圆角矩形)，设计英雄框、产品框和站点信息框，如下所示:

• Hero Box

  宽度:644px

  高度:237 像素

  边框:1px 实心，#666666

• Products Box

  宽度:644px

  高度:402 像素

  边框:1px 实心，#666666

• Site Information Box

  宽度:644px

  高度:62px

  边框:1px 实心，#666666

图 6–26。 土坯礼花:英雄箱和产品箱

图 6–27 展示了最终的灰色方框，你将使用它作为你设计作品的基础。由于结构已经在设计阶段形成，您只需要更改元素颜色，添加文本、图标和图像。

图 6–27。 土坯烟花:灰色盒子设计尺寸

下一步是通过组织工作空间并为您的资产创建文件夹来开始设计合成。

组织层级

工作区将使用相同的文件夹、级别和层次结构。基于语义方法，您将创建以下文件夹:

• ios
• 旅行队
• 品牌区域
• 内容区域
• 信息区
• 背景
• 模板

图 6–28。 Adobe Fireworks:资产文件夹的语义结构

版面设计

现在灰色框准备好了，您可以添加另一个文件夹，称为标尺，到您的设计合成边界。选择这个文件夹(图层)，用线条工具(选择线条工具(N))画四条红线。这三行将设置浏览器窗口边界和内容主区域的 20px 填充边界。

图 6–29。 土坯烟花:灰色盒子上有统治者的图案

由于采用了灰盒设计，您的工作现在将变得更加容易。你将不再需要设计任何其他元素，只需要改变它的颜色。从侧栏开始，将元素颜色更改为以下颜色:

• 侧栏区域
  • 背景:#FFFFFF
• 侧栏标题(商店菜单)
  • 渐变:线性
  • 颜色:#294876，#F4F5F7
• 菜单标题(更改商店，获得支持)
  • 边框顶部:1px 纯色，#CCCCCC
  • 底部边框:1px 纯色，#666666
• 菜单项(通用菜单元素)
  • 颜色:#ffffff
  • 上边框:1px 纯色，#F0F0F0
  • 底部边框:1px 纯色，#D1D1D1(最后一项#666666)

图 6–30。 土坯烟花:没有内容的彩色图案

继续内容方面，您将把元素颜色更改为以下颜色:

• Content Area

  背景:#E1E6EB

• Content Box (Hero Box, Products Box, Site Information Box)

  颜色:#F7F7F7

  边框:1px 纯色，#828282

现在内容的一切都准备好了。在侧边栏中，开始在左侧添加文本条目和图标，如下所示:

• Menu Entry Icon & Text

  宽度:“随图标设计变化”

  高度:34px

  正文:Helvetica，粗体，16 磅

侧栏已完成，现在您可以跳转到内容主区域，并在三个框中添加以下文本

• Hero Box

  标题文本:Helvetica，粗体，50 磅，#000000

  副标题文本:Helvetica，粗体，20 磅，#000000

• Products Box

  描述文本:Lucida Grande，粗体，11 磅，#000000

  价格文本:Lucida Grande，粗体，11 磅，#666666

• Site Information Box

  文字:大亮度，Bold，10pt # 999999

  链接:大亮度，Bold，10pt，#0085CF

• Footer Apple Logo

  宽度:“随图标设计变化”

  高度:20px

图 6–31。 土坯烟花:最终仿原生设计构图

除了作为布局结构一部分的菜单图标的尺寸外，图像尺寸与内容的含义有关，可以在不影响整体结构的情况下进行更改。这是没有报告这些设计元素尺寸的主要原因。

设计构图完成。您已经具备了推进项目流程下一个大步骤的一切必要条件；实现阶段。在第七章中，你将开始介绍本书中使用的三种语言:HTML、CSS3 和 JavaScript。

用户界面设计工具

本章中使用的(不是使用而是建议的)工具既是物理工具也是应用。Table 6–1 列出了一些设计下一代用户界面的有用工具。

总结

在这一章的第一部分，你分析了界面设计的过程，并介绍了草图的剖析和“简单思考”的范例。iPhone 的局限性，iPhone 的页面模型，以及认知资源如何影响你的设计风格都被讨论了。还讨论了这三个元素是如何成为“简单思考”设计范例的基础的。

在这一章的第二部分，Balsamiq 原型工具被用来改进用纸和笔绘制的草图。内容、界面连接和概念设计的第一个可视化表示都已创建。

在本章的第三部分，Adobe Fireworks 用于设计用户界面。这个过程是一步一步来的，从创建一个新的画布到界面设计。在过程的最后，引入了从显示的主页创建另外两个视图或页面的设计重用，还引入了作为实现阶段可交付成果的界面-内容关系的可视化表示。

七、WebKit 的 Web 标准：最大化移动 Safari

“不仅仅是它看起来和摸起来的样子..

设计就是它的工作方式。”

—史蒂夫·乔布斯

在这相当长的一章中，我们从移动 Safari 的角度来讨论 web 标准。在第一部分中，我们介绍 HTML5，它的标记语法，它的新标签，以及它如何从 HTML4 重新定义一些标签。我们讨论 HTML5 以及<video>和<audio>标签的语义。我们还引入了<canvas>标签，在这一节的最后，我们展示了一个在“商店”用例中实现的幻灯片演示的实例。

在第二部分，我们来看看 CSS Level3，它的新属性和语法。我们列举了可用于这些新属性的所有值。

在本章的最后一部分，我们将讨论 Javascript 的基础:它的语法、语句、函数和方法。我们还看了浏览器对象模型(BOM)和文档对象模型(DOM ),并展示了如何使用它们来动态改变网页。

注意:本章涵盖了每个技术领域的基础知识，所以如果你对 HTML5、CSS3 和 Javascript 很有信心，可以随意跳到下一章，或者跳到本章的相关章节，复习一下你生疏的领域。

比较 iPhone 和 iPad 的网络演示

如前所述，iPhone 和 iPad 是两种不同的设备。这两种设备的一个共同点是它们的 HTML5 语义结构。

这两种设备的不同之处在于它们如何通过两种不同的 CSS3 样式表和 Javascript 行为来呈现我们项目中的内容。iPhone 基于页面模型范式，而 iPad 基于块模型范式，或者多页面模型范式。

在这一章中，我们来看看 web 标准如何在这些差异背后扮演一个共同的角色，以及如何使用它们来开发更好的网站和 web 应用。

HTML5

物理学家蒂姆·伯纳斯·李于 1989 年开发了超文本标记语言(HTML ),当时他正在欧洲研究组织(CERN)工作。

1991 年，HTML 第一次被公开提及，1995 年，它达到了 2.0 版本。HTML 在 1997 年经历了 3.2 和 4.0 版本，并在 1999 年达到了众所周知的 4.0.1 版本。HTML5 的工作始于 2004 年，将于 2022 年达到“建议”版本。

2022 年的日期对于设计师和开发者来说可能听起来太遥远了，但是我们可以专注于我们今天可以用这种语言做什么。在 2012 年，HTML5 将达到候选推荐的状态，这意味着一些最有趣的功能，如音频、视频和画布标签、web workers、地理定位、应用缓存和 HTML5 语义标签，目前都是可用的。

我们在第十章中介绍了应用缓存，但是接下来的章节将介绍这个新的 web 标准的基础。

HTML5 标记语法

标记语言是为文本的处理、定义和表示而设计的；用于指定格式的代码被称为标签。HTML5 定义了与 HTML4 和 XHTML1 兼容的 HTML 标记语法；HTML4.0.1 的大部分在 HTML5 中幸存了下来。

HTML5 旨在成为 HTML4 的继任者，旨在通过制定如何处理所有 HTML 元素的精确规则，以及首次为标记语言制定如何从错误中恢复的规则，来提高互操作性并降低开发成本。对于网页设计者和网页开发者来说，错误处理并不像浏览器制作者和测试者那样重要。

使用过 XHTML 的人都知道，XHTML 强迫我们使用 XML 语法，所有的属性都用引号括起来，并使用小写代码。HTML5 中的所有内容都是有效代码:大写、小写、引号、无引号、自结束标记等等。这种态度让我们回到了 90 年代末，在 XHTML 1.0 之前，这种非规则产生了自 Berners-Lee 在 1989 年打开他的第一台服务器以来最糟糕的 HTML 代码。

正如您可能理解的那样，我们不喜欢 HTML5 语法的松散，并鼓励为 HTML5 带来一种类似 XHTML 的简洁风格——如果您在一个团队中工作，一致性在每个级别都很重要，那就更是如此。

HTML5 中的一种新方法包含了弃用的元素。在过去的 HTML 版本中，设计人员或开发人员被建议不要在代码中使用不推荐使用的元素，浏览器也不会在其规范中包含不推荐使用的元素。因为 HTML5 的目标是向后兼容，它不是将元素声明为不推荐使用并从其规范中删除，而是将其声明为过时，并在其规范中保持呈现元素规则。我们可以将这种类型的方法定义为用户友好或面向用户体验，因为从 HTML5 开始，如果 HTML5 兼容的浏览器遇到了过时元素，它仍然能够呈现它并提供更高级别的用户体验。

我们还可以注意到，在许多方面，新的 HTML5 语法是简单驱动的。《宣言》是这种态度的一个很好的例子。我们在下面的代码中比较了 iWebKit Framework 5.0.4 XHTML 和新的 HTML5 doctype声明:

`

`

我们可以看到新的doctype声明更加简单。这种方法还简化了字符编码声明，其中charset属性是指定 UTF-8 编码所必需的唯一属性。下一个示例显示了新的 HTML5 字符编码声明语法，与用于 iWebKit Framework 5.0.4 的旧的(仍然允许的)HTML4.0.1 进行了比较。

`

`

这种演变也带来了整个 HTML 历史上最具代表性的标签语法的变化——将我们的文本变成超文本的标签:<a>标签。(X)HTML 规范将<a>标签实现为行内元素，迫使我们在每次需要创建标题时使用多个标签。在 HTML5 中，<a>标签仍然是一个内嵌标签，不同的是，在 HTML5 中，嵌套的块级元素不再无效。

以下代码是(X)HTML 和 HTML5 中的<a>标签的示例。

`

****Portfolio****

****Find out more about my last Book.****

<ahref="/portfolio.html">

Portfolio

Find out more about my last Book.

****`

您可能已经注意到，HTML5 与其说是革命性的，不如说是进化性的，它并没有显著地改变标记的故事。

HTML5 重新定义

尽管许多 HTML4 元素在本质上没有改变地被引入 HTML5，但是一些历史上的表示元素被赋予了语义(Figure 7–1)。WC3 的 HTML5 建议重新定义了 Table 7–1 中显示的元素。

HTML5 语义

除了到目前为止引入的一些新的语法规则，最显著的特性包括标签的语义。HTML5 有一种自然的面向语义的态度，并使开发人员能够通过更语义地表达内容来创建跨平台的设计。为了实现这一点，HTML5 引入了一些新的标签，如<header>、<nav>、<section>、<aside>和<footer>,，以构建我们的网站或 Web 应用，并使内容更易于机器阅读，从而使移动浏览器和搜索引擎更容易正确处理内容。

图 7–1。 HTML4 和 HTML5 在两个简单 iPhone 页面结构中的对比

HTML5 还引入了一些新的内联元素，如<mark>、<time>、<meter>和<progress>，这些元素与之前的元素(如<strong>、<em>、<span>等)一样，从“内联”重命名为“文本级语义”在 Table 7–2 中，我们按字母顺序列出了 HTML5 中所有的新标签。这些标签被添加到来自(X)HTML 规范的以前的、受支持的和未被否决的标签中。下一节将介绍一些新的媒体标签。

HTML5 媒体

诸如 XHTML、CSS 和 Javascript 之类的 Web 标准为我们提供了发布文本和图像所需的一切，它们为我们的项目添加了交互功能。当我们处理音频和视频时，问题就来了。为了插入音频和视频内容，我们曾经依赖于像 Adobe Flash 这样的外部插件。HTML5 通过引入新的标签来嵌入音频和视频，无需外部插件，从而填补了这一空白。

视频标签

新的<video>标签是 HTML5 列表中迄今为止最著名的标签，因为众所周知的苹果和 Adobe 之间关于 Flash 技术支持的争议。它使我们能够直接在浏览器中播放网站或 web 应用中的视频。此功能仅对桌面浏览器有效。在 iPhone 或 iPad 环境中，视频不是真正的嵌入式视频，因为它不直接在浏览器中播放。

iOS 总是启动内置的媒体播放器，它占据了整个屏幕，用户可以使用完成按钮返回到网站或 web 应用。用于我们“商店”用例的电视广告页面的<video>标签结构如下:

`… … …

… … …`

controls属性告诉浏览器是否必须显示视频控件，而poster属性是用作视频占位符的图像。不仅总是将控制属性添加到<视频>标签是一个好习惯，还必须记住 Safari Mobile 会忽略控制属性。控件总是可见的，并且不需要 true/false 属性(即使在 Safari 桌面上)。关于<video>标签需要记住的另一个重要行为是，iOS 上的 Safari 会忽略 autoplay 属性。

像其他 HTML5 元素一样，<video>标签可以通过 CSS 进行样式化。在这个例子中，我们只使用了四个属性，但是这个新标签有许多其他属性，可以帮助我们为用户提供更丰富的体验。在表 7–3 中，我们显示了每个<video>属性及其相关描述。

Table 7–4 显示了 iOS 支持的视频格式。

音频标签

<audio>标签是 HTML5 中引入的另一个重要的媒体标签。它使我们能够在浏览器中播放带有本地音频回放的音频文件。<audio>标签的工作方式与<video>标签相同，尽管它的属性是<video>标签的子集。<audio>标签的结构如下:

<audiosrc="audioName.mp3" controls autobuffer></audio>

在这个例子中，我们使用一个属性向用户显示音频控件，使用一个属性预先缓冲音频文件。像某些<video>属性一样，这些是没有值可指定的布尔属性，如下例所示:

// (X)HTML5 syntax <audio src="audioName.mp3" **controls=”true”**autobuffer=”true”></audio> // HTML5 syntax <audio src="audioName.mp3" **controls**autobuffer></audio>

如果您喜欢类似 XML 的语法，可以指定属性值，但这不是必需的。为<audio>标签定义的所有属性在表 7–5 中报告。

表 7.6 显示了 iOS 支持的音频格式。

画布标签

<audio>和<video>标签是 HTML5 发展过程中最重要的两个标签，我们经常在我们的网站或 Web 应用中使用这些标签。<canvas>标签代表了网络图形功能的巨大进步，因为它使 Web 开发者能够构建许多与本地应用多年来拥有的相同的事件和效果。尽管 GPU 开销的缺点，我们可以使用动态图像来节省带宽和减少图像加载延迟。

HTML 画布 vs. SVG 像素与矢量

HTML5 Canvas 和 Scalable Vector Graphics (SVG)都是使我们能够在浏览器中创建丰富图形的 web 技术，但它们彼此有着根本的不同。

HTML5 Canvas 规范是一个 Javascript API，它使我们能够编写可编程的绘图操作。Canvas 本身使 web 开发人员能够定义一个 canvas 上下文对象，然后可以绘制该对象。我们还可以插入图像(例如。png 或者。jpg)和浏览器能够加载的任何其他内容。

要进行实际绘图，您有两种选择:

• 2D 绘画语境
• 3D 绘图上下文

另一方面，SVG 是一种基于 XML 的矢量图形格式。SVG 内容可以是静态的，也可以是动态的、交互式的和动画的。有了 SVG，我们可以做的不仅仅是简单的矢量图形和动画；我们可以用脚本、高级动画事件和过滤器开发高度互动的 web 应用。

SVG 仍处于优化过程中，以便在浏览器中与 HTML 和 CSS 更紧密地集成。SVG 1.1 是 W3C 推荐标准，在撰写本文时，它是完整规范的最新版本。除了 SVG 1.1，我们还有 SVG Tiny 1.2 ( [www.w3.org/TR/SVGTiny12/](http://www.w3.org/TR/SVGTiny12/)),)，这也是 W3C 针对移动设备的推荐标准。我们可以在[www.w3.org/Graphics/SVG/WG/wiki/Roadmap](http://www.w3.org/Graphics/SVG/WG/wiki/Roadmap)遵循 SVG 路线图。

HTML Canvas 和 SVG 也是 iOS 设备上 Adobe Flash 的一个很好的替代品。出于这个原因，我们希望基于开放 HTML5 标准的未来 web 将完全支持 SVG。

HTML 画布和 SVG 比较

乍一看，Canvas 和 SVG 似乎是实现同一目标的不同技术；然而，两者之间存在几个重要的差异。Table 7–7 显示了其中的一些。

HTML Canvas 和 SVG 并不是互斥的，我们可以找到好的方法在同一个网页中一起使用(比如 Canvas 作为背景，SVG 在上面)；我们可以在画布上绘制 SVG，反之亦然。这里列出了 HTML Canvas 和 SVG 的一些优缺点。

HTML 画布

优势

• 高 2D 拉伸性能
• 在固定画布尺寸上保持恒定的性能水平
• 将生成的图像保存为 png 或 jpg 的选项

缺点

• 没有绘制元素的 DOM 节点
• 没有动画 API
• 较差的文本呈现能力

SVG(可缩放矢量图形)

优势

• 独立于分辨率
• 内置动画支持
• 使用 SVG DOM API 完全控制每个元素

缺点

• 引入(DOM)渲染延迟

就实践实现而言，底线是，除了在 HTML Canvas+SVG 方法中(如在游戏应用中，我们可以使用 Canvas 动态渲染光栅图形并用 SVG 制作动画)，HTML Canvas 应该用于生成光栅图形。另一方面，SVG 应该用于独立于分辨率的用户界面和高度交互的动画。

画布元素

HTML Canvas 元素为 web 页面提供了一个地方(画布), Web 开发人员可以在这里使用 Javascript 代码绘制各种自由形式的图形，如线条、形状、图像，甚至是动态文本。缺点是，一旦我们在

中绘制了一些东西，它们就会成为页面 DOM 的一部分，Javascript 引擎就会忘记它们。

一个网页可以有不止一个

，并且这些可以重叠，可以和其他标准一起使用，比如 SVG。当我们在

中绘制一个对象时，坐标系从左上角开始，x 值从左到右递增，y 值从上到下递增，如图图 7–2 所示。

图 7–2。 起始画布坐标系和背景颜色

以下代码显示了基本的画布语法和属性:

<canvas id="heroCanvas width="460" height="300">         Fallback Content </audio>

<canvas>标签通常有一个 ID 属性，因为 Javascript 使用它来访问绘图区域。默认的<画布>尺寸是 300x150，但是我们可以使用标签中的宽度和高度属性来设置它们。

如果用户禁用了 Javascript 引擎，而浏览器不理解什么是<canvas>标签，将显示回退内容。在这种特殊情况下，甚至宽度和高度属性都被忽略；为了避免这个问题，我们可以使用 CSS 设置宽度和高度，以保持设计行为不变。

#canvasHero {         display: inline-block;  // only on non-floated element         height: 300px;         width: 460px; }

Table 7–8 中的toDataURL()方法将图像的内容转换成静态图像，通常是. png。png 支持是强制性的，但也可以支持其他格式。

表 7–8 中的getContext()方法获取画布的绘制上下文。该上下文包含关于画布的信息，并为该特定上下文提供所有绘制方法。

`

<head>         <title>Canvas Test</title>         <style type="text/css">                 #canvasTest01 {                         border: solid 2px black;                         background-color: #CCC;                 }         </style> </head> <body>

Canvas Example 01

        Please Enable Javascript Engine

` 

图 7–3。 使用 HTML 2D API:使用画布和 CSS 绘制基本形状

基本形状和线条

在图 7–3 所示的第一个例子中，我们看到了如何使用 CSS 绘制画布。现在，让我们进入下一个层次，看看我们如何使用 Javascript 来影响画布在浏览器中的外观。在<canvas>上绘图需要以下步骤:

1. 检索对Canvas元素的引用。
2. 使用getContext().从元素中获取绘图上下文
3. 如果getContext返回的结果不为空，我们可以使用绘图 API。

这种方法的一个例子如下:

<canvas id="canvasTest" width="300" height="200">         Please Enable Javascript Engine </canvas>         function drawOnCanvas() {                 varctxElement = document.getElementById(“canvasTest”);                 varctx = ctxElement.getContext("2d");                 if (ctx != null) {                         // we can draw using Canvas 2D API                 } }

我们定义了一个函数，在主体函数中，我们获取了对存储在变量ctxElement中的画布的引用，然后我们发出了一个对 2D API 的请求。如果测试结果不为空，我们可以使用 2D API 进行绘制。

2D 画布 API 提供了几种方法，分为三组，如图 Figure 7–4 所示。

图 7–4。 把 HTML 2D API 分成三组

在下一个例子中，我们将看到如何使用 2D API 中的方法填充矩形。首先，我们使用getElementById方法获取对 canvas 元素的引用，并像前面的例子一样请求 2D API。然后，我们使用fillStyle和fillRect方法填充矩形。矩形是画布支持的唯一基本形状。这与 SVG 不同，SVG 也支持椭圆作为原始形状。在 Table 7–9 中，我们可以看到操作矩形的三种基本方法。

fillStyle方法设置应用于矩形的样式的颜色，fillRect设置操作的开始和结束坐标。从宽度和高度<画布>属性值中检索结束坐标。在图 7–5 中，我们可以看到最终的结果。

图 7–5。使用 HTML 2D API:使用画布和方法绘制基本形状

下面的完整代码来自我们当前的例子。

`

<head>        <title>Canvas Test</title>        <script>                window.onload = function() {                       varctxElement = document.getElementById('canvasTest02');                                 varctx = ctxElement.getContext("2d");                                if (ctx) {` `                                         ctx.fillStyle = "#F00";                                          ctx.fillRect(0,0, ctx.canvas.width, ctx.canvas.height);                         }                  }          </script> </head> <body>

Canvas Example 02

        Please Enable Javascript
Engine

`

在下一个例子中，我们可以看到如何绘制两个形状——一个像以前一样用颜色填充，另一个用笔画填充。我们还将看到如何在两个绘制的形状上使用clearRect(x,y,w,h)方法。在图 7–6 中我们可以看到最终的结果。

图 7–6。 运行中的 HTML 2D API:绘制和清除形状

让我们来看看下面的代码，这些代码来自我们在 Figure 7–6 中显示的绘制和清除形状示例。

`

<head>         <title>Canvas Test</title>         <script>               window.onload = function() {                varctxElement = document.getElementById('canvasTest03');                              varctx = ctxElement.getContext("2d");                              if (ctx) {

ctx.strokeStyle = "#F00";
                                     ctx.lineWidth = 10;                                      ctx.strokeRect(25,25,280,250);
                                     ctx.fillStyle = "#333";
                                     ctx.fillRect(320, 25, 280, 250);

ctx.clearRect(15, 100, 500, 100);
                      }
                 }
         

Canvas Example 03

          Please Enable Javascript
Engine

`

线条和形状有些不同。可以使用各种设置来创建线，这些设置决定了线如何连接在一起以及如何结束。在 Table 7–10 中，我们可以看到对行进行操作的方法。

在下面的例子中，我们看到了如何画线以及threelineCap方法的属性是如何工作的。如图 Figure 7–7 所示，通过使用这三个属性，我们可以实现三种不同的效果。

图 7–7。??【HTML 2D API 在行动:lineCap 方法

以下代码来自图 7–7 中所示的 lineCap 方法示例。

`

<head>         <title>Canvas Test</title>         <script>                 window.onload = function() {                        varctxElement = document.getElementById('canvasTest04');                               varctx = ctxElement.getContext("2d");                               if (ctx) {                                       ctx.strokeStyle="#F00";                                       ctx.lineWidth=10;                                       ctx.beginPath();                                       ctx.moveTo(50,10);                                       ctx.lineTo(50,390);                                       ctx.moveTo(450,10);                                       ctx.lineTo(450,390);                                       ctx.stroke();                                       ctx.lineWidth = 80;                                       ctx.strokeStyle="#000";                                       ctx.lineCap="butt";                                       ctx.beginPath();                                       ctx.moveTo(50,50);                                       ctx.lineTo(450,50);                                       ctx.stroke();

ctx.lineCap="round";
                                      ctx.beginPath();                                       ctx.moveTo(50,200);
                                      ctx.lineTo(450,200);
                                      ctx.stroke();

ctx.lineCap="square";
                                      ctx.beginPath();
                                      ctx.moveTo(50,350);
                                      ctx.lineTo(450,350);
                                      ctx.stroke();
                       }
                  }
         

Canvas Example 04

         Please Enable Javascript
Engine

`

我们用一条红线来展示 lineCap 方法是如何工作的；通过这种方式，我们可以看到线的末端从哪一点被修改。在下一节中，我们将看到如何绘制复杂的形状。

复杂的形状

我们已经看到了如何画简单的形状，现在我们画一些更复杂的形状，比如路径。路径是一组点，就像数学中直线是一组点一样。

路径可以是开放的，也可以是封闭的；封闭路径总是有一个与起点相同的终点。一个上下文可以有且只能有一个当前路径。在表 7–11 中，我们可以看到在一种叫做弧的路径上运行的方法。弧是圆的一部分的曲线；圆被认为是 360 度的弧。

在图 7–8 中，我们可以看到一条用弧线绘制的简单路径。

图 7–8。HTML 2D API 在行动:使用弧线绘图

以下代码是图 7–8 中所示的示例。

`

<head>         <title>Canvas Test</title>         <script>                 window.onload = function() {                         varctxElement = document.getElementById('canvasTest06');                                varctx = ctxElement.getContext("2d");                                if (ctx) {

ctx.strokeStyle = "#C00";
                                       ctx.fillStyle = "#CCC";
                                       ctx.lineWidth = 5;

ctx.beginPath();
                                  ctx.arc(75,75,50,0, Math.PI*2, true);

ctx.moveTo(110,75);
                                  ctx.arc(75,75,35,0, Math.PI, false);

ctx.moveTo(65,65);
                                  ctx.arc(60,65,5,0, Math.PI*2, true);

ctx.moveTo(95,65);
                                  ctx.arc(90,65,5,0, Math.PI*2, true);

ctx.stroke();

}                 }
        

Canvas Example 06

        Please Enable Javascript Engine

`

弧线不是我们可以使用画布 2D API 绘制的唯一路径。Canvas 还可以让我们绘制贝塞尔曲线和二次曲线。使用两个控制点来确定曲线，从起点到终点绘制贝塞尔曲线。二次曲线类似于贝塞尔曲线，但它们只使用一个控制点来确定曲线。这意味着与二次曲线相比，使用两个控制点的贝塞尔曲线可以绘制更复杂的曲线。

图 7–9。HTML 2D API 在行动:Canvas curves 实现

在图 7–9 中，我们可以看到有两个控制点的贝塞尔曲线和只有一个控制点的二次曲线的区别。在表 7–12 中，我们可以看到操作贝塞尔曲线和二次曲线的方法。

在图 7–10 中，我们可以看到如何使用二次曲线绘制一个简单的高尔夫球杆。

图 7–10。HTML 2D API 在行动:使用二次曲线绘图

以下代码是图 7–10 中所示的示例。

`
        
        

Canvas Example 06

        Please Enable Javascript Engine

`

使用裁剪路径

在上一节中，我们看到了路径的例子。现在我们来看看如何使用路径来定义一个遮罩，该遮罩定义了一个发生绘图的区域，以及该空间之外的一个绘图无效的区域。默认情况下，剪辑路径由整个画布定义。在 Table 7–13 中，我们可以看到使用裁剪路径的方法。

在下面的例子中，我们使用一个圆弧来定义一个 360 度的圆形遮罩。该示例的代码如下所示:

`

<head>         <title>Canvas Test</title>         <script>                 window.onload = function() {                var ctxElement = document.getElementById('canvasTest07');                                 var ctx = ctxElement.getContext("2d");                                 if (ctx) {

var img = document.getElementById("spartan");

ctx.arc(ctx.canvas.width/2, ctx.canvas.height/2, 150,0,2*Math.PI);
                                 ctx.clip();

ctx.drawImage(img,0,0);

}
                }
        

Canvas Example 07

        Please Enable Javascript Engine
        

`

接下来，我们看看如何操作画布对象。

操纵画布对象

除了可以绘制一些复杂的形状，canvas 还提供了一些高级操作来变换、缩放或旋转 canvas 对象。在表 7–14 和表 7–15 中，我们可以看到用于这些高级操作的方法。

除了表 7–14 中的内置转换，我们还可以使用表 7–15 中的两种方法定义我们自己的转换。

Canvas 还有一个默认合成方法的设置，它决定了如何将新内容绘制到画布表面。我们在表 7–16 中列出了 12 种不同的合成方法。

在图 7–11 中，我们可以看到表 7–16 中的方法是如何操作的。

图 7–11。HTML 2D API 在行动:组合方法

之前的 canvas 高级操作是在我们需要用 HTML 开发一个网页游戏的时候使用的；然而，重要的是开发人员要知道像 HTML 第五版这样的“标准”提供的所有可能性。

画布状态

我们在画布中绘制的每个上下文都维护一个绘制状态。使用一些特定的方法可以访问和管理绘图状态。

该状态保存在保存状态的堆栈中。这意味着我们可以通过将一个状态插入堆栈顶部来保存它，并通过弹出堆栈顶部的最后一个状态并恢复它来恢复一个状态。

绘图状态，也称为画布状态，跟踪来自不同属性的几个值，如下所示:

1. 当前方法值(例如，fillStyle、strokeStyle 等)
2. 电流变换矩阵
3. 当前剪辑区域

画布状态用于恢复形状的一组值，而不必手动跟踪它们。表 7–17 显示了 HTML 画布的状态方法。

在下面的例子中，我们首先用一些颜色和笔画值绘制一个矩形，然后保存画布状态。接下来，我们用不同的颜色和笔画值绘制另一个矩形，然后，在绘制第三个矩形之前，我们恢复画布状态。恢复方法将先前保存的状态应用于第三个矩形，如图 Figure 7–12 所示。

图 7–12。HTML 2D API:save()和 restore()方法在起作用

在图 7–12 中显示的前一个例子的代码如下:

`

<head>         <title>Canvas Test</title>         <script>                 window.onload = function() {` `                         varctxElement = document.getElementById('canvasTest05');                                var ctx = ctxElement.getContext("2d");                                if (ctx) {

ctx.strokeStyle = "#F00";
                                        ctx.fillStyle = "#CCC";
                                        ctx.lineWidth = 10;

ctx.fillRect(25,25,180,200);
                                        ctx.strokeRect(25,25,180,200);

ctx.save();
                                        ctx.strokeStyle = "#000";
                                        ctx.fillStyle = "#FFF";
                                        ctx.lineWidth = 5;
                                        ctx.fillRect(230,25,180,200);
                                        ctx.strokeRect(230,25,180,200);

ctx.restore();

ctx.fillRect(435, 25, 180, 200);
                                        ctx.strokeRect(435,25,180,200);
}
                }
        

Canvas Example 05

        Please Enable Javascript Engine

`

当我们在复杂的上下文中工作时，save()和restore()方法将我们从每次需要对某个形状应用微小变化时跟踪当前和过去画布状态的手工工作中解救出来。

要查看最新的 HTML5 Canvas 草案版本，请访问位于[www.w3.org/TR/html5/the-canvas-element.html](http://www.w3.org/TR/html5/the-canvas-element.html)的 W3C 官方页面。

制作画布幻灯片

现在我们为“商店”用例创建一个幻灯片。我们使用由画布绘制的三个不同的图像，以及一个负责随着时间推移滑动这三个图像的 Javascript 函数。有关 Javascript 的回顾，请参阅本章后面的“Javascript”一节。

第一步是打开我们的 index.html，在我们的英雄区域插入

，如下所示:

`… … …

        ` `

… … …`

现在我们需要创建一个名为 heroCanvas.js 的新文件，并将其保存在框架的 Javascript 文件夹中。

varimagePaths = [         "pics/hero-slide_01.png", "pics/hero-slide_02.png", "pics/hero-slide_03.png" ]; varshowCanvas = null; varshowCanvasCtx = null; varimg = document.createElement("img"); varcurrentImage = 0;

前面显示的代码的第一部分初始化了幻灯片放映所需的变量。变量imagePaths是一个数组，包含幻灯片中显示的所有图像，几个引用画布上下文的变量，一个存储使用createElement() DOM方法创建的新图像元素的变量 img，以及一个跟踪幻灯片中显示的当前图像的索引变量。

`window.onload = function () {
        showCanvas = document.getElementById('heroCanvas');
        showCanvasCtx = showCanvas.getContext('2d');

img.setAttribute('width','298');
        img.setAttribute('height','150');
        switchImage();

setInterval(switchImage,2500);
}`

现在，我们可以编写一组函数，当窗口的对象被加载时，这些函数就会启动。在函数代码的第一个块中，我们获得了对画布的引用，然后我们请求画布 2D API。在第二个块中，我们设置要显示的图像的宽度和高度，然后我们调用switchImage()函数，我们将在本章后面看到。在最后一个块中，我们将每个图像之间的幻灯片放映间隔设置为 2.5 秒。

`functionswitchImage() {
        img.setAttribute('src',imagePaths[currentImage++]);
        img.onload = function() {
                if (currentImage>= imagePaths.length)
                        currentImage = 0;

showCanvasCtx.drawImage(img,0,0,298,150);
        }
}`

现在我们来看一下switchImage()函数，在这个例子中它完成了所有困难的工作。首先，这个函数将图像函数的源设置为数组中的当前图像索引值。当图像加载时，我们运行一个函数来检查当前图像是否大于图像路径数组。如果它更大，该函数将索引重置为零，重新开始计数。最后，我们调用画布上下文中的drawImage()函数，使用给定的坐标绘制图像。每次间隔时间结束时，或者说每隔 2.5 秒就会调用switchImage()功能。在下面的内容中，我们将整个 Javascript 代码和函数定义放在 Javascript 文件的顶部，这是我们的建议。

`
        ... ... ...
        ... ... ...
        ... ... ...

`

最后一步，我们需要将 Javascript 文件作为外部文件导入，并在前面所示的部分插入一个

图 7–13。HTML 2D API:画布幻灯片演示

正如我们现在所看到的，canvas 为那些对开发 WebApp 感兴趣的人带来了一系列新的机会。接下来，我们将看到新的 CSS level 3 如何为我们开发 IOs 设备的 WebApp 提供更多帮助。

CSS3

旧的 CSS2 规范太大太复杂，无法在一个大的文档规范中更新，所以它被划分为万维网联盟(W3C)的较小的文档规范。一些模块包括以下内容:

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

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

CSS3 的主要影响是能够以更简单的方式实现当前的设计功能，并使用新的选择器和属性来引入新的设计功能，如动画或渐变效果。

现在我们看到了一些最常见的属性，这些属性存在于每一个可用于为 iPhone 和 iPad 设计和开发的 iPhone 和 iPad 框架中。当我们扩展我们的框架时，我们在第八章中掌握了这些特性。

前缀

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

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

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

下面是一个例子:

border-radius: 3px; -webkit-border-radius: 3px; (WebKit-based Browser implementation) -moz-border-radius: 3px; (Gecko-based Browser implementation)

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

在我们的苹果设备环境中，我们需要关注 WebKit CSS3 的实现，因为我们只使用基于 WebKit 的浏览器，比如 Safari。

圆形边框

使用 CSS2 编码实现圆角边框不是一件简单的事情。众所周知，iOS 到处都有圆形边框。有许多方法可以用来创建 CSS2 圆角边框，但是这些方法需要额外的标记和每个边框单独的图像。

使用 CSS3，创建一个圆形的边界是令人难以置信的快速和容易。我们可以将此属性应用于一个或所有角，或者应用于单个角。Table 7–18 显示了 CSS 级圆角边框属性。

CSS 语法如下:

-webkit-border-radius: <length>;

边框图片

边框图像是最有用的附加功能之一；请注意，iPhone 上所有从底部滑动的大按钮也可以用这个属性来设计。CSS3 能够根据您的选择重复或拉伸边框图像。Table 7–19 显示了 CSS 级边框图像属性。

CSS 语法如下:

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

渐变

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

您用来创建颜色停止的功能称为颜色停止。将该函数作为参数传递给-webkit-gradient()函数，以指定线性和径向渐变的开始、中间和结束颜色。指定色标之间的颜色是内插的。表 7–20 显示了 CSS 级渐变属性。

CSS 语法如下:

-webkit-gradient ( <gradient-line><color-stop1><color-stop2><color-stopN> ); -webkit-gradient ( <gradient-line><color-stop1><color-stop2><color-stopN> );

盒子尺寸

新的盒子模型是 CSS3 草案中最广泛的领域之一。这个框大小方面使您能够定义某些元素以某种方式适应某个区域。如果我们想在用户界面中设计一个两列边框的盒子，并把两个盒子并排放置，使用这个属性就可以实现。这将强制浏览器呈现具有指定宽度和高度的框，并在框中放置边框和填充。Table 7–21 显示了 CSS 级框大小属性。

CSS 语法如下:

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

方框阴影

添加框阴影是另一个使用 CSS2 规范很难实现的效果，因为通常我们需要使用额外的图像和标记。虽然我们等待在不久的将来切换到一个完整的 CSS3 网站，但目前我们在我们的桌面网站上添加了一个额外的

，以便给主要内容添加一个纸阴影效果。CSS3 的替代品更加优雅和简洁。Table 7–22 显示了 CSS 级框阴影属性。

CSS 语法如下:

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

概述

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

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

Table 7–23 显示了 CSS 级大纲属性。CSS 代码如下:

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

背景尺寸

在 CSS3 之前，背景尺寸由所用图像的实际尺寸决定。有了这个新的 CSS3 属性，就可以用百分比或像素来指定背景图像应该有多大。模仿 iOS 用户界面，我们总是尽可能使用 CSS 属性，而不是图像。

无论如何，在需要的地方，背景大小属性使我们能够在几个不同的上下文中重用图像，并且它还扩展了背景以更准确地填充区域。

Table 7–24 显示了 CSS 级背景尺寸属性。CSS 语法如下:

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

背景由来

CSS3 还使我们能够指定如何计算背景的位置。这使得在放置背景图像方面具有很大的灵活性。

Table 7–25 显示了 CSS 背景原点属性。CSS 语法如下:

background-origin: <origin-value>;

多重背景

使用多种背景的新 CSS3 功能是一个很好的时间节省器，它使我们能够实现以前需要一个以上的<div>.的效果。这个属性，结合背景大小，为我们提供了一个强大的工具来减少本地 UI 外观和我们的模拟(web)用户界面之间的差距。

Table 7–26 显示了 CSS 级多重背景属性。CSS 代码如下:

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

文字阴影

文本阴影是模拟原生 iOS 用户界面的一个基本 CSS3 属性。iOS 中几乎所有的文字都是浮雕的，可读性很强。

Table 7–27 显示了 CSS 级文本阴影属性。CSS 代码如下:

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

文字溢出

文本溢出是 iOS 本地用户界面仿真中涉及的另一个基本属性。通常，在 iPhone 环境中，标题会溢出标题栏，如果我们使用标题栏左侧和右侧的按钮来帮助导航内容，这种情况会更常见。

这个属性使我们能够用省略号(“...”)来剪辑文本)作为对用户的视觉提示，表明文本已被剪辑。有了 iPad，这个问题就不再存在了，因为屏幕更大了。

Table 7–28 显示了 CSS 级文本溢出属性。CSS 语法如下:

text-shadow: <overflow-value>;

自动换行

使用 CSS2，如果一个单词太长而不能放在一个区域的一行中，它会扩展到外部。这种情况并不常见，但时有发生。新的单词换行功能使我们能够强制文本换行，即使这意味着在单词中间进行拆分。Table 7–29 显示了 CSS 级自动换行属性。

CSS 语法如下:

word-wrap: <wrap-value>;

CSS 代码如下:

word-wrap: break-word;

网络资源

虽然这个新属性对于网页设计来说是一个革命性的变化，但对于我们这些需要使用原生 iOS 用户界面的人来说，这个属性并没有那么有用，因为我们在 Safari 字体堆栈中有 Helvetica。如果我们需要用一些奇怪的标志来表示文本，这个属性最终会成为一个方便的工具。

Table 7–30 显示了 CSS 级 web 字体属性。CSS 语法如下:

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

点击高亮显示

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

Table 7–31 显示了 CSS 级点击高亮属性。CSS 语法如下:

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

多列

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

四个属性与 CSS3 中的多列布局相关，使我们能够设置列数、宽度、分隔每列的间距以及每列之间的边界。这四个属性是

• 列计数(列数)
• 列宽(列的宽度)
• 列间隙(列之间的间隙)
• 列标尺(列之间的边框)

Table 7–32 显示了 CSS 级多列属性。CSS 语法如下:

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

跨越列

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

Table 7–33 显示了 CSS Level 3 spanning columns 属性。CSS 语法如下:

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

过渡

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

第一个值是指被转换的属性，第二个值控制持续时间，第三个值控制转换的类型。

Table 7–34 显示了 CSS 级转换属性。CSS 语法如下:

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

变换

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

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

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

可用的转换函数有

matrix(number，number，number，number，number)
指定一个 2D 变换形式的六值变换矩阵(3X3)。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)
指定了一个由[sx，sy]两个参数描述的缩放向量的 2D 缩放操作。如果没有提供第二个参数，它将采用与第一个参数相等的值。

scaleX(number)
使用[sx，1]缩放矢量指定缩放操作，其中 sx 作为参数给出。

scaleY(number)
使用[1，sy]缩放矢量指定缩放操作，其中 sy 作为参数给出。

旋转(角度)
指定一个关于元素原点的 2D 旋转，旋转角度在参数中指定，由 transform-origin 属性定义。

倾斜(角度，角度)
指定沿 X 和 Y 轴的倾斜变换。第一个角度参数指定 X 轴上的倾斜。第二个角度参数指定 Y 轴上的倾斜。如果没有给定第二个参数，则 Y 角度的值为 0(例如，Y 轴上没有倾斜)。

【skewX(角度)
指定沿 X 轴按给定角度的倾斜变换。

skewY(angle)
指定一个给定角度的沿 Y 轴的倾斜变换。

Table 7–35 显示了 CSS 级转换属性。CSS 语法如下:

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

动画

与过渡类似，动画会随着时间的推移修改属性。使用转换属性，我们实现了从一个值到另一个值的单向效果；这种属性对于页面过渡很有用，但是对于构建任何类型的视觉效果来说价值有限。

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

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

表 7–36 显示了 CSS 级动画属性。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 负责用户界面的行为，但是动画属性在许多情况下提供了有效的替代方法。这个属性也是所有 CSS3 模块中最复杂的；为此，我们详细分析其所有属性，如表 7–37 所示。

关键帧

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

使用专门的 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 ] ];

反思

没有任何一个 CSS3 属性像反射属性一样具有苹果风格。在苹果商店的每一个产品展示上都使用了倒影，结合负空间的使用，它是实现干净设计的一个有价值的工具。

注:正如我们在分析感知法则时看到的，艺术中的负空间是图像主体周围和主体之间的空间。

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

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

表 7–38 显示了 CSS 级反射属性。CSS 语法如下:

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

Javascript

到目前为止，使用 HTML5 标记语言，我们已经构建了网站或 web 应用的结构。然后，我们使用 CSS3 样式表来修改它的视觉表现。现在是时候研究它的行为了，正是在这一点上，Javascript 开始发挥作用。Javascript 是一个复杂的主题，很难在这里全面介绍，因此本节是一个速成班。

Javascript 由网景团队于 1995 年开发，首次出现在网景 2。Javascript 的原名是 LiveScript，但在 1996 年，由于 Sun Java 语言在当时是一件大事，Netscape 和 Sun 达成了一项协议，将其名称改为 Javascript。回想起来，这是一个很大的错误，因为 Javascript 和 Java 互不相干；Javascript 不是基于 Java 的，也不是 Java 的轻量级版本。将这种脚本语言称为 Javascript 可能达到了某种营销目的，但它也造成了许多混乱。

1996 年，微软为 Internet Explorer 3 开发了自己的版本，名为 Jscript。1997 年，Netscape 向欧洲计算机制造商协会(ECMA)提交了 Javascript 语言，以便创建一个独立的官方标准版本，称为 ECMAScript (ECMA-262)，尽管 IT 界的每个人都继续称它为 Javascript。1999 年，ECMAScript 3 发布，2009 年推出了 ECMAScript 5，它与 ECMAScript 3 语言版本向后兼容。Mobile Safari 部分支持 iOS4.3.2 中的 ECMAScript 5，而 iOS5 几乎支持所有新功能。

Javascript 是一种用于与网页交互的客户端脚本语言。与其他非脚本编程语言不同，Javascript 只在特定的应用中工作(例如，Safari Mobile 之类的 web 浏览器)。操作系统(比如 iOS)运行 web 浏览器，web 浏览器包含页面，页面包含 Javascript。我们可以在图 7–14 中看到这个原理。

图 7–14。 网页浏览器、网页和 Javascript 代码之间的关系

Javascript 是一种脚本语言，并被有意地加以限制，这意味着，例如，它不能访问文件系统、数据库或硬件。采用这种方法的原因是 Javascript 并不是一种通用的编程语言，而是被设计用来操作网页的。

当用户打开浏览器并从 web 服务器请求网页时，web 服务器以纯文本的形式将 HTML 和 CSS 发送回浏览器，让浏览器负责解释、呈现并最终显示最终内容。如前所述，Javascript 是一种客户端语言，这意味着它的工作方式与 HTML 和 CSS 文件相同:web 服务器将 Javascript 发送给浏览器，然后浏览器解释并运行它。我们可以在图 7–15 中看到这些步骤。

图 7–15。 网络浏览器和网络服务器之间的交互

客户端方法与 PHP 或 Ruby on Rails 等语言的服务器端方法相反，这些语言在 web 服务器上执行，其结果被提交给浏览器。

给网页添加 Javascript

使用<script>元素将 Javascript 代码嵌入到网页中。在 CSS 规则中，可以使用两种方法插入一段 Javascript 代码:

内联代码直接写在 HTML 文档中。

导入
代码被导入，引用一个外部的 Javascript 文档。

在本书中，我们使用内联 Javascript 进行演示，但是对于大多数实际项目来说，导入 Javascript 代码被认为是一种很好的做法。在下面的两个例子中，我们从任何编程语言的第一个程序开始，Hello，World！程序。

`

<head>         <title>Javascript Test</title> </head> <body>         <h1>Javascript Test Page</h1>         <script>                 alert("Hello, world!");         </script> </body> </html>`

前面的 Javascript 代码展示了内嵌技术，其中代码内嵌在两个<script>标记之间。

`
<linkhref="css/style.css" rel="stylesheet" media="screen" type="text/css" />
<scriptsrc="Javascript/helloWorld.js">

<title>Javascript Test Page </title> </head>`

前面的代码展示了导入的技术，其中代码是使用 src 属性导入的。

此时，我们可能会问自己，“我们在哪里插入 Javascript 代码？”浏览器从上到下读取并解释所有代码，这意味着浏览器一读取 Javascript 就解释并运行它。这意味着，根据代码在网页中的位置，Javascript 会导致页面渲染延迟，降低所有页面的速度。此外，在部分的底部，就在结束的标记之前插入 Javascript 代码被认为是一个好的做法，如前面的 Hello World 示例所示。

Javascript 结构

Javascript 是一种由解释的语言，而不是由编译的，另一种类型的语言。编译过的语言需要通过一个叫做编译器的特殊程序来运行，它将我们编写的代码转换成可以由操作系统控制的 CPU 运行的机器代码。正如我们已经看到的，我们不需要用 Javascript 做这些；使用浏览器，我们只需向 web 服务器发出一个请求，web 服务器将浏览器解释和运行的 Javascript 代码的纯文本版本发送回浏览器。

Javascript 也是区分大小写的，这意味着 Javascript 中的以下代码各不相同:

alert(“Hello World!”);                // correct Javascript syntax Alert(“Hello Wolrd!”);                // incorrect Javascript syntax

Javascript 语句通常写在一行上，并且必须以分号结束，如前面的示例所示。分号的作用与英语中的句号或句号相同。当我们有一个很长的语句时，我们可以通过将它分成多行来提高可读性，只在语句的末尾使用分号。

Javascript 区分大小写，但不区分空格，这意味着它不关心语言不同部分之间的空格。以下陈述都是正确的，并以相同的方式解释:

alert("Hello World!");                // correct Javascript syntax alert ("Hello World!");                // correct Javascript syntax

我们可以通过使用两个正斜杠将单行注释插入到 Javascript 代码中，如前面的示例所示。如果我们需要插入多行注释，我们可以使用组合正斜杠星号，并使用它的另一面，星号正斜杠来结束注释，如下例所示。

/* this is a multiple line comment */

数据类别

在 Javascript 中，我们有两种类型的数据:原始数据和引用数据。原始数据类型是不可约的，原始值存储在堆栈中，这意味着直接在变量 access 的位置中。引用数据类型是复合的，是一个对象，引用值存储在堆中，这意味着变量中的值是一个指针，指向内存中存储对象的位置。下表显示了两类数据:

原始数据

数字

布尔代数学体系的

线

空

不明确的

参考数据

目标

功能

排列

日期

错误

正则表达式

那些刚接触栈和堆的人在试图理解它们的本质时会有点迷惑。出于我们的目的，需要理解的重要概念是，堆栈是一个具有后进先出(LIFO)策略的内存区域，应用在其中跟踪其内存需求。堆是内存中的另一个区域，对象存储在这里，指针可以随时访问。图 7–16 展示了原语和引用类型在实践中是如何工作的。

图 7–16。Javascript 中的原语和引用数据

Figure 7–17 显示了栈和堆如何处理原始和引用数据类型。

图 7–17。Javascript 中的原语和引用数据

从开发人员的角度来看，这种在内存中存储数据的不同方式对程序的感知没有任何可见的影响。

保留字

保留字在每种语言中都有一席之地，包括 Javascript。Javascript 描述了一组保留字，我们不能用它们作为函数和变量的标识符。如果我们使用保留字，命名函数或变量通常不会收到错误，然后该字将被视为关键字，我们将得到一个关键字错误。

在 Table 7–39 中，我们可以看到 Javascript 中最常见的保留字。

Javascript 还描述了一组表示 Javascript 语句开始或结束的关键字。关键字和保留字一样，是保留的，我们不能用它们来命名函数或变量。如果我们试图使用一个关键字来命名一个变量或函数，我们可能会得到一个错误消息，比如“需要标识符”Table 7–40 显示了 Javascript 中的所有关键字。

变量

使用编程语言还意味着跟踪许多不同类型的数据。为此，每种编程语言都有变量。一个变量是一个容器，它抽象出一块物理内存，物理地存储数据。在 Figure 7–18 中，我们可以看到如何以线性形式描绘物理内存。

图 7–18。 设备内存以线性(向量)形式表示

当数据存储在内存中时，我们可以通过两个基本操作来访问它，这两个操作称为读和写。使用读操作，我们可以检索存储在内存中的变量的值，而使用写操作，我们可以更新变量的值。

在 Javascript 中，我们使用保留字“var”创建一个变量，后跟变量的名称，然后是分号。以下示例显示了一些变量声明。我们必须记住 Javascript 是区分大小写的。

varvarName;                  // generic variable declaration varuserEmail;                // variable for an email address vartodayDate;                // variable for a date

我们使用的变量名必须写成一个单词，字母之间不能有空格，因为在变量声明中不允许有空格。该名称可以由字母、数字、下划线符号或美元符号组成，但不能以数字开头。以下示例演示了这一规则。

vartodayDate;             // correct declaration var 2012todayDate;        // incorrect declaration var todayDate2012;        // correct declaration

我们在前面的例子中看到的声明创建了一个未定义的变量，这意味着该变量没有值。为了给变量赋值，我们需要使用等号运算符后跟一个允许值，如图 Figure 7–19 所示。

图 7–19。 未定义(左)和已定义(右)变量

声明也可以分成两个语句，但是这种方法很少使用，因为它增加了代码的行数，并且没有提高代码的可读性。

var score;               // first step of variable declaration score = 3005;            // second step of variable declaration var score = 3005;        // compact approach to variable declaration

在 Javascript 中，我们也可以省略第一步，只写第二步，如前面的例子所示。Javascript 首先寻找一个名为“分数”的变量，如果没有找到，它会重新创建这个变量。省略保留字“var”被认为是一种不好的做法，因为这会导致 Javascript 的意外行为，降低代码的可读性。

*要声明多个变量，我们可以只使用一行来创建它们，而不是将它们分布在多行中。

var score;                                       // single approach varhightScore;                                // single approach var score, hightScore;                           // compact approach var score = 3005;                                // single approach varhightScore = 19733005;                        // single approach var score = 3005, hightScore = 19733005;         // compact approach

在许多其他编程语言中，当我们声明一个数据类型(例如，变量)时，我们不只是给变量一个名称，我们还需要指定将存储在变量本身中的确切数据类型。在 Javascript 中，我们不能这样做。Javascript 是一种“弱类型语言”，而其他语言(如 Java)则是“强类型语言”。在 Javascript 中，我们使用保留字“var”来创建一个通用变量，它存储任何类型的数据，比如整数、布尔值、字符串等等。因此，Javascript 不会区别对待不同类型的数据；它使用通用变量类型来存储任何类型的可用数据。

操作员

我们写的每一条语句都至少涉及到一个操作:赋值、将数据从一个地方移动到另一个地方，以及加法和减法就是几个例子。为了执行操作，我们需要操作符。

最常见的运算符是算术运算符，但我们也有逻辑运算符、赋值运算符、布尔运算符以及许多其他运算符。我们可以将这些运算符分为六个功能类别，如下所示:

赋值
根据其右操作数的值，给左操作数赋值。

逻辑
根据逻辑运算符返回一个逻辑值。

比较
根据比较运算符返回一个逻辑值。

组合
返回结果，不影响任何一个操作数，包括字符串和数学运算符。

按位
根据被视为 32 位值序列的操作数返回一个数值。

不属于标准组的其他类型
运算符包括逗号运算符(，)，点运算符(。)，条件运算符(？😃、删除运算符(Delete)、新建运算符(New)、in 运算符(In)、Typeof 运算符(typeof)、Instanceof 运算符(instanceof)和 void 运算符(Void)。

通常，运算符需要一个或多个操作数作为值和一个输出，下面是一个简单的(数学)表达式结构示例:

"operand""operator""operand""operator""output" 90 + 10 = 100

Table 7–41 列出了一些最常见的 Javascript 运算符。

在 Javascript 中，和在其他编程语言中一样，我们有操作符优先级，这意味着一些操作符被认为比其他操作符更重要。一个运算符越重要，它的优先级就越高，这意味着它在任何其他优先级较低的运算符之前执行。

score = 100 + 100 * 2;                // score value is 210 score = (100 + 100) * 2;                  // score value is 400

从我们的例子中可以看出，如果我们需要创建一个特定的顺序，我们可以像在数学运算中经常做的那样使用括号。

最后一个例子是条件运算符，其一般语法如下:

Condition ?true : false

本质上，我们有一个条件，我们指定如果条件为真会发生什么，如果条件为假会发生什么。

vargameScore = 500; varhighScore = 350; highScore = (game >highScore) ? gameScore : hightScore;

在我们的例子中，我们展示了带有条件操作符的赋值。首先，我们测试游戏分数是否高于现有的高分。在这种情况下，500 大于 350，条件运算符返回 500 并将其赋给变量 highScore，从而更新最佳记录值。

条件语句

每当我们使用一种编程语言时，我们需要问和回答两个问题{它们是什么？].与其他语言一样，在 Javascript 中，我们有一些条件语句来满足这些需求。第一个条件语句是if语句，如下面的代码示例所示:

if (condition) { // action code here }

if语句在括号中有一个条件。如果条件为真，将执行大括号中的代码。大括号中的代码部分是语句的主体。写一个if语句不需要花括号，但是不使用花括号的方法被认为是一个不好的实践，因为代码的可读性会随着代码复杂性的增加而降低。

条件只能评估为真或假。为了实现这一点，我们通常使用如下例所示的运算符:

if (a<10) { // action code here } if (b==10) { // action code here } if (c!=10) { // action code here }

if语句使我们只能处理一个选择:如果条件为真，就做点什么。如果我们需要主案例的替代方案，我们可以使用if-else语句。使用if-else语句，如果条件测试返回 false，则执行 else 分支。

if (condition) { // action code here } else {         // action code here }

接下来，我们来看一个简单的if-else语句。我们使用分数变量创建两个选项:

`var score = 500;

if (score>100) {
alert("Congrats, New Record!");
} else {
alert("Sorry, Try Again!");
}`

在 Figure 7–20 中，我们可以看到在 Safari Mobile 上运行上述代码时会发生什么。

图 7–20。 动作中的条件 if 语句

我们也可以嵌套if或if-else语句，但是最好不要超过两层嵌套语句，因为这样会降低代码的可读性。

if (condition) { // action code here } else {         // action code here         if (condition) {                 // nested code here         } }

如果我们有一个逻辑复杂的 Javascript 代码，与其使用深度嵌套的条件语句，不如将它拆分开来，在不同的函数中实现。

循环语句

通常我们需要多次执行我们的代码，比如当我们改变多个元素的背景，在一些特定的上下文中隐藏多个元素，等等。最基本的循环是在while语句中实现的。

while(condition) {     // action code here     increment/decrement operator }

在 while 循环中，我们执行语句体，直到条件为真。递增/递减运算符保证while在有限次数后退出；否则，while执行什么无限循环。

`var a = 1;

while(a<10) {
    alert(a);
    a++;
}`

另一个循环语句是do-while。do-while语句是while语句的变体，但有一个重要的区别。do-while语句总是至少执行一次。

`var a = 1;

do {
    alert(a);
    a++;
} while(a<10);`

do-while至少执行一次，因此语句体出现在条件之前，这意味着第一次执行语句体，之后才第一次检查条件。

我们研究的最后一个循环语句是for语句。for语句获取我们在 while 语句中使用的所有逻辑部分，并将它们压缩成一行。出于这个原因，我们总是可以将一个for语句转换成一个while语句，反之亦然。

for(index variable; condition, increment/decrement) {         // action code here }

下面的代码显示了一个for循环的实现，它使用了在while语句中使用的相同逻辑部分:

for(vari=1; i<10; i++) {     alert(a); }

for语句在 Javascript 中很常见，正如我们所见，它也类似于while语句。只有经验告诉我们什么时候for语句比while语句更好，反之亦然。

功能

当我们的代码变得大而复杂时，将大的 Javascript 元素分解成更小的可重用的模块化部分被认为是一个好的实践。我们通过提取 Javascript 代码的不同部分，将它们包装起来，并给它们命名来实现这一点。这是创建 Javascript 函数背后的逻辑方法。

functionfunctionName() {         // actiondoce here }

Function是用于创建函数的保留字。接下来，我们选择一个名称，后跟括号。圆括号中是函数希望将数据传递给它的地方；在这种情况下，该函数不接受任何数据。

声明函数后，我们可以在 HTML 代码中使用它的名字调用它，如下例所示。

functionName();

编写我们的函数代码并没有正式告诉我们在哪里插入 Javascript 代码，因为 Javascript 引擎在运行任何东西之前首先扫描整个代码检查函数。然而，在我们的 Javascript 文件上定义一个函数，然后在以后调用它被认为是一个好的实践。

functionfunctionName() {         // action here } … … … … … … … … … functionName();

一个函数也可能有一个或多个参数。这些在括号中指定，如下例所示:

functionfunctionName(parameters) {         // action here }

在下一个示例中，我们编写了一个 sum 函数，它接受两个参数，并使用警告框返回总和:

`

<head>          <title>Javascript Test</title> </head>` `<body>         <h1>Javascript Test Page</h1> <script>                     function sum(a,b) {                             varmySum = a+b;                             alert(mySum);                     }                     sum(10,15); </script> </body> </html>`

在 Figure 7–21 中，我们可以看到使用 Safari Mobile 测试的结果。

图 7–21。sum()函数在起作用

在 Javascript 中，我们不需要从函数中返回任何类型的值，但是如果我们需要从函数中发回信息，我们可以使用 return 保留字，如下所示:

function sum(a,b) { varmySum = a+b;         alert(mySum);         returnmySum; }

可变范围

变量作用域的概念是指某些变量可访问的区域。变量作用域是每种编程语言的一个基本概念，还涉及到其他几个概念。一个变量可以有局部作用域或全局作用域。

局部变量有一个局部作用域，并且是在函数中声明的变量，这意味着我们不能从函数外部访问这个变量。这种变量一直存在，直到函数结束。另一方面，我们有一个全局范围，其中变量在脚本块的顶级块中声明，在脚本块中声明的任何类型的函数之外，并且可以从文档中的任何地方访问。这种变量会一直存在，直到文档关闭。

在编写sum函数时，我们使用变量mySum来存储求和结果。函数中声明的每一个变量都是局部变量，这意味着它只局限于局部变量，不存在于函数本身之外。在这种情况下，mySum是一个具有局部范围的局部变量，在函数外部是不可见的。

varmySum; function sum(a,b) { mySum = a+b;         alert(mySum);         erturnmySum; }

如果我们需要一个在整个代码中都可见的变量，我们需要在函数之外声明这个变量。在这种情况下，该变量是一个全局变量。在前面的例子中，我们在函数外部声明了mySum，并在函数体中赋值 add 结果。

在 Javascript 中，变量作用域只能是全局的或局部的。对于那些使用其他编程语言的人来说，这可能听起来有点奇怪，但是正如我们前面提到的，Javascript 是一种有意限制的语言，它专注于并面向其目标:操纵网页。

数组

到目前为止，我们已经学习了如何在变量中存储值。有时我们需要在同一个对象中存储多个值。这种类型的对象是一个数组，可以使用以下两种语法之一来声明。

var myArray = [];                // shorthand declaration var myArray = new Array();       // longhand declaration var myArray = Array(); // longhand declaration var myArray = Array(5); // array with 5 slots

在 Javascript 中，我们可以创建一个元素数量固定的数组(如我们前面的一个例子所示)，但在 Javascript 中，数组是动态的，在这种语言中，数组的值不是固定的或指定的。

因为数组是对象，所以我们可以检索它们的属性。在 Table 7–42 中，我们可以看到这些数组属性。

因为数组是对象，所以它们也有方法。在 Javascript 中，我们可以将方法视为属于对象的函数。可以使用以下语法调用方法。

objectName.methodName();

在 Table 7–43 中，我们可以看到对称为数组的对象类型进行操作的方法。

数组是 Javascript 中最常用的对象之一，事实上几乎无处不在，主要是因为大多数数组都是由 Javascript 引擎创建的，用于处理各种不同的情况。稍后当我们使用 DOM 时，我们会看到更多这方面的内容。

字符串

为了给变量赋值，我们需要用引号或双引号将单词或短语括起来。两种类型的引号都是允许的；不允许混淆引号，如下例所示:

varmyString = "double quoted string";       // correct syntax varmyString = "single quoted string";       // correct syntax varmyString = 'mixed quoted string";        // incorrect syntax

如果我们使用单引号，并希望在字符串中插入引号或双引号，我们需要使用反斜杠前缀，以便告诉 Javascript 引擎关闭字符串。

varmyString = "don't use single quotes";       // correct syntax varmyString = 'don't use single quotes';       // incorrect syntax varmyString = 'don\'t use single quotes';      // correct syntax

字符串可以被当作数组对象(字符数组)来处理，并应用于它，方法之一是我们之前看到的数组。出于同样的原因，字符串对象与数组对象具有相同的属性，如表 7–44 所示。

同样，字符串对象也有对这种类型的 Javascript 对象进行操作的方法。字符串对象方法如表 7–45 所示。

记住 Javascript 是区分大小写的，这在我们处理字符串时很重要。

物体

如前所述，Javascript 支持对象的概念。一个对象可以被想象成各种数据和行为的容器。例如，数据存储在变量或数组中，而行为由方法和函数表示。

图 7–22。 (左)三个变量和三个对象的属性(右)

在 Figure 7–22 中，我们看到了如何将变量包装到一个容器(一个对象)中。一旦我们这样做了，数据在容器对象中就更深了一层。如果我们需要访问一个对象中的数据，我们可以使用下面的语法。当一个变量在一个对象之外时，它被称为“变量”，当它在一个对象之内时，它被称为“属性”

`var player = new Object();        // create a new object called "player"
player.name = "Andrea";
player.score = 500;
player.scoreRank = 1;

objectName.propertyName // generic syntax for property declaration`

当我们声明一个 Javascript 对象时，我们也可以使用简写，如下例所示。我们声明一个变量，并给它分配一组用大括号括起来的属性。

var player = { name:"Andrea", score: 500, scoreRank:1 }

在大括号中，我们使用三个名称/值对来创建与我们之前使用四行不同的代码创建的对象相同的对象。

BOM(浏览器对象模型)

浏览器对象模型(BOM)描述了使用浏览器的方法和界面。浏览器本身是一个对象，可以通过引用顶级对象窗口从其顶部到底部状态栏进行访问。从顶级对象窗口中，我们可以访问包含在其他(子)对象中的重要信息，如下所示:

导航器
包含关于浏览器引擎类型或版本的信息。

位置
保存当前浏览器中显示的网址。

历史
包含浏览器的历史列表。

框架
提供了当前页面内框架的数组。

文档
代表浏览器中的当前页面。

因为 BOM 没有官方标准，每个浏览器为这些和其他对象定义自己的属性和方法；然而，BOM 提供了一些事实上的标准，比如有一个窗口和一个导航对象。请注意 BOM 是如何覆盖 DOM 所覆盖的文档的，从而产生了重叠效果。在这种情况下，我们可以说，在我们的 WebApp 中，我们将始终使用 DOM 来访问和修改文档元素。

DOM(文档对象模型)

DOM 代表文档对象模型。“文档”一词不是指整个 WebApp，而只是指它的单个网页。“对象”一词指的是文档的单个部分，指的是所有可以作为单个部分进行操作的事物。在 Figure 7–23 中，我们可以从“商店”用例中看到页面的单个对象。单个对象可以是一个标题元素、一个完整的有序列表，或者是同一个无序列表中的单个元素，甚至是整个文档。

图 7–23。 开发者视图(右)和设计视图(右)在一些文档的对象上

单词“模型”指的是表示网页的图表。此图基于连接文档各个部分的树形结构；每个单独的部分都是一个节点，在图 7–24 的示例中有所表示。

图 7–24。 节点结构(左)和视觉设计结构(右)

图中的一个节点可以有一个由直接在其上面的节点表示的父节点，也可以有直接在其下面的节点表示的子节点。模型指的是页面图结构，但它实际上只是一组我们可以达成一致的术语和一组我们可以使用的标准。

这意味着到目前为止我们所定义的是一组一致同意的术语(模型)，描述了如何与网页(文档)的单个部分(对象)进行交互。DOM 不是一种语言；这是一个约定，因为 Javascript 同意这一点，所以它在 Javascript 中可用。

DOM 以节点的形式工作，我们不仅有代表单个文档元素的节点，还有代表一个节点可能具有的各种属性的节点。官方的 Javascript 中有十二种类型的节点，但实际上我们只对其中的三种感兴趣:元素、属性和文本节点。在 Figure 7–25 中，我们可以看到一个无序列表的 DOM。

图 7–25。 代码(左)及其 DOM 结构(右)

这里要把握的要点是，节点不包含(直接)属性或文本。根据 DOM，与包含一些文本或属性的元素相关的每个节点都有一个文本或属性的子节点。

现在我们来看看如何使用 DOM。

比较 DOM 和 HTML 结构

正如我们前面看到的 DOM 映射一样，HTML 文档有一个分层树，其中单个 HTML 元素是树的节点。虽然这是真的，但澄清 HTML 层次结构与 DOM 层次结构不同是很重要的。每个 HTML 元素都有自己的属性，这些属性不在 HTML 层次结构中表示，但是为了被访问，必须在 DOM 节点层次结构中表示。下面的例子说明了这一点:

`
        
              
        
        
                      

                      

The DOM Structure

                      

Loremipsum dolor sit amet

                

        

`

在 Figure 7–26 中，我们可以看到 HTML 和 DOM 结构之间的比较。

图 7–26。 HTML 和 DOM 结构对比

Figure 7–26 还显示了 HTML 元素结构中没有表示的 HTML 属性是 DOM 结构中的一种特殊节点，因为它们不参与父子关系。然而，它们仍然是对象，因此可以通过 Javascript 调用来访问。Table 7–46 显示了 Javascript 中最常见的节点类型。

使用 DOM

DOM 是按照节点工作的，所以对我们来说，主要问题是:我们如何获取这些节点中的一个？关键的考虑是节点是否是唯一的，因此它是否有 ID。如果我们要寻找的元素有一个惟一的 ID，我们可以使用 DOM 中最重要的方法:

document.getElementById("elementId");

我们使用该方法的方式是将它与存储返回元素的变量声明结合起来，如下例所示。

varmyElement = document.getElementById("edgeMenu");

在这种情况下，该方法返回用于 Figure 7–26 中的前一个示例的无序列表。在 Table 7–47 中，我们可以看到 DOM 定义的三个最有用的方法。

如果我们使用getElementByTagName(),，我们可以通过一次方法调用来获取一组元素。在这种情况下，Javascript 创建一个数组并插入所有返回的元素。getElementByTagName()的语法如下，这段代码返回文档中所有的<li>元素。

varmyListElements = document.getElementsByTagName("li"); myListElements[3];        // return the fourth links in position three inside the array

在我们的示例中，我们在文档对象上使用 getElementById 和 getElelmentsByTagName 方法，但是我们在文档的所有对象上使用它们。在下一个例子中，我们不需要文档中的所有链接，只需要特定菜单中的链接。

varmyEdgeMenu = document.getElementsById("edgeMenu"); varedgeMenuLinks = myEdgeMenu.getElementsByTagName("li");

首先，我们使用 ID 获取edgeMenu元素，然后在这个节点上调用getElementsByTagName()。结果是该方法只返回 edgeMenu 的< li >元素。

下一个问题是:如果我们不仅想简单地抓取一个节点，还想改变它，我们能做什么？当我们编写 HTML 代码时，我们可以修改元素的属性，有时甚至添加一个或多个属性。例如，改变图像的 src 属性或标题中的链接，或<div>或列表中的一些其他属性。

一旦我们获取了一个元素，我们可以使用两种不同类型的元素来实现我们的目标:一种用于获取属性，另一种用于设置属性。在表 7–48 中，我们可以看到这些方法。

当我们想要获得一个属性时，我们将属性的名称以字符串格式传递给方法，并用双引号括起来。当我们想要设置一个属性时，我们传递属性的名称和属性值，通常是用双引号括起来的字符串格式。语法如下:

elementName.getAttribute("align"); elementName.setAttribute("align","left");

到目前为止，我们只改变了元素的属性，但有时我们可能不仅需要改变属性，还需要改变元素的内容。最好的方法是手动创建它，并在文档中插入单独的 DOM 节点，这样可以动态地改变页面。该过程需要两步:

1. 创建元素。
2. 将元素添加到文档中。

在下一个例子中，我们向我们的 edgeMenu 添加了一个条目，或者换句话说，我们向用于我们的菜单的<ul>无序列表添加了一个<li>元素。

varnewEdgeMenuElement = document.createElement("li"); edgeMenu.appendChild(newEdgeMenuElement);

在我们创建并向 edgeMenu 添加一个新节点后，我们可能需要向它添加文本。我们可以使用以下语法来做到这一点:

varnewMenuText = document.createTextNode("Watch TV Ads"); newEdgeMenuElement.appendChild(newMenuText);

到目前为止，我们使用了两种新方法来创建节点，在 Table 7–49 中，我们可以看到一些用于操作 DOM 树结构的有用方法。

现在，我们将相同的新项目插入到 edgeMenu 中，但这次是在第一个和第二个<li>元素之间，而不是像上一个示例中那样在末尾插入。

varnewEdgeMenuElement = document.createElement("li"); varsecondMenuItem = edgeMenu.getElementsByTagName("li") [1]; edgeMenu.insertBefore(newEdgeMenuElement, seconfItem);

第一步使用我们在前面的例子中使用的相同代码，所以我们从创建新的<li>元素开始。在第二步中，我们使用getElementByTagName方法获取edgeMenu中的第二个<li>元素，因为<li>元素没有 ID，我们在 edgeMenu 结构中指定了第二个位置。在第三步中，我们使用insertBefore方法，在edgeMenu中的第二个<li>元素之前插入新的<li>。

一些 Javascript 最佳实践

一般来说，一种编程语言有许多规则，开发人员必须遵循这些规则来编写抱怨代码。这些规则指定了创建有效代码必须编写的内容。当我们接近最佳实践时，为了创建高质量的代码，我们从必须写什么切换到应该写什么。从本质上讲，最佳实践旨在实现清晰性、可读性和意义。

命名约定

变量、函数或对象的名称应该有意义，并且应该是大写字母，第一个字母小写。对象的名称应该以大写字母开头。

拉条样式

Javascript 中的主导风格是基于 C 语言中最传统的大括号风格。如果我们有一个 If 或 while 语句，花括号在与关键字(if、while 等)相同的行上打开，代码在块中缩进，并单独在一行中封闭花括号。

功能声明

当我们声明一个函数时，我们应该总是在试图调用它之前定义它，并且我们应该总是使用花括号来定义一个块，即使在关键字之后只有一个语句(if、while 等等)。

语法

声明变量时，始终使用分号结束语句，并始终使用关键字“var”。

关于这个主题的更多信息，请使用搜索引擎并搜索 Javascript 风格指南。有来自 Mozilla、Yahoo 和 Google 的个人编写的指南。

网络标准资源

在 Table 7–50 中，我们有关于本章介绍的三种网络标准的官方资源。如果您不熟悉这些技术中的一种或多种，请继续使用以下官方资源来构建您的 web 标准基础。

总结

本章讨论了 web 标准。在第一部分中，我们介绍了 HTML5，它是构建所有网站和 web 应用的 web 标准。我们介绍了新的标记标签，并将注意力集中在新的面向语义的方法上。我们还分析了新的 HTML5 媒体标签，如<audio>, <video>,和<canvas>标签。

在第二部分中，我们介绍了新的 CSS3 属性，与旧的 CSS2 规范相比，这些属性使我们能够以更简单、更好的方式模拟原生 iOS 环境。

在第三部分，也是最后一部分，我们研究了 Javascript，查看了它的实现并研究了它的基础。

在接下来的章节中，我们将使用这些知识来实践和扩展 iPhone 和 iPad 的 HTML5、CSS3 和 JavaScript 框架。*

八、原生 iOS 环境开发

我的目标不是死时成为世界上最富有的人，而是晚上睡觉时说，我们做了一些了不起的事情。

—史蒂夫·乔布斯

在本章中，我们将了解如何在 iOS 环境中工作，如何在我们的 WebApp 中模拟它，以及如何优化它的使用。

首先，我们将建立一个环境，在本地网络上测试我们的工作。接下来，我们将介绍一个视口，看看我们如何优化它来开发全屏 web 应用。我们将解释如何创建一个跳板图标，作为原始应用，以及如何定制一个启动图像。

我们将指定将用户从桌面重定向到我们的 iPhone WebApp 和从我们的 iPhone WebApp 重定向到桌面的 JavaScript 代码，并解释一旦用户接近我们的 WebApp，如何模拟本地链接和设计元素行为。

我们还将了解如何与 iPhone 功能交互，如电话、邮件和 GPS，以及如何处理用户手势交互和设备方向变化。

设置环境

在将 aWebApp 放在一个公共的、实时的 web 服务器上之前，最好在一个私有环境中工作，使用一台台式计算机上的服务器。这种配置将使开发和测试阶段更加容易。

为了做到这一点，我们需要执行以下步骤:

1. 在/用户/用户名/站点/我的共享文件夹中创建一个文件夹
2. 前往系统偏好设置共享
3. 启用服务 Web 共享

注:iPhone 或 iPad 和台式电脑必须连接到同一个 Wi-Fi 网络，才能使用本地 URL 地址建立连接。

从现在开始，我们将把所有内容保存在这个本地文件夹中，并使用本地 URL 来访问它:desktopip address/~ folderName。

图 8–1。 共享框首选项。

Figure 8–1 显示了带有要启用的服务和要使用的 IP 地址的共享框。Figure 8–1 显示的 IP 地址与我的台式电脑相关；你的将有相同的结构，但会略有不同。

一旦设置好网络环境，就需要一个符合 HTML5 的编辑器。不幸的是，目前可用的编辑器并不都与 HTML5 语法兼容；在开始项目之前，一定要检查 HTML5 的兼容性。

定义视口

视窗是用户在看 iPhone 或 iPad 显示屏时看到的矩形区域，代表了网页设计领域的一个重要概念。视口尺寸由两个值定义:设备宽度和设备高度。正如我们在前面章节中了解到的，不同型号的 iPhone 有不同的显示分辨率；尽管如此，所有 iPhone 型号的设备宽度和设备高度值默认设置为相同的值。在纵向和横向模式下，总会有一个 320 × 480 px 的视口区域。这种方法确保了即使使用双像素分辨率，视窗元素之间的比例也保持不变，如图 Figure 8–2 所示，确保现有的 iPhone WebApps 继续按预期运行。

<meta name="viewport" content="width=640"/>

即使刚刚显示的代码没有指明，您仍然可以在 Retina 显示设备上拥有“完整的 100%真实像素”。

图 8–2。 非 WebApp(左)和 WebApp 模式(右)下的 iPhone 视窗及其部分。

视区的默认值设置为 980 像素的宽度；这个值就是具有固定宽度结构的兼容 WebApp 应该设置为 980 px 宽的原因。此外，当 viewport 标签不存在时，Safari 会将页面加载为 980 px 宽的页面，并将其缩小到 viewport。这相当于以下视区元标记声明:

<meta name="viewport" content="width=980; user-scalable=1;"/>

具有 980 px 默认值意味着旧 iPhone 型号将按大约 3.06:1 或 2.04:1 的因子缩小该值，而 iPhone4 将按 2.04:1 或 1.02:1 的因子缩小。此外，对于 iPhone 和 iPad web 的设计者和开发者来说，最好的选择是使用 viewport metatag 来让网页适合设备的宽度；在表 8–1 中可以看到视窗元标记属性。

为了实现这一点，需要使用一个称为设备宽度的常数。以下示例显示了一个 WebApp 的典型 viewport 元标记，它具有两个元键:name 和 content。

<meta name="viewport" content="width=device-width; initial-scale=1.0;   maximum-scale=1.0; user-scalable=no;"/>

这个元键内容有多个由逗号分隔的属性。常量 device-width 指的是浏览页面的设备的宽度。这意味着该值将因设备而异，如下例所示:

• 宽度=768(设备宽度，以像素为单位，适用于 iPad on)
• width = 480(iphone 4 的设备宽度，以像素为单位)
• 宽度= 320(iPhone 2G、2G、3GS 的设备宽度，以像素为单位)

您还可以决定使用常量 device-height 来匹配设备的高度而不是宽度。

另一个属性 initial-scale 设置网页加载后的初始缩放比例。默认值 1 将页面设置为 iPhone 显示分辨率。

最后一个属性 user-scalable 设置用户使用屏幕上的收缩手势缩放的能力。当设置为否时，不允许变焦。对于每个本地 iPhone 和 iPad WebApp，用户可伸缩性属性应该设置为否，而对于 iPad 兼容项目，应该设置为是。

最后，请记住，viewport metatag 不会以任何方式影响桌面 web 页面的呈现。

全屏模式应用

本机应用和 WebApp 之间的第一个也是主要的美学差异是后者中 Safari URL 栏的存在。使用 Safari 及其引擎 WebKit 提供了一种控制这种情况的方法。

图 8–3。 非 WebApp 模式下原生应用(左)和 WebApp(右)的对比。

使用支持 apple-mobile-web-app 的元标签，您可以指定浏览器来隐藏地址栏，从而为用户提供类似本机的外观和感觉。

<meta name="apple-mobile-web-app-capable" content="yes" />

只有当网页从跳板中的链接启动时，全屏模式才起作用。我们将在下一节中看到如何向 iPhone 或 iPad 跳板添加网页。

iPhone 和 iPad 的状态栏是固定的，我们无法隐藏它。尽管如此，我们可以使用下面的元标记来改变它的外观:

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

只有在先前声明了全屏模式元标签时，此元标签才起作用；否则它将被浏览器忽略。最好的方法总是根据应用的调色板来选择状态栏的样式，但是如果你想增加可见区域，唯一的选择就是使用黑色半透明的版本。从 iOS4 开始，跳板中的默认状态栏样式被设置为黑色半透明。

添加跳板图标

原生应用和 WebApp 的第二个区别是，原生应用是从主屏幕启动的，也称为跳板。我们可以通过设计一个定制的图标并在跳板上添加一个网页快捷方式来复制这种本机模式，然后直接从那里启动页面。

定制的跳板图标具有一些特定的特征；有些是“必须的”，而有些只是“应该的”，可以被认为是最佳实践。

• 尺寸:57 × 57 像素(iPhone 2G、3G、3GS)(必需)
• 尺寸:114 × 114 像素(iPhone 4 开启时)(必需)
• 尺寸:72 × 72 像素(iPad，iPad2)(必需)
• 角:90 度
• 风格:没有光泽或光泽
• 姓名:apple-touch-icon.png
• 姓名:apple-touch-icon-precomposed.png
• 格式:可移植网络图形(PNG)(必需)
• 位置:根目录(必需)

如果我们想阻止 Safari 给我们的图标添加像光泽和光亮这样的效果，我们需要使用 apple-touch-icon-precomposed.png 这个名字。

当自定义图像准备就绪时，我们可以使用以下元标记将其链接到网页:

<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>

即使从理论上讲，不同的页面可以使用不同的跳板图标，但是强烈建议你在所有的网页上只使用一个图像——一个 WebApp，一个跳板图标。

图 8–4。 添加一个跳板(主屏幕)图标。

用户可以使用 Safari 底部栏中的加号按钮“+”将跳板图标添加到他们的 iPhone 或 iPad 主屏幕，然后单击“添加到主屏幕”按钮，如 Figure 8–4 所示。

应用启动图像

一个网站，更常见的是一个 web 应用，需要几秒钟才能完全加载。我们可以使用启动图像来弥补这种延迟，启动图像也称为闪屏，在网页加载时显示。

图 8–5。 行动中的 WebApp 启动画面。

根据我们需要从图像中切掉状态栏使用的 20 像素空间的原则，这种图像必须有特定的尺寸。启动图像通常是肖像图像，为 PNG 格式，并具有以下尺寸:

• 320 × 460 px (iPhone 2G、3G、3g)
• 480 × 940 像素(iPhone4 开启时)
• 768 × 1004 像素(iPad，iPad2)

一旦我们有了启动映像，我们需要使用下面的元标记来链接它:

<link rel="apple-touch-startup-image" href="/startup-image.png">

至于跳板图标，如果我们用 metatag 链接，启动图像不需要放在根目录下；然而，这被认为是最佳实践。

应用重定向

当我们为 iOS 开发一个类似原生的 WebApp 时，我们需要记住，就可用性而言，这个优化的移动版本在大多数时候并不是用户的首选。

在 99%的情况下，当用户访问您的索引网页时，首先会发生的是 web 服务器向 web 客户端发送标准桌面版本。此外，我们需要知道用户何时从移动设备浏览，以便将他重定向到我们内容的特定移动版本。

我们可以使用两种技术之一来实现这一点:JavaScript 或 CSS。这些不是唯一可用的解决方案；我们可以非常有效地从服务器(例如 Apache 或 PHP)获得相同的结果，但是在本文中，我们将重点放在更广泛意义上的 web 标准上。因此，我们将只展示 HTML、CSS 和 JavaScript 解决方案。

我建议您在项目中使用 JavaScript 代码，但是记住在其他一些情况下，通过媒体查询进行 CSS 检测也是很有帮助的。

`

`

在这个例子中，我们使用了三个 CSS 文件——一个用于 iPhone，两个用于 iPad。我们还为台式机使用了 ipad-landscape.css 文件，最小宽度为 1025 px。

假设我们为桌面和 iPad 用户的项目开发了一个兼容版本，下面的代码将在兼容索引网页中用于将 iPhone 用户重定向到 iPhone 原生版本。

<script type="text/javascript">          if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1))         {                 document.location = "http://www.iphone.store.com/";         } </script>

JavaScript 代码将在设备“用户代理”上进行测试，检测 iPhone 和 iPod 用户。我们还需要确保 iPad 或桌面用户不会意外地浏览到 iPhone 版本，因此我们需要检测这些使用另一小段 JavaScript 代码的用户，但这次是在 iPhone 网页上。

<script language="javascript" type="text/javascript">          if((navigator.userAgent.match(/Macintosh/i)) ||          (navigator.userAgent.match(/Windows/i)) ||          (navigator.userAgent.match(/Linux/i)))                 {                     location.replace("http://www.store.com/");                 } </script>

这一次，JavaScript 代码将检测 Macintosh、Linux 和 Windows“用户代理”,并将这些桌面用户重定向到他们的特定版本。

图 8–6。 WebApp 重定向在行动:从桌面到移动(iPhone)版本。

设置头部

到目前为止开发的所有代码都将被插入到我们网页的<head>中。现在是时候鸟瞰整个<head>部分了。以下代码是基于 iWebKit 5.0.4 的 Apple Store 用例的<head>。

`

`

代码故意不包含任何类型的 SEO 元标记，因为我们将在第十章的中介绍这个主题。现在，我们将跳转到我们网页的<body>部分；在下一节中，我们将看到如何与苹果移动设备提供的本地服务进行交互。

本地链接仿真

默认的 Safari mobile 行为为每个被点击的链接提供一种透明的高亮颜色作为活跃状态。当设计一个网站时，这个特性可能是有用的，但是当在一个 WebApp 上工作时，可能有许多设计良好的按钮，这个特性在视觉上不会有吸引力。我们可以使用下面的 CSS 规则覆盖这个默认的 Safari 行为:

* {         -webkit-tap-highlight-color: rgba(0,0,0,0); }

此 CSS 规则的语法使用“*”符号，以便将其附加到所有活动的设计元素。我们包含了使用 alpha 通道的 RGBA 代码，并为元素指定了总的透明颜色。

原生文本仿真

Safari 的一个便利功能是它能够自动调整文本大小，并将其重新格式化，以便在小屏幕上使用。默认情况下，iOS 会覆盖网站的字体大小，以允许用户在缩放段落时阅读文本时不会出现任何问题。当设计一个类似本机的 WebApp 时，我们不需要这个特性，可以用下面的规则禁用它:

* {         -webkit-text-size-adjust: none; }

类似原生的 WebApp 是为在 iPhone 上使用而设计的，不需要 Safari 的任何帮助来提高可读性。

原生元素仿真

浏览网站时，复制和粘贴功能很有用，但对于活动链接状态，它对 WebApp 不太有用。这个特性在所有的设计元素上都是有效的，甚至可以选择网页的标题栏。下面的 CSS 规则为用户创建了一个更加舒适和类似本机的环境。

`* {
        -webkit-user-select: none;
}

.copiable {
        -webkit-user-select: text;
}`

为此，可以使用两个不同的 CSS 规则来禁用所有设计元素和文本上的复制和粘贴功能，使用另一个规则来创建 CSS 类，该类仅针对复制和粘贴功能实际上有用的一些特定情况。该规则的实现取决于所提供的内容的种类；如果我们有很多“可复制”的文本，有时颠倒一下规则是有用的。

图 8–7。 原生设计元素仿真:无用的复制和粘贴特征在起作用。

当我们使用 WebApp 时，另一个有用的禁用功能是默认的 Safari 标注行为。每次用户触摸并按住链接等元素时，浏览器都会显示一个包含链接信息的标注，例如在另一个窗口中打开它。我们可以使用以下 CSS 规则禁用标注行为:

* {         -webkit-touch-callout: none; }

我们希望防止这种行为，因为 WebApp 中使用的链接通常专用于内部导航，我们希望防止用户使用它并转到外部。如果这个规则设置为 none ，用户可以持有任何链接或图片，只要他/她想要，而不会得到默认的 Safari 行为。

本地滚动模拟

iOS5 (beta2)最重要的特性之一是支持溢出滚动的新 CSS 规则。到目前为止，滚动原生应用和滚动类似原生的 web 应用在动力上有明显的区别。对于那些想要模仿 iOS 应用的本机外观的人来说，这种行为是一个障碍。

这个新规则提供了一种在固定大小(宽度和高度)的 HTML 元素(例如 main

)中滚动内容的本地方式，并减少或消除了由实现自定义滚动所导致的 GPU 开销。该规则的实现如下:.scrollableElement {   overflow-y: scroll;   -webkit-overflow-scrolling: touch; }

位置固定和溢出滚动规则将改变 iPhone 上的布局设计方式，在本机外观和感觉模拟过程中又向前迈出了重要一步。

原生 iOS 服务交互

服务交互是开发 web 应用而不是原生应用的缺点之一。之前，我们介绍了这种选择的利弊；在本节中，我们将只关注我们能做什么以及如何实现它。

WebApp 能够与 iOS 提供的最重要、最常用的服务进行交互:电话、邮件、短信和地图。这种类型的用户交互是使用

<a href="protocolServiceScheme:protocolParameter>linkName</a>

在下一节中，我们将看到如何实现这些特殊类型的链接，为我们的 WebApp 添加额外的交互级别。

电话应用

我们可以使用以下链接语法向电话应用添加链接:

<a href="tel:1–305-555–5555">Call 1–305-555–5555</a>

使用这种语法，Safari 会自动在你的网页上创建一个电话链接。如果手机应用没有安装在设备上，如在 iPad 和 iPod 中，当触摸这种类型的链接时，我们会收到警告消息。

另一个好的做法是检查 iPhone 代理，以防止这种类型的错误。检查 iPhone 代理过滤对服务的访问，仅允许具有电话功能的 iPhone 用户。以下代码使用 JavaScript“onclick”事件处理程序执行这种类型的检查:

<a href="tel:1–305-555–5555"  onclick="return (navigator.userAgent.indexOf('iPhone')É  != -1)">1–305-555–5555</a>

iOS 仅对 RFC 2086 协议提供部分支持。这意味着，如果号码包含“*”或“#”等特殊字符，设备将不会尝试呼叫该号码。这是因为出于安全原因，iOS 没有实现tel方案中的所有特殊字符。

默认情况下，iOS 号码检测是打开的；有时，您不希望某些号码被解释为电话号码。在这种情况下，关闭 iOS 号码检测，在<head>部分添加以下元标记，告诉 iPhone 忽略它。

<meta name ="format-detection" content ="telephone=no">

需要注意的是，如果电话号码在

邮件应用

您可以使用以下链接语法向邮件应用添加链接:

<a href="mailto:info@andreapicchi.it">Andrea Picchi</a>

Safari 会自动创建一个链接，指向将在新窗口中打开的邮件应用。您也可以使用以下语法将文本直接嵌入链接将打开的电子邮件表单中:

<a href="mailto:info@andreapicchi.it?subject=Book%20Feedback&body=É Keep%20Up%20the%20Good%20Work!">Send a Feedback to Andrea Picchi</a>

iOS 实现了 RFC 236 中指定的mailto方案，并允许您使用一些可选的 mailto 属性，如 Table 8–3 所示。

从上一个代码示例中可以看出，HTTP 约定要求使用“？”人物(？主题=...)作为第一个属性，使用“&”作为其他跟随者属性(& body=...).

短信应用

我们可以使用以下链接语法向 SMS 应用添加链接:

<a href="sms:1–305-555–5555">1–305-555–5555</a>

sms方案会告诉 Safari 打开短信应用。与邮件应用不同，使用sms方案，我们不能添加文本。

目标电话号码是一个可选参数，如果我们只想用一个空白页打开 SMS 应用，我们可以使用以下语法:

<a href="sms:">Launch the SMS Application</a>

至于电话应用，如果设备上没有安装短信应用，就像 iPad 和 iPod 的情况一样，当触摸这种类型的链接时，我们会收到一条警告消息。

<a href="sms:1–305-555–5555"  onclick="return (navigator.userAgent.indexOf('iPhone')É != -1)">1–305-555–5555</a>

上述代码执行与 tel 协议相同的代理检查，以防止 iPod 用户访问基于基带的服务。

地图应用

您可以使用以下链接语法向地图应用添加链接:

<a href="http://maps.google.com/maps?q=cupertino">Cupertino</a>

地图应用没有自己的maps方案，地图链接是使用常规 HTTP 协议语法指定的。Safari 将 HTTP 请求重新路由到位于 maps.google.com 的 Google 地图服务器，然后使用地图应用打开其 HTTP 响应。

与邮件应用一样，我们可以使用“？”来组合参数，以便为地图应用提供更多信息性格。下面的例子展示了我在意大利托斯卡纳的办公室:

<a  href="http://maps.google.com/maps?q=via+dell+olmo+50,É +livorno,+italy+(Andrea+Picchi's+Office)&t=h&z=7">Andrea Picchi's Office</a>

“+”字符用于向应用传递由多个单词组成的短语，而圆括号用于创建标签。“t”参数用于指定具有“h”值的混合地图，而“z”将缩放级别设置为 7。

Google Maps 应用有一个很长的参数列表，但是 Maps 应用并不支持所有的参数。iOS 支持的谷歌地图参数如表 8–4 所示。

图 8–8。 地图应用:美国加州库比蒂诺。

触摸事件和手势交互

以前，我们看到鼠标指针不是手指，为手指而不是鼠标指针设计是多么不同。这里，我们需要做另一个范式转换，就像我们对指向概念所做的那样。

用户使用手势浏览网页，并模仿他们以前使用鼠标的行为。因此，手指动作和手势必须模仿鼠标事件。在触摸时代之前，网页上的每一个事件都只由鼠标的移动触发；按钮翻转、下拉菜单和简单链接只是这种类型交互的几个例子。

然而，手指动作生成的事件流与鼠标指针生成的事件流不同，手指事件流是由一次或多次手指触摸生成的，这取决于所选元素是可触摸的、不可触摸的还是可滚动的。

注意:每当我们使用“可触摸”这个词时，我们指的是一个“可点击”的设计元素，如链接、下拉菜单或任何在网页结构中触发标准鼠标事件的元素。

如果手指触摸了不可触摸的设计元素，则会生成事件或将事件添加到手势事件流中。出于这个原因，在为 iOS 设计时，我们需要从“面向鼠标的设计范式”切换到更合适的“面向可触摸的设计范式”。

触摸事件范例:触摸不是点击

可触摸元素由与事件处理程序相关联的设计元素定义。使用基于鼠标的 web 范例，我们可以将其定义为一个可点击的元素。

单指用户操作、双指用户操作和更复杂的手势都是在 Safari Mobile 使用的 WebKit 引擎之上构建的。WebKit 引擎在这个游戏中扮演了主要角色，提供了类似于原生 iOS SDK 内置的手势支持的触摸支持。每当用户的一个或多个手指触摸基于 iOS 的设备的电容式显示屏时，就会触发这些类型的事件。

单点和多点触摸事件模拟经典的鼠标导航，触发与鼠标相关的事件，而手势事件是在鼠标模拟事件之外捕获的，提供了额外级别的交互和可能性。WebKit 引擎和电容式显示器支持三种类型的事件:

• 单点触摸事件:由电容式显示屏上一次一次的单点触摸组成，这种类型的事件相当于 99%的基于鼠标的动作。我们将在表 8–5 中看到这些事件。
• 多点触摸事件:由显示屏不同部分的两个或多个同时触摸组成。我们将在表 8–6 中看到这些事件。
• 手势事件:由一个或多个触摸事件加上手指在电容式显示器上的特定移动组成；手势事件可使用七个 DOM(文档对象模型)事件类实现，如表 8–7 所示。

单点触摸事件

所有基本的和与浏览相关的鼠标事件通常由一两次手指触摸触发，如表 8–5 和 8–6 所示。

在表 8–5 中表示的五个单指触摸动作中的三个用图 8–9 中的流程图直观地表示出来。

图 8–9。 对比加班单指动作(流程图来自官方 Safari 参考)。

多点触摸事件

相比之下，有两个手指的触摸事件，在浏览会话中不经常使用，但对于提供可靠的用户体验来说同样重要。表 8–6 显示了双指触摸事件。

在表 8–6 中表示的三个双指触摸动作中的两个用图 8–10 中的流程图直观地表示出来。

图 8-10。 对比加班双指动作(流程图来自官方 Safari 参考)。

手势事件

手势可以由显示器上的单指或多指移动组成。到目前为止看到的单点和多点触摸动作更多地与鼠标事件相关，并模拟标准的面向鼠标的浏览会话。除了用户体验的大幅提升，这只是触控时代的一个方面——回溯兼容。真正起作用的是 Safari 和苹果 iOS 提供的手势支持，以及 iPhone 3.5 英寸和 iPad 9.7 英寸电容显示屏提供的手势支持。

手势由一个或多个手指移动组成，手势事件是由这些单个或多个手指移动触发的触摸的集合。Table 8–7 显示了该上下文中涉及的触摸和手势事件。

为了使用触摸或手势事件，我们需要将它们转换成单独的触摸。这可以通过使用每个事件的对象属性来实现。每个事件都是一个对象，每个对象都有属性。使用 Table 8–8 中显示的对象属性，我们可以触及手势事件中的每一个触摸。

因为事件对象产生标准数组，所以我们可以使用 JavaScript 数组函数和语法来访问这些属性。这意味着，如果我们想要网页上所有触摸对象的数组，我们可以使用下面的 JavaScript 语法:

event.touches;

如果我们想访问网页上的第一个触摸对象，我们可以使用下面的 JavaScript 语法:

event.touches[0];

我们知道我们需要访问单点触摸对象来操作手势事件，但是下一步呢？正如每个事件对象都有自己的属性一样，每个触摸对象都有自己的属性。

在这种情况下，如果我们想知道网页上第一个触摸对象的确切坐标，我们可以使用下面的 JavaScript 语法:

event.touches[0].pageX; event.touches[0].pageY;

一旦我们访问一个单点触摸对象，我们就可以使用它的属性，如 Table 8–9 所示，来创建各种类型的手势交互。

结合 JavaScript 代码和 CSS 属性，我们可以创建自定义触摸处理支持。每次我们编写自定义触摸处理支持时，一个好的做法是禁用默认的 Safari 行为。这将是下一节的主题。

原生和定制触摸事件处理程序

在上一节中，我们看到典型浏览会话中使用最多的事件是与鼠标行为模拟相关的事件。其中一些众所周知的活动是单指平移、缩放捏放和取消捏放，以及触摸并按住。我们还说过，Safari Mobile 支持的、与此类活动相关的大多数 DOM 事件都是由苹果 iOS 原生处理的，并且是免费提供的。

除了这些本地支持的事件之外，有时项目需要一种自定义多点触摸和手势事件的方法。在这种情况下，我们可以关闭默认的 Safari 行为，让开发人员有机会实现他的花式触摸和手势支持。例如，要防止在 iOS 2.0 中滚动元素，请按如下方式实现 touchmove 和 touchstart 事件处理程序:

function touchMove(event)         {         // prevent scrolling on this element                 event.preventDefault();         … … …         }

类似地，我们可以防止张开和合拢手势，实现如下的 gesturestart 和 gesturechange 事件处理程序:

function gestureChange(event)         {         // disable browser zoom in and out                 event.preventDefault();         … … …         }

如果我们为 touchmove 和 touchstart 事件处理程序实现该函数，我们将阻止 WebApp 中的滚动，而如果我们为 gesturestart 和 gesturechange 实现该函数，我们将阻止打开和关闭收缩。

创造可触摸的设计元素

触摸事件流是单次触摸的集合，我们知道设计元素必须是可触摸的，才能在手势动作期间加入这个流。如果我们想要与 Safari 认为不可触摸的设计元素进行交互，该怎么办？

<span onmousemove="enableTouch(event)" onclick="void(0)">Element Name</span>

付出了向代码添加非语义元素的代价，我们可以通过向元素添加一个空的 click 处理程序，将不可触摸的元素转换为可触摸的元素，如前面的代码所示。如果元素在语义 HTML5 标签中，我们可以用它来代替语义空的元素。以下示例显示了如何在通用的

元素中注册手势事件的处理程序:`<div
ongesturestart="gestureStart(event);"
ongesturechange="gestureChange(event);"
ongestureend="gestureEnd(event);"

`

在 HTML5 代码中注册处理程序后，我们可以使用 JavaScript 和以下语法实现我们的处理程序:

`function gestureStart(event) {
        /* Handler Javascript Code Here */
}

function gestureChange(event) {
        /* Handler Javascript Code Here */
}

function gestureEnd(event) {
        /* Handler Javascript Code Here */
}`

在下一节中，我们将看到一种特殊类型的手势事件；这种手势不与电容式显示器交互，而是与整个设备交互。这个手势是众所周知的和广泛使用的设备方向变化。

方向改变事件

有了 iPhone，更有了 iPad，用户可以根据自己的需要不断改变设备的方向。使用 WebApp 的框架，我们可以依靠它来支持方向变化。每次用户改变设备方向时，框架都会处理它并为我们改变布局。此外，对于一个可靠的开发人员来说，了解幕后是什么以及如何为特定的项目需求更改或添加定制行为是非常重要的。

我们可以看到设备方向的变化是一种特殊的手势，用户用他/她的整只手在整个设备上进行交互。方位变化事件由加速度计通过硬件测量。除了通知方向发生了变化，iOS 还在窗口对象中维护了一个特殊的“方向”属性，其四个值如表 8–10 所示。

窗口对象内部的方向值总是反映当前的设备方向。下面的代码向添加了一个方向处理程序，并实现了 updateOrientation JavaScript 方法来显示当前方向。

`

<head> <title>Orientation Change Test</title> <script type="text/javascript" language="javascript"> function updateOrientation() {         var displayString = "Orientation : ";         switch(window.orientation)         {                 case 0:                         displayString += "Portrait";                 break;                 case 90:                         displayString += "Landscape (left, screen turnedÉ counterclockwise)";                 break;                 case 180:                         displayString += "Portrait (upside-down portrait)";                 break;                 case -90:                         displayString += "Landscape (right, screen turned clockwise)";                 break;         }         document.getElementById("output").innerHTML = displayString; } </script> </head>         <body onorientationchange="updateOrientation();">         <div id="output"></div> </body> </html>`

每次发生 orientationchange 事件时，都会调用 updateOrientation 方法，并更新< div id="output" >元素中显示的字符串。

方位变化媒体查询

使用 orientationchange 事件是实现任何基于设备方向的切换的可靠方法，但不是唯一的方法。orientationchange 事件也为开发人员提供了选项，但是在某些情况下，我们可以不使用 JavaScript 来完成类似的事情。在这种情况下，我们将描述如何使用媒体查询。

媒体查询是由检查某些媒体特征的一个或多个条件的一个或多个表达式组成的媒体类型。这个概念与 orientationchange 使用的概念相同；将会改变的是所使用的语言及其语法。

用于 Apple Store 用例的 iWebKit 框架采用了相同的方法。下面的一小段代码展示了这个 framework style.css 文件中的一个例子。

@media screen and (max-width: 320px) {         #topbar {                 height: 44px;         }         #title {                 line-height: 44px;                 height: 44px;                 font-size: 16pt;         } }

如前所述，开发三个不同版本的 WebApp 以优化 iPhone、iPad 和桌面 PC 的硬件和软件特性，或者至少为 iPhone 开发一个移动版本，为 iPad 和桌面 PC 开发一个兼容版本，一直被认为是最佳实践。此外，下一个例子显示了一个一般情况，我们需要为同一个 web 页面处理七个 CSS 样式表。

`@media only screen and (device-width: 320px) and (orientation: portrait) {
        /* CSS Rules for iPhone 2G, 3G, 3GS in Portrait Orientation */
}

@media only screen and (device-width: 480px) and (orientation: landscape) {
        /* CSS Rules for iPhone 2G, 3G, 3GS in Landscape Orientation */
}

@media only screen and (device-width: 480px) and (orientation: portrait) {
        /* CSS Rules for iPhone4 in Portrait Orientation */
}

@media only screen and (device-width: 960px) and (orientation: landscape) {
        /* CSS Rules for iPhone4 in Landscape Orientation */
}

@media only screen and (device-width: 768px) and (orientation: portrait) {
        /* CSS Rules for iPad in portrait orientation */
}

@media only screen and (device-width: 1024px) and (orientation: landscape) {
        /* CSS Rules for iPad in Landscape Orientation */
}

@media only screen and (device-width: 980px) {
        /* CSS Rules for Fixed Width Desktop and iPad Compatible Version */
}`

Retina 显示屏及其 480 × 960 px 的显示分辨率使 iPhone 外壳的媒体查询代码稍微复杂了一些，迫使我们再添加两个外壳。在 Retina 显示屏之前，我们一直使用最小设备宽度和最大设备宽度来瞄准 iPhone 320 × 480 px 分辨率的情况。

现在，不再可能使用此选项，因为当设备宽度属性的值为“480”时，无法知道它是横向方向的旧 iPhone 2G、3G 或 3GS 还是纵向方向的新 iPhone4。此外，我们将纵向和横向测试添加到媒体查询中，当“设备宽度”设置为 480 px 时，创建两个新的案例来识别 iPhone 型号。

扩展 iOS 框架

框架是开发人员的圣杯；它们减少了开发时间，提供了构建网页所需的所有工具。框架提供了设计和开发我们的项目需求所需的构件。

因为完美是不可能的，有时候一个框架并不能满足我们所有的需求。在这些情况下，我们无法用我们的框架提供的构件来设计和开发我们特定的项目需求。当我们面临这种情况时，唯一的解决方案是扩展框架，添加和开发我们需要的东西。

iWebKit 框架在根目录中包含许多文件；关注以下内容:

• css: //样式表目录
• 图像:// ui 图像
• index.html: //索引网页
• javascript: // js 框架目录
• 拇指://网页图像

当我们开发一个项目时，我们总是需要寻找更新，包括框架核心功能和项目细节。因为开发人员可能会随时发布新版本的框架，所以我们必须尽可能地维护原始的框架结构。

如果框架更新没有显著改变其核心功能及其文件夹和文件结构，我们将很容易更新我们的 WebApp。不改变原来的框架文件和结构将允许我们上传整个框架，只覆盖一些文件和目录。

这里有一个实际的例子，说明当我们开始设计苹果商店用例时会发生什么。上下文如下:

• 问题:实现 Apple Store 用例。
• 解决方案:使用框架核心函数模拟本地应用行为。使用框架构建块来设计网页结构。当我们需要添加或设计框架模板不提供或不支持的东西时，扩展框架。

iWebKit 框架提供了一些模板，但是我们的“商店”用例与它们完全不同。因此，我们需要扩展我们的框架。我们要做的是使用框架提供的相同文件夹(保持框架目录结构不变)，并且，不是修改原始框架文件，而是添加我们需要的内容(为将来的框架更新做好准备)。尽管如此，这种方法的缺点是覆盖许多规则而不是替换它们会给框架增加更多的代码和来自我们 WebApp 的更多 HTTP 请求。正确的方法将由 WebApp 环境决定。

图 8–11。苹果商店用例:商店主页结构。

我们将处理 HTML5 结构，并将新文档与所有其他网页一起保存在根目录中。随后，我们将开始设计布局，处理保存在“css”文件夹中的 CSS 样式表。此外，我们将在“pics”文件夹中保存布局设计的所有附加图像。

• 顶栏(预定义定制)

• 标题(预定义定制)

• 面包屑(根据草图设计)

• 英雄(根据草图设计)

• 。灰色标题(预定义未修改)
• 。页面项目(预定义定制)

在 Figure 8–11 和前面的列表中，我们可以看到我们如何使用一些预定义的框架结构，只做了一些定制，同时我们需要添加一些从头开始设计的结构。

编码资源

不幸的是，市场上只有少数符合 HTML5 的编辑器。Table 8–11 指出了本章中使用的一个 HTML5 编辑器和一个有效的免费替代软件。

以下是本章介绍的三个网络标准的官方资源。如果您不熟悉这些技术中的一种或多种，我建议您继续使用以下官方资源来构建您的 web 标准基础。

总结

在本章中，我们介绍了 WebApp 的基本特征。首先，通过一些例子，我们看到了如何建立一个开发环境，然后我们介绍了典型的 web 应用特征。

我们展示了 WebApp 最重要的原生 iOS 应用以及如何与其服务交互，展示了模拟原生环境所需的所有步骤。

我们介绍了触摸事件范例，以及如何使用单点和多点触摸事件来模拟传统的鼠标浏览会话。我们还看到了更复杂的手势事件，以及在我们需要为 WebApp 开发自定义手势处理时如何防止它们。

最后，我们看到了一种特殊的手势，即设备方向的改变，如何通过 JavaScript 使用它，以及如何通过媒体查询实现类似的功能。我们看到了何时以及如何扩展框架来实现框架本身没有定义和支持的功能。

九、原生 iOS 设计实现

“如果一切都在掌控之中……那你走得还不够快！”

-马里奥安德雷蒂

在前一章中，我们阐述了如何设置 iOS 环境的要点，在本章中，我们将看到如何在“商店”用例中实现这些相同的方面。

首先，我们看看如何使用 metatags 实现 iPhone 页面模型和 WebApp 模式。在第二部分，我们一步一步地看如何实现我们用例的类本机接口。每个新元素都使用自顶向下的方法呈现，总是显示用于实现该元素的代码。

iPhone 页面模型实现

在本书关于设计的第一部分中，我们看到由于 iPhone 的显示尺寸，iPhone 网页是基于页面模型范例构建的。除此之外，我们需要在 WebApp 中设置的第一件事是页面结构。

实现类似原生的页面结构

本章中的代码是在 iWebKit 5.04 框架之上编写的，实现了我们的“商店”用例的页面结构。对于我们的用例，我们还编写了一些定制的 HTML 和 CSS 代码。我们使用标题来标记定制的 CSS 和框架代码，使用粗体文本样式来标记相关的 HTML 代码。

`

` `

/* page content will be here */

`

一些 SEO 元标签故意从我们网页的<head>中消失，因为我们想继续关注本章的主题。我们将在第十章中看到如何使用 SEO 技术优化我们的代码。

单页结构是我们未来所有网页的基础。现在，我们需要继续实现我们的“商店”用例，开始添加设计元素，模拟 iPhone 的 iOS 原生外观。

iPhone 原生界面模拟

本机界面模拟从支持 apple-mobile-web-app 的元标签开始。如果没有这个标签，我们未来的所有努力都将化为乌有，因为网页将与 iPhone 的显示尺寸不匹配，并且不会处于 WebApp 模式。

`

**** **** **

**         **

The Store

** **

**

/* page content will be here */

`

顶栏部分

在<body>部分，我们使用一个<div id="topbar">插入了类似本机的顶栏。

`… … …

<body> **<div id="topbar">**         **<div id="title">The Store</div>** **</div>**

/* page content will be here */

</body>

… … …`

然后在清单 9–1 和 9–2 中，我们覆盖了它的一些 iWebKit CSS 框架默认规则。

清单 9–1。 iWebKit 框架顶栏部分

`/* from framework style.css stylesheet */

topbar {

position: relative;
        left: 0;
        top: 0;
        width: auto;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cdd5df),É
 color-stop(3%, #b0bccd), color-stop(50%, #889bb3), color-stop(51%, #8195af),É
 color-stop(97%, #6d84a2), to(#2d3642));
        margin-bottom: 13px;
}

/* for max-width: 320px */

topbar {

height: 44px;
}

/* for min-width: 321px */

topbar {

height: 32px;
}`

清单 9–2。 自定义顶栏部分

`/* from custom iphone.css stylesheet */

topbar {

height: 44px;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#566E93),É
 to(#314F7B));
}`

根据这些规则，我们覆盖了默认的背景渐变值，并在纵向和横向方向将顶栏高度固定为 44 像素，如图 Figure 9–1 所示。

图 9–1。 “商店”用例:空白页面(左)和顶栏内的页面标题(右)

页面标题元素

在顶栏中，我们使用一个<div id="title">添加了类似于本机的页面标题，并对其进行了定制。清单 9–3 到 9–6 覆盖了默认框架值中的一些其他 CSS 规则:

`… … …

<body> <div id="topbar">      **<div id="title">The Store</div>** </div>

/* page content will be here */

</body>

… … …`

清单 9–3。 iWebKit 框架页面样式元素

`/* from framework style.css stylesheet */

title {

position: absolute;
        font-weight: bold;
        top: 0;
        left: 0;
        right: 0;
        padding: 0 10px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;         overflow: hidden;
        color: #FFF;
        text-shadow: rgba(0,0,0,0.6) 0 -1px 0;
        }`

清单 9–4。 自定义页面标题元素

`/* from custom iphone.css stylesheet */

title {

color: #FFF;
        font-family: "Lucida Grande", Helvetica;
        font-size: 30px;
        text-shadow: #3B4C66 0 1px 0;
}`

清单 9–5。 iWebKit 框架页面样式元素

`/* from framework style.css stylesheet */

/* for max-width: 320px */

title {

line-height: 44px;
        height: 44px;
        font-size: 16pt;
}

/* for min-width: 321px */

title {

line-height: 32px;
        height: 32px;
        font-size: 13pt;
}`

清单 9–6。 自定义页面标题元素

`/* from custom iphone.css stylesheet */

title {

color: #FFF;
        font-family: "Lucida Grande", Helvetica;
        font-size: 30px;
        text-shadow: #3B4C66 0 1px 0;
}`

注意我们在设计阶段是如何使用 Helvetica 字体而不是 Myriad Pro 的。Myriad Pro 是一种商业字体，不能免费使用。

注意:与 Helvetica 字体不同，Myriad Pro 不在 iOS 字体堆栈中。如果要使用这个字体，除了购买，还需要使用@font -face CSS3 属性，如第七章所示。

标题标签练习

iWebKit 5.04 框架不使用 HTML 标题标签(例如 h1、h2、…、h6)来构成标题部分。< h1 >标题标签定义了页面最重要的标题，而< h6 >标题标签定义了最不重要的标题。在本章的最后，尝试实现这些标签。

• 使用

  标签，而不是 iWebKit 5.0.4 框架使用的标准。

• 根据文本语义，必要时添加其他标题标签。

对“商店”用例的另一页重复相同的方法。您可以从 Apress 网站下载用例源代码。

面包屑栏

添加到页面结构的第二个设计元素是面包屑栏，使用<div id="breadcrumb">添加，如下所示:

`

<title>The Store (U.S.)</title> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667,É  user-scalable=no" name="viewport" /> <link href="css/style.css" rel="stylesheet" media="screen" type="text/css" /> <link href="css/iphone.css" rel="stylesheet" media="screen" type="text/css" /> <link href="startup-image.png" rel="apple-touch-startup-image" /> <link href="apple-touch-icon.png" rel="apple-touch-icon" /> <script type="text/javascript" src="javascript/functions.js"></script> </head> <body> <div id="topbar">         <div id="title"> The Store</div> </div> **<div id="breadcrumb">**         **<a href="index.html"><img src="pics/breadcrumb_house.png" width="20" height="16" /></a>**         **<img src="pics/breadcrumb_arrow.png" width="22" height="16" />**         **<a href="index.html"><img src="pics/breadcrumb_home.png" width="35" height="16" /></a>**         **<img src="pics/breadcrumb_arrow.png" width="22" height="16" />**         **<a href="#"><img src="pics/breadcrumb_shop.png" width="32" height="16" /></a>** **</div>**

/* other page content will be here */

`

面包屑包含三种图像:房屋图标、分隔符箭头和页面名称，如图 Figure 9–2 所示。在最后一个链接中，href属性没有任何值(" # ")，因为它引用了实际加载的页面。

图 9–2。 【商店】用例:面包屑栏(左)和英雄内容区(右)

breadcrumb 不是 iWebKit 框架提供的设计结构。因此，我们没有覆盖 CSS 样式表中的任何默认值；相反，我们从清单 9–7 中所示的草图发展而来。

清单 9–7。 自定义面包屑栏

`/* from custom iphone.css stylesheet */

/* from custom iphone.css stylesheet */

breadcrumb {

background: #FFF;
        border-bottom: 1px solid #676767;
        font-family: "Lucida Grande", Helvetica;
        font-size: 11px;
        height: 16px;
        margin: -13px 0px 13px;
        text-align: center;
}`

英雄内容区

在面包屑下面，我们有另一个由 sketch 发展而来的设计元素，即英雄内容区域。使用一个<div id="hero">元素添加英雄内容，它包含三个图像链接，如下所示:

`

<title> The Store (U.S.)</title> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667,É  user-scalable=no" name="viewport" /> <script src="javascript/functions.js" type="text/javascript"></script> <link href="css/style.css" rel="stylesheet" media="screen" type="text/css" /> <link href="css/iphone.css" rel="stylesheet" media="screen" type="text/css" /> <link href="startup-image.png" rel="apple-touch-startup-image" />` `<link href="apple-touch-icon.png" rel="apple-touch-icon" /> <script type="text/javascript" src="javascript/functions.js"></script>

        

The Store

**

**         ****         ****         ****         ****         **** **

** **

**         ****         ****         **** **

**

/* other page content will be here */

`

“商店”用例通常有三个带有三个不同关联链接的图像，以提高用户体验水平，让他或她在站点地图中从一个点跳到另一个点有更多的选择。此外，这取决于开发人员以不同的方式处理这个机会。在清单 9–8 中，我们可以看到用于设计这个元素的 CSS 样式表。

清单 9–8。 自定义内容英雄区

`/* from custom iphone.css stylesheet */

/* from custom iphone.css stylesheet */

hero {

border: 1px solid #676767;
        border-top: none;
        background: #FFF;
        font-family: "Lucida Grande", Helvetica;
        font-size: 12px;
        height: 150px;
        margin: -13px 10px 13px 10px;
        padding-top: 4px;
        text-align: center;
        -webkit-border-bottom-left-radius: 10px;
        -webkit-border-bottom-right-radius: 10px;
}`

现在，我们进入网页的下半部分，专门讨论内容。在此特定页面上，内容仅由菜单表示，但在其他商店页面上，使用此部分可以添加任何种类的内容。

`

<title>The Store (U.S.)</title> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667,  user-scalable=no" name="viewport" /> <link href="css/style.css" rel="stylesheet" media="screen" type="text/css" /> <link href="css/iphone.css" rel="stylesheet" media="screen" type="text/css" /> <link href="startup-image.png" rel="apple-touch-startup-image" /> <link href="apple-touch-icon.png" rel="apple-touch-icon" /> <script type="text/javascript" src="javascript/functions.js"></script> </head> <body> <div id="topbar">         <div id="title"> The Store</div> </div> **<div id="breadcrumb">**         **<a href="index.html"><img src="pics/breadcrumb_house.png" width="20" height="16" /></a>**         **<img src="pics/breadcrumb_arrow.png" width="22" height="16" />**         **<a href="index.html"><img src="pics/breadcrumb_home.png" width="35" height="16" /></a>**         **<img src="pics/breadcrumb_arrow.png" width="22" height="16" />**         **<a href="#"><img src="pics/breadcrumb_shop.png" width="32" height="16" /></a>** **</div>** <div id="hero">         <a href="shop-iphone.html"><img src="pics/hero_iphone4.png"/></a>         <a href="shop-ipad.html"><img src="pics/hero_ipad.png"/></a>         <a href="shop-ipod.html"><img src="pics/hero_ipod.png"/></a> </div> **<div id="content">**         **<span class="graytitle">Browse Store</span>**         **<ul class="pageitem">**                 **<li class="menu">**                         **<a href="shop-mac.html">**                                 **<img src="pics/menu_mac.png" />**                                 **<span class="name">Shop Mac</span>**                                 **<span class="arrow"></span>**                         **</a>**                 **</li>**                 **<li class="menu">**                         **<a href="shop-ipod.html">**                                 **<img src="pics/menu_ipod.png" />**                                 **<span class="name">Shop iPod</span>**                                 **<span class="arrow"></span>**                         **</a>**                 **</li>**                 **<li class="menu">**                         **<a href="shop-iphone.html">**                                 **<img src="pics/menu_iphone.png" />**                                 **<span class="name">Shop iPhone</span>**` `                                **<span class="arrow"></span>**                         **</a>**                 **</li>**                 **<li class="menu">**                         **<a href="shop-ipad.html">**                                 **<img src="pics/menu_ipad.png" />**                                 **<span class="name">Shop iPad</span>**                                 **<span class="arrow"></span>**                         **</a>**                 **</li>**         **</ul>** **</div>**

/* other page content will be here */

`

菜单区

菜单区域被包裹在<div id="content">中，包含两个主要设计元素:标题和菜单，如图图 9–3 所示。

图 9–3。 “商店”用例:菜单标题(左)和边到边导航(右)

我们使用<div class="graytitle">插入菜单标题。该元素由 iWebKit 框架提供，并由清单 9–9 中的 CSS 规则定义样式。

清单 9–9。 菜单标题元素

`/* from framework style.css stylesheet */

.graytitle {
        position: relative;
        font-weight: bold;         font-size: 17px;
        right: 20px;
        left: 9px;
        color: #4C4C4C;
        text-shadow: #FFF 0 1px 0;
        padding: 1px 0 3px 8px;
}`

在标题下面，我们有典型的 iPhone 边缘到边缘导航包裹在<ul id="pageitem">里面。该元素也由 iWebKit 框架提供，并由清单 9–10 中的 CSS 规则定义样式:

清单 9–10。 边到边导航区

`/* from framework style.css stylesheet */

.pageitem {
        -webkit-border-radius: 8px;
        background-color: #FFF;
        border: #878787 solid 1px;
        font-size: 12pt;
        overflow: hidden;
        padding: 0;
        position: relative;
        display: block;
        height: auto;
        width: auto;
        margin: 3px 9px 17px;
        list-style: none;
}
.pageitem li:first-child, .pageitem li.form:first-child {
        border-top: 0;
}
.pageitem li:first-child:hover, .pageitem li:first-child a {
        -webkit-border-top-left-radius: 8px;
        -webkit-border-top-right-radius: 8px;
}
.pageitem li:last-child:hover, .pageitem li:last-child a {
        -webkit-border-bottom-left-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
}`

这个无序列表的列表项是单个菜单项。每个条目都是使用一个<li class="menu">添加的，并且由一个链接元素中的三个元素组成，如图 9–4 中的所示。

图 9–4。 【商店】用例:边到边菜单结构(左)和页脚(右)

每个链接<a>元素包含一个图像<img>，一个文本<span class="name">，以及另一个作为<span="arrow">元素背景图像插入的图像。在下文中，我们将单个菜单项代码分离出来，以便更好地理解它的结构。为了与菜单布局保持一致，每个菜单链接必须有三个相同图像宽度的图像。

`… … …

                                                 /* icon  */                 Shop iPhone            /* text */                                       /* arrow */         

… … …`

页脚部分

页面中的最后一个设计元素是页脚。在我们的“商店”用例中，页脚是最小的，只包含苹果标志。使用<div id="footer">添加页脚，并根据清单 9–11 中的 CSS 规则设置样式。

清单 9–11。 页脚部分

`/* from framework style.css stylesheet */

footer {

text-align: center;
        position: relative;
        margin: 20px 10px 0;
        height: auto;
        width: auto;         bottom: 10px;
}`

下面的代码展示了包括页脚在内的整个“商店”用例页面结构。

`

<head>         <meta charset="utf-8" />         <title>The Store (U.S.)</title>         <meta name="apple-mobile-web-app-capable" content="yes" />         <meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667,É          user-scalable=no" name="viewport" />         <link href="css/style.css" rel="stylesheet" media="screen" type="text/css" />         <link href="css/iphone.css" rel="stylesheet" media="screen" type="text/css" />         <link href="startup-image.png" rel="apple-touch-startup-image" />         <link href="apple-touch-icon.png" rel="apple-touch-icon" />         <script type="text/javascript" src="javascript/functions.js"></script> </head> <body> <div id="topbar">         <div id="title"> The Store</div> </div> <div id="breadcrumb">         <a href="index.html"><img src="pics/breadcrumb_house.png" width="20" height="16" /></a>         <img src="pics/breadcrumb_arrow.png" width="22" height="16" />         <a href="index.html"><img src="pics/breadcrumb_home.png" width="35" height="16" /></a>         <img src="pics/breadcrumb_arrow.png" width="22" height="16" />         <a href="#"><img src="pics/breadcrumb_shop.png" width="32" height="16" /></a> </div> <div id="hero">         <a href="shop-iphone.html"><img src="pics/hero_iphone4.png"/></a>         <a href="shop-ipad.html"><img src="pics/hero_ipad.png"/></a>         <a href="shop-ipod.html"><img src="pics/hero_ipod.png"/></a> </div> <div id="content">         <span class="graytitle">Browse Store</span>         <ul class="pageitem">                 <li class="menu">                         <a href="shop-mac.html">                                 <img src="pics/menu_mac.png" />                                 <span class="name">Shop Mac</span>                                 <span class="arrow"></span>                         </a>                 </li>                 <li class="menu">                         <a href="shop-ipod.html">                                 <img src="pics/menu_ipod.png" />                                 <span class="name">Shop iPod</span>                                 <span class="arrow"></span>                         </a>                 </li>                 <li class="menu">` `                        <a href="shop-iphone.html">                                 <img src="pics/menu_iphone.png" />                                 <span class="name">Shop iPhone</span>                                 <span class="arrow"></span>                         </a>                 </li>                 <li class="menu">                         <a href="shop-ipad.html">                                 <img src="pics/menu_ipad.png" />                                 <span class="name">Shop iPad</span>                                 <span class="arrow"></span>                         </a>                 </li>         </ul> </div>

        

`

总结

在本章的第一部分，我们看到了如何使用“商店”用例实现 iPhone 页面模型范例。

在本章的第二部分，我们在实践中看到了如何在 WebApp 中模拟本地应用接口。我们一步一步地看到了为 WebApps 的基本设计元素添加代码的整个过程。

我们的“商店”用例的完整代码可以在 Apress 网站上获得。

十、优化 iOS WebApps

完美不是在没有更多可以增加的时候，而是在没有更多可以减少的时候

-安托万·德·圣-exéry

这一章是关于网页优化和搜索引擎优化(SEO)。首先我们讨论 iPhone 和 iPad 的兼容性，然后我们展示如何优化 WebApp 的性能。我们还建议了一些优化代码、减少 HTTP 请求和最小化 DOM 访问的规则。

然后，我们演示如何压缩 WebApp，优化其可用性，并使其能够离线工作。最后，我们看看 WebApps 的移动 SEO 方法，首先分析搜索引擎的结构，然后探索如何实现面向搜索引擎的设计。我们也看看 Google 算法背后的原理和一些有用的移动 SEO 工具。

iPad 和 iPhone 的兼容性

除了 iPhone 和 iPad 用户的用户体验完全不同这一事实之外，好的优化背后的大多数概念对这两种设备来说是共同的。

这些概念中的一些以不同的方式实现，以便优化设备的特定方面，而其他概念同样适用于提高用户体验的水平。

性能优化

优化我们的 WebApp 的性能不是一种我们只能在项目工作流程结束时执行的开发方法。与测试阶段一样，它在项目的整个过程中都是适用的。显然，在开发阶段的最后，我们对我们的 WebApp 应用了一些优化技术，但是为了减少错误和缩短整个开发时间，从一开始就结合一些好习惯是最有效的(见图 10–1)。

图 10–1。 在整个项目工作流程中应用优化最佳实践

当我们优化我们的网页时，知道什么可以优化是很重要的。对于那些了解维尔弗雷多·帕累托原理的人来说，你也知道 80%的结果来自 20%的原因，这意味着如果不知道我们的优化过程的确切目标是什么，将很难获得积极的结果。

接下来，我们将了解一些以规则形式呈现的最佳实践，以便清楚地展示适用于我们 WebApp 的性能优化流程的实用方法。

代码优化

代码优化是任何类型的优化技术的第一步，因为一切都基于代码——一切都编码在我们的网页中。好的代码可以节省带宽，减少渲染延迟，并随着时间的推移提高页面的可读性和可维护性。

以下是在我们的 WebApp 中编写任何类型的代码时要记住的一些最佳实践。

规则 1:使用网络标准投诉代码

使用 HTML5、CSS3 和 JavaScript 兼容代码。除了干净的 HTML5 语法，这还意味着在页面的<head>部分插入我们的样式表，并且(除了到 iWebKit 框架的链接)在我们的网页底部插入 JavaScript。这是因为页面顶部的样式表大大加快了加载时间。另一方面，在网页底部插入 JavaScript，这样 JavaScript 代码就不会阻塞 HTTP 请求。这是因为当 JavaScript 正在下载时，浏览器不会启动任何其他资源下载，即使该资源位于不同的主机名上。

注意:此规则的一个替代方法是在页面顶部插入桌面移动重定向 JavaScript 代码。我们可以这样做，因为在这种情况下，执行脚本比呈现和加载网页更重要。

该规则有助于解析器更快地工作，并有助于减少整体呈现延迟。

规则 2:编写简洁的代码

写细长的代码。删除代码中不必要或多余的部分，避免在不必要的地方使用制表符和空格。如果可以用其他技术达到同样的效果，就不要使用 CSS 表达式。CSS 规则被评估的频率超出了我们的想象，会对网页的性能产生负面影响。

注意:在我们的用例中，出于说明的目的，我们覆盖了许多 CSS 规则，以便呈现原始的 iWebKit 框架和我们的用例定制代码。在实际项目中，将被覆盖的 CSS 规则的数量保持在最小。

为注释、CSS ID 和类或 JavaScript 变量和函数选择简短且有意义的名称。如果您喜欢编写 xHTML 代码，请不要犹豫采用 xHTML5 语法，并在样式表中将 CSS 规则结合到良好的因子分解水平。使用 Gzip 压缩或缩小 HTML5、CSS 和 JavaScript 代码，但要记住在项目中存储一个用于开发目的的未压缩版本。

这个规则减少了我们网页的总重量，默认情况下，减少了渲染和加载延迟。

规则 3:减少 HTTP 请求

务必时刻关注导入资源(包括图片)的数量。越多的文件导入到我们的网页，就意味着浏览器的渲染和加载延迟越长。最小化 HTTP 请求的数量加快了网页加载时间。考虑到这一点，考虑在我们的 web 页面中添加 HTTP 缓存可能是一个好主意。

HTTP 缓存，也称为 web cache，是基于很好的原理，但由于其规范限制，在 Apple Safari 中几乎无法使用。以下列表总结了 HTTP 缓存的一些主要限制:

• 单个资源必须小于 15kB(非压缩)为 iPhones 设计的网页应该将每个组件的大小减少到 15kB(IOs 3 之前为 25kB)或更小，以获得最佳的缓存行为。iPhone 能够缓存 105 个 15kB 的组件。尝试再缓存一个文件会导致从缓存中删除一个现有文件。
• 全局缓存资源必须小于 1.5MB 虽然 iPhone 能够缓存多个组件，但多个组件的最大缓存限制在 1.5MB 左右(iOS3 之前为 500kB)。缓存中可用的最大字节约为 105 * 15 = 1575kB。
• 关闭设备电源清除 HTTP 缓存如果用户需要强制硬复位，缓存中的组件将会丢失。原因是，在 iPhone 上，Safari 从系统内存中分配内存来创建缓存组件，但不会将缓存组件保存在永久存储器中。
• 关闭标签清除 HTTP 缓存关闭除空白标签以外的所有标签，然后关闭 Safari 清除缓存。

我们可以从开发的角度来看，这种类型的缓存是不可靠的，因为它清理得太频繁了，无法缓存现代网页中的大部分资源。即使是最压缩的 JavaScript 框架或 CSS 也很难达到 15K 以下，几乎所有网络设备中使用的图像都没有达到这一限制。HTML5 提供的离线特性对我们的目标来说是一个更好的选择，我们将在本章后面介绍它们。

图 10–2。 根据 HTTP/1.1 协议请求 WebApp 资源

除了减少我们网页的渲染时间之外，遵循这一规则的最好理由是 HTTP/1.1 协议规定浏览器只能并行下载每个主机名的两个资源，如 Figure 10–2 所示。

解决这种瓶颈的方法是将我们的外部资源分散到多个主机名上。最后，我们不能忘记在我们的网页中避免所有的 HTTP 重定向。HTTP 重定向是使用 301 或 302 状态代码完成的，在这两种情况下，它都会增加平均页面加载时间的延迟，从而降低用户体验的质量。

该规则通过减少客户端和服务器端之间的通信延迟来减少加载时间。

规则 4:结合 CSS 和 JavaScript 文件

这个规则必须考虑到项目的复杂性，但是基本思想是我们将所有的 CSS 规则和 JavaScript 代码合并到一个文件中，而不是拥有多个文件。这将降低 HTTP 头的权重，并减少由于 TCP 启动缓慢而导致的网页中导入多个资源的延迟，如 Figure 10–3 所示。

这种方法的一个副作用是我们被迫更新更大的文件，即使是很小的代码更新；然而，这往往是一条正面效应大于负面效应的道路。

图 10–3。 传输延迟时间:单个和多个 JavaScript 文件的比较

在我们的“商店”用例中，iWebKit JavaScript 框架核心和 CSS 都在单个。js 和。用优化程序缩小的 css 文件。我们可以在这些文件的开发版本(非精简版)中保留代码的逻辑结构，并随后添加头文件和单个注释，以使代码维护及其功能更新更容易。在本章末尾的参考资料部分，你会找到一些在线的迷你资源。

规则 5:最小化 DOM

在我们的项目中，艰苦的工作由框架完成，但是我们仍然需要编写 JavaScript 代码来完成一些项目需求。在这种情况下，规则很简单:最小化 DOM 访问和 DOM 对象的数量。

该规则将减少网页每次运行 JavaScript 时的网页加载时间和用户体验延迟。

图像优化

优化阶段的一个重要步骤是图像优化。图像优化是另一个不包含任何大秘密的好习惯的例子。简而言之，优化我们的 WebApp 的图像可以显著提高我们的网页的性能，使它们更轻，并减少加载延迟。

以下是我们处理 WebApp 图片时需要记住的一些最佳实践。

规则 6:优化颜色深度

在我们设计了一个图像之后，我们需要通过使用正确的图像格式导出它来优化它的权重。如果是照片，我们需要在 JPG 格式中使用一个好的压缩比。如果是用户界面图像，检查使用的颜色数量是很重要的。如果我们使用的颜色少于 256 色，我们可以将其导出为 PNG8。在大多数情况下，以 PNG8 格式导出比以 256 色 GIF 格式导出渲染的图像要小。使用相似的颜色也有助于降低颜色数量和图像权重。

我们还应该强调，使用 Adobe Photoshop、Fireworks 或 Gimp 等图形程序导出图像会添加不需要的元数据，从而增加图像权重。通过访问元数据面板并浏览文件 文件信息 (T)或使用 F，我们可以在 Fireworks 中看到应用于图像的元数据

一个解决办法是使用 PNGOut 这样的程序优化我们的图像，使它们尽可能的苗条。

该规则减少了网页加载时间，提高了用户体验水平。

规则 7:使用 CSS 精灵

“雪碧”这个词可能会让你想起 80 年代，那时人们整天玩“准将 64”或“ZX 频谱”游戏。因为在计算机科学中，所有旧的东西迟早会再次变成新的，所以 web 开发人员采用了旧的精灵管理背后的思想，并把它带到了 CSS 世界。请看下面的图(10–4)中的例子。

图 10–4。iWebKit 框架中用于设计复选框的 CSS Sprite 技术

要使用 CSS Sprite 技术，首先我们将两个或多个图像组合成一个背景图像，然后我们通过 CSS 设置单个图像的宽度和高度，最后我们使用 CSS 边距规则调整背景位置，以便只显示必要的部分。通过这种方法，我们可以使用一个单一的背景图像并显示几个不同的图形(单一图像)，从而节省服务器请求并加快页面加载时间。

`/* from framework style.css stylesheet */
input[type="checkbox"] {
  width: 94px;
  height: 27px;
  background: url('../img/checkbox.png');
  -webkit-appearance: none;
  border: 0;
  float: right;
  margin: 8px 4px 0 0;
}

input[type="checkbox"]:checked {
  background-position: 0 27px;
}`

CSS 背景规则显示从坐标 0px，0px；这保证了如果我们设置 27px 的高度，默认情况下将显示关闭状态。在这种情况下，Sprite 技术通过使用 27px 的偏移量来显示 ON 状态，如第二个 CSS 规则所示。

如果我们在用户界面中使用许多图像，CSS Sprite 技术可以帮助减少网页的全局加载时间，并避免传统翻转技术中典型的白色闪光。因为图像加载时间比呈现时间长，所以每次浏览器第一次加载翻转图像时，使用传统的图像翻转技术都会产生白色闪光。

雪碧锻炼

在我们的“商店”用例中，我们使用一些图片来设计面包屑栏。实现精灵技术，以加快渲染时间。

• 对所有面包屑图像使用 Sprite。
• 将两个或多个 Sprite 面包屑图像分组，并比较单个 Sprite 方法的渲染时间。

比较结果，确定哪种方法最适合我们的特定用例。

该规则减少了网页加载时间，并且每次网页运行 JavaScript 时用户体验都会延迟。

规则 8:使用 CSS 规则代替图片

这条规则听起来可能很奇怪，但是因为图像优化过程旨在全局减少图像的权重，所以尽可能使用 CSS 规则来代替位图图像。

CSS 文本练习

在我们的“商店”用例中，我们使用少量图像设计面包屑栏。实现 CSS 技术来加速渲染时间。

• 对所有的面包屑链接使用文本而不是图像。
• 将房屋图标与面包屑文本对齐。

比较 Sprite 和 CSS 方法的渲染时间。

我们需要对用户界面中涉及的所有内容使用 CSS 规则，并且只在极少数情况下插入图像。如果我们必须为用户界面元素使用一个图像，它必须优化它的颜色深度。如果我们需要插入许多图像，我们需要将这些图像插入 CSS 精灵。我们也应该对每个小的设计细节使用 CSS 规则，比如边框、背景或者渐变。

该规则减少了网页每次运行 JavaScript 时的网页加载时间和用户体验延迟。

规则 9:永远不要缩放图像

根据设备视窗或设计元素的宽度和高度，始终使用具有适当尺寸的图像。依靠 Safari 缩放图像以达到最佳效果从来都不是一个好主意。该规则的唯一例外是当我们想要在单个设备 WebApp 中插入图像时(仅适用于 iPhone 或 iPad)。在这种情况下，插入宽度值为 100%的图像将适合横向(较大)和纵向(较小)方向。

该规则减少了网页每次运行 JavaScript 时的网页加载时间和用户体验延迟。虽然遵循这条规则很重要，但请记住，指定图像的宽度和高度也很重要，因为这也有助于减少渲染时间。

图像优化练习

我们的“商店”用例中使用的所有图像都是 PNG 格式。尝试确定何时可以使用另一种格式(如 JPG 或 GIF)来优化这些图像。不要忘记一些格式不支持 Alpha 透明度。

选择一个图形程序，打开位于“/images”目录和“/pics”目录下的“商店”用例中使用的一些图像。

• 使用不同的格式导出图像。
• 使用不同设置的相同格式导出图像。

比较图像重量和图像质量，然后看看是否可以用优化的图像替换其中的一些图像。

应用压缩

Safari 支持 GZIP 压缩(RFC 1952)，因此压缩我们 WebApp 的一些资源通常是一个好主意，因为这将提高用户体验的水平。我们可以决定何时压缩 HTML5 文档、CSS3 样式表或 JavaScript 代码，而我们不想压缩图像或 PDF 文件，因为它们已经被压缩了。压缩图像或 PDF 文件会增加 CPU 开销，并可能增加文件大小。

从服务器端来看，为了在我们的 WebApp 中使用 GZIP 压缩的资源，服务器必须配置为在请求时提供压缩的资源。另一方面，客户端必须能够支持这种类型的文件。

图 10–4 中的请求/响应过程可通过以下三个步骤恢复:

• Client

  连接到服务器

  向 GZIP 支持发送请求:“接受-编码:gzip”

• Server

  感谢 GZIP 的支持

  用 Gzip 算法压缩资源

  发送 GZIP 编码的资源:“内容编码:gzip”

• Client

  接收 GZIP 编码资源

  解压缩 GZIP 编码资源

  显示(或使用)资源

图 10–5。GZIP 压缩资源请求:HTTP/1.1 协议在起作用

以下代码是 GZIP 资源的 HTTP/1.1 请求和响应的报头示例(也显示在 Figure 10–5 中)。

GET / HTTP/1.1 ... ... ... **Accept-Encoding: gzip** ... ... ...

服务器收到客户端请求后，确定所请求的资源是否有压缩版本。如果是，服务器将它发送给客户机，并在响应中添加以下字符串。

HTTP/1.1 200 OK ... ... ... **Content-Encoding: gzip** ... ... ...

我们可以使用 GZIP 压缩的文件没有限制，这是最简单的方法来实现网页重量的显著减少。GZIP 压缩可以减少大约 70%的重量。

尽管如此，因为完美在这个世界上不存在，一般来说 GZIP 压缩有一些负面影响。

• 首先，我们需要一个支持 GZIP 压缩的浏览器。在我们的上下文中，这不是问题，因为基于 Safari 和 WebKit 的浏览器支持 GZip。
• 第二，如前所述，我们不能压缩图像或 PDF 文件，因为它们已经被压缩。
• 第三，重要的是要记住，因为 Safari 需要动态解压缩这些资源，在某些情况下，这个过程会增加应用的 CPU 周期和开销，并消除可能的好处。执行测试，以确保此开销不会抵消可能获得的好处。

可用性优化

可用性是我们项目的基本需求，在项目流程结束之前测试可用性总是一个好主意。在项目流程的某个阶段测试我们的工作可以告诉我们是否符合项目需求，并给我们一个关于可用性的反馈。

在第二章中，我们看到了错误可以通过项目流程传播，以及其成本如何随着传播而增加。一个好的测试阶段消除了，或者至少减轻了这个因果过程。

图 10–6。 可用性优化:在每个项目流程的阶段安排测试

我们可以在项目流程的每一步中进行不同层次的可用性优化，我们可以在项目流程结束时，WebApp 最终发布之前再次进行可用性优化。遵循我们多样化的方法，我们可以根据项目的详细程度安排不同类型的测试。图 10–6 显示了一种方法，该方法从纸质原型测试和电子原型测试开始，并为预发布测试阶段安排了在真实移动设备上的现场测试。

与简单的网站相比，WebApp 需要更精确的测试阶段，所以我们鼓励你永远不要忽略这个阶段。即使你从事一个简单的项目，经验也会告诉你你的项目需要测试的软硬程度。

根据涉及的主题，我们有两种类型的可用性测试。

• 可用性检查
  通常由评估者执行，评估者不是设计者或开发者，也不参与项目。可用性检查应该从设计的早期阶段就开始。可用性检查的一个例子是认知演练，其中评估者模拟用户为特定任务解决问题的过程。
• 可用性测试
  通常由设计者或开发者对用户进行。可用性测试在设计阶段、实现阶段和发布阶段使用不同类型的测试来执行。可用性测试的一个例子是原型测试，设计师或开发者测试设计的多用户方面，包括服务和特定功能。

认知演练是一种廉价的测试形式；然而，尽管这种方法在软件开发中比在 web 开发中更常用，但是原型测试对于我们的移动设计和开发环境来说是一个有效的选择。出于这个原因，我们在第十一章中介绍了原型测试，其中我们详细了解了如何组织、执行和评估测试。

现在重要的是介绍可用性测试的结构以及一些更重要的概念。可用性测试和原型测试一样，由以下步骤构成:

1. 选择测试环境。
   我们需要根据我们选择执行的原型测试的类型和项目需求来选择测试环境。
2. 创建用例。
   我们需要创建一个用例，为用户定义一个任务，从项目需求中验证一个或多个用例需求。
3. 准备测试资产。
   我们需要准备和重用我们将用来执行测试的资产。
4. 选择用户。
   我们需要根据用例需求选择合适的用户。
5. 执行测试会话。
   我们需要运行测试来验证用例需求。
6. 听取测试报告。
   我们需要向用户和观察者汇报测试情况。
7. 评估测试。
   我们需要根据用例需求评估测试。
8. 创建调查结果和建议。
   我们需要提供发现和建议，推动设计师和开发人员改进项目。

这八个步骤要求我们根据应用配置文件选择用户。然而，我们不知道需要多少用户来为测试收集可靠的数据。我们在下一节回答这个问题。

可用性问题如何影响用户

我们可以把问题定义为难以处理、解决或克服的事情。测试一个项目通常意味着找到能代表用户问题的东西。

如果我们为我们的用例选择了“正确的”用户，那么即使是单一的用户测试也会给我们提供可靠的信息来改进我们的项目。然而，无论一个用户有多“正确”，他们的声音仍然是人群中的一员。用户偶然执行某个动作或受个人非代表性上下文影响的风险太高，以至于不能基于单个用户反馈创建整个测试。

合乎逻辑的结论可能是添加尽可能多的用户来发现尽可能多的问题。虽然这种方法看起来似乎是正确的，但事实并非如此。那些有一些概率和统计知识的人知道，有一个值代表努力和结果之间的最佳比例，在这个值后面，结果与努力相比是最小的。因此，选择一大群用户并不是解决问题的最佳方法。

最好选择一个较小的群体作为样本量，以发现尽可能多的问题。这条路把我们带到了 Jim Lewis，他在 1982 年发表了一项研究，描述了如何使用二项分布来模拟样本大小。这项研究在 1992 年得到了 Robert Virzi 的支持。Virzi 发现 80%的可用性问题是由前四到五个用户发现的，而严重的问题更有可能是由前几个用户发现的。

图 10–7。 可用性问题:不同的小组可能会发现不同类型的问题

选择样本大小的问题似乎已经解决了，因为 4 到 5 个用户应该是我们测试会话的合适数量。甚至 20 世纪 90 年代早期的尼尔森研究也证实了这一规模。不幸的是，正如 Woolrych 和 Cockton 在 2001 年的研究中所显示的，问题并不总是影响用户。这意味着用二项式分布对问题频率的简单估计会产生误导。

出于这个原因，我们可以为大中型项目选择的最佳方法是设置几个四至五个用户组，以代表不同类别的用户，如图图 10–7 所示，并发现尽可能多的问题。在实践中，我们需要对一个组执行测试，修复发现的问题，然后对另一个组重新执行测试。关于可用性问题的概率和统计研究是漫长而复杂的，但是通过简化结论(如图图 10–8)我们可以看到平均 18 个用户我们可以发现 85%的问题。这得到了 Jakob Nielsen 和 Thomas Landauer 在 ACM INTERCHI 会议(荷兰阿姆斯特丹)上的演讲“可用性问题发现的数学模型”的支持。

图 10–8。 可用性问题研究:我们需要 18 个用户来发现 85%的可用性问题。

对于一个简单的项目，比如一个网站或一个不太复杂的 WebApp，我们可以依靠一个由四至五名用户组成的小组，利用我们的经验来填补剩余的空白。我们还可以通过测试前三个用户，解决问题，然后测试另外两个用户，将循环方法应用到单个组中。数据不会像多组方法那样完整，但是这种方法会更加灵活，反馈仍然有用。

离线 WebApp

在本书中，我们总是专注于用我们的网页来模拟本地应用环境和行为。很明显，我们的网页依赖于互联网接入来提供任何类型的服务，但它们也依赖于互联网来检索网页本身的各种设计元素。

使用 HTML5 离线特性，我们可以通过在 WebApp 的缓存中存储任何类型的资源来解决这个问题。需要缓存的文件在一个名为清单文件的文件中声明。一旦文件被缓存，Safari 会在开始任何服务器端处理之前查找清单文件，同时避免下载之前下载和存储的文件。

注意: Safari 会评估清单文件的内容，以确定是否要更新它。文件日期或任何其他属性将不会像我们过去在 HTTP 条件 GET 请求中看到的那样被计算。如果我们想强制更新，我们可以通过 JavaScript 来完成。

应用缓存在浏览器会话之间持续存在，这意味着以前缓存的资源可以在没有任何网络支持或 iOS 处于飞行模式的情况下查看或继续工作。

清单文件

清单文件是托管在应用的 web 服务器上的一个简单的文本文件，它列出了需要由我们的 WebApp 下载和缓存的所有静态资源。清单文件由两个主要部分和一个可选部分组成:

• 缓存清单声明
• 缓存清单 URL 列表
• 缓存类型声明(不需要)

iWebKit 框架不使用任何清单文件，因为从 5.04 版本开始，它用 CSS3 方法替换了大部分用户界面图像。尽管如此，从我们的用例来看，至少缓存所有产品的图片并为用户提供离线目录访问是很重要的。

缓存清单文件应以大写前缀“缓存清单”开头在此之下，我们可以定义三个(子)节标题，始终使用大写前缀，对应于 WebApp 要求的三种不同行为:

• 缓存清单
  这是缓存清单头。
• 缓存
  资源总是从缓存中加载，即使在联机模式下也是如此。
• 网络
  资源总是从服务器加载，即使文件列在缓存头下。这是缓存规则的一个例外。
• 回退
  资源用于替代其他加载失败或加载不完全的资源。

如果我们在“缓存清单”声明头之后列出资源，而没有指定三种类型(子)头中的任何一种，则默认缓存类型将应用于所有列出的资源。典型的缓存清单文件类似于以下代码:

`CACHE MANIFEST
CACHE

Comment on Cache Rule Files

file01
file02
fileN
NETORK

Comment on Network Rule Files

file01
file02
fileN
FALLBACK

Comment on Cache Rule Files

file01
file02
fileN`

在标题下方，我们还可以使用前缀“#”插入注释。此功能通常用于标记缓存版本、修改清单文件以及强制更新缓存。下面的代码显示了我们的“商店”用例的清单文件。如果我们需要缓存整个文件夹，就像在“存储”用例中一样，我们可以简单地插入绝对文件夹路径，所有文件都会默认添加到缓存清单白名单中。

`CACHE MANIFEST

WebApp Images inside the pic folder

http://www.thestore.com/images

WebApp Images inside the images folder

http://www.thestore.com/images`

在这段代码中，我们使用绝对路径，但是也允许使用相对路径；这完全取决于你。创建清单文件后，我们需要使用扩展名"保存它。显式”。对于“商店”用例，我们使用“cache-iphone.manifest ”,并保存在应用根目录中。

下一步是使用属性manifest将清单文件链接到我们的 web 页面中的<html>标记内，如下面的代码所示:

<html manifest="cache-iphone.manifest">

清单文件必须使用“text/cache-Manifest”MIME 类型提供，因此最后一步是在。htaccess”文件，该文件放在 web 根目录中。如果没有按此顺序完成，Safari 将不会识别清单文件。

AddType text/cache-manifest.manifest

现在一切就绪，但是因为我们的应用查看清单文件中的资源列表以了解清单文件是否需要更新，所以如果我们想要强制执行这个更新过程，我们需要使用 JavaScript。

注意:我们可以通过在文件中使用一个注释行来修改清单文件。这将在下次检查清单文件时从我们的 WebApp 生成一个更新。然而，推荐使用 JavaScript 方法，因为它为开发人员提供了更多的可能性。如果下载清单文件(其父文件或缓存清单文件中指定的资源)时出现故障，则整个下载/更新过程都会失败。

我们可以使用window.applicationCache JavaScript 对象访问缓存，并使用update()和swapCache()方法分三步更新它:

1. 测试(旧的)缓存是否可以更新。
2. 更新(新的)缓存。
3. 用更新的缓存替换旧的缓存。

在 Table 10–1 中，我们可以看到用于缓存更新过程的三个项目。

当我们使用status属性检查applicationCache对象时，我们根据缓存状态观察到不同的返回。Table 10–2 显示了status属性返回的可能值。

现在，我们准备通过编写一条if语句来测试applicationCache对象的状态值，如果准备好了，就执行缓存更新，从而将一切付诸实践:

if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {     applicationCache.update();     applicationCache.swapCache(); }

在工作流程的这一点上，我们的 WebApp 几乎为发布阶段做好了准备，但在我们考虑发布它之前，我们需要关注优化的另一个重要方面，一个基于我们的 WebApp 和搜索引擎之间的关系的方面。我们将在下一段中看到如何处理这一部分。

移动搜索引擎优化

搜索引擎优化是我们项目工作流程中的一个重要步骤。SEO 对网站来说比 WebApp 更重要，因为与网站相比，WebApp 很少依靠搜索引擎结果来推广自己。尽管如此，SEO 也应该在 WebAppdesign 的每个阶段之后。

图 10–9。 SEO 最佳实践在整个项目工作流程中的应用

SEO 阶段提出了一些对网站和 web 应用都有价值的规则。正如我们之前看到的可访问性、可用性以及代码或图像优化，为搜索引擎优化我们的网页是一种贯穿我们项目工作流程始终的方法。制定一个完整的 SEO 计划超出了本书的范围，但是在接下来的章节中，我们看到了一些关键点，这些关键点使我们的网站排名更高，并且我们的 WebApp 对主要的搜索引擎更友好。

剖析搜索引擎

像谷歌这样的搜索引擎的最小用户界面背后有更多的东西。不幸的是，我们无法知道搜索引擎如何工作的每一个细节，因为这是专有信息。尽管如此，每个搜索引擎都是由几个已知的部分组成的，总的来说，这些部分可以帮助我们理解它们是如何工作的。

• 爬虫、蜘蛛和机器人
  爬虫、蜘蛛和机器人是在网络上爬行的程序，在数据库中搜索要索引的网页。Google 是基于爬虫的搜索引擎的一个例子，它的爬虫扫描网络，收集关于每个 URL 的信息。
• 用户界面(UI)
  用户界面是用户编写查询的地方。谷歌提供的最小用户界面只是每个搜索引擎前端的一个例子。
• 搜索引擎数据库
  搜索引擎数据库包含关于每个存储的 URL 的多个数据点。这些数据可以以多种不同的方式排列，每个搜索引擎都有自己的方式来完成这项工作。每个搜索引擎如何安排这些类型的数据是一个严格保守的秘密；Google 使用的 PageRank 方法就是一个例子。
• 搜索引擎算法
  搜索引擎算法是每个搜索引擎的心脏，是让一切运转的部分。该算法评估一个或多个输入(用户在搜索引擎用户界面中插入的单词)并生成输出，并搜索存储 URL 和关键字的数据库。这种算法可以归类为问题求解算法，它由分析不同网站部分的多种算法组成。每个搜索引擎都有自己的算法实现。
• 搜索引擎结果页面(SERP)
  搜索引擎结果页面，除了搜索引擎用户界面之外，是用户唯一可见的部分。这个页面是由搜索引擎算法按特定顺序分类的链接的集合。

在接下来的部分，我们将看到如何设计和实现我们的网页，以使搜索引擎更加友好。

面向搜索引擎的设计

从我们项目工作流程的早期阶段开始，为搜索引擎优化我们的网页是很重要的。面向搜索引擎的设计是一个标题，代表在我们的设计阶段使用的方法。让我们来看看设计阶段的步骤。

域名标题

任何 SEO 方法的第一步甚至在我们打开图形程序或代码编辑器之前就已经开始了。选择错误的域名会毁了你未来在搜索引擎上获得好位置的所有努力。尽管这一步至关重要，但解决方案很简单:在域名中插入 primary 关键字。

http://iphone.thestore.com     /* iPhone Third Level Domain Name */

这是我们“商店”用例的假设名称的一个例子。在域名中插入主要关键字保证了我们的 WebApp 将使用一个单词进行存储，该单词将在 SEO 优化阶段的后续步骤中用作主要关键字。

页面标题

HTML 页面标题是需要优化的最重要的标签之一。页面标题显示为 SERP 中的第一行，它是我们 WebApp 最有意义的来源。一个好的标题是简短的，包括识别我们网页的主要关键字。

`                                                   /* Store Index Page Title */

<title>The Store (U.S.)</title>                                    /* US Home Page Title */ <title>The Store (U.S.) | Contact Us</title>                /* Contacts Page Title */`

我们必须为每个页面写一个独特的标题，每个标题必须包括 WebApp 的名称。代码显示了“商店”用例的三个例子。

当标签

曾经有一段时间，元标签是搜索引擎优化的圣杯，但现在的情况已经发生了变化，因为这种类型的标签被网站管理员滥用。要优化的一个重要标签是描述元标签。像 Google 这样的搜索引擎使用这个标签在 SERP 中的第二和第三行(如果文本足够长)显示我们的网页描述。一个好的描述标签包括我们的关键字(或多个关键字),并且信息丰富。下面的代码是“商店”用例中的一个例子。

<meta name="description" content="Apple designs and creates iPod and iTunes,É  Mac laptop and desktop computers, the OS X operating system, and theÉ revolutionary iPhone and iPad." />        /* Store Index Page Description Metatag */

另一个重要的元标签是关键字标签；这不是基本的，但仍然很重要。从下面的代码中我们可以看到，在我们的“商店”用例中，选择很容易，因为像苹果这样的大品牌只需要一个关键词:苹果。在其他项目中，多个关键字也可以；不要滥用就好。

<meta name="Keywords" content="Apple" />        /* Store Index Page Keywords Metatag */

关键词必须与潜在访问者在搜索您的网站时使用的单词和短语相匹配。

内容

内容对于优化我们的网页很重要。最终，用户寻找的只是一小块可以阅读的内容。重点是，现在我们需要区分用户登陆兼容页面、iPad 页面还是 iPhone 页面的情况。

一般来说，在 SEO 内容优化中，我们需要在网页的几个战略点上使用关键字元标签中指定的关键字:

• 页眉(主要关键字)
• 页面标语(次要关键字)
• 页面内容(主次关键字)
• 页面链接(主要关键字，只要有可能)

如果我们以面向 Google 的方式思考，在网页的上部使用我们的关键字是很重要的，因为这对爬虫来说是最重要的(有意义的)部分。因为 iPad 版本，甚至 iPhone 版本，已经严格地对内容进行了优先级排序，这使得我们的工作变得既容易又困难。

优先内容可以使我们的工作更容易，因为我们认为这种类型的内容是基于重要的关键字和简短有意义的段落，以便以最直接和最快的方式传递信息。

与此同时，优先化的内容会使我们的工作更加困难，因为有时内容太短，以至于几乎不可能以对人类和爬虫都有意义的方式来组织。

图 10–10。 面向搜索引擎的设计:主键“iPhone”的使用示例

处理这种情况的方法是坚持在我们的移动版本上使用我们的优先内容，并在兼容版本的内容上多玩一点，这样我们就有更多的空间和机会来取得好的结果。

我们需要避免的最后一件事是关键字填充的陷阱。关键词填充，简单来说就是把一个关键词用太多次或者强行放在一个段落里，唯一的目的就是增加它的使用量。如果关键词在上下文中没有意义，就不要使用。这可能会降低我们网页的质量分数。

链接

一个没有链接的网页就像是海洋中的一个失落的岛屿；它就在那里，但几乎没有人知道它的存在，或者，如果他们知道，如何达到它。链接的作用是连接我们的网页和其他相关信息，包括网页内部和外部的信息。链接如此重要的另一个原因是，链接对我们的 WebApp SEO 分数的最终权重有很大的价值。更准确地说，入站和出站链接有“权重”,而内部链接只是为了更好地“抓取”网站。

谷歌及其著名的算法是由拉里·佩奇和谢尔盖·布林在 1998 年开发的，并获得了斯坦福大学的专利，是第一个为网页中的入站和出站链接分配动态和不同值的算法。谷歌网页排名算法的真正细节是未知的，因为这是该公司的秘密之一；尽管如此，一些细节是已知的。

Google page rank 概念

一个随机用户访问一个网页的概率称为其 PageRank 。Google PageRank 概念使用 Google 的全局链接结构来确定单个页面的价值。PageRank 给出了一个页面重要性和质量的近似值。

实现这一概念的算法将从网页 A 到网页 B 的链接解释为网页 A 对网页 B 的投票。Google PageRank 算法不仅关注网页收到的投票或链接的数量，还分析投票的网页。由具有高 PageRank 值的网页所投的票，因为它们本身是重要的或者在网络社区中被有利地视为“已建立的公司”,权重更大，并且有助于使其他网页看起来也是已建立的。

Google page rank 算法概念

网页 A 的 PageRank 值给出如下:

pr(a)=(1-d)+d(pr(t1)/c(t1)+pr(TN)/c(TN))

这里，由出站链接给出的 PageRank 等于文档的 PageRank 分数 PR(Ti)除以出站链接的(标准化)数量 C(Ti)。

• PR(A): 页面 A 的 PageRank 值
• PR(T1): 指向年龄 A 的第 1 页的 PageRank 值
• C(T1): 第一页的链接数，它指向第一页
• PR(Tn): 一个页面 n 指向页面 A 的 PageRank 值
• C(Tn): 页面 n 的链接数，它指向页面 A
• d: 阻尼因子:在每一页上，一个随机的浏览者会请求另一个随机页面的概率。名义上，该值设置为 0.85，并且可以设置在 0 和 1 之间。

让我们假设一个由四个网页组成的小宇宙，其关系如下，也如图 10–11 所示。

• 页面 A: 不链接任何页面
• 页面 B: 链接到页面 A 和页面 C
• 页面 C: 链接到页面 A
• 页面 D: 链接到页面 A、页面 B 和页面 C

对于四个网页的总体，PageRank 的初始近似值将在这四个网页之间平均分配，并且是 0.25 (0.25 * 4 = 1)。假设每页的阻尼系数为 0.85，则提供以下等式:

pr(a)=(1-d)+d(pr(b)/2+pr(c)/1+pr(d)/3)

pr(a)=(0.15)+0.85(0.25/2+0.25/1+0.25/3)

pr(a)=(0.15)+0.85(0.125+0.250+0.083)

PR(A) = (0.15) + 0.85(0.458)

PR(A) = (0.15) + 0.3893

PR(A) = 0.5393

在 Figure 10–11 中，我们可以看到使用数学符号的示例中 PageRank 值的计算。

图 10–11。 谷歌页面排名算法:网页 B、C、D 将其 page rank 值加到网页 A 上

图 10–12 显示了相同的概念，其中网页 A 根据链接到它的每个其他网页的 Page Rank 值接收页面等级值。

图 10–12。 谷歌页面排名算法:网页 B、C、D 将其 Page Rank 值加到网页 A 上

传入和传出链接在 WebApp 的生命中扮演着重要的角色，但链接的作用远不止链接其他网页。链接也分为内部链接和外部链接。外部链接离开网页，帮助爬虫到达你的 WebApp 的每一页。在这种情况下，外部链接扮演着与网站地图相同的角色。这就是为什么网站地图在任何 web 项目中都被强烈推荐的原因。链接到许多其他(相关)页面的面包屑也扮演着同样的角色。另一方面，内部链接不是指向不同的网页，而是指向网页本身。

图片

搜索引擎将网页视为文本页面，这意味着它们不理解图像。图像在我们的网站和 web 应用中有一个基本的角色，因为作为人类，我们对图像的理解要比文本好得多。因此，我们在项目中从不回避图像。

这里的要点是，当我们需要赋予网页意义时，不要依赖图像。例如，不要在我们的图像中插入重要的文本信息，如行动号召或重要的标题。图像的作用是用一系列不同的、可能更强大的、读者可以理解的符号来支持内容。

考虑添加文本消息作为网页中每个图像的伴侣，并添加一个alt属性来与爬虫通信。下面的代码在<div>中，它包装了我们的“商店”用例主页中的英雄内容。

<ahref="#"><imgsrc="pics/hero_iphone4.png" alt="The New iPhone4"/></a> <ahref="#"><imgsrc="pics/hero_ipad.png" alt="The Revolutionary iPad"/></a> <ahref="#"><imgsrc="pics/hero_ipod.png" alt="The New iPod Touch"/></a>

如果我们需要插入关于元素的额外信息，我们可以选择添加 title 属性。我们也可以选择不插入alt属性，因为图像对于爬虫和网页来说没有任何相关的意义。这方面的一个例子是下面的代码，来自边到边菜单中用作图标的图像。下面这段代码只引用了一个菜单项。

<li class="menu"><a href="#"> <imgsrc="pics/menu_mac.png" /> <span class="name">Shop Mac</span> <span class="arrow"></span></a></li>

该图像没有在<img>标签中指定任何alt属性。但是，如果您添加了一个带有描述的标签，就不会被认为是错误。

<li class="menu"><a href="#"> <imgsrc="pics/menu_mac.png" alt=”Shop Mac” /> <span class="name">Shop Mac</span> <span class="arrow"></span></a></li>

这段代码显示了对这个例子的合适描述。

JavaScript 代码

JavaScript 帮助我们构建一个更好的 WebApp，并模仿原生应用的外观，但这并不意味着它总是 SEO 友好的。解决方案是将我们的 JavaScript 代码外部化，就像我们对“商店”用例中使用的框架核心所做的那样。

<scriptsrc="javascript/functions.js" type="text/javascript"></script>

除了极少数情况，我们需要导入所有的 JavaScript 代码，无论包含在哪里，以使我们的网页更加 SEO 友好。另一方面，这会增加网页的加载延迟，但是正如我们已经确定的，完美不属于这个世界。在这些情况下，我们需要解释上下文，并根据我们的项目范围、目标和维度选择正确的方法。

移动搜索引擎优化工具

如今，我们有许多工具来监控我们的网页，从像谷歌分析这样的 Web 应用到一些原生的 iOS 应用。谷歌分析是一种快速简单的方法来监控流量，并清楚地了解我们的 WebApp 如何与用户互动。

谷歌分析是由海胆在 2005 年开发的，从 2006 年开始对用户公开。使用谷歌分析工具的好处是多方面的。Google Analytics 帮助您准确地确定哪个是最有效的网页，了解浏览我们的网页所花费的平均时间，甚至了解哪个访问者成为了有效用户。这些和许多其他类型的数据被组织在易于分析的文本和图形报告中。

谷歌分析

注册谷歌账户后，我们可以登录位于www.google.com/analytics的谷歌分析页面。登录后，我们可以通过几个步骤从 Google Analytics 控制面板添加我们的 WebApp。

此时，创建一个网站地图并将其添加到我们的 WebApp 中是很重要的，这样才能确保每个 URL 都能被 Google 的正常爬行过程发现。Sitemap 还可以用于向 Google 提供特定类型内容的元数据，如图像、视频、新闻等。

Google Analytics 从我们的项目中收集数据之前的最后一步是将控制面板中的一段代码添加到我们所有的网页中，就在 head closing 标签之前。使用几个不同的仪表板视图来收集和可视化信息。我们有一个控制面板，所有信息都显示在一起，以便一次浏览所有信息，但我们也可以在单个视图中切换最小化信息。其中一些观点如下:

• 内容概述
• 页面视图显示
• 访问视图
• 跳出率视图
• 流量来源视图
• 引用站点视图
• 搜索引擎视图

重要的是要记住，数据不是实时收集的，统计数据要到每天的午夜(太平洋标准时间)才可用。谷歌分析也需要几个小时来完全更新所有的统计条目。如果我们的网页能够每月产生超过一百万的页面浏览量，提醒你除了 Google Analytics 提供的免费服务之外，还有一个更大的网站可以使用的高级版本的服务是有用的。

关于优化和 SEO 的资源

在 Table 10–3 中，我们使用了本章中的一些工具来优化我们的项目。如果您不熟悉这些技术中的一种或多种，我们建议您使用以下服务继续项目。

总结

在这一章中，我们研究了最优化。在本章的开始，我们通过首先解释如何编写和生成好的图像，然后学习如何压缩我们的 WebApp，建立了处理面向性能的优化的正确方法。

在本章的第二部分，我们讨论了可用性优化，并介绍了两种同样在 UML(统一建模语言)中标准化的方法和测试。我们还看到了问题如何真正影响我们的用户，以及如何为我们的目的选择正确的用户样本。

本章的第三部分讨论了离线应用，我们看到了如何使用 Manifest 文件来缓存 WebApp 的单个或多个文件。

在最后一节中，我们研究了面向搜索引擎的优化，首先介绍了移动 SEO 背后的概念，然后介绍了搜索引擎的结构。我们结束了工作，我们的网页的一部分，需要优化，使其搜索引擎友好。

我们还介绍了著名的谷歌算法背后的概念，我们看到了像谷歌分析这样的工具如何帮助我们收集重要信息，这些信息可用于规划正确的移动战略，并在我们的 WebApp 上做出重要决策。

十一、测试 iOS WebApps

成为质量的衡量标准。有些人不习惯期望优秀的环境。

—史蒂夫·乔布斯

在上一章中了解了如何优化我们的 web 应用后，我们现在进入测试阶段。在介绍了生命周期和敏捷测试方法之后，我们将看到如何组织一个测试，首先创建一个用例，然后是测试它所需的资产。

我们将执行一项测试，然后学习如何使用特定类型的反馈(如设计或情感反馈)和变量(如使用的触摸次数、错误次数和预计到达时间)来评估它。

Web 开发生命周期

在应用开发中，我们可以应用两种主要类型的生命周期:瀑布生命周期和迭代-增量生命周期。瀑布生命周期被定义为一个顺序开发模型，每个阶段都有明确定义的可交付成果。在瀑布生命周期中，从一个阶段到另一个阶段的反馈很少。

图 11–1。 瀑布式生命周期(左)和迭代-增量式生命周期(右)。

迭代-增量生命周期是通过周期(迭代)定义的，在更小的时间部分(增量)中开发。与瀑布生命周期相比，迭代-增量生命周期在适应变更的新需求方面具有更大的灵活性。图 11–1 展示了瀑布和迭代增量生命周期之间的图形比较。在下一节中，我们将看到如何在实现阶段结束时接近测试阶段。

Web 应用测试

在我们简化的工作流程中，当我们退出开发阶段时，我们直接进入测试阶段。特别是在迭代的生命周期中，不同级别的测试应该出现在过程的所有阶段。正如我们现在所理解的，根据项目环境和需求，不同的项目流程可以用不同的生命周期来实现。

我们还将了解到，每个项目阶段都至少与一个其他阶段重叠；测试阶段也是如此。

在我们的工作流程中，如图 11–2 所示，测试阶段在实现阶段之后和发布阶段之前进行。它用于对性能、可访问性、可用性以及更一般的用户体验进行测试。

图 11–2。 项目流程:简化版本，仅在流程结束时有测试阶段。

测试方法取决于网站或 web 应用的性质。一般来说，按照项目流程中的具体时刻，我们可以选择不同类型的测试。在下一节中，我们将看到测试的敏捷方法，这对于单个开发人员或小型开发团队来说更为舒适。

敏捷测试

在项目流程的第一步，我们使用线框来实现内容的早期版本。从线框来看，下一步是创建纸质原型，以更好地了解我们未来网页的内容和布局。

纸上原型测试是第一级有用的测试，以确定我们的设计在用户体验方面是否正确。这种类型的测试是廉价的，因为它可以由单个设计者准备和执行，而不需要任何特定的工具。纸上原型测试可以识别用户界面设计和内容相关的问题。

纸上原型测试可以很容易地确定用户在浏览过程中是否在寻找特定的按钮或试图定位自己。纸质原型测试还可以显示我们的内容是否在正确的位置，并向用户提供正确的信息。

在进入开发阶段之前，在设计阶段进行纸上原型测试(图 11–3)。这些测试通常由设计人员执行，并且基于用于定义网站或 web 应用设计的相同草图。

图 11–3。 在流程的设计和实现阶段之间执行的纸质测试。

敏捷测试的第二个层次是电子原型测试。这些测试是设计者在设计阶段的最后一步。因为每一步通常都与下一步略有重叠，所以这种类型的测试可以由设计人员准备，由开发人员执行。电子原型也可以由设计者和开发者准备和使用，允许设计者将工作介绍给开发者，开发者将使用电子原型作为他/她的工作的起点。

如果电子原型在移动设备上运行，它为用户提供了几乎相同的体验，并且是可靠的。它也可以在台式机上运行，并提供良好的反馈。真实移动场景和任何其他电子原型的区别在于环境。

图 11–4。 一个真实的环境可以极大地改变用户体验(图片错过 HG)。

在旨在评估真实移动体验的实验室测试中，环境会造成显著差异(图 11–4)。解决问题的最佳方法是对设计进行初步的纸上原型测试，对功能和服务进行电子原型测试，然后开发一个网站或 web 应用的 alpha 版本，以便在真实环境中进行测试。

这些类型的测试实际上是免费的，因为纸质和电子原型已经作为项目工作流程的设计阶段的常规步骤而产生。

热图测试

另一种设置和执行起来既简单又便宜的测试是热图伪测试。我们使用前缀“pseudo ”,因为真正的热图测试需要眼睛追踪工具，而大多数开发团队都没有这些工具(图 11–5)。

作为这种技术缺乏的解决办法，我们可以使用许多使用启发式算法的公司提供的在线服务(例如，Feng-GUI)来代替真实的眼球追踪。这些启发式算法通常是准确的，并且连同它们的可用性和可访问性一起，提供良好的反馈。

通常，使用在线热图服务的流程是标准的，包括以下步骤:

1. 注册热点图服务的帐户。
2. 插入绝对路径或上传网页的打印屏幕。
3. 下载图像格式的热图。

一些服务类似于谷歌分析，并提供一个插入网页的脚本。登录我们的帐户后，我们可以查看网页统计数据和热图。这种类型的服务应该被认为是准确的，因为我们可以分析真实用户的网页。

图 11–5。 眼球追踪测试(左)和相应的热图(右)。

我们在第四章中介绍了热图技术来分析阅读模式，以展示优秀设计的基本要素，以及什么会对用户体验产生负面影响。关键是热图可以揭示设计错误，并在设计阶段给出早期反馈。通过观察热图，我们可以确定用户的注意力是否会被一些不需要的设计元素所劫持。通过使用热点图，我们可以测试我们的设计元素层次，并检查阅读模式是否正确地遵循了内容。

我们还应该注意到，与 9.7 英寸的 iPad 环境相比，热图测试在 iPhone 这样的小显示器环境中提供的信息较少。尽管有这个缺点，热图测试仍然提供了关于我们设计的重要信息，帮助防止设计错误在项目流程中传播。

组织测试

为了产生可靠的反馈，必须计划和组织每个测试的每个细节。我们选择的敏捷方法是基于工件回收，允许我们处理在之前的工作流程阶段使用的想法和资产。工件回收方法有助于保持准备阶段尽可能的精益。在接下来的章节中，我们将会看到如何计划和创建用例，以及如何执行测试。

创建用例

要记住的主要事情是，纸上原型(如图图 11–6 所示)是面向设计的，在设计测试中效果最好，这意味着它们在设计细节上提供了更可靠的反馈。电子原型也可以对设计细节给出反馈，但是因为它们在网站或应用提供的部分或全部功能和服务的特定级别上实现，所以它们主要用于收集关于功能和服务的反馈。

图 11–6。 为用例开发纸质视图(图片再发布媒体)。

准备阶段的第一步是创建一个用例。当在网站或应用上工作时，我们可以想象一个具有特定用户动作路径的浏览会话。也许我们想测试联系页面是否容易到达，或者某个特定的服务是否有用。在这个阶段，想象力和经验是你最好的朋友。

通常，文本用例与用例图结合使用，以便更好地理解分析阶段的项目需求。在测试阶段，这种组合仍然提供了最好的结果，因为图表可以被看作是用例的图形总结，提供了“谁做什么”和“谁与什么交互”的概念，而描述提供了对参与者(用户)和系统(用户界面、服务器等等)之间的交互所涉及的各个步骤的更好理解。

创建文本用例

现在我们正面临一个岔路口，因为设计师和开发人员通常拥有不同的背景知识，使用不同的工具。不是所有的设计师都知道 UML，然而几乎所有的开发人员都知道这种有用的建模语言；几乎每个面向对象的项目都使用它。

对于那些不了解 UML 的人来说，文本用例方法提供了展示和组织测试所需的一切；熟悉 UML 提供的工具肯定会对项目流程的分析和测试阶段有所帮助。

UML 超出了本书的范围。然而，在这一章中，我们将介绍两种表示用例的方法:文本的和视觉的。在这一节中，我们将呈现表示 UML 用例的文本方式，而在下一节中，我们将使用图表可视化地这样做。

注: UML 代表统一建模语言，是一种用于软件工程的标准化通用建模语言。UML 包括各种类型的可视化模型，但是出于我们的目的，我们只展示其中的两种:

• 文本用例
• 用例图

一本可以用简单的术语向你介绍统一建模语言提供的所有工具的简单的书是由 Mike Fowler 写的 UML 精华。

欲了解更多信息，请访问martinfowler.com/books.html。

当与团队一起工作时，我们通常使用文本和图形工具来表示一个用例。如果你是一个单独的设计者或开发者，你可以选择你喜欢的工具，假设你已经清楚地记住了项目的每个方面和细节。

创建用例最简单和最直观的方式是文本方式。第一步是为您的用例编写标题，选择与用户的任务、细节层次、参与者和所使用的设备相对应的标题，它标识了上下文。“主要成功场景”是我们用例的标题。第二步是定义场景，按照一系列步骤编写我们的用例主体，其中角色(用户)执行许多动作来实现他或她的目标。每一步都代表系统(用户界面、服务器等)和参与者(用户)之间的交互。下面是一个取自我们的苹果商店用例的文本用例的例子。

致电 Apple Store 支持部门

水平:海平面(又名用户目标水平)

行动者:用户

设备: iPhone

1. 用户通过选择支持链接来浏览菜单。
2. 用户通过选择联系我们链接来浏览菜单。
3. 用户通过选择“1-800-275-2273”链接来浏览菜单。
4. 该设备要求确认对号码“1-800-275-2273”的呼叫
5. 用户拨打支持电话。

在一个用例中，有五个不同级别的细节，从上到下显示在下面的列表中:

1. 云级别(总结目标)
2. 风筝水平(总结目标)
3. 海平面(用户目标高度)
4. 鱼类水平(子功能目标)
5. 平静级别 _ 子功能目标)

我们可以通过设置不同的级别来处理不同级别的细节，如下例所示:

呼叫支持

等级:风筝等级

行动者:用户

设备: iPhone

1. 用户转到联系人页面。
2. 用户点击支持号码。
3. 设备要求确认。
4. 用户呼叫支持。

图 11–7。 用例:文本用例及其在纸上原型上的实现。

在我们项目流程的第一阶段，称为分析，文本用例被用来识别我们项目的需求，但是它现在可以在测试阶段被重用，以比较文本用例的预期行为和原型测试的真实用户行为。我们的文本用例中的每个条目都应该与用户完成任务所执行的动作相匹配。图 11–7 展示了名为“呼叫支持”的用例

创建用例图

一个用例图是系统边界及其与外部世界交互的可视化表示。那些从外部世界与系统互动的人是行动者。参与者可以是用户，也可以是另一个系统。

系统由显示系统边界的正方形或矩形表示。每一个用例都被表示为一个包含用例名称的椭圆形。演员由程式化的人类代表，其下有一个身份。

用例图使用因子分解方法，这意味着一个用例可以包含另一个用例，如图 11–8 所示。当一个用例包含另一个用例时，一个箭头指向它，显示单词<<include>>。

图 11–8。 用例:图表和文字描述之间的比较。

在我们的例子中，联系支持用例包括另一个用例，叫做“打电话”如果我们参考文本描述的海平面细节，联系支持用例代表点 1 和 2，而拨打电话用例代表点 3、4 和 5。在风筝级别的细节中，只有点 1 属于联系支持用例，而点 2、3 和 4 属于打电话用例。

用例图通过组织和为每个测试提供可视化的参考，在测试阶段发挥功能性的作用。

创建资产

当文本用例图和用例图准备好了，我们就可以开始处理测试资产了。我们需要准备两种不同类型的资产:一种是纸质原型，另一种是电子原型。

纸上原型

纸质原型直接受到设计阶段使用的纸质原型的启发，甚至是从其回收的。基本上，我们需要为用例的每一步设计一个纸上原型，这意味着纸上原型和文本描述中的编号点有一一对应的关系，如图 Figure 11–9 所示。

图 11–9。 两个文本用例条目和两个纸上原型之间的一对一关系。

每个纸上原型代表测试中特定时刻的视图，就像一帧是电影剪辑中特定时刻的视图一样。纸上原型总是使用一些颜色来减少大脑中对一张简单的纸的感知和一个完全工作的设备的真实图像之间的差距。如果您使用图形程序来选择纸张的颜色和设计，一个好的方法是使用 Pantone 颜色表，如果您使用手工方法，则使用 Pantone 笔。

电子原型

电子原型的设计和开发是进入实现阶段之前的最后一步。只要你没有跳过这个阶段，你就应该为测试阶段准备好一个电子原型。

一般来说，电子原型不能提供最终版本所提供的 100%的功能；这种测试的目标是执行检查，以防止错误并避免它们在实现阶段的传播。

然而，在 web 环境中，电子原型基于与最终版本相同的技术(HTML5、CSS3 和 JavaScript)，因此这种类型的原型通常非常接近将要发布的最终产品(如图图 11–10 所示)。

图 11–10。 文本用例(左)和 WebApp 视图(右)。

在第二章中，我们建议使用一个框架插件来轻松开发我们项目的电子原型。无论我们选择哪种方法，概念总是相同的:创建 HTML5、CSS3 和 JavaScript 模型，以便能够测试特定的功能或特定的服务。根据电子原型提供的功能和服务的级别，我们可以执行不同级别的测试，并获得不同级别的反馈。

执行测试

一旦资产完成，并且假设用户准备好了，我们就可以开始执行原型测试。任何有一张桌子和两把椅子的房间都是进行纸质原型测试的理想场所。

纸质测试和电子测试看起来不同，资产不同，测试者在测试中的角色不同，甚至反馈的等级也不同，但是这两种测试背后的思想是相同的。两者都可以归类为面向任务的测试。我们将在接下来的章节中看到同样的想法是如何驱动这些测试的。

图 11–11。 论文原型测试:论文视图与论文落地视图的关系。

在这些测试中，纸质视图是一个实体纸质页面(一项资产)，而纸质登陆视图(另一项资产)是一个链接目标页面。“Landing”是一个相对前缀，用于增加交流的层次，更好地理解两个页面之间的上下文和关系，这在我们需要分析和讨论测试结果时很有用。

纸上原型

我们需要与用户一起执行的用例由一个开始用例的短语或命令来表示，并在精神上引导用户完成他的动作。参考我们的呼叫支持用例，开始测试的一个好短语或命令是通过电话联系支持。

呼叫支持

水平:海平面(又名用户目标水平)

行动者:用户

设备: iPhone

订单:通过电话联系支持人员(针对用户)

1. 用户通过选择支持链接来浏览菜单。
2. 用户通过选择联系我们链接来浏览菜单。
3. 用户通过选择“1-800-275-2273”链接来浏览菜单。
4. 设备要求确认对“1-800-275-2273”号码的呼叫。
5. 用户拨打支持电话。

一旦我们向用户介绍了订单，我们就向他展示第一个和最初的纸张视图(图 11–11)，如我们之前看到的那样，由图 11–9 中的“第 01 页”表示。我们要求用户在体验过程中说出自己的想法，以及他所做的每一个动作。测试人员记录所有描述用户体验的评论。

图 11–12。 纸质原型测试:用于驱动纸质测试的文本描述。

用户与纸张原型进行交互，而测试人员的角色是用与用户行为相关的视图替换纸张视图。在我们的示例中，如果用户触摸支持链接，测试人员会将第 01 页所代表的纸张替换为第 02 页所代表的新登录纸张视图，如图 11–13 所示。

图 11–13。 纸张原型测试:测试者改变纸张视图(图片塞缪尔·曼)。

在最佳情况下，原型测试将在用户能够完成他的任务时结束，在最坏的情况下，当他退出时结束。在任何情况下，测试人员都必须记录用户的体验，描述用户如何完成一项任务或者为什么失败。

电子原型

在尽可能多地从纸上原型测试中学习之后，我们准备执行称为电子原型测试的电子变型(参见图 11–14)。测试程序保持不变；改变的是用户体验的水平和测试人员测试在纸上原型测试阶段还没有实现的功能和服务的可能性。

电子测试可以使用台式计算机来执行，如果您使用 Fireworks 插件，就是这种情况。您通常希望使用带有移动用户代理的浏览器作为测试环境。

图 11–14。 电子原型测试:用于驱动电子测试的文本描述。

当然，因为网站或应用通常共享用于开发电子原型的相同技术，所以这种测试的更好版本可以直接在移动设备内部运行。在这种情况下，我们可以有一个电子原型，它提供从大约 0%到大约 100%的不同级别的功能或服务。

仅用于测试设计和反馈水平，但几乎不提供任何功能和服务的电子原型与纸质原型不可同日而语。提供大多数可用功能和服务的原型会产生与发布版本相当的反馈水平。

在电子原型测试的桌面和移动版本中，测试人员扮演的角色与他在纸质原型测试中扮演的角色相同，只是他在测试过程中不会手动更改视图。测试人员在记录用户体验的同时，给用户分配一些要完成的任务。

评估一项测试

一旦所有的原型测试完成，我们需要对我们收集的数据和反馈进行工作，以评估测试和项目。重要的是要记住，测试的反馈只和测试模型一样可靠。这意味着您的原型必须尽可能地模拟或代表最终版本。

问题是，在这种情况下，短路是显而易见的，我们需要使用看起来像最终版本的原型资产，以便获得可靠的反馈。但是，我们确实执行了原型测试，以了解如何设计最终版本和/或在实现最终版本之前验证实际设计是否正确(参见图 11–15)。底线是测试只是测试，可靠性是基于在不完整的原型上执行的测试。

图 11–15。 纸质原型测试:测试人员用来执行和评估测试的两类资产。

这一事实在纸张原型测试中更加明显，纸张很少代表真实的用户界面，糟糕的颜色或细节以不同的方式与作为每个用户体验基础的认知感知进行交互。这些都与设计的内在层次有关——唐纳德·诺曼在情感设计中解释了设计的三个层次之一(行为和反思)。未能与设计的内在层次建立联系，会导致无法预期真实的用户体验，因为它忽略了原型在特定环境下能引起用户的效果水平或情感反应。

注:唐纳德·诺曼是认知科学、设计和可用性工程领域的学者，也是尼尔森诺曼集团的联合创始人和顾问。

欲了解更多信息，请访问www.jnd.org/books.html。

相比之下，电子原型与最终版本共享相同的技术，因此测试和反馈会更加准确。准确性的百分比可以根据原型中实现的功能和服务的数量而变化。

变量和反馈评估

一般来说，一个测试可以有从非常简单到非常复杂的结构。复杂的测试会返回丰富而准确的反馈，但也需要资源和努力，这通常超出了小型开发团队的范围，更不用说单个设计师或开发人员了。

继续使用敏捷方法，我们使用几个变量和反馈类型，以便清楚地了解我们的设计、功能和服务能在用户心目中引发什么样的体验。

触摸次数

要管理的第一个变量是用户完成任务所需的触摸次数。触摸次数由从内容树的起点到终点的 s 最短路径树 (SPT)定义。起点可以是我们的主页或内容树中某处的另一个页面，用于执行更具体的任务。图 11–16 显示了呼叫支持用例的必要步骤。路径看起来很简单，但是由图 11–16 表示的简化的内容树并没有表示网页之间的内部链接。

图 11–16。 用来完成呼叫支援任务的触动次数。

SPT 算法用于其他更复杂的领域，但在我们的用例中，通过计算站点地图或内容树中完成任务所需的触摸次数，可以轻松实现相同的概念。触摸次数由测试人员在用例纸描述中报告，作为参考。

错误数量

第二个变量是用户在完成任务时犯的错误数量。有两类错误:

• 触摸错误。当用户触摸错误的链接时(图 11–17 左)。
• 触摸误识别。当用户触摸不可触摸区域时(图 11–17 右)。

当用户触摸了错误的链接时，这意味着他或她触摸了将他或她带离终点的链接，并且该链接不属于任务的最短路径。这种类型或错误可能是用户或设计的错误。

测试人员需要确定设计是否正确，用户是否犯了由环境或其他原因引发的错误，或者错误的设计是否引发了用户的错误。

图 11–17。 用户(触摸)错误的类型:错误链接(左)和不可触摸区域(右)。

当用户触摸不可触摸的区域时，认为他/她触摸了链接，这是不同的。在 99%的情况下，错误是由设计错误引发的。设计错误可能意味着缺乏用户导向，或者仅仅是错误的用户界面设计。无论如何，这种类型的错误提醒我们注意一些我们在设计阶段明显忽略的细节。

预计到达时间

第三个变量是预计到达时间 (ETA) ( 图 11–18)，用户完成任务所需的时间。ETA 是针对知道内容树并能够通过任务的测试人员计算的。

通常，经验丰富的测试人员会将最短路径时间作为测试的下限。下限定义了最佳值，这是一个实际上用户在测试中几乎从未匹配过的标准。用户越接近这个估计的时间，他或她就能更好地完成任务，并且(大概)用户体验的水平就越高。

图 11–18。 呼叫支持用例:计算预计到达时间(ETA)。

ETA 在用例文件描述中报告，作为测试人员的参考。

收集反馈

除了这三个变量，测试人员还可以从用户的评论中收集三种类型的反馈。

设计反馈

第一种反馈是关于用户界面质量的设计反馈。在本书的设计部分，我们了解到，在面向触摸的世界里，设计的每一部分都是一个收集关于每个设计元素的反馈的界面。图 11–19 展示了同一个用户界面的两种不同的情感反馈。

图 11–19。 调用支持用例:同一界面两种不同的设计反馈。

虽然这种类型的反馈在纸质原型测试中可以用来表明我们设计的正确性，但如果在电子原型测试期间收集，它会更有分量，因为实现的接口几乎与发布版本相同，并且信息包含更多有用的细节。

期望反馈

第二种类型的反馈是期望反馈关于用户的设计和服务期望。每当用户登陆一个不符合他期望的网页或点击一个链接，认为它代表一个与实现的服务不同的服务时，就收集这种类型的反馈。图 11–20 显示了当用户在链接后对登陆页面有不同的心理表征时会发生什么。

图 11–20。 购买 iPhone Dock 用例:期望与登陆页面中的设计不符。

这种类型的反馈在纸质和电子原型测试中的权重几乎相同。这些测试有助于理解我们的设计、功能和服务在语义上是如何在用户的头脑中表现出来的，以及这种意义是否符合我们最初的计划。

情感反馈

最后一种反馈是情感反馈关于用户在测试过程中的内心感受。这种类型的反馈在电子原型测试阶段更重要，甚至在纸质原型测试阶段也不经常收集。

情绪反馈由两种类型的刺激触发。一个是绝对的，由颜色、设计元素和所有与项目身份相关的事物触发。在图 11–21 中，iPhone 代表了这种刺激。

另一种类型的反馈是相对，涉及环境和这种类型的刺激在用户内心世界引发的变化，如图图 11–21 所示。“环境”一词指的是属于人类用户之外的物理世界(除了移动设备)的一切。

图 11–21。 情绪反馈由两种类型的刺激触发:绝对刺激和相对刺激。

这种类型的反馈可以在测试过程中给出关于用户内心世界的重要信息。作为来自我们网站或应用的全球交流的一部分，这种感觉非常重要。为了测试一个相对的刺激，比如环境，我们需要直接在移动设备上实现一个电子原型，并走到外面，允许用户界面加入真实世界。

评估技术

评估一个测试可能很困难，尤其是在处理大量数据和大范围项目时。为了获得可靠的数据，我们可以应用描述统计学的统计方法。在执行原型测试之后，我们不再需要这种类型的方法，敏捷方法仍然可以提供可靠的值，而不涉及繁重的计算和复杂的数学技巧。

测试变量评估

评估原型测试中涉及的变量的更简单的方法是计算每个变量的出现次数，并将其与实际测试中的出现次数进行比较。在 UML 中，用于估计(或表示)来自用例测试的期望值的实体被称为 Oracle。在我们的测试中，Oracle 由一组用自然数表示的变量值来表示。

在我们的原型测试中，有三个自然数与三种类型的变量相关:一个是触摸次数，一个是错误次数，一个是到达时间。

最简单的方法是为测试中必须匹配的每个变量设置一个下限。图 11–22 显示了用例文本描述中变量值的文本表示。在我们的示例中，我们将这些值设置为等于通过的测试(用户离呼叫支持链接还有四次触摸)，这意味着测试将通过或失败。

图 11–22。 一个关于变量值的文本用例。

一旦我们为每个变量设置了最小值，我们需要为测试设置变量的模态操作符。可变模态运算符为每个变量设置一个动词，显示期望值应该如何匹配。通常，只使用少数模态运算符。我们用两个词来表达我们的目的:“必须”和“应该”

模态运算符显示变量值是否必须匹配，或者只有应该匹配才能通过测试。我们只给出一个原型测试的简单例子:对于更复杂的项目和测试，为每个变量添加一定程度的匹配是一个好主意。

我们的用例测试只需要执行四次触摸就可以通过，没有触摸错误。ETA 变量的“should”属性表示这个变量的值不是通过测试的“必须”条件。在某些情况下，通过包含一些已通过案例的子集，设置每个变量的匹配百分比，可以获得更可靠的结果。

测试反馈评估

使用变量时，最重要的是知道如何设置它们。这个难的部分做完了，剩下的就是对比数据了。这种方法技术性更强，但不需要测试人员具备大量的技能或经验。

一个完全不同的场景是反馈评估。这是因为我们没有可以比较的数字，我们的经验将发挥重要作用。由于这个原因，我们可以引入任何实验方法或技术来评估反馈，只要我们指定了程序。

图 11–23。 带有用户反馈注释的文本用例

收集三种类型的反馈。图 11–23 显示了我们如何记录用户反馈的例子。当一切就绪后，我们需要记住每个反馈都有分量。反馈的权重是它相对于上下文的内在价值。用户可能会报告对我们的界面感到困惑，但特定环境中的压力水平可能是认知资源减少的结果，或者这些模式可能受到另一个应用或一些环境变量的制约。因此，需要测试人员的经验和实践来从用户的反馈中收集可靠的信息。

测试资源

Table 11–1 提供了本章中用于测试我们项目的一些工具。

总结

在这一章中，我们看到了计划测试阶段的重要性，以及如何在整个项目流程中执行这个阶段——而不仅仅是在过程的末尾。

我们首先展示了热图如何成为设计师和开发人员的可靠反馈来源。然后我们引入了纸质和电子原型。我们看到了这两种类型的测试如何帮助测试人员收集不同类型的反馈。

我们讨论了如何通过从流程流的先前步骤中应用工件回收来组织测试。我们看到了如何使用不同层次的细节来创建测试和用例。我们使用了 UML 符号，引入了用例文本描述和用例图。

然后我们看到了如何用纸质和电子原型进行测试。我们看到了如何创建和回收资产，以及电子原型是在设计的早期阶段执行的，而电子原型是在设计阶段的末期执行的，然后才进入实现阶段。

我们还看到了电子原型，因为它与 web 站点或应用共享相同的技术，所以可以在办公室之外的真实场景中测试项目。

最后，我们看到了如何评估一个测试以及这个过程中涉及的变量和反馈类型。我们提出了评估中使用的三种变量(触摸次数、错误次数和预计到达时间)和三种反馈(设计、期望和情感反馈)。

十二、最大化 iOS Web 应用的市场

天赋赢得比赛，但团队合作和智慧赢得冠军。

—迈克尔·乔丹

在本章中，您将学习如何推广 WebApp。您将看到如何使用一些特定的方法来帮助保证 WebApp 具有良好的可见性，甚至在它发布到网络上之前。

我们将讨论 Beta 测试邀请和新闻发布；您将看到为 WebApp 创建网站的好处，以及如何使用视频社交网络(如 YouTube)来提高知名度。

我们还将向您展示如何将 WebApp 提交到苹果 WebApp 门户网站，以及除了苹果官方门户网站之外，网络还提供了哪些其他选项。最后，我们将讨论如何将你的 WebApp 货币化，以及为此你可以使用哪些服务。

使用您的移动战略

之前，在第二章中，我们制定了一个移动战略，并讨论了该战略对于实现目标和减少错误，最终创建一个成功的项目是多么重要。一个成功的营销计划的关键是准确地知道你的 Web 应用能提供什么，以及你的潜在用户的概况。这就是为什么在项目早期制定的移动战略在这一点上变得至关重要。

利用开发移动战略时收集的信息，您可以针对特定范围的用户群更好地营销您的 Web 应用。第十二章介绍了一些最好的方法。

如何推广你的 WebApp

假设你的移动战略已经走上正轨，并且你知道你要瞄准的用户群，你就可以考虑如何推广你的 WebApp 了。正如您将在以下部分看到的，可以使用各种技术来接触更广泛的潜在用户。

这些技术可以根据 Web 应用的开发状态而改变。在发布的早期阶段，使用测试版邀请进行测试，并向少数重要用户介绍 Web 应用。如图 Figure 12–1 所示，一旦 Web 应用准备就绪，您就可以设计一个网站来创建一个身份和/或创建一个 YouTube 频道，您可以在其中插入关于最重要功能的视频教程。

图 12–1。 一个推广 native 和 WebApps 的 Wordpress 主题(图片来源:Templatic)。

在这一点上，Web 应用已经准备好在主要的面向苹果的博客上发布，并插入到一些主要的 WebApp 门户网站中，在那里您可以获得潜在用户的可见性。一旦 Web 应用在主要的 WebApp 门户上上线，就该利用社交网络的病毒性质来围绕您的 Web 应用进行正面宣传了。

使用测试版邀请测试者

营销计划的第一步甚至在 Web 应用发布之前就已经开始了。在设计人员和开发人员在内部完成 alpha 测试之后，Web 应用进入 beta 测试阶段，真实用户在他们自己的环境中测试它。

测试邀请阶段包括一小组用户，根据他们的个人资料和与其他重要用户的潜在联系来选择。选择这类用户是因为他/她代表了测试 Web 应用的重要特征；他/她还与潜在用户有着重要的联系，而这些联系是通过其他沟通渠道无法达到的。

在您的 Web 应用中，提前为 Beta 测试人员创建一个帐户，并在用户使用 Web 应用之前将该帐户和其他信息发送给用户，这将是一个好主意。这将为测试人员创造一个更舒适的环境，并帮助他将所有的服务和功能联系起来，减少他的学习曲线。

测试人员的一个很好的选择可能是另一个团队的设计师或开发人员，一个参与特定业务的用户，他可以传播关于 Web 应用的消息，或者一个重要的博客作者或记者。这一策略的见证人是美国记者、《华尔街日报》的首席科技专栏作家沃尔特·s·莫斯伯格(Walter S. Mossberg)，他总是在苹果公司的最新设备实际发布到每一家苹果商店之前收到该设备的版本。事实上，莫斯伯格在等式中扮演的角色更像是一个测试版审核者，而不是测试者，但苹果战略背后的概念是相同的。

使用新闻稿

报刊永远是各类新闻的第一环节，数字新闻也不例外。在网上主要的面向苹果的博客上发布关于你的发布的新闻稿是很重要的。你必须确保为你的 WebApp 提供一个完整的描述和关键功能的截图，确保细节不被博主掌握。

创建一个 WebApp 网站

创建一个网站或 web 应用意味着在互联网上传播其身份信息，被搜索引擎索引，并代表每个潜在用户的支持点。许多设计人员和开发人员在本地和 Web 应用过程中都忽略了这一步，这是一个严重的错误。对于任何类型的应用来说，网站都是最好的沟通渠道之一。

当设计一个网站时，记住你的 web 应用的身份和主要用户的目标轮廓是很重要的，这样你就不仅仅是在追求你个人的设计品味。在这个阶段，颜色的选择和设计中使用的线条类型至关重要。为一个主要是女性的 Web 应用创建一个激进的设计可能会在你的促销活动中对你不利。

图 12–2。 本地应用 Twitterrific 提供了一个应用网站的好例子。

在第四章中，我们讨论了色彩心理学以及色彩和用户心情之间的关系。除了正确选择颜色和线条，网站还必须包括以下部分:

• 功能。这就是 Web 应用能为用户做的事情，清楚而直接地陈述出来。功能也可以在主页上以预览的形式呈现，如图图 12–2 所示。
• 版本历史。务必注意 Web 应用中实现的所有更新和新功能，以便为开发人员提供背景知识，并为用户提供参考。
• 教程。重要的是，在网站上，用户能够找到一个教程，这将有助于他使用所有的主要功能和实现的服务。
• 关于。在可能的情况下，清楚地描述你的团队是很重要的。表扬整个团队将有助于你的应用在用户面前看起来更加专业。
• 支持。为用户提供支持，以解决与 Web 应用中实现的服务和功能相关的任何问题，这一点非常重要。对于任何想要创造回头客的团队来说，提供良好的支持是关键。
• 社交分享选项。为了让用户传播关于 Web 应用的新闻，提供一个社交分享选项是很重要的。在所有可用的选项中，Twitter 和脸书共享选项是必须的；提供脸书式的按钮也很重要。
• 社区(可选)。为开发者提供一个见面、分享和共同成长的地方非常重要。该选项仅适用于开发人员在不同地方工作而没有机会面对面交流的开源项目。
• 博客(可选)。更新 Web 应用的开发状态非常重要。一个活跃的博客给用户一个积极的形象，并作为良好的支持，帮助创造回头客。

应用网站的最好例子来自于那些致力于本地 iOS 应用的网站，因为本地 iOS 项目背后的销售需求使得本地开发者在比较 web 开发者之前采用这种技术；Twitterrific 应用网站提供了一个很好的例子，如图图 12–2 所示。这两种开发方法的好处是一样的。

最后，务必为 iPad 和 iPhone 用户实现添加到主屏幕功能。这被认为是在每个 WebApp 中实现的一个好的实践，原因有二。首先，并不是所有的用户都会给页面加书签，即使他们觉得这些页面很有趣；其次，当添加到主屏幕时，Web 应用被认为是本地仿真过程的最后一步。如果不能从主屏幕启动，访问类似本机的 WebApp 会大大降低用户的类似本机的体验。

使用电子邮件营销

创建应用推广网站后，鼓励潜在用户注册时事通讯是一个不错的主意，这些时事通讯会提供有关您的 web 应用状态的信息、介绍新功能或宣布错误修复。

图 12–3。 原生应用“我该不该买”就是电子邮件营销的好例子。

Figure 12–3 展示了一个实现这种方法的网站，一旦 WebApp 退出 Beta 测试阶段并可供所有用户在线使用，它就会提供更新。

创建 YouTube 视频教程

视频教程是为 Web 应用的用户，尤其是初学者提供支持的好方法；这些教程简单直接地解释了如何正确使用应用的服务和功能。YouTube 视频可以嵌入到您的应用网站的教程部分。YouTube 频道在谷歌这样的搜索引擎中有很高的知名度。

过去，许多大牌，如苹果，都有自己的 YouTube 频道(见图 12–4)。最近的频道功能现在允许用户定制频道样式和主题，为开发人员提供了匹配特定用户身份的机会。

图 12–4。 苹果桌面、iPad 和 iPhone 上的官方 YouTube 频道。

开一个 YouTube 频道很容易；在 http://www.youtube.com 注册一个账户只需要几分钟。使用上传视频表单时，您必须记得选择正确的标题、描述和标签。良好的标题和标签是必要的，以便最大限度地提高视频在谷歌搜索引擎上被准确索引的可能性，使用户更容易浏览所有重要信息。

每个视频下的描述由一个三行的预览加上一个显示整个描述内容的(更多信息)链接组成。在三行预览中，请确保插入描述视频内容所需的所有内容，仅在第三行后详细介绍。这保证了用户在与您的视频互动时获得最高水平的体验。

提交至 Apple WebApp 门户网站

对于 Web 开发者来说，苹果 WebApp 门户是最接近应用商店的东西。这个门户网站不能像使用不同渠道的应用商店那样，为提交的所有 Web 应用提供相同的可见性，但它仍然是推广任何类型的 Web 应用的最佳选择。

正如在 App Store 的世界里，为了提交一个项目，需要向苹果注册一个开发者账户。这里的区别在于，在这种情况下，即使是免费版本也足以将 Web 应用提交到门户。

图 12–5。iPad(左)和 iPhone(右)上的苹果官方 WebApps 门户。

从 Apple WebApp 门户，如图 12–5 所示，点击位于右侧边栏标题为“提交申请”的横幅您将被重定向到位于[developer.apple.com/devcenter/safari](http://developer.apple.com/devcenter/safari)/的苹果开发中心，在那里，一旦使用您的 Apple ID 登录，您将能够访问苹果 iPhone Web 应用表单。在表格的最后，可以插入 320 × 436 像素的应用截图和 128 × 128 像素的产品应用图标。

您还可以通过更新或更改与您的 web 应用相关的任何类型的信息，从 Apple 开发中心管理您的提交。

提交到其他 WebApp 门户

有几个原因可以解释为什么使用 Apple Store WebApp 门户网站是任何 Web 开发人员推广其应用的最佳选择。第一，门户是官方来源，由苹果人员监管；第二，组织得很好。苹果 WebApp 门户并不是唯一的出路；推广您的 Web 应用的其他好方法也是可用的。

OpenAppMkt，可在openappmkt.com/获得，是一个纯苹果风格的 WebApp 门户；它组织得很好，并提供了几个选项，如共享工具栏和用户评论框，这是苹果门户网站所没有的。从用户的角度来看，OpenAppMkt 需要一个免费的用户帐户，用户可以在其中插入自己的电子邮件信息，这些信息将用于将 Web 应用直接发送到开发人员的电子邮件帐户。

图 12–6。iPad 上的 OpenAppMkt。

如果您想提交您的 Web 应用，您需要注册一个开发者帐户。从开发人员仪表板的侧边栏，您可以单击 Submit New App 按钮，并在表单中填写所有 Web 应用的信息。您还需要提供一个应用图标，选择正确的类别，并指定您的 Web 应用是否是为 iPhone 和/或 iPad 设计的及其价格。

OpenAppMkt 对于 web 开发人员来说是一个很好的资源，它还以 80-20%的利率提供收入处理。这种方法类似于 App Store 使用的方法。Figure 12–6 显示开发者选项卡，您可以在其中上传您的 WebApp 信息。

图 12–7。OpenAppMkt 的添加到 Home 函数在起作用。

图 12–7 显示，OpenAppMkt 已经为 iPad 和 iPhone 用户应用了将提醒“添加到主屏幕”插入 WebApp 的最佳实践，增加了类似本机的体验。

图 12–8。eHub 网站是一个不断更新的 Web 应用资源。

另一个很好的 WebApp 门户是 eHub(见图 12–8)，可在 http://emilychang.com/ehub 获得。这个门户网站承载桌面项目和移动 Web 应用，并产生大量的互联网流量。

利用社交网络的病毒式传播

建立网站是 Web 应用营销计划的基本步骤；添加博客也是向用户更新错误修复和新功能的好方法。社交网络为从个人到企业的各种类型的推广提供了一个完美的平台。

订阅社交网络让你有机会发布任何类型的更新。它甚至比博客更快，让你有机会发现和创造新的重要关系，如图 Figure 12–9 所示。在这方面，并不是所有的社交网络都是平等的；例如，像 Twitter 和 LinkedIn 这样的平台(能够在个人主页中导入推文)比脸书更加以商业为导向。然而，重要的是优化任何可用的通信渠道。

图 12–9。 社交网络互联的例子(来源:图片来自 Labrow Marketing)。

说到一般的 WebApp 项目，第一步可能是创建一个 LinkedIn 帐户。LinkedIn(参见 Figure 12–9)是一个面向商业的社交网络平台，是与世界各地的设计师、开发人员和专业团队建立重要联系的最佳渠道。LinkedIn 个人资料是完整的，它提供了一个展示你的知识和过去经验的绝佳机会，还提供了向你的电子邮件联系人发送邀请、导入你的 Twitter 时间表和你的 SlideShare 演示文稿的能力，同时与你的许多渠道建立了强大的联系。

第二步可能是创建一个 Twitter 账户。该帐户可以是个人的，也可以专用于 Web 应用。Twitter 是一个有创意的微博社交网络平台。这意味着，除了私人用户之外，许多专业设计人员和开发人员也使用它来分享他们项目的新闻和更新。Twitter 的帖子限制在 140 个字符以内，非常适合简短快速的项目更新。你的个人 Twitter 主页可以通过修改背景图片和主题的调色板来定制，以匹配任何个人身份。

第三步可能是为你的 WebApp 创建一个脸书页面。在这三个网络中，脸书是最不注重商业的，因为与 Twitter，尤其是 LinkedIn 相比，出于职业目的使用脸书的人的比例是最低的。尽管如此，聪明地使用脸书可能会让你接触到新的潜在用户——那些还不是 WebApp 大用户或回头客的人。在这个阶段，记住不同的项目有不同的需求和优先级也很重要。选择合适的社交网络来接触你的目标用户。

图 12–10。 社交媒体网络上的病毒式传播(图片交集咨询)。

将 Web 应用货币化

Web 应用的赚钱不像原生应用那么容易，因为你不能依赖应用商店的支持。App Store 承担了销售你原生应用的责任。应用推广只是加分项；App Store 提供了几乎所有提交给它的应用的良好可视性。当有必要从一个需要从零开始推广的 Web 应用中提高收入时，音乐就会改变。

除了 OpenAppMkt 这样的门户网站提供的机会之外，增加收入的两个最佳方式是通过 Google AdSense 和 PayPal 捐款。

图 12–11。iPad 上的 Google AdSense 服务注册页面。

Google AdSense 提供了在你的内容中插入和展示定向广告并从中赚钱的机会。这项服务可以在移动和桌面平台上运行，有一个专门的网页应用部分。在 Google AdSense 上注册一个帐户后，您需要向您的 Web 应用添加一段代码，就像在 Google Analytics 中一样。Google AdSense 还提供了定制移动广告的能力，以最好地匹配您的 Web 应用设计的外观和感觉。

PayPal 是一个众所周知的广泛使用的平台。您可以在您的 Web 应用中使用 PayPal 捐款，以便从中筹集资金。在这种情况下，将“捐赠”按钮添加到应用网站和 web 应用是一个好主意。如果你的 Web 应用是一个特定的应用，并有效地解决用户的功能或服务问题，PayPal 是一个有效的收入来源。

WebApp 市场上的资源

Table 12–1 列出了使用互联网推广任何类型的 WebApp 的主要 WebApp 门户和社交网络。我们已经包括了 PayPal 和 AdSense 的链接，供那些对他们的项目货币化感兴趣的人使用。

总结

本章讨论了如何最大化 Web 应用市场，通过展示由于应用商店模式，Web 应用市场无法与本地应用市场相提并论。

在本章的第一部分，我们介绍了在项目早期开发的移动战略如何有助于为您的项目规划促销活动和营销战略。

在本章的第二部分，我们介绍了几种实现营销目标的方法。我们使用(VIP) Beta 测试人员来测试和推广应用，然后我们创建了一个网站来将 web 应用介绍给搜索引擎和互联网。创建网站后，我们创建了一个 YouTube 频道来推广应用，并提供视频支持以将视频教程导入到网站。

在本章的第三部分，一旦我们的 Web 应用的主要结构建立起来，我们就把它提交给 Apple WebApp 门户以及其他门户，比如 OpenAppMkt。我们还看到了像 OpenAppMkt 这样的门户网站如何通过应用商店中的本地应用来帮助我们提高收入。

在本章的第四部分，我们利用社交网络的病毒式传播，向 LinkedIn 和 Twitter 上特定类型的用户以及脸书上各种类型的潜在用户传播关于我们 Web 应用的信息。

在本章的最后一部分，我们介绍了两种将 Web 应用货币化的方法。ADSense 服务可以为开发者提供不错的平均收入。我们还看到了 PayPal 服务如何更好地与解决重要问题的 Web 应用配合，并在用户中产生一种感激之情，促使他/她捐款。

十三、超越移动网络，展望无处不在的计算

那些疯狂到认为自己可以改变世界的人，才是真正改变世界的人。

史蒂夫·乔布斯

移动设备、无线和蜂窝通信的激增

2011 年，谷歌首席执行官埃里克·施密特博士在棕榈泉举行的美国商业协会活动上发表主题演讲时，提供了一些关于移动使用的惊人预测。

“我们谈论的一切和你将要听到的一切都在说，‘做移动业务’，”施密特宣称。“我们从内部观察图表，它的发展速度比我们所有的预测都要快。这是未来，每个人都会适应。”

据世界上最具革命性的公司之一的首席执行官施密特称，在未来几年内，将有 15 亿至 20 亿人联网。“这是一个包含所有人的愿景。施密特继续说道:“只要你有某种移动设备，就不会因为你有多少钱而有所区别。

与任何其他技术的预期扩张相比，这些数字似乎非常巨大，但事实是，根据 ITU(联合国国际电信机构)最近的一篇文章，移动使用的增长已经超过了谷歌首席执行官的崇高预测。“随着世界人口超过 68 亿，近三分之一的人在网上冲浪，”国际电信联盟市场信息和统计负责人 Susan Teltscher 说。就连美国总统巴拉克奥巴马(Barack Obama)也表示，他计划将无线设备的广播频谱扩大一倍，主要是为了应对不断增长的移动设备市场。

新的和即将到来的移动视频应用将有助于弥补移动和媒体中心设备的巨大流量需求的大部分。例如，iPhone 和 iPad 上的 FaceTime 将极大地影响全球的网络功能。

根据思科全球移动数据流量预测和最近的摩根士丹利报告，到 2015 年，地球上几乎每个人都将拥有一台移动设备，平板电脑的渗透将有助于将平均移动连接提高到每月 1.118 兆字节。增长率最高的是印度，为 158%，中东和非洲的年增长率为 129%。其次是其他国家和地区，如拉丁美洲、亚太地区、南非和墨西哥。

虽然在不久的将来，媒体中心和台式电脑等家庭设备将留在现有网络上，随着时间的推移，这些网络将得到改善，但智能手机和平板电脑等移动设备将不得不等待迁移到即将到来的 4G 技术，他们将需要这些技术来有效地运行新的基于视频的应用。

触摸屏和多点触控技术带来的下一代用户体验

本节标题中的关键术语是“用户体验”多点触摸技术给每个人——私人用户和专业开发人员——带来了新的好处和机会。这种技术的影响如此之大，以至于现在我们认为它是电子史上的一次革命。Figure 13–1 展示了多点触控设备上可用的新应用环境的一些示例。

乍一看，这场革命的基础似乎是多点触摸屏技术，但正如你在本书中所学的，一切都发生在用户的头脑中。从这个角度来看，触摸屏仅仅是一个触发器，而不是事件。事件是用户体验的改变。

这种改进的用户体验来自新的多点触摸模式，移动用户可以通过多点触摸屏技术的发展来利用这种模式。这一进步从根本上改变了环境和用户之间的关系。这是新的多点触摸用户体验的进化链。

图 13–1。 多点触控技术设备上的新应用环境

新技术、新可用性和新机遇

当第一代 iPhone 在 2007 年推出时，移动社区受益于能够提供新的浏览体验的设备。在 2007 年之前，用手机或其他移动设备上网远没有今天这么愉快。因此，移动市场开始以令人难以置信的速度增长，甚至四年后，它仍在快速增长。

2007 年，为苹果新设备开发软件的唯一方法是编写 Web 应用，但许多国家还没有为这种类型的革命做好准备。除了 HTML5 缓存功能，所有的 Web 应用在某种程度上都依赖于互联网接入，许多国家都无法提供廉价的 24/7 契约来满足用户的新需求，从而限制了设备的巨大潜力。

2008 年，苹果发布了第一个 SDK 和第二代 iPhone。与此同时，iPhone 应用商店向成千上万新的原生应用敞开了大门。这些新的应用为旧的任务带来了新的模式，提供了新的和改进的用户体验。这些原生应用增强的可用性改变了用户习惯，创造了全新的习惯，将 iPhone 带到了以前没有蜂窝或移动设备的地方。

这场革命已经开始，但直到 2010 年苹果推出 iPad 才告结束。以 iPhone 的 3.5 英寸小显示屏为代表的最后一个障碍终于被克服了。新的 9.7 英寸多点触摸显示屏提升了用户体验水平，为网络浏览树立了新的标准。它能够打入 iPhone 因其小显示屏而无法进入的市场。

iPad 革命每天可见。医生、教授、律师和音乐家，以及航空公司和汽车厂等公司已经将新平板电脑融入到他们的日常活动或零售产品中，提高了他们工作和产品的质量，并创造了新的活动类型。

新的和改进的可用性和用户体验水平使得计算机历史上第一次有可能将电子设备带给所有类别的用户，甚至是那些以前无法接触到的用户。一类是儿童。对他们来说，使用基于多点触摸的界面比使用基于鼠标的界面更自然。这使得平板电脑能够在早期用于许多类型的学校活动，在这些活动中，由于认知和后勤原因，使用 PC 是不切实际的，如图 Figure 13–2 所示。

图 13–2。

*另一个新的类别是老年用户——以前从未使用过电脑或者很难使用电脑的人。我相信你能想出这样一个例子:一位父母在拿到 iPad 之前无法上网，但在拿到 iPad 后立即开始上网，没有任何问题。我母亲就是这样一个人。她从来不会用电脑，现在她像个极客一样上网，看 YouTube 上的新闻频道，查看天气预报，阅读当地报纸。

然而，多点触摸革命还远未完成，为了与这场革命保持一致，当这些小型移动设备鼓励创建更大的基于触摸屏的系统时，这一过程中的下一个重大步骤将会发生，这些系统最终将进入我们的工作和家庭环境。我们已经习惯于在科幻电影和电视剧中看到的计算机饱和的未来也许并不像我们想象的那么遥远。

多点触摸屏革命将如何改变下一代计算

世界正处于移动网络革命的中心。在这场革命中，我们可以识别出两股截然不同的力量:智能手机和平板电脑。这个结论看似显而易见，但其含义比你想象的要深刻。

一方面，iPhone 等移动设备改变了许多用户的生活方式，给他们带来了新的工作方式或简单地完成普通任务的方式。在任何其他设备之前，智能手机推动了我前面提到的巨大网络增长，这些设备引领了计算机历史上最激动人心的技术革命之一。

的确，一些应用，比如 YouTube，可以在小屏幕上完美运行，比如 iPhone 的屏幕；其他应用，如网飞，在 iPad 的 9.7 英寸显示屏上看起来更好。这也将有助于视频应用的宽带需求增长。

更大尺寸的视频并不是 iPad 这样的平板电脑的唯一重要特征。除了更大的显示屏，平板电脑还拥有触摸屏界面和便携功能。在平板电脑出现之前，唯一能够从互联网发送和接收数据的移动设备是笔记本电脑，使用笔记本电脑对用户来说是一种不同的体验。

图 13–3。 快思聪(左)和莎凡特(右)的家庭自动化应用

这种新方法为用户带来了大量创新应用，如图 13–3 所示。许多公司开始熟悉平板电脑，以便将其功能集成到公司的项目中。开发家用产品的开发者首先意识到了让他们的产品与 iPad 兼容的可能性。媒体中心、家庭监控系统和其他类型的远程控制系统只是这种产品的几个例子，并且将来会有更多的这种产品。

从家用到普适计算和环境智能

家庭和房屋自动化是移动设备和用户环境之间的一种新型连接的两个方面，这种连接导致了所谓的“无处不在的计算”。普适计算到底是什么？

1991 年，马克·魏泽在他的开创性论文“21 世纪的计算机”中指出,“最深刻的技术是那些消失的技术。他们将自己编织进日常生活的肌理中，直到与日常生活无法区分。”这是普适计算背后的核心概念。

80 年代是微处理器的十年，以个人电脑为标志。那是我们真正制造计算机的十年。90 年代是网络和通信的十年，是人们将计算机连接在一起的十年。它以万维网为象征。2000 年代是个人电脑变成小型设备并变得便携的十年。它首先被笔记本电脑所象征，然后被智能手机所象征。现在的十年，电脑无处不在，无处不在，无处不在。世界的每一个部分都已经连接到网络上，可以通过网络进行搜索，并且可供用户使用。图 13–4 展示了一个普适计算的例子。这个项目叫做 vrFlora，在 UbiComp 大会上展示过。它显示了适合用户情况的自适应响应。

图 13–4。ubi comp 大会上的 vrFlora 项目(图片来源:Sejin Oh)

当我们意识到计算机变得看不见的时候，无处不在的计算时代就到来了。在这个时代，人们不再是严格意义上的“使用者”，而是“主体”当人和计算机从单向关系转变为双向关系时，用户就成了主体。换句话说，主体被技术使用的方式和他们自己使用技术的方式一样。受试者可以走在街上，与连接到 GPS 卫星的智能手机的触摸界面进行互动；同时，他或她可以通过监控摄像头的视频接口进行观察，并通过生物识别系统的传感器接口进行监控。

普适计算的原始实现的一个例子可以在增强现实应用中看到，这些应用可以在 iPhone 和 iPad 上运行(见图 13–5 和 13–6)。这些 AR 应用已经向用户体验的新范式迈出了第一步，但它们产生的数据流仍然只向一个方向流动:从对象到用户。

图 13–5。 一个增强现实的实现(image Earthmine)

随着计算机变得越来越小，它们的并行处理呈指数增长，无处不在的计算将带来一种新型的环境，这种环境能够与一个主体进行双向交互，发送和检索数据，并实现所谓的“环境智能”。当万维网和它的用户(主体)之间的桥梁完成时，计算世界将进入一个新的时代。

今天，我们可以用移动设备做很多事情，包括智能手机和平板电脑，来构建一个小小的未来。网络是“无处不在范式”中涉及的每一个设备之间的链接，这为每一个设计者和开发者带来了令人兴奋的机会，因为天空是无处不在计算的极限。

记住，“……那些疯狂到认为自己可以改变世界的人，才是真正改变世界的人。”

图 13–6。 将一个环境中的物体转化为一个界面中的物体(图像纤维设计)。

电信和普适计算的资源

在下表中，我列出了一些资源，您可以从中获得更多关于电信、移动市场的实际增长以及无处不在的计算的新方面的信息。

总结

在这一章中，你看到了移动革命的下一步是什么，以及无处不在的计算将会变成什么。这是结合新网络能力和新移动技术的下一步发展。

首先，您看到了第一次移动革命远未结束，它仍然会导致移动市场和宽带需求的增长。

接下来，您发现了新的触摸屏技术将如何培养新一代的可用性，以及这将如何为设计师和开发人员带来新的机遇。

您还会读到触摸屏革命将如何改变下一代计算，以及家用和环境智能如何成为下一个进化阶段的一部分。

最后，我分析了普适计算在过去几十年中的发展，并介绍了新的普适计算范式将如何改变用户角色的关键概念，改变用户与周围技术的交互方式，并将他或她变成一个系统。*