顶级网络导航趋势

在过去的一年里,我们看到了很多增长和新的增长网页设计世界的趋势。在本文中,我将重点关注网站导航,以及网页设计师采用的模式,以帮助人们在他们的网站上找到自己的方式。这些导航趋势都适用于各种类型的网站,以及响应式网页设计跨越不同的屏幕形状和大小,所以这里有很多种类可以为您的下一个设计项目提供想法。

01.粘性导航栏

The sticky navbar here resizes itself on scroll, so as not to intrude on the content

此处粘性导航栏会在滚动时调整其大小,以免侵入内容

导航旨在帮助用户从A点到达站点上的所有其他点。将导航菜单保存在固定位置使用户可以从页面上的任何位置导航网站。当用户向下滚动以探索内容时,许多网站将其主要导航“粘贴”到屏幕顶部。

由于CSS和CSS,这变得更容易了JQuery插件现在许多网站主题都带有一个粘性导航栏作为默认设置,而且这种趋势在任何地方都没有任何迹象。一致的导航和可用性都很重要,但固定导航栏对于移动用户来说也很方便,因为移动用户的网站自然更长更薄。

你应该如何使用它?

如果你有一个包含大量导航项目的网站,那么保持它固定是个好主意。这是让访问者在网站上停留更长时间并增加总浏览量的绝佳方式。

但是,请确保导航栏不占用太多空间。它不应该太大,以至于它会阻止页面内容的主要部分。该网站美国杂志通过调整大小,当用户向下滚动时导航栏缩小,从而减少干扰,从而解决了这个问题。只要用户仍然可以使用页面内容,他们就可以从普遍可访问的固定导航中受益。

02.超级菜单

Hidden behind It's Nice That's hamburger menu is a wealth of options

隐藏在它的后面很棒汉堡包菜单有很多选择

随着杂志式博客的增加,大型菜单已经普及。它们与正常的下拉菜单不同,因为这些菜单不仅仅是垂直向下流动,而是扩展得更宽,通常包含多列内容。如果明智地使用这种技术效果很好,但对每个站点都不是很好。事实上,只有当你有足够的内容来证明一个大型菜单时,它才真正有用。

为何使用它们?

通过浏览相关内容,访问者可以了解您的博客或网站。如果您可以在大型菜单中提供更多内容,那么为什么不呢?

这种趋势不适用于移动设备,因为屏幕上没有空间。但是很多人仍然在台式机和笔记本电脑上浏览网页,因此有大量的观众支持大型菜单。

03.通用导航

A universal navigation appears throughout Disney’s website offering links to related products and theme parks

迪士尼的网站上出现了一个通用导航,提供相关产品和主题公园的链接

一些公司与多个品牌合作或拥有多个品牌,并在整个网站中包含通用导航。例如,迪士尼拥有主题公园,制作游戏,并制作电影和电视节目。无论品牌如何,在每个页面上保持这种通用导航是有意义的,以引起对其他迪士尼产品的关注。

这种趋势并不仅限于企业集团或控股公司。它有时用于网站网络,例如由网站拥有的网站纽约媒体。另一个很好的例子是在标题中混搭,链接到所有品牌的国际网站。

为什么用这个?

如果您正在使用更大的产品或品牌网络,那么将它们全部链接在一起以创建连贯的品牌标识会很有帮助。通用导航可以驱动整个网络的访问者,以帮助对不同的受众进行异花授粉。

04.垂直滑动导航

AWARD uses vertical navigation merged with the hamburger sliding door trend

AWARD使用垂直导航与汉堡推拉门趋势融合

越来越多的网站正在采用垂直导航趋势,当它运作时它确实运行良好。它在推动传统网页设计界限的投资组合或创意机构中特别受欢迎。

AWARD上面的例子是使用垂直导航同时始终保持可见的一个很好的例子。图标从侧面链接,因此您可以单击图标而不是汉堡图标。这是一种实验性的导航设计方法,但它可以在面向创意的网站上运行。

为什么用这个?

如果你想要一个远离传统网格设计的全屏布局,那么只能尝试这种技术。

从头开始创建工作垂直导航并不容易,并且使其在响应式设计中工作变得棘手。然而,如果你想要尝试并愿意尝试新的想法,那么垂直导航可能是一个令人耳目一新的转折。

05.全球隐藏的菜单

Computerworld keeps its navigation tucked away behind a hamburger icon

Computerworld将其导航隐藏在汉堡包图标后面

每个网页设计师都应该了解汉堡包图标及其在响应式设计中的用途。但随着人们越来越熟悉汉堡图标及其含义,越来越多的网站始终将导航视为隐藏。

这可能看起来很奇怪,因为它无法帮助访问者快速找到链接。然而,它确实通过从视线中移除导航来清除屏幕上的空间。有过各种研究表明大多数用户都在使用隐藏菜单。但随着更多人使用智能手机并熟悉汉堡包图标的重要性,这种趋势可能会发生变化。

为何使用它们?

