發(fā)布機(jī)構(gòu)：Tubik Studio

說起UI/UX設(shè)計，微交互是成敗與否的關(guān)鍵要素之一，是小小細(xì)節(jié)帶來巨大回報的最有力的證據(jù)。當(dāng)下大部分UI/UX設(shè)計的書都圍繞著一個基本信息：當(dāng)設(shè)計流程結(jié)束后，用戶最后得到的東西僅僅好看是不夠的，“美貌”的前提是要有用且可用。

在Tubik Studio早些的文章和案例研究中，我們就倡導(dǎo)UI/UX設(shè)計師不是在創(chuàng)造一件藝術(shù)品，而是為目標(biāo)用戶打造解決問題的產(chǎn)品，幫助用戶更方便快捷的搞定所需。一款成功的產(chǎn)品要同時具備易用性、實(shí)用性、有吸引力等關(guān)鍵要素，精雕細(xì)琢的微交互正是達(dá)到以上要素的不二法門。

GIF?—?Portrait vs Landscape by Sergey Valiukh

微交互的本質(zhì)

通常來說，微交互是用戶在完成特定任務(wù)時與產(chǎn)品進(jìn)行的交互過程。比如當(dāng)你點(diǎn)擊“喜歡”按鈕（反正它看起來很像）并發(fā)現(xiàn)這個行為已經(jīng)被計數(shù)了（喜歡數(shù)會發(fā)生變化，按鈕顏色改變或者變的不可點(diǎn)擊，這些變化都無聲的告訴你你已經(jīng)完成了操作；背后的含義可能在暗示，你已經(jīng)在喜歡它的用戶列表里了諸如此類~），這就是微交互；填寫文本框發(fā)送搜索請求也是個例子。微交互發(fā)生在我們在社交網(wǎng)絡(luò)中關(guān)注和不關(guān)注的人身上，評價博文或者設(shè)定計時器——很多很多我們在做的事情其實(shí)都與微交互有關(guān)，只是大多情況下我們并沒有留意些簡單的步驟。

所以，談及用戶體驗(yàn)肯定少不了探究微交互；而且如果運(yùn)用得當(dāng)，微交互很有可能成為一顆打造完美易用性、驚人的高效及知名度的種子。

微交互方面最權(quán)威的深度解析書籍可能是 Dan Saffer寫的《Microinteractions》，他深入淺出的講解了微交互的理念、框架、工作機(jī)制、包含的種類、分別得特點(diǎn)以及在用戶體驗(yàn)中扮演的角色。在此向用戶體驗(yàn)相關(guān)從業(yè)人士強(qiáng)烈推薦這本書，作者在書里闡釋了對“以用戶為中心的設(shè)計”很棒的理解。

大多數(shù)情況下，微交互能夠讓用戶在不自知的情況下被吸引——這也是設(shè)計要做的最重要的事情之一：讓操作任務(wù)變得自然、清晰和盡可能的流暢。設(shè)計中有很多方法去提升微交互的效果，界面動效就是其中之一。

我們在更早的頁面動效文章“運(yùn)動的力量”中已經(jīng)聊過這個話題，參照Tubik Studio的設(shè)計項(xiàng)目和理念，我們總結(jié)過一些動效的基本用法和目的。那時候我們稱動效是一種類似健康的東西：當(dāng)身體無恙的時候你根本不會注意到它，但是當(dāng)哪里抱恙之后，你才會意識到它的重要性。

由動效支持的微交互也很難被用戶差距到，除非有一天我們讓這些動效都消失了。

今天我們將提供更詳細(xì)的多種動效類型的思路和案例。

GIF of the Tap Bar Concept by Sergey Valiukh

動起來的微交互

動起來的按鈕

button是交互中最in的元素，而且，他們最容易被用戶感知，“點(diǎn)擊”就可以觸發(fā)屏幕的某個功能；即便是電腦操作水平很低的用戶，點(diǎn)擊按鈕這個動作也很有操控實(shí)體的感覺。所以，按鈕是左右用戶體驗(yàn)的本質(zhì)要素之一，好的按鈕設(shè)計讓交互變得輕松容易，反之則會令人抓狂和困惑。在很多案例中，button是最常被用作微交互的觸發(fā)器和導(dǎo)航的關(guān)鍵要素。所以，為了全方位鎖定用戶的注意力，設(shè)計師不僅需要考慮按鈕的顏色、形狀、特效、紋理和位置，也要考慮必要性，適當(dāng)性和動效的本質(zhì)。

