网站导航设计模式指南

WebFX总统。Bill在互联网营销行业有超过25年的经验,专门从事SEO, UX,信息架构,营销自动化等。William在Shippensburg和MIT的科学计算和教育背景为cloudfx和WebFX的其他关键研究和开发项目的营销提供了基础。

网站导航设计模式的最终指南

网页设计在美国,有一些用于交互的公共设计模式。网站导航是否有各种各样的通用和熟悉的设计模式,可以用作构建有效的架构的基础信息架构一个网站。

本指南涵盖了流行的站点导航设计模式。对于每个站点导航设计模式,我们将讨论其共同特征、缺点以及最佳使用时间。

顶部水平条导航

顶部水平条导航是两种最流行的网站导航菜单设计模式之一。它最常被用作网站的主要导航菜单,并且最常被放置在网站标题网站中所有网页的名称。

顶部水平条导航

顶部水平条导航设计模式有时与下拉菜单配对,当鼠标悬停在导航项上时,会显示二级子导航项。

顶部水平条导航的常见特征

  • 导航项是文本链接、按钮形状或选项卡形状
  • 水平导航通常直接放在网站logo的旁边
  • 它通常位于褶皱上方

顶部水平栏导航的缺点

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

何时使用顶部水平栏导航

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

侧边栏导航

垂直栏/侧栏导航是指导航项排列在一列中,一列在另一列上。它经常出现在左上栏,在主要内容区域之前——根据对从左到右阅读器导航模式的可用性研究,左侧的垂直导航条比右侧的垂直导航条性能更好。

垂直栏/侧边栏导航设计模式随处可见,几乎在所有类型的网站上都有。部分原因是垂直导航是最通用的模式之一,能够容纳很长的链接列表。

侧边栏导航

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

垂直栏/侧边栏导航的共同特征

  • 导航项的文本链接很常见(有图标和没有图标)
  • 很少使用选项卡(除了堆叠选项卡导航模式)
  • 垂直导航菜单通常有很多链接

垂直栏/侧边栏导航的缺点

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

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

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

选项卡导航

标签导航可以设计成几乎任何你想要的方式,从现实的,纹理的标签,看起来直接从笔记本到光滑的,圆角的标签和简单的,正方形边缘的标签。它们在几乎所有的网站上都可以看到,并且可以被整合到几乎所有的视觉风格中。

选项卡导航

与其他类型的导航相比,标签有一个明显的优势:它们对访问者有积极的心理影响。人们将标签与导航相关联,因为人们习惯于在笔记本或活页夹中看到标签,并将其与转到新的分区相关联。这种真实世界的隐喻使标签导航更直观。

标签导航的共同特征

  • 通常类似于现实世界中的标签页(如文件夹、笔记本、活页夹等文件系统中所见)。
  • 通常水平方向,但偶尔垂直(堆叠选项卡)

标签导航的缺点

标签最大的缺点是,与简单的顶部水平条相比,它们需要更多的设计工作;它们通常需要更多的标记、图像资源和CSS,这取决于选项卡的视觉复杂性。

选项卡的另一个缺点是,除非它们是垂直排列的(即使这样,如果链接太多,它们也会显得很笨拙),否则它们在有很多链接的导航中无法正常工作。

何时使用选项卡导航

选项卡适用于几乎所有的主导航,尽管它们可以显示的链接数量有限,特别是在水平使用时。在大网站的主导航中用不同风格的子导航是一个不错的选择。

面包屑导航

面包屑,它们的名字来源于汉斯和格莱特在路上留下面包屑,这样他们就能找到回家的路,在网站上告诉你你在哪里。它们是辅助导航的一种形式,帮助支持网站的主要导航系统。

面包屑导航

面包屑在具有多级网页层次结构的网站中很有用。它们有助于确定访问者相对于整个站点的位置。如果访问者想返回一个关卡,他们只需单击相应的面包屑导航项即可。

面包屑导航的共同特征

  • 通常格式为文本链接的水平列表,它们之间通常用左箭头表示层次结构
  • 从未用于主导航

面包屑导航的缺点

面包屑在导航较浅的网站上不太好用,比如本地拥有的小型网站高尔夫球场为例。当一个网站没有对内容进行清晰的划分和分类时,它们也会让人感到困惑。

什么时候使用面包屑导航

面包屑最适合有明确定义的部分和多级内容分类的网站。如果没有明确的部分,面包屑只会让访问者迷惑而不是帮助他们。

标签导航

标签通常在博客和新闻网站上使用。它们通常被组织成标签云,它可以按字母顺序排列导航项(通常使用不同大小的链接,以指示在特定标记下有多少内容存档),或者按照受欢迎程度排序。

标签是优秀的辅助导航,很少被视为主要导航。它们可以帮助发现和现场勘探。标记云通常出现在边栏或页脚上。

如果标签云不存在,那么标签通常包含在文章顶部或底部的元信息中;这种格式便于用户查找类似内容。

标签导航的共同特点

  • 标签是一种常见的功能以内容为中心的网站(博客和新闻网站)
  • 只有文本链接
  • 当链接排列在标签云中以表示受欢迎程度时,通常大小不一
  • 通常包含在帖子的元信息中

标签导航的缺点

标签与博客和新闻网站紧密相关(在较小程度上,电子商务网站),所以如果你的网站是不同的性质,它可能对你没有用处。标签也需要你的内容创造者做一定的工作,因为每一篇文章都需要准确的标签,以使系统有效。

何时使用标签导航

