最全的app导航设计总结，并且标注出来应用的场景！

各位客官在写PRD的时候请根据产品导航的侧重点，功能之间的切换关系，功能的使用场景和频次，按需选择。

1.底部标签导航

标签导航位于页面底部 ，标签的分类最好在5个以内。

当产品的整个体验流中是以几个常用功能模块（小于5个）贯穿的，意味着用户需要在多个标签入口之间来回切换。为保证切换的效率，将贯穿产品整个体验的流的模块平铺在Tab Bar位置，保证了用户任务路径的扁平。

基本工具类app都会用到标签导航，如淘宝，支付宝，饿了吗，美团，大众点评，网易云音乐。

优点：清楚当前所在的入口位置；直接展现最重要入口的内容信息。

缺点：最多5个标签。占用一定的高度，一般是icon 加文字，如果用户是小屏幕手机，用户体验不是太好。

2.顶部标签导航，tab导航

顶部导航在ios app中一般用作二级导航，在andriod app中这种导航模式一般用作一级导航。

但自从谷歌推出”抽屉式导航“以后，顶部标签导航一般就用作二级导航，当内容分类较多的时候一般采用顶部标签导航设计模式。

app一般3～5个，如果多于5个就采用滚动模式

优点：可以固定数量，也可以不固定数量，像网易新闻客户端那样，可以左右滑动，衍生更多标签。

缺点：占用高度，容易分散注意力，不利于沉浸式体验。

3.底部和顶部双tab导航

标签式导航一般放在底部，如果产品分类内容和维度较多，则采用顶部和底部结合的导航形式，例如下图的今日头条和爱奇艺。

4. 驼式导航

底部标签导航中间加了一个“+”导航，像轮船上用来指挥的船驼。把生产内容的主功能按钮放在中间，常见于要用户生产UGC内容的内容型社区型app，比如微博，简书，西瓜视频，闲鱼。

优点：需要突出重要且频繁操作的入口。

缺点：同标签导航，最多5个，功能入口过多时，该模式显得笨重不实用。

5.抽屉导航

将菜单隐藏在当前页面内，点击入口即可像抽屉一样拉出菜单。

主页面展示用户场景使用最多的功能，将一些不常用的功能隐藏在当前页面，当需要用到的时候点击入口或者侧滑即可像抽屉一样展开。

多见于影音视听类app，如爱奇艺，腾讯视频，优酷视频，频道太多，将活跃度比较低的频道隐藏。

或者工具类频道比较多的app，比如打车软件滴滴，Uber，将使用场景比较少的自驾租车，二手车，敬老出租功能隐藏起来。

又比如设置、关于、会员等功能，使用场景少，快手和QQ是采用这种导航形式。

优点：节省页面展示空间；让用户注意力聚焦到当前页面；扩展性好；不用担心小屏手机用户体验问题。

缺点：不适合频繁切换的应用。次功能入口比较隐藏，用户不容易发现，同时次功能需要二次点击，增加用户使用成本。

4.宫格导航

宫格导航将主要入口全部聚合在页面，让用户整体了解app的服务，从而选择自己需要的那个服务。各个入口之间相互独立，没有太多的交集，无法跳转互通。

用于一级页：美颜工具美图秀秀，美颜相机，常用的布局是3*3， 2*3，2*2，2*1网格，美图秀秀用2*3的分格，分页突出优先级；

用在二级页：作为内容列表的一种图形化形式呈现，用户频繁切换的概率是比较低，如支付宝首页-更多，聚合展示了一系列工具入口。

用在内容列表的一种图形化表现：比如快手app的视频流

又称之为跳板（图标卡片式）、磁贴式，如携程首页呈现的是不规则的跳板式的导航，又成为陈列馆式导航。

优点：直接展现各项内容；方便浏览经常更新的内容。

缺点：无法入口间的跳转；不能直接展现入口内容；不能显示太多入口次级内容。

5.组合导航

当用户需要聚焦内容，同时又需要一些快捷入口能够接到某些页面时，就可以采用组合导航。电商app常用：淘宝，支付宝，美团外卖，大众点评，

优点：布局灵活，能适应架构的快速调整。

缺点：不规则容易有杂乱感。

6.列表导航

多适用于级别不多，标题内容较长的入口，列表导航通常用于二级页，不会默认展示任何实质内容，所以通常app不会在首页使用它。这种导航结构清晰，易于理解，冷静高效，能够帮助用户快速的定位去到对应的页面。比如微信发现页，脉脉的人脉办事，ios中的设置。

优点：层次展现清晰；可展现内容较长的标题；可展示标题的次级内容。

缺点：同级过多时，容易产生疲劳；排版灵活性不高；只能通过排列顺序、颜色来区分各入口重要程度。一屏承载不下，用户需要下拉才能操作，这个时候不如宫格导航的用户体验好。

另外列表项目可以通过间距、标题等进行分组，形成扩展列表。

7.轮播导航，旋转木马导航

优点：简洁，整体性强；线性的浏览方式有顺畅感、方向感。

缺点：不适合展示过多页面；不能快速定位到对应的分页内容。视觉容易疲劳。

应用场景：应用信息足够扁平，可以尝试轮播导航，比如天气app，其实一些app里的轮播banner图用到也是轮播导航。

8.点聚导航

主操作选项或导航合并成一个按钮，浮动在页面上。

当需要更多展示内容和功能，需要极端简化其入口，一般可以使用点聚式导航。点聚式导航将核心功能聚合到主界面展示，方便用户呼出使用，由于点聚式导航占用空间小，一般融入一些动态的效果，让导航更具有趣味性，一般视频拍摄、编辑类app会采用这种导航形式。

优点：灵活；展示方式有趣；页面更开阔。

缺点：隐藏了功能不能太多，不能展开后用户较难反应。

9.瀑布导航

瀑布式布局适用于图片为主的内容，下拉自动加载。

优点：浏览时产生流畅体验；排版布局多变；沉浸式体验。

缺点：不适合层级架构复杂的产品，容易发生空间位置迷失 ；容易产生疲劳感。

10. 陈列馆式导航

宫格导航的变式，通过在平面上显示各个内容项来实现导航，主要用来显示一些文章、菜谱、照片、产品等，可以布局成轮盘、网格或用幻灯片演示。

陈列馆式设计模式最适合呈现经常更新的、视觉效果直观、彼此独立的内容。比如格瓦拉电影。

优点：直观展现各项内容；方便浏览经常更新的内容

缺点：不适合展现顶层入口框架；容易形成界面内容过多，显得杂乱‘设计效果容易呆板

11.仪表式导航

仪表式导航提供了一种度量关键绩效指标（KPI）是否达到要求的方法。经过设计以后，每一项量度都可以显示出额外的信息。

这种主要的导航模式对于数据分析，统计非常有用。提取关键项，但不过多使用。

用页面模仿隐喻的应用对象，常见于游戏，日记，书籍类app

12 超级菜单式导航，下拉式导航

在app设计中比较少见，在网站中比较常见，菜单分一级菜单，二级菜单。

导航的菜单以浮层的形式位于界面上层，通过点击导航菜单以外的区域使其收起，下拉式导航的面积一般较小，所以采用列表的形式展现菜单内容居多，这种导航形式一般用作筛选内容。比如下图的拍拍贷和美团。

13.隐喻式导航

用页面模仿隐喻的应用对象，常见于游戏，日记，书籍类app

最后附上2018年app排行榜，可以看看他们都用的是什么导航设计，其实大部分app都运用了不止一种导航设计，只要是能满足功能，满足设计重点的导航都是可以自由组合的！