在APP开发或网站开发中常见的导航设计

导航是我们在APP开发或网站开发中不可缺少的元素，导航的设计有很多，如何选择使用哪种类型的导航菜单，需要从具体产品本身的特点来看。下面对于一些常见的导航样式，我们总结了一些各种导航的优缺点，可以让产品设计师在设计导航时作为一些参考。

 

一、菜单选择

将导航收纳在一个选择菜单的控件当中是一个不错的方式。它避免了导航置顶所占用的屏幕空间。

优点：

腾出了足够的空间：一个选择菜单无论是在横向或纵向上都特别省空间 符合用户习惯：相比置底的方式，用户更习惯导航被放置在页面头部 容易辨认：下拉菜单的控件样式十分显眼，及其容易发现 支持本地化的交互方式：由于采用标准控件，使得操作十分本地化，这种本地化是指对设备自身属性的支持，比如，在触摸设备上能够通过点击操作，而在轨迹球上支持滚动操作;

缺点：

样式不统一：不同浏览器会呈现不同样式的下拉菜单 可能会让用户困惑：大部分用户只在填写表单时才会看见下拉菜单，而将下拉菜单用作导航，担心用户一下子无法理解 下拉菜单内容的处理方式比较奇怪：因为在下拉菜单中，子项目会自动缩进，这样虽然可用，但从视觉上看十分混乱; 可能会依赖浏览器调用 JavaScript

 

二、开关

开关的实现方式类似页脚锚点，但不是点击跳转至页脚，而是点击后将菜单区域滑动展开。同样也是比较容易实现的设计模式。

优点：

易于理解：相较于页脚锚点突然间的跳转，开关这种是位置不变的交互方式更容易让用户接受 交互更优雅(相比跳转而言) 拓展性强：你唯一要做的就是在PC端隐藏开关，在适当的断点处显示它，这一切的一切都能通过 CSS 来实现。

缺点：

动画可能不够平滑：Android 对于动画的支持一直不好，因此，可能得到你想要的效果 非常依赖 JavaScript：正因为打开开关的动画需要 JavaScript 来实现，所以它的兼容性不太好(作者的黑莓设备就不支持);

 

三、侧滑导航

侧滑是在 Facebook 的大力推广下流行起来的。之所以叫抽屉源于它的交互动效，当点击菜单按钮后，导航模块会像抽屉一样从页面边缘滑动出现。

优点：

空间充裕：因为从边缘滑出，这些内容被理解为在底层或屏幕外的无限区域内 好看：简洁就是美，而且动画效果惊艳。

缺点：

小众：与其他简单的设计模式比起来，从侧面滑动展开导航栏的效果需要若干复杂的动画来实现，这样就将一些低端设备挡在门口。因此，如果你的项目是面向大众而设计的，需要谨慎。 适配性不好： 这种模式仅适合移动设备，在大屏幕上的表现并不好(也没有必要)。 可能存在迷惑：当我(作者)第一次看到 Facebook 采用这种设计时，我还以为页面出错了呢!在屏幕右侧露出一些信息对于我本人而言还是很奇怪的(纯属作者个人看法)

 

四、只在页脚放置导航

只在页脚放置导航和页脚锚点类似，只是它不在页眉放置锚点。这种模式的理念是内容优先、导航其次。 这种方式需要用户将页面滑动至底部才能看见导航

优点： 容易实现 兼容性(无需 JavaScript) CSS 改动小：由于采用了绝对或固定位置，将底部导航移到大屏幕的顶部简直太容易了

缺点： 难以发现：无论在大屏或小屏上都很难发现页脚会有导航; 难以使用：移动端用户需要不断滚动页面至底部，才能使用页脚导航，十分不便