可靠的导航设计需要帮助用户达成目标，提升页面的转化率

导航设计千变万化，但能同时兼顾易用性、易用性和足够舒适体验的导航模式并不多。可靠的导航设计需要帮助用户实现目标、查找内容并增加页面转化率。设计不合理的导航对用户体验是灾难性的。最直接的影响是用户无法再快速轻松地找到想要的页面和内容，间接影响网站的转化率和用户的留存率。

精心设计的 UI 始于精心设计的导航。导航是用户从A点到B点的重要向导。在设计过程中，设计师不仅要保证路标足够清晰，还要让导航过程足够流畅和流畅。在整个设计过程中，导航设计应该具有一定的优先性，因为它不仅在整个网页的信息架构中起着近乎骨架的作用，而且在整个体验设计中也起着重要的作用。在原型制作阶段，导航的设计应该已经打磨清晰，需要的设计材料要集中，以确保从开发之初就可以完成导航。

在众多导航设计中，不乏经过反复设计和验证的优秀设计模式。在今天的文章中，我将选择其中最突出的 5 个供大家参考。

1、具有平滑运动的下拉导航菜单

下一代菜单是UI设计中最常见的设计元素，作为一个扩展性很好的控件，被触发后展开显示更多选项和呈现更多内容。下拉菜单有许多不同的派生样式，在导航设计中也很常见。在很多传统导航中，导航元素的下拉菜单需要点击触发，但现在更多的设计师选择在光标悬停在导航元素上时触发，这样可以省去用户的省心和省力。

为了保证导航的干净明了，现在网页的主要导航类别通常不会太多，控制在4~6个选项中导航样式的自定义，并使用下拉菜单承载次要导航元素，节省了节省空间，让信息层次更清晰。

这种设计模式对用户来说并不陌生，导航起来也相当方便。非常适合多层次和大量选项的导航需求。值得注意的是，当光标悬停触发下拉菜单时，显示的动态效果应该足够微妙导航样式的自定义，以减少用户打开的突兀感，让体验更加出色。

2、汉堡菜单+侧边栏

iOS 上的汉堡菜单加弹出侧边栏，是平台上非常常见的导航设计模式。虽然有数据显示，汉堡菜单和默认隐藏侧边栏导航的打开率不如常见的显式导航，但在体验上却有着得天独厚的优势，让整个界面更加简洁、干净、不那么突兀。用户点击汉堡菜单，侧边栏导航从侧面滑出，用户选择想要点击的选项。

汉堡菜单和侧边栏的结合特别适合响应式网页设计，比如平台的官方Gmail应用，和，都遵循这种设计。

隐藏的侧边栏导航，在很大程度上可以让用户更加专注于主界面内容，让界面更干净。虽然打开率不如显式导航，但很多时候这种隐藏式的设计更符合实际需求。

3、浮动固定网页导航菜单

浮动固定导航菜单在越来越多的网页设计中出现，当用户滚动页面向下浏览时，浮动固定导航悬停在页面顶部，随着用户浏览，它们始终可见，并且用户无需滚动到顶部即可点击导航跳转。

目前，浮动的固定导航菜单已经成为一种常见的导航设计方式。电商和产品网站往往会选择这样的导航设计，方便用户快速跳转。这种导航设计的优点是快捷方便，用户在网站不同页面之间跳转的需求比较大，所以这种设计可以省去很多麻烦。根据 and 进行的研究，79% 的在线购物用户在遇到糟糕的浏览和导航体验后将永远不会返回。由此可见便捷导航的重要性。

4、深度定制的大型导航菜单

这里我们称之为深度定制的大导航菜单，更贴近标签的设计，它们大多分为两个层次，不同的选项被组织到不同的标签中。选项卡中携带的导航选项比下拉菜单更大，设计更直观，更易于点击选择。有些选项甚至包括文字和说明，以便用户更轻松地选择。

这个超大导航菜单中的子选项尺寸够大，视觉设计也够突出，可见性很强，用户很难选错。

超大的导航菜单可以容纳更多的导航项，更直观。与开头提到的下拉菜单导航类似，当光标悬停在选项卡上时，会自动显示以下选项。根据研究，导航菜单越大，越受欢迎。

此导航菜单适用于可访问性要求较高的页面，对视障和高级用户都更加友好。另一方面，这种导航方式也为设计师提供了更多的发挥空间。

5、响应式卡片网格导航

响应式设计无需赘述，但卡片网格格式的导航无疑是来自移动端的流行导航模式。在这里，导航选项设计为小卡片，放置在导航栏的网格中。当屏幕尺寸发生变化时，导航中的小卡片会用自适应网格重新排列，以匹配整个布局。这样的设计不仅视觉化程度高，还可以根据主题风格深度定制。

在这类导航中，每个选项不仅方便光标点击，也更适合移动端的手指点击。可以说是跨平台响应式设计的首选。目前很多网站都采用这种导航设计，比如和知名的音乐服务。