Mia

本文5231字，阅读时间约15分钟~

中国每年有50万的设计毕业生，相比之下，能够进入大厂的寥若晨星。但所有投身于设计的设计师，都有一颗渴望成长的心。《体验设计师入门实战课程》是vivo VMIC UED 为新入职设计师量身打造的专业成长课程，是UED全体讲师的结晶。现在，我们将这套课程整理成文章发表出来，希望给选择并从事设计行业的你一点成长的力量。感兴趣的小伙伴记得关注我们VMIC UED的公众号，和我们一起共成长~

前言

从0到1搭建新页面时，面对许多功能和信息，我们该怎样帮助用户找到目标功能和内容？有多少导航方式可以选择？今天带大家了解导航系统的设计，让用户使用我们的产品不迷路～

🌰举个例子：当界面上的导航组件单独拿出来时，我们无法理解这些组件之间是否存在联系。但当它们被放到页面对应位置上时，就能看出这是在哪一个页面，以及页面中包含哪些子模块。所以，这些导航组件共同完成了该模块的导航任务，组成了一个局部导航系统。

▲ 导航组件&局部导航系统案例

2、导航系统的分类

▲ 全局导航&局部导航案例

▲ 辅助导航案例

▲ 内联导航案例

▲ 友好导航案例

远程导航：所谓远程导航是指不包含在产品结构中，以独立的方式存在产品内，通常表现为网站地图、索引表等。

▲ 远程导航案例

三、导航系统设计

导航架构：确定路通往的方向，让信息间的关系符合用户认知、页面跳转路径长短合理。

导航框架：确定路具体修在什么位置，在界面寻找合适的位置放置导航。

导航组件：修马路还是修人行道？挑选合适的、符合用户习惯的组件来承载导航功能。

导航信息：装好路标和指示牌，友好地告诉用户他在哪里，可以去哪里，怎么走。

▲ 导航系统设计内容拆解

1、导航架构

以ios设计规范为例，导航架构可分为层级式导航、扁平式导航、内容驱动或体验驱动导航。 

层级式导航架构：在到达目标界面前，每个界面仅做一个选择。如果要去另一个目标界面，必须回溯自己的脚步，或者从头开始做不同的选择，呈现了产品信息的包含关系及信息的深度。 

扁平式导航架构：允许用户在同一层级的多个内容类别之间进行切换，它主要呈现的是产品信息的广度。

内容驱动或体验驱动导航架构：在内容中自由移动，或者内容本身可以定义导航。游戏、书籍和其他沉浸式应用程序通常使用这种导航形式。

在实际的产品设计中，很少有整个产品仅包含一种类型的导航结构的情况，一般会将前三种类型的导航结构进行合理的混合，让用户无论如何操作，都能自由地在信息架构中穿行。同时，在设计时还需要注意导航系统的深度及广度，避免过深和过广。

2、导航框架

导航的框架和产品性质及用户使用场景息息相关，对于不同的产品类型，导航框架也会有所不同，同一产品下的不同模块，也会有不同的导航布局。

▲ 内容&社交类产品导航框架案例

工具类产品：核心功能固化，导航架构扁平，用户目标明确，只需要用户快速找到目标功能，常使用列表导航及宫格导航，直接把核心功能按照优先级铺在首⻚上。

游戏类产品：导航本身就是玩法的一部分，要给用户便捷的入口同时，不能遮挡游戏主界面，因此导航很多时候会环绕游戏主界面的四周，甚至导航本身成为了场景的一部分。

▲ 游戏类产品导航框架案例

▲ 阅读&长视频类产品导航框架案例

菜单

使用场景：当产品内包含的内容/功能类型较多且在层级上比较扁平，无明显上下级关系，同时用户需要在这些类别中快速切换时使用。

▲ 标签式导航案例

侧面标签导航

简介：放置在侧面的标签导航

使用场景：多运用在筛选、分类页，作为局部导航使用

✅  优点 ：拓展性强，能容纳多个标签

❌  缺点 ：占用面积大，标签多时阅读困难

舵式导航

简介：样式上突出中间的功能，像一个舵

使用场景：需要突出或聚合重要且频繁操作的入口时使用该样式

✅  优点 ：相较于传统标签式导航，容纳了更多功能，重点更突出

❌  缺点 ：多一步操作，新手有一定学习成本

▲ 舵式导航案例

筛选器

简介：聚合大量标签信息

使用场景：用户需要通过选择多个维度的大量标签来筛选目标内容/功能时

✅  优点 ：能够容纳大量标签

❌  缺点 ：标签多、热区小，用户寻找和点选对应标签有一定难度

▲ 筛选器案例

页头

简介：⻚头是用来放置⻚面的名称的，目的是告诉用户现在所在的⻚面是哪，与整个网⻚是什么关系，上面也可以放置面包屑导航。

位置：一般位于顶部菜单的下方，内容区域的上方。

使用场景：一般适用于PC端，需要明确告知用户处于网站的哪个⻚面时使用。 

导航栏

简介：是用来帮助用户定位、导航、操作的基础组件; 告知用户当前所在位置，连通⻚面跳转路径，同时还承载了针对当前⻚面全局性的操作。

