一个优秀的用户体验对于一个优秀的导航设计至关重要。你一定遇到过指向交互界面的人，不知道你指向哪里，这对体验非常有影响，所以今天与你分享了导航设计的总结和他们的优缺点。

一、导航的定义。

导航的定义实际上是元素之间的相互组合，可以让用户在其中自由穿行。

二、导航设计的目的。

导航设计的目的是突出产品的核心，平坦用户的任务路径。让用户在产品中顺利行驶，让用户始终知道自己在应用中的位置以及如何访问目的页面。

产品导航系统是在用户界面上显示产品信息结构的一种方式。移动产品导航的设计不是最好的，只是最合适的，根据您的产品采用最合适的导航设计。

三、导航设计的作用。

导航设计实际上是为了让用户知道他们在哪里，他们在哪个交互界面，他们可以去哪个页面，回到哪个页面。

当然，也要提供跳转的方法，让用户感受到元素与页面的关系，表达用户与浏览界面的关系。

四、九种常用导航设计。

1.导航底部标签(Tab)。

当产品的整个体验流通过几个常见的功能模块（通常不超过5个）时，这意味着用户需要在多个标签入口之间来回切换；

优点：属于拇指热区，操作方便，切换快，用户体验好。

缺点：只能容纳3-5个，数量有限。

2.导航顶部标签(Tab)。

顶部Tab是谷歌提出的。为了区分与iOS不同的导航模式，谷歌提出了相应的手势操作解决方案，如樊登阅读和爱奇艺。

在实际项目中，顶部和底部使用了很多。

优点：顶部可滑动，因此可扩展性强，占用的空间比底部少，通过滑屏切换方便快捷。

缺点：由于可扩展性强，用户需要花很多时间切换到他们想要的页面，最后一页很容易被用户遗忘。

3.舵式导航。

点聚式将多个核心功能聚集在主界面显示，方便用户呼出使用。它将与其他导航风格（如标签）一起成为舵导航，如微博。

类似于标签导航，点聚工导航与标签导航的结合，其中一个包含更多的操作选项，也可以理解为标签包含更多的二次导航标签。当页面有几个同级别的内容，需要一个非常重要和频繁的操作入口时，可以使用这种APP导航模式。

优点：核心显示在颜色或大小上，显示方式变得非常灵活，不同的颜色给用户不同的视觉冲击，激发用户的互动欲望。

缺点：属于二级交互，增加了用户的路径，过多的显示功能会给用户带来选择压力。

4.宫格导航。

宫格式导航广泛应用于各平台系统的中心页面，如支付宝。

以二级页面作为内容列表的图形形式呈现，或作为一系列工具入口的聚合；

用户频繁切换的概率相对较低；在不同的文章中可以称为跳板(图标卡片式)和磁贴式。

优点：直观地向用户展示重要功能，促进用户快速选择。

缺点：同时，正是因为这种平铺显示方式，用户才有了选择的压力。如果需要在两个功能之间切换，会很麻烦。

5.展厅式导航。

宫格导航的变化可用于呈现实时内容，如新闻、食谱、文章或照片、网格布局（如直播和ins）或轮盘布局（如格瓦拉电影），或幻灯片模式。

展厅式设计模式最适合呈现经常更新、视觉效果直观、独立的内容。

优点：以卡片的形式显示，大量的标签可以让用户快速理解内容，方便比较选择。

缺点：整个界面显示的卡片数量很少，用户需要通过不断下降来获得新的内容，增加用户的交互过程。

6.抽屉导航。

一般用于放置不常用于用户或产品的核心功能，或不需要频繁切换内容，如隐藏设置、个人信息等内容；

更多地应用于信息流产品的设计，注重核心内容的显示，用户的任务路径相对单一，几乎所有用于浏览产品的核心内容；其他低频模块入口隐藏在当前界面后面，避免冗余模块吸引用户的注意；如QQ、酷狗音乐。

2/8规则告诉我们，80%的用户只使用20%的功能，这是信息流中的核心功能；如果80%不常用的功能也占据最重要的位置，用户就会被打扰，感到臃肿，甚至放弃使用产品。

优点：可以显示大量不常用但非常重要的功能，减少用户的交互过程，不占用主界面，用户不会受到干扰。

缺点：对于不了解产品的用户来说，这种导航用户一般不容易被发现，会导致用户流失。

7.下拉导航/菜单导航。

与抽屉式导航相同的目的是突出内容。一般位于产品顶部，点击呼出导航菜单；

它通常用于在同一信息模块下筛选不同类别的信息，或快速启动一些常用的功能模块，而无需频繁跳转页面；

Android中对应的控制器是spiner控制器，但该控制器用于在同一类别下切换不同的视图，而不是跳转到完全不同的视图。iOS中下拉菜单为自定义控制器，可实现不同类别之间的切换；

下拉导航还有一个变化，就是在菜单中显示两级甚至两级以上，这在电商产品中很常见，因为微博、美团等品类和筛选条件很多。

优点：与重要界面连贯性强，不占用重要界面，用户点击方便，可通过比较详细比较自己的目标。

缺点：一般下拉键较小，不易被用户发现，容易被忽视。

8.列表导航。

作为信息组织框架，是我们产品设计中必不可少的信息承载模式。

适用于显示较长或次级文本内容的标题，每行可融入更多信息。

类似于宫格导航，常用于二级页面，不会默认显示任何实质性内容，所以app通常不会在首页使用；比如QQ，微信。

ios开发和android都有现成的列表布局插件和模板。

优点:可扩展性强，功能多，也符合从上到下从左到右的阅读习惯。

缺点:切换不方便，更换功能需要返回上一级，增加交互路径。

9.轮播(旋转木马)导航。

当您的应用程序信息足够平坦时，尝试轮播导航（适用于页面结构简单的应用程序）

一般用于购物软件广告区，图文链接显示。

优点：通过少量区域展示大量内容。

缺点：用户需要重复左右切换才能找到目标页面，大大增加了交互路径，用户体验差。

五，总结

导航栏是元素之间的组合，可以让用户清楚地知道自己在哪里，去哪里，选择不同的导航产品可以增加用户体验。