网站设计中的导航不会发生很多变化。它包含几乎相同的元素,从一开始就始终与观众见面,并在顶部标题中谦虚地占据一席之地。自汉堡按钮普及以来,没有发生任何惊天动地的事情。但是,这并不意味着它的生活很无聊且很顺利。
作为UI的组成部分和良好用户体验的关键部分,导航永远不会使自己脱离设计或与趋势解决方案保持距离。它总是设法融入,但不会迷失在现代英雄区等待的奇观中。
设计师进行了各种实验,以使其适应新领域,从而提出令人激动的解决方案。这样的尝试创建的导航可以满足超窄,粘性垂直导航栏中的主流结果。
我们已经看到过狭窄的侧边栏。但是,这次有所不同。
更新后的版本更加紧凑,最小和优雅。它押注诸如竖排字体之类的流行功能。最重要的是,它贴在屏幕上并通过网站跟踪用户,并符合良好导航的所有基本要求。让我们考虑一些代表性的例子。
Austin McKinney
我们的第一站是Austin McKinney的个人投资组合。在这里,垂直导航栏仅包含要素:汉堡包按钮,指向社交媒体平台上的个人资料的链接,艺术家的姓名和职业。
得益于其白色,清洁和超窄的设计,它完美地融合了具有强大几何氛围的整体光线环境。它为在线访问者创建了必要的锚点,为他们提供了有用的信息。
Editorial New
社论新版背后的团队向我们展示了该解决方案非常通用,并且可以在不考虑颜色,样式选择或交互细节的情况下工作。此外,它是将自己定位为在线杂志的网站的理想合作伙伴。
在这里,导航栏仅包含一个元素-汉堡包按钮。它打开带有目录的滑出菜单。由于它停留在屏幕的左侧,无论用户在页面上的什么位置,他们始终可以快速访问链接,以便从一个部分跳转到另一部分。
注意,与前面的示例不同,这里的垂直导航栏是外围导航的一部分,可以使设计看起来完整。
The Crowdfunding Formula
众筹公式的垂直导航栏位于右侧。尽管我们不习惯在这里看到它,但它仍然可以完美运行。更重要的是,由于鲜明的橙色标志着徽标,选定的菜单链接和搜索按钮,侧边栏自然吸引了人们的眼球。
注意,它没有任何边界:它只是无缝地流入设计中。但是,得益于遍布整个页面的方形氛围和大量的空白,它在阳光下占据了自己的位置。
NSDI
NSDI背后的团队使用垂直导航栏不仅显示汉堡包按钮,还显示全屏滑块的分页。另一个独特的功能是所有元素都随用户移动。在这里,您可以看到超窄的垂直导航栏和转角导航,它们可以协同工作以创建舒适的用户体验。
与“众筹公式”非常相似,此处的导航没有独特的背景。但是,该团队使用对比色自然地将元素与构图相衬。
Cervelo Cycles
Cervelo Cycles具有或多或少的传统侧边栏,尽管这一事实并不能阻止其看起来时髦又令人耳目一新。它涵盖了所有菜单链接,徽标,搜索字段和CTA。它相对较宽,并且由于其纯黑色背景而在内容流中脱颖而出。
它的关键特征在于进行了小的转换。侧边栏摇身一变成的一切藏在里面的超窄的垂直线,一旦用户开始向下滚动。最小化版本的中央只有汉堡包按钮。但是,这正是在线访问者所需要的,以避免在内容丰富的环境中迷路。
Villa Covri
Villa Corvi的官方网站没有一个,只有两个超窄垂直导航栏。第一个仅包括以垂直节奏显示的社交媒体链接,而第二个则包括内部菜单和铭牌的按钮。连同上部标题一起,这两个元素增强了网站的细腻柔和的氛围。
请注意,只有右侧面板会粘在屏幕上,并随用户一起移动。它可以在平板电脑和手机上转换为水平线,从而在各种设备上实现一致性。
TedCo
TedCo的官方网站有两个重要内容。
首先,就像《社论新》一样,这里的垂直导航栏是角落导航的一部分。它看起来整洁,优雅且内容丰富。它完成了UI的复杂设计。
其次,浏览网站的路径是不常规的。用户无需向下移动,而是沿X轴向右滚动。在这里,垂直导航栏停留在原处,为用户提供了舒适的必需焦点。
Rogue Studio
Rogue Studio中的导航栏是该解决方案的一个很好的示例,其中所有导航链接都向受众公开。最重要的是,创意团队设法优雅地添加了徽标和社交媒体图标。
尽管与以前的组件相比,该组件看起来更加混乱,但是与它们相比,它具有一个显着的优势。它可以立即为用户提供他们所需的信息,而无需进行不必要的操作。
走向垂直的原因
有时,我们可以看到设计师对主要导航的激动人心的体验,为组件带来了新的活力。粘性垂直导航栏就是其中之一。即使它们不是崭新的东西,他们也会感到耳目一新。
有几个很好的理由来使用它们。首先,它们非常紧凑,是想要使用整个英雄区域进行娱乐的人的理想工具。其次,它们的大小适合当今占主导地位的各种小型设备。第三,由于粘性定位,它们是使用户体验更舒适的完美助手。
最后,持续显示艺术家的徽标或名称是增强品牌形象的简便方法。