iOS Web应用开发——2.1　实现移动信息架构

“……最让我震惊的事是，人们实际使用网站的方式与我们想象的有很大差别。” ——Steve Krug 移动策略和信息架构流程是项目流中最重要的两个变量。经过这些过程，你才能奠定网站或Web应用的基础。之后剩下的工作就是在此基础上添砖加瓦。 正因如此，本章力求涵盖这些重要流程中的众多基本细节，先从定义移动策略着手，接着展示如何实现信息架构流程。 在这之后，将介绍信息架构流程中的三个主要步骤，以及如何将这些步骤套用到一个iOS Web应用的设计上。还会讨论这一做法中的“黄金法则”，以及在这一流程中可用性与可访问性是如何相互影响的。 本章最后会检视iPhone与iPad的设计模型，并分析它们的用户界面元素。 2.1　实现移动信息架构 本书将按照一个可视化流程图（见图2-1）的顺序展开学习，这样你可以对当前和之后的每一步都有一个清晰的认识。移动项目流中的起始阶段是分析。这一阶段中需要定义移动策略。项目越大，第一步就越重要。策划一个健全的移动策略能够规避掉项目的主要风险。 经过初步分析之后，便可以着手信息架构流程。在这个阶段，你要做的就是解释移动场景中所需的内容。在移动信息架构流程中，你需要发掘想要传递或提供的信息或服务类型， 并努力使之符合用户的需求。在这一流程中，还需要为不同的用户场景敲定合适的元数据结构。 用户的直接环境是移动和桌面环境的主要区别，而桌面环境中用户信息交互总是相同且不 变的。 说明 正如你将看到的那样，处理移动应用与桌面项目并没有太大的不同。本书将介绍整个流程，确保使读者可以一窥全豹。 图2-1　移动项目流程图——步骤1.1：信息架构 2.1.1　信息架构及其重要性 信息架构是每个项目的根基所在。参照Richard Saul Wurman的说法（发表于1976年的美国建筑师协会国家会议），我们将信息架构师定义如下： 对数据进行有效的组织梳理，将复杂的信息清晰化的人。 建立信息结构索引图，使其他人能按图索骥，获取所需知识的人。 21世纪新兴的顺应时代需求的专业工种之一，致力于清晰化、人类理解力以及信息管理科学。 仅仅凭借靓丽夺目的视觉设计，或提供市面上最新的服务，并不能为你的新网站或Web应用的成功打包票，因为如果没有一个优秀的信息架构，即便是设计极佳的产品也仍然有折戟沉沙的可能。从桌面端到移动端，信息架构几乎是每一个项目中最容易被轻视的步骤之一。 通过构建移动信息架构，不仅定义了如何来组织信息，还定义了用户在特定场景下如何进行交互。 信息架构并非一个一成不变的流程。它应该灵活运用，视具体情况来优化协调投入产出比。以下是我个人对这一流程的一些理解，我将其分为九个阶段。 1. 信息架构的九个阶段 完整的信息架构流程应由九个阶段组成： 信息调研（IR） 信息管理（IM） 内容架构（CA） 体验设计（XD） 用户体验（UX） 信息设计（ID） 可用性工程（UE） 交互设计（ID） 人机交互（HCI） 在起始的信息调研（IR）阶段之后，按顺时针方向（见图2-2）从信息管理（IM）阶段一直到人机交互（HCI）阶段，细节的复杂程度会依次上升。 在信息管理阶段，人们并不怎么关注细节，相反会更多地着眼大局。 图2-2　信息架构流程：从设计到实现 显而易见，这个流程中仍然有迭代的空间（大多数现代开发方法论都持有此观点），但一般而言细节会越来越复杂。下面先来具体地看一下这九个阶段。 (1) 信息调研 作为流程的第一步，这一开始收集信息的阶段相当关键，因为未来的决策全部建立在以下信息之上。 需要用到的技术 市场分析 竞品对比 输出文档 项目需求 (2) 信息管理 这是整个流程中制定策略的阶段。这个阶段的主要工作是策划一个全局的处理方式，供团队在管理信息时采用。信息管理方式则涉及以下内容： 需要用到的技术 头脑风暴 进程图表 流程图 路线图 信息管理策略 输出文档 信息管理规范 移动策略 (3) 内容架构 本阶段中，可以开始比较宽泛地设计网站或应用中需要展现的内容，并筹划如何去组织和整理它们。要完成这一任务，可能需要依靠下面几项内容： 需要用到的技术 纯内容标注法 语意标注 站点导航图 思维图 设计图 灰盒线框图 泳道流程图 电子版原型 输出文档 内容规范 (4) 体验设计 这一阶段将从更宽泛的、纯设计而非实物的视角去审视用户将得到的整体性体验。这一过程将包含有： 需要用到的技术 整合市场营销活动 多渠道策略 客户使用周期计划 客户关系管理策略 流程图 站点导航图 输出文档 体验设计规范 (5) 用户体验 本阶段中，你需要根据不同的用户场景来组织网站或应用的内容。 需要用到的技术 线框图 纸面原型图 电子版原型 输出文档 用户体验规范等 (6) 信息设计 这一阶段开始设计如何展现信息，用文字或图形的形式都可以。 需要用到的技术 纸面原型图 页面模版 线框图 输出文档 信息设计规范等 (7) 可用性工程 本阶段将致力于设计用户体验，主要是通过各种设计模式来实现。 定义　设计模式 “一个可复用的解决方案，用于处理特定场景下的常见问题。一种设计模式并不是一个可以直接转化为代码的已完工设计。它是对于如何解决问题的一种描述或者模板，可以用在许多不同的场合。”（出自维基百科） 如果应用了一个可迭代的流程，那么在本阶段中也能利用人机交互阶段的研究成果来解决可用性问题。毕竟本阶段的重点是界面的基本细节而非外观设计。 （上一阶段的）产出物和人为结果 详细的线框图 纸面原型图 电子版原型 流程图 输出文档 可用性工程规范 (8) 交互设计 这一阶段将开始设计用户界面，使用户可以与站点或应用进行互动。以下是可以用来帮助改进交互设计的工具： （上一阶段的）产出物和人为结果 故事板 交互顺序图表 可交互的原型 状态图表 输出文档 交互设计规范 (9) 人机交互 这是最复杂的一步，主要关注用户与计算机系统或移动设备进行交互的科学与技术细节。 （上一阶段的）产出物和人为结果 计划分析 用户场景 电子版原型 输出文档 人机交互规范 2. 针对iOS设计与开发的敏捷优化信息架构流程 苹果应用商店的出现，给予了很多个人开发者或小型开发团队独自开发应用的机会。根据经验，个人开发者或小型开发团队在做中小型项目时，并不需要严格遵循上述信息架构流程的所有阶段。当然，信息架构流程中的所有准则都是很重要的，但你可以进一步筛选，尽可能在节省时间的同时维持效率。 我对敏捷流程深信不疑，并认为专门针对iPhone和iPad的敏捷优化信息架构流程是平衡工作时间投入与产出的最佳途径。 在你自己的经过优化配置的iPhone和iPad项目流中，其信息架构也应包含以下阶段。 (1) 信息调研 需要用到的技术：竞品对比 (2) 信息管理 需要用到的技术：头脑风暴、流程图、路线图 (3) 内容架构 需要用到的技术：纯内容标注法、站点导航图、思维导图、灰盒线框图 (4) 体验设计 需要用到的技术：流程图、站点导航图、灰盒线框图 (5) 用户体验 需要用到的技术：线框图、纸面原型图 (6) 信息设计 需要用到的技术：线框图、纸面原型图、页面模版 (7) 可用性工程 需要用到的技术：纸面原型图、电子版原型、流程图 (8) 交互设计 需要用到的技术：交互顺序图表 (9) 人机交互 需要用到的技术：电子版原型 说明 在敏捷流程中，在每一阶段的末尾都要求团队中的所有成员给出反馈。只有独立开发者可以忽略这个要求，否则作为团队的一员，都应该反馈。 正如你所看到的，在信息结构流程中有些通用的技术在多处得到应用，因为平衡工作时间投入与产出的最佳途径便是遵循以下两个原则。 选择对于移动场景而言最敏捷优化的技术。例如，在用户体验阶段，使用纸面原型图来代替电子版原型。 使用流程中最通用的技术。例如，如果使用原型图，就可以在用户体验、信息设计和可用性工程阶段复用成果。 说明 上面提到的“复用”并不是指在现阶段中原封不动地使用前一阶段的成果，因为随着信息架构流程的推进，这些成果的复杂和详细程度也相应增大。 复用同一件成品意味着在此前的基础上进一步发展改进，使之能用于项目流程的下一个阶段，避免在每一阶段都从头开始使用新技术。 到这里，你已经了解了整个信息架构流程，也应该知道如何去修改这一流程以便在中小型项目中更好地优化工作时间了。下面我们把这些都用图片展示出来。 图2-3中描绘的流程形象地展示了在信息架构流程中哪些地方可以应用信息架构技术复用。 要说明的是，敏捷流程往往是更佳的选择，尤其对于一个大型项目而言。但要注意的是，在中小型项目中，并不需要遵循整套信息架构流程来设计与开发产品。 3. 信息架构中的三个主要流程 前面说到的信息架构的九个阶段可以分划到三个主要流程中（如图2-4所示）： 探索 分析 架构 图2-3　针对iPhone和iPad设计工作的敏捷优化信息架构流程 在探索流程中，我们开始收集与网站或应用的市场环境相关的信息。这一流程包含了信息调研阶段。 图2-4　信息架构框架中的三个主要流程 在分析流程中，我们则开始处理收集到的信息，规划正确的方法来制定移动策略。这一流程包含了信息管理阶段。 在架构流程中需要完成设计工作。这一流程则包含有体验设计、内容架构、用户体验、信息设计、可用性工程、交互设计以及人机交互等阶段。 正如读者所看到的，到目前而言，移动信息架构与传统的桌面项目架构并没有太多的差异。我仅仅多提到了一点：用户环境。 用户环境（如图2-5所示）是影响用户体验的重要因素。 图2-5　信息架构框架：内容、环境与用户 想象一下，平躺在沙发上，娴静地阅读RSS阅读器里最新的资讯，那感觉是何等惬意。然后，再想象一下，如果是在地铁上，或是早晨7点半拥挤的公汽上，又该是何感受。 只需在脑子里过一遍这些场景，你马上就能理解，体验环境对用户体验的影响有多大。 示例 相同的用户环境，不同的具体实例。  用户环境：阅读RSS资讯  环境实例：在沙发上阅读、走路时阅读、地铁上阅读以及公共汽车上阅读 因此，仔细为具体的环境实例建立模型是项目中的一个关键要素。如果说在分析阶段犯一个错误、遗忘某个特定的实例会造成一倍的损失，那么同样的错误在设计阶段和开发阶段就会造成十倍和百倍的损失。 在分析阶段遗忘某个实例环境的后果相对来说不是那么严重，因为随时可以拿起笔在环境实例检查列表上添加一个新的条目。但在设计用户界面时，如果依据的是分析阶段的不完整信息，那么很可能设计出的界面总是无法满足用户的所有需求。更糟糕的是，如果在开发时基于一个设计很蹩脚的界面，就意味着有些用户将无法利用最终发布的服务。我们可以在图2-6上看到信息架构流程中因为失误而增加的成本。 所以，一旦你在项目流中持续推进，一切都将随之变化。如果你想要在项目流中回退一个阶段，以解决之前的信息架构中遗留下来的问题，那么整个项目流都会被工期和时间轴所影响。这样的延迟甚至可能带来商业目标上的变化。 现在，你应当已经了解如何使用一个敏捷优化过的流程，来更好地平衡信息架构中各阶段的时间投入。 图2-6　信息架构流程中因失误而增加的成本 2.1.2　遵循移动策略的黄金法则 移动平台是一个完全不同的媒介，它遵循着一套不同的法则。但是，一旦定义了一个敏捷信息架构流程，就可以在遵循一些黄金法则的前提下处理一般的架构案例。 1. 理解用户和他们的需求 试着去理解用户的身份，他们在网站或Web应用上搜寻什么，以及他们在使用时身在何处。 2. 设计时考虑移动特性 前文曾经讨论过一些环境实例，了解了对于创建任何移动产品，环境都极其重要。预测用户环境可能很困难，因为不可能预料到所有可能影响用户体验的情况。 专注于移动用户可以确保你的产品随时随地都能够使用。一旦明确了应用的目标，就要试着构想所有可能使用此应用的场景，然后采访潜在的用户，了解他们平常使用移动应用的环境 3. 放弃转换，从头创造 若想只是简单地把桌面版的网站或Web应用移植到移动设备上，那就犯了兵家大忌。我们必须创造一个全新的产品，而不是仅仅针对小屏幕重新构想现有的东西。为移动设备特意打造而非转换体验，能使用户以更友好的方式更快地获取所需信息。 4. 简单至上 如果说有一条绝对不能忘记的法则，那就是，iPhone和iPad都是智能电脑，但人们只想以简单的方式去使用。人们常常在做其他事情的时候使用Apple移动设备，例如散步、聊天、听音乐或演讲，甚至开车（这很危险，请不要在开车时这样做！）时，等等。人类的认知能力是有限的，如果在进行其他活动的同时分出一部分注意力，必然很难去处理像典型的桌面用户界面那样复杂的结构。基于这一点，你的应用越简单直接，用户的移动体验就越好。如果你真正理解了这个要点，想必也会开始钦佩Apple当初的决定——在iPad上使用iOS系统而不是一个完整版本的OSX 系统。 2.1.3　纯内容标注法 网站的使命是传递信息。在互联网的早期，网站几乎毫无设计可言。时至今日，内容仍然被视为一个网站或应用最重要的部分，其他任何东西都要在内容的基础上构建（如图2-7所示）。 纯内容标注法比较简单而基础，用来向设计者演示最终的布局形式。设计者以此为蓝本，确定各自负责的内容，以推动整个流程更快捷地进行。 图2-7　符合W3C标准的HTML标记（左图，实例为《华尔街日报》网站）与相对的语义标记实现（右图，实例为《纽约时报》网站） 纯内容标注法和语义标记有着紧密的联系。这一技术的目的是使用恰当的语义元素来标注出网页内容的结构。这些元素是根据它们的语义来使用的，而不是它们在视觉上所处的位置。 语义的一般层次是自顶向下的： (1) 主导航区 (2) 品牌区 (3) 主要内容区 (4) 辅助内容区 (5) 副导航区 (6) 站点信息 说明 语义标记是“Web内容可访问性指南2.0版”（WCAG20）的一部分。此指南基于W3C指定的“Web可访问性倡议”（WAI）标准推出，用以支持开发更多易于访问的网页内容。 下面是我们每次在使用纯内容标注法时采取的步骤： (1) 定义内容； (2) 将内容转换为HTML5结构； (3) 使用语义标记来设定内容层级结构； (4) 使用灰盒线框图来分配布局空间和比例； (5) 进一步为布局做样式设计。 换句话说，在构建网页时，所有的内容都必须在做任何标注、线框图或CSS3样式前产出并转换为HTML5结构。当把所有的内容都写入一个没有样式的页面中后，就可以进一步考虑怎样的设计能和内容相得益彰。 2.1.4　使用站点导航图来表现信息架构 完成了信息调研和信息管理，并且通过纯内容标注法奠定了项目的基础结构后，即可开始准备描绘信息并着力于内容架构和体验设计阶段，如图2-8所示。 图2-8　敏捷信息架构流程中的第三和第四阶段：描绘信息架构 在使用纯内容标注法定义了内容之后，第一件用来定义移动信息架构的东西就是站点导航图了。它非常直观地概括了内容是如何相互连接起来的，并提供了一条清晰的路径，展示了用户在信息化空间行进的过程。 移动站点导航图和一般网页上使用的站点导航图没有太多差异，但有一点重要的区别，将会在下文提到。 1. 留给错误的机会是有限的 信息架构师们总是在争论水平式和纵深式站点导航图哪一种更好。正如计算机科学领域的其他任何东西一样，这一答案也不是非黑即白。 说明 将内容插入到适当的位置，展示其组织结构，即所谓的内容架构 。最好的组织内容的工具莫过于线框图，而所有放置于线框图中的都应该是之前在站点导航图中展示过的内容的实现。 在桌面站点的导航图中，你可能会根据一个特定站点的需求来决定使用水平式或是纵深式的站点导航图，就如同图2-9所示。但对于一个移动站点导航图而言，你只能选择水平式的站点导航图，这是因为其用户体验完全不同于桌面站点，所有的东西都要求在连续的2~4次点击内获得。 图2-9　水平式（左图）与纵深式（右图）站点导航图的图解对比 假设使用iPhone来浏览一个有着图2-9所示结构的页面。图中所示的两种结构都在主导航中留有3个链接。如果浏览的是水平式结构并且选择了第一个链接，你完全不会错过正确的信息路径。但如果浏览的是纵深式结构且选择了第三个链接，则只有33%的概率选对正确的路径，而这一概率还会在选择第一个链接时跌至25%。 现在再来想象下在一个典型的网站上你可能会碰到多少链接。用户点错链接的风险有多大？如果用户坐在他们的台式电脑前一路点错了链接，只需稍稍瞥一眼，即可知道该如何返回到主导航页面。但是在iPhone上，这却不是省心的办法。 在这一阶段，我们通过非常初级的测试构筑了用户体验的基础。测试的主要是用户可能与网站或Web应用进行的各种交互。 说明 我们将用户体验中的交互定义为用户每次使用界面来完成某个目标或获取某些资源时发生在用户与用户界面间的操作。 在构建表示站点导航图结构的内容架构时，实际上也开始（即便是间接地）为用户体验作出了贡献。 2. 提示导航路径方向 在移动用户体验中为用户提示导向是个关键要素，因此请铭记务必在所有的页面上都展示出页面标题和导航路径。如果使用了两级结构并带有选项卡的导航菜单，那么也可以忽略导航路径，因为此时页面标题和导航路径提供的是同样的信息。使用基于选项卡的界面需要高亮标注当前页的选项卡，就像YouTube的视频页面那样。 说明 在页面中展示导航路径意味着要展示出从A点到B点的特定的站点路径图。如果你喜欢的话，完全可以把导航路径看作一个单独的站点导航图实例。 一个移动用户用于浏览页面的认知资源是有限的，因此很容易“迷失”。如果用户界面并不是基于选项卡的，那么可以使用面包屑导航实现同样的目的，以避免用户产生挫败感。 如果已经有了水平式的站点导航图，则可以在界面中插入一些选项卡或者下拉式菜单。这种类型的菜单在iPhone和iPad上也能处理得很好，即便它包含了很长的选项列表。在图2-10中，列出了两个使用选项卡式导航和下拉菜单的优秀案例：Google和《纽约时报》。 图2-10　使用选项卡式导航和下拉菜单的优秀案例：Google和《纽约时报》 2.1.5　使用线框图草拟信息架构 站点导航图展示了内容是如何在信息空间组织的。现在是在用户体验上下功夫的时候了，要用到的是第二件信息架构工具：线框图。这是敏捷信息架构流程的第四个阶段，如图2-11所示。 图2-11　敏捷信息架构流程的第四个阶段：草拟信息架构 借助线框图，可以把信息布局到页面上，使信息空间变得看得见摸得着。线框图为站点导航图提供了直观的模型，同时也定义了用户将如何在这种体验中进行交互。 第一步工作是通过一些手绘大致勾勒出线框图结构，就像在图2-12中看到的一样。在需要创作什么东西的时候，手绘设计会更好一些，因为创造性的工作总是紧密地和手工活动联系在一起。 当你的想法变得更加翔实后，就可以使用印刷版的图纸，以更具体的方式来重新设计其结构。 线框图是最有价值的信息交付物，因为它们清楚地传达了布局的理念，而且你可以在项目流的下一阶段（即原型阶段）重复利用这些成果的一部分。 线框图唯一的缺点是无法表达复杂的结构，而这正是原型图的用武之地。 图2-12　绘制iPhone或iPod线框图的手工工具（图片由Cultured Code提供） 2.1.6　通过原型将交互可视化 制作原型可能听起来既多余又浪费时间，因此很多开发者干脆跳过这一步直接开始编码。但正如之前提到过的，原型应该在使用线框图草拟架构后发挥作用，你需要在此之上梳理 细节。 有了原型，就进入了第五至第八阶段（如图2-13所示），也即信息设计、可用性工程、交互设计和人机交互阶段。 制作原型还能降低设计阶段的很多主要风险，最终达到节省时间与金钱的目的。 无论是纸面图还是电子版，原型同样也是设计、迭代与组内讨论相关概念的最迅速的一种方式。只有在一个原型出炉之后，才有一个切切实实（即便只是一个大概的草样）的基础可供讨论，它将很多抽象的概念变得有形。 在开发团队中典型的原型迭代路径应该如下： (1) 粗略描绘想法 (2) 向整个团队阐述 (3) 团队内提出建议与批评 (4) 开始实现 (5) 返回到步骤1，继续迭代流程 如果设计的是一个网站，则可以使用线框图结构来生成页面模板。 继续深入设计与开发中的敏捷策略，便能发现制作原型的两种方式：纸面原型图与电子版 原型。 图2-13　敏捷信息架构流程的第五至第八阶段：可视化信息架构 1. 纸面原型图 最基础的就是纸面原型图了（如图2-14所示）。我们可以使用模板工具在纸面原型图上印制出线框图，用以精确设计用户界面，甚至可以直接在此之上使用纸笔手绘结构。 图2-14　纸面原型工具与iPhone真机对比 纸面原型图在测试阶段依然有用。借助它，你可以在可用性测试阶段复用你的成果。在第11章可以看到对这一技术更详细的介绍。 2. 电子版原型 更高级的自然是电子版原型。通过它可以分析原型化结构的具体表现行为。在电子版原型上，可以模拟人机交互，并在开始编码前得到一些有效的反馈。 一个好的解决方案是使用基于HTML5、CSS和JavaScript的轻量型结构，填充以临时性的内容和数据。在设备上运行这样的原型化的结构，最可能得到接近于最终产品的体验，因为你可以直接在屏幕上看到有多少内容被显示出来。在电子版原型中使用远程文件和服务器，还可以开始处理加载时间和网络延时。电子版原型对于在可用性工程阶段深入发掘可用性也有着重要意义，而这一阶段需要以更完善的原型作为基础。 电子版原型作为人机交互阶段的支撑也相当有用，再借助交互顺序图表，才能投入人机交互和交互设计的工作。 图2-15　完整的敏捷信息架构流程 第3章介绍了一个用于为iPhone和iPad构建网站和Web应用的框架。一旦理解了这一框架结构，就能定义一个模板用以快速实现电子版原型。