【摘要】

导航菜单不一定是一个文字链接的简单集合，它可以丰富地表示导航信息的层级， 甚至反应整个网站内容的层次结构。由于普通下拉菜单存在很多可用性问题，促使Mega drop-down menu应运而生，由于这种菜单真的很牛X，所以我叫它超级下拉菜单。相关测试证明了超级下拉菜单克服了普通下拉菜单的缺陷，值得推荐广泛使用。

【正文】

首先结合实例，我们先分析一下超级下拉菜单是什么样子的。

1.巨型的、二维的面板将导航选项明确的信息分组；

2.通过布局、版式和图标等手段来组织导航选项的内容；

3.一次性、快速地发现所有信息，无需滚动；

4.当主导航在页面顶部时，可垂直或水平展开菜单；当主导航在页面左侧时，可以飞出的形式展开菜单。

其次，我们来看看超级下拉菜单之于普通下拉菜单的优势。

1.一目了然

对于大型网站来说，普通下拉菜单通常隐藏了大多数用户需要看到的选项。虽然通过滚动可以解决展示的问题，但由于用户无法直观比较所有的选项，他们不得不依赖短期记忆来记下扫视过的信息，记忆力的好快直接影响了完成任务的效率。尤其是下拉菜单过长时，普通下拉菜单就更让人苦恼。

而面对复杂的网站（尤其电子商务网站）超级下拉菜单充分体现了“一目了然”的原则，全部信息尽收眼底，用户无需承担记忆的负担。

2.明确分组

普通下拉菜单层级和分组都不明确，一般是在二级菜单名称前加一个“ – ”，或者缩进处理。

而超级下拉菜单由于包含的信息众多，所以从信息组织、布局、视觉表达上均强调了选项之间的层级和分组关系，帮助用户了解他们的选择。

3.信息可视化

普通的下拉菜单一般只适用文本链接，我们需运用排版、文本样式来区分不同选项的层级关系和重要程度。

而超级下拉菜单可以通过使用图标、图片、提示等丰富的形式，让选项信息可视化，更直观，更容易理解。在windows Word 2007的下拉菜单中用图标代替了文本，且鼠标移上每个图标时显示提示信息，帮助用户做选择。

接着，重点切具体地研究下超级下拉菜单的应用规则。

我所说的规则是针对超级下拉菜单的，对普通下拉菜单同样适用的规则此处省略××字。

1.响应速度

响应速度是设计用户界面时要重要考虑的因素之一，之于超级下拉菜单也不例外。一般界面元素必须在短时间（0.1秒内）作出反应，好让用户觉得是他们操作导致了屏幕上的变化，过慢的响应使他们感觉操控电脑与自己无关，所以响应需要及时。但是针对超级下拉菜单的特点，速度过快也不太好，用户要浏览的信息众多，如果鼠标不小心移出菜单就关闭菜单的话反而干扰用户的操作。

因此，在设计中我们应该注意响应速度的设置，并且针对不同的系统和浏览器予以测试，保证它的可用性。如何设定这个时间呢？根据尼老爷多年的实验得出以下建议：

A.鼠标在导航的某个选项上悬停0.5秒。

B.如果鼠标仍停在这个选项，则需要在0.1秒之内展开超级下拉菜单。

C.如果鼠标移出导航选项，且停留在导航以外区域超过0.5秒，则在0.1秒内收起超级下拉菜单。

D.对角线原则：如果鼠标如下图的路径左上至右下滑行，期间会移出导航选项和菜单的区域，在这种情况下应该保持超级下拉菜单的展开状态。虽然多数用户不存在这个问题，但是针对老年人和行动不便当用户应该适当的加长这个时间。

2.合理的组织菜单中的众多信息

超级下拉菜单包含的信息从形式上有文本、链接、图标、提示等，从内容上又包含多级导航选项、网站流程、具体的产品信息等，合理的组织这些信息，明确了分组，才能是超级下拉菜单发挥真正的作用。从主要分组的准则是：

A.按照信息的相关度打包。例如可以通过卡片分类的方法研究用户心智模型，从而将相关度高且用户认可的信息集合在一个组。
B.保持中等水平的粒度。不要在一个分组提供过多的选项，降低用户扫视这些信息的时间。相反，也不要划分的太细，这样用户需要花更多时间去了解每个分组的含义和区别。

C.使用简洁、描述性、标签化的文案。Web产品的文案有个准则：让用户在扫读时通过关键词抓住意思，避免使用专业术语。
-使用简洁、直白的文案；
-不要在同一个菜单中使用雷同的用词。

D.按信息分组布局。可以根据分组信息的重要性或使用频度来排序、布局，并通过视觉手段明确分组和层级关系。

E.不要出现重复的选项信息。不要让用户困惑，去除冗余的信息。

3.保持简单有效

按照可用性的标准，让超级下拉菜单“保持简单”，我们可以在菜单上做很多事，但并不意味着我们应该这么做。

A.用户真正需要的是一次点击达到目的，不要为了使菜单看上去很高端就乱用花俏的交互效果和功能。

超级下拉菜单是一个快速跳入跳出的控件，而不是对话框，并非越复杂越好。有的超级下拉菜单有右上角会有一个关闭按钮，用户需要快速的点击-查询-跳转，当用户将鼠标移动到导航的其他选项或页面其他区域时，当前的菜单会自动关闭，所以这“关闭”是没有必要的。而对话框可以很复杂、很炫，如果他们不想用了就关掉它，嫌它碍事可以挪到其他位置。

B.超级下拉菜单适用于网站的导航、浏览，对那些需要持续可见的、不能被中断的操作是不适用的。

举个反例，有的网站把导航栏中“我的帐户”登录设计在一个下拉菜单中，用户在填写表单的时候鼠标可能会移到菜单外，于是菜单就收起不见了，这个设计就妨碍了用户的操作。简单而有效的方案是直接把“我的帐户”登录链接到一个全新的页面。此外，全局搜索框也是个例子，没人会把它放在一个下拉菜单里，当然下图是个意外。

C.尽可能的避免信息过载。

不要因为超级下拉菜单巨型、有很多空间就扔很多的信息进来。越少的选项信息就意味着越少的扫读时间，同时减少理解的成本，少出错。

4.无障碍操作

提高超级下拉菜单无障碍操作，可以通过以下几种方法：

A.简单：不要妨碍下拉菜单的访问，使导航中的每个选项保持可点击，指向的页面链接也是正确的。

B.快捷：通过快捷方式访问。例如Word2007中，按一个字符选择以及菜单中的项目，并显示相应的超级下拉菜单。在菜单的每个选项旁边显示快捷提示。这样用户通过一两个字母就可以顺利快速的操作，无需记忆，而且理解成本更低。

C.兼容：完成超级下拉菜单的设计后，实现阶段我们应该注意显示器和浏览器等的兼容问题。保证大多数的用户可以顺利浏览到超级下拉菜单的所有信息。

【后记】昨天在工作中遇到一个关于导航的问题，一小撮er不明真相的群众就“是否需要引入超级下拉菜单”的话题热烈讨论。本想作为论据把尼老爷的文章翻译一下的，不过看了看太麻烦，还是在自己消化的基础上小结了一下。如有跑偏，请大力拍砖^_^。

【参考文献】http://www.useit.com/alertbox/mega-dropdown-menus.html

http://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/

http://hi.baidu.com/numetal/blog/item/46245055e1c1ab163a293582.html

Tags: mega drop-down menu, navigation, UX, 导航, 巨型下拉菜单, 超级下拉菜单

This entry was posted on 星期三, 九月 30th, 2009 at 19:04 and is filed under 达-練習簿. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.