网站菜单设计排版有哪些形式？

每个人都知道：没有第二次机会给人留下第一印象。在数字产品领域，这种永恒的真理在高度竞争和令人难以置信的多样性方面起作用。毫无疑问，网页或移动屏幕的某些区域在这方面特别重要和有效。今天我们将更深入地讨论其中一个：网站的菜单。

在专门讨论网页设计术语的UI / UX词汇表问题中，我们已经提供了什么是菜单的简要概述。今天让我们看一下这个主题，并讨论菜单的功能和设计建议。此外，我们将展示一系列网页设计概念，将不同的方法应用于菜单设计。

什么是菜单？

在网页布局中，菜单是网页的上部（顶部）部分。它绝对是页面的战略部分，是人们在介绍网站的第一秒内滚动页面之前看到的区域。以某种方式作为邀请的标志，菜单应该提供有关数字产品的核心信息，以便用户可以在几秒钟内扫描它。从设计的角度来看，菜单也是创造性设计解决方案的广阔领域，应该是吸引人的，简洁和有用的。菜单通常被称为“网站菜单”，并被定位为网站布局中的导航的关键元素。

所呈现的概念显示了在线书店销售漫画的主页。顶部水平区域aka菜单呈现徽标字母，显示网站名称和核心导航：链接到项目目录，新鲜和特别优惠，博客，动作人物，购物车典型电子商务网站的图标和搜索的图标。

菜单包括什么？

菜单可以包含各种有意义的布局元素，例如：

• 品牌标识的基本要素：标识，品牌字母，口号或公司声明，公司吉祥物，公司或其领导者的照片，公司颜色等。
• 复制块设置所呈现的产品或服务的主题
• 链接到网站内容的基本类别
• 链接到最重要的社交网络
• 基本联系信息（电话号码，电子邮件等）
• 在多语言界面的情况下切换语言
• 搜索字段
• 订阅字段
• 指向与产品交互的链接，例如试用版，从AppStore等下载。

这并不意味着所有提到的元素都应该包含在一个网页菜单中：在这种情况下，菜单部分会过载信息的风险很高。吸引用户注意的物体越多，专注于重要物体的难度就越大。在设计任务的基础上，设计师（有时与营销专家一起）决定具有战略意义的重要选项，并从列表中选择或添加其他选项。

让我们看看几个例子，看看哪些提到的元素设计者放在特定网站的菜单中。

这是室内设计工作室的网站。页面的上半部分显示了在滚动过程中始终保持在视觉感知区域的粘性菜单。它分为两个区块：左侧部分具有品牌标识，右侧部分呈现交互式区域，其中包含“Product”，“Studio”和“Press”等多个信息块的链接以及标记为“Shop”的号召性用语按钮出形状。菜单的中心部分使用负空间来视觉分离这两个块。

这是网页的另一个示例，其菜单设计略有不同。这次作曲是围绕中心建立的，其中包含徽标和品牌名称。左侧和右侧在其周围平衡，有两个链接，每个链接允许用户快速扫描并移动到他们感兴趣的信息块。

为什么菜单很重要？

菜单是许多网站的重要元素有几个问题。

首先要考虑的是眼睛扫描模型，它显示用户在最初几秒内如何与网页交互。尼尔森诺曼集团大力支持这一重要的用户研究领域，为设计师和可用性专家提供对用户行为和互动的更好理解。

简而言之，当人们访问该网站时，特别是第一次，他们不会仔细和详细地浏览页面上的所有内容：他们扫描它以找到一个引起他们注意的钩子，并说服他们花一些时间在网站上。收集用户眼睛跟踪数据的不同实验表明，有几种典型的模型，访问者通常会扫描网站。在以下常见模型中，您将找到Z-Pattern，Zig-Zag模式和F-Pattern。我们来看看它们的方案是什么。

Z-Pattern对于具有统一信息呈现和弱视觉层次的网页而言是非常典型的。从该方案可以看出，它标出了四个活动区域 – 其中两个穿过典型的菜单区域。

另一种方案具有Zig-zag版本，对于具有可视划分内容块的页面而言是典型的。同样，读者的眼睛从左上角开始从左到右移动，并在整个页面上移动到右上角，扫描这个初始交互区域中的信息。

另一个模型是Nielsen Norman Group在探索中呈现的F模式，并显示用户经常展示以下互动流程：

• 用户首先读取水平移动，通常跨越内容区域的上部。这个初始元素构成了F的顶部栏。
• 接下来，用户稍微向下移动页面，然后在第二个水平移动中读取，该移动通常覆盖比先前移动更短的区域。这个额外的元素形成了F的下栏。
• 最后，用户以垂直移动方式扫描内容的左侧。有时这是一个相当缓慢和系统的扫描，在眼动追踪热图上显示为实心条纹。其他时候用户移动得更快，创建了一个spottier热图。最后一个元素构成了F的词干。

所有提到的模型都表明，无论特定用户遵循哪一个，扫描过程都将从网页的顶部水平区域开始。使用它来显示核心信息和品牌是一种支持双方的策略：读者快速扫描关键数据，而网站有机会保留它们，如果它正确呈现。这就是为什么菜单设计是UI / UX设计师以及内容和推广专家必不可少的问题的基本原因。

在其中一篇致力于菜单设计实践的文章中，其作者Bogdan Sandu提到了一个重要的观点，应该牢记：“人们只需几秒钟即可判断一个网站的质量，而互联网上缺少第二印象。总而言之，一个网站必须引人注目，它只不过是一个大失败“。

