什麼是微交互? 如何在 WordPress 中使用微交互

[ad_1]

微交互是改善網站用戶體驗的好方法。 在這篇文章中,您將確切了解它們是什麼,以及如何在 WordPress 中使用微交互,而無需任何特殊的技術知識。

「微交互」是您的網站響應訪問者行為的小時刻。 但是,不要讓「微」部分欺騙您。 關注這些小細節實際上可以產生一些相當大的積極影響——比如增加用戶參與度,甚至增加轉化。

微交互簡介

雖然您可能不熟悉「微交互」這個術語,但毫無疑問您已經看到了它們的實際應用。 事實上,這種技術已經在網路上變得如此普遍,以至於現在大多數網站都期望它。

微交互是網頁上的一小段動態內容。 換句話說,當用戶執行特定操作時,頁面上發生了一些細微但明顯的變化:

Facebook 的「喜歡」按鈕動畫。

在上面的示例中,您可以看到當查看者將滑鼠懸停在 Facebook 上的每個圖標上時,它會略微放大並四處移動。 您可能一直都遇到這樣的功能,有時甚至沒有注意到。

有許多類型的微交互,但其中一些最常見的包括:

  • 一個元素(例如按鈕或鏈接)在懸停或單擊時會改變其大小或顏色。
  • 當您突出顯示文本或將滑鼠懸停在頁面的特定部分時出現的彈出元素,例如工具提示或社交共享選項。
  • 響應特定用戶操作而播放的小動畫,例如「狀態」動畫,讓您知道正在下載或正在處理購買。

更重要的是,在您自己的網站上實施這些類型的微交互有很多原因。 首先,用戶希望在此時看到它們,並且它們使您的頁面更有趣。 此外,它們可以對用戶的行為提供直接反饋,甚至可以作為與您的網站交互的小心理獎勵。

事實證明,使用微交互是改善網站用戶體驗 (UX) 的最佳方法之一。 當用作號召性用語 (CTA) 的一部分時,它們甚至可以增加銷售額和其他轉化。

微交互提供了如此多的好處,以至於沒有理由不以某種方式將它們包含在您的網站上。 這意味著您需要了解如何在 WordPress 中使用微交互。

如何在 WordPress 中使用微交互(3 種簡單技術)

有許多類型的微交互,以及在您的網站上使用它們的幾乎無限的方式。 為了幫助您入門,我們將向您展示如何在 WordPress 中快速整合一些最常見的微交互。 讓我們來看看!

1.為重要元素添加有趣的動畫

讓我們從動畫開始。 這是我們之前提到的,當我們查看 Facebook 的「喜歡」按鈕時。 您可以創建類似的效果,方法是讓頁面上的元素播放短動畫以響應特定觸發器(例如點擊)。

我們最喜歡的插件之一是適當命名的 Animate It!:

這個插件是免費的,使用簡單,並提供了很多自定義選項。 但是,您不需要創建全新的元素。 相反,您可以將動畫添加到網站上幾乎任何預先存在的元素,包括簡單的文本、鏈接、按鈕,甚至圖像。

要使用 Animate It!,您首先需要安裝並激活它(自然而然)。 然後,只需打開一個頁面或帖子,其中包含您要製作動畫的元素:

帶有 CTA 按鈕的 WordPress 編輯器。

在這裡,您可以看到我們有一個簡單的 CTA,以及一個我們希望訪問者點擊的按鈕(使用 MaxButtons 插件添加):

一個帶有按鈕的簡單 WordPress 頁面。

讓我們讓這個按鈕更具吸引力。 為此,我們將突出顯示它並選擇紅色的 Animate It! 圖標回到編輯頁面的工具欄中。 這會產生一個非常全面的設置菜單:

動畫它! 設置。

在這裡,我們可以選擇動畫的類型及其持續時間。 我們甚至可以配置不同的動畫來根據翻轉來觸發。 另外,在選項下,我們可以決定它是否會重複,並選擇觸發它發生:

附加動畫它! 設置。

