微交互可以說是吸引用戶、提升產(chǎn)品體驗(yàn)感的一個(gè)極好的方式，如何利用好這點(diǎn)呢？

什么是微交互？

微交互是指具有一項(xiàng)主要任務(wù)或者說一個(gè)目標(biāo)的事件。在你的設(shè)備和App里，你到處都可以找到它的身影。微交互的目的是取悅用戶，創(chuàng)造吸引人的、熱情的甚至人性化的體驗(yàn)。

例如，看看下面的交互：

這個(gè)動(dòng)畫就是微交互的一個(gè)很好的例子，因?yàn)樗瓿闪巳齻€(gè)重要的功能：

• 傳達(dá)狀態(tài)并提供反饋
• 增強(qiáng)直接操控感
• 讓人們看到操作的結(jié)果

分解微交互

微交互有四個(gè)部分：

觸發(fā)

微交互通過觸發(fā)來啟動(dòng)，既可以是用戶啟動(dòng)也可以是系統(tǒng)啟動(dòng)。在用戶啟動(dòng)的觸發(fā)中，用戶必須啟動(dòng)某個(gè)操作。在系統(tǒng)啟動(dòng)的觸發(fā)中，當(dāng)軟件檢測(cè)到某些條件被滿足，就會(huì)啟動(dòng)操作。

規(guī)則

規(guī)則決定微交互觸發(fā)后會(huì)發(fā)生什么。

反饋

反饋讓人們知道正在發(fā)生什么。在微交互過程中，用戶看到、聽到或感受到的任何東西都屬于反饋。

循環(huán)和模式

循環(huán)和模式決定了微交互的元規(guī)則。如果條件變化了，微交互該如何做出反應(yīng)？

微交互的重要性

為什么微交互很重要？它是表達(dá)情緒的動(dòng)作。

如果微交互只是一種微小的設(shè)計(jì)元素，我們?yōu)槭裁匆P(guān)注它呢？

不幸的是，許多網(wǎng)站開發(fā)人員和設(shè)計(jì)人員至今仍會(huì)提出這樣的疑問。他們還沒有意識(shí)到，忽視微交互可能會(huì)給客戶帶來很多麻煩。對(duì)細(xì)節(jié)的重視是那些優(yōu)秀的網(wǎng)站區(qū)別于普通網(wǎng)站的地方。

以下是微交互的一些好處：

• 『微交互』能改進(jìn)網(wǎng)站的導(dǎo)航；
• 『微交互』使用戶與網(wǎng)站的互動(dòng)更容易；
• 『微交互』即時(shí)地向用戶提供已完成操作的有關(guān)反饋；
• 『微交互』會(huì)給用戶提供提示；
• 『微交互』傳達(dá)有關(guān)某些元素的信息，例如這個(gè)元素是不是可互動(dòng)的；
• 『微交互』使用戶體驗(yàn)更有價(jià)值；
• 『微交互』鼓勵(lì)用戶分享、點(diǎn)贊和評(píng)論；
• 『微交互』引導(dǎo)用戶的注意力；
• 最后一點(diǎn)，『微交互』能讓你的網(wǎng)站更富有人的情感。

精心設(shè)計(jì)的微交互能清楚展示出你對(duì)用戶的關(guān)注，因此它才受到了如此多的重視。用戶需要知道要做什么、他們的操作是否正確并被系統(tǒng)接受——App或者網(wǎng)站應(yīng)提供即時(shí)的視覺反饋，教用戶使用它們的系統(tǒng)。正確使用微交互可以讓用戶對(duì)品牌產(chǎn)生積極的情感，并在不知不覺中影響他們的行為。

你喜歡一個(gè)產(chǎn)品的某個(gè)方面會(huì)讓你對(duì)產(chǎn)品整體有積極的情感傾向，反之如果你不喜歡產(chǎn)品的某個(gè)方面，也會(huì)讓你對(duì)產(chǎn)品整體有消極的情感傾向。這被稱為暈輪效應(yīng)。

它是一把雙刃劍。聰明的人會(huì)利用這個(gè)效應(yīng)來改善用戶對(duì)你的網(wǎng)站的反饋——通過適當(dāng)?shù)仃P(guān)注細(xì)節(jié)讓你的用戶滿意。

何時(shí)使用微交互

在UX/UI的世界中，一談到用戶溝通，微交互就被當(dāng)成是一個(gè)強(qiáng)有力的工具，盡管它只是一個(gè)很小的細(xì)節(jié)。以下是最熱門的七種微交互和它們對(duì)用戶體驗(yàn)的影響：

1. 滑動(dòng)

滑動(dòng)減少了點(diǎn)擊，是一種更具互動(dòng)性和流暢性的方式。滑動(dòng)可以幫助用戶快速在選項(xiàng)卡之間切換，獲取更多的產(chǎn)品信息。并且，滑動(dòng)是一種非常常見的手勢(shì)，它能在潛意識(shí)里引導(dǎo)用戶，不需要讓他們思考；就像我們一直被灌輸“不要讓你的用戶思考”一樣。此外，滑動(dòng)手勢(shì)有趣到令人上癮。

2. 數(shù)據(jù)輸入

我們都知道設(shè)置密碼或創(chuàng)建賬戶會(huì)令人煩躁。這步操作很容易惹惱用戶。

除了提前給出密碼長度和格式的建議以幫助用戶輕松進(jìn)入下一步，輸入數(shù)據(jù)時(shí)的一些互動(dòng)性的交互設(shè)計(jì)也能幫助用戶順利完成該過程、實(shí)現(xiàn)目標(biāo)。

