广东高端建站:10种现代导航菜单

2019.08.09 mf_web

137

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

虽然取决于用户界面,即使过时和无聊的菜单也可以派上用场,但趋势决定规则,以便总是有老师的宠物。我们正在研究10种类型的现代导航风格,以及两种不属于这些类别的额外导航解决方案。广东高端建站

现代导航解决方案

1.汉堡菜单按钮

这是目前在一个屋檐下收集所有导航链接时最受欢迎的选择。它适合移动设备,微妙,时尚和动感。虽然由三条线组成的形式一个接一个地保持不变,但带有链接的内部部分各不相同:从整齐结构的列表到基于图像的项目的集合。

Nemiroff展示了汉堡包菜单按钮的一种用法。它完美地融合了页面上普遍存在的技术氛围和几何感。它打开了一个全屏窗口,巧妙地平衡图像和文本。

涅米罗夫

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

散布在“欢迎”部分周围的导航看起来很新鲜和原始。作为一项规则,它可以在创意人的个人组合中找到。它为车主提供了大量的自由空间来进行机动。唯一的缺点是该方法适用于由四个项目组成的菜单。

Handhy Hutomo看起来很精致。占主导地位的宽敞感觉达到了令人印象深刻的效果 它与最小的解决方案相结合,使项目与众不同。这种方法就像手套一样,增强了美学的一致性。

Hendhy Hutomo

3.全屏多媒体导航

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

Sprindrift Racing提供了几种移动辅助工具。有一个汉堡包菜单按钮,页脚导航和醒目的基于图像的导航,占据了整个屏幕,并揭示了项目的重要部分。因此,该页面看起来具有视觉吸引力和吸引力。

Sprindrift Racing

4.交互式导航

交互式视频,虚拟漫步,动态功能加强的静态场景由非标准导航提供动力,引人注目。虽然,他们缺乏与浏览器和设备的完全兼容性,但它是一个巨大的飞跃,承诺我们网络将更加复杂,令人印象深刻和引人入胜。

20年的Okean Elzy是一个先锋艺术项目,借助尖端技术巧妙地将其变为现实。它通过邪教音乐团体的历史为您提供一个小小的冒险。尽情享受奇妙的互动步行。

Okean Elzy二十年

5.滑出菜单

与汉堡包按钮非常相似,滑出菜单的概念是从移动UI中借鉴的。由于其轻便和紧凑的尺寸,它已经广泛受欢迎。它通过一些通过文字或图标呈现的视觉线索得到支持。传统上,它从左侧滑出。但是,有时菜单会从右侧,顶部甚至底部跳转。

Sergey Mahno的个人作品集是这一主流的生动代表。从左侧出现的固体相对较大的面板占据屏幕的第三部分。它为用户提供导航,同时为在线观众提供了欣赏艺术家梦幻作品的机会。

Sergey Mahno的个人作品集

6.静态边栏导航

几年前,静态侧杆需求量很大。虽然它们似乎让位于更加时尚和紧凑的解决方案,但是许多博客和在线杂志仍然从中获益。更重要的是,它们对企业用户界面也很有用。它们为链接列表提供视觉权重,并使用户感觉更舒适,因为导航总是在您的指尖。

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

PLANEX

7.简化Navbar

除了汉堡包菜单按钮,这种类型的导航去年统治了这个栖息地。它是展示项目主要环节的优雅而时尚的方式。包括不超过七个项目,它经常占据右上角或居中。

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

Proske

8.巨大的下降

巨大的,多媒体丰富的下拉菜单是选择出现着名体育品牌,国际电子商店或在线报纸等行业歌利亚的网站。它是一个复杂的多功能组件,可以在整个屏幕宽度上延伸。它平衡了文本,图像,视频甚至一些额外的功能,如购物车或天气小部件。

阿迪达斯足球

有一个巨大的下拉菜单,涵盖所有类型的信息。尽管如此,它可以充分且快速地工作,而不会使页面过载。信息整齐划分,结构清洁,井井有条。

阿迪达斯足球

9.页脚导航

这种方法类似于简化的导航栏。它发生在页面底部,并在用户向下移动时粘到其位置。虽然完全出乎意料,但由于我们习惯于在UI的上半部分寻找菜单,但它在某种程度上有益于概念。

Déjàvu在他们的头版上有如此独特和引人注目的动画,它引起了全部的注意。用于浏览项目的工具很像社交媒体图标,在页脚中适度且无缝地定位。

似曾相识

10.在Parallax-Powered网站中导航

由视差驱动的项目通常选择基于图形的简单导航。很少伴随标题的圆圈或短划线用于帮助观众不要迷路。

三星的Circle of Sound使用了几行相应的标题,完美地融合了环境。该方法补充了设计,并为用户提供了必要的视觉提示。

三星的声音圈

没有导航

虽然单页网站越来越受欢迎,但放弃导航的解决方案正在流行。它适用于具有一个或两个部分的项目,清晰且可预测的故事情节或最小布局。

HWAIW是省略菜单的典型示例。它是一个充分说明的网站,具有相对较小和明显的结构。滚动条足以有效地浏览它。

HWAIW

原始导航

有大量项目的导航脱离了上面列出的那些。在这个区域,您可以让您的想象力疯狂。因此很难进行分类。我们想要描绘一个代表性的例子,当然从人群中脱颖而出:

Beloesuhoe的网站有一个导航,似乎是现实生活场景的一部分。这个技巧一举两得:它向在线观众介绍了团队和工作场所,并在主菜单上进行了改动。

Beloesuhoe

结论

有许多显示导航的方法:从传统的流线型导航栏开始,以智能交互式标记结束。每年都会出现趋势,补充工具包。

广东高端建站

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP