編者按：本文總結(jié)了微交互的基礎(chǔ)知識(shí)和三大作用，作者用大量?jī)?yōu)秀的微交互案例演示讓你直觀感受到微交互的強(qiáng)大，適合對(duì)微交互不熟悉的新人學(xué)習(xí)。

@鐵木須? ：微交互可以反映系統(tǒng)狀態(tài)、支持防錯(cuò)設(shè)計(jì)以及傳達(dá)品牌。它們由觸發(fā)啟動(dòng)，還能讓體驗(yàn)變得更加迷人。

一、什么是微交互？

我們每天與電腦進(jìn)行的交互都會(huì)涉及到大量的微交互。微交互以反映系統(tǒng)狀態(tài)或者幫助用戶(hù)防錯(cuò)的方式給予用戶(hù)反饋。此外，微交互還能用作品牌推廣的媒介。

定義：微交互指的是成對(duì)的「觸發(fā)」和「反饋」。其中「觸發(fā)」可以是用戶(hù)行為，也可以是系統(tǒng)狀態(tài)的變更；「反饋」是針對(duì)觸發(fā)的回應(yīng)，通過(guò)用戶(hù)界面微小的、高度相關(guān)的變化（通常為視覺(jué)變化）傳達(dá)出來(lái)。

用戶(hù)啟動(dòng)的觸發(fā)可以是 GUI 命令、手勢(shì)或者語(yǔ)音形式，而系統(tǒng)啟動(dòng)的觸發(fā)則需要滿(mǎn)足一系列預(yù)先確定的條件。若微交互由 GUI 命令觸發(fā)，視覺(jué)反饋元素通常會(huì)顯示在它的鄰近。

△ 微交互的流程——不論是用戶(hù)觸發(fā)還是系統(tǒng)觸發(fā)，都會(huì)通過(guò)用戶(hù)界面的微小變化反饋給用戶(hù)

微交互包含了大量的數(shù)字元素，但并非每個(gè)元素都是微交互的一部分。一直顯示的靜態(tài)元素不能算是微交互，因?yàn)樗鼈儧](méi)有被明確地觸發(fā)。此外，由多個(gè)行為構(gòu)成的流程也不是微交互。下表列出了微交互的一些例子。

Dan Saffer 在2014年出版的《微交互》一書(shū)中定義了這個(gè)概念，并簡(jiǎn)略描述了定義微交互的模型。

在這篇文章中，我們將聚焦于為何微交互對(duì)于用戶(hù)體驗(yàn)是至關(guān)重要的，并會(huì)提供一些來(lái)自用戶(hù)視角的典型案例。

二、微交互為何重要？

使用科技產(chǎn)品的最大樂(lè)趣之一來(lái)自授權(quán)用戶(hù)和用戶(hù)參與。令人愉快的體驗(yàn)指的不只是能用而已，它還需要引人入勝，而這恰恰是微交互較為擅長(zhǎng)的地方，它能積極地影響到產(chǎn)品或服務(wù)的外觀和給人的感覺(jué)。

微交互可以通過(guò)下列方式提升產(chǎn)品的用戶(hù)體驗(yàn)：

• 鼓勵(lì)參與
• 顯示系統(tǒng)狀態(tài)
• 提供防錯(cuò)設(shè)計(jì)
• 傳達(dá)品牌

比起下拉刷新之類(lèi)的現(xiàn)代元素，滾動(dòng)條這種標(biāo)準(zhǔn)的微交互通常不太可能會(huì)設(shè)計(jì)得很差。主要是這些新興的交互方式要求我們必須付出更多的努力和思考才能創(chuàng)造出充滿(mǎn)意義、設(shè)計(jì)優(yōu)良的用戶(hù)體驗(yàn)。

我們來(lái)看一個(gè)微交互的優(yōu)秀案例吧。

為了管理日常任務(wù)，我使用了任務(wù)管理工具 Asana。該工具的某些方面是我尤為喜歡的，比如它的標(biāo)簽和視覺(jué)設(shè)計(jì)。但是到目前為止，我最喜歡 Asana 的地方還是在于每當(dāng)我完成某項(xiàng)任務(wù)時(shí)偶爾會(huì)有獨(dú)角獸飛過(guò)瀏覽器這一點(diǎn)。這其實(shí)是微交互的一個(gè)例子。

