25个现代导航解决方案:独特的设计和令人敬畏的效果

25个现代导航解决方案:独特的设计和令人敬畏的效果

导航是网页设计和任何网站的一个重要元素。这是一件事,让用户绕过网站,往往是网页设计的元素得到最多的注意,当涉及到组织一个有效的用户界面

我们都知道为什么导航是重要的,也许这就是为什么我们在开始任何新设计时都倾向于花大量精力在它上面。这可能也是为什么有无数的解决方案和设计效果伴随着导航而来。我们一直在尝试导航,虽然有些解决方案可能会失败,但有些可能是鼓舞人心的、有创意的和有效的。

25个现代导航解决方案:独特的设计和令人敬畏的效果

25现代导航解决方案

互联网的梦想

互联网之梦的特色之一,最现代和充分证明的方法,创造主要的导航。它只是一个简单的水平导航靠近页面的顶部,就在logo下面。在“开箱即用的思维”方面,没有什么特别之处。然而,它包含在这个列表中,因为它是一个很好的例子,说明一个简单的导航设计解决方案是如何优雅地完成的。

整体布局可能太熟悉了,这对整个web的一致性非常好。然而,我们可以看到设计师在这里做了很多的细节。从纹理到分隔线,甚至是活动/悬停状态的渐变,直到最后一个像素,一切都是完美的。现代的梯度和纹理也给了它一个创造性的边缘。

互联网的梦想

互联网的梦想

白宫

白宫的网站内容非常丰富,但乍一看,上面只有七个导航主题。然而,当我们将鼠标悬停在任何一个菜单项上时,我们可以看到其中有多少内容。下拉列表对于web设计来说并不是什么新鲜事,但是让这个导航如此智能的是列结构的链接。

在大多数下拉列表中,链接被分为两列和三列。悬停状态将水平和垂直空间混合在一起,从而节省了整个页面的空间,同时也帮助浏览者浏览链接以获得更好的可读性。

白宫

白宫

Cognigen

我们喜欢这个导航解决方案,因为它有很酷的设计效果,以及如何通过这个简单的功能来增加设计的深度。其余的设计是相当平坦的,没有梯度,阴影,或其他设计功能,将增加深度。这有助于导航更加突出,并提示查看者在浏览内容时继续检查导航以查找更多内容。悬浮状态也非常独特,值得一试。

Cognigen

由巨大的

谁需要一个字的文本链接?由于页面太少,Giant Creative选择了一个包含简短描述的导航选项。标题:谁?什么?以及如何?是很好的注意力吸引者,下面框里的文字给出了一个简短的署名。不过,contact按钮有所不同,它与其他三个选项形成对比,使其更加突出。

当鼠标悬停时,每个导航链接的颜色会变深一点并增加形状。

由巨大的

由巨大的

Gpacheco.fr

这个小菜单的纹理真的很有装饰性和创造性。这个导航没有什么特别之处,除了你在上面看到的详细设计。它的有效之处在于,导航的三种颜色使菜单从页面的其余部分中脱颖而出,引起了人们的注意。

设计本身就是这个导航的独特之处。当鼠标悬停时,会出现图像翻转,并在“纸”上添加图案和纹理。

Gpacheco.fr

冯荷兰

冯·荷式导航与我们刚才看到的导航非常相似。其独特的因素来自设计角度,从详细的纹理和深度效果,深红色悬停状态。整个设计非常有质感,这使得导航很难被注意到。有时,导航和其他重要的元素会淹没在过多的纹理中。然而,正如上面的例子一样,颜色、形状和纹理的变化有助于它脱颖而出。在菜单的右边也有一个彩色的插图,进一步吸引人们的注意力。

冯荷兰

冯荷兰

电浆

这个简单的四页导航很简单,但是提供了一些很棒的设计视角。我们喜欢在整个设计中使用的纹理,喜欢在每个环节的活跃状态中使用的纹理。如果没有此菜单的活动状态背后的形状,将很难找到并不是很有效。

然而,他们选择把菜单上仅有的一种颜色放到菜单上,这就造成了天壤之别。
这个菜单的另一个不同之处在于,悬停状态和活动状态是不同的。很多时候,这两种状态共享相同的设计。电浆决定采取一种不同的方法。虽然菜单的界面可能不会从这个选择中得到任何好处,但是当与菜单交互时,它会给设计带来一些不同的东西。

电浆

电浆

好奇的一代组

到目前为止,所提供的导航菜单都是相当基本的,并且与web上的其他内容保持一致,这通常是实现良好导航的关键。然而,这个网站采取了一个全新的方法,似乎没有必要解释为什么它是不同的和独特的。这种导航的颜色、形状、大小和位置有助于使它脱颖而出,尽管它不是传统意义上的导航。

