超全的设计导航，设计 导航

编者介绍：清晰的导航设计可以帮助用户快速获取所需信息并有效集中注意力。然而，导航设计必须针对不同的场景和目的进行规划。本文深入分析了其中一种APP设计模式：——导航设计。

1. 一级导航/主导航1. 基于选项卡的导航基于选项卡的导航，也称为基于选项卡的导航，是移动市场上最流行的导航设计。选项卡导航通常分为底部、顶部以及顶部和底部混合。

1）底部导航

使用文本和图标显示。通常有3 到5 个标签，这有利于在相关类型的信息之间频繁切换。此类信息优先级高，用户使用频繁，且相互独立。引导式选项卡式导航允许用户在页面之间快速切换而不会迷失方向，使其简单而高效。

缺点是如果用户的手机屏幕较小，则需要一定的高度空间。

下图中的应用程序是微信和Facebook。

2) 顶部导航

当内容类别较多，不同内容的用户打开率相差不大，且需要快速切换/召回时，常采用Wave Analytics、滴滴打车等工具类应用中常见的顶部导航设计模式。

3）上下双标签导航

除了顶部和底部标签导航之外，一些内容较多的产品采用了顶部和底部标签导航的组合，例如简书和网易云阅读。

2、抽屉式导航抽屉式导航是指一些功能菜单按钮隐藏在当前页面的后面。单击该条目或将其向侧面滑动即可像抽屉一样拉出菜单。

这种类型的导航设计适合不需要频繁切换的辅助功能，例如设置、关于、会员、皮肤设置等隐藏功能。下图是Wave Analytics、Gadgets News、My Rolls 和Perisfind。

抽屉式导航的优点在于节省了页面展示空间，让主页面更加简洁美观，让用户更加专注于当前页面。

缺点是次要功能的入口比较隐蔽，用户很难找到。次要功能需要第二次点击，这增加了用户的成本。

3.桌面导航桌面导航类似于操作系统或启动控制面板，具有由多个按钮组成的主页。在平衡布局中，按钮通常大小相同，并按以下格式排列在桌面上：3*3、2*3、2*2 和1*2。单击该按钮可跳转到其他内部子系统/子模块。

如图所示，Strides 和Finance 具有基于圆形按钮的平衡布局。

360 度和字母顺序图表使用基于圆角矩形按钮的平衡布局。

注意：如果圆角矩形的弧线越来越小或者消失成正方形，往往会使用方形网格来达到最佳的视觉效果。这种模式可以在《宫廷导航》中看到。下一节。

市场上的应用程序数量仍然较少，其内部环境复杂，多个服务（来自自己的或第三方的服务）可以单独比较为一个小型应用程序。可以是一家互联网公司，甚至可以是一家中型互联网公司。

但随着业务整合、平台建设、系统建设、服务扁平化，它们将被装进一个“壳”，形成像阿里巴巴的支付宝、千牛工作台那样的“超级服务平台”APP。

列表菜单导航中的每个列表均指相应的功能/内容选项。它有许多变体，包括个人菜单列表、分组菜单列表和扩展菜单列表。扩展菜单列表是具有附加搜索、浏览和过滤功能的简单列表。

下图中的应用程序是QQ、有道云笔记、Retrica、Strides。

最佳实践：列表菜单导航非常适合长标题和副标题。类似表格的菜单导航允许您从子页面返回到类似表格的页面。通常，标题栏上会添加一个单词菜单按钮。返回键。

2.选项卡式底部选项卡已成为两大系统上大多数应用程序的标配：IOS和Android（黑莓和webOS也被广泛使用，但这些不再是主流系统，所以（这里不解释）。 Facebook、Twitter、微信、新浪微博等：

许多应用程序还在导航栏或顶部导航下方设置选项卡标签。这和传统的网站导航类似，比如360云盘、扇贝词、豆瓣、Facebook等。

最佳实践：使用选项卡导航以直观方式区分选定和未选定的选项。

3.图库风格图库风格的界面分为不同的内容块进行导航。内容区域通常包括单独的文章、标题、照片、产品以及可以在内容区域、网格或幻灯片中显示的其他内容。 TED、BBC NEWS、Bilibili、搜狐视频等

在某些情况下，当内容区域分组布局时，您需要将分组的内容设计为更易于用户浏览。例如，您应该使用侧选项卡表单（也称为抽屉式导航）来管理分组内容并允许用户在选项卡之间切换。要查看不同的分组，下面显示的应用程序是My Rolls 和Perisfind。

最佳实践：图库风格的界面设计模式适合用户想要查看的经常更新的内容。

4、页面旋转页面旋转的一种常见模式是，随着用户滑动，使用左右滑动手势显示下一页。页面指示器（iOS 系统底部的小点）显示有多少页面可供切换。下图中的应用程序分别是tapas和ConnectID。

页面轮播导航方式有一定的局限性。如果您的页面超过8 个，则应考虑使用列表导航。

最佳实践：

页面旋转导航适合页面数量较少的情况。指示器用于反映页码，左右滑动手势是最常见的旋转导航手势。

5. 图像旋转图像旋转的常见形式类似于2D 轮播，您可以向左或向右滑动图像，也可以向任意方向滑动回到原始图像。以下照片来自TED、BBC NEWS 和IMOB 应用程序。

3. 其他类型的仪表板仪表板总结并显示了几个关键指标。输入每个指标时会显示附加信息。这种主要导航模式常用于友盟统计等金融应用、分析工具以及销售和营销应用。

最佳实践：仪表板应该只加载经过研究确认的关键数据，而不是太多内容。

作者：银发芝加哥

原文链接：https://zhuanlan.zhihu.com/p/27382083

本文已被@WhitePublishChicago接受发表于《人人都是产品经理》。它禁止未经授权的复制。

标题图片由Unsplash 根据CC0 协议提供