最好的网站是可导航的网站。

从第一个页面加载开始,用户就应该知道他们在哪里,他们可以去哪里,以及如何到达那里。你的网站导航决定了成功的转换和反弹——它是网站不可缺少的一部分用户体验

虽然我们不能确切地知道每个游客在寻找什么,但我们知道大多数人喜欢点击导航.与网站搜索相比,点击链接更快,花费更少的精力,这意味着用户会从你的菜单中寻找指导,以便找到他们需要的内容。

我们也知道并不是所有的网站内容都是平等的。在导航栏中,您将希望突出显示用户最需要的页面,尽管这并不一定意味着模糊不常见的页面。

所以,如果你的网站有大量不同重要性的内容,将你的导航界面分为以下几个部分是很有用的主导航二级导航.这些术语是什么意思?它们如何应用于你的网站?

在这篇文章中,我们将学习网站的主要和次要导航的目的和区别,然后回顾两种常见的实现它们的方法。

下载我们的免费UX研究和测试工具包

尽管大多数多页面网站都有内置的主导航用户界面,链接的页面会有所不同。例如,一个电子商务网站的主要导航可以链接到不同的产品部分,价格页面,和/或支持页面。取苹果的首页-用户可以在这里搜索任何苹果产品,所以主导航链接到他们的产品类别页面:

带有主导航的苹果主页

图片来源

另一方面,非营利组织可能会在其主要导航栏中显示“关于我们”和“捐赠”部分。它是关于为需求页面提供一个入口。

二级导航让用户无需深入挖掘就可以访问这个细分领域的内容——你可以将“关于我们”、“常见问题”、联系信息和/或政策页面放在这个类别中。

例如,世界野生动物基金会将主要和次要导航界面合并到其网站标题中。注意主菜单和二级菜单是如何分离的,主菜单的位置是由它旁边的标志和全大写排版:

世界野生动物基金会主页有主要和次要导航

图片来源

如何应用主导航和辅助导航

如果你正在构建网站的导航,并且认为你需要主次导航,首先要确定每个链接是主次重要的。

这个步骤应该由参数和用户基础来决定,而不是你自己的观点。你可以通过以下几种方法对网站内容的重要性进行排序:

  • 页面流量:查看每个页面的页面分析,以区分流行和不流行。
  • 采访:与这两个客户谈谈他们倾向于如何使用你的网站,以及哪些导航方面可以改进。
  • 卡片分类:这是一个简单的活动,划分和可视化您的页面的主要和次要级别。看到我们的卡片分类指南的指令。

在浏览完你的内容后,你应该更好地了解用户倾向于从主页去哪里。您可能还会意识到,有些页面可以合并或删除,从而使站点更简单、更整洁。

要在你的网站的前端实现主要和次要的导航,你可以尝试结合分离菜单的方法。

合并后的菜单

在一个组合菜单中,用户访问辅助导航通过主导航,在单个动态菜单中显示。在页面加载时,只有主导航在菜单中可见。当用户通过鼠标悬停或按钮点击/按下与主菜单交互时,二级链接会出现在垂直下拉或水平弹出式显示中。

服装零售商Madewell这样构造它们的导航界面。每个主要链接显示了一个菜单的二级选项:

主要和次要导航的madewell网站

图片来源

鼠标移过触发器在桌面上打开下拉菜单时效果很好,但在触屏设备或辅助设备上就不太好了。最好的方法是通过设置下拉菜单来扩展触摸事件,点击事件,并按下“enter”/“return”键。

这种动态菜单技术很常见,因为它帮助用户访问分层的内容。通过设计,它显示了每个页面在站点结构中的位置,以及哪个类别包含哪些子类别。组合菜单还通过隐藏二级链接来释放页面空间,尽管这可能对喜欢一次查看所有选项的用户来说是个障碍。

独立的菜单

如果您可以腾出空间,可以考虑将主导航和辅助导航分离为两个静态菜单。在这种方法中,主导航菜单水平排列在页面的顶部,或者垂直排列在一侧。二级导航有自己的菜单,位置和布局由您决定。

分开的主菜单和二级导航菜单应该在视觉上彼此不同,主菜单的大小更大,在页面上的位置更突出。

加拿大高尔夫零售商很好地实现了双菜单方法,并将其与垂直菜单布局相结合:

一个高尔夫公司网站,bob全站app主要和次要导航

图片来源

对于这两种方法,确保在整个网站上都保持这种格式。不一致的导航元素导致了不直观的体验。如果访问者找不到他们想要的页面,他们就会感到迷惑和沮丧。

钉的导航

导航是任何网站设计中最重要的因素之一。不幸的是,这也是最具挑战性的成功之一——没有明确的指导方针和许多考虑。每个网站的导航方法会因内容类型、访问者基础和个人品味而不同。

但是,经过一些尝试,错误,和测试,你可能会发现主导航和次导航的组合是优化和增强用户体验的完美妥协,减少浏览摩擦,并推动转换和销售。

用户体验的模板

用户体验研究工具

最初发布于2020年9月28日上午7:00:00,更新于2020年9月28日