如果微交互僅僅是微小的設(shè)計(jì)元素，為什么還要關(guān)心它們呢？

很多Web開(kāi)發(fā)人員和設(shè)計(jì)人員還在問(wèn)這樣一個(gè)問(wèn)題。注重細(xì)節(jié)是一個(gè)優(yōu)秀網(wǎng)站與普通網(wǎng)站的根本區(qū)別。 這些就是使用微交互的原因：

• 他們改善了網(wǎng)站導(dǎo)航

• 它們使用戶更輕松地與您的網(wǎng)站進(jìn)行交互

• 他們向用戶提供有關(guān)已完成操作的即時(shí)和相關(guān)反饋

• 他們給您的用戶提示

• 他們交流有關(guān)某些元素的信息，例如是否互動(dòng)

• 它們使用戶體驗(yàn)更有意義

• 他們鼓勵(lì)分享，喜歡和評(píng)論您的內(nèi)容

• 他們引起用戶的注意

• 最后，它們只是使您的網(wǎng)站更具情感性

精心設(shè)計(jì)的微交互是用戶關(guān)心的明顯標(biāo)志。這就是為什么他們?nèi)绱酥匾?。用戶可以做什么，以及他們的行為是否正確并得到系統(tǒng)的批準(zhǔn)-應(yīng)用程序或網(wǎng)站可提供即時(shí)的視覺(jué)反饋，并教會(huì)用戶使用系統(tǒng)。

正確進(jìn)行微互動(dòng)后，它們往往會(huì)給您的品牌帶來(lái)積極的感覺(jué)并影響用戶的行為，而人們甚至根本沒(méi)有意識(shí)到為什么這樣做。如果您喜歡或不喜歡產(chǎn)品的某個(gè)方面，則通常對(duì)產(chǎn)品有正面或負(fù)面的傾向。這種所謂的“哈洛效果”既可以支持您也可以對(duì)您不利。在明智的情況下，這些知識(shí)可以幫助改善用戶對(duì)您網(wǎng)站的反饋-通過(guò)適當(dāng)注意細(xì)節(jié)，可以使用戶滿意。

四.什么時(shí)候使用微交互

在UX / UI世界中，盡管微交互非常微小，但與用戶進(jìn)行交流時(shí)卻是強(qiáng)大的動(dòng)力。以下是最常見(jiàn)的微交互及其對(duì)用戶體驗(yàn)的影響：

輕滑

“輕滑”動(dòng)作消除了輕擊，并且更具交互性和流暢性。它可以幫助用戶在選項(xiàng)卡之間快速切換并獲取有關(guān)產(chǎn)品的更多信息。此外，輕滑是一種非常常見(jiàn)的手勢(shì)，可以在不引起用戶思考的情況下潛意識(shí)地引導(dǎo)用戶。就像我們一直在讀“不要讓您的用戶思考”一樣，既有趣又令人上癮。

數(shù)據(jù)輸入

我們所有人都知道設(shè)置密碼或創(chuàng)建帳戶的麻煩。這個(gè)動(dòng)作很容易引起用戶反感。關(guān)于密碼強(qiáng)度和用法的前瞻性建議可以使用戶輕松前進(jìn)，而在輸入數(shù)據(jù)時(shí)進(jìn)行一些交互也可以使用戶參與該過(guò)程并有助于實(shí)現(xiàn)目標(biāo)。

動(dòng)畫(huà)

動(dòng)畫(huà)可以簡(jiǎn)單地啟用并改善微交互。他們的存在可能不會(huì)被注意到，但是缺席給每個(gè)人造成了損失。它們就像膠水一樣，可以幫助設(shè)計(jì)師使最簡(jiǎn)單的過(guò)程變得有趣和令人上癮。但是要非常小心，因?yàn)樗鼈円庠谖脩?，而不?huì)使他們分心或沮喪。延遲處理或在網(wǎng)站中引入新樣式可能會(huì)引起混亂。

