使用下拉列表进行导航

时间:2010-09-10 09:46:32

标签: usability

使用下拉列表进行导航是一种好习惯吗?我正在制作一个具有一些层次菜单的Web应用程序。我考虑了几种选择,但似乎没有一种选择。以下是其中一些:

  1. 使用水平顶级菜单,并在选择顶级菜单时使子菜单显示在下方。问题:我的顶级菜单很多,不适合960px的宽度。儿童菜单也是如此,我希望能够增加它们。

  2. 使用水平顶级菜单(允许它们在不适合页面宽度时换行),然后在左侧栏上垂直排列子菜单。优点:子菜单可以垂直增长。问题:包装顶部菜单栏看起来很难看。如果我想要一个超过2个级别的分级菜单,我会被困住。

  3. 使用手风琴,例如Jquery手风琴 - 优点:垂直排列菜单留下足够的扩展空间。问题:手风琴将在左侧边栏上。我希望将菜单保持在顶部,并将整个宽度留在内容菜单下方。用户很难看到当前选择的菜单,因为手风琴似乎在页面刷新后重置为初始状态。我知道这可以修复,但我不是一个JavaScript专家。我还想用最少的javascript保持我的页面。

  4. 用户导航树。似乎是分层菜单的自然选择,但无缘无故,我不喜欢它。当没有javascript时,它无法回退。

  5. 使用下拉列表 - 我可以将下拉列表放在顶部,每个列表都确定其余内容。这似乎是满足我所有需求的最佳选择,但我不知道从可用性的角度来看,这是一件好事。

2 个答案:

答案 0 :(得分:1)

如果你有很多你不能简单地适应topnav的菜单项,我会考虑重新组织你的内容。

去找一个从未见过系统的用户并让他们尝试找到“x”,然后在一周之后询问他们是不是。

尝试将其分解为三个级别而不是两个级别。

看看一些大型网上商店,如亚马逊或电子商店。他们在顶部有抽象主题,然后当你向下钻取时,你会得到越来越多的子角落。

答案 1 :(得分:0)

看看这个页面,简单的CSS导航,但你可以创建一个非常好的菜单/子菜单等。

http://htmldog.com/articles/suckerfish/

在公司的几个网站上使用它,他们都称之为查看其类别的好方法。

示例:http://htmldog.com/articles/suckerfish/dropdowns/example/vertical.html
示例:http://www.yec.nl
示例:http://www.klaveryachtpainting.com

相关问题