网站导航的设计趋势发生了很大变化，从大型菜单正在向更轻松的、更小的方式进行选择。对于说到网站设计，你缩想到的第一个元素可能并不总是导航(尽管你应该要着重考虑到这一点)，用户如何在设计中移动? 以及他们如何找到对他们来说不明显的元素?

这种方式之所以被接受是有原因的，太多选择可能会压倒用户。 在他们需要的空间内提供他们所需的信息，以提高参与度。，而不是把所有混杂的信息全部罗列来让他们自己选择。

今天，我们将展示一些现代网站导航的设计技巧和想法，以帮助你更好的了解和进行相应的调整。

1.Subtle Animation

乍一看，你甚至可能看不到Buttermilk和Maple网站顶部的导航菜单。 但是有很多小动画可以确保你不会完全错过它。

· 当鼠标悬停在屏幕顶部时，会出现一个黑色半透明的底层。

· 进程轴滚动条隐藏在屏幕的右侧，滚动时或指示相应屏幕的位置。

· 导航在滚动时折叠成徽标(带有汉堡包导航)，然后在悬停时弹回到完整导航。

每个元素都包含简单的动画，可以强调导航在实际过程中发生的事情，这样你就不会迷失在设计中。 这种设计具有高度的视觉效果，这些简单的提示是增强可用性的重要奖励。

2.Provide Plenty of Cues

隐藏导航时，和许多网站设计趋势一样，你需要为用户提供大量的提示。

· Rally网站滚动条中的时间线样式导航可帮助用户了解他们在内容流中的位置(提示1)。

· 右侧的箭头则告诉用户水平点击可以探索一些东西。

· 汉堡菜单告诉用户，如果他们没有立即看到解决方案，还有在这里找到更多的信息。

3.Make it the Only Option

如果导航是屏幕上最重要的元素怎么办? 很简单，使其成为视觉设计的焦点。

JYBH拥有漂亮的简约设计，背景为纹理动画，屏幕中间有三个简单的导航选项。 很直接就告诉用户他们接下来应该要做什么。

4.This or That

沿着同样的思路创建一个设计，要求用户做出选择：你想做这个还是那个? 这个二选一的导航选项应该可以帮助人们快速获得他们想要的信息。

如果设计仅仅提供了两个具有不同用户路径的目标，则它可以非常好地工作。

在Seedlip Drinks中，你可以相当有效地购买产品或了解他们的产品。 这是一种聪明的零售方法。

该设计还包括一个微妙的汉堡图标，我们可以继续称它为趋势因为它已经演变成仅保留两行的样式来指示这里还有附加信息可以查看。

5.Simple and Traditional

有时，趋势的最佳用途是坚持一个有效的经典例子。 简单，传统的导航菜单永远不会过时。

Chou Wen-Chung的方法是为全屏背景上的主导航提供了静态位置，而不会妨碍它。

6.Oversized Pop-Outs

移动设计的实践经验也正在慢慢融入到桌面版本中，有些甚至占主导地位。 超大的弹出式菜单(几乎总是来自汉堡风格的图标)正式模仿在小型设备上的体验。

这种方法没有什么错误可言(我永远不会因为追求一致的用户体验而认为这有什么问题)。

实现这一目标的关键因素是确保弹出窗口显而易见，包含所有必要信息，并且不存在可用性问题(一切都很容易点击)。

7.Try Four Corners

这是仅适用于特定案例的导航创意之一——你所提供的仅仅需要4个位置给客户进行信息定位。

如果你这样做，屏幕每个角落的一个导航元素可以成为规划和设计现代导航风格的有趣的替代方案。

由于简单的整体美感和易于理解的导航选项 - 公司名称，关于，工作和联系，它在上面的设计中工作得非常好(毫无疑问，你将从这些点击元素中获得你想要的内容和信息)。

8.Vertical Stack

垂直导航菜单看起来像是一个由于显示器尺寸在不断变宽时得出的一个解决方案。 虽然越来越多的设计开始出现这种设计趋势，但它并没有完全实现和普及。

TMC使用屏幕左侧的垂直主导航(这是一个很好的选择，因为人们习惯从左到右阅读)与主要内容区域，然后是一个截断内容区域，提示用户可以与设计进行水平移动的交互。

设计的其余部分使用时间轴和箭头来引导用户浏览内容。 这是一个有趣的设计，唯一的缺点是如果你太深入了，那就没有办法了。

9.The “Skinny Flip”

你偶尔会遇到一些非常出色的意想不到的元素。 这可能就是我们称之为“Skinny Flip”导航菜单的情况。

前三个导航元素堆叠在屏幕的右侧。 它们采用时间轴样式格式，可通过滚动或单击进行切换。

汉堡包图标实际上隐藏在右下角，可以通过它来打开到屏幕底部的完整导航菜单。 这是我见过的最不寻常的下页导航版本之一，但似乎很有效(也许是因为有很多视觉线索，从颜色和元素开始，从左到右穿过屏幕，然后到达角落里的那个汉堡包)。

10.Downpage Nav

由于我们深入了解了页面导航的概念，因此最好看一下这个概念的高度可用的方法。

Renewal有四件事要在网站设计上深入探讨和研究。 每个都在主页的左下角被注明，这种导航方式的优点在于它根本不是隐藏的，不会妨碍上面的内容，并且位于自然位置。

它还可以作为准时间轴元素，因为导航切换的一部分，可帮助用户了解所有四个内容路径。

总结

在考虑现代导航时，请记住它不仅仅是一个菜单。 导航是用户轻松在设计中进行切换和移动所需的一切。

它可能从某种类型的主导航菜单开始，但可以包括时间轴和滚动提醒以及帮助用户找到所需内容的任何其他内容。