如果你涵盖了大量的主题,用关键词给内容加标签是很好的;如果你只有几个页面(也许你的网站是一个公司网站),那么标签内容可能是不需要的。您是否决定也合并一个标签云或仅仅在元信息中包含标签将取决于您的设计。

搜索导航

近年来,网站搜索已经成为一种流行的导航方式。它非常适合内容丰富的网站(如维基百科),否则很难导航。搜索在博客、新闻网站以及电子商务网站也很常见。

搜索对于那些确切知道自己在寻找什么的访问者来说很有用。但包含搜索选项并不是忽视良好信息架构的借口。确保您的内容可供可能不知道自己在寻找什么或正在浏览以发现潜在有趣内容的访问者查找,这一点仍然很重要。

搜索导航的共同特点

  • 搜索栏通常位于标题或侧边栏的顶部附近
  • 搜索栏通常在页面布局的辅助部分重复出现,例如页脚

搜索导航的缺点

搜索最大的缺点之一是,并不是所有的搜索引擎都是平等的。根据你所选择的解决方案,你的站点的搜索功能可能不会产生准确的结果,或者可能会丢失一些东西,比如帖子元数据。对于大多数网站来说,搜索导航应该是导航的第二种形式。搜索是当用户无法导航到他们要找的东西时,他们会选择的备用选项。

何时使用搜索导航

对于具有大量页面和复杂信息架构的站点,您当然需要包含搜索功能。如果没有它,用户可能会感到沮丧,不得不费力地通过链接和多个级别的导航来获取他们想要的特定信息。

电子商务网站是另一个搜索很重要的领域,尽管电子商务网站的搜索结果是可过滤的和可分类的,这是至关重要的,取决于网站库存的大小。

飞出菜单和下拉菜单导航

飞出式菜单(与垂直栏/侧边栏导航一起使用)和下拉式菜单(通常用于顶部水平栏导航)对于健壮的导航系统非常有用。他们保持你的网站的整体外观整洁,但也使更深的部分容易访问。

飞出菜单和下拉菜单导航

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

常见特征飞出菜单和下拉菜单导航

  • 用于多级信息体系结构
  • 使用JavaScript和/或CSS隐藏和显示菜单
  • 显示在菜单中的链接是主项目的子项目
  • 菜单最常由鼠标悬停激活,但有时也可由鼠标点击激活

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

除非你在主导航链接旁边放置一些指示(通常是一个箭头图标),否则访问者可能不会意识到有一个带有子导航项的下拉菜单或飞出菜单。让这一点显而易见是很重要的。此外,下拉框和飞出框会让移动设备上的导航变得非常困难,所以要确保你的移动样式表考虑到这种情况。

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

如果你想在视觉上隐藏一个大的或复杂的导航层次结构,下拉框和飞出是一个很好的选择,因为它们让用户决定他们想要看到什么,什么时候他们想要看到它们。它们可以用来按需显示大量链接,而不会弄乱网页。它们还非常适合显示子页面和本地导航,而不需要用户首先点击进入新页面。

面/引导导航

分面/引导导航(也称为分面搜索或引导搜索)在电子商务网站中最常见。基本上,引导导航为您提供了额外的内容属性过滤器。假设您正在浏览一个新的液晶显示器,导航选项可能会列出大小、价格、品牌等内容。基于这些内容属性,您可以导航到符合您的标准的项目。

导向型导航对于大型电子商务网站来说是非常宝贵的,因为它们的库存非常多。直接搜索选项通常会让用户很难找到他们想要的东西,并增加他们错过某个产品的可能性。例如,他们可能会搜索“灰褐色”的产品,当你把它标记为“褐色”或“米色”时,即使这正是他们想要的。

分面/导向导航的共同特征

  • 主要在电子商务网站上看到
  • 通常让用户对不同的特征进行多次筛选
  • 几乎总是使用文本链接,按类别或下拉菜单分解
  • 通常与面包屑导航搭配使用

分面/导向导航的缺点

引导式导航可能会让某些用户感到困惑。此外,不能保证用户会查找您预定义的类别之一。

何时使用分面/引导导航

分面导航在大型电子商务网站上非常有用。它让用户更容易定制他们的购物体验,并找到他们真正想要的东西。它在其他目录样式的站点上也很有用。

页脚导航

页脚导航主要用作辅助导航,可能包含不适合主导航的链接,或者包含一个简化的站点链接地图。

在主导航菜单中找不到想要的内容的访问者通常会在浏览完后查看页脚导航。

页脚导航的共同特点

  • 页脚导航通常被用作一种对其他地方不适合的导航项的统称
  • 通常使用文本链接,偶尔带有图标
  • 通常用于指向非关键任务页面的链接

页脚导航的缺点

如果你的页面很长,没有人会想滚动到页面的底部来浏览你的网站。对于较长的页面,页脚导航最好留待重复链接并用作精简的站点地图。不应将其作为主要的航行形式。

何时使用页脚导航

大多数网站都有一些页脚导航,即使它只是重复其他地方的导航。考虑什么是有用的,什么是你的访问者最可能寻找的。

结论

大多数网站使用不止一种导航设计模式。例如,一个网站可能有一个水平的顶部栏作为主要导航系统,一个垂直的栏/侧边栏导航系统来支持它,以及用于冗余、方便和辅助页面的页脚导航。

在选择导航系统的导航设计模式时,必须选择支持网站信息结构和性质的导航设计模式。导航是一个网站设计的重要组成部分,有一个坚实的基础设计是必要的,它的有效性,以维持你的网站声誉

相关内容