此文章讲解了什么是导航设计到导航设计的各种类型如何运用到自己的项目当中去.

希望该文章能够给你带来帮助

优秀的app导航设计、能够合理地完美展示产品的功能，并能够快速引导用户的使用，增强用户的识别度。合理的导航设计，会让用户轻松达到目的而又不会干扰和困扰用户的选择。

一、如何做导航设计

1、明确用户角色和任务流程

2、搭建清晰合理的信息架构

3、灵活运用导航模式

4、利用推荐算法来简化、关注拇指操作热区来创新

二、导航的设计原则

导航组织了内容,因此它能够让用户更轻松的在应用中找到所需的信息.为了让导航更符合应用、首先要定义你的用户,他们使用的典型路径,以及你希望他们去用的功能

1、明确了用户群体和核心任务之后,就可以解构功能流程、通过信息架构来搭建app的骨骼

2、合理的信息架构

从用户认知出发 :卡片分类法、让用户自己的认知来组织功能点,具体分为封闭式分类和开放式分类

封闭式分类由产品自身特点设立部分分类;

开放式分类完全由用户自行分类;

划分优先级:明确哪些是最重要的、次要及不重要的.

可以从三个维度来评估需求强弱、使用频率、任务数量、辅助一决策工具、获取最优解.

三、在考虑导航设计时，需要注意一下事项：

1、可达性：

移动应用的导航功能可以说是所有页面最重要的组成部分，因此一定要保证其可达性，并把最关键的要素尽量突出，同时不要影响到内容本身。

一个产品，如果对于任何人而言，都是非常容易掌握、理解并可以用来完成他们的目标的话，那么这个产品就是可达的。一个成功的产品对于任何可能使用者来说都应该是可达的。

2、目的性：

确保导航中的每个按钮要素简单明了，有明确的引导用户点击的目的性。让用户一看就知道是什么意思以及操作结果是什么。但是不要弄得太过花哨，这样会迷糊用户，起到发作用。

3、易于理解：

如果想设计比较高端的导航功能（例如链接图片、允许滑动或其他手势导航，或者访问隐藏菜单），务必在设计过程中前后保持一致，以便用户熟悉你所使用的模式，同时还加入一些额外的信息（例如小箭头、文字或改变颜色或高亮等）来吸引用户的注意力，并以微妙的方式对用户进行引导。不要给用户呈现“看得见摸不着的导航功能”。

4、通用性：

导航功能应当以一定的形式显示与移动应用的各个界面。各个导航模式不一定要完全相同，但其基本结构应当在应用内保持一致，可以根据背景进行小幅度调整。

注：APP的信息结构分层，把主要、最核心、最根本的功能放在第一层级，次要内容放在第二层级甚至更深。然后根据层级关系、结构关系确定导航形式。结合产品的深度和广度来共同探讨一下目前APP界面常见的几种导航形式，并且分析优缺点，从而进一步判断每一种导航形式更适合应用于那种类型APP！

四、三种信息架构

1、多个高频需求

2、单个高频若干个低频

3、单个高频无低频需求

五、常见的导航模式

1、平面导航 : 最常见的标签时导航、可上方、下方但一般都是在下方

平面导航

特点: 可见性好、功能更容易被用户发现,操作性好,底部区域手指操作方便,符合大多数的用户习惯

2、分层导航 : 是展现功能架构的父子级,每个页面都有一个子级、直到抵达终点. 要去往另一个终回到父级,从头选择另一个子级.

分层导航

特点: 结构清晰、逻辑性强、易于理解、帮助用户快捷定位到目标

3、内容驱动导航 : 多见游戏化娱乐型产品,这类具备丰富的多样性

内容驱动

4、抽屉式导航 : 隐藏、收起非核心的操作与功能

特点 : 节省页面空间, 聚焦核心内容, 扩展性好、可容纳很多功能,适应性良好,同事用于PC和移动web

六、导航设计的类型

1、全局性-标签式、跳板式/桌面式、选项卡式、列表式

跳板式/桌面式:

宫格式导航也叫跳板式导航与快速启动版，是一种类似于手机桌面各个应用入口的导航方式。每个入口的信息都是比较独立的，用户进入一个入口后，只处理于此入口相关的内容，如果要处理其他入口内容，必须要先回到入口总界面。将主要入口全部聚合在页面，让用户做出选择。采用这种导航的应用已经越来越少，往往是用在二级页作为内容列表的一种图形化形式呈现，或是作为一系列工具入口的聚合。可以做一级导航以及二级导航也可称为数据入口。

优点：功能扩展性性强可以增加多个入口。

缺点：单项承载信息能力弱，层级深不合适频繁的任务切换。信息互斥，无法给互相通达。只能给用户带来更多的操作步骤。无法让用户在第一时间看到内容，选择压力较大。

宫格式导航适合入口独立互斥，且不需要交叉使用的信息归类。

注：一旦入口需要有所交集，必然导致更多的操作负担，这个时候只能根据产品特性做出        权衡，如果不适合，建议果断拒绝这种方式。

      不建议在app中作为主导航使用，如果非使用不可，请增加跳转的关联性。

跳板式/桌面式

标签式 :

标签式导航，也就是Tab式导航，是IOS平台上公认的最经典的导航模式，市场上80%的应用都在使用，标签式导航关注的是平行空间的展示。

标签栏中可以变形，但不能做导航来使用，而是一个行为召唤按钮，行为召唤按钮是强调某项重要功能的快捷实用，该功能需要是应用最核心且最常用的功能，优先级很高。

