产品导航的意义

1.产品导航的意义

在说导航之前，先说一些其他的。比如说产品定位和产品结构。

产品定位是一个产品的灵魂，能够决定产品的本质是什么，并且成为产品的指导原则，确定产品什么能做，什么不能做。（通常，APP的首页体现该产品的核心定位，如微信首页是对话，airbnb首页是民宿地点、入住时间以及入住人数的选择。）

产品结构就决定了产品是什么样子的，对于不同类型的产品需要采用的结构肯定是不一样的，不同的产品结构则直接体现在产品的导航上面。

进行产品设计的优先级排序的话，个人觉得应该是定位功能（会决定出内容和功能哪个优先级更高，哪个是这个APP的核心定位，核心功能）架构（导航的设计，大方向上）交互（导航的结果，细节上），最后才是视觉。

APP导航系统作用

功能上：让用户轻松到达目的地而又不会干扰和困惑用户的选择。

视觉上：也增强了用户的识别度。

App的导航可以分为两大类

一类是内容的优先级较高。强调内容，例如滴滴，网易邮箱，采用抽屉式导航，内容得以最大化地呈现，又例如微信，采用标签导航，首页上呈现的是对话内容，表明微信最基本最重要的定位是即时对话，其他功能如钱包、摇一摇等互动游戏，是在即时对话的基础上附加的。

另一类则是功能的优先级较高，可根据自己的产品属性，功能特点以及用户的使用习惯来选择合适的导航。如天猫京东（组合式导航，尤其首页上的功能ICON的网格式导航，将各大功能入口放在首页，表明了天猫和京东是购物平台性质的产品。）

2. 常见导航分类

· 底部标签导航

· 底部标签导航（弹出式菜单导航）

· 底部标签舵式导航

· 顶部标签导航

· 超级菜单式导航

· 网格磁贴式导航

· 列表式导航

· 抽屉式导航

· 组合式导航

· Scope bar 导航

· 画廊式导航（瀑布流）

· 底部标签导航Tabbar

优点：

· 符合手机端用户单手操作的习惯。

· 用户可以频繁地在不同标签页面之间切换。

· 直接展示入口标签界面内的内容，内容曝光率高。（可以对默认显示的界面进行加载设置。如微信是默认载入聊天列表页，而网易邮箱大师的载入页是收信箱的邮件列表。）

缺点：

· 会占用一定高度的空间，长时间逗留的页面会影响阅读体验。

· 底部标签的存在会降低屏幕的使用效率，这个时候，在不需要的时候隐去底部标签就是很聪明的一种做法。如大部分文章阅读页面的设置。

· 入口数量有限，常见的标签导航多为3-5个控件，不宜超过5个。

· 扩展性差，不利于后期的功能扩展（ps.虽然可以将最后一个入口设置为【更多】，但是还是会导致入口较深的问题出现，会增加用户的操作成本，导致到达率降低）。

案例：微信，淘宝，支付宝......

一般为四个导航按钮最为普遍，最方便操作的是第二和第三个。受制于屏幕宽度的限制，通常采用Tabbar导航设计方式，栏目的个数是有限的，不能超过5个。4个为最佳选择。

底部标签导航的弹出式菜单导航

部分APP在tab bar的基础上，衍生出了一种交互比较好的弹出菜单导航。

（区分于舵式导航按钮，弹出式导航菜单按钮本身并不特殊，弹出式导航是点击标签之后，一定会出来多个新按钮。而舵式导航多指的是形式上的强调该按钮。多用于UGC产品，鼓励用户点击，发表新内容。换句话说，弹出式导航强调操作之后多项按钮的结果，舵式导航强调标签的独特外在形式。两者并不对立）

这种方式应该说应用了web端的元素和使用方式，相当于有了二级菜单。很不错的尝试。如果导航菜单很多，这种弹出式的导航菜单也是不错的一种选择。

底部标签舵式导航

“舵式导航”，因为它的样式很像轮船上用来指挥的船舵，两侧是其他操作按钮。当页面有处于同一层级的几大部分内容，同时又需要一个非常重要且频繁操作的入口，就可以采用这种导航模式，舵式导航的按钮一般会在形式上予以强调，比如形状做的大一点，颜色重一点等。舵式入口要放在底部标签中间。

