微交互是如何塑造優(yōu)質(zhì)的產(chǎn)品細(xì)節(jié)的？

“最好的產(chǎn)品通常會(huì)做好兩件事情：功能和細(xì)節(jié)。功能能夠吸引用戶(hù)關(guān)注這個(gè)產(chǎn)品，而細(xì)節(jié)則能夠讓關(guān)注的用戶(hù)留下來(lái)。”Dan Saffer 的這句話(huà)闡明了許多成功產(chǎn)品的秘訣。值得注意的是，功能和細(xì)節(jié)兩者都很重要，但是功能居首，細(xì)節(jié)次之。不過(guò)，讓用戶(hù)喜歡或者討厭一個(gè)APP或者網(wǎng)站，往往緣起于細(xì)節(jié)。隨著網(wǎng)站交互設(shè)計(jì)和動(dòng)效的大規(guī)模普及，我們現(xiàn)在所看到的許多細(xì)節(jié)設(shè)計(jì)，都可以歸類(lèi)于微交互。雖然在整體性的設(shè)計(jì)當(dāng)中，微交互似乎顯得微不足道，但是整個(gè)產(chǎn)品體驗(yàn)，與之息息相關(guān)。

今天的文章，我們將會(huì)探討微交互是如何塑造優(yōu)質(zhì)的產(chǎn)品細(xì)節(jié)的。

微交互

微交互是圍繞著某個(gè)交互或任務(wù)的微妙時(shí)刻，它并不特指某個(gè)交互或者某個(gè)動(dòng)效，而是和任務(wù)、交互相關(guān)的這個(gè)時(shí)間段中一系列的交互、動(dòng)效和反饋。我們?nèi)粘Ｊ褂玫腁PP中都有大量的微交互。

當(dāng)我們探討微交互的時(shí)候，我們常常會(huì)拿日常生活中的開(kāi)關(guān)作為實(shí)例，執(zhí)行按開(kāi)關(guān)這個(gè)操作的時(shí)候，開(kāi)關(guān)按鈕會(huì)有力回饋，按鈕本身會(huì)有物理上的位移，同時(shí)會(huì)有聲音回饋反映到用戶(hù)耳中，開(kāi)關(guān)所啟動(dòng)或者關(guān)閉的對(duì)象會(huì)發(fā)生改變，并且讓用戶(hù)感知到。這種微交互毫無(wú)疑問(wèn)在計(jì)算機(jī)被發(fā)明之前就有了，而這也是我們?cè)O(shè)計(jì)微交互的原理所在。

如果說(shuō)，開(kāi)關(guān)的實(shí)例還不夠直觀(guān)的話(huà)，再舉兩個(gè)UI&UX上的實(shí)例吧：

·iPhone靜音。iPhone 的靜音按鈕被打開(kāi)時(shí)，手機(jī)會(huì)有震動(dòng)通知，UI上會(huì)同時(shí)顯示靜音圖標(biāo)。

·下拉刷新交互。當(dāng)用戶(hù)希望發(fā)現(xiàn)更多內(nèi)容的時(shí)候，下拉界面，隨后內(nèi)容無(wú)縫地加載到頁(yè)面中來(lái)，通常界面還會(huì)提醒內(nèi)容已更新。

·點(diǎn)贊按鈕。當(dāng)你點(diǎn)擊點(diǎn)贊或者喜歡按鈕的時(shí)候，界面會(huì)使用動(dòng)效提醒你點(diǎn)擊已經(jīng)成功，并且將你的頭像顯示在點(diǎn)贊列表當(dāng)中。

微交互的作用

簡(jiǎn)而言之，微交互通過(guò)讓產(chǎn)品更加人性化來(lái)提升用戶(hù)體驗(yàn)。在設(shè)計(jì)UI的時(shí)候，絕大多數(shù)情況下，我們都在反復(fù)斟酌界面的外觀(guān)和感受，思考怎么將這些東西設(shè)計(jì)出來(lái)。但是當(dāng)我需要考慮微交互的設(shè)計(jì)之時(shí)，則更多的是在產(chǎn)品、服務(wù)和品牌之間做權(quán)衡與抉擇。微交互才是真正意義上以人為核心的設(shè)計(jì)：

·提供即時(shí)反饋——視覺(jué)反饋符合用戶(hù)的本能預(yù)期，它的存在讓用戶(hù)明白，他們的操作被用戶(hù)接受；
·促進(jìn)互動(dòng)——微交互本身就在鼓勵(lì)用戶(hù)進(jìn)行交互，它能夠指引用戶(hù)，教育用戶(hù)，讓用戶(hù)明白如何使用；
·帶來(lái)愉悅感——微交互本身就是呈現(xiàn)完美體驗(yàn)的良好時(shí)機(jī)。

更多優(yōu)勢(shì)

微交互本身是短暫的，同時(shí)它也被設(shè)計(jì)為可重復(fù)使用。精心設(shè)計(jì)的微交互能做的事情不少。

塑造用戶(hù)習(xí)慣

微交互能夠養(yǎng)成特定的用戶(hù)習(xí)慣。當(dāng)用戶(hù)重復(fù)執(zhí)行相同動(dòng)作的時(shí)候，能夠逐步形成習(xí)慣。典型的習(xí)慣環(huán)路是由3個(gè)要素組成的：

·提示——觸發(fā)交互的提示
·執(zhí)行——跟著提示的內(nèi)容，用戶(hù)執(zhí)行對(duì)應(yīng)的操作
·獎(jiǎng)勵(lì)——完成操作，用戶(hù)獲得相應(yīng)的獎(jiǎng)勵(lì)

