(转)ios应用导航模型

Eko - MoboCentre

本文将介绍iPhone的导航风格，同时，也一并了解能够组织好应用内容和工具的导航方式。对于一个应用来说，最基础的操作就是基于页面间简单的移动，每张页面都完成一个任务或展示特定内容，因此，如何串联起这些页面是设计师的基本决策之一。

1. 乔帮主会怎么做

乔布斯用其可挑剔的品味、质量和易用性缔造了整个苹果品牌。所以，苹果自己的应用设计嚼头十足，值得我们深究和模仿。

苹果公司在设计方面一直走着自己独特的见解，它们为iPhone应用设计定义了详细的规则，并制定成了文档。这就是《iPhone Human Interface Guidelines》，即我们常说的HIG。HIG详述了iPhone玩具箱里的标准控件和标准视图，并解释了如何按照用户的期望来使用。

iphone的代码库只预订了三种可在应用中直接被使用的导航模型，覆盖了大片应用的需求，也是iphone用户最熟知的导航方式。苹果设计师对iPhone界面设计理解深刻，我们有理由依照这些原则来进行设计。

认真看指南便会发现，除了理论实践兼备的各种建议外，苹果的界面指南也是App Store的审核标准。为避免麻烦，还是多用标准控件，恪守指南的条例比较好。

2. 苹果的导航模型

iPhone的代码库只定义了三种可以直接使用的导航模型，它们是： 平铺页面、标签栏、树形结构。三种导航模型的基本样式如下图所示：

平铺页面：适用于只有一个主屏的简单应用。这类应用的主屏可能有不同的变体，然后，你就像拨动卡片一样，滑动切换这些页面。
       标签栏：标签栏就是在屏幕底部的一组用来在应用主功能之间切换的按钮，每点一个按钮，就会切换到另外一个页面。
       树形结构：在有层级的分类选项或分类内容中向下细分，然后也能很容易地回到上方。

接下来，会分别介绍这几种导航方式的使用方法和适用情形。

3. 平铺页面: 就像一叠卡片

由于平铺页面应用没有信息层级，没有组织结构，所以把这种组织方式称为平铺列表。

平铺页面的导航方式很适合于在实用工具应用中使用。实用工具应用的页面里只有少量简单清晰的内容，因此可以像卡片一样的展示：卡片的“正面”展示主要信息，而“背面”就是简单的设置。

如果你的应用非常简单，只有一张卡片，那就再容易不过了，如下图所示，正面显示内容，点击“i”进入背面的设置页面：

 

这种方式适合于让用户浏览并发现：慢慢浏览查看同样类型、不同内容的页面。而且还可以通过设置，随意改变、添加、移除卡片。对于页面结构类似但页面数量会变化的情况，平铺页面导航模型非常合适。为了让用户在浏览时，保持方向感，在底部添加了标准页面分页控件，也就是那排小点。高亮的小点代表了你当前所在的位置。

比如内置的“天气”应用，就是用这种方式展示。在不同的页面展示不同城市的天气状况。点击右下角的“i”，则可以设置需要展示的城市。

 

平铺页面模型对于拇指操作的不便也很明显，你没法直接从第一屏跳转到最后一屏，必须要挨个翻过每张页面。如果页面太多，则会非常不便。因此，最好不要超过10个。

平面页面模型无法直接跳转到特定页面的弊端，使其并不适用于功能或内容结构相差悬殊的应用。举个例子，“Phases”是一个用来跟踪月相的小应用。应用一共有四张页面，它们分别从不同的角度来查阅月球运动。这个应用使用了平铺页面导航。但由于它的页面数量固定，并且每张页面内容迥异，所以用标签栏会方便一些。使用标签栏，就不用翻阅了所有页面，才能找到所需要的页面，而可以直接跳转到感兴趣的页面。
       在使用平铺页面时，滚屏是很不可取的。如下图所示，“ESPN ScoreCenter”的每个页面，所显示的内容都会被底部的小点所截断，不太清爽。在平铺页面模型中，只有当每个页面像一张完整的卡片时，“卡片堆”的隐喻才会很有效。但是，如果用了滚屏，对于用户则是一个挑战: 由于横竖两个方向均可滑动，有时上下滚动时，滑动方向不小心带点斜度，就把下一张页面给滑进来了。

优缺点对比：

4. 标签栏: 菜单上有啥？
        标签栏是附着在屏幕底部的Dock。如下图所示，点击标签栏的一个标签就会跳转到相应的功能页面，然后标签也会变亮。

每个标签对应的页面都可以有自己独特的界面风格，还有自己特定的内容和功能。比如内置的“时钟”应用，提供了四种与时间相关的功能，每种功能对应着不同的标签: 世界时钟、闹钟、秒表、计时器。每张标签都像在运行着一个独立的应用。

