我们都在网上看过大型导航和全屏下拉菜单。它们在网络上很常见,尤其适用于有大量链接的网站。
但设计一个有效的巨型导航可能是一个真正的痛苦。这些菜单没有严格的指导原则,因此您必须研究其他人正在做的事情并尝试制作适合您项目的内容。
深层次类别
大型导航设备最有价值的设计风格是 柱结构。
这使您可以为链接指定“类别”并创建更深层次的链接,而无需使用多个弹出菜单。大型导航下拉列表可以跨越整个页面,因此您通常可以在一个下拉列表中至少容纳3-4列。
看看 Wayfair ,它使用了一种非常独特的下拉菜单。他们有一个“部门”的链接,你可以按类别浏览甚至子类别,如卧室>床头柜。
此链接旁边是“房间创意”的下拉列表,您可以根据房间进行浏览。此下拉列表包含链接旁边的图像,因此您可以更轻松地浏览选项。
没过多久就意识到他们将导航项目分类。这些趋势遵循类似的趋势,Wayfair的人员导航只需要 两个主要链接即可 实现!
另外,另一家电子商务商店 Puma 也有类似的柱状结构。
但是他们根据人口统计和项目细分类别,然后在每个meganav中找到每种项目类型的列(特色产品,服装,运动等)。
请注意,列具有自己的标题,这些标题从其余链接中脱颖而出。它创建了一个真正的列结构,因为您可以先浏览列标题并从那里浏览子链接。
对Lucky Brand 有类似的影响,但在设计上 有所改变。
它们的所有列都具有相同的颜色方案,但它们使用不同的排版。这可以使快速浏览变得更加困难,但它仍然可以使用。
Lucky的动画效果也很不错,所以这绝对值得考虑。
但是,如果您正在努力使用大型导航层次结构,请先尝试将链接组织到更深层次的类别中。
全宽下拉列表
这种趋势并没有在每个网站上使用,但我现在确实看到了很多。
巨大的大型导航菜单可以跨越页面的整个宽度,为桌面和笔记本电脑用户创造更多空间。移动用户通常拥有 隐藏的菜单, 因此他们从未真正看到完整的效果。
Pluralsight的导航 是一个很好的例子,具有全屏超级菜单。内容保持固定在与页面本身相同的宽度,但菜单确实跨越整个屏幕。
这是一个很酷的效果,因为它在菜单中创造了更多的空间。或者它至少给出了更多空间的视觉错觉。
如果你正在为更大的显示器运行一个巨大的导航,为什么不去全程?
Digital Spy 有一些非常相似的东西,他们的导航也包括类别中断。
“正常”下拉链接和缩略图链接之间存在均匀分布,直接指向文章。
但是,当菜单跨越整个屏幕时,内容仍然固定在与页面相同的宽度。
如果你能让它发挥作用,效果会非常好。
您甚至可以将列结构和全屏效果组合到一个设计中。
这就是你在OARS网站上看到的内容 ,它是伟大设计+出色用户体验的华丽典范。
混合图像和文本
我鼓励尽可能为所有网站添加更多图片。视觉效果有助于打破我们定期看到的所有文本。
超大导航菜单在大屏幕上效果最佳,因此可以安全地说有图像空间。在 西尔斯网站 打破了他们的资产净值为多类别,有两个链接和图片。
一些顶级类别有厨房用具,床垫和家具的图像。但更深层次的类别包括与餐具和餐具等东西的直接链接。
请记住,你可以使一个巨大的导航很高,仍然使它可用。所以 几乎所有导航都有一排图像 和一排文本链接的空间。
但你也可以选择较小菜单的路线,就像PlayStation的下拉菜单一样 。
他们的导航还包括图像与文本的良好混合,其中许多是单个页面的标签。
如果您有时间设计自定义图标,可以尝试使用自己的网站。在每个主要链接旁边添加一个图标,以便您拥有视觉效果和导航文本。
替代下拉技术
愿意尝试你的大型导航。对此没有严格的规定,而且很好的用户体验来自测试,看看哪些有用。
有些网站真正突破了下拉菜单的界限,包括自定义动画,多列,甚至是大型导航中出现的弹出式菜单。如果菜单可用且有效,那么这项工作做得很好。
但是如果你愿意尝试的话,你总是可以进一步推动。
Open 有一个典型的巨型导航菜单,在悬停时会扩展。但它使用了一种替代技术,可以 推下整个页面 ,为新菜单腾出空间。
大多数超级导航都显示在页面顶部,但是这一个会在将所有页面内容降低时动画下来。
对于每个网站来说当然不是一个完美的主意,但它是独一无二的。如果它适用于The Open的网站,那么它可以为其他人工作。
只是取决于你是否想尝试一下,并且可能 会对可用性进行一些 A / B测试。
另一个示例是在 Waterworks网站 上,除非您单击,否则不会显示下拉列表。
这些外观和感觉就像传统的大型导航菜单一样。但是他们通过定位不同的用户事件(点击)来偏离规范(悬停)。
它在角落里有一个小的“关闭”按钮,所以有一个简单的方法来关闭它。但这可能对每个站点都不起作用,对于非常高的下拉站点来说它最有价值。
随着您在自己的项目中推进大型导航创意,请牢记所有这些趋势。
大型导航菜单不断推进新的设计风格和技术。学习其他示例非常适合入门,但我们真的想出自己的想法,进一步推动您的菜单。