网站导航系统的设计应用

赵 爱 涛

(石家庄职业技术学院 信息工程系,河北 石家庄 050081)



网站导航系统的设计应用

赵 爱 涛

(石家庄职业技术学院 信息工程系,河北 石家庄 050081)

网站导航系统的设计应遵循以人为本，直观易操作；与网站内容、风格、结构一致的原则.网站导航系统设计的方法有全局导航、局部导航、文字导航、面包屑导航和搜索引擎式导航.

导航系统；网站；设计

随着网络技术的飞速发展，网站作为信息传递的媒介，已经渗入到人们工作、生活的方方面面.网站提供了导航、文字、图片、声音、动画等多种媒体元素，浏览者通过网站获取所需的各类信息.而导航系统作为网站设计好坏的评价指标，在构建一个成功的网站中扮演着重要的角色.本文就网站导航系统在网站设计中的作用、设计原则和方法进行分析研究.

1 网站中导航系统的重要性

网站信息量巨大，浏览者要想快速高效地获取需要的信息，离不开网站导航.在进入网站后，浏览者需要知道“我在哪，要去哪，怎么去”，而这些问题由网站导航系统来解决.

导航系统在网站中承担着展现信息结构的功能，对网站的规划和布局起着决定性的作用.一个好的导航系统能够改善用户的网站体验，帮助用户定位自己在网站中的位置，知道下一步该去哪里和如何顺利地返回上一页，从而有助于用户制定更好的阅读路线，增进对内容的理解，避免用户在虚拟网络空间里出现迷航的现象.

网站导航系统要实现三个方面的功能：(1)浏览者能从互联网的一个页面跳转到另一个页面，即实现页面跳转.(2)能寻找和定位所需的信息，即实现对网络信息的浏览.(3)提供访问网页定位所需的所有文字、图片等的链接.链接是网站导航设计的关键，通过链接可以体现网站内容的关联性和结构的完整性.

2 网站导航系统的设计原则

(1)以人为本，直观易操作

网站的用户是浏览者，因此，首先必须满足以人为本的基本原则.导航结构设计要简单明了，符合浏览者的浏览习惯，使浏览者能快速进入网站主题内容并定位信息.

设计和制作导航系统时，对于一些行业网站或个性化网站，要考虑特定用户的喜好、文化程度、工作性质等因素，最大程度地满足用户的特定需求.

导航的结构和层次设计越简单，浏览者越能快速访问所需的信息，增强用户浏览信息的体验感，提高网站的服务能力.一般网站导航设计层次多为二到三层，以方便用户寻找.

例如，某介绍玫瑰花的网站导航系统，分两个层次，如图1所示.

图1 玫瑰花网站导航系统层次

网站链接文字、图片设计要醒目，尤其对于首次访问网站的用户，这种直观易操作性可以大大提高用户的体验感，利于网站的发展与推广.

(2) 导航设计要与网站内容、风格、结构一致

首先，网站的内容是设计的依据，是导航设计的灵魂，导航要完整、准确地表达出网站的内容和信息.对网站内容进行分析、归纳、总结、分类，有助于理清导航系统的框架结构，确定导航的设计形式.

其次，根据网站的风格设计不同的导航系统.网站的风格是指网页中所有元素形成的整体形象，能给浏览者的一个综合感受.网站设计中，网站的整体风格及其创意设计非常重要，同时也最难把握，因为没有一个固定的模式可参考，需要制作者不断积累设计经验.

不同的网站，风格是不同的，网站导航的设计也应该是独特的，并通过色彩的搭配，文字效果的设置，图片、动画的应用等来体现.当然风格的设计离不开内容这个灵魂，根据主题内容的不同，风格有活泼型、沉稳型，有轻松的，也有严肃的，形式上有中规中矩的，也有特立独行的.根据网站性质的不同分为企业网站、商业网站、教育科研机构网站、个人网站以及其他类型等,用户种类不同，风格也不同，例如，儿童类网站迪斯尼采用靓丽的颜色、卡通的形象来制作各种导航按钮.

“网站具有多屏、分页、嵌套等特点，统一的网站风格能给浏览者留下深刻的印象.”[1]对同一个网站来说，网站导航系统的布局、文字排版、色彩处理要统一、协调，不能有太大的跳跃，要塑造网站的整体形象，以便于浏览者把握网站的整体风格，也有利于技术实现以及后期的修改和维护.浏览者阅读的习惯是从上到下、从左到右，因此，大部分网站导航一般放置在网页的顶部或左侧，有时还结合右侧和底部导航的方式[2].顶部导航是一种最常用的导航布局方式，位于页面的上方.顶部导航符合浏览者的浏览习惯，便于浏览者对网站结构、内容的了解，适用于任何网站结构类型.左侧导航通常作为局部导航，是主导航的二级或三级栏目导航，通常运用于左右型结构的网站.底部导航主要是主导航一级栏目的文字链接，位于页面底部.当页面较长，出现多屏时，浏览者不必将屏幕滚动回顶部，可以通过底部的文字链接继续访问感兴趣的内容.