标签栏不仅可以像“时钟”应用一样分类工具的功能，标签栏也可以为应用的信息提供不同的展现方式。比如用来搜索旅馆、餐厅的“tripAdvisor”，用标签栏的方式提供了三种查找餐厅及住宿的办法：搜索、附近的、我的收藏。每个标签的方式不一样，但是目的都是一样的，解决用户在旅行中的住宿和吃饭问题。

  

标签栏显示在屏幕的底部，高度有49 个像素，每个按钮都包含一个文本标签和图标。按钮的宽度取决于你放置的按钮数量，但请别塞太多，因为标签栏限定了最多5个按钮。如果放6个以上的话，会在前4个位置显示你最先设置的4个标签，最后一个位置则会冒出一个“更多”标签。点击“更多”，则可以看到其他标签。所有标签的位置可以通过右上角的“编辑”按钮来完成。

下图所显示的应用是“AccuWeather”。点击“更多”之后，就会看到另外4个标签，即4个功能（如左图）。而点击“编辑”的话，则会显示所有的标签（如右图），用户可以在这个页面编辑标签的位置，将自己最常用的4项功能放到前面。

 

通过上面的描述，可以发现，如果超过5个按钮，不但让用户很容易忽视掉被藏起来的功能，不符合标签栏清晰易扫描的初衷，同时，还霸占了宝贵标签位中的一个，是不太理想的。这时候，更适合用树形结构。

同时，标签栏也是一种约束，它高49像素，吃掉的空间相当大，超过屏幕的10％。当然，在某些页面，你也可以在需要全屏时，适当的去掉页面上的标签栏。比如，电子书或者听音乐的界面。但是，稳定持久是标签栏的优点，所以尽量保留。

优缺点对比：

5. 树形结构：千张页面触手可及

庞大的信息往往会被分类到类别，以及子类别、子子类别中去，这就是所谓的树形结构。几个世纪以来，文职人员一直在使用这种方法：找到档案柜，选择抽屉，打开装满文件夹的抽屉，选取文件夹，再从文件夹中取出文件。iPhone的树形结构导航模型直接借鉴了这种整理方式。由于iPhone没有足够的空间将整个树形结构显示出来，每次只能看到一个“分栏”，当点击栏内的项目时，下一级分栏就会从页面右侧滑入。

以内置的“Mail”应用为例，如下图所示，从左到右，用户通过逐层的点击，可以看到越来越底层的“分栏”，最终查看到单封邮件的内容。

  

树形结构对管理一大摞的分类项目非常合适，比如管理邮件、待办事宜、音乐、照片等。假如你有5个以上功能分类，就可以使用树形结构。

在考虑用何种形式来组织树形结构时，可以很自然的想到，基本的文本列表会是最自然的可视化方式。用行话来说，就是表格视图。比如上面所示的Mail应用，就用了这种简单的列表方式。

与此同时，还有另外一种更加图形化的方式可以展示树形结构。比如，提供航班信息的应用“Lufthansa"，就用了一组图标来展示多种功能。不仅更加图形化，而且还突出了Lufthansa是一个集航班查询、航班预订、手续办理、里程信息查询等为一体的集合。在这个主功能列表后是内容列表，可以通过不断的点击深入到这个结构层次中去。

当你在内置的“照片”应用中浏览相册的照片，该应用也使用了类似的图形化展示方式。在进入单个相册之后，它展示了漂亮而密集的一屏缩略图，点击即可全屏查看相应大图。这比起显示一系列的照片标题要来得有用得多。

  

无论用列表也好，图标也好，或者图片也好，这些树形结构导航都有类似的优点和缺点。优点是：占用很少量的界面空间，而且内容本身就是操作，使得应用的交互变得直接而直观。缺点是，主功能只有在最顶层页面才能被显示，主要功能和分类之间的切换比较麻烦。

优缺点对比：

6. 组合使用导航模型

以上这三大导航模型是不互斥的，你可以在一个应用中混用不同的导航模型。特别是应用内容或者功能繁多时，混搭导航可以帮助我们克服单个导航模型的短处。

一种最常用的设计模式是：使用标签来组织应用的主要功能，然后在某几个标签下又添加树形结构导航。
       树形结构的一大缺点是，不能容易的从一个主要功能切换到另一个主要功能。而混搭导航弥补了这一缺点。将应用的主要功能放入标签栏后，用户就不用回到最开始的页面去切换功能，只需要点击标签栏即可。

比如下图所示，”AccuWeather“应用使用标签栏导航来组织它的主要功能，而后，在其中的2个标签栏：”Forcast"和"Video”中都使用了基于列表的树形导航来充当子导航。

 

请注意一点，在用户切换标签时，你的应用应该记住每个标签下的情形，当用户从别的标签切换回来时，应该保持同样的位置，同样的搜索结果或同样的详情页。这称为“状态恢复”。

第二种设计模式是：将平铺导航页面类似的嵌入二级页面中。比如Safari，如下图所示，点击工具栏中右下角的“窗口按钮”，即会用平铺导航的方式展示所有网页。

 

