认识达内从这里开始

网页设计师为了能够让用户在使用产品的过程中能够有更好的产品体验度，通常会根据不同的内容主题来进行一些导航设计。今天，我们就通过案例分析来给大家简单介绍一下，在进行网页设计的过程中，都有哪些比较常见的网页导航设计方法。

希望通过对本文的学习，大家能够在自己工作中有一个清晰的关于导航设计的认识。下面我们就开始今天的主要内容吧。

1、带有流畅动效的下拉导航菜单

下代菜单是UI设计中最常见的设计元素，作为一种扩展性良好的控件，它在被触发之后扩展显示更多的选项，呈现更多的内容。下拉菜单有许多种不同的衍生样式，在导航设计中也很常见。许多传统的导航当中，导航元素的下拉菜单是需要点击触发的，而现在更多的设计师会选择光标悬浮在导航元素上的时候触发，这样对于用户会更加省心省力。

为了确保导航的整洁清晰，如今网页的主要导航类目通常不会太多，控制在4~6个选项，而下拉菜单则用来承载二级导航元素，这样就节省了空间，也让信息层级更加清晰。

这种设计模式对于用户而言并不陌生，浏览起来也颇为方便，对于多层级、大量选项的导航需求而言，它正好可以应对。值得注意的是，光标悬浮触发下拉菜单的时候，展现的动效要足够的微妙，降低用户打开的突兀感，这样会让体验更加优秀。

2、汉堡菜单+侧边栏

汉堡菜单加上弹出式的侧边栏在iOS和Android平台上都是极为常见的导航设计模式。虽然有数据表明，汉堡菜单和默认隐藏的侧边栏导航在打开率上并不如常见的显性导航，但是它在体验上有独特的优势，让整个界面更加简约、整洁，干扰性更小。用户点击汉堡菜单，侧边栏导航从侧面滑出显示，用户可选择他们想要点击的选项。

汉堡菜单和侧边栏的搭配特别适用于响应式的网页设计，例如Android平台的Gmail官方应用，YouTube和Facebook，均是沿用了这样的设计。

隐藏式的侧边栏导航，在很大程度上让用户更加专注于主要的界面内容，让界面更加整洁。虽然打开率不如显性导航，但是在很多情况下，这种隐藏性的设计更符合实际需求。

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

悬浮固定的导航菜单在越来越多的网页设计中出现，当用户在滚动页面向下浏览的时候，悬浮固定导航在页面顶部悬浮不动，随着用户浏览，它们一直都可见，用户无需滚动到顶部就可以点击导航跳转。

目前，悬浮固定导航菜单已经成为常见的导航设计手法，电商、产品类的网站，多会选择这样的导航设计，便于用户快速跳转。这种导航设计的优势在于快速、便捷，用户对于在网站不同的页面间跳转的需求比较大，那么这样的设计能够省去很多麻烦。根据Akamai和#的调研，79%的线上购物的用户，在遭遇糟糕的浏览和导航体验之后，会一去不复返，由此可见，便捷的导航是多么重要。

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

此处我们所说的深度定制的超大导航菜单，更接近选项卡的设计，它们大多分为2个层级，不同的选项被组织到不同的选项卡当中，选项卡中所承载的导航选项相比于下拉菜单更大，设计也更加视觉化，更易于点击选取。有的选项当中甚至会包含文本和说明，便于用户进行选择。

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

超大导航菜单所能容纳的导航条目相对更多、更加视觉化，和开头所说的下拉菜单导航类似，光标悬浮在标签页上的时候，自动显示下面的选项。根据NNGroup的研究，这类导航当中，导航菜单越大，越受欢迎。

这种导航菜单适合对可访问性要求高的网页，对于有视力障碍和进阶用户都更为友好。另外一方面，这种导航还为设计师提供了更多发挥的空间。

5、响应式卡片栅格导航

响应式的设计就不必赘述，但是卡片栅格式的导航无疑是从移动端开始流行的导航模式。在这里，导航选项被设计成为小卡片，置于导航栏的栅格当中，当屏幕尺寸发生改变的时候，导航中的小卡片会随着自适应的栅格而重新排列，以匹配整个布局。这种设计不仅高度可视化，而且可以根据主题风格，进行深度的定制。

【免责声明】：本内容转载于网络，转载目的在于传递最新信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。