一位读者向我提出了一个有趣的问题
当有多级导航时,您是否认为拥有一个顶层项目的实际页面至关重要?例如,关于 > 公司、创始人、历史。
关于页面上并没有真正值得放的东西,而这些东西不会出现在三个子页面上。在导航中,关于是否应该直接跳转到公司?是否不应该有公司页面,而其内容应该移至关于?
您多年来发现了什么最佳实践?
我正在想象这种东西

问题在于“关于”本身并不是特别有用。但它确实对子页面分组有用。
我认为无论如何“关于”链接都应该是可用的。这只是如何处理它的问题。
只创建一个中间页面
让父链接
http://website.com/about/
以及子页面
http://website.com/about/company/
http://website.com/about/founder/
http://website.com/about/history/
他们说关于页面上没有“值得”放的东西,但这只是内容整理的问题。您可以在那里写一些新的内容来介绍其他内容。或者展示一些详细的导航路径,鼓励他们深入了解。或者展示一些子页面的图像或片段。我相信你可以想到一些东西。
重定向中间页面
让
http://website.com/about/
重定向到
http://website.com/about/company/
这样 URL 保持良好且分层,并为您将来单独创建关于页面提供机会。
这可能感觉有点出乎意料,所以提供某种横向导航可能很不错。这似乎是可以用标签来实现的事情

