仅在必要的时候使用下拉菜单
下拉菜单并不是没有用处,他们在网上绝对有自己的一席之地,但它们也经常会被误用。总体说来,下拉菜单允许用户从备选属性列表中选出一个属性。
因为下拉菜单通常占用很少的空间,对一些设计者而言,它们成了最佳的导航方式。就在这种倾向大行其道的时候,下拉菜单的缺点也暴露出来。
下拉菜单中的链接可见性较低,用户将只能看到一个选项,除非菜单被全部展开。
当下拉菜单包含太多选项时,用户不得不通过滚动来查看选项。在这种情况下,传统的列表会更好一些。
用户在凭直觉浏览时,下拉菜单不是最先被察觉到的东西。在选用它们之前与普通的导航菜单进行测试和比较,看它们的效率如何,不失为明智之举。
然而,下拉菜单并不一定要很小。根据Jacob Nielsen 对下拉菜单的研究,所谓的“巨型”导航下拉菜单效果也不错。很显然,大的二维下拉面板通过对导航选项进行分组,把用户从不得不进行的滚动中解脱了出来,通过有效地使用版式、图标和工具提示,它可以精确地呈现用户选项。
下拉菜单能将内容组织成整洁的小元素,如果没有做好,它将和糟糕的布局一样。当多于两个级别时应避免采用下拉菜单。如果子菜单通过悬停展开,只要用户的鼠标指针离开它们,就会失去焦点。如果子菜单通过点击展开,将需要太多的点击操作,使菜单难于使用。
下面展示的网站(Brita.de)犯了这样的错误。菜单太难使用,因为即使鼠标指针轻微失去焦点, 你就得从头开始。注意工具提示,它挡住了导航信息。实际上,为了使子菜单可见而且可读,将下拉导航中的工具提示全部移除是个好主意。
广州网站建设,网站建设,广州网页设计,广州网站设计
![]() |
|
一个漂亮、整洁、合理组织的巨型下拉菜单,来自EA.com。 注意紧挨着“Games”和“Media”列表项目的可视箭头(visual indicators), 它们清楚地告诉用户在下拉菜单中将提供进一步的导航选项。 |
![]() |
|
Brita.de 的下拉菜单很难使用,它包含了多个层级的导航, 必须进行水平滚动,同时工具提示挡住了导航选项。界面不够友好。 |
避免使用多个下拉级别,这对于你正试图创建的导航类型来说,也许是个太过严格的限制。然而,有一个解决方案也许可以增进悬停功能和多级导航的可用性。一旦用户把鼠标指针移开菜单,下拉列表连同大部分菜单会立刻消失。这个解决方案是延缓它们的消失过程。或者增加一个单击功能,要求用户点击下拉菜单外部的区域来关闭它,这和遮罩层(Lightbox)的工作方式类似。
仔细看一下保时捷(Porsche)网站的菜单。它有多个层级,但是它的菜单有一个广阔的焦点区(focus range),所以你必须把鼠标移开一定的距离才能关闭它。这是一个很好的设计方案。
![]() |
|
保时捷网站有一个大的巨型下拉菜单。因为菜单有一个 广阔的焦点区,使导航变得友好易用。 |






