网站导航栏设计是网站建设的重要一步

网站导航栏如何设计，众所周知，当用户进入网站时，导航栏设计就相当于用户的一个指引牌，用户进入你的网站最先看到的便是导航栏。快速从导航栏上找到主要信息，指引用户从网站上何去何从，可见，导航栏是用户最先关注的地方，一个网站想要成功吸引住用户并且在同行中脱颖而出，设计好网站导航栏至关重要。

网站如果没有一个有效的导航，用户在网站上容易迷路，那么他们也会来匆匆去匆匆，网站再好的内容也来不及展示，最后导致大量用户的流失。然而，网站导航能够起到很好的指引作用，设计一个有魅力的导航还能留住用户浏览更多的内容信息，带给用户良好的体验。怎样设计导航才能让网站建设更有特色呢？可以从以下几个方面去考虑导航的设计。

导航栏设计的基本规则：

• 网页导航栏应该简单易懂
• 导航栏结构布局应该清晰完整
• 导航栏设计应保持一致性与连贯性
• 导航栏应该保持链接的有效性

导航模式

常见的导航模式有很多，例如顶部水平横栏式，垂直导航栏，侧边固定式，滑出或者弹出窗口导航等，通常网站是根据所要展示的内容要点来选择不同的导航。小编例举几种导航模式进行详细解说。

1、当网站内容相对较少时，选择网站水平式的导航相对来说比较方便，能够突出重点内容，且简单清晰，又不至于显得页面太空荡，对于某个大类的信息还可以通过下拉菜单的方式进行展示，归类明确。

2、当网站内容相对较多时，一般采用固定式或者抽屉式的导航，这样在用户浏览网站时，导航就想网站目录一样，从最大内容标题细分到各个详细内容页的标题，用户浏览时不管跳转到哪个网页，都可以通过导航目录快速回到目标信息上继续浏览，还可节省网页的位置资源。

3、当网站内容在网页显示过长的时，用户习惯用鼠标无限去滚动网站内容，以便更加快速加载下面的内容，这时网站适合采用垂直式的导航，方便用户在浏览内容时导航信息始终保持在一个位置可以被快速找到。

导航内容

网站的导航内容是对整个网站想要展示的信息的总结，首先要遵循的是导航栏目标题要与对应的详细页面相符合，才不会导致用户认为信息不一致产生不信任的后果。当然，标题总结词要精简，注意网站小内容最好不要以导航的总标题形式出现，可通过细分的下拉菜单，或者以更多形式的小菜单栏里出现。

导航细节

大家有没有注意到，很多网站在内容过多时，用户往下滚动内容过长，如果用户想要快速回到导航上面，就会浪费部分时间往上滚动内容，对于缺乏耐心的客户来说，若不是内容确实吸引人，那么他们很有可能就此结束对网站的浏览，所以一般对于这种导航的设置，还要考虑一个细节，通常在内容旁边设置一个“回到顶部”的标志，以便用户快速到达头部的导航位置。

导航创意

千篇一律的导航形式，用户早已习惯，如果在网站建设时将用户最先注意到的导航加点创意，那么是否能给网站一个画龙点睛的作用呢？事实是这样的，导航在指引用户搜寻内容时，还能改变用户浏览网站的心情，浏览网站也像一场旅行，有创意的导航栏让用户欣赏起来也会更加愉悦，增加对网站的兴趣。例如，采用别致的图标式导航，情景式导航等。

网站导航栏设计方法总结

顶部导航

顶部导航被广泛应用在各个领域的网站当中，这类导航可以一目了然的让用户迅速寻找到所需。顶部导航这样的设计形式保守但目的性强，可以确保组织结构的可靠和降低用户寻找的时间成本。但这类导航有个缺点，首页内容过多需要滚屏的时候，用户需要滚动到顶部再去切换导航内容。所以现在很多顶部设计的导航会做一个效果，将导航固定在顶部导航，这样减少了用户的使用成本。

