网站设计导航常见的几种设计样式

导航对于一个网站来说，起到重要的引导作用。一个优秀的导航设计可以让用户快速的找到所需 ，让用户清晰明了的了解到网站的结构框架，起到重要的指引作用。下面跟大家分享下常用的几种网页导航形式：

1、顶部导航

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

顶部导航设计的样式也比较多，主要是跟logo、登陆注册、搜索框搭配组合成多种效果。顶部导航的设计成熟稳重，比较中规中矩，但不容易出现太大的问题，所以使用率也是比较广的。熟悉我的人都知道我用蝉知在做网站，下图就是蝉知系统后台界面中头部导航的定义，可做多种组合在前台显示效果。

2、侧边导航

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

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

3、底部导航

底部导航应用性不是很广，比较长出现在一些活动或个性化的网站当中。其实底部导航被广泛使用的并不是在pc端中，而是在移动端。故而有很多网站在设计的时候首屏导航会放在底部，到第二屏之后导航就会固定到顶部

4、汉堡包式导航

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

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

5、滚动式导航

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

水平式滚动

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

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

垂直式滚动

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

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