2021 年网站标题设计：示例和最佳实践

当您第一次、第二次甚至第十次访问一个网站时，您看到的第一件事是什么？ 对于我们中的许多人来说，这是标题。

原因之一是因为我们的眼睛很自然地被页面的最顶部所吸引。 这就像看电影或阅读报纸文章。 你想从故事的开头开始，而不是从故事的中间开始。

而且，老实说，作为设计师和消费者，您可以从网站的标题中了解很多有关网站的信息。 你会在那里找到它的品牌。 您将获得其内容的高级概述。 您可能还会找到号召性用语和其他公司信息等。

尽管标题占用了少量的空间，但它是网站最重要的部分之一，因此，它可能会比网站上的大多数内容获得更多的参与度。

那么，您如何设计它以最大限度地提高参与度？

首先，您不想使用 WordPress 主题或模板提供的基本标题设计。 这是一个很好的起点，但是当涉及到要包含的内容、如何布局以及如何设计以实现最终可用性时，还有很多事情需要考虑。

在整篇文章中，您还会找到一些很棒的网站标题示例以及创建它们的技巧。 因此，无论您是来这里寻求设计灵感还是帮助构建完美的网站标题，您都会有大量的视觉示例可供查看。

网站标题是网站的顶部部分，其中包含徽标、导航以及有时其他信息、链接和按钮。

例如，这是 Elementor 网站上的标题：

标题是每个网站的重要部分，因为它：

• 作为品牌标志的家（并且可能是访客遇到它的唯一地方）
• 为访问者提供对网站的第一印象
• 用作网站的目录
• 通过一键点击或搜索查询轻松浏览网站
• 包括为准备采取下一步行动的人提供的快速操作按钮
• 提供与公司相关的其他信息、联系方式等

尽管标头在站点之间具有相似的用途，但您可以创建不同类型的标头。 这完全取决于您创建的网站类型、品牌风格以及您想在那里存储多少信息。

The Dog Bar 网站上的这个标题是最常见的网站标题设计：

徽标位于屏幕的最左侧，导航菜单、电子商务图标和 CTA 位于最右侧。

HubSpot 向我们展示了典型的移动网站标题的样子：

同样，徽标位于最左侧。 但是，在这种情况下，导航和其他链接隐藏在汉堡包图标下方。

随着移动设备和桌面设备之间的界限变得模糊，看到网站采用像 YOTEL 这样​​的混合标题设计也就不足为奇了：

它看起来像典型的单行标题。 但是，汉堡包菜单图标为桌面访问者提供了额外的导航链接。

拥有大量内容的网站不能总是挑选哪些类别或页面作为标题。 这就是为什么你会得到一个像 Digital Agency Network 网站上那样的超级菜单：

在“代理商”顶级菜单下，我们会看到按位置以及最有可能的人气或规模组织的代理商位置列表。

当您查看“Feed”顶级菜单时，我们会看到类似但不完全相同的大型菜单结构：

提要分为新闻、案例研究和博客类别。 此外，此菜单在右侧还包括几个引人注目的“精选帖子”。

顺便说一句，如果您需要构建其中之一，您可以使用 Elementor 和 JetMenu 轻松实现。

米其林星级餐厅 The Inn at Little Washington 使用左对齐的侧边栏来存储其标题：

这种垂直标题设计往往是酒店和其他基于服务的企业网站上的流行选择。

一些网站可能会像 Subway 一样在标题顶部附加一个实用程序栏：

这对于想要提供位置、联系方式、可访问性、社交媒体和其他公司信息或无法轻松放入主菜单的链接的公司非常有用。

某些网站可能会在标题中附加促销或通知栏。 这个 Urban Outfitters 示例向我们展示了如何同时包含促销和实用工具栏：

虽然促销栏可以出现在标题下方，但更常见的是将它们放置在上方并在右上角使用“X”将其关闭。

属于一系列网站（这在零售业中很常见）的网站可以在标题上方添加一个附加栏，其中包含指向其他商店的快速链接，就像 Gap 所做的那样：

这些链接不是为多站点导航创建单独的栏，而是显示在 Gap 的实用程序栏中。

让我们来看看您的网站标题设计究竟属于什么。

想要建立品牌认知度？ 那么徽标应该是访问者在网站上看到的第一件事。

Cosmopolitan 是一个很好的例子：

