App导航设计类型及示例分析

      App导航的设计对于突出产品核心功能，扁平化指导用户操作有着极为重要的作用。常见的导航设计类型有：标签式导航（底部Tab）、点聚式导航、选项卡式导航（顶部Tab）、宫格式导航、列表式导航、幻灯片式导航、抽屉式导航、侧边栏导航、下拉菜单导航、瀑布式导航及陈列式导航11种。下面以几款APP来分析各种导航类型的优劣。

京东金融APP：

1.底部标签导航+顶部滑动选项卡+内容列表式导航

评价：这种混合导航的方式，既对核心功能作了明确分类，又通过3个分类选项卡实现了主要功能的切换，配合内容列表式呈现，入口可见性较高，整体用户体验较好。

底部标签导航：分为首页、资讯、服务应用、我4类，清晰将其核心功能分类，这种导航设计将同级重要的功能放置在最核心地方，方便用户频繁切换，操作不容易迷失。对于核心功能突出且功能繁多的APP而言，这种设计十分合理便捷。缺点是，图标+文字的标签导航会占据较大的空间，页面可视范围会缩减，而且标签最多只能放置5个。

顶部滑动选项卡导航：将整个app功能分为3大版块，理财、白条、支付，左右滑动即可快速切换内容。因为只有3个标签所以可见性较好，操作方便。后面将对多标签选项卡进行分析。

内容采用列表式导航：这种类型导航清晰可见、排列规整、辨识度极高，既可以展示较多功能入口，本身也可显示较长的1、2级标题内容，右侧还可配合展示次级内容，对用户做出一些指向性说明。缺点是，这种类型导航灵活性不高，只能通过简单排序方式展现或配合色块来区分重要性，如果排列较多，容易产生视觉疲劳。

2.1级宫格式导航+2级：下拉菜单式导航/滑动选项卡导航/陈列式导航/瀑布流式导航

评价：服务中将常用功能入口作了分类展示，且以宫格导航方式呈现，分类清晰，易于寻找。但因功能较多，又形成了多层级的页面跳转。2级导航使用了多样的导航方式，以适应不同内容的呈现，整体层级感较强，但入口太多，层级页面嵌套也较多，功能选项设置繁多，操作起来稍感繁琐。

宫格式导航：扩展性较好，可以展示较多的功能入口，甚至可以通过左右滑动来展示更多功能。缺点是入口间无法跳转，不能直接展示入口内容，如入口太多会产生眼花缭乱的感觉。

下拉菜单式导航：不占空间，容易嵌套在其它导航中使用。缺点是可见性较差，操作步骤较多。这种导航方式常常被滑动式选项卡所代替，但在其它位置被占用时，就只能使用下拉菜单了。

上图1-瀑布式导航：这种导航也可以看作是一种布局方式，常用来展示图片，下拉自动加载，有较好的浏览体验，且能营造一种氛围感，给人一种沉浸感。排版方式可规整也可随意布置营造错落感。但不适合层级复杂的结构，且内容较多时容易产生疲劳感。

上图2-陈列式导航：也可以作为一种布局方式，对同类进行聚合，直接排列展示，作为入口吸引用户点击。缺点是有数量限制，不宜太多。

上图3-2级标签导航+顶部滑动选项卡导航：京东APP中有很多2级页面叠加采用了底部标签导航，因为采用的是Web的开发方式，切换流畅度不比原生方式流畅，需要等待网络加载。在结构上通过分类形成了明晰的功能区别，但也会造成层级关系复杂，页面跳转繁琐。此处顶部滑动选项卡极具代表性，这种导航方式占据空间小，类别数量不受限制，左右滑动的操作非常方便。但致命的缺点在于，数量太多，越往后的选项因为可见性差，点击量会很低。混合底部的2级标签导航，造成整个页面结构复杂、内容繁乱。建议是将“购物车、我的”全部集合到1级“我的-订单管理”里。从用户角度来说更为便捷，符合操作心理。

天气：幻灯片式导航      QQ：抽屉式导航      大众点评：侧边栏式导航

上图1-幻灯片式导航：适用于图片或整块内容的并列展示，左右滑动切换内容。单页面内容简洁、整体性强，浏览流畅，方向感好。但不适合展示太多内容，一般数量不宜过大，最好在7、8个以内，否则会产生操作疲劳。

上图2-抽屉式导航：节省页面空间，让用户注意力集中到内容上，可扩展性好，导航数量不限。缺点是隐藏栏可见性差，渗透率低，不适合频繁切换的应用。因为QQ软件的特殊性，导航较少，且以固定在左上角，用户相对容易找到唤起。

上图3-侧边栏式导航：因大众点评产品类别多样化、细分种类繁多，这种侧边栏导航，容易呈现整个结构。相对于抽屉式隐藏的特性，直接显示出来，便于用户发现寻找，扩展性好。但会挤占较大空间，无法显示次级内容。大众点评二级菜单采用图标+小标题的展现方式，增强了趣味性，更直观。这种导航类型适用于分层结构复杂，且分类重要的产品。

---

综上10种常用导航方式，在实际设计使用中，应该根据产品的特性来混合使用，单一导航肯定无法满足丰富多变的产品需求。但也不能因为追求展示形式的多样化，造成导航搭配混乱的感觉。适合自己产品的才是最好的。