當(dāng)用戶(hù)將任務(wù)標(biāo)記為完成時(shí)，會(huì)有一個(gè)較小的對(duì)話(huà)框出現(xiàn)在頁(yè)面的左下角。該對(duì)話(huà)框提供了系統(tǒng)的反饋——任務(wù)已經(jīng)被標(biāo)記為完成，同時(shí)還有一個(gè)防錯(cuò)選項(xiàng)用于撤銷(xiāo)之前的行為，以防那是一個(gè)誤操作。對(duì)話(huà)框出現(xiàn)后的大約一秒，會(huì)有一只獨(dú)角獸穿過(guò)瀏覽器的左下角區(qū)域，用以祝賀用戶(hù)出色地完成了相應(yīng)任務(wù)。在這個(gè)案例中，共有2個(gè)微交互：實(shí)用的對(duì)話(huà)框和受游戲化設(shè)計(jì)所啟發(fā)的獨(dú)角獸動(dòng)畫(huà)。

△ 在 Asana 網(wǎng)站，當(dāng)用戶(hù)將任務(wù)標(biāo)記為完成時(shí)，會(huì)顯示一個(gè)包含確認(rèn)信息和撤銷(xiāo)之前操作的按鈕的對(duì)話(huà)框。另外，偶爾還會(huì)有獨(dú)角獸飛過(guò)屏幕

如果你使用過(guò)任務(wù)管理工具，你應(yīng)該知道可以選擇的工具其實(shí)很多，比如 Asana、Jira、Trello 或者 Wrike，這些產(chǎn)品有很多共通之處。他們有相同的功能，比如將任務(wù)指派給團(tuán)隊(duì)成員、創(chuàng)建看板或者跟其他產(chǎn)品進(jìn)行整合。然而，如果仔細(xì)分析這些產(chǎn)品的微交互的話(huà)，它們之間的差異就相當(dāng)明顯了。比如在 Trello 中 ，將任務(wù)移動(dòng)到已完成列表并不會(huì)發(fā)生額外的特別明顯的特效。對(duì)很多人來(lái)說(shuō)，這已經(jīng)足夠契合他們的期望。然而我渴望在完成任務(wù)時(shí)還能看到獨(dú)角獸，對(duì)我個(gè)人來(lái)說(shuō)這算是一種正面強(qiáng)化。

當(dāng)然了，微交互不只是讓用戶(hù)感覺(jué)舒服而已。微交互能做的事情包括顯示系統(tǒng)狀態(tài)、支持防錯(cuò)以及傳達(dá)品牌。在這些場(chǎng)景中對(duì)微交互的應(yīng)用能夠帶來(lái)巨大的價(jià)值，因此這也使得微交互成為了讓你的產(chǎn)品區(qū)別于競(jìng)爭(zhēng)對(duì)手的關(guān)鍵方式。微交互通過(guò)反饋來(lái)告知用戶(hù)信息，并保證用戶(hù)可以繼續(xù)使用當(dāng)前的產(chǎn)品，沒(méi)有它們，你的用戶(hù)的體驗(yàn)將會(huì)相當(dāng)糟糕。

三、顯示系統(tǒng)狀態(tài)

通過(guò)讓產(chǎn)品變得易于理解并實(shí)時(shí)顯示系統(tǒng)的當(dāng)前狀態(tài)，能讓用戶(hù)體會(huì)到掌控感和參與感。任何系統(tǒng)狀態(tài)的顯示都是微交互，因?yàn)樗鼈兲烊痪邆淞擞|發(fā)（不管是用戶(hù)行為還是系統(tǒng)狀態(tài)的變化）和反饋。

1. 顯示進(jìn)度

進(jìn)度指示器是微交互的一個(gè)子集，它能讓用戶(hù)知道系統(tǒng)仍在運(yùn)行，可以隨時(shí)回應(yīng)他們的行為。進(jìn)度指示器大多為線(xiàn)性的或圓形的組件，它們能夠顯示明確的或不確定的等待時(shí)間。在用戶(hù)等待操作的結(jié)果反饋時(shí)，這種元素能夠鼓勵(lì)他們繼續(xù)停留在當(dāng)前的產(chǎn)品。

