网站导航设计模式

可靠的导航设计需要帮助用户达成目标，找到内容，提升页面的转化率。设计不合理的导航对于用户体验是灾难性的，下面是小编整理的网站导航设计模式，仅供参考。

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

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

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

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

2、汉堡菜单+侧边栏

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

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

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

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

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

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

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

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

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

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

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

5、响应式卡片栅格导航

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

导航中的幽灵按钮设计

导航设计中的幽灵按钮设计所具有的效果是非常显著的，因此在设计过程中，对于这方面的核心一定要多做关注，其特点在于便捷，因此，我们不论在导航设计过程中采用的是哪一种风格，都应该将按钮按钮设计融入其中，这样能够给用户带来更好的体验，在用户浏览页面过程中会更加便捷，能够有效提升页面粘性。

导航中的汉堡图标设计

是否应用汉堡图标，在导航设计过程中是因设计的网站而异的，，各种大型设备机械生产企业网站，是否加入汉堡图标设计并没有太大的影响，通常情况下为了能够更简洁、更方便，在浏览过程中给用户带来更直观的印象，深圳网站建设公司并不会将其融入导航之中。如果是生产工艺品的企业或是各种民俗产品的企业，慢导航中加入这样的汉堡图标设计是很有必要的。

导航中的无线框纯文字设计

我们在设计过程中也需要关注到无线框纯文字设计问题，这一问题涵盖于多领域不同类型的企业建站之中，在任何一个领域的企业建站中，导航加入无线框纯文字设计都很得当，但是需要注意，在文字类型方面以及占比方面和色调选择方面，应根据所建设的网站类型不同而分别做不同选择，深圳网站建设过程之中充分的考虑到色调对于用户直观感受的影响，因此在这方面展开设计时会考虑到调取大数据参数，之后再根据受众人群特点进行文字外形、色彩的设定。

1.文字导航

尽量使用最普通的HTML文字导航，不要使用图片作为导航链接，更不要使用JS生成导航系统，也不要用Flash做导航。CSS也可以设计出很好的视觉效果，如背景、文字颜色变化、下拉菜单。

最普通的文字链接对搜索引擎来说时阻力最小的爬行通道。导航系统链接是整个网站收录最重要的内部链接。

2.点击距离及扁平化

良好的导航的目标之一是使所有页面与首页点击距离越近越好。权重普通的网站，内页离首页不要超过四五次。通常在链接结构上使网站尽量扁平化。

网站导航系统的安排对减少链接层次至关重要。主导航中出现的页面将处于仅低于首页的层次，所以主导航中页面越多，网站越扁平。但用户体验和页面连接总数都不允许主导航中有太多链接。seo人员需要做好平衡。

3.锚文字包含关键词

导航系统通常是分类页面获得内部链接的最主要来源，数量巨大，其锚文字对页面相关性有很大影响，因此分类名称应尽量使用目标关键词。当然也不能堆积，分类名称以2-4字为宜。

4.面包屑导航

对用户和搜索引擎来说，是判断页面在网站整个结构中的位置的最好方法。正确使用面包屑导航的网站通常都是架构清晰的网站，强烈建议使用。

5.避免页脚堆积

随着seo被更多站长认识，近些年有一种在页脚堆积富含关键字的分类页面链接的倾向。三四年前这种做法还有不错的效果，但是近来搜索引擎比较反感这种做法，常常造成某种形式的惩罚。

第一、使用文字导航

导航栏目使用文字编辑其目的就是为了方便搜索引擎蜘蛛前来抓取，使蜘蛛明白网站的结构及所处的位置。我们都知道图片导航可能看着更漂亮些，但是目前蜘蛛还无法完全识别图片的内容，所以导航最好设计成HTML文本。当然使用文字导航可以搭配一些css来达到所想要的效果，如：下拉或者触碰变色等。

还有一点就是说导航使用文字编辑也可以增加网站的响应速度，这样可以使网页加载更快，像一些图片或者flash导航，需要加载的时间就比较长了。

第二、缩短首页进入内页的距离

其实蜘蛛和用户一样，都不太喜欢点击太多次才看到自己想要的东西，所以我们一般要求用户从首页进入内页不要超过四层，但是随着网站内容的增多，用户进入页面的距离就会增加，蜘蛛也是如此，如果深度太深，就无法去抓取。

所以对于一些内容较多的网站，可能需要点击三次才能到内页，就可以充分利用导航，在导航页面进行合理的分配，通过导航，用户可以在短距离内快速的进入他想要的页面。这样的网站对于用户来说才是最有价值的。

第三、导航栏目布局关键词

无论是网站首页还是其他栏目页，在拥有数量众多的详情页页面时，导航中关于首页和栏目页的链接是获得内链的重要的来源。由于详情页页面一般是比较多的，所以在导航栏目中布局设置关键词，有大量锚文本指向栏目页和首页，所传递的权重也相应较高。

当然这里张工也要提醒下，不要刻意为了做优化而做优化。一般的栏目页围绕首页主关键词而拓展3-5个左右就好了，不要故意的堆关键词密度。包括详情页也是，围绕主词写一些长尾词的就可以，不要一个标题带了好几个关键词。

第四、使用面包屑导航

面包屑是源于童话故事"汉赛尔和格莱特"，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。所以，面包屑导航的作用就是告诉用户他们目前在网站中的位置以及方便用户检索查找网页中的内容。一般的企业网站我们建议做到二级栏目下拉就可以了。