好奇的一代组

好奇的一代组

熟食店吧

在过去的几年里,这个网站的外观和创建它的公司引起了许多网页设计师的兴趣。他们的外观是现代的,圆滑的,但不枯燥和乏味的所有。他们总是选择光滑的纹理、渐变和形状,同时也测试了一致性和创造性的边界。

实际上,这里的两个菜单都位于页面的中间——这种位置并不常见。然而,在这种情况下,通过将这两个菜单居中创建的平衡效果非常好。这个导航解决方案的伟大之处在于它包含了大量的细节。从使用的图标和设计细节,到悬停状态,再到与用户交互时的动画,一切都使这些菜单脱颖而出。

熟食店吧

熟食店吧

独角鲸公司

在导航中使用图标越来越流行,特别是当导航像上面的例子一样简单的时候。独角鲸公司的网页设计完美地表达了这个想法,为每个链接设计了匹配良好的图标和独特的排版。我们在这里看到的另一个趋势是不透明度的变化。正常情况下,链接项看起来是半透明的,当鼠标悬停时,我们看到它是深棕色的,或者是100%不透明的。

独角鲸公司

独角鲸公司

直观的设计

整个网页设计在这里是美丽的直观设计,当然他们的导航没有任何不同。在这个例子中,菜单的边框效果反映了网站的其他元素,允许它与设计的其他部分连接,但也作为一个单独的和独特的部分脱颖而出。整个导航只是一个美丽的例子,透明,排版,和平滑的下拉式导航。总的来说,当涉及到布局、位置和功能时,它是一个经典和普通的例子,但是设计和交互性做得非常好。

直观的设计

直观的设计

Synthview

Synthview给了它的四个主要导航链接各自的形状、数量和空间。导航通常不会在标识和另一段内容之间,因为这种方法通常会让人感觉杂乱。然而,通过给每个列表项如此多的空白,布局工作得很好。在本例中,一定要检查悬停和活动状态,以及它们如何在整个设计中创建重复,但也要帮助每个项目在交互时从其他项目中脱颖而出。

Synthview

海浪俱乐部

我们需要让导航脱颖而出,没有一个网页设计比《海浪俱乐部》做得更好。顶部的三个主要导航链接是明亮的颜色和巨大的尺寸。事实上,这三个链接是整个页面中最大的文本片段。当然,在整个网站中还有其他的导航,它的层次结构都是根据大小和与这个主导航相关的位置来组织的。

这个菜单的另一个出色之处是三个类别下的下拉菜单。我们可以看到组织良好的专栏列表,就像上面的白宫网站一样。

海浪俱乐部

海浪俱乐部

球队

垂直导航又重新流行起来,网页设计师们也在想方设法让它再次变得时髦起来。在上面的例子中,导航的位置相当不寻常。我们几乎从来没有看到过右边的标志和导航的主要兴趣点。然而,通过设置导航的方式,以及考虑到页面的其余设计,我们仍然可以快速了解网站的内容。

当导航添加到设计中,而不是删除,或者只是融入设计时,这总是很棒的。在这种情况下,由链接长度的变化所产生的对比度、颜色和形状都会添加到整个设计中。

球队

球队

VBG

没有什么比精心设计的排版更重要的了。这种极简设计的特点是一些内容相当多的导航。虽然这两个因素似乎冲突,VBG使它工作得很好。因为设计的其余部分是如此的简约,有更多的空间来导航,他们已经利用了这一点。导航被组织成三个主要部分,包括一个描述和最后的链接。

这个解决方案非常适合导航组织,它允许所有导航都放在首页的右侧,并增加了用户对菜单的可读性。

VBG

Ferix设计

这个菜单的古怪形状创造了一个独特的设计,并让菜单从其他网页设计中脱颖而出。悬停状态在现代导航中变得越来越重要,通常需要的不仅仅是一个简单的文本下划线。这是一个很好的图像翻转的例子,它包含了一点关于每个悬停和活动状态的创造性细节。

Ferix设计

Ferix设计

史黛西偏见

这种导航在所有地方都是唯一的,而且在大多数情况下,没有通用的接口。菜单是水平和垂直的,并自定义适合设计内的其他图像。这里的对比度、布局和排版都很好,而且菜单也很简单,便于使用。这种导航的唯一缺点是用于下拉菜单的字体可能有点难以阅读。一如既往——可读性/可用性第一,设计第二!

史黛西偏见

史黛西偏见

Medis Kok & Bar

这个菜单在页面的右下角,但是网页设计本身是相当简单的,而且无论如何只有很少的内容,所以它工作得很好。从设计的角度来看,这个菜单的颜色和分块设计反映了页面左上角的logo,这是一个很好的平衡,重复的效果,非常有趣的设计。

