微交互在用戶體驗中占據越來越重要的位置，來看看微交互該如何應用吧～
大概幾周前，在他的朋友和孩子們的大力勸說下，我并不那么精通互聯網的爺爺加入了Facebook。最后。在我教他設置個人資料，創建帖子和后續頁面時，他遇到了一個有趣的事，在嘗試摸索頁面中不知何故偶然發現了著名的LIKE按鈕。他將鼠標懸停在“贊”按鈕上，彈出了6個表情符號，然后單擊“ HAHA”笑臉，這使他對這個小動畫感到敬畏。這就是微交互對產品或應用程序的強大功能。
資料來源：Giphy
我們作為用戶，每天都能看到和應用這些微交互，有些甚至沒有意識到。“喜歡”按鈕是最簡單的示例之一。其他幾個是：
-
滾動鼠標時出現的簡單滾動條
-
向左滑動即可清除iPhone主屏幕上的通知
-
能夠看到其他人在消息傳遞應用程序上“打字”
-
一個進度條顯示下載百分比
-
拉動以刷新，以在應用程序屏幕上重新加載內容
-
交互式錯誤頁面，例如Google Chrome和為文章點贊是一些最常見的微交互。那么，為什么這些非常有效？為什么每個應用程序都有它們？
一.什么是微互動？
微交互就像與設備的任何其他交互一樣，用于將有意義的反饋傳達給用戶，因為用戶必須不斷知道執行某項操作時會發生什么。這是一種人們期望發生某些事情的趨勢。例如：單擊按鈕，滾動頁面，將商品添加到購物車，向左滑動卡片。
這通常是通過提供系統狀態（尼爾森的啟發式方法）或幫助用戶避免常見錯誤來實現的。當您未填寫必填字段時，帶有錯誤消息的紅色邊框就是微交互。
例如看下面的互動
豎起大拇指— Facebook Messenger
該動畫是微交互的一個很好的例子，因為它實現了三個重要功能：
-
溝通狀態并提供反饋
-
增強直接操縱感
-
幫助人們看到自己行動的結果
二.微交互的構成
分解
微觀互動包括四個部分：
-
觸發器啟動微交互。觸發器可以由用戶啟動或由系統啟動。
-
在用戶啟動的觸發器中，用戶必須啟動一個動作。
-
在系統啟動的觸發器中，軟件檢測到滿足某些資格并啟動操作。
-
規則確定了觸發微交互后會發生什么。
-
反饋使人們知道發生了什么事。發生微交互時，用戶看到，聽到或感覺到的任何東西都是反饋。
-
循環和模式決定了微交互的元規則。當條件改變時，微相互作用會發生什么？
三.微交互的作用
如果微交互僅僅是微小的設計元素，為什么還要關心它們呢？
很多Web開發人員和設計人員還在問這樣一個問題。注重細節是一個優秀網站與普通網站的根本區別。 這些就是使用微交互的原因：
-
他們改善了網站導航
-
它們使用戶更輕松地與您的網站進行交互
-
他們向用戶提供有關已完成操作的即時和相關反饋
-
他們給您的用戶提示
-
他們交流有關某些元素的信息，例如是否互動
-
它們使用戶體驗更有意義
-
他們鼓勵分享，喜歡和評論您的內容
-
他們引起用戶的注意
-
最后，它們只是使您的網站更具情感性
精心設計的微交互是用戶關心的明顯標志。這就是為什么他們如此重視。用戶可以做什么，以及他們的行為是否正確并得到系統的批準-應用程序或網站可提供即時的視覺反饋，并教會用戶使用系統。
正確進行微互動后，它們往往會給您的品牌帶來積極的感覺并影響用戶的行為，而人們甚至根本沒有意識到為什么這樣做。如果您喜歡或不喜歡產品的某個方面，則通常對產品有正面或負面的傾向。這種所謂的“哈洛效果”既可以支持您也可以對您不利。在明智的情況下，這些知識可以幫助改善用戶對您網站的反饋-通過適當注意細節，可以使用戶滿意。
四.什么時候使用微交互
在UX / UI世界中，盡管微交互非常微小，但與用戶進行交流時卻是強大的動力。以下是最常見的微交互及其對用戶體驗的影響：
輕滑
“輕滑”動作消除了輕擊，并且更具交互性和流暢性。它可以幫助用戶在選項卡之間快速切換并獲取有關產品的更多信息。此外，輕滑是一種非常常見的手勢，可以在不引起用戶思考的情況下潛意識地引導用戶。就像我們一直在讀“不要讓您的用戶思考”一樣，既有趣又令人上癮。
數據輸入
我們所有人都知道設置密碼或創建帳戶的麻煩。這個動作很容易引起用戶反感。關于密碼強度和用法的前瞻性建議可以使用戶輕松前進，而在輸入數據時進行一些交互也可以使用戶參與該過程并有助于實現目標。
動畫
動畫可以簡單地啟用并改善微交互。他們的存在可能不會被注意到，但是缺席給每個人造成了損失。它們就像膠水一樣，可以幫助設計師使最簡單的過程變得有趣和令人上癮。但是要非常小心，因為它們意在吸引用戶，而不會使他們分心或沮喪。延遲處理或在網站中引入新樣式可能會引起混亂。
當前系統狀態
必須使用戶了解網站或應用程序上當前發生的狀態，這一點很重要。如果不通知用戶，他們將很生氣并關閉網站或應用程序。微交互使用戶可以準確地知道發生了什么，完成該過程需要多長時間等。即使失敗消息也很幽默，但有效地保持了用戶的信任。
使教程變得有趣
每個人都在不斷尋求信息。借助微交互功能的教程通過簡化和突出顯示基本功能和重要控件以方便用戶理解，從而指導用戶進行應用程序的工作。
號召性用語
微交互實質上是在推動用戶與應用程序或網站進行交互。號召性用語給用戶帶來了成就感，也給用戶行為灌輸了同理心，使用戶與CTA互動的最佳方法是使CTA吸引用戶的興趣。
動畫按鈕
通過讓用戶知道他們通過您的應用程序或網站的方式，它們起到了信息管理器的作用。我們需要注意顏色、形狀、特殊效果、動畫、位置和紋理，以使用戶體驗自然而順暢。
滑動手勢
通過使用手勢隱藏一些動作項，這些類型的交互可用于節省移動設備上的空間。例如，您可以看到向左滑動將刪除電子郵件，向右滑動將存檔電子郵件。同樣，在鎖定屏幕上取消/清除通知。
快速操作
一個簡單的快速動作示例就是，當您點擊并按住應用程序圖標時，在Apple設備上進行3D觸摸，它將為您提供用戶最常使用的上下文動作項。這樣可以節省點擊次數和時間。例如，Instagram會呈現諸如相機、新帖、活動等動作。
交流信息
這些類型的交互會分解復雜的信息，并使用視覺，動畫將信息輕松傳達給消費者。一個完美的例子是解釋信用卡上的利息費用。這是一個敏感的話題，Apple Card通過使用圓形互動動畫來告知用戶和最高費用，再次贏得了客戶。
互動參與
有時，您希望用戶通過使他們感到驚奇的方式來與界面進行交互。這種令人驚訝的結合動作會更加產生更強大的影響。Robinhood App最近發布了一張借記卡，其候補名單超過一百萬。要在候補名單中上移您的位置，用戶可以轉到其應用并點擊該卡（最多60次）。這是使用戶與應用程序交互的一種有趣方式。
提供反饋
在用戶觸發某些內容或輸入某些內容之后，Motion可以有效地用于向用戶發送反饋。錯誤狀態和成功狀態就是這些示例，下面是移動應用程序正確和不正確密碼輸入的示例。
向用戶介紹界面
每當啟動具有精美功能的新產品或應用程序時，如果用戶發現它太難理解，它終將失敗。因此，在此類情況下，應用程序可以利用微交互來向用戶介紹功能。例如，N26 Fintech App使用動畫來演示用戶如何將錢從一個儲蓄桶轉移到另一個。
引起用戶的注意
當移動屏幕上的大部分空間都充滿信息時，很難突出顯示我們希望用戶注意到的特定功能。通過使用動畫和過渡效果，微交互可以在為用戶帶來愉悅感方面發揮至關重要的作用。例如，在Slack上，在您開始鍵入之前，發送按鈕變灰，一旦開始鍵入，它將變為藍色，向用戶指示這是號召性用語按鈕。
使加載屏幕有趣
大多數加載屏幕都很無聊，但是微交互和動畫可以將它們變成非常有趣的東西。每當加載或設置過程中有等待時間時，Google都會利用此空間為其用戶創造出色的直觀體驗。這是一個例子：
我們人類一直在努力尋求即時滿足。在更大的事物方案中，忽略微交互是一種普遍的趨勢，但不可否認微交互對于保持用戶對產品的興趣和好奇非常重要。每個人都說細節就是魔鬼。小小的體驗和設計功能（例如在屏幕之間切換或突出顯示功能或彈出新通知）可以在增強用戶體驗方面產生巨大差異。
五.如何設計微互動？
進行微交互對于設計師來說是令人興奮的，因為可以嘗試新的設計解決方案并尋找使用戶感到驚訝的新方法。但是為此，您必須牢記以下幾點：
-
把自己放在用戶的角度考度，并使用所有您要弄清楚他們如何使用您的應用程序。
-
創建功能動畫。不僅具有美學效果而且能夠增強用戶體驗的動畫。
-
讓用戶保持愉悅。用戶使用該應用程序時的感受是其不斷使用該應用程序的原因。如果用戶喜歡并感到愉快，他將再次使用產品。
-
不要打擾到用戶。過多的動畫會對用戶產生相反的影響。令人討厭的用戶使他們遠離您的應用程序。
-
使用人類語言和非技術性語言。有趣的文案可能會讓用戶暫時忘卻應用程序中空白頁面的沮喪。
六.設計微互動的工具
那么，設計人員應該熟悉哪些原型制作工具？那里有很多工具，但并不是每個人都知道哪種工具最適合特定的微交互任務。根據我個人設計這些元素的經驗，以下是我的建議。
如果你熟悉編碼：
-
手機：Xcode，Android Studio
-
手機或網頁：Framer
-
網頁：CSS動畫
如果要創建更詳細的交互：
-
Principle，Adobe CC，origami Studio和Protopie
如果要創建詳細的交互+動畫：
-
After Effects
轉自：站酷
作者：ZZiUP
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
歸根結底，設計師們厭倦了那些讓人感覺不親切的形象。歸根結底，無論一個標志是在講述品牌背后的人還是品牌服務的人的故事，人都是關鍵。
