产品经理实战总结丨浅析常见的App导航设计

前段时间在进行一个App设计的时候，想也没有多想，就直接使用了标签导航的方式，师傅看到后问我说：“你觉得这样的一款App使用什么样的导航方式会更好一点，可不可以采用侧边栏？”遂顿悟，便又去思考整理了一下常见的App所使用的导航方式，并进行了一下简单的分析。

一.标签导航

优点：

1.入口直接清晰；

2.操作路径短，便于用户在不同功能模块之间进行跳转；

3.直接展示入口内的内容，内容的曝光率较高。

缺点：

1.功能模块之间没有主次之分；

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

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

小结：

标签导航是现在App中很常见的导航，在进入App的时候，可以根据用户的使用频率对默认的界面进行加载设置。如微信是默认载入聊天列表页，而网易云音乐最开始加载的是【我的音乐】页面，后来改为加载【发现音乐】页面。标签导航多用于App功能模块之间为平行关系，无主次之分，且用户需要在不同的功能模块之间进行频繁的跳转的情况。

二．舵式导航

优点：

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

2.其他，同标签导航。

缺点：

同标签导航。

小结：

由举例的3个App可以看到，舵式导航的入口数目为奇数个，且一般为5个，最多不超过7个。舵式导航一般多见于UGC产品，并且是将发布按钮突出强调，目的在于鼓励用户进行原创发布。

三.抽屉导航

优点：

1.突出了内容的优先级；

2.节省了页面空间，将更多的屏幕空间留给了内容；

3.营造了浸入式体验，让用户的注意力更多的集中到内容上；

4.扩展性好，能够方便的在后期进行功能的延展。

缺点:

在进行不同功能模块的跳转的时候，增加了点击次数，延长了操作路径，不利于用户在不同的功能模块之间进行跳转。

小结：

在echo、界面中用户主要是对内容进行消费，需要更大的屏幕空间以营造更好的阅读浏览体验，而在Uber中用户最常用的功能就是打车，其他的功能相当来说并没有那么重要。抽屉导航一般多用于内容的优先级较高，其他的功能相对来说并不那么重要，并且用户不需要在不同功能之间进行频繁的跳转的产品。

四.九宫格导航

优点：

1.将入口进行聚合，入口清晰直接；

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

3.扩展性好，能够添加多个入口；

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

缺点：

1.无法展示子级页面的内容；

2.退出路径较长，用户需要返回九宫格的导航界面，然后才能够跳转至另外的功能模块。

小结：

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

五.轮播导航

优点：

1.信息扁平化，展示清晰直观；

2.内容曝光率高，突出强调了展示的内容。

缺点：

展示的内容数量有限。

小结：

可以看到列举的3款App中有2款App都是应用市场类的，仅有1款是关于天气类的应用。轮播导航在产品中的使用情况并不是很多，一般多见于应用市场，另外在产品内容足够扁平化的情况下也可以采用轮播导航的方式。

六.组合导航

优点：

1.组合方式多样，可以根据需要使用不同的组合方式，如标签导航+抽屉导航，标签导航+九宫格导航等；

2.能直接给出页面的入口，便于用户进行跳转。

缺点：

1.占据了屏幕较多的空间；

2.App变得厚重。

小结：

可以看到列举的App里多为平台型的产品，产品本身功能较为复杂或者内容很多，既需要用户能够聚焦于内容，又需要给出用户不同页面之间的入口，以便于用户进行直接跳转。根据产品本身的特点，如果常见的导航并不能够满足产品的需求，那就采用组合导航的方式，利用不同导航的特性来满足产品的需求。

七.列表导航

优点：

1.入口清晰直观；

2.能够在列表上直接给出关于活动、更新的提示（见微信游戏、购物提示）。

缺点：

1.入口之间为平行的关系，无优先级之分；

2.排版方式固定。

小结：

列表导航多见于二级菜单，虽然不同入口之间为平行的关系，但是也能够通过区块分割、排列顺序、颜色变化来突出强调入口的优先级。

八.Tab导航

优点：

便于在当前界面直接进行页面的切换。

缺点：

操作热区较小，并且有的App设计的交互前与交互后的样式差异并不是很明显，容易给用户造成自己究竟有没有点击成功的困惑。

小结：

多用于二级菜单，常见的使用场景为当前界面内不同模块的切换，或者查看不同的分类内容，如QQ中的【消息】与【电话】切换，落网中【期刊】与【单曲】等之间的切换。

总结：

可以看到最后列举的几个App关于导航的分类并不是很精准，因为很多产品都是不仅仅使用一个导航，在主导航的下面也会有着其他的导航栏，所以就把有着其他导航，但是也有要说明的导航的App截图放了上来。另外也有一些产品是没有导航栏的，采用瀑布流的方式进行加载，一般多见于图片类的展示，也有一些产品是采用点聚式导航，即默认聚合，点击展开，见Path。这些导航使用场景较少，故没有单独拿出了划分成类。

如果说产品定位是一个产品的灵魂，能够决定产品的本质是什么，并且成为产品的指导原则，确定产品什么能做，什么不能做。那产品结构就决定了产品是什么样子的，对于不同类型的产品需要采用的结构肯定是不一样的，不同的产品结构则直接体现在产品的导航上面。如果说交互处理的是显性的逻辑，即用户能够直接看到操作结果的，那结构处理的则是隐形的逻辑，虽然并不一定能够直观的看到，但是用户能够感受到。如果非要进行产品设计的优先级排序的话，个人觉得应该是定位>功能>架构>交互>视觉。

总的来说，App的导航可以分为两大类，一类是内容的优先级较高，可采用抽屉式导航，另一类则是功能的优先级较高，可根据自己的产品属性，功能特点以及用户的使用习惯来选择合适的导航，一定要符合用户的使用习惯，不要过度设计，也不要为了设计而设计。

关于我：产品100学员王家郴，微信号（604841806），公众号（产品经理从0到1），每周都会在公众号上写点东西，欢迎关注,求指教、求分享、求交流。目前是大四党、产品经理实习生，奔走在产品的道路上，漫漫产品路，与君共勉。

美好学院年终大促>>>买课程送品质好礼——亚马逊Kindle&惊喜红包：）

本文由@王家郴 原创投稿

转载请注明来源于产品100并附带本文链接

产品100非常欢迎产品界的各路大神、人神、女神、男神、土豪、屌丝来稿！

共同分享爱，明天会更好，小编等你来稿：ann@chanpin100.com

去年今日运营文章

1. 2023:  《100个思维模型系列》008.损失规避思维模型(8)
2. 2021:  微信红包封面赚钱项目解析：月入10w+的实战操作!(0)
3. 2021:  春节不打烊！2021年教培机构春节运营方案来了(0)
4. 2021:  积分运营与用户运营的关系！(0)
5. 2021:  QuestMobile:2020年中国移动互联网八大关键词总结(0)