全局隐藏菜单的最佳案例场景是精通技术的观众。这些访客识别汉堡包图标,他们知道这意味着“点击此处查看菜单”。因此,如果您正在设计技术博客或创建B2B数字代理商,那么这可以起作用。但如果没有,在采取这种方法之前要仔细思考,并确保你不要牺牲可用性来支持风格。

06.响应式子窗口菜单

Politico’s slideout responsive sub-menus, visible to mobile users

Politico的滑动响应子菜单,移动用户可以看到

在设计网站时,没有办法避免处理移动导航。它很受欢迎,它就在这里。设计师通常会在移动设备上隐藏一些导航链接,以帮助菜单更好地适应小屏幕。

但是许多网站都在遵循通过使用下拉菜单保留所有导航项目的新趋势。这通常需要汉堡包导航以及用于链接下拉菜单的切换图标。

您只能在移动屏幕或小型浏览器窗口中看到此技术。例如,政客移动网站使用小号加号(+)表示每个链接旁边的子菜单。

为何使用它们?

访问者应该有权浏览整个网站,无论他们使用什么设备。通过保持子菜单到位,您可以为访问者提供更好的浏览机会。

只需确保每个子菜单都清楚地标有图标,颜色变化或视觉效果。访问者应该知道点击/点击链接是打开菜单还是将其带到新页面。

07.顶级旋转木马

The New York Times uses a thumbnail gallery at the top of every post

纽约时报在每篇文章的顶部使用缩略图库

这种趋势在博客和大量新闻网站上越来越受欢迎。这些大型网站中的许多网站每天都可以发布数十篇(如果不是数百篇)新文章。

在页面顶部添加简单的轮播为访问者提供了查看最新文章的机会。这些故事可以动态策划或更新,并且可以使用缩略图或任何您喜欢的样式进行设置。你基本上可以看到另一个例子任何Vogue文章

为何使用它们?

如果您正在设计一个包含大量内容的博客,那么这种趋势可以为用户体验带来奇迹。访问者可以了解最近的故事,并通过鼓励访问者每次访问探索多个故事来增加网站的平均总时间。大多数发布大量内容的博客都希望提高访问者保留率,文章轮播是一种很好的方式。

08.目录

The Ahrefs blog sometimes offers users fixed 'quick links' within posts

Ahrefs博客有时会在帖子中为用户提供固定的“快速链接”

谷歌似乎喜欢长篇形式的内容,它正在推动作家在几乎所有内容上发布更长的指南。这对于网络内容非常有用,但它可能会使阅读体验变得混乱。为了简化操作,我注意到更多的目录框被添加到具有已定义部分的较长文章中。最值得注意的例子是维基百科,自成立以来一直使用ToC。

为何使用它们?

使用目录的最大原因是改善用户体验。较长的文章正在成为常态,在5000多字的文章上登陆可能会令人生畏。 ToC减少了恐吓因素。由于谷歌可以提供,它们在SERP排名中也很有用跳转链接基于目录。这是一种双赢的方法。

Notarize uses small all-caps lettering for links that blend naturally into the header

Notarize使用小型全帽刻字,用于自然融入标题的链接

这是一个微妙的导航趋势,但它在过去几年中迅速蔓延。似乎每个初创公司和专业企业都使用全帽文本样式来创建直观和对称的导航。

这些导航通常遵循非常相似的样式:

  • 全部大写
  • 小刻字
  • 无衬线字体
  • 额外的水平间距
  • 白色或非常浅的色调

每当我看到这样的导航时,它几乎是一个欢迎的事件。这种设计趋势已成为清洁,清晰,专业外观导航的标志性风格。

为何使用它们?

全帽导航菜单看起来很专业;它微妙但引人注目,它给用户一种信任感。如果您正在设计创业公司或企业网站,那么这种趋势可能是您的导航所遵循的最佳设计风格。但要小心:你不想最终得到一个没有灵魂或看起来与其他人相同的网站。

10.单页点导航

Gumtree uses the single page dots but doesn’t rely on fixed scrolling

Gumtree使用单页点,但不依赖于固定滚动

单页网站的兴起推动了许多新趋势成为人们关注的焦点。其中之一是点导航:位于屏幕左侧或右侧的一系列圆形图标。这些点中的每一个代表网站的不同部分。由于布局是一个长页面,这些链接会突出显示以指示用户的当前位置。我非常喜欢这种趋势的独创性,但如果人们了解这些点代表什么或如何使用它们,那么就会有一个问号。

为什么用这个?

如果您正在设计单页面布局,那么我建议您在页面顶部使用粘性导航栏。这样可以更轻松地查看每张幻灯片代表的内容以及页面上的信息类型。

但如果您不能(或不想)使用顶部导航,那么这些点功能是下一个最好的选择。甚至更好:结合两者!可以使用带有文本链接的顶级导航,并包含点导航图标。或者甚至在点旁边包含文字。有很多选项可供选择,它们都可以很好地运作。

相关文章:



翻译字数超限