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

在之前的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設(shè)計師不是再是僅僅設(shè)計一個藝術(shù)品：他們做的產(chǎn)品最好能夠通過快速，簡潔的方式來解決目標群體）.這是經(jīng)過深思熟慮得出的來自微交互是能夠給設(shè)計成功的產(chǎn)品提供關(guān)鍵特征：易用，實用，可用。

微交互的精髓

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

舉個例子，當你按下喜歡這個按鈕時，你可以看到你做的這個喜歡動作可以被計算到。（該號碼已更改，按鈕改變顏色或變得不活躍，該副本上的按鈕通知你，你已經(jīng)做了行動，該按鈕或其他互動元素的副本通知，你是在那些誰喜歡，等）這就是微交互的情況.當你在適當?shù)奈淖謾谀可蠈懮纤阉饕蠛桶l(fā)送到服務(wù)器，這就是一個案例。在社交網(wǎng)絡(luò)中，在你關(guān)注和取消關(guān)注一個人時就發(fā)生了微交互，在大多數(shù)情況下我們所做的設(shè)計中，不愿意去想那些簡單的步驟。

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

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

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

GIF of the Tap Bar ConceptbySergey Valiukh

微交互的動畫效果

按鈕的動畫效果

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

UI Navigation ConceptbyLudmila Shevchenko

Hamburger Menu AnimationbyValentyn Khenkin

GIF of the Tapbar InteractionsbySergey Valiukh

GIF for the Add ButtonbySergey Valiukh

下拉刷新動畫

這種動畫現(xiàn)在在用戶界面中是最為流行，對于移動端產(chǎn)品，用戶在第一次上手使用時經(jīng)常提及到這個動畫.

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

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

Pull To RefreshbyKirill

過程狀態(tài)動畫

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

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

PreloaderbyKirill

Rubber IndicatorbyValentyn Khenkin

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

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

關(guān)于微交互動畫的思考

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

在不同的設(shè)備和目標用戶下應(yīng)該思考可以使用它們的條件.

在屏幕或網(wǎng)頁上它不應(yīng)該出現(xiàn)在最重要的功能或內(nèi)容中造成干擾.

在應(yīng)用程序或網(wǎng)站中，它應(yīng)該符合一般的文體觀念，以提供特殊的對產(chǎn)品的感覺.

Juicy PlayerbyValentyn Khenkin

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

來源：Tubik Studio

本文由 @bluelovemagic 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。