大概幾周前，在他的朋友和孩子們的大力勸說下，我并不那么精通互聯(lián)網(wǎng)的爺爺加入了Facebook。最后。在我教他設(shè)置個人資料，創(chuàng)建帖子和后續(xù)頁面時，他遇到了一個有趣的事，在嘗試摸索頁面中不知何故偶然發(fā)現(xiàn)了著名的LIKE按鈕。他將鼠標(biāo)懸停在“贊”按鈕上，彈出了6個表情符號，然后單擊“ HAHA”笑臉，這使他對這個小動畫感到敬畏。這就是微交互對產(chǎn)品或應(yīng)用程序的強大功能。

資料來源：Giphy

我們作為用戶，每天都能看到和應(yīng)用這些微交互，有些甚至沒有意識到。“喜歡”按鈕是最簡單的示例之一。其他幾個是：

• 滾動鼠標(biāo)時出現(xiàn)的簡單滾動條

• 向左滑動即可清除iPhone主屏幕上的通知

• 能夠看到其他人在消息傳遞應(yīng)用程序上“打字”

• 一個進(jìn)度條顯示下載百分比

• 拉動以刷新，以在應(yīng)用程序屏幕上重新加載內(nèi)容

• 交互式錯誤頁面，例如Google Chrome和為文章點贊是一些最常見的微交互。那么，為什么這些非常有效？為什么每個應(yīng)用程序都有它們？

資料來源：Dribbble

一.什么是微互動？

微交互就像與設(shè)備的任何其他交互一樣，用于將有意義的反饋傳達(dá)給用戶，因為用戶必須不斷知道執(zhí)行某項操作時會發(fā)生什么。這是一種人們期望發(fā)生某些事情的趨勢。例如：單擊按鈕，滾動頁面，將商品添加到購物車，向左滑動卡片。

這通常是通過提供系統(tǒng)狀態(tài)（尼爾森的啟發(fā)式方法）或幫助用戶避免常見錯誤來實現(xiàn)的。當(dāng)您未填寫必填字段時，帶有錯誤消息的紅色邊框就是微交互。

例如看下面的互動

豎起大拇指— Facebook Messenger

該動畫是微交互的一個很好的例子，因為它實現(xiàn)了三個重要功能：

• 溝通狀態(tài)并提供反饋

• 增強直接操縱感

• 幫助人們看到自己行動的結(jié)果

二.微交互的構(gòu)成

分解

微觀互動包括四個部分：

• 觸發(fā)器啟動微交互。觸發(fā)器可以由用戶啟動或由系統(tǒng)啟動。

• 在用戶啟動的觸發(fā)器中，用戶必須啟動一個動作。

• 在系統(tǒng)啟動的觸發(fā)器中，軟件檢測到滿足某些資格并啟動操作。

• 規(guī)則確定了觸發(fā)微交互后會發(fā)生什么。

• 反饋使人們知道發(fā)生了什么事。發(fā)生微交互時，用戶看到，聽到或感覺到的任何東西都是反饋。

• 循環(huán)和模式決定了微交互的元規(guī)則。當(dāng)條件改變時，微相互作用會發(fā)生什么？

三.微交互的作用

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

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

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

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

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

• 他們給您的用戶提示

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

• 它們使用戶體驗更有意義

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

• 他們引起用戶的注意

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

精心設(shè)計的微交互是用戶關(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)行交流時卻是強大的動力。以下是最常見的微交互及其對用戶體驗的影響：

輕滑

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

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

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

動畫

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

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

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

使教程變得有趣

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

號召性用語

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

動畫按鈕

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

滑動手勢

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

交流信息

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

互動參與

有時，您希望用戶通過使他們感到驚奇的方式來與界面進(jìn)行交互。這種令人驚訝的結(jié)合動作會更加產(chǎn)生更強大的影響。Robinhood App最近發(fā)布了一張借記卡，其候補名單超過一百萬。要在候補名單中上移您的位置，用戶可以轉(zhuǎn)到其應(yīng)用并點擊該卡（最多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)造出色的直觀體驗。這是一個例子：

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

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

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

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

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

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

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

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

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

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

如果你熟悉編碼：

• 手機：Xcode，Android Studio

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

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

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

• Principle，Adobe CC，origami Studio和Protopie

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

• After Effects

文章來源：站酷   作者：ZZiUP

藍(lán)藍(lán)設(shè)計( www.skdbbs.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)