者：李华西

转发链接：https://mp.weixin.qq.com/s/G8e82OZp3vqsw-ihHmFQIA

站导航设计模式指南

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

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

顶部水平条导航

顶部水平条导航是两种最流行的网站导航菜单设计模式之一。它最常用作主站点导航菜单，并且最常位于站点中所有网页的站点标题的正上方或正下方。顶部水平条导航顶部水平条导航设计模式有时与下拉菜单配对，从而将鼠标悬停在导航项上会显示二级子导航项。

顶部单杠导航的共同特点

导航项是文本链接、按钮形或选项卡形

水平导航通常直接放置在网站徽标旁边

它通常位于折叠上方

顶部单杠导航的缺点

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

何时使用顶部水平条导航

顶部水平条导航非常适合只需要在主导航中显示 5-12 个导航项的网站。它也是单列网站布局的主要导航的唯一选择（除了通常用作辅助导航系统的页脚导航）。与下拉子导航结合使用时，顶部水平条导航设计模式可以容纳更多链接。

垂直栏/侧边栏导航

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

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

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

竖条/侧边栏导航的共同特征

导航项的文本链接很常见（有和没有图标）

标签很少使用（堆叠标签导航模式除外）

垂直导航菜单通常有很多链接

竖条/侧边栏导航的缺点

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

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

垂直导航适用于几乎任何类型的网站，尤其是具有多个主要导航链接的网站。

标签导航

几乎可以按照您想要的任何方式设置选项卡导航的样式，从直接从笔记本中看出来的逼真的纹理选项卡到有光泽的圆形选项卡和简单的方形边缘选项卡。它们几乎可以在所有类型的网站上看到，并且可以融入几乎任何视觉风格。标签导航与其他类型的导航相比，标签有一个明显的优势：它们对访问者有积极的心理影响。

人们将标签与导航相关联，因为人们习惯于在笔记本或活页夹中查看标签，并将其与转向新部分相关联。这个现实世界的隐喻使标签导航变得直观。

选项卡导航的共同特征

通常与现实世界的标签相似且功能相似（如在带有文件夹、笔记本、活页夹等的文件系统中所见）

通常水平方向，但偶尔垂直（堆叠标签）

选项卡导航的缺点

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

何时使用标签导航

选项卡几乎适用于任何主导航，尽管它们可以显示的链接数量有限，尤其是在水平使用时。将它们用于具有不同风格的大型站点的子导航的主导航是一个不错的选择。

如果自己还是没学会或者没有专业知识的人员，速推车是一个非常可靠的选择。它不仅使用最专业的工具和设备，而且技术团队的水平在中国也处于领先地位。无论哪种类型的工作都能胜任。有兴趣了解私信我