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

在之前的Tubik的工作組的一些文章和實(shí)例研究中，我們也支持一個(gè)觀點(diǎn)：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è)計(jì)師不是再是僅僅設(shè)計(jì)一個(gè)藝術(shù)品：他們做的產(chǎn)品最好能夠通過(guò)快速，簡(jiǎn)潔的方式來(lái)解決目標(biāo)群體）.這是經(jīng)過(guò)深思熟慮得出的來(lái)自微交互是能夠給設(shè)計(jì)成功的產(chǎn)品提供關(guān)鍵特征：易用，實(shí)用，可用。

微交互的精髓

總的來(lái)說(shuō)，微交互是指在一個(gè)特定的情況下用戶(hù)的交互隨著產(chǎn)品完成特定的一個(gè)動(dòng)作或者行為。

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

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

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

今天我和樂(lè)意通過(guò)用戶(hù)界面的動(dòng)畫(huà)效果來(lái)提供更多的細(xì)節(jié)想法和一些例子.

GIF of the Tap Bar ConceptbySergey Valiukh

微交互的動(dòng)畫(huà)效果

按鈕的動(dòng)畫(huà)效果

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

UI Navigation ConceptbyLudmila Shevchenko

Hamburger Menu AnimationbyValentyn Khenkin

GIF of the Tapbar InteractionsbySergey Valiukh

GIF for the Add ButtonbySergey Valiukh

下拉刷新動(dòng)畫(huà)

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

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

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

Pull To RefreshbyKirill

過(guò)程狀態(tài)動(dòng)畫(huà)

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

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

PreloaderbyKirill

Rubber IndicatorbyValentyn Khenkin

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

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

關(guān)于微交互動(dòng)畫(huà)的思考

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

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

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

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

Juicy PlayerbyValentyn Khenkin

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

來(lái)源：Tubik Studio

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