将卡片平铺的方式很适合于很少甚至没有按钮或操作的布局，所以大可以在应用的一部分内容上使用平铺页面，而且将这部分内容装入专门的平铺页面视图中。最好可以临时的全屏，或者至少可以抛弃当前操作控件。以Safari为例，如上面右图所示，在平铺展现所有网页时，虽然保留了工具栏，但是上面的按钮变成了简单的“新网页”和“完成”。

 

7. 模态视图和导航的死胡同

在使用应用时，常常会遇到如下情况：一张页面从底部划出，临时取代整个应用的显示屏。我们称这种处理方式为“模态视图”。模态视图是导航模型的死胡同——滑出一个单屏，编辑、查看、操作页面上的内容。这些独立的页面不属于你所知道的导航模型中，它被用户点出，完成任务后便消失。

比如内置的“Mail”应用中，撰写新邮件或者移动邮件到新邮箱中时，就使用了模态视图。点击邮件页面工具栏上的“移动“按钮（左图底部第二个按钮）时，邮箱页面（右图）会从底部滑上来，盖住先前的页面。在点击了目标邮箱或点击”取消“之后，滑出的页面会缩回去。

 

一个更加极端的例子是“Safari”，它没有标签栏，也没有分类列表。应用的整张页面基本就是网页内容，在浏览器中用来改变和分享内容的工具，都通过模态试图的方式弹出：蹦出的iPhone虚拟键盘让你能输入网址（下面右图）；滑出的"分享"页面可以让你分享和邮寄网页（下面左图）；弹出的”书签“页面可以让你找到之前保存过的页面。

 

上一章中，我们提到过“隐藏之门”，模态视图实际上就是一个例子。模态视图将次要的控件和功能藏起来，只有在任务被触发时才出现。由于模态视图属于支路，那么一定要在页面上添加一个“完成”或者“取消”按钮。

8. 不要让应用成为乱麻般的网络

在设计应用的导航逻辑时，千万不要让它成为一个乱麻般的网络。当用户需要使用某个功能时，应当可以轻松的找到该功能在应用的路径。而且，最理想的情况下，这条路径是唯一的。创建应用时，请尽量遵循“同一个房间，同一扇门”的原则：每张页面只有一个途径可以进入。

你一定希望自己的应用可以让用户可以逛开，但是首先要保证，用户在你的应用里不会迷路。每屏只有一条路径可以达到，这样才容易让大家可以记住。

 

9. 在纸上画出你应用的故事板

在搭建应用前，要先画好你应用页面的流程图。就像导演在开拍电影前，会先准备好每个场景每组镜头的故事板。不要在每张页面上做太多的事情，相反，应该深思熟虑，尽量让每张页面都简洁明了。

那么，在设计的这个阶段，应该如何绘制应用的页面流程呢？下图展示的是应用“Things”的团队为每张页面和页面流画的纸面原型草图。

在作图时，有几件事情需要注意：

（1）最好先从纸面草稿开始，不要忙着用PS或Illustrator来勾画像素。在纸上勾画，可以激发创意，还能免去你陷入细节的烦恼。

（2）在最开始的阶段，只需要画应用的主要页面，说清楚用户将如何在应用中一步步的完成主要任务，不用去抠太多的细节。你的草稿只要说清大概即可：需要哪些页面，每张页面上有什么操作，还有页面上的工具和内容的大致比例。

（3）如果是团队合作，这个阶段尽量让所有决策者都参与讨论，在白板上共同画出草稿来。现在做修改很容易，越到后面，设计和开发已经正式开始后，修改就难了。

（4）虽然只是理清概念，但是保持在真实比例大小的纸上画草稿，会很受用。如果画得多，可以考虑买本正规点的iPhone绘本。APP Sketchbook(www.sketchbook.com)和Notepod(www.notepod.net)上面都有卖和iPhone一样大小的笔记本。还可以在“First & 20”这个网站上下载模板：http://www.firstand20.com/articles/iphone-graph-paper

 

10. 丑点没关系

在完成草稿设计之后，不要急着把它变成美丽的iPhone应用，而是要尽快测试你的草稿放到真实设备上的感觉。先把丑陋的原型放到iPhone上跑起来，看看你的设计是不是行得通。

你可以把草稿拍下来，用作图软件缩放到iPhone的320*480像素，然后把这些图片放到iPhone里去。于是，你就可以在iPhone的“照片“应用里，全屏翻看你的草稿了。这个步骤主要是让你感觉一下设计的比例和大小。

如果你觉得这样不够过瘾，还可以做个粗糙的原型应用出来，文本位用虚假的内容来代替即可。这样原型的页面就可以反动了。开发人员Rob Rhyne开发了一个很不错的iPhone的代码框架，叫做"Briefs"，这个框架做的就是我们刚才所说的这种方式，请访问www.givebrief.com

在完成这一步之后，便可以开始着手做更细致的模型了。下一章就将详细介绍如何使用iPhone的标准控件。