為什麼微交互在 WordPress 主題設計中很重要？

已發表: 2016-04-06

你知道什麼是微交互嗎？當然，你知道！您可能無法準確地將術語和現象聯繫起來，但您確實每天都會遇到多種微交互。微交互是一次執行一項小任務的與產品相關的時刻或事件。基本上，每次我們打開手機發送消息或更新社交網絡狀態時，我們都會成為微交互的一部分。

公平地說，微交互將在 2016 年變得更大，已經在移動應用程序和網頁設計中實現。出於個人或商業原因，越來越多的人希望上網並建立博客或網站。

資料來源： http://www.materialup.com/posts/compact-login

那麼，微交互實現了哪些功能呢？

由於微交互是在用戶界面中執行的任何操作或與界面的交互，讓我們進一步了解它們的目的。一般來說，微體驗的功能可以定義如下：

提供反饋或展示事件或行動的結果。
完成某個孤立的任務（將手機切換到或關閉靜音模式，喜歡 Facebook 帖子等）。
修改界面環境。
避免用戶錯誤。

微交互是如何工作的？

Dan Saffer 是一位成熟的微交互專家，他在他的書中就微交互的實際工作方式提供了見解。整個過程是4個步驟的循環序列：

來源：http://microinteractions.com/what-is-a-microinteraction/

觸發器是啟動動作的視覺動力。例如，當某個圖像在懸停時亮起，而一個人可能正在瀏覽任何攝影 WordPress 主題中的畫廊，這被認為是繼續微交互的微妙邀請。用戶的反應是觸發器。
規則為微交互的發生設定了條件。如果我們以任何 WordPress 引導主題為例，每當用戶想要更改任何網站部分時，他們都必須使用內置的拖放編輯器（MotoPress 編輯器或任何其他）來獲得結果。
反饋展示了微交互的結果。即，每當執行更改時，修改立即通過 WordPress 博客模板生效，並且用戶能夠觀察其操作的結果。
循環和模式控制微交互的重複動作序列。高級 WordPress 主題始終具有這種推理機制，即用戶將如何以及為什麼要實施其中包含的特定操作序列。

這裡有幾個精彩的現實生活中的微交互示例，您可以從字面上驚嘆：

SpaceNeedle - 向上滾動頁面，動畫將您帶到西雅圖最突出的地標頂部。彈出窗口中的小信息在滾動時逐漸出現。 — **SpaceNeedle** – 向上滾動頁面，動畫將您帶到西雅圖最顯著地標的頂部。彈出窗口中的小信息在滾動時逐漸出現。

來源： http://www.spaceneedle.com/home/

艾米懷恩豪斯傳記網站——點擊漢堡菜單圖標時會出現一個導航欄，每個菜單項都會在懸停時通過展示新圖像來做出反應。 — **艾米懷恩豪斯傳記網站**——點擊漢堡菜單圖標時會出現一個導航欄，每個菜單項都會在懸停時通過展示新圖像來做出反應。

來源： http://www.amy-movie.com/

Toi Digital Agency - 背景中的水晶隨著鼠標的移動而移動，向下滾動箭頭也是如此。 — **Toi Digital Agency** – 背景中的水晶隨著鼠標的移動而移動，向下滾動箭頭也是如此。

來源： http://toi.io/

為什麼微交互有效？

Safer 給出了為什麼微交互真正起作用的幾個原因：

微交互通過即時反饋進行控制——一旦發生微交互，用戶就可以立即看到他們的操作結果，從而在進一步前進時獲得更多確定性。
微交互提供了微妙的指導——它可能會完全被忽視，但微交互通常包含直觀的元素，提示如何在界面中操作。
微交互使用視覺手段作為獎勵——視覺效果代表一種獎勵，同時增強用戶體驗以及創造新的行為模式和習慣循環。
微交互滿足用戶的期望——作為一種實際的網頁設計趨勢，微交互是默認的。無法想像沒有它們的網站。

為什麼微交互成為 WordPress 主題設計的趨勢？

隨著 WordPress CMS 作為一個免費且方便的在線平台越來越受歡迎，網頁設計師旨在通過開發多功能網站主題來使 WordPress 更加用戶友好。這些主題滿足專業網站設計師和絕對新手的需求，提供微交互作為設計的一部分並改善用戶體驗。