优点：

· 集中强调某一个功能
· 舵式导航经常见于UGC产品，并且是将发布按钮突出强调，目的在于鼓励用户进行原创发布。（点击舵式导航标签，常常会出来弹出式按钮如“文字”“视频”选择，选择相应的要发表的类型。）

· 除此之外，还用于上传图片、视频，分享等操作集成式的功能。（点击舵式入口，不是新的页面，而是弹出式菜单导航，如新的按钮选择）

（点击舵式导航按钮，出来的是系统自带的选择按钮）

顶部标签导航

顶部菜单和底部差不多，把菜单放在顶部，可以遵循上至下的阅读习惯，不过有个缺点就是不能单手操作。

和超级菜单栏导航有区别：超级菜单栏往往是在一个页面内的切换，顶部菜单是多个大的标签页面之间的切换。

案例：只二

（在有标题栏的情况下，类似于超级菜单式导航。介于顶部标签导航和超级菜单导航之间）

Horner

超级菜单式导航

 APP页面内容区域上部的滑动菜单，简称“超级菜单式”

APP上的超级菜单式导航与网站所用的超级菜单导航类似，它在一个较大的覆盖面板上分组显示已定义好格式的菜单选项。

不过总体而言，如果需要在具有相似属性类别之间进行较频繁切换时，这种设计方式很值得参考。

案例：只二，建业足球APP，MONO

这种酷炫滑动菜单是用户通过在内容页面左右滑动手指即可在不同的菜单之间进行切换。

优点：

这种方式的APP用户体验改进了很多，尤其在连续切换时其操作方式的连续性比较强，会产生更加流畅的体验（左右滑动切换菜单页面，上下滑动浏览内容，不需要点击上边的各个菜单，这样子会打断操作流程）。

缺点：

一次滑动只能切换到相邻的类别，要想直接切换到对应类别可以点击上方的类别列表，不过由于类别过多，有时候可能需要滑动一下类别列表才能完成操作。相比底部、顶部标签导航，由于菜单选择相对较多，直接点击选择可能会稍微有一点不便。

网格磁贴式导航

 不管是整体的APP的导航系统，还是某一页面的导航，网格磁贴风格的导航设计都是用图标代表，详情需要点击进去查看（类似于淘宝网站上的功能ICON）。

这种宫格导航是将主要入口聚合在一起，让用户做出选择。往往用在二级页作为内容列表的一种图形化形式呈现，或是作为一系列工具入口的聚合，或者是作为页面内容的一部分导航（如天猫的功能ICON网格区）。网格导航的各个入口，并没有明显的主次之分，各个功能相对对立，一样重要。

这样的组织方式无法让用户在第一时间看到内容，选择压力较大。所以一般除了工具类的产品，一般不会用在首页。

优点：

· 将入口进行聚合，入口清晰直接（入口通常有很多个，避免了标签导航只能四五个标签的缺陷）

· 扩展性好，能够添加多个入口。

· 能够直接给出功能模块的更新提示（ ps 美图秀秀图标左上角的hot，当然也可以更改为new）。

· 网格一般都是正方形的，相比列表的长条形，排列更紧凑，页面空间使用效率更高。

缺点：

· 无法展示子级页面的内容。

· 退出路径较长，用户需要返回九宫格的导航界面，然后才能够跳转至另外的功能模块（这一点上不如标签导航）。

网格式菜单就类似于metro UI的堆砌色块，优点简约而不简陋，导航清晰、明显，并能提高效率。但设计时切记不分青红皂白的去使用色彩，这可能会让用户产生疑惑。

如淘宝首页的功能icon类这种，是不彻底的网格导航（局部的网格式）。

3款App示例均是图片修理类软件，网格导航多用于工具性的App，适用于功能模块之间相互独立，没有明显的优先级之分，且用户不需要在不同的功能模块之间进行频繁跳转的情况。

列表式菜单导航

列表式菜单设计这个从网站到手机APP上都很常用的，遵循由上至下的阅读习惯方式，所以使用起来用户不会觉得困难。

常常用在二级页面导航中。与网格式导航比起来，列表式的导航适合：标题比较长的，需要副标题的。

