导航设计

用户的心智模型决定了导航栏是用户访问产品或者网站会立刻下意识的去寻找一个组件。导航展现一系列可供选择了操作入口，这也意味着他将引领着用户前往所要找的内容或任务。导航是整个产品的经络，好的导航栏就像一个优秀的交通标识，简明清晰，让人可以更方便的找到目标。

信息架构就是导航的一个根基，导航就是把归纳的信息架构用不同的导航方式来把它转述一遍。一个高质量的导航是让你的产品从一种不错的产品走向卓越的一个必经之路。

设计导航的原则

1. 导航的可用性

导航的可用性首先是一个最基本的要求。经常在网站或者手机上看到一些不合理或者是么不用的导航，他没有把用户带到用户想到达的目的地，而是把他们带到了一个死胡同里。还有的点一个菜单页进入了一个二级页面，返回的不是刚才的页面，不能设计这么不友好的导航。保证导航的可用性是第一条原则，要保持路径的畅通，可以去可以回。所以在设计导航的时候，第一步就就是设计下一级界面都要思考可不可以通过哪种方式让它返回，而且是原路返回，不要跳转到其他地方。

2. 导航一致性

一个产品里面它最重要的标签链接几乎会在每个页面里面显示，那么必须始终保持在相同的位置行使相同的功能。比如说主导航在一级页面是这个样子，当跳转其他的页面他主导航的样式或者位置变了，这就是很不友好的设计。在设计导航的时候保持产品的一致性是第二条原则。一样功能的导航就让他就出现在相同的位置，千万不要对他做任何的变化。

3. 导航的归纳

当你的网站牵涉到大量分类或者是链接的时候，就把它进行打包，这就是梳理大量分类导航的时候所需要的一个方式。注意一点梳理这个产品分类的时候，要从最宽泛的品类逐步梳理到最具体的品类。一个经过精心分类的链接体系，才可以让用户毫不费力的找到他所要找到的内容。而不需要在这个类别里面反复的去寻找。这就是第三条原则，需要合理归纳信息级别，从最宽泛的梳理到最具体的。

4. 导航记录路径（面包屑导航）

在某些类型的产品里面，这种链接的路径记录是非常重要。当用户在页面中来回切换的时候，可能它就需要查看他之前观看过的页面，这就需要面包屑导航。第四条原则，如果你的产品需要记录用户浏览或者路径信息，那么请加入面包屑导航。

5. 导航归纳拆分

第五条原则，和信息架构追寻的原则一样，相似的东西放在一起，尽量把内容型的导航和任务型的导航做一个拆分。

基于内容的导航：通常使用名词作为导航标签，标签具体指向目标事物。

基于任务的导航：通常使用动词或者是动宾短语作为导航标签，标签指向的是具体的动作行为。

那么在分产品导航是基于内容导航还是于任务的导航的时候，首先要明确用户的首要目标，如果用户使用产品是以寻找内容或者是探索事物为目标的，那么它比较适合于内容写的导航为主，比如官网，博客等。如果他是要完成任务的那么就比较适用任务导航为主，比如像租车，买票等。

在设计一个产品的过程中，其实大部分的产品都是任务和内容结合型的产品。那么在设计的时候是将任务型的导航和内容先导航作为的基本分类。其实也不拘于纯粹的是内容导航或者是任务型导航，灵活的使用主次混合的导航，这样才能在每个页面里面导航是取长补短的，不断能够完善整个产品的导航体系。

6. 导航按需设计

产品的首页上面汇集大含量的信息，他分布了主导航，二级导航，以及产品的核心内容和核心功能，这时候需要在首页上规划快捷的入口。设计完成主页的导航方式后，可以针对二界面单独设计它的导航方式，到了三级页面的时需要保证最大的展示区域可以不保留导航，但是要保留返回。所以在设计导航的时候允许创新，但是不要为了创新而创新，一定要符合用户体验的这种创新。如果没有特别好的想法，建议按照用户成熟的心智模型来设计，就是设计普通的导航，符合大众心智模型的导航，这是第六个原则。

7. 导航设计完成后校验

设计完一个产品全部的导航，一定要在每一个页面下面问自己这四个问题。如果你得到了肯定的答复 ，那么恭喜你，你的导航设计就是成功的。

第一个问题，我在哪？我的导航能不能告诉我。

第二个问题，我能去哪儿？我的导航能不能告诉我。

第三个问题，如何返回？这个页面上面是如何返回的。

第四个问题，需不需要路径留痕？在这个页面上面需不需要路径留痕？

导航的主要分类

先看下手机和WEB产品这两个产品它的使用场景区别？

