15 个具有启发性菜单设计的网站

有几件事对用户体验至关重要，就像菜单一样。作为站点的路线图，并且在某种程度上，作为用户到达特定位置的“交通工具”，菜单是第一导航元素，因此需要它发挥作用。

关于什么构成一个好的网站菜单，UX方面有很多讲究。干净、清晰、直观和合乎逻辑——这些只是执行良好的菜单的一些属性。你甚至不必成为设计高手就能理解这一点。即使作为外行，我们已经直观地知道菜单应该是什么样子以及它应该如何工作。我们习惯于在某些地方找到它——通常它是位于页面顶部的标题菜单，或位于主要内容左侧或右侧的侧边菜单。现在的趋势是，设计师选择隐藏的全屏菜单，通过汉堡图标或各种形状的图标访问。

所以，让我们试着弄清楚究竟是什么让菜单脱颖而出。为此，我们将查看一些我们最喜欢的网站，这些网站具有创新、令人眼花缭乱、时尚、优雅的菜单。简而言之，我们将尝试弄清楚是什么造就了一个鼓舞人心的菜单设计。

朱莉娅·约翰逊

在她的作品集网站上，摄影师Julia Johnson将复古美学与现代交互式网页设计元素完美结合，以 Helvetica 中的大字体为主。字体的粗体字符在菜单打开器中，由两个黑破折号组成。单击该图标时，将打开一个菜单，该菜单遵循主页的美学线条——Helvetica字体设置了主导情绪，巧妙地与充满活力的橙色背景相结合。当我们将鼠标悬停在菜单项上时，菜单的稍微精简的字符变得更加动态，这会提示背景颜色的变化和组合图像的弹出，所以我们这里基本上有两种情绪——一种是极简主义，另一种是更实用。

贝拉特工作室

引人注目的自定义排版、全宽视频部分、交互式列表和超大文本以有点响亮的方式占据了主页，因此布局基本上没有空间放置必要的导航链接——至少不会导致混乱。这就是为什么设计师把菜单藏在右上角的一个圆形图标后面——考虑到大多数人会直观地在那里寻找它。单击该图标时，该图标会打开一个全屏菜单，该菜单的布局更加通透和整洁，并带有大量水平的交互式文本。浅色背景上的大量黑色字体营造出良好的平衡感，细的分隔线使菜单看起来整洁。一个受欢迎的触摸是关闭菜单的超大图标，因为我们知道发现和单击这些菜单关图标是多么困难。

尼科洛·米兰达

这位才华横溢的网页设计师和开发人员着手重新创建报纸风格的布局，其中包含许多令人愉悦的细节，暗示了印刷媒体和老式电视。它也是网络交互和动画的巧妙展示，网站菜单就是最好的例子之一。一个图标打开一个全屏菜单，带有撕纸效果、报纸风格的标题和Canopee字体这使设计具有复古特色。指示我们当前所在部分的项目有一个红色的上划线，当鼠标悬停在上面时，字母会扩大一点。这是一个功能简单且视觉效果非常好的菜单，可以作为菜单UX正确完成的示例。

蒙特利尔MUTEK

对于 2022 年著名的数字创意和电子音乐节——MUTEK蒙特利尔——设计师们选择了一种华丽的风格，带有大字体、霓虹色和强烈的导航元素。位于右上角的菜单图标具有几何特性——单击时，它会变成一个正方形，其中包含一个可以随光标移动的X的圆圈。菜单文本很大并且与其他文本部分重叠，但本质上只是浅蓝色背景上的白色字母。菜单的左侧部分是静态的，由图像组成。这个菜单没有什么真正革命性的东西，没有超级创新的交互、3D 图形效果。然而，它是精心设计、信息丰富且实用的菜单，与网站的整体氛围完美契合，在服务其实际目的方面做得非常出色。

Verholy 休闲公园

Verholy Relax Park酒店位于乌克兰波尔塔瓦地区的森林中，是一家水疗酒店，承诺让您在奢华的氛围中完全放松地沉浸在大自然中。酒店网站优雅精致，深绿色背景与微妙轻盈的界面线条和图标相结合。通过单击主页左上角的图标可以访问该菜单，并以包含两个部分的全屏布局打开。左侧部分具有指向相应页面的编号交互式链接，而右侧显示与相关部分相关的图像。两个部分由一条细曲线连接，与布局中更严格的网格线形成对比。

Craie Craie

Craie Craie是一家位于里昂的建筑和室内设计工作室，以精致的风格和无可挑剔的品味而闻名，这在其投资组合网站上也很明显。将浅粉色与鲜红色相结合，基于网格的主页布局体现了创意和个性，但真正的视觉享受隐藏在星形菜单打开器后面。全屏菜单从底部以相当快速但平滑的过渡打开，用可爱的鲜红色填充屏幕。微妙的浅粉色网格线与相同颜色的垂直文本相匹配，用作项目、工作室和联系页面的链接。工作室标志以及几个较小的文本实例都是白色的，这是一个明智的选择——单独使用粉色会使设计变得有点女性化，而红色上的白色会导致对比度过强。整个构图顶部有一个小黑点作为光标，在视觉上将整个菜单联系在一起。

Spotify 的粉丝研究

Spotify的粉丝研究因其创新的菜单设计方法而成为我们今天的焦点。我们通常习惯于在页眉或隐藏在页面角落的菜单图标后面查找菜单。这一次，我们正在寻找中心。一个类似于音量或低音线的交互式图标位于标题的中间，紫色背景上的红色，与网站的初始调色板一致。单击时，该图标会打开一个由可拖动项目组成的全角菜单，从1到15。类似海报的渐变信息图表采用颜色编码并按主题分组，包括覆盖率、参与度、发布和商品等指标。当然，每个项目都可以单击以显示更详细的信息。有趣的是，菜单不提供指向其他页面的链接——不过，下面提供了相同的内容，可以说是在页面的正文中。

