谈导航对网页设计的重要性

【摘要】网页中的导航设计不仅要有艺术性，也要有科学性。能够让浏览者在很短的时间里，搜索到自己所需的内容，这是导航的魅力，也是它的职责所在。导航不单是链接，更是一个地图，一个指路标，是设计者创建网站的一种思维，而这种思维是要让浏览者清晰网站中的信息，对其所要搜寻的内容，能在目光所及的地方。

【关键词】网页；导航设计；链接；地图；指路标

导航，是系统里一个非常抽象的概念，如果用户利用导航搜索不到自己所需要的内容，并且这种需求非常急切，需要解决的时候，导航就必须提供一份详尽的类似于地图的搜索方法，让浏览者可以迅速的找到他所需要的内容，如果不能非常有效、快捷的搜索到他所需要的内容，用户就有可能关掉这个浏览器的页面，打开另一个网站去寻找他所寻求的信息。

一、导航栏的作用

首先要引导浏览者查找信息，通过主导航、次级导航以及分类，来便于浏览者快速的找到自己真正所需要的内容，还要让整个网站的目录结构以及链接关系清晰。只有层次结构分明的网站，才便于浏览者的理解。导航栏很容易形成网站的一个地图作用，特别是面包屑导航，它让浏览者了解整个网站的结构，定义整个网站构架，以及网站整个方向的指南。并且合理的导航，可以提高网站的广告价值，增加网站的收益。

二、导航栏的分类

主导航〉次导航〉面包屑导航。它们之间的关系，是逐次递减的关系。主导航是网站中主要的目录导航，比如：淘宝网的主导航通常都会位于网站的首页，是横版的导航，也叫做一级导航，囊括了网站中所有的一级主目录，而次级导航，也叫做二级导航，还有三级或者四级导航，次导航，可能在主页，也可能位于子页面中，通常它是主导航中的一个子线目录，可以起到更加细致划分网站功能的作用，淘宝网的次级导航，是一个商品分类的导航。面包屑导航，就像网站的地图一样，是可以让用户更加清晰明白自己所在的网站位置，不容易迷路，面包屑导航，相对于搜素引擎来说，也是能够清晰网站内部结构关系、层次的，并可以提升浏览者体验以及搜索体验。

三、导航栏的表现形式

1.横排导航

横排导航：指导航的一种形式，在网站中，以横版显示，通常导航都会将越重要的内容，放置得越靠前，在京东网站的首页中，前面三个的，依次是首页、服装城和京东超市，放在最后的则是团购或游戏类，这是按照一个比重来划分的，权重依次降低。其次，导航大多是占据着比较靠前的位置，并能够利用绝佳的位置，去优化网页关键词。但实际上，浏览者在浏览网站导航的真实情况是这样的吗？也未必，越来越多的用户，在浏览导航时，会形成一种跳跃式的习惯，也就出现了类似金箍棒的状态，即是说，两头重要，中间不重要，这也意味着，在横排导航中，最后一个元素的位置会有一个小小的提升。因此一些有经验的网站策划师，往往会把比较重要的位置放在导航的第一位，而次级重要的位置放在导航的最后一位，其他的一些项目，从第二位开始，依次排列，即：最重要内容靠前，最后的部分会提升，这些导航的权重方式都是依照用户的一个阅读习惯来构成。

2.竖排导航

竖排导航，不一定都是规规矩矩竖排排列，可以有多种表现形式，让导航看上去，表现的丰富多彩。

3.异形导航

异形导航：也叫变形导航，经常用在个性化、或者创意类的网站中，没有一个固定的排列形式，不是横排，也不是竖排的权重会根据异形导航形状大小以及阅读的一个习惯来进行排列它的特点是形式多样，富于动感，生动活泼，可直接将异形导航做成欢迎页面。

4.多级混排导航

多级混排导航形式，通常会是以主导航加下拉菜单的形式，鼠标在导航外，看到的是一级导航，而当鼠标移动到一级导航时就会以下拉菜单形式，显示该导航的二级导航，这种导航的优势是，可以节约空间，层次结构富有动感，缺点在：导航的层次每多一级，会使用户对网站搜索的难度成比例递增。还有一种横排导航加面包屑导航的形式，这种导航形式在目前网站中非常多见，比如天猫、京东等网站，用的就是横排导航加面包屑导航。当点击开每个导航的子页面的时候，都可以看到所需要的比较细致的产品分类。面包屑导航，就像网站的地图一样，可以提供整个网站结构的构架以及它的布局，因此导航以这种形式产生的话，不需要占用太多的屏幕以及资源，而越来越精巧的设计，将主导航以及面包屑导航，巧妙的融合在一起，完美的解决了导航中“你在哪？以及你可以去哪里”的两个最基本的问题。

结语

我们每个人都会有上网的经历，但是自己能记忆起，经常访问的网站中，导航里包含有多少个项目？第一个项目是什么？最后一个项目又是什么？每个项目在导航中是如何排列的……结果是，即便经常访问的网站，我们也没办法，将其内容全部记住，站在一个普通用户的角度来看，也就是网站的浏览者，我们真正关心的是，网站中有哪些内容，这些内容都在哪个位置并不会在乎导航是否存在，只有在当前页面下，找不到自己所需要内容的时候，才会向导航寻求帮助，那么这个时候，导航就必须为浏览者提供一份详细的网站的架构层次，帮助浏览者快速学习和了解网站内容和组织方式，从而形成很好的位置感，并提升用户体验。

参考文献：

[1]刘莹编著.《网页设计与网站开发》.上海交通大学出版社

[2]殷辛,段芸,陈逢华.《网页设计》.华中科技大学出版社

[3]李刚.《疯狂HTML5、CSS3讲义》电子工业出版社,201年10月第2版.

[4]黄玮雯.《网页界面设计》.人民邮电出版社,2013年2月.

作者：银霞