最近一直在整理移动设计模式，终于把导航部分整理好了。先跟大家分享这一部分吧，有遗漏的或是有争议的欢迎大家建言~

导航就像一部小说的章节标题。正常阅读小说时，你不用刻意找它，它也不会故意蹦跶到你面前；要定位时，它能让你知道自己的位置，怎样跳页。正如《ios7人机界面准则》提到的，除非和用户期望相悖，否则人们不会注意到app的导航体验，你需要做的就是让app的导航与应用的结构和意图相契合，而不让用户注意到导航本身。

我们可以把现有的导航归为三类，分别对应于三种不同的应用结构：

层级式导航

扁平式导航

内容/体验主导式导航

在层级app中，每一个页面进行一次选择导航直达目标页面，用户要到达另一个位置时，需原路返回几步（或者回到开始重新出发）并作出不同的选择。

1.1 列表菜单与扩展列表

列表导航通常用于二级页，不会默认展示任何实质内容，所以通常app不会在首页使用它。这种导航结构清晰，易于理解，冷静高效，能够帮助用户快速的定位去到对应的页面。

列表项目可以通过间距、标题等进行分组，形成扩展列表。

列表菜单导航可以将重要的UI部分以列表的形式进行呈现，让用户可以滚动查看自己要执行的操作或内容。这一模式还可让UI的标题和脚标能够实现更多“通用”导航，例如操作栏等。

列表菜单很适合用来显示较长或拥有次级内容的标题。常用作列表，如病人列表，用户列表，功能列表等。

扩展列表——“跟随式”固定导航

滚动页面时保持顶部、侧边或底部导航栏不变。在某些情况下，页面部分子节的标题也可在滚动时保持固定，或附着到已有的固定导航栏上。这种模式可以迅速定位目标。

1.2 抽屉式导航

抽屉式导航的核心思路是“隐藏”。隐藏非核心的操作与功能，让用户更专注于核心的功能操作上去。如果应用主要的功能和内容都在一个页面里面。只是一些用户设置和选项需要显示在其他页面里。处于让主页面看上去干净美观的目的可以把这些辅助功能放在侧边栏里。

而如果你的应用有不同的视图，且他们是平级的，需要用户同等地对待，侧边栏将会浪费掉大多数的用户对于侧边栏中入口的潜在参与度和交互程度。当各内容项不需常切换时，可以采用抽屉式导航。

2、扁平式导航

在一个扁平式信息结构的app中，所有的主要类别都可以从主页面进入，用户可以直接从一个类别调到另一个类别。

2.1 跳板式（又称快速启动板或宫格导航）

1、利用网格布局将主要入口全部聚合在页面，让用户做出选择，各项之前同等重要。

2、利用不规则的布局方式可以凸显某些项的重要性。

3、视情况使用个性化和用户自定义选项。

缺点：无法第一时间看到内容，选择压力大

当有多个内容项（＞5个）时，可以考虑用这种导航方式。

往往用在二级页作为内容列表的一种图形化形式呈现，或是作为一系列工具入口的聚合。

2.2 选项卡(标签导航) 

常见于屏幕底端或屏幕顶端两种，选用选项卡式导航则各选项之间为并列关系，其中常选状态为最重要，操作最频繁一项。为已选择的菜单项设置不同的视觉效果，用户就能清晰地知道自己选择了哪一项。使用易于识别或带有标签的图标。

缺点是会占用一定高度的空间。

如果应用需要用户频繁的在不同分页切换，可以采用这种导航。通常包含5个标签是比较合适的数量。当标签过多时，可以将不常用标签放到通用标签下，或采用底部滑动选择的方式。

2.3 舵式导航

目前流行一种标签导航的变体，有人称之为“舵式导航”，因为它的样式很像轮船上用来指挥的船舵，两侧是其他操作按钮。

当页面有处于同一层级的几大部分内容，同时又需要一个非常重要且频繁操作的入口，就可以采用这种APP导航模式。中间项标签不紧操作最频繁，最重要，且需要引人注意，方便寻找。

2.4 tab导航

用于二级页，本质和标签导航相同，当应用层级较多的情况下，可以采用tab导航，典型场景是用于改变的当前的视图，或对当前页面内容进行分类查看。

一般，下方tab页的操作比上方频繁。因此可将次级重要的标签放到上方。 

2.5 超级菜单式

移动设备上的超级菜单式导航与网站所用的超级菜单导航类似，它在一个较大的覆盖面板上分组显示已定义好格式的菜单选项。

这种模式比较少见。与抽屉式导航有异曲同工之妙，当内容项很多且各内容项之间切换不频繁时可采用。

3、内容/体验主导式导航

直观的用内容或者体验来进行导航。

3.1 图片轮盘式

当你的应用信息足够扁平，可以尝试轮播导航，如果应用得当，能够给人耳目一新的体验。这种导航能够最大程度的保证应用的页面简洁性，实现极为流畅、直观的用户体验和流程实现概览和细节界面的无缝过渡。

缺点是第一眼无法掌控所有内容。

页面轮盘式导航能很好地应用于少量页面的导航。可用来做为展示某些情况，例如产品系列。

3.2 陈列馆式

陈列馆式导航能很好地应用于用户经常浏览、频繁更新的内容。

陈列馆式的设计通过在平面上显示各个内容项来实现导航，主要用来显示一些文章、菜谱、照片、产品等，可以布局成轮盘、网格、瀑布流或用幻灯片演示。便于显示扁平化信息，直观，简洁，便于浏览。

3.3 仪表式

仪表式导航提供了一种度量关键绩效指标（KPI）是否达到要求的方法。经过设计以后，每一项量度都可以显示出额外的信息。

这种主要的导航模式对于数据分析，统计非常有用。提取关键项，但不过多使用。

3.4 隐喻式

这种导航的特点是用页面模仿应用的隐喻对象。主要用于游戏，但在帮助人们组织事物（如日记、书籍、红酒等），并对其进行分类的应用中也能看到，其实就是将应用与人们熟识的具象事物联系起来，给软件创造一种真实感。利用相似物，直观给用户操作方式指导。

我的 lofter http://www.lofter.com/blog/medesigner

参考资料：

1.  部分图片和资料来自网络

2. 《移动应用UI设计模式》·Theresa Neil 

3. 《ios7人机界面准则》