【解构ui】导航设计（2） 常用导航模型
常见的导航模式大致有四五种，使用常见的导航方式能够帮助用户迅速理解你的应用，今天我们就来看看iOS和Material Design两大平台上最常见的几种移动端导航模式。
iOS
在iOS中， 有基本三种可在应用中常用的导航模型。
- 平铺页面(Flat pages)
- 标签栏(Tab bar)
- 树形解构(Three Structure model)
平铺页面(Flat pages)
平铺页面的导航方式主要用于只有一个主屏的简单应用，常用于工具应用中。 比如天气，此类应用通常只有一点简单清晰的内容， 可以像卡片一样展示出来，通常没有滚屏。 这类应用的主屏可能会有不同的变体（比如天气预报应用需要展示不用城市的天气），然后你就像拨动卡片一样，左右切换这些页面。
这种方式适用于浏览并发现的方式，慢慢浏览查看同样类型不同内容的页面。 为了在浏览此类平铺结构的应用时保持方向感，平铺页面应用的地步，添加了标准页面分页控件（Page Control)，也就是一小排点。小点的数量代表了页面的数量。 高亮的小点代表了你目前所处的页面位置。 点击控件的左半部分或者右半部分，都可以滑到上一页面或下一页面，这也是活动切换的替代方案。 但是需要注意的是，点击页面分页控件只能让你每次翻过一页，而不是精准定位某个小点对应的位置，这是又控件可触摸范围控制的。
由此看来，平铺页面的缺点就显示出来了，你无法从第一屏直接跳到最后一屏，必须逐个点击。当有许多页面的时候，就会很麻烦。比如我们在天气应用中就会发现，最多只能添加20个城市，当页面控件超过20个点之后，小点就会溢出。在ios7的天气页面中，添加了汉堡包菜单加以帮助导航，点击右下角的三条横线，便能看到所有添加的城市，然后进行选择。
在ios6中天气页面并不支持滚屏，因为被遮住的页面通常都是容易被用户忽略的，但是在ios7之后，iPhone的天气页面就支持了滚屏，这一点也无可厚非，因为只要将最主要的信息展示在首屏，将次要的信息给到想要查看更多信息的用户也是一种不错的选择，而且下拉这个手势已经成为非常自然而然的一个动作了，即便我不想怎么看下面的信息，也就闲着就往下拉拉。
纵深排列
平铺界面的另一种表现方式可以在Safari中看到。 当点击Safari标签栏右下角的图表时，就会通过空间的纵深排列方式看到所有的过往浏览网页。 通过手指上下滑动可以迅速定位。
这时候我们注意到，当一系列网页展示的时候，Safari采用的是一种临时全屏，因为这样你才能放下需要的操纵控件，而不会打扰用页面内容。 它的工具栏依然保留着，但是上面的按钮变成了添加新网页和完成。
一张页面临时取代整个应用的显示屏被称为模态视图。这种处理方式会暂时绕开应用的正常操作。 模态试图的作用就是暂时绕开当前操作。
左右滑动
最典型的就是Tinder,通过左右滑动确定喜欢或者跳过，再展示下一个用户。
表现形式：
- 分页控件(Page Control): 天气应用
- 纵深排列：Safari
- 手势导航，左右滑动:Tinder
优点：
- 适合少而精的内容。适用于随意浏览的界面。
- 适用于内容自定义，且数量可变的页面
- 易于使用，只需熟悉的滑动手势即可导航
- 界面占用空间少，页面分页控件只占用一点控件，可以给内容留下许多展示控件
缺点
- 每次只能翻过一页，没有办法直接去到想去的界面。
- 并不能适应较多页面的应用，页面指示器只能容纳下20个小点。
- 页面指示器太小，可能被用户忽略，而让用户错过其他页面。
标签栏 （Tab Bar/Bottom Navigation)
在iOS上底部导航栏被称之为标签栏(tab bar)，在安卓Material Design上被直接称为底部导航栏（Bottom Navigation），这里都指的是被附着在屏幕底部，用户由此来选择菜单的导航。在这里我们先大致了解一下标签栏，由于标签栏是一种非常常见的导航方式，之后我们会再来专门的讨论一下。
标签栏上通常至多有5个主要功能依次排开，并且每个功能都带有图标。 点击一个标签栏，就会直接跳转到相应的页面上，然后被点击的标签栏也会变亮，告知你所在的位置。
每个标签栏对应的界面都可以有自己独特的风格，有自己特定的内容和功能。标签栏是切换选择操作模态的理想方案，像一系列小广告，告诉用户应用的主要功能范围。
通常标签栏至多有五个，至少有3个， 当只有两个功能需要放在底部标签栏的时候，Material Design建议可以使用选项卡（在MD中被称为选项卡-Tabs,ios中被称为分段控件-Segmented Controls）取代。 当有超过5个功能需要放置在标签栏的时候，可以考虑前四个放置最重要的功能，最后一个可以设置为“更多(More)”,点击后用户可以在另外的页面中看到更多的功能。
当然我们需要避免“更多”按钮的出现。因为当用户点击“更多”按钮再去寻找新的功能的时候，用户就需要多点击一次，并且通常记不住“更多”背后是哪些功能。 限制5个主导航元素也能让你的受众记住并理解你的应用结构。
标签栏最大的优势就是让你的应用的主要功能能够展示在最明显的地方。这样易于扫视，也更加清晰，方便用户去到任何页面。
优点：
- 点击一次即可访问到应用所有的主要页面。
- 标注清晰的菜单，告知用户主要功能和当前所在位置。
缺点
- 至多只能显示5个标签
- 应用的每个页面（大部分页面）都会被明显占据一定的屏幕空间
树形结构(Three Structure Model)
对于分层信息架构来说，树形结构导航方式是一种很好的解决方式。
之前我们提到标签栏至多只能放置5个功能，因此，当有超过5个主要功能的时候，我们就可以选择使用树形解构，树形结构对管理一大摞分类项目来说非常合适。
换句话说，树形解构其实就是列表，点击列表中的一项就可以看到新的列表，然后再点击其中一项又是一个新列表，知道到达醉倒你要找的项目详情页面。
除了有列表也就是表格视图的表达方式，还有一种更加图形化的表达方式，比如支付宝，我们就可以看到，主页上采取了九宫格的方式，将主要的共能一一展示。 这种排列方式就类似于iPhone的主页。
无论用列表，图标还是图片，这些属性结构导航都有相似的有点，他们占用较少的界面控件，且内容本身就是操作。
表现形式:
- 列表排序
- 全屏菜单形式
- 卡片形式
全屏菜单：
同许多应用想要减少导航的占用面积相反，全屏菜单把许多多余的数据去掉， 将文字和多媒体直接放到导航上，让导航看上去一目了然，方便使用。
但很显然，用了全屏菜单后你就无法展示其他的内容了。而且要点击后才能看到更多的内容。
卡片：
卡片形避免了过多的页面出现， 只要将许多独立页面的内容浓缩到一个页面上就可以了。
对于短小的内容来说卡片是很好的介质。 每一张卡片都代表了一个界面。而且卡片有着优越的跨平台性，最典型的就是Pinterest。
但有时候导航有层次是很好的，但是优秀的导航应该是够帮助用户很好的浏览，而不是毫无目的的瞎逛。 当然如果你的应用想要鼓励人们去发现探索的话用卡片就是很好的选择。
优点
- 能应变大量的类别，功能，和项目
- 组织方式常见，容易理解
- 可直接对内容进行交互，直观，切占用较少的屏幕空间
- 列表展示很适用于用户自定义分类
缺点
- 主功能只有在最丁层面才会显示，不像标签栏，每个页面都可以看见
- 主要功能和分类直接切换较为麻烦。比如先回到顶层，然后再一次点入。
关于当层次太深入，用户要返回主页太辛苦的解决方式，我之前有提过，像是爱范儿就采用了在iOS的导航栏上的右边加上主页的图标，以帮助用户一键返回主页面。
组合使用导航模型
我们会发现，其实通常来说一个应用中会使用不止一种导航方式，你可以在应用中混合使用不同的导航模型。使用一个模型来组织主要的功能，用另外一个模型来组织次要页面，作为子导航。 组合使用这些导航模型能帮助我们克服单个导航模型的缺点。
标签栏+树形结构
之前我们提到树形结构有一大缺点就是不容易从一个主要功能直接切换到另一个主要功能，因此搭配标签栏之后就可以较容易填补这个缺陷，但要注意的是，当用户切换标签的时候，应用应该记住每个标签下的情形。这被称之为状态恢复。 比如在电话应用中，当我们在浏览通讯录的时候，假设已经下拉到L姓的名单了，这时我们如果切换到最近通话之后再切换回来的时候，界面应该依然停留在L姓的名单上，而不是回到顶部A。
Material Design
接下来我们来看看Material Design中提到的几种导航方式
嵌入式导航(Embedded Navigation)
信息结构简单，可以在应用内容里嵌入导航，但是这样做的话，会减少内容的展示空间。
推荐用于：
- 有着主要界面，以及少数的可选界面
- 在主界面可以完成常用任务
- 低频应用
选项卡（Tabs）
选项卡允许用户可以快速的在几个相同重要的界面直接迅速切换
适用于如下的结构：
- 父级里包含几个子界面
- 一组平行界面
推荐用于：
- 需要频繁的在在几个界面上来回切换
- 只有少量顶层视图的应用
- 希望辅助页面能被用户感知到
底部导航栏(Bottom Navigation)
底部导航栏允许用户在几个顶级视图之间来回切换
适用于如下的结构：
- 父级包含几个子界面
- 一组父级界面
推荐用于：
- 在几个常用的界面之间频繁的切换
- 只有少数顶级视图的界面
- 希望辅助页面能被用户感知
- 手机端，置于符合人体工程学的位置
抽屉导航（Navigation drawer）
当需要的标签太多空间上放不下的时候， 边栏是一个很好的选择， 侧边栏可以一次性展示多个标签， 抽屉导航只有在用户点击的时候才能看到
只有一个主页的应用， 应该将最常用的视图放置于侧边栏的最上端。
侧边栏可以以抽屉的形式出现，也可以固定
适用如下结构：
- 平行导航
- 有着子视图的父级视图
推荐用于：
- 有着多项顶级视图层级
- 在不相关联的视图上也可以快速导航
- 层级较深的导航
- 减少不常见视图的可见性
抽屉导航栏又称作为汉堡包菜单，相对来说争议较大， 关于汉堡包菜单更多的讨论可参考我写过一篇文章，汉堡包菜单的迷思
抽屉栏的三种形式
- Full-height navigation drawer (全高度）
- Navigation drawer clipped under the app bar （在app bar下方）
- Floating navigation drawer (悬浮式）
悬浮式导航：
手势导航
手势导航允许用户在不同的平行界面中来回切换， 支持的手势包括：点触或水平/垂直拖拽屏幕，以及缩放。
适用于如下的结构：
- 自然且有序的关系，例如日历的每个页面代表一天
- 少量平级的视图
参考应用：Inbox，在Inbox中当你在查看一封email的时候，只需要下拉就可以回到父级视图。
组合使用导航模型
上下文结合式导航（In-context navigation）
上下文结合式的导航允许在几个相关的数据之间来回灵活切换（通常使用标签栏或抽屉导航）
上下文结合式的导航同应用的内容结合在一起， 通常是非线性的。
当通过上下文结合式的导航进入一个新的场景的时候，导航栏会显示对应的控件。
适用于如下层级：
- 有着子级的父级
推荐使用：
- 显示一组数量巨大的子集场景
- 将焦点放在特定的一系列的任务上
- 有着主要的视图，以及较少的次要视图
示范使用场景：
- 将一首歌链接到其作者
- 在相关项目和浏览历史之间切换
- 通过一个用户的发帖链接到其主页
侧边导航加上选项卡 （Side navi and tab Combination）
有着两个层级的导航可能需要将左边的抽屉导航栏对应选项卡
关于Material Design中的选项卡和底部导航栏
Material Design在刚推出的时候，规定说不要在Andriod应用上使用底部导航栏，在今年初的时候却又加入了底部导航栏这么一说，现在看来有点啪啪啪打脸。但是Anyway规定是人定的，是可以不断被完善的。
之前MD说到不要用底部导航栏的时候，而是提议说用选项卡代替，现在这么一更新就让人有点困惑了。就这一点我们可以在之前Google最新更新的Navigation Pattern里面找到相应的答案。
选项卡适用于在几个相同重要的子界面之间转换，而底部导航栏则适用于在几个相同重要的父级界面之间切换，放置的是应用中最重要的几个导航功能键。
小结
建议在为不同平台设计导航的时候都要详尽的去了解每个平台的规范，选择最适合自己应用的导航方式。如果选择创新的导航方式可能会承载一定的风险，毕竟对于不熟悉的或者隐藏的导航方式，还是需要去花时间教导用户，相对来说学习成本也会较大。
另外我杂七杂八的也看了不少关于导航的设计文章，在看到移动端导航的七种设计模式一文的时候，觉得作者很用心， 将国内应用中常见的导航方式都一一的列出，但有一个问题，她提到了一种导航方式叫做悬浮icon导航，并举了两个例子iPhone 上的Assistive Touch以及Material Design上的FAB， 私以为，这并不属于一种导航方式，尤其是FAB， 之前我在提到FAB的时候也是把它归在按钮这一控件里，原因如下：
- FAB键的缩写就是Floating Action Button,Action就是强调动作。他是一个操作键，而不是一个导航键。
- 再来，我们看一下FAB上面通常放置的是哪些东西，比如在Inbox上，FAB上的图标是一个加号，它触发的是一个动作，而不是一个带你去到某个地方的导航。
- 最后来看一下FAB键在Material Design上的定义：悬浮按钮是一款APP里最主要的按钮，一个屏幕里只能使用一个悬浮按钮，它代表着最常用的操作。
可能作者是将FAB同FND搞错了， FND指的是悬浮式导航抽屉Floating Navigation Drawer,之前在讲到抽屉菜单有提到这是抽屉菜单的一种表现形式。 因此iPhone上的Assistive Touch其实应该算是抽屉导航的一种变体，而FAB则完全属于是一个动作按钮，不具备导航能力。
当然有时候我们也会看到在ios中底部导航栏的几个标签其实并不都是属于导航性质的，比如Medium上中间的添加键，代表的是开始撰写文章。我们可以视作FAB键被放置在了iOS底部导航栏的中间。
再比如Path，Path中间的加号图标点击后就会展开一系列的动作按钮，这也相当于是FAB键的变体。
最后，我们可以参考一下Mobile Navigation Inspiration 试着创新导航的设计方式。