用戶(hù)下拉刷新信息流的場(chǎng)景中 LinkedIn 使用的是圓形進(jìn)度條。該組件可以明確表示系統(tǒng)仍在運(yùn)行，因此用戶(hù)不必反復(fù)猜測(cè)它是否還能識(shí)別他們的行為。多虧了這樣的微交互，用戶(hù)愿意等待更多的帖子進(jìn)行加載，從而持續(xù)停留在 LinkdIn 中。

△ 用戶(hù)在 LinkedIn 中下拉刷新信息流時(shí)，會(huì)有進(jìn)度條顯示系統(tǒng)正在響應(yīng)請(qǐng)求

2. 待命

有時(shí)候系統(tǒng)需要表明它們?cè)诘却脩?hù)進(jìn)一步的輸入。在開(kāi)始的觸發(fā)之后，微交互會(huì)提示用戶(hù)系統(tǒng)已經(jīng)待命，并需要更多的信息輸入。這一類(lèi)的微交互鼓勵(lì)用戶(hù)繼續(xù)跟當(dāng)前的產(chǎn)品進(jìn)行交互。

例如，當(dāng)你在 iOS 的桌面屏幕上長(zhǎng)按某個(gè) app 的圖標(biāo)，系統(tǒng)會(huì)通過(guò)輕微抖動(dòng)所有 app 的方式來(lái)予以回應(yīng)。該活動(dòng)表明系統(tǒng)已在等待進(jìn)一步的行為（也就是說(shuō)，不管是輕點(diǎn) app 左上角的「X」來(lái)刪除應(yīng)用還是將圖標(biāo)拖放到另一個(gè)位置）。

△ 用戶(hù)長(zhǎng)按 app 時(shí)，iOS 使用微交互（抖動(dòng)圖標(biāo)）來(lái)表示系統(tǒng)在等待進(jìn)一步的輸入

微交互并不局限于網(wǎng)站。Google Home 之類(lèi)的語(yǔ)音助手在等待用戶(hù)的命令時(shí)，也使用了微交互來(lái)顯示待命模式。在用戶(hù)說(shuō)完「Hey Google」之后，該設(shè)備會(huì)顯示一個(gè)包含四個(gè)圓點(diǎn)的動(dòng)畫(huà)。這些圓點(diǎn)接著又會(huì)立即構(gòu)成一個(gè)帶有微妙閃爍動(dòng)效的方塊。通過(guò)這樣的視覺(jué)反饋，用戶(hù)就能立馬知道設(shè)備已經(jīng)在等待命令，因此可以開(kāi)始問(wèn)它「天氣如何？」之類(lèi)的問(wèn)題了。

△ Google Home 在聽(tīng)到觸發(fā)詞「Hey Google」后會(huì)亮起來(lái)，這表示它已經(jīng)在等待用戶(hù)的語(yǔ)音命令

四、防錯(cuò)

防錯(cuò)聚焦于避免容易出錯(cuò)的情況，還可以提供確認(rèn)操作。

微交互將這些情況傳達(dá)給用戶(hù)，并通過(guò)支持撤銷(xiāo)操作和避免重復(fù)工作來(lái)提升令人滿(mǎn)意的用戶(hù)體驗(yàn)。

1. 支持撤銷(xiāo)操作

人人都會(huì)犯錯(cuò)，這在數(shù)字世界里指的是有時(shí)候我們會(huì)不小心點(diǎn)擊了某處。因此系統(tǒng)應(yīng)該要確保撤銷(xiāo)操作可以變得容易一些，以免用戶(hù)不得不歷經(jīng)重重障礙才能逆轉(zhuǎn)他們的無(wú)心之失。微交互可以顯示 UI 組件的當(dāng)前狀態(tài)，還能夠提示用戶(hù)他們可以進(jìn)行進(jìn)一步的交互了。

微交互可以說(shuō)是對(duì)撤銷(xiāo)操作最完美的支持方式，因?yàn)樗鼈兡軌蛎鞔_提示用戶(hù)系統(tǒng)狀態(tài)已經(jīng)發(fā)生變化。

