巨型菜单（有时拼写为“megamenus”）是一种可扩展菜单其中许多选项以二维下拉布局显示。它们是一个很好的设计选择，可以容纳大量的选项，也可以一目了然地显示较低级别的网站页面。
如以下屏幕截图所示，mega菜单具有以下特点：
- 大，二维面板分成groups导航选项列表
- 导航选择结构化的通过布局、排版和（有时）图标
- 一切立即可见-禁止滚动
- 垂直或水平从顶部导航栏激活时的形成因素;从左侧导航激活时，它们可能会出现超大型飞机（未显示）
- 菜单选项显示在悬停、单击或点击
正如NovaScotia和Moleskine的例子所示，超大菜单为图像和其他丰富内容提供了足够的空间。mega菜单中的图像可以帮助用户选择正确的选项。
巨型菜单还允许设计师展示网站信息架构的多个层次——在上述五个示例中的三个（Dave Ramsey、Game Stop、John Lewis）中，巨型菜单同时包含一级类别和二级类别。
Mega菜单击败了正常下降
我们从用户测试中知道，超级菜单是有效的。以下是一些支持这一经验事实的论据：
- 对于具有许多功能的更大网站，常规下拉菜单典型的隐藏用户的大部分选项.是的，您可以滚动，但（a）这是一个痛苦，（b）滚动隐藏菜单顶部的选项。因此，您无法在视觉上比较所有的选择;你必须依靠short-term memory. 人们脑子里的东西已经够多的了，扰乱短期记忆会降低他们在你的网站上完成任务的能力。超大菜单一目了然，用户可以看，而不是试图记住.
- 常规下拉列表不支持分组unless you use kludges, such as prefixing secondary choices with a space character to indent them. Mega menus let you visually emphasize relationships among items. This again helps users understand their choices.
- 虽然纯文本可能很精彩，但插图正如Moleskine的例子所显示的那样，它确实值得一口话。超大的菜单使得在适当的时候使用图片和图标变得很容易。而且，即使你只使用文本，你也可以使用更丰富的排版（例如，让你根据链接的重要性来区分大小）。
悬停时显示超大菜单的计时注意事项
如果巨型菜单是悬停时显示, one challenge is to distinguish between two different user intentions:
- 用户刚刚将鼠标移动到屏幕上的目标，鼠标轨迹与Mega菜单相对应的链路相交。
- 用户实际上会查看导航类别，并需要有关它们的更多信息。
第二种情况应该触发超级菜单，但第一种情况不应该。
要考虑这两个用户意图，请不要为Mega菜单进行响应时间太快速：鼠标应该保持静止0.5秒在显示悬停相关的任何内容之前，例如巨型菜单或工具提示。违反这一准则将使屏幕闪烁无法忍受当用户移动鼠标。只有在将指针停留在navbar项上0.5秒之后，才能假设用户确实希望看到其相关的下拉列表。
因此，时间应该是：
- 等待0.5秒。
- 如果指针仍悬停在导航栏项上，请在0.1秒内显示其mega菜单。
- 继续显示它，直到指针在Navbar项目之外，下拉栏0.5秒。然后，在小于0.1秒钟内将其拆下。
第3项的一个例外是：当用户将指针从navbar项移动到下拉列表中的目标时，最好的实现可以感知。当指针位于这样的路径上时，下拉列表应该保持可见。本补充指南涉及对角线问题当暂时th所采用的路径e pointer outside the active area. The dropdown shouldn't disappear when the user is on the way to point to something within it.
在上面的例子中，用户首先指向运动与休闲Navbar项目，现在想要选择男子服饰用品.在这两个斑点之间移动指针使它越过婴儿和儿童纳瓦栏项目。许多用户将如此迅速移动，指针将退出活动区域小于0.5秒。然而，旧的或悠闲的用户可能会如此缓慢地移动鼠标，即在它们仍然针对菜单项时，下拉会消失。很烦人。
将选项分组在Mega菜单中
主要分组指南是：
- Chunk options into相关集合，比如你在做了一个卡片分类研究用户心理模型的特征。
- 保持中等水平粒度. 不要为庞大的团队提供需要大量时间扫描的众多选项。相反，不要将单个组设置得太小，以至于mega菜单中有过多的组，用户必须花时间来理解。
- Use concise, yet描述性标签每组。请记住为网络写作：通过从最能承载信息的词开始和避免编造条款.
- 使单词简短直接；动词的基本形式（“shop”）通常比动名词（“shopping”）好。
- 区分标签。JohnLewis.com网站的礼品按利息和礼品通过场合例如，不要很好地工作。
- 订购群体。您可以使用功能中的固有顺序（如工作流程）或根据重要性来执行此操作，将最重要或常用的组放在左上角（假设左右语言如英语）。
- 每个选项只显示一次.复制选项让用户怀疑这两个事件是相同的还是不同的。而且，冗余使得整个接口更大、更麻烦。
保持超级菜单简单
“保持简单”的标准可用性准则也适用于大型菜单。就因为你能够把任何东西放进去并不意味着你应该放进去。简单性应用于交互语义的程度至少和它应用于表示层的程度一样。更少的选项意味着更少的扫描，更少的理解，更少的出错。
特别地，避免使用GUI小部件以及其他界面元素，它们比简单的点击更高级。超大菜单是一个短暂的屏幕存在，不应该取代对话框，这是更复杂的交互自然家园，可以更好地支持他们。在其他好处中，对话框有一个标准的解雇方法（即OK /取消按钮)，保留在屏幕上，直到它们被取消，如果用户需要看到框中隐藏的内容，可以四处移动。
类似的-但更糟糕的是-隐藏在一个巨型菜单搜索框。这不好有两个原因：
- 这个搜索框应连续可见而不是仅当用户激活mega菜单时才显示。
- 拥有GUI小部件（一个文本字段和一个命令按钮）使mega菜单成为一个重量级的交互区域，而不是一个简单的导航菜单。
无障碍
因为动态屏幕元素总是有可能导致可访问性问题，所以用屏幕阅读器和其他辅助技术对它们进行编码是很重要的。
即使正确编码，Mega菜单也会对使用屏幕放大器扩大屏幕的微小部分的低视网膜用户来引起问题。（同样的问题会影响智能手机和平板电脑用户。）使用小屏幕或屏幕放大镜，只有一小部分Mega菜单可能会看到。
例如，在johnlewis.com截图上面，屏幕放大镜将显示第一组，但不是礼品食品和酒精主题或本组的权利。缺失的阴影出现在整个菜单的右边缘，这是一个太微妙的信号，以帮助大多数用户，尤其是视力差的用户。用户可能会假设可见内容是所有可用的内容，因此，如果网站有许多低视力的客户，那么网站可能会失去订单（这是网站的常见情况）针对老用户). 拥有强大的菜单边框视觉信号是缓解这一问题的一种方法。
此外，超大菜单中的小选项会导致selection errors on touchscreens过度吹毛求疵的表演/隐藏行为伤害了运动技能受损的人。
有两种主要的方法来提高超大菜单的可访问性：
- 简单：不要打扰下拉目本身可以访问。相反，使每个顶级菜单选择可点击，导致常规网页在这里，您可以用简单、完全可访问的HTML显示所有下拉选项。
- 高级：使用jQuery插件从后端编辑站点，该插件将使Mega菜单屏幕阅读器可访问。这还需要对HTML和CSS的结构变化。
如果您是一家富有的公司和/或特别关注可访问性，那么您应该同时实现简单和高级特性。然而，大多数网站可能不得不采用这种简单的方法。
结论
超大菜单可以提高网站的可导航性。（当然，最好是测试）通过帮助用户找更多，他们会帮你的卖更多（或满足其他业务目标，如吸引捐款或传播有用的信息非营利组织或政府网站).
另请参见：关于设计不良的巨型菜单.
分享这篇文章：