超实用！网站导航栏设计方法总结

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

一、顶部导航

 

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

 

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

顶部导航的设计成熟稳重，比较中规中矩，但不容易出现太大的问题，因此使用率也是比较广的。熟悉个人人都知道我用蝉知在作网站，下图就是蝉知系统后台界面中头部导航的定义，可作多种组合在前台显示效果。

 

 

二、侧边导航

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

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

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

 

 

三、底部导航

 

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

 

 

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

 

 

故而有不少网站在设计的时候首屏导航会放在底部，到第二屏以后导航就会固定到顶部，举个例子：forh健身房体育运动网站。

 

四、汉堡包式导航

 

汉堡式导航其实跟底部导航同样，比较常出现于移动端。但如今很多的pc端也愈来愈喜欢用汉堡包式的导航设计。这样的设计比较节约空间，至关于将导航作成一个隐藏式的设计或是弹出式的设计，具备设计感。

 

STUDIO JT韩国设计工做室网站的汉堡包式导航就具备必定的设计感。

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

五、滚动式导航

 

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

 

水平式滚动

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

 

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

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

垂直式滚动

垂直式的滚动在html5网页中运用普遍，不少设计师很喜欢用这样的设计，将一些动画特效和垂直式滚动导航相结合，能够达到一种新的视觉效果。一块儿看看DENSO Brand site的官网，里面结合了不少特效。

 

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

 

 

上面介绍了导航常见的几种设计样式，咱们再来讲说在设计导航前应该作好什么工做：

 

一、准备工做：整理导航结构内容。
网站头部经常包括的内容是：标志、导航、搜索框、语言、登录注册、口号、400电话这些内容。这么多内容不可能所有放置在网站当中，因此咱们在设计网站前须要规划好这些内容，适当的作一些取舍。

二、分析网站风格，肯定导航的具体风格。
在肯定网站导航的构成内容以后，咱们能够将这些信息列出，分析网站的总体风格和最佳的用户体验，肯定好导航的表现形式。

三、设计方案
在肯定好导航的表现形式是作顶部固定导航仍是底部固定导航以后，咱们须要将确认好的导航内容进行组合排列设计。选出最优的一款设计方案。
在设计的过程当中，咱们须要听从用户体验为上的设计原则，在保证内容可读的状况下，再去保证界面设计的最优。

相信一个好的导航是整个网站成功的重要一步，设计师根据不一样网站的须要设计不一样的导航，而要作到这一步也并不是易事，学海无涯，设计师们一块儿加油吧。