移动端主导航的设计模式

2019-07-20 产品阅读量

任何产品的功能以及内容都需要以某种导航框架组织起来，使产品结构清晰，目标明确。在用户体验要素中，框架层里面有个很重要的概念就是导航设计，作者对导航设计的定义是：元素的组合，允许用户在信息架构中穿行。导航通常就是引导用户使用产品、完成目标的工具。这篇文章主要记录下在看了多个大牛分享主导航设计后，自己的总结体会。主导航时呈现应用的主要功能架构及布局的导航方式，是应用的顶层架构。

标签式导航(tab 式导航)

tab 式导航是移动应用中最普遍、最常用的导航模式。适合在相关的几类信息中间频繁的调转。这类信息优先级较高、用户使用频繁，彼此之间相互独立，通过标签式导航的引导，用户可以迅速的实现页面之间的切换且不会迷失方向，简单而高效。需要注意的是标签式导航根据逻辑和重要性控制在 5 个以内，多余 5 个用户难以记忆而且容易迷失。总而言之，这个 tab 适合的场景主要有两个方面：1.各个 tab 功能重要程度都高的时候；2.用户需要频繁切换的时候。
标签式导航主要细分为底部 tab 式导航、顶部 tab 式导航、底部 tab 的扩展导航这三种。

底部 tab 式导航

底部 tab 式导航是最基本的导航，像微信、淘宝、QQ 等全部都是底部 tab 式导航。这是符合拇指热区操作的一种导航模式。大部分是以文字+icon 的形式呈现，使用户减少记忆负担。

优点：

切换方便快捷
可见性好

缺点：

可扩展性不高，一般 3-5 个 tab
占用一定空间，沉浸式体验不足

适用场景

各个功能重要程度都高的时候
用户需要频繁切换的时候

底部 tab 的扩展导航(舵式导航)

舵式导航是底部 tab 导航的扩展形式，有些情况下，简单的底部 tab 导航难以满足更多的操作功能，因此在标签栏的中间加入了功能按钮（多为发布型的功能按钮），来作为应用最核心的操作功能入口。是 app 里面使用最频繁的一个功能，一般都会重点突出。并且，该标签中很多时候会有二级导航，二级导航里可扩展性就比较强。

优点：

突出重要且频繁使用的操作入口，较大限度引导用户进行操作
二级导航可扩展性强

缺点：

中间按钮旁边的按钮点击率会降低
同底部 tab 式导航

适用场景

如果你的 app 几个重要的功能，并且它们切换频繁，其中一个作为 app 的核心功能或者是操作。这个时候可以选择舵式导航

顶部 tab 式导航

顶部标签导航顾名思义就是 tabbar 位于顶部，最早知道它是在 Material Design 里面，Android 的物理按键已经放在底部了，为了不产生堆叠，所以将标签导航置于顶部不会显得突兀。这种导航的最大优点在于在能够使用户清晰的看到 APP 的分类。它很少用作一级导航，一般是二级导航比较多，且几乎都是纯文字的形式。顶部 tab 式导航大致分为分段选项卡、固定选项卡、滚动选项卡四种。

分段选项卡

分段选项卡实现容器内不同视图或内容间的切换。分段选项卡是由两个或两个以上宽度相同的分段组成，正常情况下不超过 4 个，视觉上会有一个很明显的描边按钮。分段选项卡经常会作为二级导航，对主导航内容再次分类，可以在顶部导航栏的下方，也可以直接放在导航栏上。

优点：

分段选项卡可以承载重要性和频率处于同一级别的功能模块、信息或任务
让用户清楚地知道有多个可供选择的视图
支持用户在不同视图间切换

缺点：

选项卡个数有限，一般不超过 4 个。
只支持点击分段实现视图间的切换，不支持左右滑动的切换。

适用场景

对主导航内容再次分类，重要级相同且不超过 4 个。

固定选项卡

固定选项卡固定在屏幕顶部，适用在应用的主要类别之间切换，并且支持左右滑动切换到不同视图。

优点：

固定选项卡可以承载重要性和频率处于同一级别的功能模块、信息或任务
让用户清楚地知道有多个可供选择的视图
支持用户在不同视图间切换，并且支持左右滑动切换，方便操作
显眼——位置处于页面顶部，基于用户由上至下的浏览习惯，固定选项卡处于页面“显眼处”；

缺点：

选项卡个数有限，一般不超过 4 个。
只支持点击分段实现视图间的切换，不支持左右滑动的切换。

适用场景

对主导航内容再次分类，重要级相同且不超过 4 个。

滚动选项卡

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

优点：

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

缺点：

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

适用场景

标签较多时
一般用作二级导航

底部、顶部组合 tab 导航

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

优点：

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

缺点：

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

适用场景

信息量巨大且有多个层级的应用

抽屉式导航

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

优点：

节省页面展示空间。
让用户注意力聚焦到当前页面
扩展性较好

缺点：

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

适用场景

当应用的核心功能流程单一，主界面就能满足用户核心场景下的需求，不需要频繁在几个功能模块之间进行切换，即可将其他的功能模块（通常是分类、设置、个人中心等）做一个收纳，利用抽屉导航隐藏起来
一些使用率较低的功能就需要设计师帮用户“隐藏起来”

抽屉式导航的三种风格

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

下拉菜单式

下拉菜单式简称下拉式，也是一种瞬时的导航方式，即只有在我们需要的时候才会显示出来。能让用户在有限的屏幕空间上做更多的动作，可以用来筛选同一信息列表下不同类别的信息，或者快速启动某些常用的功能模块，而不需要频繁的页面跳转，即可实现操作目的。下拉菜单也可以是浮层或嵌入式的形式.这种导航形式是来源于 Material Design 里面的 Menu.Menu 是临时的一张纸（paper），由按钮（button）、动作（action）、点（pointer）或者包含至少两个菜单项的其他控件触发。

当信息层级变多的时候，菜单导航里要展示一层或者两层信息，比如大众点评采取的形式：

优点：

节省页面展示空间。
点击 icon 即可唤醒，操作方便
点击空白处即可隐藏
唤醒的菜单位于 icon 附近，易感知

缺点：

绝大部分菜单导航位于页面顶部，手势操作不方便
入口不明显，容易忽视

适用场景

菜单导航不能作为主导航，一般为辅助导航
当一个页面承载的功能太多，可以将一些功能收纳到某一元素里的时候

悬浮 icon 导航

悬浮 icon 导航，是将导航页面分层，无论你到达 APP 的哪个页面，悬浮 icon 永远悬浮在上面，你依靠悬浮层随时可以去想要去的地方，同时，为了让悬浮 icon 不遮挡某个页面的操作，通常悬浮的 icon 都可以在屏幕边缘自由移动。在 Android 的 Material Design 中，同样提出了悬浮 icon 的设计概念

优点：

悬浮式 icon 是一个非常便捷的操作入口，也适应大屏幕时代

注意：

悬浮式 icon 会遮挡某些页面的操作，在设计的时候应该考虑进去，比如无论在那个页面永远为悬浮 icon 留有位置。
在某些信息层级繁多且复杂的 APP，让用户自主决定是否需要调出悬浮式 icon，或者让用户自定义菜单会更加符合用户的心理预期

适用场景

更适应大屏的导航模式

感谢以下大牛的分享：