水平菜单与垂直菜单的优缺点?


11

我一直想知道是否应该优先使用水平导航菜单或垂直菜单。我以前在各种网站上都使用过这两种工具,并且可以看到每种工具都有其优缺点。

是否有关于此主题的具体数据?我对可访问性和可用性问题感兴趣。

Answers:


3

除了空间问题和易于扫描之外,还应考虑其他一些因素:

水平排列的菜单(水平排列的语言)意味着需要更多的鼠标移动才能从一项移至下一项。

但是,从水平菜单中的顶级菜单项转到其相应的下拉菜单要比从垂直菜单项与其相应的弹出菜单更容易。与下拉菜单相比,弹出窗口中的对角线问题大大放大了,因为共享边缘要小得多。

然后是定位速度的问题。垂直排列的菜单比水平菜单具有更多的“深度”。这意味着用户可以以更高的速度将鼠标移向菜单,因为在过冲的情况下它们具有更大的缓冲区。当然,如果您将水平菜单放置在文档的顶部或底部边缘(即无限深度),那么这是有争议的。

最后,我认为这是洗手。选择最适合您的设计,然后从那里优化可用性。您不想使用垂直菜单,如果这意味着在页面的其余部分下面创建一个巨大的空列。而且,如果您的布局必须为2000px宽,则不想使用水平菜单。


4

好吧,我是一名开发人员/程序员/编码人员。

这意味着,在回答此类问题之前,我总是会寻求一些有关设计的信息。我喜欢Jakob Nielsen的文章,因为它们是在发布前先进行研究的。

我认为这些链接可以提供帮助。

现在我的意见。使用水平菜单是主导航的第一个选项,特别是如果您考虑使用大型下拉菜单。

同样,使用水平面包屑作为辅助导航来帮助用户快速定位自己。

我喜欢垂直导航菜单,但它们往往类似于广告,这使用户对它们视而不见,因此,首先要确保您的垂直菜单不像横幅广告或Google广告。

其次,我更喜欢使用垂直菜单进行“上下文”导航,显示相关内容或小节项目。


好点子。我认为大多数具有2层导航(主要和上下文)的网站都使用垂直菜单。
冒犯君主

是。雅各布尼尔森做了一些研究,这些类型的问题...... :)
JoséNunoFerreira

0

如果您有一个或多个单词的菜单项,那么在需要滚动之前,在水平菜单中可以容纳多少个菜单项存在物理限制。因此,由于这个原因,我倾向于倾向于主/顶级项目的水平菜单。

关于可访问性(假设在视觉上还可以),可能没有太大区别,因为可以将它们标记为相同。例如,无序链接列表。


0

我将发布错误的答案的反面...

尽管我们从左到右阅读,但我们倾向于从上到下扫描。如果菜单项是垂直排列的,则如果菜单项位于彼此上方,则更容易快速进行比较。

如果您只有少数几个链接,则可以使用水平链接。保持简短但清晰的名字,且不要超过6-7个。当然,另一种选择是组合-水平放置几个“标题”,并将该类别中所有内容的悬停下拉菜单。


“我们倾向于自上而下扫描”是基于什么观察或研究?如果有发现,请解释。如果进行研究,请引用。“如果项目彼此位于上方,则可以轻松比较它们。” 怎么会这样?必须将项目加载到人的内存中才能进行比较,加载的速度越快,它们可以进行比较的速度就越高。在超短时记忆中,人的思维只容纳约7个项目,为超过7个项目进行设计是……远远超出了人类的能力;引用:工作内存容量-en.wikipedia.org/wiki/…–
错误

1
@blunders:它基于我在这里和那里读过的各种东西,但是我无法指出任何具体的研究。回复:比较项目-垂直比较容易,因为您可以同时进行左右比较。如果您正在寻找特定的单词,您几乎可以立即扫描每个单词的第一个或两个字母。水平地,您必须先阅读一个,然后再阅读另一个,并分别进行处理。我确定这是在雅各布·尼尔森(Jakob Nielsen)的网站上某处…
DisgruntledGoat 2010年

0

答案可能是两次都使用过,但据眼动追踪研究显示,眼睛以F形图案扫描页面,因此最好将导航保持在左上方或最佳。

两者也可以结合使用,例如顶部的水平菜单用于导航链接(家庭,关于我们,联系人等),左侧菜单用于类别,文章等。

关于下拉菜单要考虑的另一点是,它们可能会影响SEO。Search Engine Land的 Danny Sullivan 建议,下拉菜单可以通过在每个页面上建立许多链接来稀释链接权限,并且层次结构菜单可以更好地传递链接汁。另外,为什么要在一个下拉菜单中向用户隐藏导航元素,使他们可能错过想要的内容。


0

恕我直言,我倾向于将主要部分归类为“水平”菜单。

例如:

------------------------------------------------------------------------------
Home News Product
------------------------------------------------------------------------------

|      About Us          | |                                            |
|      Mission           | |      Here is describing content            |
|      Contact Us        | |                                            |

由于“主页”,“新闻”和“产品”是主要类别,因此我将它们保持在水平布局,而“关于我们”,“使命”,“联系我们”是主页中最具描述性的部分,因此,我将“内容显示”部分保留为垂直菜单,以便于访问。 。


0

你告诉我,很简单,什么更容易阅读:ABCDEFGHIJKLMNOP...Z或者

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
.
.
.
Z

阅读时,请考虑一下您的眼睛如何移动。在第一个示例中,它是---等。在第二个示例中,它是ZZZ等;表示您的眼睛以Z模式移动。使用Z模式时,与第一点相比,您的眼睛必须更多地考虑下一个信息点。一条信息与最后一条信息越接近,使用起来就越容易。信息越紧凑越好,您总是可以添加空间,但是到目前为止,某些信息仅会压缩。例如,我可以添加更多这样的空间,但是如果您将示例2的最长端作为测量对象,则长度仍会更短:ABCDEFGHIJKLMNOPQRSTU VWXYZ

我确定有人会发表研究之类的东西,甚至可能说我错了,但事实是我的逻辑很简单,以至于我理解它,这对我来说很有意义,并且我不需要花哨的报告来告诉我是对还是错...因为我猜想这份花哨的报告是没有意义的,而只是基于给定测试结构的数据样本...

所以你怎么看?


1
您似乎暗示水平总是更好?我同意这个特定的示例-菜单项非常简短。但是,一旦这些物品变得罗word,那么如果水平放置它们就会变得非常混乱。
MrWhite 2010年

@ w3d:是的,但这是一个不同的主题,这意味着它是与当前核心问题无关的另一个因素。您可以引入很多因素,但它们与手头的核心问题没有直接关系。例如:你好,你好,你好-确保外壳使它的易读性有所不同,但这是一个附加因素。
失误

2
他在说的是,伸缩性不好。当然,子菜单在设计站点时很短,并且在开发过程中只添加了一些项目-一年后,您手上出现了水平混乱。
cinqoTimo
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.