网站导航设计模式指南

通过威廉•克雷格 阅读时间约15分钟

WebFX总统。Bill在互联网营销行业有超过25年的经验，擅长SEO, UX，信息架构，营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

在网页设计，有一些用于交互的通用设计模式。网站导航是否有多种常见和熟悉的设计模式，可以作为有效构建的基础信息架构一个网站。本指南涵盖了流行的网站导航设计模式。

对于每种网站导航设计模式，我们将讨论其共同特征、缺点以及何时使用最佳。

顶部水平栏导航是两种最流行的网站导航菜单设计模式之一。它最常被用作主站点导航菜单，最常见的位置是直接在上面或下面网站标题在一个网站的所有网页中。顶部的水平栏导航设计模式有时与下拉菜单配对，悬停在导航项上会显示第二级子导航项。

顶部水平导航的最大缺点是，它限制了不借助子导航就可以包含的链接数量。对于只有几个页面或类别的网站，这不是一个障碍，但对于具有复杂信息架构和许多部分的网站，如果没有子导航的帮助，这不是一个理想的主导航菜单选项。

顶部水平栏导航对于只需要在主导航中显示5-12个导航项的网站来说是完美的。它也是单列主导航的唯一选项网站的布局(除了通常用作辅助导航系统的页脚导航之外)。当与下拉子导航相结合时，顶部水平栏导航设计模式可以容纳更多的链接。

垂直栏/侧边栏导航是指导航项被安排在单个列中，一个放在另一个上面。它经常出现在左上角的一列，在主要内容区之前——根据一项关于从左到右阅读器的导航模式的可用性研究，左边的垂直导航条比右边的垂直导航条性能更好。垂直栏/侧边栏导航设计模式随处可见，几乎在所有类型的网站上都有。

部分原因是垂直导航是最通用的模式之一，能够容纳一长串链接。它可以与子导航菜单一起使用，也可以单独使用。它很容易用于包含大量链接的主站点导航。

垂直栏/侧边栏导航几乎可以集成到任何类型的多列设计布局中。

由于垂直菜单能够处理许多链接，当它们太长时，有时会让用户感到不知所措。试着限制你包含的链接的数量，相反，对内容更多的网站使用飞出子导航菜单。此外，考虑将链接划分为直观的类别，以帮助用户更快地找到感兴趣的链接。

垂直导航几乎适用于任何类型的网站，特别是那些有多个主导航链接的网站。

标签导航可以设计成任何你想要的样式，从看起来像笔记本电脑一样的真实的、有纹理的标签，到光滑的、圆形的标签和简单的方边标签。它们在几乎所有类型的网站上都能看到，几乎可以融入任何视觉风格。与其他类型的导航相比，标签有一个明显的优势:它们对访问者有积极的心理影响。

人们把标签和导航联系在一起，因为人们习惯于在笔记本或活页夹上看到标签，并把它与转到一个新的部分联系在一起。这个现实世界的比喻使选项卡导航更加直观。

标签的最大缺点是，它们比简单的顶部水平条设计更多的工作;它们通常需要更多的标记、图像资产和CSS，这取决于选项卡的视觉复杂性。选项卡的另一个缺点是它们不能很好地用于大量链接的导航，除非它们是垂直排列的(即使这样，如果链接太多，它们也会看起来很尴尬)。

选项卡适用于几乎所有的主导航，尽管它们可以显示的链接数量有限，特别是在水平使用时。对于较大的站点，使用它们作为主导航和不同风格的子导航是一个很好的选择。

面包屑，得名于汉斯和格莱特在旅途中留下面包屑，这样它们就能找到回家的路，告诉你你在网站上的位置。它们是辅助导航的一种形式，帮助支持站点的主导航系统。面包屑在具有多层网页层次结构的网站中非常有用。

他们帮助游客定位他们相对于整个网站的位置。如果访问者想要返回一个级别，他们只需点击相应的面包屑导航项。

面包屑在导航较浅的网站上不太好用，比如一个小型本地网站高尔夫球场为例。当一个网站没有明确划分和分类的内容时，它们也可能令人困惑。

面包屑最适合那些有明确定义的部分和多层内容分类的网站。没有明显的区域，面包屑只会让访问者迷惑而不是帮助他们。