對於我們的示例,我們將選擇 Pulse 動畫。 我們將使其重複,並將其設置為在按鈕懸停時觸發,最後單擊「插入」按鈕:

動畫它!  WordPress 編輯器中的代碼。

如您所見,按鈕現在包含在反映我們選擇的設置的代碼中。 讓我們在前端檢查一下:

wordpress 中的微交互示例

這比靜態按鈕有趣得多,並鼓勵用戶點擊進入我們的銷售頁面。 使用此插件可以完成很多工作,因此我們絕對建議您自己嘗試一下。

2. 為您的讀者顯示有用的工具提示

動畫很有趣,但 WordPress 中的微交互也可以提供豐富的信息——讓我們使用「工具提示」來演示我們所說的內容。 這些是在將滑鼠懸停在特定文本部分、鏈接或其他元素上時出現的小信息片段。 這是為您的網站訪問者提供額外價值的好方法。

您可以更清楚地解釋一個術語、概念或說明,而無需佔用頁面上的額外空間。 另外,通過使工具提示成為可選元素,您不會冒著光顧不需要信息的讀者的風險。

要在 WordPress 中實現工具提示微交互,您可以使用免費的簡單工具提示插件:

激活插件後,您將在 WordPress 編輯器中獲得一個新的添加工具提示按鈕:

WordPress 編輯器中的簡單工具提示圖標。

單擊該圖標將生成一段代碼。 您需要將 This is the content for the tooltip bubble 替換為您希望工具提示說的任何內容。 然後,粘貼要使用的文本、圖像或其他元素來代替這會觸發工具提示:

簡單工具提示代碼。

如果您想自定義工具提示的實際外觀,您需要訪問 WordPress 儀錶板中的簡單工具提示 > 設置:

簡單工具提示設置。

在這裡,您可以選擇背景和文本顏色、重新定位工具提示等等。 選項不多,但結果將是一個乾淨、易讀且與您的內容無縫契合的工具提示:

簡單工具提示插件的 GIF。

沒有比這更簡單的了!

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

上述兩種技術創建了可用於多種目的的微交互。 但是,WordPress 中的一些微交互旨在實現特定目標。 我們最後一個例子就是這種情況。

鼓勵訪問者分享您網站的內容是一個很好的策略。 您可以讓他們更直接地參與您的內容,作為回報,您會獲得一些免費營銷。 更重要的是,社交媒體可以說是建立在線受眾的最強大工具。

幸運的是,您可以在 WordPress 中使用微交互,讓用戶輕鬆分享他們認為有價值的文本片段。 您只需要 Highlight and Share 插件:

再一次,這是我們選擇的工具,因為它是免費的、易於使用且可靠的。 更重要的是,它只需要很少的配置。 事實上,插件的功能將在安裝時自動實現。

本質上,如果訪問者突出顯示您的 WordPress 帖子中的任何文本,該插件會向他們顯示一些共享按鈕:

突出顯示文本上的社交媒體按鈕。

單擊其中一個按鈕將打開訪問者的個人資料並提示他們創建一個帖子,其中包括他們突出顯示的文本以及它來自的頁面的 URL。

如果您願意,您可以調整插件的設置來自定義此功能。 為此,請訪問 WordPress 中的新設置 > 突出顯示和共享選項卡:

突出顯示和共享插件設置。

在這裡,您可以決定啟用社交分享按鈕的內容類型,添加更多社交媒體平台,甚至包括短鏈接。 另外,您可以選擇在按鈕上使用簡單的圖標:

高亮和分享插件的 GIF。

通過這種簡單的微交互,您使用戶更有可能將您的內容與他們自己的社交網路共享。

結論

在前面的部分中,我們向您展示了在 WordPress 中創建有趣且有用的微交互是多麼容易。 回顧一下,這裡有三種最簡單的技術:

  1. 為重要元素添加有趣的動畫。
  2. 為您的讀者顯示有用的工具提示。
  3. 提示在您的帖子上進行社交分享。

您還想在 WordPress 網站上使用其他類型的微交互嗎? 在下面的評論部分與我們分享您的想法!

相關文章