Gap.com?允許你收藏喜歡的商品，只要點(diǎn)擊圖片右上角的心形圖標(biāo)就行。這個(gè)微交互使用了跳動(dòng)的心形動(dòng)畫(huà)來(lái)表達(dá)你已經(jīng)收藏了某件商品。你可以很容易的通過(guò)再次點(diǎn)擊心形圖標(biāo)撤銷(xiāo)收藏的行為，然后它就會(huì)恢復(fù)為原來(lái)的灰色狀態(tài)。

這種跳動(dòng)的心形動(dòng)效是利用動(dòng)畫(huà)吸引用戶(hù)注意的恰當(dāng)方式，因?yàn)椋?/p>

• 它足夠微妙，沒(méi)有粗暴的將用戶(hù)的注意力從主要任務(wù)中猛然拉開(kāi)（相反的，過(guò)于明顯的動(dòng)畫(huà)會(huì)對(duì)用戶(hù)造成極大的干擾）。
• 只在很短的時(shí)間內(nèi)顯示該動(dòng)畫(huà)，因此它仍然可以算作微交互，跟不合時(shí)宜地長(zhǎng)久顯示截然不同。
• 跳動(dòng)的心形動(dòng)效跟常規(guī)的點(diǎn)亮顏色的心形圖標(biāo)的區(qū)別在于它更有助于傳達(dá)系統(tǒng)狀態(tài)的變化，并能夠引導(dǎo)用戶(hù)留意因意外操作而產(chǎn)生的潛在影響（這在觸摸驅(qū)動(dòng)的用戶(hù)界面中常常發(fā)生）。

△ Gap.com 使用微交互來(lái)表示用戶(hù)收藏了某件商品

2. 避免重做

在賬號(hào)創(chuàng)建的流程中，比起在點(diǎn)擊最后的提交按鈕然后收到錯(cuò)誤提示說(shuō)你的密碼不符合要求（之前并未說(shuō)明這些要求），還有不少事情是更加令人崩潰的。但是使用微交互的話(huà)就可以用來(lái)提示用戶(hù)所輸入的密碼是否符合要求，這可以大大避免重復(fù)的輸入操作（比如重新填寫(xiě)表單）。如果沒(méi)有這些微交互，用戶(hù)會(huì)在注冊(cè)的過(guò)程中隨時(shí)感到抓狂，并且如果注冊(cè)并不是必須操作的話(huà)，他們便會(huì)立馬離開(kāi)。

eBay 的注冊(cè)表單使用了微交互來(lái)有效避免驗(yàn)證時(shí)的錯(cuò)誤發(fā)生。例如，密碼輸入框被激活后，會(huì)出現(xiàn)一個(gè)列表顯示對(duì)應(yīng)的密碼設(shè)置的要求。在輸入的過(guò)程中，每當(dāng)密碼滿(mǎn)足其中任一要求，該列表都會(huì)自動(dòng)更新。如果輸入的內(nèi)容都不符合要求，它的下方則會(huì)出現(xiàn)紅色的錯(cuò)誤提示。這一系列的微交互組合起來(lái)保證了用戶(hù)可以得到一致的反饋和流暢的體驗(yàn)。

△ eBay 在其注冊(cè)表單中使用微交互來(lái)反饋密碼是否符合要求

五、傳達(dá)品牌

微交互不應(yīng)該是空洞無(wú)物的，而是要服務(wù)于某個(gè)目的，因此我們也可以用它來(lái)進(jìn)行品牌傳達(dá)。如果你的品牌形象充滿(mǎn)樂(lè)趣而且色彩斑斕，那么讓它體現(xiàn)在微交互中是相當(dāng)合適的。相反地，若你的品牌需要傳達(dá)出專(zhuān)業(yè)和可靠的感覺(jué)，那么在下拉刷新的微交互中使用搞笑的方式（比如甜甜圈）就相當(dāng)欠缺考慮了。就像你的文案擁有某種口吻一樣，你的微交互也有它自己的口吻。

在使用蘋(píng)果的信息App 發(fā)送生日快樂(lè)的消息時(shí)，屏幕中會(huì)出現(xiàn)滿(mǎn)滿(mǎn)的氣球動(dòng)畫(huà)。蘋(píng)果將自己定位為一個(gè)富含創(chuàng)意同時(shí)以人為本的品牌，而這個(gè)生日的微交互以創(chuàng)造情感化的感官體驗(yàn)的方式完美契合了自身的品牌特性。