WEB的使用场景是办公室或者是家里。那么手机的app也可以在室外使用，可以随时随地的使用。他们的使用场景是不一样的，尺寸是不一样的，长宽比是不一样的，针对这种情况视觉方式和心智模型是不一样的。比如在上班的时候用电脑去淘宝购物和平时在手机上淘宝购物的时候的心智模型是一定是有差异性的。

底部导航

App：手机它的屏幕空间更小，所以底部导航的方式是不影响整体页面内容的展示的。这种设计比较符合手机端用户这种单手操作的习惯，使用底部导航的样式是在手机最常见的种导航样式。优点是可以很清楚的让用户知道它当前所在的位置，然后可以直接展示出入口的重要信息。

缺点：如果功能入口很多的时候是不可以做成底部导航的样式，底部导航最多放五个导航。

WEB：相对于App来说，WEB使用底部导航的设置了是相对来说比较少。大部分底部导航放一些友情链接一类的东西。网站因为WEB端它的纵向的距离本来就很短，它横向就离比较长。因为网页的展示都是纵向滑动展示，所以如果有比较重要的内容必须到底部才能够看到的时候，那么用户很抓狂的。

顶部导航

是比较符合用户的阅读习惯的，也比较符合WEB的设计的逻辑。所以无论是在WEB还是App，经常会见到这种顶部导航的方式。通常顶部导航会被作为主导航或者是配合主导航的二级导航来使用。绝大部分的WEB产品，主导航都是顶部导航，因为WEB的导航放顶部是一个比较成熟心智模型，它不会影响人们对于网页信息的纵向浏览，而且顶部是浏览的视觉中心，所以WEB做顶部导航是合适的。

汉堡导航

在这移动设备上屏幕的空间是非常珍贵的，它横向空间很少，为了节省空间汉堡包导航或者叫侧抽屉式的设计是比较流行的一种方式。侧屉面板可以使用比较方便的将菜单隐藏到屏幕的边缘里面，并且在用户需要的时候，通过操作来让菜单显示出来。

优点：如果页面中包含大量的菜单选项，就可以放在汉堡导航里面，而且不会影响用户对页面内容的浏览。他的扩展性也很好，他除了可以藏在里面，还可以做纵向的滑动。

缺点：它是一个隐藏的菜单，对于大部分用户来讲隐藏的菜单就是一个不可见的元素。当把导航隐藏起来的时候，就要面对用户有可能找不到导航的风险。

侧边导航

WEB经常使用的是侧边导航，其实它就是一个什么样垂直的导航。他有点像汉堡导航，由于WEB页面空间很大，没有必要把导航隐藏起来。

右侧垂直导航，其实只有在WEB看到。因为大部分的人使用右手，右手操作的区域就是右侧垂直的那片。手机不要在右侧设计导航，也基本没有，因为手机右边设置垂直导航以后，是很容易被误触到的。

列表导航

通常使用在并列级别的，标签特别多的场景。无论是纵向的列表，还是平铺的的图标，都是多标签的导航的一个解决之道。通常在我的，设置等等这页面里面经常会看到列表式的导航方式。图标平铺的更流行，因为可以标签分组，而且会更节省空间，相对更加直观一些。

卡片式导航

这种宫格导航是将主要的入口全部聚合在这个页面上，让用户做出选择。这样的组织方式其实没有办法让用户第一时间看到具体的内容，他只能看到一张图片和一个文本标签。用户可能会有一定的选择压力。所以他往往会用在一个二级页面作为内容列表的一种图形化的方式呈现，或者是作为一系列工具入口的一个聚合。

卡片导航几乎存在产品的所有角落，它比较清晰也直观，简单大气，几乎所有的用户都可以在这种导航下找到他们想要找到的东西。他每一张卡片可以存在一个特定的种类，也可以容纳若干小的分支。这种设计是比较自由而充满延展性的。

它的优点是简约而不简陋，而且它比较清晰明显，能够提高用户的使用效率。

它的缺点是一定要注意卡片的这个图片的色彩搭配。如果太过于花俏或者是不和谐的话，用户很容易产生视觉的疲劳。

舵式导航

因为它的样式很像轮船上指挥在这个船舵。它两侧侧可以是其他的按钮。当页面处于同一层级，它有几块大的内容的时候，可能又需要一个非常重要而且频繁的操作入口，这样就可以使用用舵式导航，而且可以设置比底部导航更多数量的导航入口。他的优点就是需要突出重要而且频繁的操作入口时都可以使用。特别适合于任务型的产品，或者是任务和内容结合型的产品，因为他们有一个很重要高频的任务入口，就特别适合做一个舵式导航的入口放在主导航上。

平时在使用的产品的时候，不同产品它使用了导航方式其实是完全不一样的，大部分的产品也不会使用一种导航方式。那么当一个导航方式满足不了产品的需求的时候，那么就需要搭配其他导航方式来使用。