关于网页设计，热图告诉我们什么

已发表: 2021-09-17

当您想了解有关网站访问者的更多信息时，热图是一个很好的工具。它们将帮助您查看人们点击页面的位置、滚动的位置以及他们在网站上停留的时间。

在这篇博文中，我们将了解一些不同类型的热图，以及它们可以告诉我们关于我们的网页设计的内容。

什么是热图？

热图是数据的可视化表示。通过网络分析，访问者与您的网站互动时会收集数据。热图服务将跟踪点击或鼠标移动，并在您要检查的站点图像上的网格上以彩色显示它们。

较暗的区域表示更多人与您页面上的内容进行交互，而较亮的部分表示点击（甚至查看）的人较少。

假设您有一个网站，想知道大多数访问者点击的位置。您可以运行 A/B 测试，但这需要时间和金钱。

热图将在一个快速概览中为您提供所有这些信息 - 无需做任何额外的工作！这对于每个页面上都有大量内容的网站特别有用，因为当变量太多时很难看到模式。

热图通过为我们提供特定的数字和可视化来提供帮助，因此我们可以更轻松地得出关于在线效果最佳的结论。

热图帮助我们了解访客的需求。我们可能会发现很多人点击了我们以前从未想过的图片或按钮——结果证明这是您最重要的号召性用语之一！

热图可以向我们展示哪些图像吸引了人们的注意力。我们可能会发现，埃菲尔铁塔的照片比带有企业标志的图片更能激发点击！

热图还可以揭示人们不理解的元素。我们可能会发现我们的大多数访问者都在寻找某个按钮或某段内容，但他们却忽略了它，因为它不够突出！

当页面上有多个元素时，热图可以帮助我们决定将时间和精力集中在最好的事情上。我们可能会发现人们将一半的时间花在查看右下角的图像上，这意味着可能值得添加一些额外的信息或移动一些东西！

有了对您网站访问者行为的所有这些洞察，我们可以就他们希望如何在线浏览页面做出更好的决定。通过最大限度地减少 A/B 测试工作，同时通过网页设计更改最大限度地提高参与度，它将为您节省资金。

当您重新设计网站时，拥有热图将使设计师的工作变得更加轻松。您不仅会得到更好的产品，而且设计师不应该花那么长时间来完成这项工作，这将为您节省一些钱。

那里有许多不同的热图。以下是一些最常见的快速概览：

当有人提到热图时，这可能是您首先想到的。点击地图显示了人们在您的页面上点击过的所有位置，帮助您查看他们认为有趣或重要的元素。

这种类型的分析有三种主要类型的数据点：一个区域内的点击（如一个组），一个区域外但仍在同一页面上的点击，以及来自另一个页面的点击！

滚动图告诉我们访问者在离开某个网页之前滚动了多远——以及他们的滚动是有意还是无意。了解用户在页面上的平均时间和他们的平均滚动长度可以告诉我们他们发现我们的内容有多吸引人！

鼠标地图显示了人们在屏幕上移动光标的位置。我们可能会发现您的大多数访问者将其放置在不同的区域，但将其放置在那里的时间很短，这可能表明您需要添加更多相关的文本或图像，以便他们停留更长时间！

您可以根据需要多次使用它们！大多数服务提供无限的视图和数据保留。有些甚至允许您下载您的结果，这样您就不会在他们的服务器或在线平台发生问题时丢失任何东西。虽然这不是很常见（并且需要时间）。

是的！热图设计用于平板电脑和智能手机，因此您不会丢失任何有价值的见解。此外，某些服务可让您跨设备同步数据——因此，如果有人在家中通过计算机访问页面，当他们外出时在手机上再次访问页面时，热图会获取该页面。

它们也适用于响应式网站，这是一种合身的网站设计，可让您的网站在任何设备或屏幕尺寸上都能正常运行。查看我们的博客文章，了解有关如何使网站具有响应性的 6 个有效技巧，这样您只需担心一个热图而不是多个热图！

在这里提出问题是关键！需要考虑的一些事情：哪些内容将从更多点击或参与中受益最大/哪些内容被点击最少？人们在离开我们的网页之前向下滚动多远？

哪些图片或元素在访问者登陆我们的网站后立即吸引他们的注意力（或立即让他们离开）？访问者在我们网站上花费的平均时间是多少？他们是向下滚动以阅读更多内容，还是保持原地不动而不再继续阅读？

你什么都不用买！某些服务提供免费选项，但您可能会发现自己受到限制。大多数付费计划将为您提供无限的视图以及高级功能，例如能够下载个人记录的结果。

有许多不同的平台，因此重要的是先考虑您要寻找的洞察类型，然后将这些需求与每个平台的功能进行比较。如果您的目标是找出访问者在您网站上点击的位置，您将需要一项服务，让您可以查看单个点击，而不仅仅是感兴趣的区域。

如果热图分析或滚动图等高级功能并不重要，但获得所有数据点的无限视图的能力听起来很有希望，请在查看不同平台时将这些东西相互权衡，以便您决定哪一个最适合您的需求！

总之，热图是查看访问者如何与您的网站互动的好方法，无论是通过单击某些元素还是向下滚动页面。每种类型的热图都有自己的用途，可以帮助您找出对用户最有吸引力的内容，他们最常（和最不）关注哪些领域，等等！

相关：移动站点和响应式站点之间的差异。