徽标设计以其鲜艳的色彩和高大的字符从标题的其余部分中脱颖而出。 而且由于徽标的大小适合空间，它不会压倒其他元素或迫使标题占据过多的空白。

在此处了解如何设计美观且令人难忘的徽标。

导航应该提高您的访问者对网站内容以及每个页面如何相互关联的理解。 如果他们可以轻松地鸟瞰正在发生的事情，他们就会在探索那里的事物时感到更加自信。

根据您网站的大小，您必须决定所需的导航数量和类型。 这是主要导航，就像您在 Dollar Shave Club 的标题中看到的那样：

但请注意，DSC 在左侧还有一个汉堡包菜单。 以下是访问者在此辅助导航下找到的内容：

该行上方的链接与主导航中的链接或多或少相同，但这次它们包含二级链接。

该行下方的链接允许 DSC 使所有其他页面都可以从导航中访问，而不会使其混乱。 此外，通过将它们放置在汉堡包图标下，用户无需滚动到页脚即可找到有用的页面，例如联系我们、职业和常见问题解答。

每个网站都有一个行动或目标，它会促使访问者朝着这个方向前进。 虽然该网站将在其整个页面中包含引人注目的号召性用语，但将 CTA 放在标题中也是一个好主意。

按摩嫉妒在这里做到这一点：

CTA 应该像在网站上一样设计。 如果您使用 Elementor 的全局站点设置来定义全局按钮设计，它也适用于此处。

您的 CTA 也应该放在标题的右端。 这个引人注目的链接不仅可以为标题带来视觉平衡，而且可以作为转换的有用快捷方式。

这可以通过序列位置效应设计原则来解释，即人们比其他人更容易记住系列中的第一个和最后一个项目。 因此，当他们准备好转换时，他们不必在网站内容中寻找 CTA。 他们会知道他们可以直接转到标题来执行此操作。

拥有大量内容档案或产品库存的网站将从标题中的搜索栏受益匪浅。

Mashable 就是一种这样的数字出版物：

这里有几点需要注意。

首先是搜索栏不仅仅由放大镜表示。 它与“搜索”一词配对。 虽然对于许多人来说它可能是一个足够识别的图标，但最好不要假设每个人都知道它是什么。 它本身也可能太小，人们很难找到它。

另外，请注意 Mashable 如何不将用户推送到新页面进行搜索。 搜索栏会根据查询自动填充结果，从而带来更好的用户体验。

具有电子商务功能的网站应始终在主标题或其实用程序栏中包含电子商务元素。 以下是丝芙兰的做法：

最右上角有三个电子商务元素：

1. 登录/帐户（角色图标）
2. 愿望清单（心形图标）
3. 购物车（购物袋图标）

很多时候，这些电子商务链接仅由图标表示。 但是，如果您不确定您设计的图标是否易于识别，或者它们是否会从与标签配对中受益，请对它们进行 A/B 测试。

标题是网站的可信部分。 虽然你想给它一个自定义的旋转，但你不想偏离既定的规范太远。

以下是一些达到正确平衡的提示：

我们经常关注如何使用留白来改进页面的设计和内容。 但是空白也是网站标题设计中的宝贵资产。

让我们看看空白是如何影响 BBC 标题的：

首先，登录按钮和导航之间有很大的空间。 这为徽标提供了发光的空间，同时鼓励访问者通过登录来优化他们的体验。

接下来，您的导航有九个等距的链接，它们之间有细小的分隔线。 可能有很多类别可供选择，但间距将有助于访问者一一关注。

然后你就有了内置在搜索栏中的空间。 这对于实际目的很有用。 通过设计宽搜索栏，用户可以更轻松地找到和使用它。

这种设计选择也是一个明智的选择，因为它将游客的注意力吸引到黑色条形末端的白色大块上。 本质上，搜索栏起到了 CTA 的作用。

您可以通过使用 Elementor 构建自定义标题来控制间距：

您可以编辑标题中每个元素周围的边距和填充以及块中每个元素周围的填充（如上面的导航示例）。

通常，Google 建议网站的移动版和桌面版包含相同的内容。 我不是在争论这个。 桌面上的标题应与移动设备上的标题、链接和信息具有相同的徽标、链接和信息。

也就是说，它们的设计方式应该有所不同。

让我们以 Chick-fil-A 为例。 这是打开菜单子导航时桌面标题的样子：