顶部导航设计的样式也比较多，主要是跟 logo、登陆注册、搜索框搭配组合成多种效果，具体可见下图：

顶部导航的设计成熟稳重，比较中规中矩，但不容易出现太大的问题，所以使用率也是比较广的。

侧边导航

侧边栏导航的设计形式比较多样，也可以有多表现形式，可动可静，可大可小，比较个性化。固定的侧边栏导航设计不是很建议，特别是对于宽度大的侧边栏导航，这样的设计会影响整个网页界面的宽度。设计师可以考虑做成侧边栏以滑动方式展现，在节约网站空间的同时也显得更加简约。

侧边栏导航的设计需要注意的是导航栏目的宽度问题，若导航栏中字体过长，在展示上会存在一定的问题，哪怕做成滑动展示的形式也不能很好的得以解决问题。结构复制的网站不适用这类导航，且侧边栏的二级导航栏目不也宜多，所以这类导航大部分适用于一些设计师或个人官网。当然，也有一些结构简单的网站会采用这类导航。

以下这个 the HOUSE 时尚服饰官网将侧边栏的内容精简做成一个元素放在侧边，这样看起来是不突兀的，不会占用空间，相反还起到一定的装饰作用。

底部导航

底部导航应用性不是很广，比较长出现在一些活动或个性化的网站当中。其实底部导航被广泛使用的并不是在 pc 端中，而是在移动端。

在 pc 端中采用底部导航的形式，一般都是采用固定的方式，这类导航可以减少用户的使用成本，但对于结构复杂的网站，有二级或三级导航的网站就不是很合适。其次，将导航放置底部，对于用户的使用习惯来说不是特别的好，用户的眼睛都是从上到下从做往右浏览的，这样的设计比较挑战用户的使用习惯。

故而有很多网站在设计的时候首屏导航会放在底部，到第二屏之后导航就会固定到顶部，举个例子：

汉堡包式导航

汉堡式导航其实跟底部导航一样，比较常出现于移动端。但现在不少的 pc 端也越来越喜欢用汉堡包式的导航设计。这样的设计比较节约空间，相当于将导航做成一个隐藏式的设计或是弹出式的设计，具有设计感。STUDIO JT 韩国设计工作室网站的汉堡包式导航就具有一定的设计感。

虽然汉堡包式导航的设计方式可以很多样，也可以很个性。但对于一部分用户而言，汉堡包式导航其实并不是那么直观，特别是用户对导航结构不清晰的情况下。设计师在设计这类导航的时候还是要斟酌下。

滚动式导航

滚动式导航分水平滚动和垂直式滚动。

水平式滚动就是内容呈左右水平方向滚动的，当用户第一次遇到这样类型网站的时候，体验感会比较差，因为它物理和视觉运动方向与常规的纵向滚动不同，而且当你使用鼠标滚轮滚动的时候，它的左右水平滚动会让用户产生交互上的错位感，这样的感受其实并不是特别友好。所以这样的网站其实比较少见，但也有及其少部分做得好的。

来看看 Costume National Scents 官网的界面效果：

其实为了不让用户在水平滚动的体验上太差，在界面设计的时候可以加入一个向左或向右的箭头指示，让用户有个心理暗示，可以减少突兀感。

垂直式的滚动在 html5 网页中运用广泛，很多设计师很喜欢用这样的设计，将一些动画特效和垂直式滚动导航相结合，可以达到一种新的视觉效果。一起看看 DENSO Brand site 的官网，里面结合了很多特效。

以上介绍的这么多种导航方式，各有利弊，但无论哪一种，导航既然是导航，就应该起到为用户快速便捷找到所需的作用，提高网站的易用性和易操作性，并不是花哨的导航就是好的，用户往往喜欢简单醒目的。这才是导航的设计原则！

网站导航栏在网站建设中占有举足重轻的地位，一个好的网站导航设计是整个网站成功的重要一步，因此针对不同网站以及内容展示的需要，做好这一步是不容忽视的。