移动产品的导航设计

假设我们需要建造一栋建筑，那么第一步需要做什么工作？——没错，设计和规划好地基，万丈高楼平地起依靠的是稳健合理的地基。

那么在移动产品设计中的地基是什么？就是产品的导航设计，看过很多关于导航设计的文章，那么如何选择合理的导航设计则至关重要，随着手机操作屏幕的大屏化趋势，导航设计的需求也一直在变化之中，今天我就站在前辈的肩膀上来聊一聊导航设计中的一些问题点。

1，认识导航

导航的方式有很多种，正确的认识现有导航模式，能够帮助设计师或产品经理很好的认识产品的架构。不同的导航方式可作为产品的主要导航，也可以穿插使用作为二级导航。导航作为产品的主要框架，在选择导航时需要根据产品的需求来确定选用何种导航方式，这里就介绍下一些常见的主导航方式：

一、标签式导航

也就是我们平时说的tab式导航，是移动应用中最普遍、最常用的导航模式，适合在相关的几类信息中间频繁的调转。这类信息优先级较高、用户使用频繁，彼此之间相互独立，通过标签式导航的引导，用户可以迅速的实现页面之间的切换且不会迷失方向，简单而高效。需要注意的是标签式导航根据逻辑和重要性控制在5个以内，多余5个用户难以记忆而且容易迷失。

而标签式导航还细分为底部tab式导航、顶部tab式导航、底部tab的扩展导航这三种。

1、底部tab式导航

如果此时你观察一下自己手机中常用的APP你就会发现QQ、微信、淘宝、微博、美团、京东等全部都是底部tab式导航

这是符合拇指热区操作的一种导航模式，那么什么是拇指热区呢？当你走在路上、单手持握手机并操作;站在公交车上，一手拉扶手，另一只手操作等等这些场景时，你最常用的操作就是右手单手持握并操作手机，因此，对于手机来说，为触摸进行交互设计，主要针对的就是拇指。

但在手机操作中，拇指的可控范围有限，缺乏灵活度。尤其是在如今的大屏手机上，拇指的可控范围还不到整个屏幕的三分之一——主要集中在屏幕底部、与拇指相对的另外一边。

随着手机屏幕越来越大，内容显示变多了，但是单手操作变难了。这也就是为什么，工具栏和导航条一般都在手机界面的下边缘，而将导航放置在屏幕底部即拇指热区，这样的方式为单手持握时拇指操作带来了更大的舒适性。

将导航放置在屏幕底部也不仅仅关乎到拇指操作的舒适性，还关系到另一个问题：如果放在上面，用手指操作时，会挡住阅读的视线。如果控件在底部，不管手怎么移动，至少不会挡住主要内容，从而给予清晰的视角。呈递内容的屏幕在上方，控制按键在下方。

2、顶部tab式导航

Android的物理按键已经放在底部了，为了不产生堆叠，很多Android应用运用了顶部tab式导航，这是一种妥协下的行为。（下图为微信Android和iOS图）

而如今，在妥协物理按键和拇指操作舒适中，微信Android版抛弃了顶部导航的方式，和IOS保持了一致

当然顶部导航也不是那么一无是处，QQ音乐和酷我音乐现在用的就是顶部Tab式导航，为了更好的浏览基本信息（歌手、歌曲名）、以及支持快捷操作（播放/暂停）播放器需要固定在底部,那么顶部tab导航不失为一个好选择（如下图）

标签式导航，也常融入一些个性化设计，例如在中间位置融合logo或产品最核心的功能，丰富标签栏样式。如果标签放置的选择过多，则可以采取重点导航集成的方式，这种新的导航方式从标签式导航中分离出来称作：舵式导航。这点我们在qq空间，微博等产品中可以看见

总结：

标签式导航是iOS主推的导航模式，位于屏幕底部，在andriod上常见于顶部，这主要是考虑到android手机底部的虚拟按钮会于标签堆积，这种布局方式能让用户直观地了解app的核心功能。同时，使用上能很好的在几个标签快速跳转。标签控制在5个以内，通过视差表现用户当前位置，页面之间的切换快速又不容易迷失。但是随着大屏手机的普及化，android手机顶部的标签栏也越来越不便于操作，微信6.2的改版就是一个信息，不过随着手机设计的不断变化，android与iOS平台也趋于一致，如魅族系列的手机，底部只保留了一个home键，同时还支持轻触返回的功能。

二、抽屉式导航

经常和底部tab式导航结合使用的抽屉式导航，我们可以称之为优雅的隐喻。抽屉式导航将部分信息内容进行隐藏，突出了应用的核心功能。设想你的产品信息层级有非常多的页面和内容，难以在一屏内显示全部内容，那么你一定首先会想到去设计一个底部或顶部的tab导航，但导航太多无疑显得臃肿，而且使用户难以点击，那么这个时候，抽屉式导航是个不错的选择。

但是，抽屉栏式导航有两大缺陷：

1、在大屏幕手机上，单手持握时处于操作盲区，难以点击

我们看到随着iPhone6和iPhone6 plus的推出，到今年6S的持续推进，大屏幕手机时代就这么不可阻挡的来了，而屏幕顶部左上角的抽屉栏位置，一个需要被经常操作的入口，现在，处在了操作盲区。所以对于抽屉导航而言，手势边缘滑动操作就显得尤为重要（如下图）

