问题
当导航空间有限的情况下,用户可以方便的访问二级导航。
解决方案
当用户将鼠标悬停(hover)在主菜单项时,将水平导航与飞出式二级菜单结合使用。
何时用
对于那些想快速进入菜单项的有经验用户,通常有一个主页,所有的可点击项被分组在一个标签下。菜单项本身不链接页面。导航的空间有限,如果不考虑其他导航系统,如:目录导航(Directory Navigation)。菜单项应该在同一页面被找到,鼠标点击次数应该尽量小,也没有重新载入页面。
如何用
当鼠标悬停时显示二级菜单。在不覆盖其他菜单项的情况下向下或向右展开(从不向左)。飞出式菜单应该快速响应,否侧用户无法快速切换。结合面包屑(Breadcrumbs)使用更佳。飞出式菜单可以是横向的也可以是纵向的。
飞出式菜单的问题
*如果你离开菜单区很难选择,响应范围扩大使移鼠标移动在菜单之外的几个像素时也不会消失。
*飞出式子菜单不是一个好想法,很难选择(Fitts law)
*你必须使它看起来像菜单,如在标签上增加一个向下的小三角。
*确保它们在没有像Javascript这样影响可访问性的情况下正常工作。否则不能索引你的网站,搜索引擎的可访问性也受到损害。
*在隐藏飞出式菜单前使用延迟,如:250ms
*只有在使用水平菜单和垂直飞出菜单时,垂直区域鼠标指针需要移动的区域很小,通常是12-14px,也使得菜单在不需要时迅速被掩藏。
为什么
飞出式菜单是一把双刃剑,实际操作是其成功的关键。一方面,飞出式菜单节省了页面空间可以使内容区得到更好的展现。但是另一方面,因其隐藏导航,不能使用户一眼看到,可以称之为“肉之谜导航”(网络中的肉之谜导航描述了用户想确定链接在哪里极其困难的设计)。如果上述提及的几点执行的好的话,它可以在不破环屏幕空间的情况下快速进入导航。特别是当用户理解之后会对它们更有帮助。但另一方面,这种一次性的交互方式可能带来可用性问题。
更多案例
微软也在它们的支持网站中广泛使用。