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

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

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

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

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

• 他們給您的用戶提示

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

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

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

• 他們引起用戶的注意

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

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

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

四.什么時候使用微交互

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

輕滑

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

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

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

動畫

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

當(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ā)生了什么，完成該過程需要多長時間等。即使失敗消息也很幽默，但有效地保持了用戶的信任。

使教程變得有趣

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

號召性用語

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

動畫按鈕

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

滑動手勢

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

交流信息

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

互動參與

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

提供反饋

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

向用戶介紹界面

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

引起用戶的注意

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

使加載屏幕有趣

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

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

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

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

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

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

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

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

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

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

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

如果你熟悉編碼：

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

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

• 網(wǎng)頁：CSS動畫

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

• Principle，Adobe CC，origami Studio和Protopie

如果要創(chuàng)建詳細(xì)的交互+動畫：

• After Effects