3. 動(dòng)畫

動(dòng)畫是微交互的構(gòu)成部分，它能提升微交互的效果。動(dòng)畫使好的設(shè)計(jì)更加人性化。

動(dòng)畫的存在可能不引人注意，但缺少動(dòng)畫則會(huì)影響每一個(gè)人。它們就像強(qiáng)力膠，幫助設(shè)計(jì)師讓最簡單的流程也能變得有趣、令人上癮。

不過你要小心，動(dòng)畫是為了吸引用戶的參與而不是干擾或阻礙他們。拖延處理過程或者給網(wǎng)站引入新的風(fēng)格可能會(huì)引起混亂。

4. 當(dāng)前系統(tǒng)狀態(tài)

讓用戶對(duì)網(wǎng)站或App上發(fā)生的當(dāng)前狀態(tài)保持了解是很重要的。如果用戶不清楚現(xiàn)在的情況，他們有可能會(huì)因此惱火而關(guān)閉網(wǎng)站或App。

微交互讓用戶可以準(zhǔn)確地知道正在發(fā)生什么、完成該過程需要多久等等。哪怕是完成失敗的消息你也可以做得幽默而實(shí)用，這樣可以維持用戶的信任。

5. 讓教程變得有趣

我們每個(gè)人都在不斷地尋求信息。在教程中使用微交互，可以通過簡化和突出App的基本功能和重要控件幫助用戶理解，指導(dǎo)他們?nèi)绾问褂肁pp。

6. 行為召喚（Call to Action, CTA）

微交互本質(zhì)上是在促使用戶與App或網(wǎng)站進(jìn)行互動(dòng)。行為召喚能潛移默化地為用戶行為創(chuàng)造成就感和同理心。并且，讓用戶與CTA互動(dòng)的最佳方式就是制作出有吸引力的CTA勾起他們的興趣。

7. 動(dòng)畫按鈕

動(dòng)畫按鈕允許用戶了解如何使用你的App或網(wǎng)站，它從中扮演了信息管理員的角色。我們需要注意按鈕的顏色、形狀特效、動(dòng)畫、位置和紋理，以創(chuàng)造流暢的用戶體驗(yàn)。人們一直致力于尋求即時(shí)滿足。

從大局來看微交互很容易被我們忽視，但它在吸引用戶上起到了非常重要的作用。

正所謂細(xì)節(jié)決定成敗，微小的體驗(yàn)和設(shè)計(jì)功能，比如屏幕間切換、突出功能或彈出新通知，可能會(huì)在改進(jìn)用戶體驗(yàn)方面產(chǎn)生巨大的差異。

怎樣設(shè)計(jì)微交互

對(duì)于設(shè)計(jì)師來說，設(shè)計(jì)微交互是令人興奮的，因?yàn)樗麄兛梢詮闹袊L試新的設(shè)計(jì)解決方案、尋找新的方式給用戶制造驚喜。要做到這一點(diǎn)，你必須牢記以下幾條：

1. 從用戶的角度考慮問題，盡你所能地去了解他們是如何使用你的App的。
2. 制作具有功能的動(dòng)畫效果。動(dòng)畫不僅要具有美感，還能改進(jìn)用戶體驗(yàn)。
3. 讓用戶享受到樂趣。使用時(shí)的愉快感受是用戶持續(xù)選擇該App背后的原因。如果你的產(chǎn)品給用戶帶來了愉快的體驗(yàn)，那他們就會(huì)繼續(xù)使用。
4. 過猶不及。太多的動(dòng)畫反而會(huì)對(duì)用戶產(chǎn)生相反的影響。用戶如果因此感到厭煩，他們會(huì)放棄使用你的App。
5. 使用日常的語言，避免太技術(shù)化。在App中出現(xiàn)空白頁面時(shí)，一個(gè)有趣或者諷刺的文案可以讓用戶忘記這份煩躁。

設(shè)計(jì)微交互的工具

那么，哪些原型設(shè)計(jì)工具是設(shè)計(jì)師應(yīng)該熟悉了解的呢？市面上有非常多的工具，但不是每個(gè)人都知道怎樣的工具適合怎樣的微交互任務(wù)。根據(jù)我個(gè)人的設(shè)計(jì)經(jīng)驗(yàn)，我的推薦如下。

如果你很熟悉編程：

• 手機(jī)：Xcode，Android studio；
• 手機(jī)或網(wǎng)絡(luò)：Framer；
• 網(wǎng)絡(luò)：CSS animation；

如果要設(shè)計(jì)一個(gè)屏幕推送與模塊之間的交互：Invision和Marvel；

如果要制作更細(xì)致的交互：Principle，Adobe CC，origami Studio和Protopie；

如果要制作詳細(xì)的交互+動(dòng)畫：After Effects。

這里有一些我制作的交互

要使你的微交互運(yùn)行成功，請(qǐng)確保你的團(tuán)隊(duì)做到了以上提到的要點(diǎn)，并與UX流程協(xié)調(diào)順利。祝你在做微交互的過程中一切順利！

原作者：Vamsi Batchu

原文鏈接：https://uxdesign.cc/micro-interactions-why-when-and-how-to-use-them-to-boost-the-ux-17094b3baaa0

翻譯者：『即能小程序』團(tuán)隊(duì)，公眾號(hào)：『即能學(xué)習(xí)』

本文由 @即能小程序 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議