位置：⻚面顶部

使用场景：APP全局适用

 ▲ 导航栏案例

💡注意事项：

1、不可放置过多操作按钮。应保证每个按钮有足够大的点击热区、文字按钮不重叠；

2、不可放置面包屑导航，如果担心用户迷失，建议让导航架构更加扁平。可考虑使用标签式导航；

3、使用标准的返回控件。

面包屑

简介：显示网站的层级结构，告知用户当前所在位置。由于APP端的操作空间有限，且产品的信息结构不会有PC复杂，一般情况下APP不会使用面包屑控件。

位置：一般位于⻚头中。

💡注意事项：

1、面包屑的第一项应该链接首页；

2、当前页一定是面包屑的最后一项；

3、面包屑的每一项都可以放链接，除了最后一项（当前页），因为用户已经身处当前页；

4、实际使用时，一级页面可以考虑隐藏面包屑导航。

汉堡（抽屉）导航 

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

位置: 入口位于左上方，从左侧拉出抽屉；或入口在右上方，从右侧拉出抽屉。

使用场景：

1、收纳用户不常用的、或不属于当前⻚面所在的层级的常用功能，作为辅助导航使用；

2、需要用户专注于内容，需要更多展示空间时使用；

3、不适合频繁需要切换导航的应用。

  ▲ 汉堡（抽屉）导航案例

💡注意事项：尽管下拉菜单可以节省空间，但功能被收纳起来，用户寻找不方便，需要一定学习成本。

分页

使用场景：PC端列表，内容过长时采用分页的形式分割，每次只加载一个页面。

在APP的操作习惯中，常常不使用传统的分页导航，而是采用其他方法来浏览数据，比较常见的是内容流的形式，用户上滑会不断加载地更多内容，如果实在要寻找很早之前的内容，可通过筛选器来筛选。

🌰举个例子：在阅读类APP中，不可避免会有翻⻚的用户需求，但是，精确点击⻚数的操作对于APP来说太容易误触，因此阅读类APP中的分⻚器使用了slider的形式，滑动过程中会提示⻚数，避免错误点击。 

  ▲ slider形式分页案例

步骤条

使用场景:

1、在任务步骤比较离散，完成任务需要比较⻓的等待时间的时候，用来显示任务进度，例如：查询转账进度。

2、当任务步骤复杂或者存在先后关系时，将其分解成一系列步骤，引导用户完成。例如:用户注册新账号。       

💡注意事项：

1、任务流程本身并不复杂的时候，尽量不要使用，避免弄巧成拙，画蛇添足；

2、每一步骤都需定义清楚，明确用户当前所在的进度节点，清晰展现此刻具体步骤及状态；

3、及时对状态进行追踪&反馈，避免用户不知道自己操作是否生效，混淆认知；

4、如果任务是连续和短暂的，应该使用进度条来显示，例如：打开⻚面。

固钉

使用场景：当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。

位置：常用于侧边菜单和按钮组合。

  ▲ 固钉案例

悬浮球（触点）导航

▲ 悬浮球导航案例 

链接

 ▲ 链接案例

宫格式导航

简介：宫格式导航的最主要特点是利用网格布局将主要入口全部集中在页面之上，各项之间等同重要，常见形式有icon+文字、图片+文字的瓷片。

使用场景：一般适用于功能模版之间相互独立，没有明显的优先级之分，且用户不需要在不同的功能模版之间进行频繁跳转的情况。

列表式导航

简介：在列表中陈列产品中的核心功能

使用场景：常⻅于工具类产品、设置⻚、APP中的我的⻚这种需要高效陈列功能、工具的场景。

（* PC由于展示空间较大，很少单纯的列表导航，一般会在左侧使用侧边菜单，右侧直接展示导航内的内容。）

💡注意事项：

1、列表式导航符合用户F型页面浏览习惯，传递信息效率很高，但同时它纵向占用面积大，所以在设计时需要注意所占的屏幕空间，以及每屏能显示多少条选项。

索引表

简介：一个陈列了产品中，或产品某个模块中所有内容类别的⻚面。

使用场景：当产品中含有大量的内容类型、主题和分类时，可以使用索引表。

  ▲ 索引表导航案例

网站地图

简介：展示网站中的所有关键⻚面，方便用户快速前往。

使用场景：一般是用在一些产品结构复杂的网站中，很少应用在APP中。

  ▲ 网站地图案例

4、导航的信息设计

导航上的信息包含哪些呢？以vivo官网首页为例，该页面的导航中包含了特殊提示、图形、文案、状态等。

导航信息设计的要点：

1、准确传达产品的信息层级。比如一级菜单上有展开按钮，二级菜单前无icon，视觉上体现出父子级的关系。

▲ 符合不同用户习惯的导航案例

优秀的导航系统设计，能够合理完美地传达产品的功能，快速引导用户使用，而又不会干扰和困扰用户的选择。在实际的设计中，根据产品的功能特性搭建不同的导航系统。同时，产品的迭代发展和变化，也会导致导航的设计产生变化，需要依据用户属性和使用场景进行灵活调整。

感谢你的阅读，希望对你的设计工作有所帮助～