Le Puzz

Le Puzz 网站非常古怪和有趣，但不要认为这种氛围不是精心设计工作的结果。从布局设计到调色板，从字体到动画，每一个设计元素都恰到好处。主要品牌颜色是带有复古气息的暖黄色，用于拼图框和精选网站元素，例如标题。Le Puzz 选择了一个简单直接的标题菜单，由网格线划分为几个整洁的部分，确保访问者可以快速轻松地找到他们感兴趣的任何内容。菜单部分的颜色在悬停时恢复，从黄色变为变黑色，简单而干净。

联邦融合系统

联邦融合系统致力于寻找、研究和生产清洁能源，是一家旨在为商业用途提供最有效的聚变能源途径的公司。它的菜单设计采用网格排列，干净的几何部分十分清晰、专业，它散发出一种知识和创新的气息。这些部分是线框的，但在将鼠标悬停在上面时会填充为白色，表示可以单击它们。

阿罗兹珠宝

在网页设计中使用网格线无疑是确保布局干净且内容易于使用的最有效方法之一。Aroz Jewelry选择了细线将标题的部分水平和垂直分开 - 定义部分并保持内容井井有条。透明的顶部放置了优雅的白色菜单，没有分隔线，营造出轻盈轻盈的感觉。将鼠标悬停在某些菜单项上时，会显示一个带有纯白色背景的大型菜单，因为此处的可读性和准确性至关重要，而其他菜单项只需单击即可将访问者引导至单独的页面。

马修·费舍尔

最近，我们看到越来越多的网站的设计在很大程度上依赖于排版——大、独特的字体构成了网站视觉识别的很大一部分。纽约视觉艺术家和设计师Matthew Fisher的作品集就是这一趋势的例子。这是对费舍尔作品的优雅而精致的展示，并不像人们对他的作品所期望的那样沉重。菜单在左上角清楚地标出，并以带有窗帘效果的流畅动画过渡打开。左侧的垂直编号部分显示结合了衬线和无衬线字体的菜单项，并在悬停时具有翻转和字体更改效果。悬停还会提示左侧显示的图像发生变化——每个菜单项都有一个指定的图像，当该特定项被使用时会出现该图像。菜单完全是单色的——黑色背景上的白色字母，带有黑白图像。这是一个优雅而引人注目的设计，排版的不一致为其增添了一点优势。

乔恩路工作室

Jon Way在他的作品集网站上投入了大量精力，使用自定义排版、视频部分和由水平网格线定义的现代、干净的布局。这是一个透明的标题菜单，包含干净、可读的项目，它们之间没有任何分隔线或线条。将鼠标悬停在上面时，菜单项会带有虚线下划线以指示可点击性。此外，它通过简洁明了的导航确保了良好的用户体验。

格伦·卡图

静态噪声、网格和微调的单色字符是比利时数字设计师Glenn Catteeuw作品集网站的主要风格组成部分。Catteeuw 从未打破网站的独特氛围，基于类似于项目文件的网格模式创建了一个令人兴奋且看似简单的布局，并且具有某种模拟的质量。菜单巧妙地放置在网格的右下角，是在实际上缺少几个网格的部分。几何和精确，就像布局的其余部分一样，菜单朴实无华但引人注目。它在悬停时具有简单的手写效果——上划线或圆圈，为设计增添了一丝魅力和温暖。

卡珀·克莱博维茨

一个厚重的、超风格化的动画字母 K 作为波兰艺术总监Kacper Chlebowicz网站的预加载器迎接我们，然后将其作为网站图标位于左上角。与此同时，在抽象形式的动画背景下，Chlebowicz 的大写姓氏占据了中心舞台。在这个初始序列之后，我们被邀请向下滚动并探索特色作品，在垂直轮播上分为类别。一直以来，当我们滚动和拖动页面、探索项目时，有一件事保持不变且不可移动——菜单。这个粘性菜单不位于页面顶部，而是位于页面的实际底部，简单、干净、极简。它只有三个菜单项——工作、关于和联系，悬停时带有简单的下划线效果。他选择用干净整洁的菜单来平衡页面，为他的访问者创造一个很好的导航路径。

桥之旅

Bridge Tour 不仅展示了 610 多个精心设计的演示，还展示了我们为此使用的一些创新设计和动画解决方案，提供了一种身临其境、令人兴奋的叙事，带领游客穿越我们最大的成就。整个讲故事的体验是基于滚动动作——当用户滚动时，内容开始转换、混合并进出视觉。在初始序列之后，一个优雅、透明、基于网格的菜单出现在标题中，带有主题标志和几个链接。菜单最重要的元素是最右上角的图标，它基本上告诉用户要做什么才能与网站互动——在大多数情况下是滚动动作，但在某些时候会提示用户摆动鼠标、聚焦或播放视频。微妙的线条赋予菜单非常优雅和现代的外观，部分的排列具有独特的几何质量，传达秩序和精确。

总结

正如我们从这个短暂但鼓舞人心的各种菜单设计之旅中看到的那样，在设计网站菜单时没有明确或普遍适用的规则。事实上，有一些东西可以被认为是一个好的经验法则和一个坚实的起点，那就是——在设计菜单时总是考虑网站的更广泛的内容。

同样，功能性和实用性并不也不应该意味着平淡或沉闷。设计一个既美观又实用的网站菜单是完全可能的，并且此列表中的每个菜单都实现了这一点。通常情况下，美在于小细节——颜色的选择、排版、动画。将最讨人喜欢的视觉元素与完美规划的导航体验相结合，您就可以得到一个菜单，让访问者不断浏览。