iPad App Interactions by Sergey Valiukh

UI Navigation Concept by Ludmila Shevchenko

GIF of the Tapbar Interactions by Sergey Valiukh

Hamburger Menu Animation by Valentyn Khenkin

GIF for the Add Button by Sergey Valiukh

下拉刷新動效

這類動效現(xiàn)在也很流行，而且在進(jìn)行app動效設(shè)計時，首先都會先設(shè)計這類動效。一方面，它同時提供兩步交互，一是app告訴用戶他已經(jīng)到了內(nèi)容瀑布流的頂端，以及，再拉，再拉它就要刷新啦~

另一方面，它為創(chuàng)意UI設(shè)計開辟了全新的、廣闊的空間，運(yùn)用的元素不僅有告知性，而且是時尚的、好看的、有趣的。而且這類動效可以有效的運(yùn)用特定的品牌因素，來支持日常的品牌曝光率，加深用戶對logo和吉祥物的記憶和認(rèn)知~

Pull To Refresh by Kirill

GIF for Pull Down?—?Space Ship by Tamara

GIF for Pull Down?—?Hourglass by Sergey Valiukh

進(jìn)度動效

有些微交互是即時發(fā)生的，有些則需要一個過程?？傊?，優(yōu)秀的用戶體驗(yàn)應(yīng)該讓用戶知道他們接下來應(yīng)該干嘛了；所以，加載過程應(yīng)該清晰的展示給用戶，同時，這也是設(shè)計師展現(xiàn)創(chuàng)造力的大好舞臺。

和前面提到的一樣，標(biāo)準(zhǔn)的解決方案同時兼顧了娛樂性、趣味性、有趣的細(xì)節(jié)；同時也提升了品牌的影響和要素。在這種情況下，設(shè)計師需要分析核心用戶在此需要什么樣的動效，是需要一個加載條，還是要附加一些別的類似百分比的解釋數(shù)據(jù)。

Preloader by Kirill

Rubber Indicator by Valentyn Khenkin

Pull to refresh by Kirill

另外一點(diǎn)需要強(qiáng)調(diào)的是，不管用戶用的是什么類型的電子產(chǎn)品，他們真正需要的都是來自系統(tǒng)的即時的反饋。即便用戶需要等待一些時間，他也要清楚的知道這一點(diǎn)。這是所有類型的動效的基礎(chǔ)。動效最重要和最原始的目的是讓交互過程變得更清晰、輕松和輕快，在此之外，才談得上去設(shè)計一些所謂的“我X，這個dior”的效果。動效的基礎(chǔ)是實(shí)用性，而不是純粹的裝飾和娛樂。

因此，在之前的談到動效的帖子里，我們講解了一些微交互的動效的基本常識。動效應(yīng)該支持用戶，幫助他們，而且只存在在他們應(yīng)該存在的地方，真真切切的提升可用性，而不是分散用戶注意力和讓屏幕變得超負(fù)荷。

在微交互中運(yùn)用動效的要點(diǎn)：

·它不應(yīng)該給頁面加載徒增太重的負(fù)擔(dān)

·它應(yīng)該充分考慮目標(biāo)用戶可能使用的各種設(shè)備，以及可能出現(xiàn)的各種情況

·它不應(yīng)該讓那些專注頁面的用戶太過分心

·它應(yīng)該和網(wǎng)站或app的整體風(fēng)格相搭配，保證產(chǎn)品整體的和諧

Juicy Player by Valentyn Khenkin

為高效的微交互設(shè)計解決方案，設(shè)計師站在了設(shè)計、心理學(xué)、編程、（偶爾的）語言學(xué)和其他科學(xué)人文領(lǐng)域的十字路口（譯者忍不住冒泡：這個路口是有多少條路~）；通過對目標(biāo)用戶的分析，對概念/想法的測試，都讓微交互默默的打開了通往更高階的可用性的大門。當(dāng)設(shè)計師需要打造既愉悅又時尚的視覺設(shè)計時，要同時兼顧交互進(jìn)程的高效和自然，那就沒有比在頁面中巧妙的使用動效更棒呆的啦~