网页导航设计的常见样式
导航是指引用户找到自己所需内容的一个入口，对于导航栏目的设计，自然也有一套方法。让用户能够快速、便捷的找到所需，让用户能够清晰明了的了解到导航条的内容，让用户能够青睐于导航栏目结构的设置，从视觉上做到醒目的效果。
对于导航栏目的最佳设计就是采用文本链接的方式，文本链接方式便于人们了解，直接的看到内容，更醒目，提高了网站的易用性。对用户来说，易用，易理解，易操作的网站比较重要，而那些因为花哨而制作的导航栏目是不会受用户所喜爱的。
在网页设计中有一些通用的交互设计模式。网站导航各种各样的通用和大家熟知的设计模式，可以用来作为为网站创建有效地信息架构的基础。这篇指南涵盖了流行的站点导航设计模式。对于每一种网站导航栏设计模式，我们将讨论它的一般特征，它的缺点，以及什么时候使用它最好。
顶部水平栏导航是当前两种最流行地网站导航菜单设计模式之一。它最常用于网站的主导航菜单，且最通常地放在网站所有页面的网站头的直接上方或直接下方。顶部水平栏导航设计模式有时伴随着下拉菜单，当鼠标移到某个项上时弹出它下面的二级子导航项。顶部水平栏导航一般特征：导航项是文字链接，按钮形状，或者选项卡形状，水平栏导航通常直接放在邻近网站logo的地方，它通常位于折叠之上。
顶部水平栏导航最大的缺点就是它限制了你在不采用子级导航的情况下可以包
含的链接数。对于只有几个页面或类别的网站来说，这不是什么问题，但是对于有非常复杂的信息结构且有很多模块组成的网站来说，如果没有子导航的话，这并不是一个完美的主导航菜单选择。
顶部水平栏导航对于只需要在主要导航中显示5-12个导航项的网站来说是非常
好的。这也是单列布局的网站的主导航的唯一选择（除了通常用于二级导航系统的底部导航）。当它与下拉子导航结合时，这种设计模式可以支持更多的链接。
竖直/侧边栏导航，侧边栏导航的导航项被排列在一个单列，一项在一项的上面。它经常在左上角的列上，在主内容区之前——根据一份针对从左到右习惯读者的导航模式的可用性研究，左边的竖直导航栏比右边的竖直导航表现要好。侧边栏导航设计模式随处可见，几乎存在于各类网站上。这有可能是因为竖直导航是当前最通用的模式之一，可以适应数量很多的链接。它可以与子导航菜单一起使用，也可以单独使用。它很容易用于包含很多链接的网站主导航。侧边栏导航可以集成在几乎任何种类的多列布局中。侧边栏导航的一般特征：文字链接作为导航项很普遍（包含或不包含图标），很少使用选项卡（除了堆叠标签导航模式），竖直导航菜单经常含有很多链接。
竖直/侧边栏导航缺点：因为可以处理很多链接，当竖直菜单太长时有时可能将用户淹没。尝试限制你引入的链接数，取而代之可以使用飞出式子导航菜单以提供网站的更多信息。同时考虑将链接分放在直观的类别当中，以帮助用户很快地找到感兴趣的链接。
竖直导航适用于几乎所有种类的网站，尤其适合有一堆主导航链接的网站。
选项卡导航可以随意设计成任何你想要的样式，从逼真的，有手感的标签到圆滑的标签，以及简单地方边的标签等。它存在于各种各样的网站里，并且可以纳入任何视觉效果。选项卡比起其它类别的导航有一个明显的优势：它们对用户有积极的心理效应。人们通常把导航与选项卡关联在一起，因为他们曾经在笔记本或资料夹里看见选项卡，并且把它们与切换到一个新的章节联系在一起。这个真实世界的暗喻使得选项卡导航非常直观。选项卡导航的一般特征：样子和功能都类似真实世界的选项卡（就像在文件夹，笔记本等中看到的一样），一般是水平方向的但也有时是竖直的（堆叠标签）。
选项卡最大的缺点是它比简单的顶部水平栏更难设计。它们通常需要更多的标签，图片资源以及CSS，具体根据标签的视觉复杂度而定。选项卡的另一个缺点是它们也不太适用于链接很多的情况，除非它们竖直地排列（即使这样，如果太多的话它们还是看起来很不合适）。
选项卡也适合几乎任何主导航，虽然它们在可以显示的链接上有限制，尤其在水平方向的情况下。将它们用于拥有不同风格子导航的主导航的较大型网站是个不错的选项。
面包屑的名字来源于Hansel和Gretel的故事，他们在沿途播撒面包屑以用来找到加家的路，这可以告诉你在网站的当前位置。这是二级导航的一种形式，辅助网站的主导航系统。面包屑对于多级别具有层次结构的网站特别有用。它们可以帮助访客了解到当前自己在整站中所处的位置。如果访客希望返回到某一级，它们只需要点击相应的面包屑导航项。面包屑的一般特征：一般格式是水平文字链接列表，通常在两项中间伴随着左箭头以指示层及关系，从不用于主导航。
面包屑导航的缺点：面包屑不适于浅导航网站。当网站没有清晰的层次和分类的时候，使用它也可能产生混乱。何时使用面包屑导航。面包屑导航最适用于具有清晰章节和多层次分类内容的网站。没有明显的章节，使用面包屑是得不偿失。
标签导航，标签经常被用于博客和新闻网站。它们常常被组织成一个标签云，导航项可能按字母顺序排列（通常用不同大小的链接来表示这个标签下有多少内容），或者按流行程度排列。标签是出色的二级导航而很少用于主导航。他可以提高网站的可发现性和探索性。标签云通常出现在边栏或底部。如果没有标签云，标签则通常包括于文章顶部或底部的元信息中，这种设计让用户更容易找到相似的内容。标签导航的一般特征：标签是以内容为中心的网（博客和新闻站）站的一般特性，仅有文字链接，当处于标签云中时，链接通常大小各异以标识流行度经常被包含在文章的元信息中。
标签导航的缺点：人们通常把标签和博客和新闻网站联系在一起（有时候也可能是电子商务网站），所以如果你的网站与这些网站有本质的不同，它可能对你就没有帮助。标签也会给内容创作者带来一定量的工作量，因为为了使标签系统有效，每篇文章都需要打上准确的标签。
如果你拥有很多主题，为内容打上关键词标记是很有利的。如果你仅有几个页面（可能你的网站是一个公司网站），可能就不需要给内容打标签了。是否结合标签云或只是将标签包含在元信息中得取决于你的设计。
搜索导航，近些年来网站检索已成为流行的导航方式。它非常适合拥有无限内容的网站（像维基百科），这种网站很难使用其它的导航。搜索也常见于博客和新闻网站，以及电子商务网站。搜索对于清楚知道自己想要找什么的访客非常有用。但是有了搜索并不代表着就可以忽略好的信息结构。它对于保证那些不完全知道自己要找什么或是想发现潜在的感兴趣内容的浏览者可以查找到内容依然非常
重要。搜索导航的一般特征：搜索栏通常位于头部或在侧边栏靠近顶部的地方，搜索栏经常会出现在页面布局中的辅助部分，如底部。
搜索最大的缺点是并非所有搜索引擎都是平等的。取决于你选择的方案，你网站的搜索特性可能不能返回精确的结果或者缺失一些东西如文章元数据。搜索导航，对于大部分网站来说，应该作为次要的导航形式。搜索是用户在无法被导航到他们想找的东西的地方时的可靠选择。
对于具有无数页面并且有复杂信息结构的网站来说，肯定必须引入搜索功能。没有它用户可能很难通过遍历链接和多层的导航来找到他们想要的信息。搜索对于电子商务网站也非常重要，而关键的一点是电子商务网站的搜索结果要根据网站存货的多少具有相应的筛选和排序功能。
出式菜单（与竖直/侧边栏导航一起使用）和下拉菜单（一般与顶部水平栏导航一起使用）是构建健壮的导航系统的好方法。它使得你的网站整体上看起来很整洁，而且使得深层章节很容易被访问。他们通常结合水平，竖直或是选项卡导航一起使用，作为网站主导航系统的一部分。出式菜单和下拉菜单导航的一般特征：用于多级信息结构，使用JavaScript和CSS来隐藏和显示菜单，显示在菜单中
的链接是主菜单项的子项，菜单通常在鼠标悬停在上面时被激活，而有时候也可能是鼠标点击时激活。
出式菜单和下拉菜单导航缺点：除非你在主导航链接边上放置一些标识（通常是箭头图标），不然访客可能不知道那有包含子导航项的下拉或出式菜单，因此使这些标识很明显是非常重要的。同时出式菜单和下拉可能使得导航在移动设备上非常难用，所以要确保你的移动样式表处理了这种情况。
如果你想在视觉上隐藏很大的或很复杂的导航层次，出式菜单和下拉是很好的选择，因为它让用户决定他们想看见什么，以及什么时候可以看见它们。它们可以用来在不弄乱网页的情况下按需显示很大数量的链接。它们还可以用来显示子页面和局部导航，并且不需要用户首先点击打开新的页面。
分面/引导导航（也叫做分面检索或引导检索）最常见于电子商务网站。基本上来说引导导航给你提供额外的内容属性筛选。假设你在浏览一个新的LCD显示器，引导导航可能会列出大小，价格，品牌等选顶。基于这些内容属性，你可以导航到匹配你的条件的项。引导导航在拥有巨大数量货物的大型电子商务网站中是非常宝贵的。用户通过直接搜索通常很难找到他们想要的东西，并且增加了用户漏掉一个产品的或能性。例如他们可能搜索一个灰褐色的产品，但你可能将它标记了灰色或褐色，虽然它可能就是用户想要的东西。分面/引导导航的一般特征：最常见于电子商务网站，通常让用户对不同的特征做多次筛选，几乎总是使用文字链接，分解在不同的类别下或是下拉菜单下，常常与面包屑导航一起使用
分面/引导导航的缺点：引导导航可能会引起一些用户的迷惑。另外不能保证用户会在你预先定义的类别中查找。
分面导航对于大型电子商务网站非常有用。它方便了用户购物，提升了购物体验，并更容易找到它们真正想要的东西。它也可以用于其它目录风格的网站。
页脚导航通常用于次要导航，并且可能包含了主导航中没有的链接，或是包含简化的网站地图链接。访客通常在主导航找不到他们要找的东西时会去查看页脚导航。页脚导航的一般特征：页脚导航通常用于放置其它地方都没有的导航项，通常使用文字链接，偶尔带有图标，通常链接指向不是那么关键的页面。
页脚导航的缺点：如果你的页面很长，没有人愿意仅仅为了导航而滚动到页面底部。对于较长的页面，页脚导航最好作为重复链接和简要的网站地图的地方。它不适合作为主导般形式。
绝大多数网站都有这样那样的页脚导航，即使它只是重复其它地方的链接。考虑什么放在那有用，以及你的访客可能最想找什么。
大多数网站使用不只一种导航设计模式。例如一个网站可能会用顶部水平栏导航作为主导航系统，并使用竖直/侧边栏导航系统来辅助它，同时还用页脚导航来作冗余，增加页面的便利度。当选择你的导航系统基于的导航设计模式时，你必须选择支持你的信息结构以及网站特性的方案。导航是网站设计的重要部分，它的效果必须有坚实的设计基础。
作者：易虎 https://www.doczj.com/doc/6a8410055.html,
设计一个有创意的网站导航方法 对于任何一个网站来说，网站导航都是一个必不可少的部分，在设计的过程当中如何才能够设计一个有创意的网站导航是每一个设计者们都在不断追求的一件事情。可以说一个有创意的导航所具有的作用是非常的大的，可以使得这一个网站更加的成功。那么大家究竟应当要怎么样才能够设计出一个有创意的导航呢？下面就来为大家介绍一下这一个问题。 一、动态导航设计 在进行网站导航设计的时候应当要勇于打破传统，追求一些新的东西，这样对于大家设计出一个更有创意的网站导航是非常有好处的。举个例子来说，目前绝大多数的网站导航都是静态的，如果大家能够打破常规，采用动态的导航设计的话，
那么可以让整个网站导航更加的有灵活性，而且其创新性也会是更加的强的，这也非常有利于大家吸引到更多的用户和浏览量。 二、纵向导航模式 目前有很多的网站的导航设置都是放在网站的页头位置的，而且是一种横向设置的导航，这种设计虽然好，但是，这一种导航的模式并不适合于那些内容非常丰富的网站，因为内容丰富的网站内容多，分类也多，从而下拉子栏目的数量也会是很多的，如果大家可以换一个思维，采用纵向的导航模式，也是可以起到很好的效果的，不仅可以提高导航内容的可读性，而且还能够给用户带来很多的不一样的感受，因此这一点也是非常的重要的。 三、重视导航外观设计 导航的外观设计如何也是其中的一个非常能够体现创意的地方，不管是规则的，还是不规则的都是可以进行设计的。不过在进行不规则设计的时候大家需要尤为重视，这样才能够使得网站的效果变得更加的好，这也是非常的重要的。 目前各行各业的竞争都是非常的激烈的，每一个企业为了要抢得先机都必须要设计一个有创意的网站导航，这样对于企业自己的发展也将会是有极大的帮助的。
超实用！Web设计中导航与主页的设计原则 在开放性的门户网站中，这类网站中用户流量较大，且用户注意力极容易被分散，这时一个Web页面的瞬间识别性直接关系到用户转化率，也就显得尤为重要。 而对一些比较专业的或指定性的网站，政府网站等，用户面临缺少其他选择，网站缺少替代性的情况，以下原则可能没有前者这么性命攸关，但也同样具有相当的指导意义。 一、导航设计——街头指示牌和面包屑 1、记住一个事实：如果在网站上找不到方向，人们会放弃使用你的网站 （1）网络导航101法则 人们进入站点时会遵循一个类似的过程： 人们通常是为了寻找某个目标 人们会决定先询问还是先浏览 如果选择浏览，人们会通过标志的引导在层次结构中穿行 最后，如果没找到想要的东西，人们会离开 （2）Web与真实世界中的差异 感觉不到大小 感觉不到方向 感觉不到位置
不论我是来闲逛还是来寻找固定内容，我能清晰地知道自己在哪，能去哪（明细分类），以及如何回去（主菜单）。 （3）导航的用途 它给了我们一个被固定的感觉 它告诉我们当前的位置 它告诉我们如何使用网站 它给了我们对网站建造者的信心
如今我们逛一些相当成熟的购物网站（比如淘宝）的时候，甚至比在百货商厦中的感觉更清晰。我能更便捷地找到自己想要的东西。（商品分类，新品促销，其他功能。。。） Web导航的用法基于实际导航用法，但我认为web导航现在已经实现了对现实世界导航的超越。（可快速跳转，试错成本低） （4）只要跺三次脚，说“我要回家” 让一个“返回主页”的按钮始终可见，这一点很重要，用户可以随时（在短时间内）回到主页，可以有效地减少用户迷失方向的焦虑。 （5）提供搜索 搜索的设计要注意三点： 慎用花哨的用词：“快速搜索”“关键词搜索”“精确搜索”等等 添加指示说明：在PlaceHolder中增加对搜索的描述 添加选项：如果存在易混淆的搜索范围，如全站搜索？部分站点搜索？整个Web搜索？请加选项区分。 （6）关于页面名称 标识要大：足够引人注目 在合适的位置：通常在页面左上，目光焦点较多的地方
移动网站的导航设计 导航是互联网网站最重要的组成部分之一，它涉及到产品的信息架构、页面布局和用户交互行为等诸多方面。一个网站用户体验的优劣往往和导航的优劣有密切的联系。 随着移动互联网的发展，越来越多的网站以移动网站的形式移植到手机上。在网站移植过程中，导航的重新设计有什么变化和设计要点呢，本文尝试做出一些研究。 导航的目的 在研究导航之前，我们不妨从导航的使用目的谈起。如果把网站比成一座大厦，那导航可认作是大厦内的指引系统。导航的使用目的归纳起来主要有以下几个方面： 1. 引导用户在网站页面间移动和浏览，提供获取信息的路径。全局导航、局部导航等都是为了用户浏览相关的页面提供引导，方便用户找到所求。 2. 理清网站各部分内容之间的关系，使用户了解网站全景。最常见于全局导航和站点信息导航，它们展现了整个网站的目录信息，用户可快速理解网站结构，对网站有整体的把握。 3. 定位用户在网站中所处的位置。这个功能常见于面包屑和相关导航中，它帮助用户识别当前浏览的页面与网站整体内容间关系，使用户了解当前页面和网站其它内容的联系和区别。 导航变化的原因 从PC端到移动端导航变化的原因归根结底是由物（设备的软、硬件差异）、景（使用情景和操作方式）、事（用户需求和使用目的）差异。这些因素相互交织，对移动终端的导航设计有显著的影响。 本文尝试从类型、内容、样式等方面结合实例来说明PC端到移动端网站导航设计的变化： 一、常用导航类型变化 网页导航的划分有不同的维度。网页导航按照作用范围的不同可以分为三大类：结构性导航、关联性导航和公用程序导航。根据《web 导航设计》，三者的关系可描述如下：
如何做好网站导航设计集团档案编码：[YTTR-YTPT28-YTNTL98-UYTYNN08]
是网站中一个很重要的因素，一个合理的导航设计不但利于搜索引擎优化，还对提升用户体验至关重要，迅速了解自己所处的位置，这对提高用户的转化率十分有用。在中做好各类导航设计对网站后期的优化推广十分有利。那如何做好网站导航设计 1、辅助网站指引用户 为了给用户提供直观的显示，让用户知道他们所处的位置，以便每个级别的位置名称都可以链接，每个页面必须包含辅助导航和站点的左上角的logo标识。 2、网站logo 在中，指向网站主页的链接将添加到站点logo出现的每个站点上，很多用户习惯于单击网站logo作为返回网站主页的标记。 3、导航跳跃的位置 主导航栏应位于顶部附近，或位于站点左侧。如果需要子导航，因为内容太多，用户可以容易地告诉哪个是主导导航栏，哪个是某个导航的辅助导航栏。 4、导航的简单性 在时，尽量简单，避免使用下拉菜单导航或弹出菜单导航，因为导航不是网站的主流，它只是网站的指南。主要功能是让用户在网站上迷路，可以快速找到方向，这对用户来说是方便的，而不是给用户增加负担。 5、网页指示 用户应该知道网页现在是什么，现在浏览网页的相关网页是什么，例如，例如通过辅助导航“首页→新闻频道→新闻全名”里面的对所在网页位置的文字说明，同时配合导航的颜色高亮，可以达到视觉直观指示的效果。 6、页面提示 有些网站有太多的信息，此时让用户浏览和没有浏览区别，最简单的方法是让已经浏览过的网页被浏览，如果不是在一个统一的网页锚文本页面中，你可以显示用户已经在其他地方已经浏览过的内容。 7、登录并退出 登录入口和退出登录出口可在整个站点的每个页面上使用，允许用户登录和退出任何网页。
导航模块的设计原则（1）——导航元素 在顾客扫描网站的导航之后，如果没有找到所需要的信息点，就会离开网站。本系列将介绍如何设计一个有效的导航。作为开篇，将讨论导航模块的核心元素，这是我们所能给予顾客最重要的帮助信息。 措辞 在开始基于需求来设计信息架构时，需要先定义好导航标签，通过这些标签可以快速定位到具体的商品。 “商店定位”标签可以帮助顾客在移动应用程序中找到实体店。“商品”标签则展示电子商务网站上的所有商品标签。而“开始”标签表示网站首页。
这是一个很好的开始。 标签测试 有什么简便的方法来检查是否完整明智地传递信息？ 1.一种成熟的解决方案就是卡片分类。通过卡片分类，可以转化早期预测为 通用分类。卡片分类，不仅可以帮助我们创建一个明智的信息架构，也可以让我们了解用户在购物的不同场景涉及的关键词。 2.另一测试是一个文字关联的游戏。找出所有潜在的导航标签，让测试用户 说出他们的第一印象关键词，用户相信在这个标签下可以找到他想要的信息。几十年来，市场研究人员一直在用这种技术，以确保向目标受众传达正确的产品信息。在这个阶段，需要找到两个重要问题的答案。（1）用户是否可以将导航标签和具体的商品联系上？（2）标签措辞是否会引起混淆？
也许这样意图更加明显。 缩短反应时间 在史蒂夫克鲁格的代表作《不要让我思考》中这样描述：“我看到的大部分网页，有一点都让我感到震惊，就是网页上大部分的内容只是在占用空间，因为没有人会去浏览。”导航标签越多，用户就越难选择不同的选项。 在1935年，美国心理学家约翰·雷德利·斯特鲁普出版的关于串行口头反应中干扰的研究现在越来越被关注。斯特鲁普发现，用户很容易认错用其他颜色写的颜色单词。（如用红颜色来写“蓝”字） 我们可以从斯特鲁普的研究中学到，在浏览的过程中有一部分时间并不是在阅读标签上的单词，而是在扫描标签的背景。快速浏览一下你的导航中的标签是否存在可有可无的东西。
网页导航设计的注意要点 一、注意超连结颜色与单纯叙述文字的颜色呈现 WWW的语言—HTML允许Webpage设计者特别标明单纯叙述文字与超连结的颜色，以便丰富Webp age的色彩呈现。如果您的网站 充满知识性的信息，欲传达给访问者，建议您将网页内的文字与超连结颜色，设计成较干净素雅的色调，会较有利于阅读∶纯粹的叙述文字采用较暗、较深的颜色来呈现(如∶黑色、墨绿色、暗褐色)，超连结文字则以较鲜明抢眼的色彩来强调 (如∶亮黄色、翠绿色、鲜橘色)，至于探访过的超连结则采用较低于原超连结亮度的颜色做呈现。 二、测试所有的超连结与导览按钮的真实可行性 Webpage上线之后，第一件该做的事，是逐一测试每一页的每一个超连结与每一个导览按钮的真实可行性。彻底检验有没有失败的link无法连结到该连结的Webpage，却反而冒出“FileNotFound”的错误讯号出来。这是一个负责任、够水准的 Webpage设计者对自己的作品应有的基本品质要求。 如果您果真有那么多的超连结必须提供给读者，不如将这些超连结以条列的方式，一笔一笔清楚地列在一选单页或目录页上，既不防碍走文的顺畅，又呈现一目了然的导览连结。 三、让超连结的字串长短适中且走文自然 抓住能传达主要讯息的字眼当做超连结的锚点(anchor)，可有效地控制住超连结的字串长度，避免字串过长(如∶整行、整句都是锚点字串)或过短(如∶仅一个字当做锚点)，而不利于读者的阅读或点取。 四、当导览按钮连结到目前此页时 各Webpage若重复使用同一组的导览按钮，无可避免地会产生某一导览按钮连结到目前此页的情形。为达成界面设计的一致性，并没有绝对的必要性拿掉此导览按钮，但Webpage设计者可让此按钮不再具有超连结的功能；或将此按钮的彩度、亮度 降低(如∶深绿色变成淡绿色，亮红色变成暗红色)，使读者可清楚地意识到∶这个暗设下来的导览按钮不再具有超连结的功能。 五、分析、说明您提供的bookmarks或coollinks 常常看到热心的Webpage设计者条列了精心收集的bookmarks或coollinks，以分享读者个人遨游W WW的美好经验。但多数Webpage设计者就只提供一大串links，并不分门别类，也不加以分析、说明为什么这个link好，值得推荐？那个link的主要内容精彩之处？又在哪？提供您的bookmarks或coollinks 是一大善举，但未加以分析、说明，却变得功亏一篑。多花几分钟，将您提供的bookmarks或coollinks 稍加分类、注解，可提供读者清晰的概念与无限的方便，也使您的站台的导览系统更加周全完善。未加以说明、注解coollinks，其实一点也不cool。老实说，任何人都可以到Yahoo轻易地找到上百上千的links。您若未对这些推荐的links加以个人独特的评论、介绍，读者又何劳偏得到您的站台去找索引呢？任何一个分类索引或搜寻引擎都绝对比您条列的links还要更完备齐全。
山东师范大学 硕士学位论文 教育主题网站的导航设计 姓名：殷菲 申请学位级别：硕士 专业：教育技术学 指导教师：郭根生 20070410
山东师范大学硕士学位论文 中文摘要 互联网急速普及，信息技术革命随之产生，信息时代的到来深刻地改变了人 们生活、工作、贸易、思维以及彼此沟通的方式。网络教育也就应运而生，成为 了教育在Ｉｎｔｅｒｎｅｔ上的一个重要应用。教育主题网站是网络教育的一个主要阵 地，是教师和学生探索新型学习方式的基地。如何建设一个优秀的教育主题网站， 是每个教育工作者关心的问题。教育主题网站建设的优劣将直接关系到网络教育 信息资源的优劣和新型教育、学习方式能否顺利的开展。但是由于网络的特性， 造成浏览者的信息迷航现象，这就需要网站导航系统发挥作用。 本课题研究的目的和意义是针对目前教育主题网站导航良荞不齐的现状以 及在教育主题网站建设中忽视导航系统设计这一突出问题，以网站的建设规律和 相关的教育理论、学习理论为指导对于教育主题网站的导航系统设计深入细致的 研究，探求和把握其内在的规律和有效的解决方法，以期更好的建设教育主题网 站的导航系统，充分发挥教育主题网站的作用。 本文通过查阅文献、书籍和专家著作等方法进行相关资料的搜集和整理，采 取实例论证、对比比较等方法进行分析归纳，形成研究思路，建立研究提纲。在 此基础上，对前期的研究工作进行全面的思考、分析和总结，完成本论文的撰写 工作。本文首次把导航系统设计作为教育主题网站建设中的一个重要方面加以研 究，提出了教育主题网站导航设计的系统方法，并且从功能和艺术两个方面来分 析教育主题网站的导航设计。在此基础上提出了参照性、借鉴性极强的教育主题 网站的导航设计的方法和原则。本文具有参照性强、实用性强、借鉴性强的特点。 文章的第一章，介绍了教育主题网站的概念和教育主题网站导航的概念，并 主要分析了网络空间的特性导致学习者的信息迷航以及这种信息迷航现象造成 的危害，最后概述了教育主题网站导航设计的重大意义；文章的第二部分是本文 的创新点之一，从分析整个网站导航的发展和演进入手，得出网站导航未来的发 展趋势，然后系统阐述了教育主题网站导航设计应该如何展开，提出了教育主题 网站导航设计从功能和艺术两个角度分别进行设计。文章的第三部分是本文的重 点部分。选择国内国外的优秀教育主题网站作为实例加以分析，在此基础上仔细 阐述了不同形式的导航的优缺点。对于网站的设计者具有较强的参考性和借鉴 大连做网站https://www.doczj.com/doc/6a8410055.html,/
网页导航设计的常见样式 导航是指引用户找到自己所需内容的一个入口，对于导航栏目的设计，自然也有一套方法。让用户能够快速、便捷的找到所需，让用户能够清晰明了的了解到导航条的内容，让用户能够青睐于导航栏目结构的设置，从视觉上做到醒目的效果。 对于导航栏目的最佳设计就是采用文本链接的方式，文本链接方式便于人们了解，直接的看到内容，更醒目，提高了网站的易用性。对用户来说，易用，易理解，易操作的网站比较重要，而那些因为花哨而制作的导航栏目是不会受用户所喜爱的。 在网页设计中有一些通用的交互设计模式。网站导航各种各样的通用和大家熟知的设计模式，可以用来作为为网站创建有效地信息架构的基础。这篇指南涵盖了流行的站点导航设计模式。对于每一种网站导航栏设计模式，我们将讨论它的一般特征，它的缺点，以及什么时候使用它最好。 顶部水平栏导航是当前两种最流行地网站导航菜单设计模式之一。它最常用于网站的主导航菜单，且最通常地放在网站所有页面的网站头的直接上方或直接下方。顶部水平栏导航设计模式有时伴随着下拉菜单，当鼠标移到某个项上时弹出它下面的二级子导航项。顶部水平栏导航一般特征：导航项是文字链接，按钮形状，或者选项卡形状，水平栏导航通常直接放在邻近网站logo的地方，它通常位于折叠之上。 顶部水平栏导航最大的缺点就是它限制了你在不采用子级导航的情况下可以包 含的链接数。对于只有几个页面或类别的网站来说，这不是什么问题，但是对于有非常复杂的信息结构且有很多模块组成的网站来说，如果没有子导航的话，这并不是一个完美的主导航菜单选择。 顶部水平栏导航对于只需要在主要导航中显示5-12个导航项的网站来说是非常 好的。这也是单列布局的网站的主导航的唯一选择（除了通常用于二级导航系统的底部导航）。当它与下拉子导航结合时，这种设计模式可以支持更多的链接。 竖直/侧边栏导航，侧边栏导航的导航项被排列在一个单列，一项在一项的上面。它经常在左上角的列上，在主内容区之前——根据一份针对从左到右习惯读者的导航模式的可用性研究，左边的竖直导航栏比右边的竖直导航表现要好。侧边栏导航设计模式随处可见，几乎存在于各类网站上。这有可能是因为竖直导航是当前最通用的模式之一，可以适应数量很多的链接。它可以与子导航菜单一起使用，也可以单独使用。它很容易用于包含很多链接的网站主导航。侧边栏导航可以集成在几乎任何种类的多列布局中。侧边栏导航的一般特征：文字链接作为导航项很普遍（包含或不包含图标），很少使用选项卡（除了堆叠标签导航模式），竖直导航菜单经常含有很多链接。
顶部水平栏导航 顶部水平栏导航是当前两种最流行地网站导航菜单设计模式之一。它最常用于网站的主导航菜单，且最通常地放在网站所有页面的网站头的直接上方或直接下方。 顶部水平栏导航设计模式有时伴随着下拉菜单，当鼠标移到某个项上时弹出它下面的二级子导航项。 顶部水平栏导航一般特征 导航项是文字链接，按钮形状，或者选项卡形状 水平栏导航通常直接放在邻近网站logo的地方 它通常位于折叠之上
顶部水平栏导航的缺点 顶部水平栏导航最大的缺点就是它限制了你在不采用子级导航的情况下可以包含的链接数。对于只有几个页面或类别的网站来说，这不是什么问题，但是对于有非常复杂的信息结构且有很多模块组成的网站来说，如果没有子导航的话，这并不是一个完美的主导航菜单选择。 何时使用顶部水平栏导航 顶部水平栏导航对于只需要在主要导航中显示5-12个导航项的网站来说是非常好的。这也是单列布局的网站的主导航的唯一选择(除了通常用于二级导航系统的底部导航)。当它与下拉子导航结合时，这种设计模式可以支持更多的链接。 竖直/侧边栏导航 侧边栏导航的导航项被排列在一个单列，一项在一项的上面。它经常在左上角的列上，在主内容区之前——根据一份针对从左到右习惯读者的导航模式的可用性研究，左边的竖直导航栏比右边的竖直导航表现要好。 侧边栏导航设计模式随处可见，几乎存在于各类网站上。这有可能是因为竖直导航是当前最通用的模式之一，可以适应数量很多的链接。
它可以与子导航菜单一起使用，也可以单独使用。它很容易用于包含很多链接的网站主导航。侧边栏导航可以集成在几乎任何种类的多列布局中。侧边栏导航的一般特征 文字链接作为导航项很普遍(包含或不包含图标) 很少使用选项卡(除了堆叠标签导航模式) 竖直导航菜单经常含有很多链接
“网站策划中百分之七十的工作是围绕网站导航开展的”——这句话是错的。许多优秀的网站成功在导航设计，许多糟糕失败在导航设计，这个现象的确存在，但这并不意味着导航设计占有网站策划工作的绝对重心。 不是所有的网站都需要导航 策划这类思维活动，一旦形成了惯性也就失去了创造力。很多从事网站策划的朋友，总是把着眼点放在了网站的导航，殊不知很多网站压根不需要导航，因此，正确的网站策划思维应该是首先明确“我们是否需要导航”，然后才是“我们需要一个什么样的导航” 只有一个页面的网站，它们不需要导航。企业简介、联系方式、产品服务，这样的名片式网站是国内中小型企业普遍采用的形式，而这些内容往往可以在一个页面中展开；网站建设公司为了提高价格将名片式网站故意复杂化，同时为了节约成本将导航程式化，造成了成本浪费与用户操作的烦琐；一个极简的网站，高效能的传播，纯粹的功能，是不需要导航的干扰；如果能够在最少的页面里把事情说清楚，就不要浪费更多的页面，这是在节约社会资源，也是在节约用户的时间。 可用性研究网站https://www.doczj.com/doc/6a8410055.html,（Nielsen）就是一个典型的没有导航栏的网站 故事主线的网站，它们不需要导航。线性思维可以一步一步带领用户进入目的地，只要内
容足够吸引，那么用户是不吝惜增加点击的；这种叙事的内容传播侧重的是内容的深度，Step By Step的让用户深入了解内容，并不希望用户进行跨越式浏览。故事网站并不能带来宽泛的流量，必需像看幻灯片那样一页一页的点击下去，而却能带来影响力与深刻传播，用户往往一口气浏览到底，而且很少去重新浏览；既然如此，故事主线的网站存在有何意义呢？很显然，故事主线网站是进行病毒式营销的利器，通常人们会把自己喜欢的故事网站通过各种渠道分享给自己的亲人和朋友。 著名的Web标准启蒙读物《为什么用表格排版是不明智的》采用线性无导航阅读 用户往往并不知道网站导航的存在 每个人都有经常使用的网站，即便是网站策划师也不例外。现在确定一个你经常访问的网站（这个网站必须不是你亲自参与设计建设的），好，闭上眼睛仔细回忆，这个你经常造访的网站，它的导航包含多少个项目，第一个项目是什么？最后一个呢？每个项目在导航中是如何排列的?现在你明白了么？……即便是你经常访问的网站，你也没办法把导航内容完全记住。
常见的导航类型包括，面包屑导航、下拉菜单式导航、点聚导航、列表导航，下面来看看这些网站的导航类型设计的作用。 1、面包屑导航——用户操作方便。 面包屑导航可谓是现在导航界的宠儿，它深受用户的喜爱，因为它可以让用户在浏览网站时能够清楚明白的知道自己所在页面的位置，在用户想返回上一级菜单时也可以及时返回。 不过并不是所有网站都使用面包屑导航，一般如果网站的页面不多，或者菜单目录不多，则不建议大家使用面包屑导航。 2、下拉菜单式导航——节省网站空间。 下拉菜单式导航也是网站导航中的一类，它一般适用于网站内容较多的网站，这时候使用下拉菜单栏导航就可以节约网站的空间，也会提高网站的整体美感。 现在网站也经常使用下拉菜单式导航，不过该导航适合有同等级切换的导航，不适合频繁切换，频繁切换有可能造成网站卡顿等现象。 3、点聚导航——适用网站结构简单的网站。
点聚导航的摆放位置和面包屑导航、下拉菜单栏式导航是不一样的，它一般情况下放在网站的底部，所以它的这一个特点就限制了它只适用于内容简单、结构简单的网站。 不然用户进入网站后将要花费一点时间来找导航栏的位置，用户体验就不会那么好，就有可能造成网站的点击率以及访问量下降。 4、列表导航——结构清晰。 列表导航的一大特色就是用户一看列表就能清晰的知道自己所在的位置和所要了解的内容，不需要用户进入网站后自己慢慢查找相关内容的导航框，提高了用户的体验度。 一般情况下只要网站大体上没有什么问题，设置列表导航是有利于帮助网站提高权重的。 创意品牌设计精选服务商，上汇桔网，专业设计大咖操刀，为您提供有创意的原创设计。让设计更简单，您的需求我们全力满足，点击进入汇桔网咨询。
是网站中一个很重要的因素，一个合理的导航设计不但利于搜索引擎优化，还对提升用户体验至关重要，迅速了解自己所处的位置，这对提高用户的转化率十分有用。在中做好各类导航设计对网站后期的优化推广十分有利。那如何做好网站导航设计? 1、辅助网站指引用户 为了给用户提供直观的显示，让用户知道他们所处的位置，以便每个级别的位置名称都可以链接，每个页面必须包含辅助导航和站点的左上角的logo标识。 2、网站logo 在中，指向网站主页的链接将添加到站点logo出现的每个站点上，很多用户习惯于单击网站logo作为返回网站主页的标记。 3、导航跳跃的位置 主导航栏应位于顶部附近，或位于站点左侧。如果需要子导航，因为内容太多，用户可以容易地告诉哪个是主导导航栏，哪个是某个导航的辅助导航栏。 4、导航的简单性 在时，尽量简单，避免使用下拉菜单导航或弹出菜单导航，因为导航不是网站的主流，它只是网站的指南。主要功能是让用户在网站上迷路，可以快速找到方向，这对用户来说是方便的，而不是给用户增加负担。 5、网页指示 用户应该知道网页现在是什么，现在浏览网页的相关网页是什么，例如，例如通过辅助导航“首页→新闻频道→新闻全名”里面的对所在网页位置的文字说明，同时配合导航的颜色高亮，可以达到视觉直观指示的效果。 6、页面提示
有些网站有太多的信息，此时让用户浏览和没有浏览区别，最简单的方法是让已经浏览过的网页被浏览，如果不是在一个统一的网页锚文本页面中，你可以显示用户已经在其他地方已经浏览过的内容。 7、登录并退出 登录入口和退出登录出口可在整个站点的每个页面上使用，允许用户登录和退出任何网页。 汇桔网设计服务提供，打造店铺个性。专业设计大咖操刀，为您提供有创意的原创设计，让设计更简单，登录汇桔网咨询吧。
《Designing Web Navigation 网站导航设计》P1-10 07年年底翻译过《Designing Web Navigation 网站导航设计》P1-10，已做废稿，大家凑活着看吧… 英文原稿见最后。 网站导航简介 全新的百科全书将出现，互相联系的轨迹网络贯穿其中，信息随时可以被放入机器“Memex”而得到扩展。 —范内瓦·布什《诚如所思》 本章内容 -导航的定义 -网站导航概况 -导航的作用 -导航设计和设计前景 在塑造我们的网站体验上，导航发挥了重要作用。它提供了获取信息的方式，增强了认知度，反映了品牌，并赋予了网站的整体可靠性。最终，网站导航和获取信息的能力，对于利益相关的使用者有经济上的影响。 导航设计是一个不仅限于选择整排按钮的任务。它非常广泛，同时微妙无比。导航设计师协调用户目标和业务目标，这需要领会每一方面，并深刻了解信息组织、页面设计和设计说明。本章为网站导航描绘了一个广阔的背景，以帮助你更好地理解它的目的，以及其潜在范围的重要性。 就导航而言 当网站导航好用时，它平淡无奇。当它根本未被注意时，导航是最好的。这就像一场体育比赛的裁判员一样。在比赛中裁判可能会做很多的决定，而你甚至不知道他的存在。但如果有一个误判时，裁判员就会突然成为成千上万起哄观众的关注焦点。 图1-1展示了BBC国际站上的一篇新闻。这是我们在网络上经常不期而遇的一种
页面。在导航上它没有什么特别有趣的地方。当你需要它时，它就在那里；当你不需要它时，它也不碍事。但这个页面说明了导航的一些典型特点。 乍一看网页时，你的焦点在哪里如果你不是在寻找一个具体的话题，你的眼球就可能会在网页上游荡。你也许第一次看到左上角的网站徽标，或者看到文章的标题。可能那张图片吸引了你的注意力。但是你可能没有注意到在新闻标题上面的链接“e-Mail this to a Friend”，或是右上角的搜索输入框。如果你正在寻找这些功能，不管怎样，你会轻松地发现它们。 不知不觉中，为了帮助你理解网页的导航和内容，你完成了一个方案。即使你看过所有文字，你已经创造了这个网页将如何聚集在你心里的意识图像：这里是主要观点，那里是文章的正文，底下是更多的选择。人们快速而自动地做此规划。 为了匹配他们信息需求中的文字，人们也快速地扫描网页。如果你正在寻找当地的天气预报，你已经快速地发现这是不适当的网页。但是你可能看到了在网页最上方有天气的选项。点击此项，你估计会到达气象网站。基于此原因，标签和文本的导航是至关重要的。 更重要的是，标签的组织和归类，也传达了如何定位有价值的信息。比如，在网页左边的头七个选项告知了关于这篇新闻文章的地理组织。又比如，在图1-1 中右部“climate change—In depth”的下方，链接集让你清楚地知道如何找到关于此话题的更多信息。 总体而言，各种各样的元素聚集在一起创造了导航系统。然而访客可能会察觉这个系统作为整体而言，我们可以剖析它的单个组件。例如，在网页头部中心位置（以“Home”开始）的标签被称为主导航。在新闻内部，地方导航被左部的垂直菜单所代表，这表明了你身在何处（突出了“Science/Mature”）以及你可以去哪里，比如关于非洲的文章或者商业新闻组。 这是一个好导航系统吗答案是基本上良好。你必须考虑各种因素，从业务目标到用户目标。但是，也有一些良好导航的通用原则让我们可以用来评估导航的质量。举例来说，在BBC网页上的导航是平衡的、一致的，并且对您身在何处提供了清晰的说明。总体而言，它合乎BBC这种类型的网站，并且使人们尽可能正确地找到他们想去的地方——这是衡量导航设计是否成功的最重要因素。 定义网站导航 让我们想想链接——互联网最基本的组成部分。链接在网页上是文本或图片，链到另一个网页或者一个单独页面的其他地方。它们让联系从一个想法跳跃到下一个想法——这是个强有力的概念。多亏了链接，当你读了一个关于中国外交政