使用 WordPress 主題既方便又省時，因為您可以在幾個小時內獲得一個完整的網站。此外，還有許多現成的網站佈局可供選擇，例如由 TemplateMonster 或任何其他模板提供商開發的商業 WordPress 主題。微交互很好地集成到響應式 WordPress 主題中，並在多種電子小玩意和屏幕分辨率上完美呈現。它們是基於人的，這使得它們完全可以理解和直觀，無需任何額外的指導。

微體驗不僅可以幫助用戶與給定的基於 WordPress 的網站進行交互，還可以讓他們在更長的時間內與資源保持聯繫，從而促使他們滾動和共享內容。必須考慮設計中的每一個細節，因為即使是設計不佳的註冊表單也會讓觀眾望而卻步。只有當開發人員了解受眾的需求時，才能提供最有效的微交互。

由 TemplateMonster 開發的 Deltex Business WordPress 主題具有在鼠標懸停時改變顏色的幽靈按鈕。 — 由 TemplateMonster 開發的**Deltex Business WordPress 主題**具有在鼠標懸停時改變顏色的幽靈按鈕。

來源： http://www.templatemonster.com/wordpress-themes/deltex-wordpress-theme-58517.html

DW Agro WordPress Theme by Design Wall 有一個頂部菜單，通過在鼠標懸停時將圖標的顏色從白色更改為紅色來做出反應。 — **DW Agro WordPress Theme** by Design Wall 有一個頂部菜單，通過在鼠標懸停時將圖標的顏色從白色更改為紅色來做出反應。

來源： https://www.designwall.com/wordpress/themes/dw-argo/

WordPress 主題中的微交互設計技巧

微交互迎合了以人為本的設計理念，這使得瀏覽網站的人可以理解和直觀的操作和反饋。反饋提供了交互已啟動的證據。在將微交互插入網頁設計時，必須牢記這一點。

提供現成主題的基於 WordPress 的網站正在逐漸佔領互聯網。很自然地，必須考慮在基於 WordPress 的在線資源的 Web 開發中仔細實施微體驗的一些技巧。看看最重要的：

使用 WordPress 指南確保您了解您的最終用戶是誰以及他們的業務或個人需求是什麼，以使用戶體驗更加人性化。
記住可能的錯誤，確保微交互的過程不會破壞交互本身。
嘗試充分利用 WordPress 功能，如果沒有必要，請避免添加額外的功能或元素。最佳實踐之一是使光標、按鈕、滾動條等內置元素參與微交互並提供反饋。
使用大多數人都能理解的以人為本的語言，除非需要更具體的內容。
確保微交互隨著時間的推移仍然準確且真實，避免讓它們煩人或過火。
不要用動畫超載微交互，不要輕描淡寫地使用它，以免吞噬其他網頁設計元素或阻礙功能。
與整體設計和微交互設計中的配色方案保持一致，特別是要確保顏色能夠很好地協同工作。
弄清楚隨著時間的推移微交互的發展方式——它們是否需要根據 WordPress 更新進行更改，或者保持原樣。

TemplateMonster 的 Sky High Business WordPress 主題有一個全角頂部菜單，可在鼠標懸停時對下拉菜單做出反應。 — TemplateMonster 的**Sky High Business WordPress 主題**有一個全角頂部菜單，可在鼠標懸停時對下拉菜單做出反應。

來源： http://www.templatemonster.com/wordpress-themes/55048.html

DesignWall 的 DW Trendy Business WordPress 主題在網站標題中有一個圖像滑塊，可以在鼠標懸停時更改上一個/下一個箭頭按鈕的顏色以切換幻燈片。 — DesignWall 的**DW Trendy Business WordPress 主題**在網站標題中有一個圖像滑塊，可以在鼠標懸停時更改上一個/下一個箭頭按鈕的顏色以切換幻燈片。

來源： https://www.designwall.com/wordpress/themes/dw-gamez/

WordPress 主題因其易用性和豐富的設計可能性以及豐富的功能而在網頁設計大師和真正的初學者中越來越受歡迎。在過去的幾年中，網頁設計趨勢一直傾向於使事物更加人性化，引入微體驗作為用戶與網站環境之間交互的一種手段。微交互是經過深思熟慮的網站設計不可或缺的一部分，提供娛樂、教育或證明我們所執行的操作是正確的。多虧了這些微體驗，我們與數字世界的聯繫方式才一天比一天好。