當(dāng)前系統(tǒng)狀態(tài)

必須使用戶了解網(wǎng)站或應(yīng)用程序上當(dāng)前發(fā)生的狀態(tài)，這一點(diǎn)很重要。如果不通知用戶，他們將很生氣并關(guān)閉網(wǎng)站或應(yīng)用程序。微交互使用戶可以準(zhǔn)確地知道發(fā)生了什么，完成該過(guò)程需要多長(zhǎng)時(shí)間等。即使失敗消息也很幽默，但有效地保持了用戶的信任。

使教程變得有趣

每個(gè)人都在不斷尋求信息。借助微交互功能的教程通過(guò)簡(jiǎn)化和突出顯示基本功能和重要控件以方便用戶理解，從而指導(dǎo)用戶進(jìn)行應(yīng)用程序的工作。

號(hào)召性用語(yǔ)

微交互實(shí)質(zhì)上是在推動(dòng)用戶與應(yīng)用程序或網(wǎng)站進(jìn)行交互。號(hào)召性用語(yǔ)給用戶帶來(lái)了成就感，也給用戶行為灌輸了同理心，使用戶與CTA互動(dòng)的最佳方法是使CTA吸引用戶的興趣。

動(dòng)畫(huà)按鈕

通過(guò)讓用戶知道他們通過(guò)您的應(yīng)用程序或網(wǎng)站的方式，它們起到了信息管理器的作用。我們需要注意顏色、形狀、特殊效果、動(dòng)畫(huà)、位置和紋理，以使用戶體驗(yàn)自然而順暢。

滑動(dòng)手勢(shì)

通過(guò)使用手勢(shì)隱藏一些動(dòng)作項(xiàng)，這些類型的交互可用于節(jié)省移動(dòng)設(shè)備上的空間。例如，您可以看到向左滑動(dòng)將刪除電子郵件，向右滑動(dòng)將存檔電子郵件。同樣，在鎖定屏幕上取消/清除通知。

交流信息

這些類型的交互會(huì)分解復(fù)雜的信息，并使用視覺(jué)，動(dòng)畫(huà)將信息輕松傳達(dá)給消費(fèi)者。一個(gè)完美的例子是解釋信用卡上的利息費(fèi)用。這是一個(gè)敏感的話題，Apple Card通過(guò)使用圓形互動(dòng)動(dòng)畫(huà)來(lái)告知用戶和最高費(fèi)用，再次贏得了客戶。

互動(dòng)參與

有時(shí)，您希望用戶通過(guò)使他們感到驚奇的方式來(lái)與界面進(jìn)行交互。這種令人驚訝的結(jié)合動(dòng)作會(huì)更加產(chǎn)生更強(qiáng)大的影響。Robinhood App最近發(fā)布了一張借記卡，其候補(bǔ)名單超過(guò)一百萬(wàn)。要在候補(bǔ)名單中上移您的位置，用戶可以轉(zhuǎn)到其應(yīng)用并點(diǎn)擊該卡（最多60次）。這是使用戶與應(yīng)用程序交互的一種有趣方式。

提供反饋

在用戶觸發(fā)某些內(nèi)容或輸入某些內(nèi)容之后，Motion可以有效地用于向用戶發(fā)送反饋。錯(cuò)誤狀態(tài)和成功狀態(tài)就是這些示例，下面是移動(dòng)應(yīng)用程序正確和不正確密碼輸入的示例。

向用戶介紹界面

每當(dāng)啟動(dòng)具有精美功能的新產(chǎn)品或應(yīng)用程序時(shí)，如果用戶發(fā)現(xiàn)它太難理解，它終將失敗。因此，在此類情況下，應(yīng)用程序可以利用微交互來(lái)向用戶介紹功能。例如，N26 Fintech App使用動(dòng)畫(huà)來(lái)演示用戶如何將錢(qián)從一個(gè)儲(chǔ)蓄桶轉(zhuǎn)移到另一個(gè)。

