不管你喜不喜欢，反正汉堡图标是大势所趋。今年有无数的网站将这个小元素融入到他们的界面中，成为页面导航的重要组成部分。但汉堡图标并不是今年唯一的导航设计趋势。全屏导航、底部导航等很多设计手法都是网页设计师的最爱。今天的文章将总结出今年流行的10个导航设计趋势，并附上一些精彩案例，记得收藏。1.全屏导航当导航是整个网页设计的核心时，页面会是什么样子呢？只要合理规划整合，全屏导航其实是一项非常有效的技术。用户可以更方便地切换到不同的页面，内容变得更易于访问。全屏导航页面可以非常明显，也可以以更微妙的方式呈现。用户真的必须知道它是导航吗？不一定，如果你的设计足够合理，用户会在不知不觉中充分利用它的导航功能。2.底部导航大部分导航都会放在网页的顶部，这也是最常见的方式。顶部导航符合用户的阅读习惯，也符合网页设计的惯用逻辑。但是放在底部的导航栏更有趣。它的设计不再局限于顶部导航的设计规则。它可以设计得更大。在很多单页页面中，导航样式可以更加自由多样。但这种导航设计始终在底部，避免用户迷路，便于定位，便于返回首页。3.打破常规的垂直导航菜单设计的方法有很多，其中之一就是将导航菜单设计成垂直的。垂直导航设计并不是简单地从水平变为垂直。您需要重新考虑整个网站的布局以及结合内容的空间使用。最新的两种排版，一种使用汉堡菜单的隐藏导航菜单，另一种使用固定的侧边栏来承载菜单。第二种菜单的有趣之处在于它为网站设计开辟了一种新的视觉设计可能性。同时，这种导航在小屏幕上可以做成hover隐藏，需要的时候可以点击显示。4.无导航模式一些小型网站会选择使用轻量级的无导航框架来设计网站。这里需要注意的是，此类网站通常是单页网站。这种设计其实是可行的，尤其是作为预览、预览或者介绍功能的时候。如果你的网站包含很多页面，这种设计其实是不推荐的，虽然有些网站确实是这样做的，而且做得很好。QuincyRequin&Associies的问答页面就是这样设计的，每个问题都链接到一个单独的页面。这个功能的独特性让这个设计看起来并不突兀。5.滑出式菜单滑出式导航菜单流行了一段时间。这样的设计使得移动端的页面设计体验更加出色。当用户打开页面时，首先看到的是主要内容而不是菜单。给用户更好的第一印象。大家耳熟能详的汉堡包icon也在此次场合出现率非常高。当然，这种滑出式菜单的设计在大屏幕上也可以非常灵活的使用。响应式全屏滑出式导航也能给人愉悦的体验。毕竟，很少有桌面网页享有这样的“移动端”设计优势。.6.巨型菜单这种大导航菜单设计在几年前曾短暂流行过，多用于细分内容较多的企业站点。因为这种导航菜单的设计不适合在移动端展示，所以一直没有大规模流行起来。但现在设计师开始重新考虑今天使用这种大型菜单的可能性。Target作为一家大型零售企业，目前采用的就是这样的设计。这个巨型菜单的完成度非常高，两级菜单设计，第一级一直在页面上，第二级菜单占用的空间是固定的，看起来还挺整齐的。这样的设计会让页面看起来整洁干净。7、动画导航元素动画是近几年设计的重头戏，自然在导航中用的比较多。当运动融入导航设计时，它不需要过于复杂。一个漂亮的悬停动画，或者一个利落的跳跃效果，都可以用来引导用户。机箱内的导航设计也很贴心。导航在动态效果的帮助下扩展为彩色线条，增加了用户点击的区域。Motion不仅让用户知道他们在哪里，而且以更清晰的方式引导他们点击。细微的动效不仅能带来良好的视觉加成，还能给用户带来惊喜，鼓励用户操作，提示用户界面的边界。8.卡片式导航选项Pinterest就是一个典型的例子。它使用的卡片式导航几乎存在于网站的各个角落。它清晰、直观且简单。几乎所有的用户都可以在这个导航下找到自己想要的东西。每张卡片可以携带一个特定的类型，也可以容纳几个小分支。这种设计是免费的，并且充满了扩展性，你可以在这样的网站中来回点击，全天探索。Google的MaterialDesign的逐步推行，让这种设计为大众所熟知，并且越来越受欢迎。9、无按钮导航在绝大多数用户还不熟悉互联网的阶段，拟物化按钮设计是引导大家点击的重要手段。文本导航也有一个不断增长的市场。无按钮导航适用于大图像背景。这时候无按钮的导航设计足够简洁，同时也具有很强的可读性，并且能够与背景形成鲜明的对比。控制文本间距，确保用户有足够的空间阅读和点击。10.单页滚动导航当一个网站使用单页设计时，它的导航就是你的手指和鼠标。只要向下滚动，内容就会源源不断地映入眼帘。对于内容不多的网站，单页导航的效果其实非常好。这样的站点只需要一个简单的向下滚动动作，用户也期望滚动的结果。但是，这样的页面需要给用户足够的刺激和吸引力，促使他们浏览，所以一定要呈现给他们感兴趣的内容。优点：5个导航设计独特的网站下面推荐的5个网站导航设计都非常有特色，先打开网站仔细体会一下它们独特的设计。虽然Adwyse的设计者使用的是标准的汉堡图标菜单，但是当你点击图标时，导航会占据全屏，这点非常好。CaveaBieres你能找到这个网站的导航元素吗？设计师将导航隐藏在视觉故事中，非常好。SeeingData是一个完整的信息迷宫。您所做的每一次点击都会为您呈现一组数据集，为您提供不同的选择。看似与导航无关，但确实是导航。LudlowKingsley网站的导航隐藏在底部开始按钮旁边的三角形中。这种设计方式比较特别，鼓励用户点击或者滚动。NikeLiDyana网站也使用导航来讲述故事，但与大多数网站不同，导航会以更独特的方式引导您前往更有趣的地方。结论导航的设计多种多样且有趣，但是如何使用导航仍然取决于您的项目的具体特点。导航的目的是引导用户，梳理内容，强化流程。如果你从用户或设计目标的角度重新思考导航，你会发现导航有很多可能性。
