微交互是改善网站用户体验的好方法。在本文中,您将确切地了解它们是什么以及如何在没有任何特殊技术知识的情况下在 WordPress 中使用微交互。

“微交互”是指您的网站对访问者的行为做出响应的微小时刻。但是,不要让“微”部分欺骗了您。注意这些小细节实际上可以产生一些非常大的积极影响——比如增加用户参与度,甚至增加转化率。

微交互简介

虽然您可能不熟悉“微交互”一词,但您无疑已经看到它们的实际应用。事实上,这种技术在网络上已经变得如此普遍,以至于大多数网站现在都期望它。

微交互是网页上的一小段动态内容。换句话说,当用户执行特定操作时,页面上会发生一些细微但明显的变化:

在上面的示例中,您可以看到当查看者将鼠标悬停在 Facebook 上的每个图标上时,它会稍微放大并四处移动。您可能经常遇到此功能,有时甚至没有注意到它。

有许多类型的微交互,但最常见的一些包括:

  • 元素(例如按钮或链接)会更改其大小或颜色。
  • 当您突出显示文本或将鼠标悬停在页面的特定部分(例如工具提示或社交共享选项)上时出现的弹出元素。
  • 响应特定用户操作而播放的小动画,例如“状态”动画,让您知道下载正在进行或正在处理购买。

更重要的是,在您自己的网站上实施这些类型的微交互有很多原因。首先,用户此时希望看到它们,它们使您的页面更有趣。此外,它们可以提供有关用户行为的直接反馈,甚至可以作为与您网站交互的小心理奖励。

事实证明,使用微交互是改善网站用户体验 (UX) 的最佳方式之一。当用作号召性用语 (CTA) 的一部分时,它们甚至可以增加销售额和其他转化率。

微交互提供了如此多的好处,没有理由不以某种方式将它们包含在您的网站上。这意味着您需要了解如何在 WordPress 中使用微交互。

如何在 WordPress 中使用微交互(3 个简单的技巧)

微交互有很多种,在您的网站上使用它们的方式几乎是无限的。为了帮助您入门,我们将向您展示如何在 WordPress 中快速集成一些最常见的微交互。让我们来看看!

1.为重要元素添加有趣的动画

让我们从动画开始。这就是我们之前在查看 Facebook 的“赞”按钮时提到的内容。您可以通过让页面上的元素播放简短的动画来响应特定的触发器(例如点击)来创建类似的效果。

我们最喜欢的插件之一是恰当地命名为 Animate It!:

这个插件是免费的,易于使用,并提供许多自定义选项。但是,您不需要创建全新的元素。相反,您可以将动画添加到您网站上几乎任何预先存在的元素,包括简单的文本、链接、按钮,甚至图像。

要使用 Animate It!,您首先需要安装并激活它(自然)。然后,只需打开一个页面或发布您想要动画的元素:

在这里您可以看到我们有一个简单的 CTA 和一个我们希望访问者点击的按钮(使用 MaxButtons 插件添加):

让我们把这个按钮变得更有吸引力。为此,我们将突出显示它并选择红色的 Animate It!图标返回到编辑页面上的工具栏。这会产生一个非常全面的设置菜单:

在这里我们可以选择动画的类型和持续时间。我们甚至可以配置不同的动画以在翻转时触发。另外,在选项下,我们可以决定是否重复,并选择触发它:

对于我们的示例,我们将选择 Pulse 动画。我们将使它重复并将其设置为在按钮悬停时触发,最后点击插入按钮:

如您所见,按钮现在包含在反映我们选择的设置的代码中。我们在前端看看:

< p>这比静态按钮有趣得多,并鼓励用户点击进入我们的销售页面。您可以使用此插件做很多事情,因此我们强烈建议您亲自尝试一下。

2.为您的读者显示有用的工具提示

动画很有趣,但 WordPress 中的微交互也可以提供信息 - 让我们使用“工具提示”来演示我们在说什么。这些是当您将鼠标悬停在特定文本部分、链接或其他元素上时出现的小信息片段。这是为您的网站访问者提供额外价值的好方法。

您可以更清楚地解释术语、概念或说明,而不会占用页面上的额外空间。此外,通过使工具提示成为可选元素,您不会冒光顾不需要这些信息的读者的风险。

要在 WordPress 中实现工具提示微交互,您可以使用免费的 Simple Tooltip 插件:

激活插件后,您将在 WordPress 编辑器中获得一个新添加的工具提示按钮:

p>

列表点击图标会生成一个片段的代码。您需要将工具提示气泡的内容替换为您希望工具提示显示的任何内容。然后,粘贴您想要使用的文本、图像或其他元素来代替此触发工具提示:

如果您想自定义工具提示的实际外观,您需要访问 WordPress 控制面板中的简单工具提示 > 设置:

img src ="https://static.themez.cn/wp-content/uploads/2023/02/1677266255884.png" />

在这里你可以选择背景和文字颜色,重新定位工具提示等。选项不多,但结果将是一个干净、可读的工具提示,与您的内容无缝契合:

再简单不过了!

3.提示在您的帖子上进行社交分享

上述两种技术可以创建可用于多种目的的微交互。然而,WordPress 中的一些微交互是为实现特定目标而设计的。我们上一个例子就是这种情况。

鼓励访问者分享您网站的内容是一个很好的策略。您可以让他们更直接地与您的内容互动,并且您可以获得一些免费营销作为回报。更重要的是,社交媒体可以说是建立在线受众的最强大工具。

幸运的是,您可以在 WordPress 中使用微交互,让用户可以轻松地分享他们认为有价值的文本片段。您只需要 Highlight and Share 插件:

同样,这是我们的首选工具,因为它免费、易于使用且可靠。更重要的是,它只需要很少的配置。事实上,插件的功能将在安装时自动实现。

基本上,如果访问者突出显示您的 WordPress 帖子中的任何文本,该插件将向他们显示一些分享按钮:

单击其中一个按钮将打开访问者的个人资料并提示他们创建一个帖子,其中包括他们突出显示的文本和它来自的页面的 URL。

如果您愿意,您可以调整插件的设置来自定义此功能。为此,请访问 WordPress 中的新设置 > 突出显示和共享选项卡:

在这里您可以决定启用社交分享按钮的内容类型,添加更多社交媒体平台,甚至包括短链接。另外,您可以选择在按钮上使用一个简单的图标:

通过这种简单的微交互,您可以让用户更有可能在他们自己的社交网络上分享您的内容。

结论

在前面的部分中,我们向您展示了在 WordPress 中创建有趣且有用的微交互是多么容易。回顾一下,这里有三种最简单的技术:

  1. 向重要元素添加有趣的动画。
  2. 向读者显示有用的工具提示。
  3. 在您的帖子上提示社交分享。

您是否希望在您的 WordPress 网站上使用任何其他类型的微交互?在下面的评论部分与我们分享您的想法!