APP设计常见的6种导航模式

APP导航先按任务选择：经常切换、层级相同的目的地适合底部标签；同一模块内的内容分类可放顶部标签；较低频的入口用抽屉或列表；一组可并列浏览的工具可用宫格。突出“发布”的舵式设计还要分清它是执行动作，还是切换到另一个页面。

六种模式可以组合使用。先在Pixso 的交互原型工作流中搭出入口、详情和返回路径，再判断用户能否知道自己在哪里、接下来去哪儿。

一、APP导航的优点

优点一：结构化产品内容和功能

导航系统就相当于APP的骨架，支撑着内容和功能组成的血肉，导航系统起着组织内容和功能的作用，让它们按照产品的信息架构图进行连接，展现在用户面前，导航将零散的内容和功能组织成了一个完整且有结构的系统。

优点二：突出核心功能

导航应优先展示目标用户经常完成的任务。例如即时通信产品需要容易找到会话，购票产品需要容易找到活动与订单。低频功能可以进入次级页面，但不能仅因为使用次数少就删除帮助、安全或账号管理入口。

优点三：扁平化用户任务路径

导航可以清晰指引用户到达目标，建立合理的导航系统，设计顺畅的任务路径，让用户能够快速地在各个模块之间进行切换，一个好的导航，能够扁平化用户的任务路径，减少用户操作成本，从而提高用户体验。

二、APP设计常见的6种导航模式

结合产品的深度和广度来共同探讨一下目前APP界面常见的6种导航形式，并分析其优缺点，从而进一步判断每一种导航形式更适合应用于哪种类型的APP。

第一种：底部标签导航

底部标签把同级目的地直接展示出来，通常采用文字和图标。Android 导航栏指南给出的典型范围是3至5个同等重要的目的地；这是一种平台组件适用范围，不代表所有设备和导航组件都必须遵守同一数量。入口变多时，先调整分组，不要无限缩小文字与点击区域。

优点：

•入口直接清晰，操作路径短，便于在不同功能页面之间进行切换跳转。

•直接展示入口内容，内容曝光度高，可以快速识别产品的主要功能架构。

缺点：

•同级入口的视觉权重接近，不适合承担所有操作的主次排序。

•入口过多时需要重新分组。

第二种：舵式标签导航

底部标签导航的一种拓展形式，就像轮船上用来指挥的船舵，两侧是其他操作按钮。普通标签导航难以满足导航需求，就需要一些扩展形式，和标签导航相比，舵式导航一般会将核心功能放在中间，使标签会更加突出醒目，如发布、上传等。

例如“发布活动”会开始创建流程，而“我的活动”是可反复访问的目的地。二者不能共享难以判断的选中状态。Apple 的标签栏指南将标签栏用于导航；在采用相应平台组件时，把发布动作安排在明确的操作按钮中。评审舵式样式时，也要说清发布取消后回到哪个页面。

优点：

•在默认加载的页面之外，又能够突出强调中间的入口。

•入口直接清晰，操作路径短，便于不同功能模块进行跳转。

•直接展示入口内容，内容曝光率高可以充分曝光产品的核心功能，操作非常高效。

缺点：

•中心入口更醒目，但也可能让人误以为它与其他入口一样只是切换页面，需要用文案和反馈区分。

•拓展性较差，不利于后期的功能扩展。

第三种：顶部标签导航

顶部标签导航一般用于二级导航页面，当页面内容分类较多时，一般采用顶部标签导航设计模式。其功能与底部标签导航类似，可以清晰地展示功能层次和信息架构，选中的标签会被高亮显示，若标签过多时一般采用左右滑动查看。

优点：可通过横向滚动容纳更多内容分类。代价是后面的分类不再同时可见，设计时需要保留当前选中项、合理的滚动位置和可发现的溢出线索。分类过多应重新分组，或提供搜索/筛选。

缺点：操作热区有限，且后位标签需要用户左右滑动才能感知，功能曝光率较低，容易造成误操作的困惑。（不知道当前在哪个标签下）

第四种：抽屉导航

抽屉式导航的核心思路是“隐藏”。隐藏非核心的操作与功能，让用户更专注于核心的功能操作上去，一般用于二级菜单，点击入口或侧滑即可像拉抽屉一样拉出菜单。这种导航模式比较适合不需要频繁切换的次要功能，例如对设置、个人中心等功能的隐藏。

菜单展开后，需要让人分清当前页面与可去的目的地，并能明确关闭。不要把边缘滑动设为唯一入口；抽屉关闭后应回到原内容位置，避免每次返回都重新寻找。

优点：

•节省页面展示空间，使主页面更加简洁美观。

•用户将更多的注意力聚焦到当前页面。

缺点：交互热区单手操作时难以触发，对于新用户难以感知，降低了用户对产品部分功能的参与度。

第五种：宫格导航

宫格导航将多个功能入口聚合为图形化区域，常见于工具箱或首页服务区。入口可以通向相互有关联的页面，并不存在“宫格之间不能互通”的规则。它适合让用户先选择任务；若主要需求是浏览连续内容，宫格不应占满首屏并遮住内容。

优点：

•将入口进行聚合，各入口功能都能清晰直观地展示给用户。

•操作路径较短，用户可以便捷地在不同的功能模块之间进行跳转。

•扩展性好，方便增加多个入口。

缺点：

•用户无法第一时间看到内容或者执行操作、功能缺乏主次，且当功能较多时会增加用户的选择成本。

•如果每次都必须先回到宫格才能去下一项，跨功能任务会增加绕路。

第六种：列表导航

列表导航以一行一个入口呈现功能或内容，可用标题、摘要、图标及状态帮助选择。常见形式包括标题式列表、内容式列表和按组组织的多层列表。

•标题式列表：一般只显示一行文字，有的显示一行文字加一张图片等等。

•内容式列表：主要以内容为主，所以在列表中就会体现出部分内容信息，点击进去就是详情。

•嵌入式列表：嵌入式其实就是由多个列表层级组合而成的导航。

列表既能服务设置等次级页面，也能在消息或内容首页直接展示有用信息。能否做首页，取决于列表提供的是空入口还是可读内容。长列表需要分组、清晰标签，必要时提供搜索；通过组标题和行内主次信息建立层级。

优点：

•结构清晰，易于理解。

•拓展性强，可展示数量多。

•使用高效，能够帮助用户快速地定位去到对应的页面

缺点：

•如果只有长串同样的标题，容易缺少层级；需要按用户任务分组。

•选项过多时搜索成本较高。

•比较占用空间。

产品在迭代中可能增加功能或改变用户的主要任务，因此导航也需要调整。选择时把用户要去的目的地与要执行的操作列在一起，先区分层级，再决定采用哪种可见形式。