跳过层级结构
如果拥有父页面真的毫无意义,那么 URL 应该清楚地表明没有父页面。
http://website.com/about-company/
http://website.com/about-founder/
http://website.com/about-history/
然后将重定向用于顶层导航选项。
将它们都放在一个页面上
将它们分开有什么价值吗?您可以使用 标签设计模式,所有内容都在页面上。或者只是制作一个长页面,网络可以处理它 =)。
URL 可以使用哈希值跳转到相关位置(或标签)
http://website.com/about/#company
http://website.com/about/#founder
http://website.com/about/#history
最佳实践
我不确定其中任何一个都比另一个更好。我认为这里的最佳实践是以不要的形式出现的
- 不要这样做,然后在下个月更改为另一种方式。酷炫的 URL 不会改变。
- 不要让您的下拉菜单 100% 依赖 JavaScript。
- 不要因为您还没有解决这个问题而让关于链接成为一个非链接。将其链接到某个东西或重定向它。
你们以前都遇到过这种事情吗?
很好的建议。感谢您在这个网站上构建的众多资源!
这就是我们要说的全部内容。选择前三种之一,并在整个网站中一致使用。第四个建议,标签,可能适用于某些页面,但并非所有页面都适用,因此它是一个页面组织选项,而不是顶层导航选项。
我们在我工作的网站上设计了完全独立的页面,每个页面都有链接到导航中子页面的链接。
它可以工作,但在可用性测试中,我们注意到很多人没有意识到这些页面的存在。他们悬停,看到子导航,然后点击其中一个页面。这对我们来说可以正常工作,因为它们不是必需页面,但我的建议是谨慎“隐藏”页面。这不是一个糟糕的技术,但它可能会有风险。
另一个稍微相关的问题是,当您在桌面浏览器中有一个子菜单在悬停时打开。由于您无法在触摸设备上悬停,因此您可能需要在点击菜单时打开子菜单,并阻止导航顶层页面菜单。这意味着顶层在某些设备上不可访问。
我们发现有些人点击所有东西,如果顶层没有做任何事情,他们会感到沮丧——特别是如果某些项目没有子菜单,因此某些顶层菜单项目是可点击的。因此,我们确实为本文中描述的几个原因创建了中间导航页面,但也确保这些可选页面中没有必要的信息。
我现在正在处理顶层链接/下拉菜单问题。由于触摸问题,我已经决定不再使用悬停激活的下拉菜单,但顶层项目作为一个链接阻碍了点击以显示下拉菜单。
我正在处理的网站是使用 Drupal 建立的,这使得自定义标记变得非常痛苦,尤其是在处理菜单时。您甚至无法拥有不以
http://
开头的菜单链接,除非安装一个愚蠢的模块或其他一些麻烦,因此只激活下拉菜单而不会跳转到任何地方的链接并不总是容易的选项。我正在尝试的解决方案是将菜单链接和下拉菜单切换作为单独的项目,因此您可以点击链接并跳转到某个地方,或者点击它旁边的三角形来切换下拉菜单。但是,我仍然不确定它的可用性。我知道我必须非常注意设计,以便它非常清楚地显示哪些是什么。
还有一个问题是 CSS 具有悬停功能,但无法处理点击,因此除非我想要用单选按钮或其他东西来进行黑客攻击,否则我的东西将依赖于一些 JavaScript。这并不是世界末日,但要牢记在心。如果我的脚本由于任何原因没有加载,那怎么办?
只是想让你知道,Chris,这篇文章中的图片没有显示出来。我从 cdn.css-tricks.com 收到了一个 502 错误网关消息。只是想通知你!
我同意 Robert 的观点。除非你能保证每个页面上的标签数量不会激增,或者利益相关者不会强加一个很长很荒谬的名字,否则标签会有风险。
我个人的意见是,如果你想不出在着陆页上放什么内容,那么你需要重新考虑你的层级结构。在这种情况下,我认为没有理由不能将关于页面与公司页面合并。
当然,一些知名框架的设计者将其导航设置成默认情况下根本没有着陆页,顶层链接只是打开菜单。Foundation 4 和 Bootstrap 2 都需要一些黑客才能让顶层链接在所有设备上跳转到实际页面。不知道最新版本是否解决了这个问题。
与 Reidar 说的内容类似,悬停菜单是一个错误(即使在桌面电脑上也是如此)。
我在可用性测试中尝试让菜单在点击时显示,而不是在悬停时显示,效果很好。从那以后,我只使用点击事件来显示子菜单。
是的,您必须使用一些 javascript,但只需要很少的代码。它还具有跨设备同样有效的额外优势。
嗨,Nick。这是一个有趣而大胆的断言,悬停菜单在桌面端也是一个错误。你发现了哪些关于悬停菜单的可用性问题?(或者问题都是技术上的?)我现在正与这个问题作斗争,试图为几个网站规划移动端断点。我尝试了在触屏和非触屏设备上使用点击下拉菜单,只是为了减少维护负担,因为要管理和调试两种不同的行为。
那么你创建了哪种行为呢?点击一次顶层菜单展开下拉菜单,点击第二次导航到顶层页面?还是点击第二次隐藏菜单?你是否考虑过手风琴式交互方式——比如某种展开三角形?我很好奇你是否对用户进行了测试,以及你发现了什么。
以下是我最近的一个例子:http://www.cynthiaeden.com(查看“书籍”和“系列”导航链接的操作。)
我过去使用过悬停子菜单。它们有效,但确实会产生意外操作。人们会在无意中将鼠标悬停在上面,或者在想要继续悬停时意外地移开鼠标。如果菜单有多层,问题会变得更严重。点击菜单效果更好。如果你在可用性访谈中观察用户使用这两种菜单,就会非常明显。
在上面的例子中,我唯一不满的地方是,我更喜欢用某种图标来标识下拉导航项,而这里我没有这样做。请注意,菜单在较小的移动设备上会有所变化。
@Nick –
那么,如果你需要一个二级页面会怎么样呢?
你是否只使用巨型下拉菜单直接跳到三级页面?
完全没有下拉菜单?
或者在菜单中提供某种“概述”选项,将你带到该页面?
我目前正在开发一个非常大的网站,我不认为取消二级页面是一个选项。
我尝试过回复一次,但看起来它被卡在某个地方了。
Paul:悬停菜单并没有那么糟糕。我使用过它们,但点击菜单更简单、更易用。此外,它们也解决了大多数问题。悬停菜单存在的问题是 a) 在页面上移动时意外触发它们,以及 b) 在浏览菜单时意外地使它们消失。点击菜单效果更好。我有一个很好的例子可以说明我的意思。我马上就发布。
Riobrewster:我尽量只使用一级子菜单。我认为二级菜单也可以工作,但总是尽量避免使用。如果我需要一个概述页面,我会把它包含在子菜单中。例如,在我将要提供的例子(下一条评论)中,我有一个“书籍”菜单项,并在其下的子菜单中包含“所有书籍”。
为了回答我自己的问题(关于:如果你必须点击该项才能展开下拉菜单,如何进入一级导航项的页面),这似乎是一个很好的模式,而且显然是成熟的模式
http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/
在页面底部,它提供了一些在菜单本身中使用“全部”或“更多...”链接的例子,因此
等等...
根据我的经验,拥有着陆页可以略微提高 SEO,因此出于这个原因,我们倾向于使用它们,并在该着陆页内包含指向子页面的进一步导航,这也为用户提供了另一种访问目标内容的方式。
当一个网站在主导航栏中显示一个“类别”下拉菜单项时,通常会出现一个几乎相同的问题/决定,就像我自己的网站(或者 WebDesignerDepot 或者其他任何知名网站)一样...在这种情况下,我总是更喜欢菜单项不链接到任何东西(最好不要在将鼠标悬停在其上时暗示它会链接到任何东西);原因是,至少在我看来,新页面会是一个毫无意义的?分散注意力...但嘿,每个人都有自己的想法!;)
拥有一个顶层页面,然后是子页面,在进行页面细化时可以为你带来优势。
假设你在以下位置有一个关于页:
company.com/about/
你可以在该页面上提供一些基本信息,并将其分解成不同的标题。在每个标题下,你都可以提供一段摘录和指向包含主要内容页面的链接。例如:
company.com/about/who-we-are/
company.com/about/what-we-do/
等等。
在每个页面上,你都会有一个指向其他页面的链接列表,包括指向顶层/主要关于页面的链接。
你实际上是在创建一个页面细化结构(谷歌 SEO 细化结构了解更多信息),这对于 SEO 非常有利,可以帮助更多相关信息的页面在 SERP 中排名。
考虑到所有这些因素,在菜单方面,最好能够在下拉菜单中点击父菜单(以便在不同设备上获得更好的用户体验)(如果你想点击查看子菜单,然后点击再次跳转到父菜单的 url,可以使用 js)。
我更喜欢首先创建 domain.com/about/company/。
谷歌会奖励这种做法。
实际上,谷歌更喜欢 domain.com/about/company.html
我不一定同意这种方法(而且它并不总是实用的,因为如果相关分类节点包含太多内容,需要实际的子部分),但他们的指南建议采用这种做法。
关于可用性,我们可以这样做:保留下拉菜单 - 以及关于页面作为独立页面,可选的小介绍文本;并包含指向其子页面的链接。你仍然可以将内容分散在几个页面上;但对于点击了主菜单项的人,你仍然可以让他们在层次结构中进一步导航。
当然;它添加了一个几乎没有内容的页面;但就可访问性而言,我认为它解决了两个问题 :)
我也有同样的想法;你可以将“关于”页面作为着陆页,并附带一段简短的文字,可能来自公司页面,因为很多“关于”页面往往会介绍公司历史。然后,你可以添加指向其他页面的链接或资产链接。我认为这主要用于使用触控界面或键盘界面的用户,并且由于它不会重定向到其他地方,因此可以避免用户产生“但我点击了关于,为什么我在关于/公司?”的想法。
如果在文本旁边放置一个加号、箭头或汉堡菜单图标,则必须点击它才能打开菜单,并且不需要“关于”页面。否则,“关于”链接应该是可以点击的,并且欢迎使用悬停操作。
我总是把它作为页面,出于几个原因。
为了 SEO。
我从来没有遇到过每个菜单项都有下拉菜单的情况,因此让一些菜单项是页面,而另一些菜单项不是(因为它们有下拉菜单)会打破模式,并且用户体验很差。
它使移动端导航更容易开发,并且更方便用户使用。你可以在移动端从导航栏中删除二级页面,不再需要点击汉堡菜单图标,然后点击菜单项,然后再点击页面。我不喜欢让用户进行多次点击才能进入一个页面。然后,我将二级导航放在页面内容下方的“小部件”中。在桌面端,这通常是侧边栏中某个小部件的一部分。
一般来说,我对这种情况的“首选”是:不,拥有一个顶层功能链接不值得。不过,就像任何事情一样,在某些情况下,偏差是值得的。
我参与的一个内部项目是一个管理系统,我们的客户可以通过该系统访问并查看他们的订单状态。其中一个顶层链接是“报告”,它允许他们选择各种指标,通过这些指标他们可以查看他们的订单历史记录。
那个顶层链接实际上会执行一些操作。它会跳转到一个包含各种指标图表概述的页面,让他们可以对自己的订单历史记录有一个“更宏观的了解”。然后,报告链接只是让他们深入了解每个指标的细节。
我认为这对悬停下拉菜单来说是一个很好的建议,但我认为对点击下拉菜单来说没有必要,因为顶层项目已经具有功能(展开自己的内容)。
我尽量遵循一些本该简单的假设:
1. 菜单中的所有项目都是可点击的
2. 菜单中的所有菜单项都是唯一的(没有重复项)
3. 所有页面都有真实内容
如果一个网站的深度足以拥有子菜单,那么我认为这些中间页面(我认为它们是二级页面或着陆页)应该包含提供该部分概述的内容。这可能包括指向子菜单页面的链接,但如果只有这些链接,我作为用户会感到沮丧,因为它是一种“浪费点击”。
在过去的一年里,我收到了越来越多的客户投诉,他们的用户不知道点击顶部的项目,而这些项目通常包含独特且有价值的内容(参见上面的#3)。因此,就像本主题中其他一些人一样,我切换到了点击触发的子菜单。幸运的是,我一直在使用很棒的 superfish 脚本,因此切换到 superclick 非常容易。不幸的是,这意味着我对 JS 相当依赖,但我可以接受。
当然,在可能的情况下,我正在推动更多的人完全放弃子菜单,除非有令人信服的理由。通常有理由,但我们不应该忽视这种可能性。
我最近在博客上详细写了关于这个问题的文章,所以我很高兴看到 Chris 在这里也提到了它。
为了回答读者的提问:我过去所做的是添加一个名为“概述”的链接,该链接将用户带到顶层页面,在本例中为“关于”。我这样做的原因是我已经实现了下拉菜单,使其在点击时显示,而不是在悬停时显示(出于我接下来将提到的可用性原因),因此点击“关于”将触发下拉菜单,但不会触发链接。
现在,读者的提问比是否为顶层项目创建页面更深层次地隐藏了一个(几个)问题:他/她是否应该使用下拉菜单?如果使用,应该使用悬停还是点击来触发下拉菜单?
真的有必要使用下拉菜单作为菜单的一部分吗?
自从我实现带有下拉菜单的主导航栏以来已经很多年了(我确实在几年前实现了一个带有巨型菜单的导航栏以及一个小型的实用程序导航栏[ * ]),更不用说悬停触发了。作为网页设计师,可以建议的一种附加值是在内页中放置辅助/三级导航菜单,使其始终可见。这样做在很多方面都有巨大的好处。
减少实现时间
更少的脚本需要管理
更少的 HTTP 请求有助于提高页面/网站性能,进而
更好的用户体验
对 SEO 更友好
如果正确执行,辅助/三级导航菜单可以更加可扩展
他/她应该使用悬停还是点击来触发子菜单?
许多人已经在这里提到了他们对点击触发下拉菜单而不是悬停触发的偏好和原因。+1给他们。
此外,这个话题已经讨论了几十年 这里,这里,这里,这里,这里,这里,这里,这里,这里 以及 这里。实际上每个人都同意,实现下拉菜单的最佳方式是通过点击触发。
[ * ] 当我实现上面提到的巨型菜单时,提供设计的代理机构(顺便说一下是 BBDO,是的,就是那个机构)建议使用悬停来触发巨型菜单。由于我负责前端开发,并且更了解,我实现了点击触发的巨型菜单。
但我更进一步。
巨型菜单不仅通过点击触发,而且
一次只能打开一个巨型菜单或下拉菜单(来自实用程序导航栏)。
点击任何其他导航项目将关闭任何打开的巨型菜单/实用程序下拉菜单。
点击导航项目将打开/关闭其相应的巨型菜单/实用程序下拉菜单。
在巨型菜单/实用程序下拉菜单中点击不会关闭它们。可见的巨型菜单/实用程序下拉菜单将保持打开状态,直到下一个页面开始加载。
点击巨型菜单/实用程序下拉菜单之外的任何地方将关闭任何打开的巨型菜单/实用程序下拉菜单。
您可以在此处查看该网站:http://www.lexisnexis.com/en-us/home.page
我还在这里创建了一个 CodePen 演示,您可以在其中看到我为那些巨型菜单和实用程序导航栏所做的简化版本:导航栏巨型菜单(在 .click 或 .hover 上)
这些都是关于这个问题的一些好的、全面的想法。我喜欢您示例网站上巨型菜单的 UX;它运作良好。让我感到困惑的一点是关于单级菜单和目标页面中的子导航的评论
您指的是哪个 HTTP 请求?用于控制菜单的 JS 调用?我认为这个好处被点击、等待、然后再次点击和等待的必要性所抵消。
非常感谢 Paul :)
你说得对,我可能应该说“更少的 HTTP 请求”,因为可能使用多个文件(JS 和/或 CSS)来控制下拉菜单。
是的,我指的是控制下拉菜单机制的 JS 文件。
当您在两种情况下都提到“等待”时,我认为理解用户点击菜单的主要目的不一定是查找二级菜单,而是他们试图找到他们最初要查找的内容。是内容驱动了点击。
因此,“等待”的情况在一定程度上是任意的。
如果您考虑悬停下拉菜单,用户也必须等待一些事情:悬停并等待(尽管时间更短)下拉菜单出现。再次悬停在他们想要链接的地方,如果该项目还有另一个弹出菜单,那么等待那个弹出菜单出现。明白了吗?“等待”几乎是不可避免的。然而,在我看来,在两种体验中它都不会造成负面影响。
现在,在我的刚才提到的示例中,我们甚至不谈用户在“等待”下拉菜单出现后不小心移开鼠标会发生什么。
这实际上是一个非常好的观点。我想我是在从一个已经了解导航结构的人的角度来看待这个问题,而不是从一个仅仅是在浏览的人的角度来看待这个问题。也就是说,我认为有一些情况下,尽早而不是晚点显示子级是有价值的,如果你能想到一个好的方法来做到这一点。垂直菜单适合显示两个级别的层次结构,只要项目数量不多。
问题是:多少算太多?
我认为,如果一个人已经了解网站的导航风格,并且回来寻找之前看过的东西,他们对导航类型的认知模型就已经设定好了。因此,无论是悬停还是点击菜单,此时实际上并不重要,因为他们可能已经准备好“接受”网站拥有的任何导航方式。
这很好,在这一点上,内容是整个体验的驱动力:只要他们找到了他们需要/想要的内容,谁会在乎导航风格:p
反过来,这让我要说:是内容本身决定了你的导航风格,而不是网页设计师/开发人员的意愿,而这往往是事实。
“关于”链接可以链接到“关于”页面的顶部。然后,每个子菜单项可以链接到该页面内的特定子部分(# 片段)。
将所有内容整合在一起,并为用户提供关于特性的选择。
对吧。
根据我的经验,我发现一旦下拉菜单有子项,用户就不会点击父项。
让我惊讶的是,我经常听到客户抱怨某个页面在菜单中缺失,而实际上它是包含子项的父项。:) 例如:一个客户想要在“关于”菜单中列出“隐私”和“条款”页面。我已经有一个“关于”页面。
我极力反对禁用父链接,因为它会与其他没有子项的菜单项产生不一致。因此,我只是将“关于”页面复制为子项。客户满意——实际上,他们并不知道!
我想我学到了一些东西,有时你需要遵循用户的行为,而不是试图改变它。
不是这个该死的难题!:)
我的想法……
理论上,将顶部链接设置为目标页面很好,但有时额外的内容太多,会淡化你想要分享的故事。少即是多,对吧?
我倾向于将顶部链接在悬停时显示其子菜单,并在点击时链接到其第一个子项。如果您重定向到第一个子项,那么在下一个页面上设置清晰的查找系统非常重要。无论是辅助导航还是面包屑,让用户知道他们在体验中的位置。
我喜欢关于悬停与点击的讨论。我更喜欢悬停,但点击也确实有意义。我希望看到一个关于它的可用性研究。感谢分享。
这解决了那些不知道点击顶部项目的人的问题,但会“惩罚”那些[我认为正确地]期望顶部项目在使用悬停触发的子菜单时是唯一页面的用户。这是一种夸张的说法,但我确实在那种情况下体验过沮丧。如果顶部项目和第一个项目具有相同的链接文本,那么你可以争辩说这是预期的行为,但我知道的所有网站所有者都不喜欢这样,因为它冗余。
你说得对。这绝对不是一个完美的解决方案。你在你的博客文章中很好地指出了优缺点。它真正取决于你面前的内容。