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