引起用戶的注意

當(dāng)移動(dòng)屏幕上的大部分空間都充滿信息時(shí)，很難突出顯示我們希望用戶注意到的特定功能。通過(guò)使用動(dòng)畫(huà)和過(guò)渡效果，微交互可以在為用戶帶來(lái)愉悅感方面發(fā)揮至關(guān)重要的作用。例如，在Slack上，在您開(kāi)始鍵入之前，發(fā)送按鈕變灰，一旦開(kāi)始鍵入，它將變?yōu)樗{(lán)色，向用戶指示這是號(hào)召性用語(yǔ)按鈕。

使加載屏幕有趣

大多數(shù)加載屏幕都很無(wú)聊，但是微交互和動(dòng)畫(huà)可以將它們變成非常有趣的東西。每當(dāng)加載或設(shè)置過(guò)程中有等待時(shí)間時(shí)，Google都會(huì)利用此空間為其用戶創(chuàng)造出色的直觀體驗(yàn)。這是一個(gè)例子：

我們?nèi)祟愐恢痹谂で蠹磿r(shí)滿足。在更大的事物方案中，忽略微交互是一種普遍的趨勢(shì)，但不可否認(rèn)微交互對(duì)于保持用戶對(duì)產(chǎn)品的興趣和好奇非常重要。每個(gè)人都說(shuō)細(xì)節(jié)就是魔鬼。小小的體驗(yàn)和設(shè)計(jì)功能（例如在屏幕之間切換或突出顯示功能或彈出新通知）可以在增強(qiáng)用戶體驗(yàn)方面產(chǎn)生巨大差異。

五.如何設(shè)計(jì)微互動(dòng)？

進(jìn)行微交互對(duì)于設(shè)計(jì)師來(lái)說(shuō)是令人興奮的，因?yàn)榭梢試L試新的設(shè)計(jì)解決方案并尋找使用戶感到驚訝的新方法。但是為此，您必須牢記以下幾點(diǎn)：

• 把自己放在用戶的角度考度，并使用所有您要弄清楚他們?nèi)绾问褂媚膽?yīng)用程序。

• 創(chuàng)建功能動(dòng)畫(huà)。不僅具有美學(xué)效果而且能夠增強(qiáng)用戶體驗(yàn)的動(dòng)畫(huà)。

• 讓用戶保持愉悅。用戶使用該應(yīng)用程序時(shí)的感受是其不斷使用該應(yīng)用程序的原因。如果用戶喜歡并感到愉快，他將再次使用產(chǎn)品。

• 不要打擾到用戶。過(guò)多的動(dòng)畫(huà)會(huì)對(duì)用戶產(chǎn)生相反的影響。令人討厭的用戶使他們遠(yuǎn)離您的應(yīng)用程序。

• 使用人類語(yǔ)言和非技術(shù)性語(yǔ)言。有趣的文案可能會(huì)讓用戶暫時(shí)忘卻應(yīng)用程序中空白頁(yè)面的沮喪。

六.設(shè)計(jì)微互動(dòng)的工具

那么，設(shè)計(jì)人員應(yīng)該熟悉哪些原型制作工具？那里有很多工具，但并不是每個(gè)人都知道哪種工具最適合特定的微交互任務(wù)。根據(jù)我個(gè)人設(shè)計(jì)這些元素的經(jīng)驗(yàn)，以下是我的建議。

如果你熟悉編碼：

• 手機(jī)：Xcode，Android Studio

• 手機(jī)或網(wǎng)頁(yè)：Framer

• 網(wǎng)頁(yè)：CSS動(dòng)畫(huà)

如果要?jiǎng)?chuàng)建更詳細(xì)的交互：

• Principle，Adobe CC，origami Studio和Protopie

如果要?jiǎng)?chuàng)建詳細(xì)的交互+動(dòng)畫(huà)：

• After Effects