有四个顶级导航链接。 当其中一个打开时，子导航将显示为它们下方的水平行。

无论是 4 个链接还是 14 个链接都没有关系。该导航不适合移动网站的标题。 所以，这就是移动网站这样做的原因：

左角的汉堡包图标打开，显示一个全尺寸的垂直标题。 搜索栏、导航链接、Chick-fil-A One 会员区和 CTA 都在这里。

它与桌面上的标题内容完全相同，只是具有更适合移动设备的演示文稿。

您可以使用 Elementor 自定义标头构建器来执行此操作：

只需将您的响应模式切换到智能手机或平板电脑视图，并为这些较小的屏幕自定义布局、对齐、动画和其他任何您需要的内容。

有人会在网站上使用标题的原因有很多。 而不是让他们在组织标题时停下来考虑他们的选择，这样就可以很容易地准确找到他们正在寻找的东西——而且也很快。

让我们来看看 Asana 是如何做到这一点的：

Asana 徽标位于标题的最左角。 旁边就是导航。 徽标和所有导航链接之间的等距间距表明徽标（即主页链接）和导航应被视为一个整体。 这是基于称为公共区域定律的设计原则。

在右侧，我们有语言切换器图标、“联系销售”、“登录”以及“免费试用”CTA。 这是一个大杂烩，但他们被降级到头球的另一端是有道理的。

这并不是 Asana 在组织标题内容方面做得好的唯一方式。 这就是“为什么是体位法？” 子导航如下所示：

超级菜单的格式与您格式化网页的方式非常相似。 结构如下所示：

• H2 标签：为什么是体位法？
• H3 标签：概述、功能、所有计划
• H4 标签：H3s 下的粗体标题

这里并不真正需要彩色图标。 导航结构及其在下拉菜单中的布局方式使阅读标题内容变得异常容易。

顺便说一下，您还可以在设计与标题一起使用的附加条时应用这种顺序和层次结构的想法。 这是 East Bay Inn 网站上的一个很好的例子：

主标题栏是最大和最亮的。 字体也比其他字体更厚更大。 通过这种方式设计，主要焦点将转到标题，然后访问者可以根据需要参考其他横幅以获取其他信息。

标题不是让您的字体选择发挥创意的地方。 当然，除了标志。

以 Dribbble 为例：

手写字体是徽标的绝佳选择。 它是独一无二的、令人难忘的，并告诉您很多有关网站上作品的手工制作性质的信息。

然而，手写字体——或者任何高度风格化的字体，老实说——在像标题一样小的空间里很难阅读。 因此，最好为您的文本链接和信息选择衬线或无衬线网络字体。

另外两件事情要记住：

在大小方面，目标是至少 16 像素——这适用于主标题以及附加到它的任何条。

至于颜色，要注意颜色对比。 字体和背景之间的比例至少应为 4.5:1。 同样，这适用于标题以及它周围包含的任何辅助信息。

如果您要构建完全自定义的标题，则可以在 Elementor 的样式编辑器下设置这些字体。 如果您只想采用网站其余部分的排版和颜色，只需确保您的全局设置完全按照您的需要定义它们：

在导航中使用图标、图像和视频等视觉元素时，您应该有充分的理由这样做。

正如我们在上面的几个例子中看到的，图标对于搜索栏、购物车、位置查找器、语言切换器等网站标题元素很有用。 请注意使用不常见或解释不明确的图标。

至于图像和视频，没有这些庞大的元素可能会更好。 如果您已经在努力让您的网站以最高速度加载，那么将图像文件添加到您的标题（当然，除了徽标之外）可能不是最好的主意。

也就是说，在一些用例中，图像实际上可以提高访问者从标题，特别是从导航中获取所需内容的速度。

这是 MINI USA 的一个非常好的例子：

当然，MINI 可以只列出其每个型号的名称。 然而，伴随的视觉效果将使从一堆中选择一个变得容易得多。

导航中图像的其他一些很好的用例是大型菜单和博客或新闻网站。

要避免的一件事是视频。 视频是用来观看的，标题并不是长时间参与的理想位置（即使它只有 30 秒长）。

动画并不总是必须过于夸张才能有效。 例如，应用于导航的小动画，如果以正确的方式完成，实际上可以提高注意力和参与度。

让我们看一些例子。

这是佛罗里达水族馆网站上的：

