微交互可以显着改善您网站的用户体验。在本文中，我们将告诉您什么是微交互以及如何将它们添加到您的 WordPress 网站。您还将学习以下内容：
- 如何在 WordPress 中使用微交互
- 如何充分利用微交互
然后，我们将介绍一些技巧，帮助您为您的网站创建有效的微交互。
让我们开始吧。
什么是微交互？
微交互是一种很小但很容易被注意到的动画，当您在网站上单击、悬停或与某些元素交互时会播放这些动画。
这是一个示例 - 如果您将鼠标悬停在“赞”按钮上：
并获得动画奖励：
看上面的例子，人们会认为所有的微交互都是在网页上添加一些技巧。但实际上，这并不是他们所做的全部。
事实上，这些微妙的动画不仅仅可以改善您网站的用户体验。如果实施得当，微交互可以：
- 就如何使用您网站上的特定元素提供更多视觉反馈
- 让访问者更清楚地了解您的网站上述元素的用途
为了帮助您更好地理解微交互，值得先稍微讨论一下；如何让它们出现在您的网站上。
如何向 WordPress 添加微交互
有几种方法可以向您的 WordPress 站点添加微交互。它们是：
- 通过 CSS
- 通过 JavaScript
- 通过插件
下面是每个方法详细分类。
通过 CSS
CSS 已经在您的网站设计中发挥了不可或缺的作用，使其成为向您的网站添加微交互的理想工具。
事实上，这个过程可以像编辑主题的样式表或子主题一样简单。或者，您可以使用悬停效果（例如带下划线和彩色的超链接）来指示可点击性。
添加悬停效果使超链接更具交互性。这样，即使是初次访问者也知道他们可以与您网站的该元素进行交互。更好的是，您可以使用自定义 CSS 插件，例如 WordPress Customizer 或 Jetpack。
JavaScript
在 CSS 之前，有 JavaScript。而且，它仍然是使网站元素移动的好方法。按钮是微交互更理想的元素，在某些情况下，JavaScript 可能是比 CSS 更好的选择。
Lada Buttons 是一个免费的加载按钮库，它是一个很好的例子，说明了如何使用 JavaScript 向 WordPress 网站添加微交互。
WordPress 插件
您可以利用多个具有内置微交互功能的 WordPress 插件。其中包括：
- Worksheets，一种拖放式表单构建器，可让您在用户每次发送表单时显示可自定义的加载文本。
- WordPress 工具提示可让您向视频、文本、摘录、图像等添加工具提示。
- 悬停和滚动效果，包括 Lottie 动画
如何在 WordPress 中使用微交互
有很多方法可以利用 WordPress 中的微交互交互，但让我们看看一些更常见的方法。
为您的内容提供即时社交分享
全球超过 50% 的人口使用社交媒体，Instagram、Facebook、TikTok 和 Twitter 等平台是接触新内容的方式和高度针对性的潜在客户的好地方。无论您是为企业写博客还是经营个人博客，鼓励人们在社交媒体上分享您的内容都可以使您的品牌人性化。
它还使您能够产生更多的参与度、真实性和信任度，从而推动新业务的发展。利用社交媒体是建立在线形象的最强大策略之一。
这样做的美妙之处在于，您可以使用微交互让您的关注者更轻松地通过“突出显示和分享”插件分享他们认为有价值的片段。
这个插件不仅免费，而且可靠易用。事实上，这些功能会在您安装插件后自动推出。顾名思义，突出显示和共享插件会突出显示 WordPress 帖子中的文本，并通过显示共享按钮提示读者进行共享。很简单。
向读者显示有用的工具提示
对于初学者来说，工具提示是当您将鼠标悬停在链接、元素或文本片段的特定部分上时弹出的小信息。它们的主要目的是为您的读者提供额外的信息。
将工具提示用作网站用户体验设计的一部分，可以更轻松地解释术语、说明和概念，而无需在页面上占用额外空间。此外，工具提示有助于确保您不会光顾不需要这些信息的读者。
同样，您可以使用名为 WordPress Tooltip 的工具在您的 WordPress 站点中实现工具提示微交互。
添加有趣的动画
想想 Facebook 的“赞”按钮。每次将鼠标悬停在按钮上时，它都会放大并四处移动，
您可以使用微交互为 WordPress 网站上的元素创建相同的效果。如何？ ...通过使用插件，方便地调用 Animate it！
本插件免费，有许多定制选项。最好的部分是您不必从头开始创建新动画。 Animate It 允许您向网站的现有元素添加动画，包括图像、链接和文本。
您还可以使用 Lottie Animations 来美化您的页面，提升用户体验。这是一篇概述如何在 WordPress 中使用 Lottie 动画的博客文章。
微交互最佳实践
向您的 WordPress 网站添加微交互可能是一个棘手的平衡行为，特别是如果您是初学者。尽管如此，遵循以下两个最佳实践可以帮助您快速高效地完成工作。
决定对哪些元素进行动画处理
虽然动画可以很好地改善您网站的用户体验，但它们并不是对每个元素都是理想的。例如，动画非常适合表单或按钮，但可能不适用于大型元素或标题。
例如标准的搜索栏打字动画：
超级简单又醒目。尽管文本很小，但它增加了可用性并有所作为。
在您的网站上设置动画元素时的经验法则：
- 使用用户可以与之互动的项目
- 寻找访问您网站的地方或读者可能不知道如何使用的元素 - 为这些区域设置动画。
- 有疑问时坚持使用搜索栏、表单字段和按钮
决定使用哪些微交互
微交互都是为了改善您的网站用户-友善。从本质上讲，这意味着您在决定使用哪些动画时必须深思熟虑。考虑一个搜索栏从图标中长出的微交互：
与第一个不同，它没有提高可用性。此搜索栏的动画方式可能对某些用户没有吸引力且不方便。它不像第一部动画那么简单。
如果您希望微交互对用户友好，请牢记以下几点：
- 显示特定元素的工作原理
- 当访问者利用微交互在元素被正确使用时发出成功信号
然后，根据您想要做的或完成的事情，选择最好的插件来实现您的微交互。
在 WordPress 中创建有效微交互的技巧
由于微交互对您的 WordPress 网站非常重要，因此了解如何使它们尽可能有效至关重要。这里有一些提示可以帮助您正确处理。
功能是关键
首先，您必须有创建微交互的目的。
也就是说，您想在您的网站上实施微交互的首要原因是鼓励用户与您网站的特定元素进行互动。因此，您必须使您的微交互尽可能有效以触发与用户的连接。
简单是游戏的名称
微交互之所以这样称呼是有原因的。它们被称为微缩模型，因为它们应该短而甜美。任何旨在改善您网站上的用户体验的东西都应该感觉和看起来干净，对吗？
避免使用不必要的文本或图像使您的微交互混乱。越短越甜越好。
结构很重要
你不能只实现微交互。问题是，例如，为您的号召性用语按钮制作动画是一回事。然而，让用户想要点击一个按钮是完全不同的故事。微交互遵循四部分结构：触发器 > 规则 > 反馈 > 循环和模式。
持久性很关键
实现微交互时要记住的最重要的事情之一是它们应该感觉自然吗？为什么？ …因为您不希望访问者觉得您一直在用不必要的动画轰炸他们。
事实上，用户甚至不应该注意到您的微交互。如果他们这样做了，那应该是因为他们有愉快的经历。
实验和测试
就像您的 WordPress 网站上的任何其他面向公众的内容一样，您需要定期测试您的微交互。这个想法是为了帮助您确定哪些是有效的，哪些是可以改进的。
做到这一点的最佳方法是收集实际用户对微交互的反馈。此外，尝试不同的微交互以找到适合您网站的方法。
微交互正日益成为改善 WordPress 用户体验不可或缺的一部分。 15 秒是您唯一需要吸引访问者注意力的时间，在可预见的未来，微交互将继续出现在许多 WordPress 网站中。
我们希望本文能回答您可能对微交互以及如何在您的 WordPress 网站上正确实施它们提出的一些关键问题。
