10种现代导航菜单

今天我们将讨论导航。我们都知道,它是UI的一个关键元素。你能想象一个没有它的网站吗?我打赌你做不到。总有一组链接位于页面的某个地方。在设计方面,导航经历了变化,有自我改进的趋势。此外,解决方案,一旦他们为自己开辟了一个利基,永远留在网页设计师的武器库。

尽管依赖于UI,即使是过时和乏味的菜单也可以派上用场,但是趋势决定了规则,所以总有老师的宠物。2015年有了一套更好的导航系统。我们将介绍10种现代导航风格,以及另外两种不属于这些类型的导航解决方案。

现代导航解决方案

1. 汉堡菜单按钮

这是最受欢迎的选择,当它涉及到收集所有的导航链接在一个屋檐下。它是移动友好的,微妙的,时尚的和动态的。虽然它的形式(由三行依次放置的内容组成)保持不变,但是包含链接的内部部分是不同的:从结构整洁的列表到基于图像的项目集合。

Nemiroff显示一个使用汉堡包菜单按钮。它与在页面上流行的技术氛围和几何感觉完美地结合在一起。它打开了一个全屏窗口,巧妙地平衡了图像和文本。

Nemiroff

2. 固定居中布局中的导航

分散在“欢迎”区域周围的导航看起来新鲜和原始。通常,它可以在有创造力的人的个人投资组合中找到。它为主人提供了大量的自由活动空间。唯一的缺点是该方法适用于包含四个项的菜单。

Handhy Hutomo看起来就很讲究。占主导地位的宽敞感觉达到了令人印象深刻的效果。搭配一个最小的解决方案,它设置的项目有别于其他。这种方法非常适合这里,增强了美学上的一致性。

Hendhy Hutomo

3.全屏多媒体导航

图像和视频经常被用作菜单项的视觉支持设备。由于现代技术允许在不牺牲功能、可访问性和效率的情况下整合大量的多媒体,导航变得越来越复杂、丰富和动态。

Sprindrift赛车提供了多种移动工具。有一个汉堡包菜单按钮,页脚导航和一个引人注目的基于图像的导航,它占据了整个屏幕,照亮了项目的重要部分。因此,页面看起来很有吸引力和吸引力。

Sprindrift赛车

4. 互动导航

交互式视频、虚拟漫步、静态场景加上动态特性,这些都是由非标准导航来吸引注意力的。尽管它们缺乏与浏览器和设备的完全兼容性,但这是一个巨大的飞跃,它向我们承诺,网络将变得更加复杂、令人印象深刻和引人入胜。

Twenty Years of Okean Elzy 是一个开创性的艺术项目,在前沿技术的帮助下,被巧妙地带入生活。它提供了一个小冒险通过邪教音乐集团的历史。尽情享受一次奇妙的互动散步吧。

二十年的奥肯·埃尔兹

5. 滑出式菜单

与汉堡包按钮非常相似,滑出菜单的概念是从移动ui借用而来的。由于其轻便和紧凑的体积,它得到了广泛和大量的人气。它由一些通过文本或图标呈现的视觉线索支撑。传统上,它是从左边滑出来的。但是,在某些情况下,菜单会从右侧、顶部甚至底部跳转。

谢尔盖·马诺的个人作品集是这一主流思想的生动代表。相对较大的实体面板从左侧出现,占据了屏幕的第三部分。它为用户提供了导航,同时也为在线观众提供了欣赏艺术家精彩作品的机会。

谢尔盖·马诺的个人作品集

6. 静态侧边栏导航

几年前,静态边带很受欢迎。尽管它们似乎让位于更时尚、更紧凑的解决方案,但许多博客和在线杂志仍然从中受益。更重要的是,它们对于企业用户界面也很有用。它们为链接列表提供了视觉权重,也让用户感觉更舒服,因为导航总是在你的指尖。

Planex利用一个静态的纯色面板,坐在左边,有效地显示所有重要的链接。虽然右侧可以向下滚动,但菜单始终保持在同一位置。

在内

7. 流线型的导航条

和汉堡菜单按钮一样,这种导航去年也占据了主导地位。这是一个优雅和时尚的方式来显示项目的主要环节。包括不超过七个项目,它经常占据右上角或中央处置。

Proske-如此壮观的照片背景,一个流线型的导航栏似乎是一个理想的选择。它不仅让用户享受风景如画的城市景观,而且不会转移用户对标题的注意力。它与画布形成了鲜明的对比,吸引了网上访问者的目光。

Proske

8. 巨大的下拉菜单

巨大的、多媒体丰富的下拉列表是展示行业巨头的网站的选择,如著名的体育品牌、国际电子商店或在线报纸。它是一个复杂的多功能组件,覆盖了整个屏幕的宽度。它平衡了文本、图像、视频,甚至一些额外的功能,如购物车或天气小部件。

阿迪达斯足球

有一个巨大的下拉菜单,涵盖了所有种类的信息。尽管如此,它的工作足够和相当快,没有超载的页面。信息布局整洁,结构清晰,组织有序。

阿迪达斯足球

9. 页脚导航

这种方法类似于streamlined导航栏。它发生在页面的底部,当用户向下移动时,它保持在它的位置。虽然这完全出乎意料,因为我们习惯于在UI的上部查找菜单,但是它在某种程度上对概念有好处。

Déjà vu 有这样一个特殊的和引人注目的动画在他们的首页,它吸引了所有的注意力。浏览整个项目的工具很像社交媒体图标,它们位于页面底部,非常合适,而且无缝衔接。

似曾相识的感觉

10. 并行驱动网站的导航

由视差驱动的项目通常选择简单的基于图形的导航。这些圆圈或破折号很少伴随标题,是用来帮助观众不迷失方向。

《声音的循环》(Circle of Sound),三星出品利用了几行相应的标题,与环境完美地融合在一起。该方法是对设计的补充,为用户提供了必要的视觉提示。

《声音的循环》(Circle of Sound),三星出品

没有导航

随着单页网站越来越受欢迎,放弃导航的解决方案也开始流行起来。它适用于一个或两个部分的项目,清晰和可预测的故事线或最小的布局。

HWAIW是省略菜单的典型例子。这是一个完整的说明网站,有一个相对较小和明显的结构。滚动条足以有效地在其中导航。

HWAIW

原始导航

有许多项目的导航与上面列出的那些不同。在这个领域,你可以尽情发挥你的想象力。所以很难归类。我们想要描绘的代表性的例子,当然从人群中脱颖而出:

Beloesuhoe的网站有一个导航,似乎是一个现实生活场景的一部分。这一招一箭双雕:它向在线观众介绍了团队和工作场所,并在主菜单上增加了一个转折。

Beloesuhoe

结论

显示导航的方式有很多种:从传统的流线型导航条开始,以智能交互标记结束。这些趋势每年都会出现,从而充实了工具包。谁知道也许浮动动作按钮将取代汉堡菜单按钮在2016年。嗯,我们会看到……

你最喜欢什么类型的?哪一个用起来方便?哪一个不是?

2020-02-03 17:09
相关热门