跳到主要内容

10个精彩创新的网站菜单设计

当您组建一个网站时,您的导航设计的重要性不能过分强调。简而言之,您网站的成功将取决于它的可用性,以及访问者如何轻松地从一个部分导航到另一个部分。

常规的水平菜单和小型下拉框适用于许多网站。但是,对于具有大量内容的网站或需要轻松访问的许多不同类别,设计导航可能成为真正的挑战。

这是各种网站所面临的问题,从网络应用程序到报纸和在线商店。虽然有许多网站的例子很尴尬且很难导航,但也有一些非常精心设计的例子。我们突出了一系列精心设计的菜单,这些菜单都能让用户以无摩擦和轻松的方式浏览,登录和注销。我们希望您发现这些示例是您下一个网站设计项目的有用灵感来源。

01. 守护者

Despite there being so many different sub-categories, they’re never more than two clicks away from anywhere on the site

尽管存在许多不同的子类别,但它们距离网站上的任何位置都不会超过两次

“卫报”的网站有很多不同的类别,包括“文化”,“商业”和“旅行”,每个类别都有许多子类别。

真正关心和关注的是以可访问且即时直观的方式为每个设计导航。尽管存在许多不同的子类别,但它们距离网站上的任何位置都不会超过两次。

每个类别,例如“文化”,也都有自己的颜色,所涉及的一切,如“电影”和“音乐”,相应地着色,这有助于将类别很好地结合在一起。

02. 介质

Hovering the cursor over the logo reveals the menu, neatly tucked away

将光标悬停在徽标上会显示菜单,整齐地隐藏起来

Medium是由Evan Williams建立的新发布平台,他也创建了Blogger和Twitter。每个页面的重点都放在内容上,而且他非常努力地消除所有分心。甚至菜单都隐藏在左上角的徽标后面。将光标悬停在徽标上会显示菜单,整齐地隐藏起来。

当浏览器窗口较小时,将显示Medium菜单的另一个聪明功能。它不会将徽标(隐藏在其后面的菜单)重叠在文本上,而只会在滚动到页面顶部时消失并重新出现。

03. Svbtle

Svbtle merges a beautifully crafted blog CMS with a curated selection of the best posts

Svbtle将精美的博客CMS与精选的最佳帖子合并在一起

Svbtle是Dustin Curtis的创作,并将自己定位为一种新的杂志。它巧妙地将精美的博客CMS与精选的一些最佳帖子合并在一起。

柯蒂斯以精心打造精美的用户体验以及对细节的敏锐,有点强迫性而闻名。有时他所做的改进是如此微妙以至于你可能不会注意到它们,但是当它们弹出时它们肯定会改善用户体验。

Svbtle的菜单就是一个很好的例子:当您将鼠标悬停在下拉图标上时,菜单会按照您的预期进行扩展。但是,当您将光标移离菜单时,它会保持原位一两秒钟 - 如果您将光标移动了一点点意外,只需将光标移回原位即可。虽然这看起来很简单,但他考虑编码的事实表明了他对作品的热情和对细节的关注。

04. 推特

Once it’s selected, Twitter's menu remains until closed

一旦选中,Twitter的菜单一直保持关闭状态

Twitter通过保持下拉菜单激活来解决上述问题。这里的缺点是你必须点击设置图标来激活菜单 - 如果它被激活并只是悬停在它上面,它会一直被激活 - 但一旦被选中,它一直保持到关闭状态。巧妙地,特定的动作也是分开的,例如“帮助”和“键盘快捷键”。通过对相关部分进行分组,可以更轻松地找到您要查找的内容。

05. B&O Play

The menu under 'Products' is given a lot of extra white-space with a simple illustration of each product

“产品”下的菜单有很多额外的空白区域,每个产品都有简单的图示

B&O Play是音频专家Bang&Olufsen的一部分,有许多产品,你可能无法单独从他们的名字中识别,但也许可以从他们的外观中看出来。例如,A8是一个非常独特风格的扬声器底座,看起来与A9完全不同,但根据它们的名称很容易混淆两者。

为了帮助解决这个问题,并使其导航更加直观和对浏览器有用,“产品”下的菜单会给出大量额外的空白区域,并简单说明每个产品。虽然这种方法并不适用于B&O Play的每个网站(特别是那些产品种类繁多的网站),但这是一个完美无瑕的好主意。

06. 苹果

Apple's website is as beautifully crafted as their products

Apple的网站与其产品一样精美

Apple是全球设计领域的领导者,其网站制作精美的产品也就不足为奇了。主要导航,如B&O Play,在点击新部分时为每个产品显示一个有趣的滑动动画(对于我们这些有现代浏览器的人)。

使用高度详细,高质量的图像显示导航中的每个产品意味着它甚至无需思考就可以轻松到达。

07. Vimeo的

Vimeo includes a lot of description in its navigation

Vimeo在其导航中包含了大量描述

视频共享网站Vimeo选择在其导航中包含更多描述。将鼠标悬停在“创建”或“观看”上会导致其他一些选项,例如“视频学校”。因为很多人都不熟悉Vimeo的视频学校,他们添加了一个小字幕,上面写着“学习如何制作更好的视频”,快速简洁地解释了点击之前会发生什么。

08. Google Plus

Google's social network boasts a beautifully designed navigation that runs vertically down the left-hand side of the browser

谷歌的社交网络拥有设计精美的导航,垂直向下延伸到浏览器的左侧

Google Plus是搜索巨头Facebook的竞争对手,拥有设计精美的导航,垂直向下浏览浏览器的左侧。垂直菜单有助于释放所有重要标题的空间,同时仍然可以轻松访问每个部分。

每个图标也可以通过拖放到位来定制,所以如果你更喜欢游戏而不是照片,你可以根据自己的喜好重新安排导航。

09. Threadless的

Big, bold visuals bring Threadless's navigation to life

大而大胆的视觉效果将Threadless的导航变为现实

Threadless是一家深受设计和艺术人群喜爱的众包T恤公司,它在导航中使用了大而大胆的视觉效果。

Threadless背后的整个概念非常专业,并且拥有一些非常独特的用户组。有些人在那里提交他们的艺术作品,其他人可能会在那里投票选出他们喜欢的设计,而其他人则希望成为社区的一部分,审查即将到来的艺术作品并与他人交谈,而其他人可能只是在那里购物。

他们仔细考虑了每个用例,并将每个部分分为“Make”,“Pick”,“Play”和“Shop” - 然后将鼠标悬停在这些选项上,每个部分下方都会设计精美的选项。

10. Squarespace

Squarespace's vertical navigation doesn't get in the way of its beautiful imagery

Squarespace的垂直导航不会妨碍其美丽的图像

Squarespace是一个托管和CMS平台,可以帮助人们方便地启动自己的网站。该网站使用了标题的大图片,但是他们在网站上有很多部分,包括它们都在下拉导航中会遮挡图像并使其看起来混乱。

他们的解决方案是在右上角添加一个小“菜单”选项。单击按钮会导致面板滑出 - 用它移动整个站点 - 以显示垂直导航。这种方法的优点在于它不会妨碍图像,并且它们有很大的空间来包含最广泛的导航选项。

Alex Black

亚历克斯写道PrintExpress.co.uk。在业余时间,他喜欢学习网页和印刷设计,并学习编码。你可以跟着他@iamalexblack

喜欢这个?阅读这些!

您是否有任何经过精心设计,精心制作且优雅的菜单选项的例子,您应该将其列入我们的综述?我们很想听听您在评论中发现的内容。



翻译字数超限