网站建设时固定垂直导航栏的使用案例

网站设计中的导航不会发生很多变化。它包含几乎相同的元素，从一开始就始终与观众见面，并在顶部标题中谦虚地占据一席之地。自汉堡按钮普及以来，没有发生任何惊天动地的事情。但是，这并不意味着它的生活很无聊且很顺利。

作为UI的组成部分和良好用户体验的关键部分，导航永远不会使自己脱离设计或与趋势解决方案保持距离。它总是设法融入，但不会迷失在现代英雄区等待的奇观中。

设计师进行了各种实验，以使其适应新领域，从而提出令人激动的解决方案。这样的尝试创建的导航可以满足超窄，粘性垂直导航栏中的主流结果。

我们已经看到过狭窄的侧边栏。但是，这次有所不同。

更新后的版本更加紧凑，最小和优雅。它押注诸如竖排字体之类的流行功能。最重要的是，它贴在屏幕上并通过网站跟踪用户，并符合良好导航的所有基本要求。让我们考虑一些代表性的例子。

Austin McKinney

我们的第一站是Austin McKinney的个人投资组合。在这里，垂直导航栏仅包含要素：汉堡包按钮，指向社交媒体平台上的个人资料的链接，艺术家的姓名和职业。

得益于其白色，清洁和超窄的设计，它完美地融合了具有强大几何氛围的整体光线环境。它为在线访问者创建了必要的锚点，为他们提供了有用的信息。

网站建设

社论新版背后的团队向我们展示了该解决方案非常通用，并且可以在不考虑颜色，样式选择或交互细节的情况下工作。此外，它是将自己定位为在线杂志的网站的理想合作伙伴。

在这里，导航栏仅包含一个元素-汉堡包按钮。它打开带有目录的滑出菜单。由于它停留在屏幕的左侧，无论用户在页面上的什么位置，他们始终可以快速访问链接，以便从一个部分跳转到另一部分。

注意，与前面的示例不同，这里的垂直导航栏是外围导航的一部分，可以使设计看起来完整。

网站建设

众筹公式的垂直导航栏位于右侧。尽管我们不习惯在这里看到它，但它仍然可以完美运行。更重要的是，由于鲜明的橙色标志着徽标，选定的菜单链接和搜索按钮，侧边栏自然吸引了人们的眼球。

注意，它没有任何边界：它只是无缝地流入设计中。但是，得益于遍布整个页面的方形氛围和大量的空白，它在阳光下占据了自己的位置。

网站建设

NSDI背后的团队使用垂直导航栏不仅显示汉堡包按钮，还显示全屏滑块的分页。另一个独特的功能是所有元素都随用户移动。在这里，您可以看到超窄的垂直导航栏和转角导航，它们可以协同工作以创建舒适的用户体验。

与“众筹公式”非常相似，此处的导航没有独特的背景。但是，该团队使用对比色自然地将元素与构图相衬。

Cervelo Cycles具有或多或少的传统侧边栏，尽管这一事实并不能阻止其看起来时髦又令人耳目一新。它涵盖了所有菜单链接，徽标，搜索字段和CTA。它相对较宽，并且由于其纯黑色背景而在内容流中脱颖而出。

它的关键特征在于进行了小的转换。侧边栏摇身一变成的一切藏在里面的超窄的垂直线，一旦用户开始向下滚动。最小化版本的中央只有汉堡包按钮。但是，这正是在线访问者所需要的，以避免在内容丰富的环境中迷路。

Villa Corvi的官方网站没有一个，只有两个超窄垂直导航栏。第一个仅包括以垂直节奏显示的社交媒体链接，而第二个则包括内部菜单和铭牌的按钮。连同上部标题一起，这两个元素增强了网站的细腻柔和的氛围。

请注意，只有右侧面板会粘在屏幕上，并随用户一起移动。它可以在平板电脑和手机上转换为水平线，从而在各种设备上实现一致性。

TedCo的官方网站有两个重要内容。

首先，就像《社论新》一样，这里的垂直导航栏是角落导航的一部分。它看起来整洁，优雅且内容丰富。它完成了UI的复杂设计。

其次，浏览网站的路径是不常规的。用户无需向下移动，而是沿X轴向右滚动。在这里，垂直导航栏停留在原处，为用户提供了舒适的必需焦点。

TedCo的例子

Rogue Studio中的导航栏是该解决方案的一个很好的示例，其中所有导航链接都向受众公开。最重要的是，创意团队设法优雅地添加了徽标和社交媒体图标。

尽管与以前的组件相比，该组件看起来更加混乱，但是与它们相比，它具有一个显着的优势。它可以立即为用户提供他们所需的信息，而无需进行不必要的操作。

有时，我们可以看到设计师对主要导航的激动人心的体验，为组件带来了新的活力。粘性垂直导航栏就是其中之一。即使它们不是崭新的东西，他们也会感到耳目一新。

有几个很好的理由来使用它们。首先，它们非常紧凑，是想要使用整个英雄区域进行娱乐的人的理想工具。其次，它们的大小适合当今占主导地位的各种小型设备。第三，由于粘性定位，它们是使用户体验更舒适的完美助手。

最后，持续显示艺术家的徽标或名称是增强品牌形象的简便方法。

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/261849.html