起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識微交互：超實用的提高產品魅力值神器
微交互可以說是吸引用戶、提升產品體驗感的一個極好的方式，如何利用好這點呢？
什么是微交互？
微交互是指具有一項主要任務或者說一個目標的事件。在你的設備和App里，你到處都可以找到它的身影。微交互的目的是取悅用戶，創造吸引人的、熱情的甚至人性化的體驗。
例如，看看下面的交互：
這個動畫就是微交互的一個很好的例子，因為它完成了三個重要的功能：
- 傳達狀態并提供反饋
- 增強直接操控感
- 讓人們看到操作的結果
分解微交互
微交互有四個部分：
觸發
微交互通過觸發來啟動，既可以是用戶啟動也可以是系統啟動。在用戶啟動的觸發中，用戶必須啟動某個操作。在系統啟動的觸發中，當軟件檢測到某些條件被滿足，就會啟動操作。
規則
規則決定微交互觸發后會發生什么。
反饋
反饋讓人們知道正在發生什么。在微交互過程中，用戶看到、聽到或感受到的任何東西都屬于反饋。
循環和模式
循環和模式決定了微交互的元規則。如果條件變化了，微交互該如何做出反應？
微交互的重要性
為什么微交互很重要？它是表達情緒的動作。
如果微交互只是一種微小的設計元素，我們為什么要關注它呢？
不幸的是，許多網站開發人員和設計人員至今仍會提出這樣的疑問。他們還沒有意識到，忽視微交互可能會給客戶帶來很多麻煩。對細節的重視是那些優秀的網站區別于普通網站的地方。
以下是微交互的一些好處：
- 『微交互』能改進網站的導航；
- 『微交互』使用戶與網站的互動更容易；
- 『微交互』即時地向用戶提供已完成操作的有關反饋；
- 『微交互』會給用戶提供提示；
- 『微交互』傳達有關某些元素的信息，例如這個元素是不是可互動的；
- 『微交互』使用戶體驗更有價值；
- 『微交互』鼓勵用戶分享、點贊和評論；
- 『微交互』引導用戶的注意力；
- 最后一點，『微交互』能讓你的網站更富有人的情感。
精心設計的微交互能清楚展示出你對用戶的關注，因此它才受到了如此多的重視。用戶需要知道要做什么、他們的操作是否正確并被系統接受——App或者網站應提供即時的視覺反饋，教用戶使用它們的系統。正確使用微交互可以讓用戶對品牌產生積極的情感，并在不知不覺中影響他們的行為。
你喜歡一個產品的某個方面會讓你對產品整體有積極的情感傾向，反之如果你不喜歡產品的某個方面，也會讓你對產品整體有消極的情感傾向。這被稱為暈輪效應。
它是一把雙刃劍。聰明的人會利用這個效應來改善用戶對你的網站的反饋——通過適當地關注細節讓你的用戶滿意。
何時使用微交互
在UX/UI的世界中，一談到用戶溝通，微交互就被當成是一個強有力的工具，盡管它只是一個很小的細節。以下是最熱門的七種微交互和它們對用戶體驗的影響：
1. 滑動
滑動減少了點擊，是一種更具互動性和流暢性的方式。滑動可以幫助用戶快速在選項卡之間切換，獲取更多的產品信息。并且，滑動是一種非常常見的手勢，它能在潛意識里引導用戶，不需要讓他們思考；就像我們一直被灌輸“不要讓你的用戶思考”一樣。此外，滑動手勢有趣到令人上癮。
2. 數據輸入
我們都知道設置密碼或創建賬戶會令人煩躁。這步操作很容易惹惱用戶。
除了提前給出密碼長度和格式的建議以幫助用戶輕松進入下一步，輸入數據時的一些互動性的交互設計也能幫助用戶順利完成該過程、實現目標。
3. 動畫
動畫是微交互的構成部分，它能提升微交互的效果。動畫使好的設計更加人性化。
動畫的存在可能不引人注意，但缺少動畫則會影響每一個人。它們就像強力膠，幫助設計師讓最簡單的流程也能變得有趣、令人上癮。
不過你要小心，動畫是為了吸引用戶的參與而不是干擾或阻礙他們。拖延處理過程或者給網站引入新的風格可能會引起混亂。
4. 當前系統狀態
讓用戶對網站或App上發生的當前狀態保持了解是很重要的。如果用戶不清楚現在的情況，他們有可能會因此惱火而關閉網站或App。
微交互讓用戶可以準確地知道正在發生什么、完成該過程需要多久等等。哪怕是完成失敗的消息你也可以做得幽默而實用，這樣可以維持用戶的信任。
5. 讓教程變得有趣
我們每個人都在不斷地尋求信息。在教程中使用微交互，可以通過簡化和突出App的基本功能和重要控件幫助用戶理解，指導他們如何使用App。
6. 行為召喚（Call to Action, CTA）
微交互本質上是在促使用戶與App或網站進行互動。行為召喚能潛移默化地為用戶行為創造成就感和同理心。并且，讓用戶與CTA互動的最佳方式就是制作出有吸引力的CTA勾起他們的興趣。
7. 動畫按鈕
動畫按鈕允許用戶了解如何使用你的App或網站，它從中扮演了信息管理員的角色。我們需要注意按鈕的顏色、形狀特效、動畫、位置和紋理，以創造流暢的用戶體驗。人們一直致力于尋求即時滿足。
從大局來看微交互很容易被我們忽視，但它在吸引用戶上起到了非常重要的作用。
正所謂細節決定成敗，微小的體驗和設計功能，比如屏幕間切換、突出功能或彈出新通知，可能會在改進用戶體驗方面產生巨大的差異。
怎樣設計微交互
對于設計師來說，設計微交互是令人興奮的，因為他們可以從中嘗試新的設計解決方案、尋找新的方式給用戶制造驚喜。要做到這一點，你必須牢記以下幾條：
- 從用戶的角度考慮問題，盡你所能地去了解他們是如何使用你的App的。
- 制作具有功能的動畫效果。動畫不僅要具有美感，還能改進用戶體驗。
- 讓用戶享受到樂趣。使用時的愉快感受是用戶持續選擇該App背后的原因。如果你的產品給用戶帶來了愉快的體驗，那他們就會繼續使用。
- 過猶不及。太多的動畫反而會對用戶產生相反的影響。用戶如果因此感到厭煩，他們會放棄使用你的App。
- 使用日常的語言，避免太技術化。在App中出現空白頁面時，一個有趣或者諷刺的文案可以讓用戶忘記這份煩躁。
設計微交互的工具
那么，哪些原型設計工具是設計師應該熟悉了解的呢？市面上有非常多的工具，但不是每個人都知道怎樣的工具適合怎樣的微交互任務。根據我個人的設計經驗，我的推薦如下。
如果你很熟悉編程：
- 手機：Xcode，Android studio；
- 手機或網絡：Framer；
- 網絡：CSS animation；
如果要設計一個屏幕推送與模塊之間的交互：Invision和Marvel；
如果要制作更細致的交互：Principle，Adobe CC，origami Studio和Protopie；
如果要制作詳細的交互+動畫：After Effects。
這里有一些我制作的交互
要使你的微交互運行成功，請確保你的團隊做到了以上提到的要點，并與UX流程協調順利。祝你在做微交互的過程中一切順利！
原作者：Vamsi Batchu
原文鏈接：https://uxdesign.cc/micro-interactions-why-when-and-how-to-use-them-to-boost-the-ux-17094b3baaa0
翻譯者：『即能小程序』團隊，公眾號：『即能學習』
本文由 @即能小程序 翻譯發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
別說設計了，看了 都很興奮
內容不錯，希望即能多提供產品設計方面的知識