网页导航设计的常见样式
可折叠展开导航栏写法
可折叠展开导航栏写法可折叠展开导航栏是一个常见的网页设计元素，它可以在有限的空间内显示大量的导航链接，并且在需要时可以折叠起来，以便节省页面空间。
下面是一种常见的可折叠展开导航栏的写法：HTML部分：html.<div class="navbar">。
<button class="navbar-toggle" onclick="toggleNav()">菜单</button>。
<ul class="navbar-menu" id="navbarMenu">。
<li><a href="#">首页</a></li>。
<li><a href="#">关于我们</a></li>。
<li><a href="#">产品</a></li>。
<li><a href="#">服务</a></li>。
<li><a href="#">联系我们</a></li>。
</ul>。
</div>。
CSS部分：css..navbar {。
position: relative;}。
.navbar-toggle {。
display: none;}。
.navbar-menu {。
list-style-type: none; margin: 0;padding: 0;overflow: hidden;}。
.navbar-menu li {。
悬浮导航的使用方法
悬浮导航的使用方法悬浮导航是一种常见的网站设计元素，它可以提供方便的导航功能，在网页上方悬浮显示，使用户能够快速访问网站的各个页面。
本文将介绍悬浮导航的使用方法，帮助读者更好地了解和使用这一功能。
一、选择合适的导航条样式悬浮导航有多种样式可供选择，如顶部导航、侧边导航等。
在选择样式时，要考虑网站的整体风格和布局，确保导航条与网站其他元素相协调。
同时，还要注意导航条的可用性和易用性，确保用户能够轻松找到所需的导航链接。
二、确定导航链接导航链接是悬浮导航的核心功能，它决定了用户能够访问的页面。
在确定导航链接时，要根据网站的内容和结构进行分类，将相关页面归类到相应的导航链接下。
同时，要保持导航链接的简洁明了，避免过多的链接导致用户混淆。
三、设计悬浮效果悬浮导航的一个重要特点是能够在页面滚动时保持在屏幕上方，使用户随时可见。
要实现这一效果，需要使用CSS和JavaScript等技术来控制导航条的位置和显示状态。
可以通过设置导航条的position属性为fixed，以及监听页面滚动事件来实现悬浮效果。
四、优化移动设备适配随着移动设备的普及，悬浮导航在移动端的适配也变得尤为重要。
在设计悬浮导航时，要考虑到移动设备的屏幕尺寸和交互方式，确保导航条在不同设备上的显示效果一致。
可以使用响应式设计或者媒体查询等技术来实现移动设备的适配。
五、添加交互效果和动画为了增加用户的体验和吸引力，可以给悬浮导航添加一些交互效果和动画。
例如，当用户将鼠标悬停在导航链接上时，可以改变链接的颜色或背景，以及显示相应的子菜单。
可以使用CSS3的过渡和动画效果，或者JavaScript的动态效果库来实现这些效果。
六、测试和优化在完成悬浮导航的设计和开发后，要进行全面的测试，确保导航条在不同浏览器和设备上的兼容性和稳定性。
可以使用浏览器的开发者工具或者在线测试工具进行测试，并根据测试结果进行优化和调整。
同时，还要根据用户的反馈和行为数据，不断改进和优化悬浮导航的设计。
面包屑导航的含义及应用
面包屑导航的含义及应用面包屑导航是一种常见的网页导航方式，用于在网页中显示用户所处页面的位置路径。
它的设计灵感来自于现实生活中的面包屑，通过层级结构的展示方式帮助用户迅速了解当前页面在整个网站中的位置以及如何回到上级页面。
下面将从含义、应用以及优势几个方面进行阐述。
首先，面包屑导航的含义是指在网页中以一种有序的方式展示用户所处页面和其所在的页面层级结构，方便用户理解页面的位置关系和导航路径。
通常，面包屑导航位于网页的顶部或者页面内容区域的顶部，通过一系列的链接文字来表达页面的路径。
例如，在一个电商网站的商品详情页，面包屑导航可以是“首页> 电器> 厨房电器> 烤箱”，这就清晰地显示了当前页面在整个网站中的位置和层级关系。
其次，面包屑导航的应用广泛而且非常重要。
首先，它提高了用户的导航和浏览效率。
当用户在网站中浏览多个页面后，通过面包屑导航可以随时查看自己所处的位置，快速地返回到上级页面，避免迷失在页面中。
其次，面包屑导航提供了更好的网站结构和信息架构。
通过面包屑导航，用户可以清晰地看到网站的页面层级结构，体验到网站所提供的不同内容以及与之相关联的信息。
此外，面包屑导航还能够提升网站的用户体验和可用性，让用户更加容易理解和使用网站。
面包屑导航的优势也是显而易见的。
首先，它提供了一种简洁而直观的导航方式，无需用户点击菜单或者搜索，就能快速地回到上级页面或者其他相关页面。
这种导航方式对于用户来说更加直观和自然，减少了他们的认知负担和操作难度。
其次，面包屑导航能够提高网站的可访问性和可用性。
即便网站的菜单或者导航栏因为某些原因无法使用，用户仍然可以通过面包屑导航找到自己需要的页面，保证了网站的可访问性和可用性。
最后，面包屑导航还能够增加网站的SEO价值。
由于面包屑导航展示了页面的层级关系，搜索引擎可以更好地理解网站的结构和内容，提高相关页面的搜索排名，增加网站的曝光度和流量。
面包屑导航的设计需要遵循一些基本的原则。
13种典型网页版式设计介绍
13种典型网页版式设计介绍一、骨骼型骨骼型是一种规范的理性的分割方法。
常见的骨骼有竖向通栏、双栏、三栏、四栏和横向通栏、双栏、三栏和四栏等。
一般以竖向分栏为多。
在图片和文字的编排上则严格按照骨骼比例进行编排配置，给人以严谨、和谐、理性的美。
骨骼经过相互混合后的版式，既理性、条理，又活泼而具弹性。
二、满版型版面以图象充满整版，主要以图象为诉求，视觉传达直观而强烈。
文字的配置压置在上下、左右或中部的图象上。
满版型给人以大方、舒展的感觉，是商品广告常用的形式。
三、上下分割型把整个版面分为上下两个部分，在上半部或下半部配置图片，另一部分则配置文案。
配置有图片的部分感性而有活力，而文案部分则理性而静止。
上下部分配置的图片可以是一幅或多幅。
四、左右分割型把整个版面分割为左右两个部分，分别在左或右配置文案。
当左右两部分形成强弱对比时，则造成视觉心理的不平衡。
这仅仅是视觉习惯上的问题，也自然不如上下分割的视觉流程自然。
不过，倘若将分割线虚化处理，或用文字进行左右重复或穿插。
左右图文则变得自然和谐。
五、中轴型将图形做水平或垂直方向的排列，文案以上下或左右配置。
水平排列的版面给人稳定、安静、和平与含蓄之感。
垂直排列的版面给人强烈的动感。
六、曲线型图片或文字在版面结构上作曲线的编排构成，产生节奏和韵律。
七、倾斜型版面主体形象或多幅图版做倾斜编排，造成版面强烈的动感和不稳定因素，引人注目。
八、对称型对称的版式给人稳定、庄重理性的感觉。
对称有绝对对称和相对对称。
一般多采用相对对称。
以避免过于严谨。
对称一般以左右对称居多。
九、中心型重心有三种楷念。
1、直接以独立而轮廓分明的形象占据版面中心。
2、向心：视觉元素向版面中心聚拢的运动。
3、离心：犹如将石子投入水中，产生一圈圈向外扩散的弧线运动。
重心型版式产生视觉焦点，使强烈而突出。
十、三角形在圆形、四方形、三角形等基本形态中，正三角形是最具安全稳定因素的形态，而圆形和倒三角形则给人以动感和不稳定感。
设计导航知识点
设计导航知识点设计导航是指在设计过程中为用户提供有效的导航和引导，使其能够迅速准确地找到所需信息或完成所需操作。
设计导航是一个关键的设计要素，在用户体验中起着重要的作用。
本文将介绍设计导航的相关知识点，包括导航的类型、设计原则、常用的导航元素和技巧。
一、导航的类型1. 主导航主导航是指网站或应用程序的主要导航方式，通常以水平栏或垂直栏的形式呈现在页面的顶部或侧边。
主导航包含网站或应用的核心功能和主要模块，可以帮助用户快速了解和访问网站或应用的内容。
2. 二级导航二级导航是主导航下的次级导航，用于进一步分类和展示某一特定主题或功能的相关页面。
二级导航通常以下拉菜单或子菜单的形式呈现，可以提供更详细的导航路径和选项。
3. 面包屑导航面包屑导航是一种显示用户当前位置和访问路径的导航方式，通常以层级结构的形式展示在页面顶部或标题下方。
面包屑导航可以帮助用户追踪和回溯他们的导航路径，提供更好的导航体验。
4. 标签导航标签导航是指使用标签或标签栏来切换和浏览不同内容或功能的导航方式。
标签导航通常呈现在页面的顶部或侧边，可以让用户在不同标签之间快速切换，方便选择感兴趣的内容或功能。
二、设计原则1. 易于理解和使用设计导航应该简单明了，能够让用户迅速理解和使用。
导航的标识和标签应该清晰明确，能够准确表达所代表的内容或功能。
导航的布局和排列应该符合用户的习惯和预期，遵循常用的设计模式。
2. 一致性设计导航应该保持一致性，即在整个网站或应用中使用相同的导航元素和风格。
一致的导航可以帮助用户建立思维模式和导航路径，提供更好的用户体验。
3. 可见性设计导航应该具有良好的可见性，即在页面中容易被用户察觉和识别。
导航元素的样式和颜色应与页面的整体设计相协调，能够吸引用户的注意力，并让其在页面中找到所需导航。
4. 可预测性设计导航应该具有一定的可预测性，即用户能够准确预测导航的行为和结果。
导航的标识和标签应该与所代表的内容或功能密切相关，让用户在点击导航时能够准确预期到达的页面或操作。
网页导航菜单设计实例
网页导航菜单设计实例导航是网页设计中的重要元素。
一个良好的网页导航系统能不止是要把它设计的够漂亮，同时更重要的是要能够带领你的用户逗留在你的网站之中，让访客轻松找到他们想要观看的内容。
在这里介绍导航菜单在近期的发展趋势，实例和创新的解决方案，非常的丰富，相信能够为同学们网页设计带来更好的灵感和参考。
1. “对话式”的导航菜单一个导航菜单最重要的目标，就是引导访客浏览网站中的更多页面。
但是，有的时候，光是靠一两个关键字并不能达到效果，因为很可能这些关键字让人费解，并不能够吸引用户的注意。
在过去的几个月里面，你能发现一个导航菜单的设计趋势，就是为导航菜单进行简短的补充说明。
通过在大的菜单标题里再加上几个能够凸现出该页面的重要信息的关键词来吸引访客，让访客一目了然的知道，它进去这个页面，将会看到些什么东西。
我将这种导航菜单称之为“对话式”的导航菜单，因为它确实能和访客之前营造一种更好的沟通氛围。
同时，很多导航菜单不仅加上了多个关键词的简短介绍，也加入了一些大图标。
这除了美化导航菜单之外，另外一个好处就是，如果你的网站受众来自多个国家的话，通过图片将能使用不同语言的用户方便理解。
这种对话式的导航菜单不仅适于横向导航菜单，同时，也适用纵向导航菜单。
2. Mac风格仍然流行？Mac可以说是在Web2.0设计攻击下的最大幸存者，我们知道，在过去的一两年，Web2.0风格的设计席卷狂潮。
说实话，帕兰格人并不太喜欢Web2.0风格的设计，在某种程序上，Web2.0可以说是毁了设计。
但你无法不承认，它是如此的流行。
但是，有趣的是，在过去的几个月说，你会发现，有很多网站使用Mac风格的设计。
而这些网站并不都是设计苹果公司相关信息的，有很多甚至网站内容与Apple没有任何关系。
使用Mac风格只有一个理由:它是如此的精美和超酷。
或许，继续发展下去，Mac风格设计能够成为一个单一的设计元素概念。
Web2.0style不算什么，尤其是在全世界视觉设计工业最强大的Apple面前。
nav用法
nav用法
导航菜单（Nav）用法详解
导航菜单（Nav）是网页设计中常见的一种组件，用于为用户提供网页内部链接的可视化方式。
以下是导航菜单的常见用法和设计原则。
1. 导航菜单的位置：通常导航菜单放置在网页的顶部或侧边栏，以便用户方便地找到并浏览网站的不同部分。
2. 菜单项的设计：菜单项应该简洁明了，并且用词准确，以便用户快速理解和选择。
可使用常见的页面标题，如首页、产品、服务、关于我们等。
3. 高亮当前页面：为了帮助用户了解自己所处的页面位置，导航菜单通常会高亮显示当前所在的页面，可以使用不同的颜色或其他视觉效果来实现。
4. 下拉菜单：如果网站拥有较多的页面或者细分的内容，可以使用下拉菜单来展示更多选项。
下拉菜单可以嵌套多个层级，使得用户可以更清晰地浏览和选择内容。
5. 响应式设计：随着移动设备的普及，导航菜单需要适应各种屏幕尺寸。
在响应式设计中，可以使用折叠菜单、隐藏菜单或滑动菜单等方式来确保在小屏幕上也可以轻松导航。
6. 导航菜单的样式：导航菜单的样式应该与整个网站的风格一致，不仅可以提升用户体验，也有助于建立品牌形象。
可以使用各种视觉效果，如渐变、阴影、图标等来增加菜单的吸引力。
总之，导航菜单在网页设计中起到了连接不同页面和内容的重要作用。
通过良好的设计和合理的布局，可以提升用户的导航体验，使其更加方便地浏览和访问网站的各个部分。
网页设计的常见版式
网页设计的常见版式
网页设计的常见版式
导语：网页是向网站访问者传达信息的人机交互界面，是网站的重要组成部分之一，是网站中的信息载体。
下面是网页设计的版式设计，欢迎参考!
网页的艺术设计是网页制作技术与艺术表现形式的完美结合。
即以先进的网页制作技术和丰富的视听艺术效果来全面展示网站内容。
网页的版式设计就是在有限的屏幕空间上将多种媒体元素进行有机的组合，让各种元素根据主题的要求进行合理配置。
使页面中不同元素所占的`面积大小适中，通过线条色块将不同的元素进行分类，让访问者能很快的从中找到信息。
常见的网页板式构图分析
1.同字形很多大型网站都采用这种类型的布局这种信息内容的布局方法是在最上方放置网页的标题以及广告条幅，中间是网页的主要内容，在网页的最底部放置网站的一些基本信息，联系方式，版权声明，这是最常用的布局方式。
2.T字形网页的页面页眉是标题或广告横幅，页面的左侧是一系列超链接，右侧是很宽的正文下面是网站的一些辅助信息。
整体效果类似英文字母T.
3.三字型页面最上方为标题，页面中间为正文，他可以是一些文章页面或注册页面，下面是网站的相关信息。
4.海报型随着网络技术的不断发展，越来越多的网站会把首页制作成一张精美的平面海报，配以一些文字和动画效果，或是简洁的链接按钮。
海报型的构图方式能使画面视觉冲击力强，访问者印象深刻。
不过如果处理不当会使首页速度较慢，所以在制作时要注意。
5.flash型他与海报类型相似，只是这种结构采用了目前非常流行的flash动画，与封面行不同的是，由于flash功能强大，页面所表达的信息更丰富，视觉效果和听觉效果更出色。
css样式模板代码
css样式模板代码在网页设计中，样式模板是非常重要的一部分。
它们决定了网页的外观和布局，帮助我们创建一个美观、易于导航和易于阅读的网站。
CSS样式模板是一种复用性较高的代码，能够快速而方便地为网站添加样式，而且也可以通过修改来改变网站的整体风格。
本文将介绍一些常见的CSS样式模板代码，供大家参考。
1.导航菜单导航菜单是网站的核心组成部分之一，要让用户快速找到他们想要的内容。
以下是一个简单的CSS样式模板，可以用来创建一个水平导航菜单。
```ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333; }li {float: left;}li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none; }li a:hover {background-color: #111; }```使用这个样式模板，我们可以在HTML中创建一个无序列表，并添加相应的链接来创建一个简单的导航菜单。
然后，为这个无序列表添加CSS样式，使它呈现出一个黑色背景和白色的字体。
当用户悬停在链接上时，链接的背景将变成深灰色，以给用户某种反馈。
2.按钮按钮是网站中的另一个重要元素，通常用于触发某种操作，例如提交表单或打开模态窗口。
以下是一个可以用来创建漂亮按钮的CSS样式模板。
```.button {background-color: #4CAF50;border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;}```用这个样式模板，我们可以在HTML中创建一个按钮，并添加相应的链接来触发事件。
常见移动端产品导航设计模式
常见移动端产品导航设计模式平时生活中使用过很多APP，也看过一些关于移动产品导航设计的文章。
今天整理了一下市场上常见的几种导航设计，算是对自己学过知识的梳理。
APP导航承载着用户获取所需内容的快速途径，它看似简单，却是产品设计中最需要考量的一部分。
APP导航的设计，会直接影响用户对APP的体验感受。
一个好的导航设计能让用户快速了解该产品的功能和信息组织架构。
可以说导航设计有着举足轻重的作用。
虽然不同的产品需求和商业目标决定了不同的导航框架的设计模式，但纵观应用市场上的APP，导航设计的模式总是几种的组合使用。
下面我们来看一下常见的几种导航设计模式。
一、标签式导航标签式导航又叫Tab式导航，是目前移动端市场上最为广泛的导航设计。
标签导航通常分为底部，顶部，顶、底混合使用这三种模式1、底部导航，采用文字加图标的方式展现。
一般有3-5个标签，适合在相关的几类信息中间频繁的切换使用。
这类信息优先级较高、用户使用频繁，彼此之间相互独立，通过标签式导航的引导，用户可以迅速的实现页面之间的切换且不会迷失方向，简单而高效。
它的缺点是会占用一定高度的空间，如果用户是小屏幕手机，则视觉体验不太好。
底部标签导航2、顶部导航当内容分类比较多的时候，经常会采用顶部导航设计模式，如一些资讯类的APP天天快报，推酷就采用顶部导航。
顶部标签导航3、顶部，底部双tab导航标签式导航除了设在底部和底部，另外有些产品内容比较多会采用顶部，底部混合使用标签式导航，如简书、微票儿。
顶部，底部双tab导航二、抽屉式标签抽屉导航指的是一些功能菜单按钮隐藏在当前页面后，如网易邮箱、QQ、知乎等。
点击入口或侧滑即可像拉抽屉一样拉出菜单。
这种导航设计比较适合于那么不需要频繁切换的次功能，例如对设置、关于、会员、皮肤设置等功能的隐藏。
抽屉式导航的优点在于节省页面展示空间，使主页面更加简洁美观，让用户将更多的注意力聚焦到当前页面。
缺点在于次功能入口比较隐蔽，用户不容易发现；使用次功能需要二次点击，增加用户使用成本。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页导航设计的常见样式导航是指引用户找到自己所需内容的一个入口，对于导航栏目的设计，自然也有一套方法。
让用户能够快速、便捷的找到所需，让用户能够清晰明了的了解到导航条的内容，让用户能够青睐于导航栏目结构的设置，从视觉上做到醒目的效果。
对于导航栏目的最佳设计就是采用文本链接的方式，文本链接方式便于人们了解，直接的看到内容，更醒目，提高了网站的易用性。
对用户来说，易用，易理解，易操作的网站比较重要，而那些因为花哨而制作的导航栏目是不会受用户所喜爱的。
在网页设计中有一些通用的交互设计模式。
网站导航各种各样的通用和大家熟知的设计模式，可以用来作为为网站创建有效地信息架构的基础。
这篇指南涵盖了流行的站点导航设计模式。
对于每一种网站导航栏设计模式，我们将讨论它的一般特征，它的缺点，以及什么时候使用它最好。
顶部水平栏导航是当前两种最流行地网站导航菜单设计模式之一。
它最常用于网站的主导航菜单，且最通常地放在网站所有页面的网站头的直接上方或直接下方。
顶部水平栏导航设计模式有时伴随着下拉菜单，当鼠标移到某个项上时弹出它下面的二级子导航项。
顶部水平栏导航一般特征：导航项是文字链接，按钮形状，或者选项卡形状，水平栏导航通常直接放在邻近网站logo的地方，它通常位于折叠之上。
顶部水平栏导航最大的缺点就是它限制了你在不采用子级导航的情况下可以包含的链接数。
对于只有几个页面或类别的网站来说，这不是什么问题，但是对于有非常复杂的信息结构且有很多模块组成的网站来说，如果没有子导航的话，这并不是一个完美的主导航菜单选择。
顶部水平栏导航对于只需要在主要导航中显示5-12个导航项的网站来说是非常好的。
这也是单列布局的网站的主导航的唯一选择（除了通常用于二级导航系统的底部导航）。
当它与下拉子导航结合时，这种设计模式可以支持更多的链接。
竖直/侧边栏导航，侧边栏导航的导航项被排列在一个单列，一项在一项的上面。
它经常在左上角的列上，在主内容区之前——根据一份针对从左到右习惯读者的导航模式的可用性研究，左边的竖直导航栏比右边的竖直导航表现要好。
侧边栏导航设计模式随处可见，几乎存在于各类网站上。
这有可能是因为竖直导航是当前最通用的模式之一，可以适应数量很多的链接。
它可以与子导航菜单一起使用，也可以单独使用。
它很容易用于包含很多链接的网站主导航。
侧边栏导航可以集成在几乎任何种类的多列布局中。
侧边栏导航的一般特征：文字链接作为导航项很普遍（包含或不包含图标），很少使用选项卡（除了堆叠标签导航模式），竖直导航菜单经常含有很多链接。
竖直/侧边栏导航缺点：因为可以处理很多链接，当竖直菜单太长时有时可能将用户淹没。
尝试限制你引入的链接数，取而代之可以使用飞出式子导航菜单以提供网站的更多信息。
同时考虑将链接分放在直观的类别当中，以帮助用户很快地找到感兴趣的链接。
竖直导航适用于几乎所有种类的网站，尤其适合有一堆主导航链接的网站。
选项卡导航可以随意设计成任何你想要的样式，从逼真的，有手感的标签到圆滑的标签，以及简单地方边的标签等。
它存在于各种各样的网站里，并且可以纳入任何视觉效果。
选项卡比起其它类别的导航有一个明显的优势：它们对用户有积极的心理效应。
人们通常把导航与选项卡关联在一起，因为他们曾经在笔记本或资料夹里看见选项卡，并且把它们与切换到一个新的章节联系在一起。
这个真实世界的暗喻使得选项卡导航非常直观。
选项卡导航的一般特征：样子和功能都类似真实世界的选项卡（就像在文件夹，笔记本等中看到的一样），一般是水平方向的但也有时是竖直的（堆叠标签）。
选项卡最大的缺点是它比简单的顶部水平栏更难设计。
它们通常需要更多的标签，图片资源以及CSS，具体根据标签的视觉复杂度而定。
选项卡的另一个缺点是它们也不太适用于链接很多的情况，除非它们竖直地排列（即使这样，如果太多的话它们还是看起来很不合适）。
选项卡也适合几乎任何主导航，虽然它们在可以显示的链接上有限制，尤其在水平方向的情况下。
将它们用于拥有不同风格子导航的主导航的较大型网站是个不错的选项。
面包屑的名字来源于Hansel和Gretel的故事，他们在沿途播撒面包屑以用来找到加家的路，这可以告诉你在网站的当前位置。
这是二级导航的一种形式，辅助网站的主导航系统。
面包屑对于多级别具有层次结构的网站特别有用。
它们可以帮助访客了解到当前自己在整站中所处的位置。
如果访客希望返回到某一级，它们只需要点击相应的面包屑导航项。
面包屑的一般特征：一般格式是水平文字链接列表，通常在两项中间伴随着左箭头以指示层及关系，从不用于主导航。
面包屑导航的缺点：面包屑不适于浅导航网站。
当网站没有清晰的层次和分类的时候，使用它也可能产生混乱。
何时使用面包屑导航。
面包屑导航最适用于具有清晰章节和多层次分类内容的网站。
没有明显的章节，使用面包屑是得不偿失。
标签导航，标签经常被用于博客和新闻网站。
它们常常被组织成一个标签云，导航项可能按字母顺序排列（通常用不同大小的链接来表示这个标签下有多少内容），或者按流行程度排列。
标签是出色的二级导航而很少用于主导航。
他可以提高网站的可发现性和探索性。
标签云通常出现在边栏或底部。
如果没有标签云，标签则通常包括于文章顶部或底部的元信息中，这种设计让用户更容易找到相似的内容。
标签导航的一般特征：标签是以内容为中心的网（博客和新闻站）站的一般特性，仅有文字链接，当处于标签云中时，链接通常大小各异以标识流行度经常被包含在文章的元信息中。
标签导航的缺点：人们通常把标签和博客和新闻网站联系在一起（有时候也可能是电子商务网站），所以如果你的网站与这些网站有本质的不同，它可能对你就没有帮助。
标签也会给内容创作者带来一定量的工作量，因为为了使标签系统有效，每篇文章都需要打上准确的标签。
如果你拥有很多主题，为内容打上关键词标记是很有利的。
如果你仅有几个页面（可能你的网站是一个公司网站），可能就不需要给内容打标签了。
是否结合标签云或只是将标签包含在元信息中得取决于你的设计。
搜索导航，近些年来网站检索已成为流行的导航方式。
它非常适合拥有无限内容的网站（像维基百科），这种网站很难使用其它的导航。
搜索也常见于博客和新闻网站，以及电子商务网站。
搜索对于清楚知道自己想要找什么的访客非常有用。
但是有了搜索并不代表着就可以忽略好的信息结构。
它对于保证那些不完全知道自己要找什么或是想发现潜在的感兴趣内容的浏览者可以查找到内容依然非常重要。
搜索导航的一般特征：搜索栏通常位于头部或在侧边栏靠近顶部的地方，搜索栏经常会出现在页面布局中的辅助部分，如底部。
搜索最大的缺点是并非所有搜索引擎都是平等的。
取决于你选择的方案，你网站的搜索特性可能不能返回精确的结果或者缺失一些东西如文章元数据。
搜索导航，对于大部分网站来说，应该作为次要的导航形式。
搜索是用户在无法被导航到他们想找的东西的地方时的可靠选择。
对于具有无数页面并且有复杂信息结构的网站来说，肯定必须引入搜索功能。
没有它用户可能很难通过遍历链接和多层的导航来找到他们想要的信息。
搜索对于电子商务网站也非常重要，而关键的一点是电子商务网站的搜索结果要根据网站存货的多少具有相应的筛选和排序功能。
出式菜单（与竖直/侧边栏导航一起使用）和下拉菜单（一般与顶部水平栏导航一起使用）是构建健壮的导航系统的好方法。
它使得你的网站整体上看起来很整洁，而且使得深层章节很容易被访问。
他们通常结合水平，竖直或是选项卡导航一起使用，作为网站主导航系统的一部分。
出式菜单和下拉菜单导航的一般特征：用于多级信息结构，使用JavaScript和CSS来隐藏和显示菜单，显示在菜单中的链接是主菜单项的子项，菜单通常在鼠标悬停在上面时被激活，而有时候也可能是鼠标点击时激活。
出式菜单和下拉菜单导航缺点：除非你在主导航链接边上放置一些标识（通常是箭头图标），不然访客可能不知道那有包含子导航项的下拉或出式菜单，因此使这些标识很明显是非常重要的。
同时出式菜单和下拉可能使得导航在移动设备上非常难用，所以要确保你的移动样式表处理了这种情况。
如果你想在视觉上隐藏很大的或很复杂的导航层次，出式菜单和下拉是很好的选择，因为它让用户决定他们想看见什么，以及什么时候可以看见它们。
它们可以用来在不弄乱网页的情况下按需显示很大数量的链接。
它们还可以用来显示子页面和局部导航，并且不需要用户首先点击打开新的页面。
分面/引导导航（也叫做分面检索或引导检索）最常见于电子商务网站。
基本上来说引导导航给你提供额外的内容属性筛选。
假设你在浏览一个新的LCD显示器，引导导航可能会列出大小，价格，品牌等选顶。
基于这些内容属性，你可以导航到匹配你的条件的项。
引导导航在拥有巨大数量货物的大型电子商务网站中是非常宝贵的。
用户通过直接搜索通常很难找到他们想要的东西，并且增加了用户漏掉一个产品的或能性。
例如他们可能搜索一个灰褐色的产品，但你可能将它标记了灰色或褐色，虽然它可能就是用户想要的东西。
分面/引导导航的一般特征：最常见于电子商务网站，通常让用户对不同的特征做多次筛选，几乎总是使用文字链接，分解在不同的类别下或是下拉菜单下，常常与面包屑导航一起使用分面/引导导航的缺点：引导导航可能会引起一些用户的迷惑。
另外不能保证用户会在你预先定义的类别中查找。
分面导航对于大型电子商务网站非常有用。
它方便了用户购物，提升了购物体验，并更容易找到它们真正想要的东西。
它也可以用于其它目录风格的网站。
页脚导航通常用于次要导航，并且可能包含了主导航中没有的链接，或是包含简化的网站地图链接。
访客通常在主导航找不到他们要找的东西时会去查看页脚导航。
页脚导航的一般特征：页脚导航通常用于放置其它地方都没有的导航项，通常使用文字链接，偶尔带有图标，通常链接指向不是那么关键的页面。
页脚导航的缺点：如果你的页面很长，没有人愿意仅仅为了导航而滚动到页面底部。
对于较长的页面，页脚导航最好作为重复链接和简要的网站地图的地方。
它不适合作为主导般形式。
绝大多数网站都有这样那样的页脚导航，即使它只是重复其它地方的链接。
考虑什么放在那有用，以及你的访客可能最想找什么。
大多数网站使用不只一种导航设计模式。
例如一个网站可能会用顶部水平栏导航作为主导航系统，并使用竖直/侧边栏导航系统来辅助它，同时还用页脚导航来作冗余，增加页面的便利度。
当选择你的导航系统基于的导航设计模式时，你必须选择支持你的信息结构以及网站特性的方案。
导航是网站设计的重要部分，它的效果必须有坚实的设计基础。
作者：易虎 。