网页设计中有许多常见的交互设计模式。网站导航有多种常见且众所周知的设计模式，可用作创建网站有效信息架构的基础。本指南涵盖了流行的网站导航设计模式。对于每种网站导航设计模式关键下拉菜单，我们将讨论其一般特征、缺点以及最佳使用时机。

顶部水平栏导航

顶部水平栏导航是两种最流行的网站导航菜单设计模式之一。它最常用于网站的主导航菜单，并且最常放置在网站所有页面的网站标题正上方或正下方。

顶部水平栏导航设计模式有时会伴随下拉菜单，当鼠标移到某个项目上时，会弹出其下方的二级子导航项。

顶部水平栏导航一般特征

顶部水平栏导航的缺点

顶部水平导航的最大缺点是，它限制了您可以包含的链接数量，而无需借助子导航。对于只有几个页面或类别的网站来说，这不是问题，但对于内容非常复杂的网站来说，这可能是个问题。对于信息结构庞大、模块众多的网站，没有子导航的主导航菜单并不是一个完美的选择。

何时使用顶部水平栏导航

顶部水平栏导航非常适合那些只需要在主导航中显示 5-12 个导航项的网站。它也是单列布局网站上主导航的唯一选择（除了通常用于次级导航系统的底部水平栏导航）。当与下拉子导航结合使用时，这种设计模式可以支持更多的链接。

垂直/侧边栏导航

侧边栏导航项排列在一列中，一列位于另一列之上。它通常位于左上列关键下拉菜单，在主要内容区域之前 - 根据从左到右导航的读者的导航模式。根据可用性研究，左侧的垂直导航比右侧的垂直导航表现更好。

侧边栏导航设计模式无处不在，几乎可以在所有类型的网站上找到。这可能是因为垂直导航是目前最通用的模式之一，可以容纳大量链接。

它可以与子导航菜单一起使用，也可以单独使用。它很容易用于包含大量链接的网站的主导航。侧边栏导航几乎可以集成到任何类型的多列布局中。

侧边栏导航的一般特征

垂直/侧边栏导航的缺点

由于垂直菜单可以容纳如此多的链接，因此如果菜单太长，用户有时会不知所措。尝试限制所包含的链接数量，并使用弹出式子导航菜单来提供有关您网站的更多信息。还可以考虑将链接分开。采用直观的类别，帮助用户快速找到感兴趣的链接。

何时使用垂直/侧边栏导航

垂直导航适用于几乎所有类型的网站，但对于具有大量主导航链接的网站尤其有用。

标签导航

选项卡式导航可以设计成任何您想要的样式，从逼真的触感选项卡到时尚的选项卡和简单的侧边选项卡。它存在于各种网站上，可以融入任何视觉效果。

与其他类型的导航相比，标签有一个明显的优势：它们对用户有积极的心理影响。人们经常将导航与标签联系起来，因为他们在笔记本或文件夹中见过它们，并将它们用作组织信息的工具。与切换到新章节有关。这个现实世界的隐喻使标签导航非常直观。

标签导航的一般特征

标签导航的缺点

标签的最大缺点是它们比简单的水平顶栏更难设计。它们通常需要更多的标签、图像资源和 CSS，具体取决于标签的视觉复杂度。标签的另一个缺点是它们也不是很有用。非常适合有大量链接的情况，除非它们是垂直排列的（即使这样，如果链接太多，它们看起来也会不合适）。

何时使用标签导航

标签也适用于几乎所有的主导航，尽管它们可以显示的链接有限，尤其是当它们水平放置时。对于主导航具有不同风格的子导航的大型网站来说，它们是一个不错的选择。

面包屑导航

面包屑得名于 18 和 19 世纪的故事，人们在寻找回家的路时会沿途撒下面包屑，这会告诉您在网站上的位置。这是一种辅助网站主导航系统的辅助导航形式。

面包屑导航对于多层级的网站尤其有用，它可以帮助访客了解自己目前在整个网站中的位置，如果访客想返回某一层级，只需要点击相应的面包屑导航项即可。

面包屑的一般特征

面包屑导航的缺点

面包屑导航不适合浅层导航网站。当网站没有明确的层次结构和分类时，使用面包屑导航也可能会造成混乱。何时使用面包屑导航。面包屑导航最适合具有明确部分和多级内容分类的网站。如果没有明确的部分，使用面包屑导航就不值得了。

标签导航

标签经常用于博客和新闻网站。它们通常被组织成标签云，导航项可能按字母顺序排列（通常使用不同大小的链接来指示标签下有多少内容），或按受欢迎程度排列。

标签非常适合二级导航，很少用于主导航。它们可以提高网站的可发现性和探索性。标签云通常位于侧边栏或底部。如果没有标签云，标签通常包含在文章的顶部或底部。这种设计使用户更容易在网站的元信息中找到类似的内容。

标签导航的一般特征 标签导航的缺点