我们还多次提到过菜单中的图标和悬停状态。这个菜单通过在每个链接的悬停状态上显示一个单独的小图标来实现它们。

Medis Kok & Bar

Medis Kok & Bar

亚历山德罗Giammaria

这里我们有另一个垂直菜单,和另一个超大的菜单。正如你所注意到的,这两个都是上升的趋势,当内容和网站类型合适时,它们都是非常成功的导航选项。注意到悬停和激活状态,我们可以看到形状和深度的变化,这都增加了整体设计。

也许这个菜单最独特的特点是,菜单与标志本身是交织在一起的。我们经常将菜单和徽标视为单独的实体,尽管经常将主要焦点和次要焦点放在一起。然而,在这个设计中,他们几乎是一个元素在一起,作为一个整体的标志和导航是主要的兴趣点。

亚历山德罗Giammaria

亚历山德罗Giammaria

康威协同工作

无论如何,上面的内容绝对没有显示出一种趋势,而且绝对不像web上的任何其他类型的导航。在第一次浏览网页时,整个屏幕只是一个巨大的logo和四个环绕着它的导航链接。这个导航解决方案是一种吸引注意力的好方法,然而,可能会有争议,很难确定第一眼看到的网站是关于什么的。

不管这种导航是否有效,它的独特性质和有趣的设计选择都是这种解决方案的优点之一。

康威协同工作

康威协同工作

向南行进的节日

在这个网页设计中有很多事情要做,对于任何像这样的设计,导航会发现很难引起注意。然而,位于页面底部(在第一个视图中),这个导航跨越了整个页面的宽度,并覆盖了大量的垂直空间。虽然某些导航最好占用最小的空间,但这种导航的好处在于它是主要的设计特性之一。

这是导航菜单的一种独特的方式——没有组织,几乎是繁忙的,并且占用大量空间。甚至位置也很奇怪。然而,因为它在设计的主题内工作得很好,它脱颖而出并引起注意。也一定要检查冷却发光悬停状态以及。

向南行进的节日

向南行进的节日

La De Da

就像我们上面的例子一样,我们看到另一个导航菜单与整个网站的设计交织在一起。不过,这个菜单几乎更有效,因为链接可读性更强,而且每个链接的对比度、形状和纹理变化也更多。

上面的例子和这个例子都展示了具有创造性的、以设计为导向的、在整个主题内工作良好的菜单。无论我们是否可以开始称它为一种趋势,它肯定是创造性的。

La De Da

La De Da

犹他州旅行

这种滑出面板的效果在设计上既有效又优雅。虽然菜单的细节与网站的其他部分匹配得很好,但是这个菜单最大的特点是它的有效组织。每个面板都带有更多的内容和导航,允许列/行、图像、标题/字幕等。

犹他州旅行

犹他州旅行

想法铸造

导航菜单很少出现在网页的右侧,有可能会出现糟糕的层次结构。导航应该始终是首先看到的项目之一,而导航的位置通常是避免这种情况发生的最佳方法。但是,出于某种原因,这个菜单被战略性地放在右边。有了块级别的列表元素、彩色图标,甚至还有一个独特的菜单标题,这个菜单非常突出。事实上,如果它更接近标志(也有一些对比,颜色,当然,大小),设计整体将是非常不平衡的。

这个菜单是一个很好的例子,说明了如何在每个菜单项中放入大量的细节。每个条目都有一个图标、一个标题、一个简短的描述和一个箭头图标,提示查看者继续浏览整个网站。它很难被称为一个简单的菜单,但它与其他相当简单的设计工作得很好。

想法铸造

想法铸造

创意点

这个菜单的设计非常有创意,这使得它从今天网络上的许多其他菜单中脱颖而出。它使用图标、传统的放置方式以及与设计主题其余部分匹配的创意悬停状态。
虽然许多菜单都有这些常见的项,但是菜单中的每个元素都模仿了其余设计的风格。手绘的外观是非常流行的,并与纸纹理和整体外观伟大的作品。

创意点

创意点

结论

无论你想要遵循什么样的导航实验或趋势,在导航中最重要的两件事是可注意性和可用性。导航必须具有让它引人注目的特性,无论这意味着对比度、大小或其他任何东西,以使它脱颖而出。此外,导航必须是可用的,并遵循“不要让用户思考”的规则。

导航在设计过程中需要大量的考虑,并且有很好的理由。它是引导用户浏览整个网站的一件事,也是决定一个网站设计成败的一件事。为了一致性和易用性,许多导航解决方案都遵循通用的接口模式。这是一个很好的实践,但是有些设计师可能会选择不同的路线。

为网页设计者的最好的字符设计技巧

2020-04-10 17:37
相关热门