美文网首页
Fly-out Menu飞出式菜单

Fly-out Menu飞出式菜单

作者: 宋爽 | 来源:发表于2015-02-06 16:37 被阅读0次

    问题

    当导航空间有限的情况下,用户可以方便的访问二级导航。

    解决方案

    当用户将鼠标悬停(hover)在主菜单项时,将水平导航与飞出式二级菜单结合使用。

    何时用

    对于那些想快速进入菜单项的有经验用户,通常有一个主页,所有的可点击项被分组在一个标签下。菜单项本身不链接页面。导航的空间有限,如果不考虑其他导航系统,如:目录导航(Directory Navigation)。菜单项应该在同一页面被找到,鼠标点击次数应该尽量小,也没有重新载入页面。

    如何用

    当鼠标悬停时显示二级菜单。在不覆盖其他菜单项的情况下向下或向右展开(从不向左)。飞出式菜单应该快速响应,否侧用户无法快速切换。结合面包屑(Breadcrumbs)使用更佳。飞出式菜单可以是横向的也可以是纵向的。

    飞出式菜单的问题

    *如果你离开菜单区很难选择,响应范围扩大使移鼠标移动在菜单之外的几个像素时也不会消失。

    *飞出式子菜单不是一个好想法,很难选择(Fitts law)

    *你必须使它看起来像菜单,如在标签上增加一个向下的小三角。

    *确保它们在没有像Javascript这样影响可访问性的情况下正常工作。否则不能索引你的网站,搜索引擎的可访问性也受到损害。

    *在隐藏飞出式菜单前使用延迟,如:250ms

    *只有在使用水平菜单和垂直飞出菜单时,垂直区域鼠标指针需要移动的区域很小,通常是12-14px,也使得菜单在不需要时迅速被掩藏。

    为什么

    飞出式菜单是一把双刃剑,实际操作是其成功的关键。一方面,飞出式菜单节省了页面空间可以使内容区得到更好的展现。但是另一方面,因其隐藏导航,不能使用户一眼看到,可以称之为“肉之谜导航”(网络中的肉之谜导航描述了用户想确定链接在哪里极其困难的设计)。如果上述提及的几点执行的好的话,它可以在不破环屏幕空间的情况下快速进入导航。特别是当用户理解之后会对它们更有帮助。但另一方面,这种一次性的交互方式可能带来可用性问题。

    更多案例

    微软也在它们的支持网站中广泛使用。

    相关文章

      网友评论

          本文标题:Fly-out Menu飞出式菜单

          本文链接:https://www.haomeiwen.com/subject/zstitttx.html