几乎所有的“设置”页面都是列表导航，虽然不同入口之间为平行的关系，但是也能够通过区块分割、排列顺序、颜色变化来突出强调入口的优先级。

由于列表导航与宫格导航一样，比较少地显示内容，（尽管列表导航可以以副标题的形式显示部分内容），所以通常app不会在首页使用它。（列表和列表导航不是一回事，列表包括列表导航和内容类的列表，）

优点：

1.入口清晰直观；

2.能够在列表上直接给出关于内容和状态的简要提示（如微信设置中“账号与安全”中，手机号一栏，列表右侧以灰色字体显示出具体电话号码等）。

这种导航结构清晰，易于理解，冷静高效，能够帮助用户快速的定位去到对应的页面。列表项目可以通过间距、标题等进行分组。

案例：微信、淘宝等的设置页面等

另外我们可以通过漂亮的配色、图标组合来设计，使得菜单更多加美观。

抽屉式导航

上面我们说到了Tab bar并不是完美，它并不适用于过多的切换项。所以，抽屉式导航很好的解决了这个问题！适合内容的优先级很高，其他功能不是很常用，如设置啊等其他。

优点：

· 这种导航的优点是节省页面展示空间，强调内容，让用户将更多的注意力聚焦到当前页面。

· 比较适合于不那么需要频繁切换内容的应用，例如对设置、关于等内容的隐藏。

· 这种导航设计一般要提供菜单划出的过渡动画（除了点击按钮调出抽屉以外，滑动也可以）。

· 抽屉式导航不能和主体内容同时出现在屏幕上（抽屉导航会覆盖一部分的界面，主体内容只露出来部分）。

· 扩展性很好，后续加上新的功能时影响降至最小。

缺点：

适用抽屉导航的APP还是比较少的。

如打车软件、地图类软件

打车软件中用户最常用的功能就是打车，其他的功能相当来说并没有那么重要。抽屉导航一般多用于内容的优先级较高，其他的功能相对来说并不那么重要，并且用户不需要在不同功能之间进行频繁的跳转的产品。

案例：网易邮箱，QQ

网易邮箱比较特殊的，收件箱，草稿箱，已发送等这些是平行的功能，也可以放到抽屉中。但是慎用，因为邮箱这个，跟网页中的邮箱管理习惯有关系，用户已经养成了习惯。

在大部分的APP导航设计当中，通过点击屏幕左上角（或者是右上角，如淘宝的APP）的按钮点击切换项，有些也可以通过向右滑动手指来完成，不需要点击上边的按钮。算是一个简单的APP滑动动画。

抽屉式滑动导航中的2种导航布局

第一种：抽屉式导航的列表形式

第二种：抽屉式导航的图标卡片式布局

组合式导航

当用户需要聚焦内容，同时又需要一些快捷入口能够连接到某些页面时，就可以采用组合导航。（平台性APP常用）

组合导航上方用宫格的形式展现快捷入口，与标签导航不同的是，这些宫格入口之间不需要是平级的关系，也不必包含整个层级的内容，你可以将它理解为一种图形化的功能按集合。

案例：一家、支付宝

Scope bar导航

（实质是标签导航中的标签导航）

用于二级页，本质和标签导航相同，当应用层级较多的情况下，可以采用scope bar导航，典型场景是用于改变的当前的视图，或对当前页面内容进行分类查看。

一种是像QQ类的，scope bar 导航在导航栏上，另一类是一般的都在内容区域的顶部。

案例：QQ（scope bar位于导航栏上）

支付宝，APP store（scope bar 位于内容区域的顶部）

瀑布流导航（画廊型）

画廊型导航，一般用于图片／影像类产品的导航。每一篇文章，每一副图画都独立显示出来，便于预览展示和选择。可以说是没有导航，非常自由。

字体，间距，内容选择得好的话，能给人高逼格的感觉。

网格式导航和瀑布流导航的区别，网格式导航的背景是色彩或者统一规格的，是定义好的。

而瀑布流或者说画廊式导航的都是上传的图片，文字数量啊，格式啊也不是统一的格式。更自由一些。　

案例：好奇心日报

采取了画廊型而不是列表型的方式进行文章导航。

单行的瀑布流导航。