当然也出现了一些产品将左上的菜单按钮放置在左下的位置（如下图）

2、 抽屉式导航可能会降低你产品一半的用户参与度

抽屉栏为页面带来干净的设计的同时，也让用户忽视隐藏的信息，既然你第一眼看不到这些入口，那么你也就会时常忘记它们在哪儿。这也导致了隐藏在抽屉栏内的信息内容用户点击率下降，参与感降低。

那么，问题来了，到底什么时候适合用侧导航呢？

我们总结一下：

如果应用主要的功能和内容都在一个页面里面。只是一些用户设置这类低频操作内容需要显示在其他页面里。为了让主页面看上去干净美观，可以把这些辅助功能放在抽屉栏里。

如果你的应用有不同的视图，且他们是平级的，需要用户同等地对待，抽屉栏将会浪费掉大多数的用户对于侧边栏中入口的潜在参与度和交互程度。

在大屏时代使用抽屉栏，手势操作显得尤为重要，从屏幕边缘唤出抽屉栏是个不错的选择。

需要注意的是：需要用户有一定参与的信息层级，最好不要放置在抽屉栏，就在我刚刚写这篇文章的时候，提到的对于好奇心日报这类APP将菜单按钮设计成一个图标悬浮于左下角时，能够引起用户的好奇心，从而去点击该按钮展开菜单栏。所以这里针对于菜单导航会降低用户参与度的说法，其实是可以从设计上去进行完善的。

三，桌面式导航

是一种类似手机桌面各个应用入口的导航方式。每一个都是比较独立的信息内容，用户进入一个入口后，只处理与此入口相关的内容，如果跳转至其他入口，必须先回到汇总界面，桌面导航在工具类app中比较适用。每个工具都有一套独立体系，这种导航不适合需要频繁在几个任务间切换的情况。随着移动产品内容丰富，纯粹的桌面式导航开始减少，更多的是融入到其他主导航中，承担起二级导航的作用（支付宝客户端）因为这种特质，宫格式导航被广泛应用于各平台系统的中心页面，这就是为什么说他常见。

为什么这类导航不常用呢，大家可以翻一下手机里的APP，看看哪个APP的主导航用了宫格式导航？你可能只能找到一个最常用的，尤其是爱自拍的亲们-美图秀秀。

经常使用美图秀秀的人都会有一个共同的烦恼，例如我拍了一张图片，我需要美图一下，我的心理模型是这样的：进入美图秀秀-打开一张图片-先祛斑祛痘、放大眼睛、瘦个脸-最后加上特效（自然/甜美可人/粉嫩系）-保存图片。

但是美图秀秀给我的实际模型却是这样的:进入美图秀秀-打开一张图片-进入人像美容-祛斑祛痘、放大眼睛、瘦个脸-保存图片-再进入美化图片-加个特效-再次保存。这样做的结果是流程复杂，而且我多存了一张没用的照片，还要到照片里进行删除。

这就是桌面式导航的缺陷，信息互斥，无法相互通达，只能给用户带来了更多的操作步骤。

四，图片式导航

图示是一种有趣的导航方式，它让导航更加可视化，同时根据页面内容的变化，可以及时跟新图片，适合以图片为主的内容，经常变换的图片也会让用户感受到栏目内容跟新的及时性，对用户来说更有吸引力。同时这种导航需要配置固定的栏目或标题。防止不断更新的图片让用户找不到入口

五：列表式导航

列表式的导航更容易扩展和分组，常用于设置，消息和承载大数量信息的界面。由于列表左右宽度较大。可以结合图标，标题说明或消息数字提示等。为了让列表信息更有层次，在设计上可以考虑分组或二级列表方式，二级列表可以做到展开的隐藏，方便用户查找信息。列表导航通常用于二级页，由于它与宫格导航一样，不会默认展示任何实质内容，所以通常app不会在首页使用它。这种导航结构清晰，易于理解，冷静高效，能够帮助用户快速的定位去到对应的页面。列表项目可以通过间距、标题等进行分组

六：点聚式导航

点聚式导航，最早来源于path，他将用户最频繁使用的多个核心功能电汇聚在主界面中显示，方便随身呼出使用，由于点聚式导航所占空间小，所以它常出现在一些主要流程界面，作为全局导航使用。

如今随着material design的盛行，其中加入的FAB按钮则类似于该点聚式的导航的单一版，将其中最为常用的正向功能加入其中，作为单一界面的功能快捷键。目前虽然应用的范围不是特别广，很多android将其集成了更多的功能，这点和舵式标签导航有类似。

七：跑马灯导航

跑马灯的导航方式，一般适合图片或整块内容的并列展示，用户通过左右手势滑动来聚焦到当前内容。一般来说，数量最多控制在5～7个，在设计上课提供视觉暗示，例如显示下一张的部分内容，或者添加分野指示器，让用户在浏览页面时保持清晰的方向感和对数量的认知。

跑马灯导航一般是作为页面中的重点推荐，进行定时轮播，适用于信息类产品中使用。

总结：这七种是最常见的导航方式，认识现有导航方式，能够使你在羽翼未丰之时能够正确的使用，待羽翼丰满之时，可能会出现更加符合业务或产品架构的导航方式。或者建立自己的规则。