网站的风格、格式和质量各不相同。但她们都有一个共同点?标题——顶部的条带以便导航。
尽管占用的空间很小，但标题是网站上参与度最高的元素。想要给人留下深刻印象的企业将努力达到完美的平衡——提供简单、直观但奇特和剌激的体验。
在这篇文章中，我们将在分解时分享 24 个网站标题示例：
究竟哪些是网站标题
包含在您的网站标题中的内容
优化转化的最佳实践
这样，您可以提供可靠的用户体验，同时也支持您的营销目标。
什么是网站标题?
网站标题是一般在网站底部运行的视觉印刷条或菜单。它包含许多可点击的组件，例如徽标、导航标签、登录按键等。几乎所有网站——即使是最基本的网站——在其主页上都有一个标题，而且许多网站的其余页面上都有不同的标题。
这是一个十分基本的、可立刻辨识的网站标题：
如上所述，网站标题具有双重责任：
导航。首先，他们须要才能有效地将网站访问者引导到网站上的其他页面。
营销。如果设计得当，标题可以(并且应当)成为您企业的营销资产和促销工具。
网站标题应当包括哪些?
您会在下边找到一些可以出现在网站标题中的元素。但重要的是要注意，并非每位标题就会包含所有那些。这完全取决于您的行业、业务类型和网站格式。此外，标题可能会按照您在同一站点中的那个页面而改变。例如，主页标题可能包含 5-6 个可点击元素，而在资源页面上，标题可能包含较少的可点击图标。
标识
除了极少数例外，网站标题的所有变体都将突出显示公司徽标，当点击该徽标时，会将用户带回主页。如果她们走散了，他们总是可以借助它来引导她们回到熟悉的领域。
导航链接
这也是任何网站标题的核心。通常，您希望将主要导航选项保持在 5-7 个元素之间，但您链接到的页面会因您的利基而异。对于个别企业，导航菜单链接到关于我们页面、产品或服务页面、定价页面、资源页面和联系我们页面。对于其他人，它是职业页面或首次病人页面。这完全取决于行业。
大多数 SaaS 和技术网站标题看起来像这样：
产品让访问者深入了解各类功能或产品类型。
解决方案将访问者引导到一个页面/中心，在那儿她们可以见到公司的平台怎样在不同的场景中被借助，或者看见不同的包。
资源一般包含博客、案例研究或推荐、知识库和/或蓝皮书。
定价将引导访问者步入一个综合页面，其中显示了平台的各类订阅包。值得注意的是，一些 SaaS 平台不愿公开其定价包。对于订制且缺少统一定价结构的企业解决方案而言尤其这么。
搜索栏
在互联网的初期，搜索栏比昨天愈发普遍和大量使用。当您看见它时，您会晓得它是一个搜索栏，大多数网站使用放大镜图标来指示元素的功能。
与主页标题相比，您更有可能在博客菜单标题上找到搜索栏。不过，有些网站在其主页标题中提供了它。Brightcove 是领先的视频托管平台，有趣的是有一个搜索栏，但没有更常见的定价元素。
购物车
电子商务网站的主要内容，此 CTA 应坐落右上角，并且是购物车或购物袋图标。
社交媒体按键
虽然那些更常显示在网站的脚注中，但一些网站标题包含指向社交渠道的链接。这是一个事例：
登录数组
任何具有登陆选项的网站也应在其标题中包含登入数组。如果您是活跃顾客，您将拥有一个用户名和密码，您可以输入该用户名和密码以获得访问权限。大多数主要平台也为您提供通过您的 Google 帐户获取访问权限的选项。
号召性用语
在这篇文章的几乎所有示例中，您会注意到的一件事是标题包含一个行动呼吁。由于这是网站上使用最频繁的元素，您须要借助它来帮助支持您的业务目标。这可能是使用免费工具、注册个别东西、联系企业、开始免费试用等等。
网站标题示例和趋势
尽管它们只有几个组件，但有很多方式可以配置您的网站标题。让我们看更多的网站示例，为您提供看法和灵感。
带有左对齐徽标的单行标题
Zoho 基本但有效，只有四个可点击的导航元素和一个搜索栏。另请注意 Zoho 如何选择右对齐。这突出了标志，给它更多的空间来吸引旅客的注意力。
带有通知栏的单行标题
虽然标题本身很普通，但底部的条幅致力导致人们对新事物、重要事物和/或令人激动的事物的关注。
当然，这些条幅将包含CTA。单击后，访问者将被引导到指定的登入页面，该页面详尽说明了条幅中的让利。
两层标题
一个两层的标题可以帮助呈现更多的导航选项，而不会用一行连续的图标压倒访问者。
带有通知栏的两层 hHeader
Amplitude 在其单层标题上方添加了一个通知栏，以宣传正式召开的大会。通知栏的宽度与标题相同，使其觉得不这么混乱，更像是网站的一个单独部份。
带有实用工具栏(粘性栏)的标题
一些网站会附加脚注，以便在访问者向上滚动页面时将其粘住。他们的理由很简单：为您的访问者提供随时导航到您网站的任何部份的选项。
这个标题始终伴随着你到网站的顶部。
浮动标题
正如在Mixpanel的主页上见到的那样，浮动标题类似于黏性条，不同之处在于当您向上滚动时，您会看见标题下方和上方的网页，从而形成浮动疗效。
带有小型菜单的标题
一些网站难以承受它们在标题中共享的信息的稀缺性。在这种情况下，使用小型菜单可能十分有用。
带有多站点导航的标题
通常在零售和电子商务网站上见到，多导航标题容许用户轻松地从一个姐妹公司的网站跳转到另一个。
左对齐的垂直标题
第一个非传统标题示例，您会发觉许多相同的导航菜单项垂直悬挂在左边。
右对齐的垂直标题
相同的概念，但此次在左侧垂直对齐。这些人更进一步，让每位菜单项也垂直悬挂。
汉堡包滑入式
不太常见但依然引人入胜的披萨菜单挺好地展示了潮流的网页设计。菜单滑入时背景变暗，有助于吸引访问者对可点击选项的注意。
这是同样的事情，只是在另一边：
全面接管滑入式
你可以显得十分大胆，让菜单扩充到整个屏幕，就像 Vimeo 一样：
网站标题最佳实践
使用颜色对比。 至少，标题的背景颜色和您选择的字体之间的比列应为 4.5:1.这适用于标题及其周围包含的任何辅助信息。一旦显示标题菜单，您可能还希望使页面的背景变暗以使其愈加集中。
包括 CTA。我们在里面提及了这一点，但值得再度提到。无论是联系您的企业、试用免费工具、开始试用，
让它显得胶状。一些网站的设计和动态滚动显示很容易让您惊呼，但最终，大多数网站都有一个明晰的目标：转化。在访问者大跌之前，您有大概15 秒的时间为她们提供价值，因此您须要让访问者一直尽可能轻松地导航到重要页面。更不用说随时查看最重要的 CTA。
让它直观。在为您自己的网站选择一个之前，请复查您的利基市场中的竞争对手和其他网站，看看什么是最常见的。网站导航不是您应当努力做到奇特或“破坏性”的领域。
针对移动端进行优化。除非您使用仅在显微镜下可见的字体大小，否则水平标题不是联通设备上的选项。最常见的方式是为联通浏览配置一个比萨菜单。
值得注意的是，如果您须要它，在针对联通设备进行优化时，您何必遗失搜索栏甚至CTA 按钮。Hubspot 的做法如下：
坚持使用简单的字体。对于用户体验而言，易读性就是一切(事实证明，文案心理学也是这么)，对于您网站最基本的可点击元素而言，它具有双重重要性。Sans Serif 字体在网站标题文本中很常见，因为它十分清晰易读。
好在 Lemonade 没有使用它的 logo 字体作为它的标题字体。
网站标题：一种精美的艺术方式
网站标题有各类形状和大小，对您网站的成功至关重要。无论您选择采用更传统的设计还是更具实验性的设计，遵守通用最佳实践特别重要。当一个网站使用了 header 元素时，它是相当不经意的。您的网站的访问者将在获得简约而剌激的导航体验后离开。通常，这有助于引导她们实现您的最终业务目标;无论是登录特定页面还是实际转化为付费顾客。
