10 个现代网站导航技巧和想法

2023/12/21

您并不总是首先考虑的网站设计元素之一是导航。(尽管您可能应该这样做。)用户将如何移动设计?他们将如何找到对他们来说不明显的元素?

网站导航趋势发生了很大变化;从铺天盖地的大型菜单转向更轻、更简单的选项。这种想法有一定的价值——太多的选择可能会让用户不知所措。在他们需要的空间中提供他们需要的信息以提高参与度。不要把厨房水槽扔给他们!

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

1. 微妙的动画

网站导航

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

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

  • 屏幕右侧有一个时间轴滚动条,滚动条上有弹出到屏幕的点。

  • 导航在滚动时折叠到主页徽标(带有汉堡包)中,然后在悬停时弹出回到完整导航。(我喜欢的是,您实际上不必单击汉堡包图标即可恢复菜单。)

每个元素都包含简单的动画,强调导航中发生的事情,这样您就不会迷失在设计中。这种设计非常视觉化,这些简单的提示是增强可用性的一大好处。

2.提供充足的线索

网站导航

当导航被隐藏时(正如许多网站设计的趋势一样),您需要向用户提供大量提示。

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

  • 右箭头告诉用户有一些东西可以通过水平单击来探索。

  • 汉堡菜单告诉用户,如果他们没有立即找到解决方案,还有更多内容需要查找。

3.让它成为唯一的选择

网站导航

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

JYBH 拥有美丽的简约设计,背景中有纹理动画,屏幕中间有三个简单的导航选项。这准确地告诉用户他们下一步必须做什么。

4. 这个或那个

网站导航

沿着同样的思路,创建一个设计,要求用户做出选择:你想这样做还是那样?这种二元导航选项应该可以帮助人们快速准确地到达他们想要的设计位置。

如果设计有两个具有不同用户路径的目标受众,它的效果会非常好。

Seedlip Drinks 通过选择购买其产品或使用其产品来相当有效地做到这一点。这是一种聪明的零售方式。

该设计还包括一个微妙的汉堡图标——既然趋势已经转向两行,而不是三行,我们还能继续这样称呼它吗?– 带有附加信息。

5. 简单而传统

网站导航

有时,趋势的最佳用途是坚持使用有效的经典示例。简单、传统的导航菜单永远不会过时。

周文中的方法为全屏照片上的主导航提供了一个静态位置,而不会妨碍。一些菜单元素包括带有附加信息的“大型”卡片。(这些似乎几乎成为障碍。)

6. 超大弹出窗口

网站导航

移动设计实践也主导了许多桌面版本。超大的弹出菜单(几乎总是来自汉堡式图标)模仿了较小设备上的体验。

这种方法没有任何问题。(我永远不会因为一致的用户体验而责怪任何人。)

完成这项工作的关键要素是确保弹出窗口显而易见,包含所有必要的信息,并且不存在可用性问题(所有内容都易于单击或点击)。

7.尝试四个角

网站导航

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

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

由于简单的整体美感和易于理解的导航选项(公司名称、关于、工作和联系方式),它对于上面的设计来说相当漂亮。(毫无疑问,您将从这些点击元素中得到什么。)

8. 垂直堆叠

网站导航

当显示器变得越来越宽时,垂直导航菜单看起来确实是一个真正会起飞的想法。尽管更多的设计开始再次体现这种设计趋势,但它并没有完全实现这一目标。

TMC 在屏幕左侧使用垂直主导航(这是一个不错的选择,因为人们从左到右阅读),其中包含主要内容区域,然后是一个剪切内容区域,提示用户随设计水平移动。

设计的其余部分使用时间线点和箭头来引导用户浏览内容。这是一个有趣的设计。唯一的缺点是,如果陷得太深,就没有回头路了。

9.“瘦身翻转”

网站导航

您时不时会遇到一些意想不到的效果非常好的元素。这就是我们上面所说的“瘦身翻转”导航菜单的情况。

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

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

10. 下载导航

网站导航

既然我们了解了向下页面导航的想法,那么最好看看针对此概念的高度可用的方法。

续订在网站上有四件事需要深入探讨。每个都在主页的左下角注明。这种导航风格的优点在于它完全不隐藏,不会妨碍上面的内容,而且位于一个自然的位置,可以点击。

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

结论

当谈到现代导航时,请记住它不仅仅是一个菜单。导航是用户轻松在设计中移动所需的一切。

它可能以某种类型的主导航菜单开始,但可以包括时间线和滚动提醒以及帮助用户找到他们正在寻找的内容的任何其他内容。


更多新闻

网站设计如何融入智能交互,增强用户体验
人工智能给网站设计带来的好处
2024年科技行业网站设计风格趋势
高端网站设计的注重点有哪些?