【交互基础】系列之解析移动端导航设计模式(2)

4.1如下图所示虾米音乐、酷狗音乐，当内容分类比较多的时候，且某项功能必须固定在底部，那么选项卡固定在顶部，作为主导航。主导航下方为次级导航，即该选项卡下多个子视图分类（下图中，音乐播放功能固定在底部）。

4.2如下图所示，底部tab导航与固定选项卡组合的导航方式，底部tab导航做为主导航，顶部固定选项卡做为次级导航。（iOS与Android设计思想的结合

5.滚动选项卡

滚动选项卡与固定选项卡同属选项卡式，最大区别在于：一个模块中可以显示多个（超过5个）类别的视图，并且还可以进行扩展或移除（自定义如新闻类的频道、现在比较火的直播类的各类游戏），同样支持左右滑动切换到不同视图。

优点：

没有选项卡个数的显示，并且还支持扩展或移除。可以承载重要性和频率处于同一级别的功能模块、信息或任务。支持用户在不同视图间切换，并且支持左右滑动切换，方便操作。

缺点：

1.滚动选项卡越多，用户的选择压力越大，这也是滚动选项卡无法避免的劣势，所以当类别过多的时候，一般都默认显示一定数量，其他都放在二级页面，由用户自由添加。

如下图所示，应用同级视图过多，可选择扩展和移除的，可选择滚动选项卡做导航。（下图的例子，底部tab做主导航，滚动选项卡做为次级导航。）

6.底部、顶部组合tab导航

有些应用存在上下两层标签，这是由于应用的信息量巨大且信息的布局有多个层级导致的。这种界面布局较为复杂，特别注重逻辑清晰。

优点：

1.底部、顶部组合tab导航解决了诸如新闻资讯类、直播类等信息量巨大且有多个层级的应用的布局问题。这种组合导航方式的运用还是比较多的。

缺点：

双层tab占用了更多的页面空间，具体内容的展示空间进一步被压缩，获取信息的数量相应减少。页面标签过多，信息量太大，用户容易选择困难，且造成使用混乱。所以，这种组合导航必须注重逻辑梳理清晰，界面排布合理，尽量减少给用户带来负面影响。

如下图新浪新闻、今日头条，底部tab做主导航、滚动选项卡做为次级导航组合使用。

7.抽屉式导航

抽屉式导航又称侧边（抽屉） 式导航，是一种瞬时的导航方式，即只有在我们需要的时候才会显示出来（通过点击调出），在我们做出选择后，再次消失。

优点：

由于导航界面的隐藏，主界面的内容信息展示更加清晰简洁、不受干扰，方便用户在核心场景下流畅操作。由于导航界面是隐藏在屏幕之外，展开之后整一页面都是导航菜单内容，所以可扩展和个性化的空间很大。

缺点：

抽屉式导航可能会降低产品一半的用户参与度。由于整个导航的隐藏，对于用户来说，首先是不易发现，再者是给用户切换功能带来了操作成本。导航菜单按钮一般位于左上角，在大屏手机时代，单手持握时属于操作盲区。

7.1当应用的核心功能流程单一，主界面就能满足用户核心场景下的需求，不需要频繁在几个功能模块之间进行切换，即可将其他的功能模块（通常是分类、设置、个人中心等）做一个收纳，利用抽屉导航隐藏起来。如下图所示：滴滴出行、探探。

7.2当我们设计的信息术语是 沉浸式信息时（如新闻类页面、阅读类页面），用户会花80%时间沉浸在界面中，20%的时间用来做其他事情，它们惯用的操作一直是“下拉、刷新”，很少跳转。一些使用率较低的功能就需要设计师帮用户“隐藏起来”。如下图所示：直播吧、小说书城。

7.3抽屉式导航的三种风格：浮层、嵌入式（向右推动原有界面）、新兴的模式（向右滑动的3D效果）。轻滑：通过轻滑或点击的手势打开抽屉，抽屉部分遮挡或覆盖原来页面的内容。嵌入式：通过轻滑、平移或点击打开抽屉，把原先的页面内容部分推出屏幕外。新兴模式：打开侧边抽屉的时候，嵌入式抽屉不仅把上一级页面向右推开，还采用3D效果将其推到后面。

8.下拉菜单式

下拉菜单式简称下拉式，也是一种瞬时的导航方式，即只有在我们需要的时候才会显示出来。能让用户在有限的屏幕空间上做更多的动作，可以用来筛选同一信息列表下不同类别的信息，或者快速启动某些常用的功能模块，而不需要频繁的页面跳转，即可实现操作目的。下拉菜单也可以是浮层或嵌入式的形式，且有一个重要规则：无论什么手势，都能打开菜单，比如点击图标、轻滑、平移。同样，隐藏菜单也是这样。

安卓为这种主导航提供了一种特别的控件——Spinner控件。但要记住，Spinner应该用于同一个类别下的不同视图间进行导航，而不是跳转到完全不同的类别。在iOS中下拉菜单为自定义控件。

优点：

隐藏了大部分分类信息或功能操作，使主界面展示更加清晰、简洁。通过隐藏的方式，能让用户在有限的屏幕空间上做更多的操作。

缺点：

与抽屉式导航类似的缺点，隐藏即代表了不易被用户发现，增加了用户的使用及操作成本。由于是位于屏幕上方，相对隐蔽而且不能结合手势操作，所以该菜单形式也不适合于频繁的切换功能使用。

8.1如下图所示的微信、支付宝，下拉菜单用于快速启动某些常用的功能模块。点击界面其他区域即可隐藏菜单。

8.2如下图所示的手机京东、Boss直聘，下拉菜单用于信息列表的筛选，用于筛选同一信息列表下不同类别的信息。需要注意的是，不要让菜单覆盖整个屏幕，并且点击背景的任意区域都可以隐藏菜单。

编辑：未知