Loading...
墨滴

三二

2021/06/16  阅读:62  主题:默认主题

桌面左侧垂直导航

桌面左侧垂直导航:可扩展,响应迅速且易于扫描

摘要:垂直导航非常适合广泛或正在增长的信息架构需要,但是比水平导航占用更多的空间。

关键词:导航,信息架构,视觉设计

结论

垂直导航在桌面上可能是一个合理的选择,尤其是对于内容广泛,且正在快速增长的站点,或者只是想为用户显示特定类别的站点。

垂直导航也很容易适应移动端。请不要将垂直导航隐藏在汉堡菜单下,不要在类别中使用左对齐,关键字开头的标签(不仅仅是图标),并权衡其好处是否足以证明从内容区域占用空间是合理的。

二级菜单导致可发现性降低,交互成本增加
二级菜单导致可发现性降低,交互成本增加
Arbor Restaurant垂直导航轻松容纳13个全球导航类别。
Arbor Restaurant垂直导航轻松容纳13个全球导航类别。

垂直导航的好处

1、特定类别可提高可发现性并降低交互成本。

使用垂直导航消除了限制类别数量的视觉设计约束,使团队可以创建一个自然适合信息空间的信息架构,并向用户展示特定的高信息气味类别,无需深入二级菜单。

2、垂直导航为增长提供了空间。

垂直导航是未来导航可能会增长站点的绝佳选择-大型组织可能会不断发展其产品或内容,例如B2B,企业,政府,高等教育院校和医疗保健行业。

3、垂直导航比水平导航支持更有效的扫描。

心理语言学的研究表明,如果列表是垂直的,则列表中的视觉搜索要比水平列表更有效。人们能够以较少的眼球注视找到感兴趣的物品,这仅仅是因为可以从浏览中获得更多信息。

4、用户熟悉垂直导航。

Slack和Gmail均使用垂直左侧导航
Slack和Gmail均使用垂直左侧导航

5、垂直导航自然可以转化到移动设备。

垂直导航可轻松地从台式机转换到移动设备
垂直导航可轻松地从台式机转换到移动设备

垂直导航需要更多空间

image
image

与水平导航相比,垂直导航的主要缺点在于,它占用了更多的空间,因此,可供内容使用的空间更少。垂直导航通常会导致页面的内容与Chrome比率低于水平导航。

从大量研究中我们知道,用户对首屏上方信息的关注程度要高于对首屏下方信息的关注程度。

如果他们在首屏上看到的东西对当前的目标毫无用处,他们甚至可能根本不会滚动。(请记住,用户很快就会离开他们认为无用的网页。)

另一方面,垂直导航是一种非常完善的设计模式,大多数用户在看不到完整菜单的情况下就会知道要滚动。折叠上方可见信息使他们相信该网站可能有用。

垂直导航可用性准则

在左侧放置垂直导航,并使用引人注目的设计。

视觉注意力偏向屏幕左侧。加上我们经常看到右眼失明的事实(用户会忽略在页面右列中像广告的内容),这意味着在页面右侧进行导航会较小被用户注意到。(与从左到右的准则一样,也适用于从左到右阅读的语言。如果您的语言是从右到左阅读,则相反的建议适用。)

此外,请确保导航在视觉上很显眼。不同的文本或背景颜色和边框可以使其脱颖而出。

奥迪的设计系统使用高对比度和深色背景
奥迪的设计系统使用高对比度和深色背景

不要在垂直和水平方向上复制菜单

重复(就像大多数UI元素重复一样)是不必要的,并且可能会造成混淆。

BDO咨询使用了两个冗余的全局导航UI
BDO咨询使用了两个冗余的全局导航UI

不要将导航隐藏在图标后面

多年来我们建议为图标添加文本标签。文本不仅减少歧义,而且增加目标大小。但是,我们仍然看到一些网站假定其用户会立即理解图标的含义。

在导航中,一个单词胜过一千张图片。隐藏导航图标文本标签意味着用户很有可能会忽略导航。

在长菜单中,将不重要的菜单放在底部。

由于页面折叠导致的可用性问题,非常长的垂直菜单可能会导致无法滚动显示不可见的项目。

不幸的是,由于不同的用户使用不同大小的显示器,因此您不知道任何单个用户的页面折叠将在菜单上显示什么位置。

对于长菜单,请对项目进行优先级排序,以使那些可能不滚动而不可见的菜单成为次要的功能。

三二

2021/06/16  阅读:62  主题:默认主题

作者介绍

三二

微信公众号《教你画像素画》创始人