△ 用戶(hù)向某人發(fā)送「生日快樂(lè)」的信息時(shí)，信息App 會(huì)通過(guò)微交互來(lái)表達(dá)祝福

Snapchat 利用了微交互來(lái)表示兩位 Bitmoji 用戶(hù)處在同一個(gè)聊天窗口中。如果對(duì)方正在輸入，他的 Bitmoji 上會(huì)顯示表示正在思考的氣泡。而如果他在閱讀消息，對(duì)應(yīng)的 Bitmoji 則會(huì)顯示為正在偷偷查看消息輸入框。在這個(gè)案例中，微交互所提供的反饋會(huì)鼓勵(lì)用戶(hù)繼續(xù)進(jìn)行對(duì)話(huà)并持續(xù)使用這個(gè) app 。

△ Snapchat 使用微交互來(lái)顯示有兩個(gè)用戶(hù)處于相同的對(duì)話(huà)窗口中。對(duì)方閱讀消息時(shí)，他的 Bitmoji 會(huì)在左下角偷看（左圖）。如果對(duì)方正在輸入，他的 Bitmoji 上則會(huì)顯示表示對(duì)方正在思考的氣泡（右圖）

許多品牌嚴(yán)重依賴(lài)視覺(jué)來(lái)進(jìn)行傳達(dá)，其實(shí)聲音也擁有相當(dāng)程度的感染力。假設(shè)有人要求你畫(huà)出某個(gè)保險(xiǎn)公司的 Logo 或者唱出他們的廣告歌曲，你認(rèn)為哪一個(gè)會(huì)更容易呢？如果你經(jīng)常看電視，那么你首先想起來(lái)的很有可能是它的廣告歌曲。其實(shí)微交互也會(huì)用到聽(tīng)覺(jué)反饋。例如，在用戶(hù)啟動(dòng) Xbox One 時(shí)系統(tǒng)會(huì)給予聽(tīng)覺(jué)和視覺(jué)的反饋：Xbox 按鈕亮起來(lái)，系統(tǒng)發(fā)出簡(jiǎn)短但特別的旋律。Xbox One 的用戶(hù)是很有可能將這個(gè)聲音跟關(guān)機(jī)時(shí)的聲音，以及跟其他游戲平臺(tái)的聲音區(qū)分開(kāi)來(lái)的。因此這個(gè)微交互既成為了與系統(tǒng)交互的簽名元素，也是 Xbox 品牌的一個(gè)明顯特征。

△ 點(diǎn)擊觀看視頻

用戶(hù)打開(kāi)電源時(shí)，Xbox One 會(huì)通過(guò)聽(tīng)覺(jué)和視覺(jué)方式進(jìn)行反饋。對(duì)用戶(hù)來(lái)說(shuō)，聽(tīng)覺(jué)反饋是一個(gè)可以被立即識(shí)別的系統(tǒng)特點(diǎn)。

結(jié)論

設(shè)計(jì)優(yōu)秀的微交互可以顯著影響到用戶(hù)體驗(yàn)。它們可以作為與用戶(hù)進(jìn)行交流的媒介產(chǎn)生其相應(yīng)的價(jià)值。微交互能提供系統(tǒng)狀態(tài)的視覺(jué)反饋或者幫助用戶(hù)避免錯(cuò)誤。此外，微交互還能以傳達(dá)品牌的方式豐富你的產(chǎn)品，這能夠極大的鼓勵(lì)用戶(hù)選擇你的產(chǎn)品而不是競(jìng)爭(zhēng)對(duì)手。總而言之，這些微小的細(xì)節(jié)可以讓好的產(chǎn)品蛻變成優(yōu)秀的產(chǎn)品，從而讓用戶(hù)沉迷其中。

原文鏈接：《Microinteractions in User Experience》??Alita Joyce

圖片素材來(lái)源：undraw.co

「深入了解微交互」

• 《如何做好微交互，增加產(chǎn)品魅力值？》
• 《微交互是如何塑造優(yōu)質(zhì)的產(chǎn)品細(xì)節(jié)的？》
• 《交互設(shè)計(jì)中的“無(wú)意識(shí)錯(cuò)誤”：如何幫助用戶(hù)防錯(cuò)？》