??最好的產(chǎn)品會(huì)把兩件事做好：功能和細(xì)節(jié)。功能可以吸引人們使用你的產(chǎn)品。細(xì)節(jié)可以讓他們留下來(lái)，細(xì)節(jié)可以使我們的應(yīng)用在競(jìng)爭(zhēng)中脫穎而出，而微交互就是讓產(chǎn)品設(shè)計(jì)脫穎而出的亮點(diǎn)。

微交互是一種能給用戶愉快反饋的細(xì)節(jié)。

所有交互設(shè)計(jì)方法都指向「以人為本」的設(shè)計(jì)原則——用戶是焦點(diǎn)。微交互通常被認(rèn)為是輔助的或次要的，但是一旦用戶感知到，微交互能創(chuàng)造一種很好的體驗(yàn)。作為設(shè)計(jì)師或者產(chǎn)品經(jīng)理，認(rèn)識(shí)到微交互的隱形作用與設(shè)計(jì)它們一樣重要。

微交互是什么？

微交互是完成一項(xiàng)小任務(wù)的產(chǎn)品瞬間。

正如Dan Saffer的書(shū)《微交互》中首次描述的那樣，這些微小的細(xì)節(jié)通常具有以下基本功能：

• 溝通反饋或呈現(xiàn)采取行動(dòng)的結(jié)果。
• 完成一項(xiàng)個(gè)人任務(wù)。
• 增強(qiáng)直接操縱感。
• 幫助用戶可視化其操作，并防止用戶犯錯(cuò)。

特定的微交互的一些示例：

當(dāng)您將iPhone切換為靜音時(shí)，手機(jī)會(huì)有震動(dòng)，且屏幕上有靜音模式圖標(biāo)晃動(dòng)的動(dòng)畫(huà)效果。

界面動(dòng)畫(huà)可以顯示點(diǎn)擊后的效果（將鼠標(biāo)懸停時(shí)按鈕的顏色也會(huì)變化）。

資料來(lái)源：Dribbble

為什么微交互有效

微交互之所以起作用，是因?yàn)樗鼈冺槕?yīng)了用戶對(duì)「確認(rèn)」的自然渴望。用戶想要立即知道系統(tǒng)已經(jīng)立即接受他們的動(dòng)作，希望系統(tǒng)會(huì)給予一種視覺(jué)反饋。微交互還可以指導(dǎo)用戶如何操作。

微交互的作用

微交互的優(yōu)點(diǎn)之一是可以將它們插入任何潛在動(dòng)作周圍的不同位置。通常，它們通常在以下幾個(gè)方面出現(xiàn)：

1. 顯示系統(tǒng)狀態(tài)

akob Nielsen的「第一個(gè)可用性啟發(fā)式原則」指出：讓您的用戶了解正在發(fā)生的事情。用戶希望立即得到響應(yīng)。但是在某些情況下，應(yīng)用程序需要一些時(shí)間才能完成操作。

因此，界面應(yīng)使用戶對(duì)正在發(fā)生的事情有所了解。

進(jìn)度條，用于上傳和下載。資料來(lái)源：Dribbble

要點(diǎn)：不要讓您的用戶感到無(wú)聊——讓用戶了解情況并向他們顯示進(jìn)度（例如加載進(jìn)度吸引了用戶的注意力，同時(shí)也讓用戶不至于迷惑）。

2. 突出顯示變化

有時(shí)我們必須顯示通知以確保用戶看到它。動(dòng)畫(huà)可以提供幫助。它會(huì)引起用戶的注意，不讓他們忽略重要的內(nèi)容。

新的消息。資料來(lái)源：Dribbble

要點(diǎn)：在許多情況下，動(dòng)畫(huà)效果吸引用戶關(guān)注重要細(xì)節(jié)。您應(yīng)該使用KISS原理——微交互應(yīng)該很小且很簡(jiǎn)單。

3. 保持過(guò)渡

使用動(dòng)畫(huà)在上下頁(yè)面之間平穩(wěn)地過(guò)渡，呈現(xiàn)屏幕上元素排列的變化。移動(dòng)設(shè)備和智能手表尤其如此，因?yàn)楦静豢赡茉谝粋€(gè)屏幕上容納很多信息。

資料來(lái)源：Dribbble

總結(jié)：在不同頁(yè)面之間保持清晰的導(dǎo)航，讓用戶了解內(nèi)容從哪里出現(xiàn)。兩種視覺(jué)狀態(tài)之間的過(guò)渡應(yīng)該清晰，流暢且毫不費(fèi)力。主題統(tǒng)一——?jiǎng)?chuàng)建統(tǒng)一主題以將所有交互聯(lián)系在一起。

4. 可視化輸入

數(shù)據(jù)輸入是任何應(yīng)用程序中最重要的元素之一。微交互使這一過(guò)程變得特別。您可以使用微交互來(lái)提供反饋。

資料來(lái)源：Dribbble

總結(jié)：微交互有助于展示信息并幫助用戶完成操作。

5. 呼吁行動(dòng)

微交互可以鼓勵(lì)用戶進(jìn)行操作。這就是用戶體驗(yàn)中的同理心。但是，請(qǐng)確保視覺(jué)提示和動(dòng)畫(huà)適合您的用戶。牢記——微交互使用100次會(huì)變得煩人或者變得不清楚不矚目。

重點(diǎn)：關(guān)注用戶情緒——它們?cè)谟脩艚换ブ衅鹬匾饔?。從?chǎng)景和用戶研究中汲取經(jīng)驗(yàn)，以供重復(fù)使用。

要記住的事情

• 微交互可以幫助提供反饋，通知和說(shuō)明。
• 微交互應(yīng)該通過(guò)不打擾或分散用戶注意力的方式，即時(shí)交流信息節(jié)省時(shí)間。
• 了解您的用戶和使用場(chǎng)景將使微交互更加精確和有效。
• 微交互雖然能長(zhǎng)期使用。但第100次使用后，第一次看起來(lái)很有趣的事情可能會(huì)變得令人討厭。
• 微交互應(yīng)該人性化，并專注于視覺(jué)和諧。微交互應(yīng)該流暢自然。

結(jié)論

1. 微交互應(yīng)該精心設(shè)計(jì)。在設(shè)計(jì)這些小片段時(shí)，請(qǐng)思考人們?nèi)绾问褂煤褪褂盟麄兊膱?chǎng)景是什么，并遵循常見(jiàn)的思維模式。
2. 注意每一個(gè)細(xì)節(jié)都是您成功實(shí)現(xiàn)人機(jī)交互易于使用的關(guān)鍵。
3. 從功能部件到微交互，出色的設(shè)計(jì)必須“全棧式”進(jìn)行。

作者 ：Nick Babich

原文鏈接：https://uxplanet.org/microinteractions-the-secret-to-great-app-design-4cfe70fbaccf

編譯作者：熊不知；公眾號(hào)：產(chǎn)品經(jīng)理熊不知（ID：xiongbuzhia），人人都是產(chǎn)品經(jīng)理專欄作家。5年產(chǎn)品經(jīng)理經(jīng)驗(yàn)，專注海外社交APP和編輯工具類APP的產(chǎn)品設(shè)計(jì)。

本文由@熊不知 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

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