人们经常将标签与博客和新闻网站（有时也与电子商务网站）联系起来，因此如果您的网站与这些网站有根本区别，那么标签可能对您没有帮助。标签还可以为内容创建添加背景信息。这给作者带来了一定的工作量，因为为了使标记系统有效，每篇文章都需要准确标记。

何时使用标签

如果您有很多主题，用关键词标记您的内容会很有帮助。如果您只有几页（也许您的网站是公司网站），您可能不需要标记您的内容。只需根据您的设计将标签包含在元信息中即可。

搜索导航

近年来，网页索引已成为一种流行的导航方法。它非常适合内容无穷无尽的网站（如维基百科），这些网站很难使用其他方法进行导航。搜索在博客和新闻网站以及电子商务网站上也很常见。

搜索对于明确知道自己在寻找什么的访问者非常有用。但拥有搜索功能并不意味着您可以忽略良好的信息结构。确保那些不知道自己在寻找什么或想发现潜在有趣内容的访问者能够找到您的内容仍然非常重要。

搜索导航的一般特征 搜索导航的缺点

搜索的最大缺点是并非所有搜索引擎都是一样的。根据您选择的解决方案，您网站的搜索功能可能无法返回准确的结果，或者可能缺少文章元数据等信息。 ，应用作辅助导航形式。当用户无法导航到他们要查找的内容时，搜索是一种可靠的替代方案。

何时使用搜索导航

对于页面无数、信息结构复杂的网站来说，引入搜索功能肯定是必要的，如果没有它，用户可能很难通过遍历链接和多层导航找到自己想要的信息，搜索对于电商网站来说也非常重要，而重点是电商网站的搜索结果应该根据网站上的库存量有相应的过滤和排序功能。

弹出菜单和下拉菜单导航

弹出菜单（用于垂直/侧边栏导航）和下拉菜单（通常用于顶部水平栏导航）是构建强大导航系统的绝佳方式。它使您的网站整体看起来整洁有序。并且使深层章节易于访问。

它们通常与水平、垂直或选项卡式导航结合使用，作为网站主导航系统的一部分。

弹出导航和下拉导航的共同特征

弹出菜单和下拉菜单导航的缺点

除非您在主导航链接旁边放置某种指示符（通常是箭头图标），否则访问者可能不知道有包含子导航项的下拉菜单或弹出菜单，因此让这些指示符显眼很重要。菜单和下拉菜单会使导航在移动设备上难以使用，因此请确保您的移动样式表能够处理此问题。

何时使用弹出菜单和下拉菜单导航

如果您想在视觉上隐藏大型或复杂的导航层次结构，弹出窗口和下拉菜单是不错的选择，因为它们可以让用户决定他们想要看到什么以及何时看到。按需显示大量链接而不会使网页混乱。它们还可用于显示子页面和本地导航，而无需用户先单击以打开新页面。

分面/引导导航

分面/引导式导航（也称为分面搜索或引导式搜索）在电子商务网站上最为常见。基本上，引导式导航为您提供了可供筛选的附加属性。假设您正在浏览一台新的 LCD 显示器。引导式导航可能会按尺寸、价格、品牌等列出商品。根据这些内容属性，您可以导航到符合条件的商品。

对于拥有大量产品的大型电子商务网站来说，引导式导航非常有用。用户通常很难通过直接搜索找到他们想要的产品，而且这会增加用户错过产品的可能性。例如，他们可能会搜索灰棕色产品，但您可能会将其标记为灰色或棕色，即使这可能是用户想要的。

分面导航/引导导航的一般特征 分面导航/引导导航的缺点

引导式导航可能会让一些用户感到困惑。此外，也无法保证用户会在您预先定义的类别内进行搜索。

何时使用分面导航/引导导航

分面导航对于大型电子商务网站非常有用。它使用户购物更加轻松，改善了购物体验，并使他们更容易找到他们想要的东西。它也可以用于其他目录式网站。

页脚导航

页脚导航通常用于辅助导航，可能包含主导航中找不到的链接或简化的站点地图链接。

当访问者在主导航中找不到他们想要的内容时，他们通常会检查页脚导航。

页脚导航的一般特征 页脚导航的缺点

如果您的页面很长，没有人愿意为了导航而滚动到页面底部。对于较长的页面，页脚导航最适合用作重复链接和简短站点地图的位置。它不适合作为主导形式。

何时使用页脚导航

大多数网站都有某种页脚导航，即使它只是重复来自其他地方的链接。考虑一下那里有什么用处，以及你的访客最想找什么。

综上所述

大多数网站使用不止一种导航设计模式。例如，一个网站可能会使用顶部水平栏导航作为主要导航系统，并使用垂直/侧边栏导航系统来辅助它，同时还使用页脚导航系统进行冗余下拉神器登录★64xl.com顶级下拉平台，必应电脑下拉，增加页面的便利性。在根据您的导航系统选择导航设计模式时，您必须选择一种支持您的信息结构和网站特征的解决方案。导航是网站设计的重要组成部分，其效果必须有坚实的基础设计。

查看原文