另一件需要考虑的事情是，菜单可以很快帮助快速向用户呈现基本数据，并通过清晰的导航提供积极的用户体验。但是，这并不意味着每个网站都需要菜单。有许多创造性的解决方案提供在布局的其他区域中应用典型菜单功能的设计。每个网站设计案例都需要对产品或服务的目标受众进行分析和研究。

设计实践

可读性和视觉层次结构

菜单和背景颜色的字体选择应该经过严格的研究和测试，因为菜单中的可读性方面起着至关重要的作用。用户必须能够尽可能快地扫描和感知这些基本信息，而无需任何额外的努力。否则，您将面临提供非用户友好界面的风险。

上面提到的新闻网站的设计概念包括菜单，包括作为组成的中心元素的网站菜单，到基本类别的出版物的两个活动链接，链接到实时模式和标有放大镜图标的搜索字段。

这是另一个网站，其布局是在破碎的网格上构建的，因此菜单对应于此方法。菜单的左侧部分视觉上较长，由四个元素组成：徽标和三个数据块的链接，而右侧部分较短，仅包含两个布局元素：搜索和号召性用语按钮市场形状和颜色为高对比度。

还有一件事要记住，在向下滚动页面的过程中，菜单有不同的转换方式。有些网站使用固定菜单，在与网站的任何互动点上始终保持可见和活跃状态; 其他人在滚动过程中隐藏菜单。还有一些网站没有完全隐藏菜单，但在滚动过程中缩小了菜单，这意味着它们隐藏了辅助信息，只留下了布局的核心元素在整个交互过程中处于活动状态并且可用。

汉堡折叠菜单

另一种在菜单功能方面非常流行的设计解决方案是隐藏汉堡包按钮后面的数据类别的基本链接。它被称为由水平线组成的形状看起来像典型的面包 – 肉 – 面包汉堡包。

此按钮通常放在菜单中，现在它是交互的典型元素。大多数定期访问和使用网站的用户都知道此按钮隐藏了核心类别的数据，因此这个技巧不需要额外的解释和提示。汉堡菜单释放空间，使界面更简约，充满空气，并为其他重要的布局元素保存空间。这种设计技术还为响应和自适应设计隐藏导航元素并使界面在不同设备上看起来谐波提供了额外的好处。

所呈现的网页设计概念显示了汉堡菜单的版本。由于网站的菜单包含许多位置，设计师使用这种技术将汉堡按钮放置在初始交互区域 – 左上角。它允许创建支持网站的一般简约风格的菜单。菜单的水平区域分为两个区域：左侧区域显示品牌标识，网站简短介绍为红色，并与页面菜单和号召性用语元素的视觉效果保持视觉一致性; 右侧区域包含社交网络和搜索图标的图标。菜单的中心部分留空，这为其设计增加了一些空气和平衡，并作为分隔两个不同功能块的负空间。

这个设计概念为网站提供了页面的原始结构，在页面的左侧留下了宽阔的边缘，左上角的品牌名称和徽标是第一个扫描点。另一部分呈现交互式区域，并有自己的菜单组成：左边的汉堡按钮和向右过渡的四个核心链接。正如这个交互示例所示，汉堡包菜单允许设计者组织许多主题信息块并提供有效的视觉层次结构。

虽然汉堡菜单仍然属于现代网络和应用程序设计中备受争议的问题，但它们仍被广泛用作菜单元素。反对汉堡包菜单的论据是基于这样一个事实，即这个设计元素可能会让那些不经常使用网站的人感到困惑，并且可能会被那些具有高度抽象性的标志所误导。因此，应在用户研究和定义目标受众的能力和需求后做出关于应用汉堡按钮的决定。

固定（粘滞）菜单

粘性菜单提供了另一种能够有效应用增强可用性的趋势。实际上，它能够为用户提供在任何交互点都可用的导航区域，这对于具有长滚动的内容繁重的页面而言是有帮助的。

所呈现的网站的设计概念具有固定的菜单，当页面滚动时不会隐藏。然而，它遵循极简主义原则，其中品牌名称刻字作为构图的中心，放大镜图标标记搜索功能和汉堡按钮隐藏链接到导航区域。

这是另一个设计概念，采用创意方法设计菜单。主页的初始视图包括非常简约的菜单：它仅显示社交图标和搜索。然而，向下滚动用户得到相当与传统集的粘头导航项目：第一个元素上看到左上角部分汉堡包按钮隐藏扩展菜单，然后品牌符号后面的链接，专题信息块。在与页面交互的所有过程中，组合完成搜索放置在页面的右上部分，并支持一致性的感觉。

双重菜单

菜单中的双重菜单可以呈现两层导航。我们在一家面包店网站最近的一个案例研究中展示了这种技巧的例子。

如您所见，该网站还使用了一个由两个级别的导航组成的粘性菜单。上方菜单显示隐藏扩展菜单的社交网络，徽标，搜索，购物车和汉堡按钮的链接。第二行导航提供了与核心交互区域的即时连接：产品目录，销售点的位置，新闻和特别优惠，有关服务和联系部分的信息。视觉和印刷层次结构使所有元素清晰，易于扫描，为积极的用户体验提供坚实的基础。

底线很简单：菜单是任何网站的战略重要互动区域。每个特定案例都需要自己的方法，这些方法将为特定目标受众提供信息和可用。用户研究可以为设计解决方案提供良好的基础，这些解决方案可以遵循相当传统的菜单组织形式或需要全新的视角。