app常见的几种导航设计

好的导航设计不仅能提升整个产品的用户体验，而且还能让用户耳目一新。

一、什么是导航？

首先，让我们弄清楚导航这个概念。最基本的含义就是在我们的现实世界中，当我们从一个地方到另一个地方，需要一些引导和指示。英文中Navigation这个词来源于拉丁文，原意就是：操纵船只在海上航行。所以导航就是能够帮助我们到达目的地的行为。导航的其他意思都是建立在这个原意的基础上。

所以回到UI设计上，导航毫无疑问是设计师设计产品可用性的一个要点。它可以定义为一系列引导用户成功地与产品互动，并且实现他们目标的动作组合或者技巧组合。用户带着他们的期望和目标来使用你的网站或者产品，作为设计师的你需要给他们提供实现他们目标的最好操作流程。因此当你的导航设计得非常高效，用户体验能得到极大的提升。

二、导航菜单有什么用？

1.提升产品内容和功能结构和层次

导航是产品的骨架，支撑着整体的内容和信息，让内容按照信息架构有机地结合在一起，直观而清晰地展示在用户面前，从而使零碎的内容变得充实而有序。结构化的同时也增强了生态感。

2.展示软件的核心功能

每一款产品投入开发进入市场后，立身之本在于自己的核心功能。因此，核心功能必须放在用户触手可及的位置，次要功能的比重应该得到控制，展示上也不能喧宾夺主。通过导航就能很好的突出核心，适当隐藏次要功能。

3.简化用户旅程

合理的导航系统和顺畅的任务路径，能够让用户快速地达到目标，形成畅快的用户体验。用户旅程的简化对于产品的用户黏度和转化率有着直接的作用，高效的导航能够直戳用户痛点。

三、常用的导航栏分类

1.经典导航菜单Tabber

Tabber是苹果ios可以自动生成一种导航控件。这种设计符合手机端用户单手操作的习惯，包括新版微信，淘宝，支付宝，百度手机等都采用的这一方式。这个APP导航方式占大多数。一般为四个导航按钮最为普遍，最方便操作的是第二和第三个按。               受制于屏幕宽度的限制，通常采用Tabber导航设计方式，栏目的个数是有限的，不能超过5个。4个为最佳选择。过多的话明显不利于用户的切换也降低体验友好度。

但是，目前也有部分APP在tabber的基础上，衍生出了一种交互比较好的弹出导航菜单。如图下图，这种方式应该说应用了web端的元素和使用方式，相当于有了二级菜单。

          

优点：简约而不简陋，导航清晰、明显，并能提高效率。

缺点：设计时需要注意色彩的搭配，太过于花哨会让用户产生视觉疲劳。

 

2.抽屉式导航

抽屉式滑动导航很好地弥补了tabber导航中切换项受限的缺陷，通过纵向排列切换项解决了这一问题，将菜单隐藏在当前页面内，点击入口即可像抽屉一样拉出菜单。           抽屉式导航通过纵向排列切换项解决了这一问题。不过这也意味着它不能和主体内容同时出现在屏幕上。

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

优点：节省页面展示空间；让用户注意力聚焦到当前页面；扩展性好。

缺点：不适合频繁切换的应用。

 

3.跳板式导航（快速启动版／宫格导航）

跳板／快速启动／宫格导航是将主要入口全部聚合在页面，让用户做出选择。采用这种导航的应用已经越来越少，往往用在二级页作为内容列表的一种图形化形式呈现，或是作为一系列工具入口的聚合。

这种导航模式非常常见，但是却不常用。无论你用的是Android还是iOS，每天一打开手机，宫格式导航就会对你说hello了

    

 

优点：适合入口相互独立互斥，且不需要交叉使用的信息归类

缺点：信息互斥，无法相互通达，只能给用户带来了更多的操作步骤。无法让用户在第一时间看到内容，选择压力较大

 

4.悬浮icon导航

悬浮icon导航，是将导航页面分层，无论你到达APP的哪个页面，悬浮icon永远悬浮在上面，你依靠悬浮层随时可以去想要去的地方。悬浮式icon会遮挡某些页面的操作，在设计的时候应该考虑进去，比如无论在那个页面永远为悬浮icon留有位置。

     

优点：简便美观不占空间

缺点：需要进入二级界面不适合用于频繁操作的应用，并且icon会遮挡住信息

四、总结

tabber标签式导航：最常用、最不易出错，请第一时间考虑它

抽屉式导航：如果你的信息层级繁多，可以考虑将辅助类内容放在抽屉中

跳板式／宫格式导航：不建议在APP中作为主导航使用，如果非使用不可，请增加跳转的关联性

悬浮式icon导航：更适应大屏的导航模式，不妨试一试，但注意不要让它遮挡住某些页面的操作

优秀的app导航设计，能够合理地完美展示产品的功能，并快速引导用户使用，增强用户的识别度。合理的导航设计，会让用户轻松达到目的而又不会干扰和困扰用户的选择。良好的UI设计，通常会帮助用户解决问题，确保可用性和易用性，而这些经过设计师反复打磨和验证过后的相对经典的设计最佳实践，则被视作为设计模式。设计模式的好处在于，它经过了验证，并且具备突出的特性。了解如今所流行的设计模式，能够让你的产品在投放市场之后获得更多的支持，拥有更强的竞争力。

感谢大家的耐心阅读，如果内容观点有不对的地方欢迎指正。