当访问者将鼠标悬停在其中一个主要导航链接上时，其余链接会淡出。 这是第一个帮助用户专注于可用内容的动画效果。

然后，当他们将鼠标悬停在二级或三级链接上时，悬停页面会变成与其他页面不同的颜色。

Target 是另一个使用动画来聚焦导航的网站：

有了这个，当二级导航滑动打开时，我们会得到一个平滑的滑动动画。 我们也得到了一个衰落的效果。 但是，这适用于页面而不是导航。

无论您是设计自定义标题模板还是从 Elementor 页面构建器将导航菜单插入页面，您都可以轻松地将动画应用于导航：

您将在 Layout 下找到这些动画。 虽然高级下也有运动效果，但它们会立即为整个导航菜单设置动画。 最好以小剂量使用动画来使所选页面栩栩如生。

除非您设计的网页内容很少，否则在您的网站上添加粘性标题可能是个好主意。 长单页网站，以及带有长提要的网站（如新闻和电子商务网站），肯定会从中受益。 这样一来，无论访问者在页面的下方走多远，访问者都将始终拥有触手可及的标题。

NNG 有一些关于如何设计粘性标题的有用提示，这样它们就不会妨碍访问者或损害他们的体验：

1. 当访问者开始滚动时将它们缩小。
2. 在标题和内容之间创建强烈的对比，以便访问者知道一个在哪里结束，另一个从哪里开始。
3. 保持动画小。

Champion 网站遵循以下规则，您可以看到它如何帮助改善购物体验：

如果您想尝试这种粘性效果，您需要对编辑代码感到满意（只需一点点）。

NNG 关于垂直导航有一些非常棒的说法：

• 您可以根据需要添加任意数量的链接，而不会让它们挤满标题。
• 您可以轻松缩放网站页面，而不会严重影响网站标题设计。
• 它们更容易浏览，因为访问者习惯于向下看网站的左栏。
• 用户在社交媒体和网络应用程序上花费的所有时间都非常熟悉垂直导航。
• 垂直导航将在桌面和移动设备之间创建一致的体验。

但是需要考虑空间问题。

水平标题通常设计得很薄。 无论如何，当访问者向下滚动页面时，许多粘性标题会缩小，因此他们最终不会占用太多空间。

侧边栏风格的导航并没有那么奢侈，除非它们被设计成只有当有人点击汉堡菜单图标时才会出现。 像 Alfond Inn 的这个：

也就是说，如果你能让你的粘性侧边栏菜单足够紧凑，你就可以防止它成为对用户体验的干扰。 这是一个很好的例子，说明如何从德莱尼酒店做到这一点：

与网站上的 1200 像素相比，侧边栏只有 250 像素宽。

本教程将引导您完成为您的网站创建粘性侧边栏导航的过程。

透明标题是那些元素仍然存在的标题——标志、导航、CTA 等等——但它们背后没有坚实的背景。 可以想象，这对于某些网站来说可能是一个棘手的设计选择。

一个重要的原因是因为如果文本出现在繁忙的背景或低颜色对比度的背景前，它会很难阅读。 因此，除非在访问者滚动时标题完全从视线中消失，否则当他们滚动某些部分时，您将面临导航和其中的其他文本变得不可读的风险。

也就是说，有一些网站可以使用这种设计选择。

Conti di San Bonifacio 解决这个问题的方法如下：

标题仅由左角的白色徽标和右侧的白色汉堡菜单图标组成。 在每一页的顶部都有一段色彩丰富的视频或图像，与白色形成鲜明对比。 而且由于该网站的视觉效果如此之重，因此标题的可见性很少受到影响。

如果您喜欢这种极简的网站标题设计风格，并且您的主题不会自动为您提供透明背景，请通过本 Elementor 教程了解如何自行设置。

标题是您网站最重要的元素之一，因为它占用的空间与其带来的好处之间的比率是无与伦比的。

标头有多种用途。 它们通过链接、精心设计的大型菜单和搜索栏提供整个网站的概述和轻松导航。 它们也是使用公司徽标以及正确的排版和配色方案来宣传您的品牌的好地方。 最后，他们可以通过 CTA、快速访问电子商务和突出这些元素的动画来最大限度地参与。

我们已经讨论了不同类型的标头，以及创建自定义标头的最佳实践，并提供了示例。 因此，请按照本指南创建您自己的独特标题，以获得更好的参与度和品牌知名度。