优点：适用于多个内容体系，且重要程度相似平级关系，能频繁在不同页面切换，且切换成本              低，只需要一次点击即可。

缺点：占用一定高度空间，且标签数量有限最多5个标签。

注：标签式列表最常用、最不容易出错，请在第一时间考虑他。

结构太过复杂而且不稳定的应用不适合标签式导航。跳转到二级页面和更深层的页面最好不要存在标签导航（当然如果特别需要用户点击的话也可以存在，根据情况来定）。

标签式

选项卡式:

导航在android平台上与ios平台上有不同的规范，规范就不多说了。主要说ios上选项卡的表现，选项卡导航的本质是实现容器内不同视图或内容的切换。目前市场上主要3种形式的选项卡：可分为分段式、固定式、滑动选项卡。

分段选项卡是由两个或两个以上宽度相同的分段组成，正常情况下不会超过4个。在视觉上会有一个很明显的描边按钮。分段选项卡经常作为二级导航，对主导航内容再次分类，即可在顶部导航的下方，也可在顶部导航栏上。

分段导航的缺点是标签之间相互关联，只能点击切换，操作效率较低。

分段式导航

固定选项卡于滑动选项卡，两者都可以直接点击或左右滑动切换选项，且一级和二级导航都能使用。他俩的区别就是滑动选项卡可以有更多选项，直接通过手指滑动导航找分类，适用于相关类别多的应用。

注：选项卡式导航如果存在一个最好不要在存在第二个同级别的导航。

列表式导航:

结构清晰、易于理解、冷静高效、能够帮助用户快速的定位去到对应的界面。这种导航也是一种十分常见的导航模式，纯粹的列表时导航很少见，一般都是搭配着其它的导航来一起使用，大部分都是依附于标签导航之上的，在二次层级上，它们还会将列表分模块进行展示。列表中可以放置图片、标题或者详情文字来展示信息，列表本身是一个传达信息效率很高的载体，因此使用列表的时候要注意每个列表所占的屏幕空间，以及每屏能够显示多少条列表等。

有几种常见的形式列表

分组模式：有多个列表层级组合而成的导航。能很好的解决次要功能非常多的问题。             

标题式列表：一般只显示一行文字有的显示一行文字加一张图片。                                         

内容式列表：主要以内容为主，所以在列表中就会体现出部分内容信息，点击进去就是详情。

注：列表项目可以通过间距、标题等进行分组，形成扩展列表。作为辅助导航来展示二级甚至更深层级的内容每个APP必不可少，但请注意数量与分类。

分别为分组式列表、标题式列表、内容式列表

2、瞬时型 : 抽屉式、下拉菜单式、点聚式

抽屉式:

目的：是带给用户更为沉浸的体验。

特点：阅读为王，点击切换少，专注于主题信息本身。

表现形态：抽屉式导航很符合产品的二八法则，产品中只有20%的功能常用，所以要凸显剩下的80%不常用，因此要隐  藏，隐藏非核心的操作与功能，让用户更专注于核心的功能操作上去。

优点：它不像标签导航一样强调平级关系切换，而是突出重要核心的功能。侧边导航收纳的标              签可以是5个以上，节省屏幕空间。

缺点：无法快速完成导航切换，操作成本高，可见性低。

何种情况下适合使用抽屉式导航：如果应用的功能和内容都在一个页面里边。只是一些低频操  作内容需要显示在其他页面里边，为了让主页面看上去干净美观，可以选择把这些辅助            功能放在抽屉栏里。

注：需要用户有一定参与的信息层级，最好不要放置在抽屉栏中。

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

在大屏时代使用抽屉栏，手势操作显得尤为重要，从屏幕边缘唤出抽屉栏是个很好的选择。

抽屉式导航在android平台上比ios更常使用，由于ios上，抽屉导航没有专门的设计规范，所以使用上比较随意，表现形式也不受拘泥。

主要风格分为三种：1.浮层，导航抽屉处于主页上层。2.叠加式，导航抽屉处于底部。3.嵌入层，导航和主页处于同一层。详细见下图

抽屉式的几种风格

下拉菜单式:

下拉菜单式导航并不常用。下拉菜单和抽屉导航类似，是以突出内容为主的导航模式，一班位于产品顶部。一般情况下，下拉菜单很容易被滑动选项卡取代，且滑动选项卡可以结合手势操作，使用的效率更高，要做下拉菜单式导航要有很明显的优先级区分。

优点：节省屏幕空间

缺点：不适合结合手势，操作负荷大，不能频繁却换功能。

下拉菜单式常用的有两种一种是由顶部滑出，一种是由底部滑出

下拉菜单式

点聚式

是将导航页面分层，无论你达到APP的那个页面，悬浮ICON都是永远悬浮在上面，你依靠悬浮层随时可以去想要去的地方。

注：悬浮icon会遮挡某些页面的操作，在设计的时候应该要考虑进去，无论在那个页面永远为悬浮icon留有位置。它更适应大屏的导航模式，注意不要让它遮挡住某些页面的操作。

点聚式

3、混合型 : 舵式导航——全局导航-底部标签栏+瞬时导航-点聚式 ; 轮播式——全局导航-桌面式+瞬时导航-抽屉式

舵式导航——全局导航-底部标签栏+瞬时导航-点聚式 轮播式——全局导航-桌面式+瞬时导航-抽屉式

区分全局性、瞬时型、混合型导航 : 全局—— 否需要手势操作,展示功能入口 ; 瞬时型——需要点击或者手势 ; 混合型——展示了部分的功能入口,还需要通过点击或者手势展开剩余功能