移动产品设计模式之导航设计

导航设计在产品的结构层中隶属于信息架构的范围，是框架层的主要表现形式之一。好的导航设计，不仅能反映出交互设计师对信息架构的把握层次，同时也能让用户对产品有着清晰的认识。目前移动产品的设计日趋于完善，导航设计也有以下几个较为具体的分类，今天就着实例和大家分享一下。

标签导航

标签导航是目前最为流行，也最被用户所熟悉的导航模式。像我们日常使用的微信、知乎等等都是这样的设计。

标签导航的优点在于:

入口扁平化，能够在各种功能之间轻松跳转

存在的不足就是：

导航控件占了页面较大的面积，标签的个数控制在5个以内。

知乎的标签栏具有上滑消失，下拉出现的优秀交互细节，值得称道。

如果标签的数目大于5个，该怎么办？

滑动标签导航

滑动标签导航将其余标签藏在手机右侧的不可见部分，用户通过滑动来查看其它标签。

使用这种导航的时候需要注意

提示用户可以滑动，我们可以漏出一个标签的一半，提示用户可以滑动。

还有一种标签导航的变体是iOS的基本控件——分段式导航

分段式导航多用于二级导航，一般有2-3模块，尺寸较小，能够轻松地融入界面，不占空间。

这里说的标签导航都是适用于一些功能重要程度相近，使用频率相近。即1：1：1：1：1模式

舵式导航

如果在几个功能相近的模块中，某个功能的重要程度要稍高一些，我们就需要在设计上突出这一功能。即1：1：1.5：1：1模式。我们称这种导航为舵式导航

抽屉式导航

简约至上-交互设计四策略 中讲到一个使设计更简约的方法就是“藏”

藏起来不太重要的功能，专注于核心的功能，能够大大减少主界面导航控件数量。

Uber

作为一款打车软件，考虑用户的使用场景，用户最主要需求就是叫车。抽屉式的导航可以把最大化的界面交给打车，用户有着足够大的空间去完成打车的交互，而不用担心其他元素的干扰。我称这种模式为1：10：1：1：1。

九宫格导航

我们有的时候会见到一些产品会将所有功能罗列出来，一个一个按照九宫格的样式摆好，整个产品结构一览无余。

我个人是不推荐这种导航模式的，尤为使用在app中作为主导航。这样显得app没有纵深感，更主要的是，在用户进入的一瞬间没有呈现有关产品的任何一丝实际内容，需要用户做出选择后才会显示相关事务。

组合导航

合适的导航才是好的导航，我们需要分析产品的功能结构与用户使用的具体环境，分析得出结论。

现在产品结构功能复杂，需要多个合适的导航相结合，常见的有：

抽屉式+标签导航

抽屉式+滑动标签

抽屉式+分段标签

标签导航+分段标签

标签+分段/滑动标签+抽屉式

等等

创意导航

创意导航1

这种导航我个人比较喜欢，应该是material design中的一个控件，切换方便，不影响页面阅读。

电信营业厅

很难找到机会去夸奖国营公司的产品，但这个转盘的设计真的有情怀，非常喜欢。

可惜缺点也很明显，可直接去点，不需要转。内容展示不直观。

有好的创意导航设计请留言，欢迎交流 ：）