微交互，聽起來很生疏的這個(gè)詞，實(shí)際上卻出現(xiàn)在我們每天的日常生活中，甚至可能早上起床后我們做的第一件事就是一次微交互操作的典型案例。
我們起床后的第一件事情不是關(guān)掉鬧鐘嗎？
*via *igeeks
顧名思義，“微”意為細(xì)節(jié)，微交互則是指交互中的細(xì)節(jié)設(shè)計(jì)。微交互是指以任務(wù)為單位，用戶同數(shù)碼設(shè)備之間進(jìn)行的單個(gè)交互事件，它只涉及一種使用場景，體現(xiàn)為只完成一種功能。
微交互傳遞什么樣的功能呢？
拿 Facebook Messenger 的點(diǎn)贊功能來舉例，如果你按壓這個(gè)大拇指圖樣的「點(diǎn)贊」按鈕，這個(gè)大拇指就會(huì)變得越來越大越大，直到出現(xiàn)在對(duì)話框中。
圖為Facebook Messenger 太好玩了，簡直停不下來。。。
以上這個(gè)案例正好完美詮釋了微交互的 3 個(gè)重要功能，它最早在交互設(shè)計(jì)師 Dan Saffer 的著作《Microintrration》中被首次提出：
點(diǎn)贊動(dòng)作是在表達(dá)狀態(tài)并提供反饋
并且這個(gè)操作也提升了用戶直接的操作感
然后讓用戶看到自己的操作結(jié)果
由以上定義出發(fā)，我們會(huì)發(fā)現(xiàn)，微交互幾乎無處不在，它可能是一次震動(dòng)提醒通知、播放下一首歌曲、登錄一次網(wǎng)站、在手機(jī)應(yīng)用里查詢一次天氣、微信回復(fù)一條信息、朋友圈點(diǎn)一次贊，如果這些交互設(shè)計(jì)過渡得順滑流暢又自然的話，幾乎很容易就會(huì)忽略他們的存在。
雖然微交互近乎隱形，且很容易被人忽視，但它的重要性卻不容小覷。我們知道，移動(dòng)產(chǎn)品交互設(shè)計(jì)時(shí)考量的因素有兩個(gè)——功能和細(xì)節(jié)。功能吸引用戶使用產(chǎn)品，細(xì)節(jié)則是留住用戶成為回頭客。好的微交互，可以變無聊為有趣， 把沒有生命力的 app 變得生動(dòng)好玩，讓用戶感受到參與感和愉悅感，給用戶留下深刻的印象甚至上癮。偉大的產(chǎn)品和平庸的產(chǎn)品之間，區(qū)別就在于微交互。
微交互出現(xiàn)的使用場景
這些微交互的用戶體驗(yàn)如果連貫自然， 幾乎很難讓人意識(shí)到它們的存在。但如果仔細(xì)觀察，你會(huì)發(fā)現(xiàn)它們通常出現(xiàn)在以下這些地方：
顯示操作進(jìn)程的時(shí)候
用戶在使用你的產(chǎn)品時(shí)，需要知道自己的操作進(jìn)程，以及操作之后即刻獲得回饋，即自己的操作產(chǎn)生了什么樣的效果。
via Nick Buturishvili
但有時(shí)候，用戶進(jìn)行的一次操作可能需要一定的時(shí)間才能緩沖完畢，這個(gè)時(shí)候用戶就需要知道自己的進(jìn)程情況，當(dāng)你在以慢出翔的網(wǎng)速瀏覽網(wǎng)頁時(shí)看到以下這個(gè)進(jìn)度條是不是會(huì)心一笑：）
via xjw
還有上傳或者下載的時(shí)候，看到這種萌萌噠的汽水瓶會(huì)讓人暫時(shí)忘記了等待的焦慮感
via Nick Buturishvili聰明的墨刀用戶根據(jù)這個(gè)加載動(dòng)畫發(fā)散了下，碰撞出了一些不同的玩法，具體實(shí)現(xiàn)原理看這里
更新提醒
當(dāng)需要提示用戶注意重要的更新，也是微交互出場的時(shí)候，比起文字提醒，動(dòng)畫提示更容易吸引用戶的注意力。
via Russ Rosenberg
對(duì)用戶的信息輸入進(jìn)行視覺化呈現(xiàn)，并提供回饋
數(shù)據(jù)錄入是交互設(shè)計(jì)中最為重要的元素之一。一個(gè)優(yōu)秀的微交互能把這個(gè)過程變成得與眾不同，并給用戶傳遞回饋，在下面這個(gè)案例中，當(dāng)用戶輸入自己的郵件信息之后，即被告知用戶這個(gè)動(dòng)作的含義，到底是輸入正確還是輸入錯(cuò)誤。
via Mamun Srizon
誘導(dǎo)用戶進(jìn)行操作
微交互能夠觸發(fā)用戶啟動(dòng)操作的動(dòng)作，讓用戶產(chǎn)生操作的沖動(dòng)。
這個(gè)是音樂應(yīng)用 Beats ，登入后第一件事就是引導(dǎo)用戶選擇自己喜歡的音樂流派。在這里 Beats 使用了一種非常有趣的交互方式誘導(dǎo)用戶進(jìn)行音樂流派的選擇，就像玩游戲一樣，在一片漂浮的泡泡海洋中，雙擊選擇喜歡的流派，長按則讓不喜歡的音樂流派不再出現(xiàn)。接下來，在自己頭像右邊出現(xiàn) next 按鈕，進(jìn)行第二次操作。
大多數(shù)情況下，引導(dǎo)頁面的動(dòng)畫真的很難吸引用戶的注意力，大多數(shù)用戶都是一滑而過，沒有人會(huì)仔細(xì)閱讀上面的文字信息，而 Beats 在引導(dǎo)頁面中使用了這種交互的方式，讓用戶增加了交互的參與感，引導(dǎo)用戶輸入了信息，是一個(gè)非常成功的案例。
微交互設(shè)計(jì)原則？
微交互可以用來實(shí)驗(yàn)一些新的設(shè)計(jì)創(chuàng)意和解決方案，但當(dāng)我們?cè)谠O(shè)計(jì)這些令人愉快的細(xì)節(jié)的時(shí)候，我們還需要考慮到以下這些原則：
總是站在用戶的角度看問題，據(jù)此思考如何能讓用戶更為流暢自然地進(jìn)行操作
Less is more，微交互不需要炫技，必須要以簡單的方法吸引用戶的注意力
微交互必須有趣，能愉悅用戶。用戶使用產(chǎn)品的原因是他使用它的感受。記住用戶如果喜歡這個(gè)體驗(yàn)，并覺得很愉悅，就會(huì)成為回頭客。
動(dòng)效風(fēng)格和整個(gè)產(chǎn)品設(shè)計(jì)風(fēng)格需要要一致，動(dòng)效的過渡一定要流程自然
微交互是一個(gè)錦上添花的設(shè)計(jì)，好玩有趣只是一個(gè)方面，最終還是為了輔助實(shí)現(xiàn)某些功能，好的微交互是在用戶毫無察覺的情況下讓用戶進(jìn)行了某項(xiàng)交互動(dòng)作，同時(shí)讓用戶記住了你
文本一定要生動(dòng)有趣，避免使用過于書面難懂的文字
以人為中心成為最終出發(fā)點(diǎn)，以人性化的設(shè)計(jì)打動(dòng)用戶心靈，產(chǎn)生情感聯(lián)系，賦予產(chǎn)品以個(gè)性，讓有趣的微交互成為難以忘記的品牌的一部分。
一些令人驚艷的微交互案例展示：
via Jacky Lee
via Dylan
via Nick Buturishvili
via Lukas Horak
Magic Tabs by Abhinav Chhikara
我用原型設(shè)計(jì)工具「墨刀」制作了一個(gè)微交互原型來展示音樂網(wǎng)站 Pitchfork Best Album 的評(píng)分功能。每張卡片代表一張新專輯，當(dāng)點(diǎn)擊卡片會(huì)顯示來自 Pitckfork 的評(píng)分，以及該專輯的其他信息，和來自bandcamp的音樂試聽和購買按鈕。每次點(diǎn)擊的動(dòng)作都會(huì)觸發(fā)一次微交互，并顯示專輯相應(yīng)的 meta data 信息。
細(xì)節(jié)設(shè)計(jì)是微交互的靈魂，看似無關(guān)緊要，卻總會(huì)在適當(dāng)?shù)臅r(shí)候出現(xiàn)，令人怦然心動(dòng)。
