UI動效—細微交制作互，極致體驗

2021-01-29 點擊量：

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

說起UI/UX設(shè)計，微交互是成敗與否的關(guān)鍵要素之一，是小小細節(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)品要同時具備易用性、實用性、有吸引力等關(guān)鍵要素，精雕細琢的微交互正是達到以上要素的不二法門。

GIF?—?Portrait vs Landscape by Sergey Valiukh

微交互的本質(zhì)

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

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

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

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

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

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

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

GIF of the Tap Bar Concept by Sergey Valiukh

動起來的微交互

動起來的按鈕

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

iPad App Interactions by Sergey Valiukh