最終的獎(jiǎng)勵(lì)來(lái)的越明顯，習(xí)慣越容易形成。所以，許多產(chǎn)品都在給用戶(hù)的獎(jiǎng)勵(lì)上動(dòng)心思。獎(jiǎng)勵(lì)的方式多種多樣，而目前最常用的，是通過(guò)動(dòng)效來(lái)賦予交互以愉悅感，或者是給予用戶(hù)有用的信息。Facebook 就是采用的這樣的機(jī)制，當(dāng)用戶(hù)看到圖標(biāo)上出現(xiàn)小紅點(diǎn)的時(shí)候（提示），會(huì)點(diǎn)擊圖標(biāo)（操作），進(jìn)入APP之后，用戶(hù)會(huì)看到相應(yīng)的推送信息（獎(jiǎng)勵(lì)）。

重要時(shí)刻

如果微交互執(zhí)行的好，那么它可以成為不斷強(qiáng)化用戶(hù)忠誠(chéng)度的關(guān)鍵時(shí)刻。同時(shí)，它也可以成為塑造品牌的關(guān)鍵時(shí)刻。想想 Facebook 的 Like 按鈕吧，它采用的是動(dòng)效作為獎(jiǎng)勵(lì)機(jī)制，并且現(xiàn)在已經(jīng)成為了Facebook UI和交互的標(biāo)志，是不可或缺的組成部分。如何哪天Facebook 刪除了這一功能，用戶(hù)會(huì)立刻注意到，甚至?xí)`以為Facebook 出了狀況。

高識(shí)別度

微交互的優(yōu)勢(shì)很多，它最大的特點(diǎn)在于可以無(wú)縫的存在于不同的界面，不同的UX環(huán)節(jié)當(dāng)中，同各式各樣的交互連接起來(lái)，如影隨形。

高亮變化

微交互常常能夠吸引用戶(hù)的注意力，在許多情況下，微交互是借由動(dòng)畫(huà)和動(dòng)效來(lái)提相應(yīng)用戶(hù)“這個(gè)細(xì)節(jié)很重要”。

提升用戶(hù)效率

自動(dòng)補(bǔ)全是微交互的另外一個(gè)重要用途。不論是什么語(yǔ)言，文本輸入本身的成本一直都很高昂，在小型觸摸屏上尤其是如此，出錯(cuò)率高，總體效率低下。自動(dòng)補(bǔ)全，或者說(shuō)自動(dòng)填充，它能通過(guò)預(yù)測(cè)在一定程度上提前給用戶(hù)正確的輸入內(nèi)容，降低出錯(cuò)率，提升效率。

提供相應(yīng)的反饋

微交互能夠強(qiáng)化用戶(hù)交互的實(shí)際效果，不過(guò)考慮到“show, don’t tell”這一設(shè)計(jì)原則，采用動(dòng)畫(huà)來(lái)展示交互結(jié)果和操作已完成，比起文字說(shuō)明和提示框要優(yōu)雅得體且有效得多。在 Stripe 的這個(gè)案例當(dāng)中，用戶(hù)點(diǎn)擊付款之前，會(huì)有一個(gè)短暫的加載過(guò)程，完成之后還有一個(gè)完成的對(duì)勾標(biāo)識(shí)告知用戶(hù)付款完成。這組動(dòng)效不僅符合用戶(hù)接受信息的自然過(guò)程，而且給予了用戶(hù)正確的反饋。

提供狀態(tài)相關(guān)信息

Jakob Nielsen 所提出的第一個(gè)可用性原則是這么說(shuō)的：系統(tǒng)應(yīng)該讓用戶(hù)明白正在發(fā)生的事情。聊天窗口中的綠色狀態(tài)指示控件就是一個(gè)很優(yōu)秀的實(shí)例。用戶(hù)是否收到了，一目了然，無(wú)需說(shuō)明。

驗(yàn)證用戶(hù)信息

表單設(shè)計(jì)中最容易被忽視的，其實(shí)是對(duì)于出錯(cuò)信息的處理。表單，尤其是長(zhǎng)表單，填寫(xiě)內(nèi)容出錯(cuò)其實(shí)是很正常的事情，等到提交信息的時(shí)候再報(bào)錯(cuò)，用戶(hù)會(huì)非常沮喪。而微交互結(jié)合實(shí)時(shí)驗(yàn)證，能夠讓用戶(hù)在輸入的過(guò)程中就發(fā)現(xiàn)錯(cuò)誤并進(jìn)行修改，一次通過(guò)，不用等待提交的時(shí)候再回頭處理。

結(jié)語(yǔ)

設(shè)計(jì)始終都關(guān)乎細(xì)節(jié)。即使是再微小的細(xì)節(jié)都值得我們關(guān)注，細(xì)節(jié)的裝飾，微妙的配色，看起來(lái)微不足道的微交互，細(xì)小但是引人注意的動(dòng)效，所有的這些東西構(gòu)成了產(chǎn)品令人難以忘懷的體驗(yàn)，而這些都無(wú)法忽視。

“那些令人愛(ài)不釋手的應(yīng)用，和那些令人難以忍受的應(yīng)用，差別可能就在于微交互上。”這句話(huà)也是Dan Saffer 說(shuō)的。

【深入了解微交互】

1. 《交互｜幫你梳理微交互的五個(gè)基本要素》
2. 《走心！優(yōu)秀的移動(dòng)端UI應(yīng)當(dāng)如何用微交互打磨細(xì)節(jié)？》
3. 《超實(shí)用！6個(gè)方法幫你做出優(yōu)秀的UI動(dòng)態(tài)微交互》

原文地址：webdesignerdepot
原文作者：NICK BABICH
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線(xiàn)端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量180萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com