微交互，聽起來很生疏的這個詞，實際上卻出現(xiàn)在我們每天的日常生活中，甚至可能早上起床后我們做的第一件事就是一次微交互操作的典型案例。

我們起床后的第一件事情不是關(guān)掉鬧鐘嗎？via?igeeks

顧名思義，“微”意為細節(jié)，微交互則是指交互中的細節(jié)設(shè)計。微交互是指以任務為單位，用戶同數(shù)碼設(shè)備之間進行的單個交互事件，它只涉及一種使用場景，體現(xiàn)為只完成一種功能。

微交互傳遞什么樣的功能呢？

拿 Facebook Messenger 的點贊功能來舉例，如果你按壓這個大拇指圖樣的「點贊」按鈕，這個大拇指就會變得越來越大越大，直到出現(xiàn)在對話框中。

圖為Facebook Messenger 太好玩了，簡直停不下來。。。

以上這個案例正好完美詮釋了微交互的 3 個重要功能，它最早在交互設(shè)計師 Dan Saffer 的著作《Microinteraction》中被首次提出：

• 點贊動作是在表達狀態(tài)并提供反饋
• 并且這個操作也提升了用戶直接的操作感
• 然后讓用戶看到自己的操作結(jié)果

由以上定義出發(fā)，我們會發(fā)現(xiàn)，微交互幾乎無處不在，它可能是一次震動提醒通知、播放下一首歌曲、登錄一次網(wǎng)站、在手機應用里查詢一次天氣、微信回復一條信息、朋友圈點一次贊，如果這些交互設(shè)計過渡得順滑流暢又自然的話，幾乎很容易就會忽略他們的存在。

雖然微交互近乎隱形，且很容易被人忽視，但它的重要性卻不容小覷。我們知道，移動產(chǎn)品交互設(shè)計時考量的因素有兩個——功能和細節(jié)。功能吸引用戶使用產(chǎn)品，細節(jié)則是留住用戶成為回頭客。好的微交互，可以變無聊為有趣， 把沒有生命力的 app 變得生動好玩，讓用戶感受到參與感和愉悅感，給用戶留下深刻的印象甚至上癮。偉大的產(chǎn)品和平庸的產(chǎn)品之間，區(qū)別就在于微交互。

微交互出現(xiàn)的使用場景

這些微交互的用戶體驗如果連貫自然， 幾乎很難讓人意識到它們的存在。但如果仔細觀察，你會發(fā)現(xiàn)它們通常出現(xiàn)在以下這些地方：

顯示操作進程的時候

用戶在使用你的產(chǎn)品時，需要知道自己的操作進程，以及操作之后即刻獲得回饋，即自己的操作產(chǎn)生了什么樣的效果。

via?Nick Buturishvili

但有時候，用戶進行的一次操作可能需要一定的時間才能緩沖完畢，這個時候用戶就需要知道自己的進程情況，當你在以慢出翔的網(wǎng)速瀏覽網(wǎng)頁時看到以下這個進度條是不是會心一笑：）

via?xjw

還有上傳或者下載的時候，看到這種萌萌噠的汽水瓶會讓人暫時忘記了等待的焦慮感

via?Nick Buturishvili

更新提醒

當需要提示用戶注意重要的更新，也是微交互出場的時候，比起文字提醒，動畫提示更容易吸引用戶的注意力。

via?Russ Rosenberg

對用戶的信息輸入進行視覺化呈現(xiàn)，并提供回饋

數(shù)據(jù)錄入是交互設(shè)計中最為重要的元素之一。一個優(yōu)秀的微交互能把這個過程變成得與眾不同，并給用戶傳遞回饋，在下面這個案例中，當用戶輸入自己的郵件信息之后，即被告知用戶這個動作的含義，到底是輸入正確還是輸入錯誤。

via?Mamun Srizon

誘導用戶進行操作

微交互能夠觸發(fā)用戶啟動操作的動作，讓用戶產(chǎn)生操作的沖動。

這個是音樂應用 Beats ，登入后第一件事就是引導用戶選擇自己喜歡的音樂流派。在這里 Beats 使用了一種非常有趣的交互方式誘導用戶進行音樂流派的選擇，就像玩游戲一樣，在一片漂浮的泡泡海洋中，雙擊選擇喜歡的流派，長按則讓不喜歡的音樂流派不再出現(xiàn)。接下來，在自己頭像右邊出現(xiàn) next 按鈕，進行第二次操作。

大多數(shù)情況下，引導頁面的動畫真的很難吸引用戶的注意力，大多數(shù)用戶都是一滑而過，沒有人會仔細閱讀上面的文字信息，而 Beats 在引導頁面中使用了這種交互的方式，讓用戶增加了交互的參與感，引導用戶輸入了信息，是一個非常成功的案例。

微交互設(shè)計原則？

微交互可以用來實驗一些新的設(shè)計創(chuàng)意和解決方案，但當我們在設(shè)計這些令人愉快的細節(jié)的時候，我們還需要考慮到以下這些原則：

• 總是站在用戶的角度看問題，據(jù)此思考如何能讓用戶更為流暢自然地進行操作
• Less is more，微交互不需要炫技，必須要以簡單的方法吸引用戶的注意力
• 微交互必須有趣，能愉悅用戶。用戶使用產(chǎn)品的原因是他使用它的感受。記住用戶如果喜歡這個體驗，并覺得很愉悅，就會成為回頭客。
• 動效風格和整個產(chǎn)品設(shè)計風格需要要一致，動效的過渡一定要流程自然
• 微交互是一個錦上添花的設(shè)計，好玩有趣只是一個方面，最終還是為了輔助實現(xiàn)某些功能，好的微交互是在用戶毫無察覺的情況下讓用戶進行了某項交互動作，同時讓用戶記住了你
• 文本一定要生動有趣，避免使用過于書面難懂的文字
• 以人為中心成為最終出發(fā)點，以人性化的設(shè)計打動用戶心靈，產(chǎn)生情感聯(lián)系，賦予產(chǎn)品以個性，讓有趣的微交互成為難以忘記的品牌的一部分。
• 一些令人驚艷的微交互案例展示：

via?Jacky Lee

via?Dylan

via?Nick Buturishvili

via?Lukas Horak

Magic Tabs by?Abhinav Chhikara

我用原型設(shè)計工具「墨刀」制作了一個微交互原型來展示音樂網(wǎng)站 Pitchfork Best Album 的評分功能。每張卡片代表一張新專輯，當點擊卡片會顯示來自 Pitckfork 的評分，以及該專輯的其他信息，和來自bandcamp的音樂試聽和購買按鈕。每次點擊的動作都會觸發(fā)一次微交互，并顯示專輯相應的 meta data 信息。

細節(jié)設(shè)計是微交互的靈魂，看似無關(guān)緊要，卻總會在適當?shù)臅r候出現(xiàn)，令人怦然心動。

本文由 @eloisechou 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。