10种网站导航的样式

网站设计的一个元素，你并不总是首先想到的是导航。（虽然你可能应该这样做。）用户如何在设计中移动？他们如何找到对他们来说不明显的元素？

网站导航趋势发生了很大变化; 从压倒性的大型菜单转向更轻松的更小的选择。这个想法有一些价值 - 太多选择可能会压倒用户。在他们需要的空间内提供他们所需的信息，以提高参与度。不要把厨房水槽扔到他们身边！

今天，我们将看一些现代网站导航技巧和想法，以帮助您做到这一点。

1.微妙的动画

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

当鼠标悬停在屏幕顶部时，会出现一个黑暗的覆盖层。

时间轴滚动条隐藏在屏幕的右侧，滚动时有弹出到屏幕的点。

导航在滚动时折叠成主页徽标（带有汉堡包），然后在悬停时弹回到完整导航。（我喜欢你实际上不必点击汉堡图标来取回菜单。）

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

2.提供大量线索

隐藏导航时 - 与许多网站设计趋势一样 - 您需要为用户提供大量提示。

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

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

汉堡菜单告诉用户，如果他们没有立即看到解决方案，还有更多可以找到。

3.使其成为重要选择

如果导航是屏幕上更重要的元素怎么办？使其成为视觉设计的焦点。

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

这个或那个

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

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

Seedlip Drinks可以相当有效地购买产品或使用他们的产品。这是一种聪明的零售方法。

该设计还包括一个微妙的汉堡图标 - 我们可以继续称它为趋势已经转移到两行，而不是三行？ - 附加信息。

5.简单而传统

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

Chou Wen-Chung的方法为全屏幕照片上的主导航提供了静态位置，而不会妨碍。一些菜单元素包括带有附加信息的“超级风格”卡片。（这几乎似乎妨碍了。）

6.超大弹出

移动设计实践也在许多桌面版本中占主导地位。超大弹出菜单（几乎总是来自汉堡风格的图标）模仿小型设备上的体验。

这种方法没有错。（我永远不会因为一致的用户体验而对任何人造成错误。）

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

7.尝试四角

这是仅适用于特定用例的导航创意之一 - 您需要四个主要位置才能将用户发送到。

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

由于简单的整体美感和易于理解的导航选项 - 公司名称，关于，工作和联系，它在上面的设计中工作得非常漂亮。（毫无疑问，您将从这些点击元素中获得什么。）

8.垂直堆叠

垂直导航菜单看起来像是一个在显示器不断变宽时真正起飞的想法。虽然更多设计开始再次出现这种设计趋势，但它并没有完全实现。

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

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

9.“Skinny Flip”

你偶尔会遇到一些非常出色的意想不到的元素。这就是我们称之为上面的“瘦子翻转”导航菜单的情况。

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

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

10. Downpage Nav

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

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

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

结论

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

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