在UI/UX設計中，微交互（Microinteraction）是其中的重要關注點之一。這些微交互也許能夠最好的證明：注意細節可以給（用戶）很好的效果。大多數UI/UX相關的書籍或者文章都在試圖說明一個基本信息：當設計過程已經結束時，你應該最終得到的不僅僅是美觀，而且首先得到的是好用和有用。

在之前的Tubik的工作組的一些文章和實例研究中，我們也支持一個觀點：UI/UX designers do not create just a piece of art: they make a product that solves the problem of the target audience, preferably in fast and easy way（UI/UX設計師不是再是僅僅設計一個藝術品：他們做的產品最好能夠通過快速，簡潔的方式來解決目標群體）.這是經過深思熟慮得出的來自微交互是能夠給設計成功的產品提供關鍵特征：易用，實用，可用。

微交互的精髓

總的來說，微交互是指在一個特定的情況下用戶的交互隨著產品完成特定的一個動作或者行為。

舉個例子，當你按下喜歡這個按鈕時，你可以看到你做的這個喜歡動作可以被計算到。（該號碼已更改，按鈕改變顏色或變得不活躍，該副本上的按鈕通知你，你已經做了行動，該按鈕或其他互動元素的副本通知，你是在那些誰喜歡，等）這就是微交互的情況.當你在適當的文字欄目上寫上搜索要求和發送到服務器，這就是一個案例。在社交網絡中，在你關注和取消關注一個人時就發生了微交互，在大多數情況下我們所做的設計中，不愿意去想那些簡單的步驟。

因此，很容易理解到用戶體驗主要是：接受理解微交互。這些神奇的種子，如果得到適當的照顧，可以成長為偉大的可用性，效率和普及的產品。

在大多數情況下，微交互不由自主的固定了用戶的行為，在用戶使用的時候，設計師需要非常注意，讓用戶使用起來更加的自然，簡潔，快捷。在微交互設計中界面動畫就是很多方法中的一種使用和提高的方式.

今天我和樂意通過用戶界面的動畫效果來提供更多的細節想法和一些例子.

GIF of the Tap Bar ConceptbySergey Valiukh

微交互的動畫效果

按鈕的動畫效果

顯然，各式各樣的按鈕是最受歡迎的交互要素。更多的按鈕被用戶視為喚醒屏幕或者使用網絡功能的要素，甚至對于低水平的計算機的用戶來說，因為虛擬按鈕實際上是模仿著普通物理按鈕的交互，所以，按鈕是影響用戶體驗本質的因素之一。按鈕可以讓用戶感覺容易或者煩惱和困惑，而在很多情況下，按鈕是最常用的微交互和導航的重要因素觸發。因此，他們被用戶嚴重的關注，從設計師的決定，不僅顏色，形狀，特殊效果，紋理和布局，但也要考慮必要性，適宜性和合適的動畫效果.

UI Navigation ConceptbyLudmila Shevchenko

Hamburger Menu AnimationbyValentyn Khenkin

GIF of the Tapbar InteractionsbySergey Valiukh

GIF for the Add ButtonbySergey Valiukh

下拉刷新動畫

這種動畫現在在用戶界面中是最為流行，對于移動端產品，用戶在第一次上手使用時經常提及到這個動畫.

一方面，它同時提供了兩個互動的步驟，一個是互動的應用程序顯示，另一個是用戶已經達到了內容滾動的上限使之讓屏幕的應用程序發生交互。

另一方面，在圖形用戶界面設計階段，在微交互過程中激活的元素，可以打開令人難以置信的廣闊的空間，這不僅是提供信息，而且還讓人感覺到時尚，美觀和有趣。此外，這種類型的界面動畫可以有效地使用特定的品牌元素，提高品牌知名度，使品牌的標志或吉祥物更令人難忘和可識別。

Pull To RefreshbyKirill

過程狀態動畫

有些種類的微交互立即發生，有的當然需要一些時間來完成。不管怎樣，為了積極的體驗，用戶需要了解他們每一步都會發生什么。因此，加載過程和類似等待，應該向用戶展示，他們也是能夠讓設計師展現創造力的巨大空間。

正如在過去的情況，一些標準的解決方案可以使用，以及有趣的細節和影響或品牌的元素可以在這里推廣。在這種情況下，設計人員應該分析核心目標的觀眾來決定什么樣的動畫可以放在這里，如果它需要一種加載欄或圓形或任何其他數據，如數字所示的百分比或任何解釋。

PreloaderbyKirill

Rubber IndicatorbyValentyn Khenkin

還有一點要提的是，使用任何類型的數碼互動產品，哪些用戶真正需要的是通過從系統快速反饋溝通。即使用戶必須等待，他/她應該清楚地了解軟件情況。它是對上述特征的所有類型的動畫的基礎。動畫的最重要的和最初的目的是為了澄清，緩解和加快相互作用的過程中，只有在此之后，以美化和創建所謂的“哇 – 效應”。解決方案的動畫應該可用性，而不是純粹的裝飾和娛樂的基礎上完成。

所以，以及在以前的帖子上的動畫，我們在用動畫作為微交互時。經常呼吁的一個常識，動畫應該支持的用戶，幫助他們，可以增加在應用中讓他真正與可用性相結合，而不是煩人或過度占用屏幕。

關于微交互動畫的思考

它不應該過度占用頁面或屏幕太多這樣會造成長期等待和惱人的加載過程.

在不同的設備和目標用戶下應該思考可以使用它們的條件.

在屏幕或網頁上它不應該出現在最重要的功能或內容中造成干擾.

在應用程序或網站中，它應該符合一般的文體觀念，以提供特殊的對產品的感覺.

Juicy PlayerbyValentyn Khenkin

對于設計有效的微交互這個問題，設計師不得不在設計、心理學、編程，有時語言學、科學和人類活動的其他領域的十字路口不知如何行動。目標受眾和測試的思想和觀念使微交互通常開門更高可用性的深入分析。在接口使用得當可以成為有效加快高效通過微步的互動，使一般更自然，當它需要在同一時間創造愉快而時尚的視覺設計的方法之一動畫。

來源：Tubik Studio

本文由 @bluelovemagic 原創發布于人人都是產品經理?，未經許可，禁止轉載。