再次，根据网站的结构特点设计导航系统.对于小型网站，所有文件都在站点的根目录下，文件不能太多，否则容易造成混乱，没有太多的逻辑结构可言.一般的网站都是采取逻辑性强的树形结构，先是首页，然后是各栏目的分类页面，最后为具体的文章页面.所有的页面都能链接到首页，分类页面之间可以互相链接，不同分类下文章页面之间一般不直接链接，可以通过设置关键字来链接.

3 网站导航系统的设计方法

3.1 全局导航

全局导航即主导航，在网站中以一级栏目的菜单形式出现，位于网页的主要位置顶端或左侧，引导用户对网站进行浏览.网站的类型不同，一级栏目的多少不同，设计风格也不同.例如，“hao123网址大全”，是权威的中文上网导航，收录了音乐、小说、影视、游戏等分类的网址和内容，栏目较多，分类较细.“网易” 推出了门户网站、电子邮箱、在线游戏、在线教育、在线音乐、电子商务等多种服务，主导航栏目也较多，如图2所示.

图2 “网易”的主导航形式

3.2 局部导航

局部导航是对主导航的补充，是网站的二级或者三级栏目，同主导航一起实现网站的架构，完成页面的跳转.它主要位于网页的左侧或右侧，适用于“T”字形或“国”字形的网页框架结构；或采用主导航鼠标经过的下拉菜单形式来实现.

3.3 文字导航

最好使用文字导航，比起图片和flash链接，文字导航能让搜索引擎快速收录.导航系统的链接是搜索引擎收录网站的最重要的内部链接.

3.4 面包屑导航

对于大中型网站，通常使用面包屑导航.面包屑导航的作用是告诉浏览者他们目前在网站中的位置以及如何返回，是通过改变字体的颜色和大小来提示浏览者目前所在的网站位置，并且向浏览者提供历史浏览路径及返回的链接.

面包屑导航可以用于判断页面在整个网站中的位置，架构比较清晰.它直接反映网站的目录结构，可以减少网站内部的“迷航”现象.如图3所示.

图3 面包屑导航样式

面包屑导航的实现方式为：首先，通过最后一个节点标签，提示用户在网站的当前位置，例如图3的“爱情”；其次，整体从左到右是用户浏览到此位置的路径，例如图3“玫瑰花首页>花情花语>爱情>”；最后，除当前页面节点标签外，其他节点标签均可点击链接文字，回到上一级或某级的位置，直至回到访问网站的最初位置，例如网站首页.有了这些标签提示，浏览者就不会在网站的诸多信息中迷失了.

3.5 搜索引擎方式的导航

网站的用户可以按照关键字设计进行信息的搜索.用户在搜索文本框中输入关键词，然后点击搜索按钮，产生可以访问的信息列表，浏览者可以从列表中选择内容并打开内容页面.搜索引擎的关键词搜索是最有效的导航方式，可以直接定位到浏览者的目的页面上.

综合网站导航的设计一般为多种方法相结合，为用户提供全面的服务.导航设计的创意是无限的，任何样式，只要符合导航设计的原则，就可以实现导航的功能.

网站导航系统就像大厦的地基一样，体现网站的基础和架构，是用户浏览网页时重要的引导，在网页设计中占有举足轻重的地位.

[1] 谭岚丹.网站设计中导航系统的艺术性[J].大众文艺,2011(12):80.

[2] 詹晶晶，黄慧琴，刘沛芬.网站导航栏设计的应用心理[J].艺术与设计，2010(12)：62-63.

责任编辑：金 欣

Designing and application of the website navigation system

ZHAO Ai-tao

(Department of Information Technology, Shijiazhuang Vocational Technology Institute, Shijiazhuang, Hebei 050081, China)

This paper expounds the importance of navigation system in website.Site navigation system designing should be man-centered, easy to operate, substantial and characteristic.The designing methods include global, local, text, bread crumbs and search engine navigations.

navigation system; website; design

2015-03-26

赵爱涛(1975-)，女，河北石家庄人，石家庄职业技术学院讲师.

1009-4873(2015)04-0037-03

TP393.092

A