网站导航系统用来引导客户完成特定的指令。网站导航设计需要传达出导航元素与其所包含内容之间的关系，导航提供了客户在网站内容之间跳转的方法，几种常见的导航形式有：全局导航、局部导航、面包屑、标签、按钮、图标等形式。

1.菜单

根据网站的信息体系层级划分，全局导航为一级菜单，局部导航为二级、三级或更深层次菜单。表现形式有：文本导航、图片导航、Tab导航、浮出菜单、垂直菜单。

文本导航是由一行有间隔的超文本组成，简洁有余，美观不足；

图片导航通过JavaScript和CSS可以展示每个导航项，当用户光标不在其上的状态、滑入其上的状态、单击时的状态、已链接的状态等与用户交互的反应；

Tab导航一般是由文本和背景图像构成，通过CSS背景图像能够根据文本内容的多少而延伸，用户滑入其上或单击的导航比其他导航有明显的靠前、突出感；

根据需要展示的信息的多少，浮出菜单分为整个页面链接跳转和局部页面信息更新两种形式，浮出菜单最初只显示一级菜单项，当用户滑入或单击某导航时，其下或其右展开此项的次级菜单，优点是节省页面空间，缺点是次级项目不够一目了然，用户在进行选择时容易误操作；

对于从左向右的阅读语系，垂直菜单一般放置在页面左侧作为全局或局部导航，放置在右侧则通常为辅助导航或友情链接。

2.链接文本

链接文本一般的显示状态与普通文本不同。如果普通正文设置为没有下划线、颜色为“A”，链接文本则有下划线，颜色为“B”，当鼠标滑过，链接文本颜色改变、背景色改变，去除下划线，同时出现小手光标。如果在文本旁边设计具有明显指示链接意图的小动画或图标更能使用户认识到这是一个有链接的文本。短小的链接文本有时不能清楚地解释，这时，最好为此文本设置Alt说明性提示文字功能，即当鼠标滑过时，弹出解释说明其链接跳转后页面的主要内容。

当链接文本作为导航标题时，通常会把文本加大、加粗或加宽，突出文本颜色或其与背景色的反差，有时，也为标题文本设置浮雕或蚀刻效果，增强信息组织方式的表现力和可交互性。视觉效果明确的导航标题使用户知道这是可以被点击并展开详细深入内容的。

3.按钮

在任务流程、应用程序、表单中，点击按钮可以执行相应操作。与链接文本不同，链接文本一般会用来实现从一个页面到另一个页面的跳转，展示不同的信息；而按钮常用来实现一个操作行为，一个事务命令。网页上有三种形式的按钮：图像按钮、HTML按钮、flash按钮。

4.面包屑导航

面包屑导航系统一般用大于符号、向右箭头或者竖线表示信息层级之间的递进关系。最后一个表示当前页面主要内容标题的文字通常会加粗、加大显示，有些页面也因此省略掉页面标题文字。面包屑导航系统一般放置于整个页面的顶端，或者放置于主广告条、全局导航之下，页面内容之上。

需要注意的是，为了不让面包屑导航影响主要导航，其表现力要弱于主导航。

5.标签和卡片堆

标签和卡片堆有类似的视觉效果。把同类的不同栏目组织起来，栏目标签整齐排列，当光标滑过或单击某个栏目标签时，相应的栏目标签靠前突出，同时显示此栏目的内容。

标签常用来比喻页面中主导航栏目的显示效果与内容切换；卡片堆则用来比喻页面中局部信息块栏目的显示效果与内容切换。但前者由于信息量较大，适于页面链接跳转或整个页面的刷新；后者则适用Ajax技术进行局部数据更新。

标签的视觉效果比一般导航菜单要明确，它把标签栏目所属的子内容也带到用户所瞩目的位置。在激活的标签之下显示一条相同背景或颜色的子栏目菜单或所属的具体内容，从左侧延伸到右侧。用户可以清楚地感知，标签不单是一个可以点击的按钮，它还控制了用户浏览的信息内容。

6.颜色编码

颜色是人类识别信息的重要信号。有的网站使用颜色编码来标记不同栏目，这些颜色的饱和度和明度基本一致。对于大多数浏览者来说，颜色编码可以提供栏目的辨识度。

网站设计师需要注意的是，不要让颜色编码喧宾夺主，影响页面内容的传达。

7.图片和图标

图片比文字更能产生跨文化、跨民族的效果，因此在网站设计中，也常用图片构成导航，作为导航的图片应该简洁、精致、具有一定的代表性，浏览者一看便知。即便如此，由于图片中的文本不能被搜索引擎收录，扔需要为图片导航设置相应的文本导航或者设置Alt说明性提示文字，从而增加网站的曝光率。