本文從微交互的定義、與交互設(shè)計的區(qū)別、作用、動效設(shè)計、常見工具等9個章節(jié)，幫你從零開始掌握微交互的知識點。

一、什么是微交互

微交互是聚焦于完成單個任務(wù)或單個事件，輔助用戶專注于完成某個單獨任務(wù)的產(chǎn)品元素。這些元素遍布于整個 APP 的各個角落。微交互是觸發(fā)-反饋組，觸發(fā)功能元素后通過系統(tǒng)狀態(tài)的改變做出有針對性的系統(tǒng)響應(yīng)，并通過用戶界面的變化向用戶傳達相關(guān)信息。

丹·薩弗在《微交互》一書中有這樣一段描述，這些微小的細節(jié)通常具有以下基本功能：

1. 傳達反饋或行動的結(jié)果。
2. 完成一項單獨的任務(wù)。
3. 增強直接操縱感。
4. 幫助用戶可視化其操作的結(jié)果并防止錯誤。

一個完整的微交互閉環(huán)流程通常由觸發(fā)、規(guī)則、反饋、循環(huán)和模式四部分構(gòu)成。

微交互的觸發(fā)可以是用戶觸發(fā)也可以是系統(tǒng)自動啟動的。用戶觸發(fā)的微交互一般是手勢操作或語音交互等用戶主動發(fā)起的動作行為才能觸發(fā)，系統(tǒng)觸發(fā)的微交互只有滿足系統(tǒng)設(shè)定的條件時才會觸發(fā)。規(guī)則則是當用戶或系統(tǒng)觸發(fā)之后會產(chǎn)生什么事情。反饋是讓用戶知道發(fā)生了什么，并做出選擇。而循環(huán)和模式則是決定在什么情況下微交互會再次出現(xiàn)。

二、交互設(shè)計與微交互的區(qū)別

交互設(shè)計又稱互動設(shè)計（英文 Interaction Design, 縮寫 IxD 或者 IaD），是指"設(shè)計交互式數(shù)字產(chǎn)品、環(huán)境、系統(tǒng)和服務(wù)的活動"。除了數(shù)字領(lǐng)域，交互設(shè)計在非數(shù)字領(lǐng)域也得到應(yīng)用，比如探索用戶和產(chǎn)品的交互方面。交互設(shè)計通常涵蓋以下幾個方面：設(shè)計、人機交互和軟件開發(fā)。交互設(shè)計在于定義人造物的行為方式（the "interaction",即人工制品在特定場景下的反應(yīng)方式）相關(guān)的界面?！獊碓矗壕S基百科

換句話說交互設(shè)計就是人與人、機器、系統(tǒng)及環(huán)境等交互行為的外在表現(xiàn)的設(shè)計。交互設(shè)計師需要通過對用戶心理模型和用戶行為等分析，設(shè)計出符合用戶認知模型的用戶操作流程和功能框架，讓用戶能夠流暢的使用產(chǎn)品。而微交互則是聚焦于單個任務(wù)或單個事件進行設(shè)計，是產(chǎn)品功能體驗的提升。目的是讓用戶在使用產(chǎn)品的同時產(chǎn)生愉悅和驚喜，提升產(chǎn)品體驗。

無論是交互還是微交互，它們并不是功能，而是需要依附于某個功能或者場景下存在的，能夠清晰的表達用戶在使用產(chǎn)品的前中后的各種狀態(tài)以及反饋。讓用戶在毫無察覺的情況下順利完成產(chǎn)品功能操作，達成用戶目標。

三、微交互的作用

微交互對于產(chǎn)品而言作用是非常大的，它可以用于功能性引導(dǎo)，例如：鼓勵用戶進行點贊、評論、轉(zhuǎn)發(fā)分享等，也可以用于各種類型的信息反饋，例如：操作后的即時反饋。同時，還能夠增加用戶與產(chǎn)品之間的互動，提升產(chǎn)品的用戶體驗。根據(jù)「霍洛效應(yīng)」，如果用戶喜歡產(chǎn)品的某個方面，可能會放大這種喜歡程度以至于對整個產(chǎn)品都會產(chǎn)生積極的態(tài)度，反之亦然。結(jié)合「霍洛效應(yīng)」并通過恰到好處的細節(jié)設(shè)計，不僅能夠在產(chǎn)品設(shè)計時事半功倍，還能提升用戶滿意度。

1. 顯示系統(tǒng)狀態(tài)

微交互的靈活性讓它能夠穿插在產(chǎn)品的各個角落，最為常見的就是"顯示系統(tǒng)狀態(tài)"，這與"尼爾森可用性法則"遙相呼應(yīng)，讓用戶了解當前系統(tǒng)所處狀態(tài)。下面來看下靜音操作的例子感受一下：

很顯然顯示系統(tǒng)狀態(tài)的界面會讓你感覺更加舒服，這就是微交互在產(chǎn)品設(shè)計中的作用之一，讓用戶了解系統(tǒng)當前狀態(tài)。通過對用戶傳達透明的系統(tǒng)運行狀態(tài)，讓用戶感受到強烈的參與感。

2. 鼓勵用戶參與

微交互具有很強的可互動性，能夠鼓勵用戶參與到實際的交互中去，從而推動用戶與產(chǎn)品間的互動。在產(chǎn)品中結(jié)合符合用戶群體的微交互動畫，能夠在用戶體驗中帶來同理心。但要注意考慮交互動畫的"長久性"問題，要能夠保證它被眾多次使用后依舊受人喜愛。

作者：Jeremy Lefebvre

3. 錯誤預(yù)防

錯誤預(yù)防也就是"尼爾森十大可用性法則"中的防錯原則，聚焦于消除容易出錯的情況并且提供二次確認操作。微交互的作用是將反饋傳達給用戶，并通過可撤銷原則和防重原則提供給用戶良好的用戶體驗。

① 可撤銷原則

在使用產(chǎn)品的過程中，誤操作是在所難免的，所以產(chǎn)品應(yīng)該讓用戶容易撤銷誤操作，這樣用戶就不需要花費過多的精力去解決他們一開始本不想做的事。微交互是可撤銷的最佳方式，因為它能夠直觀的告知用戶系統(tǒng)狀態(tài)發(fā)生了哪些更改。

例如使用 APP 點外賣，我們的選擇可能存在很多不確定性，每一個商品被選擇后會有一個添加到購物車的引導(dǎo)動畫，引導(dǎo)用戶注意界面發(fā)生的潛在變化，告訴用戶選購的商品都存放在里面，當選購了很多商品后發(fā)現(xiàn)某些是不需要的，如果在選購列表中尋找到對應(yīng)商品再刪除操作上會有些繁瑣，此時，就可以打開購物車找到不需要的商品進行刪除。這種處理方式給用戶帶來了很大的便捷提升了產(chǎn)品體驗。

② 防重原則

對于防止重復(fù)操作，應(yīng)用場景最多的無疑是表單信息提交了。當面對表單中大量的要填寫的信息時，如果填寫完畢提交后才告知哪些信息輸入有誤，這種體驗簡直太無語了，為了避免此種情況的發(fā)生，在表單填寫信息時融入微交互的防錯反饋，就能很好的解決問題，當用戶輸入錯誤信息時，例如輸入格式有誤、非需要信息等內(nèi)容時，會及時收到錯誤提示的反饋，讓用戶及時發(fā)現(xiàn)問題并處理問題，以此讓用戶得到良好的功能體驗。

4. 突出變化

在一些使用場景中，必須顯示系統(tǒng)通知以確保能夠被用戶注意到。此時可以利用微交互動畫，來獲得用戶的注意力。但在設(shè)計微交互動畫時要注意不能過分復(fù)雜，微交互動畫應(yīng)該是小而簡單的，即達到了吸引用戶注意力的目的，又不會過度影響用戶對產(chǎn)品的正常使用。

作者：Jon Anto

5. 可視化輸入

用戶在使用產(chǎn)品的過程中，經(jīng)常會遇到信息輸入的場景，往往這些操作步驟都是簡單且枯燥的，為了能夠提升輸入操作的整體體驗，可以結(jié)合微交互動畫對信息的輸入進行處理與反饋。通過微交互的融入不僅能夠讓內(nèi)容信息層次分明，還能夠幫助用戶達成目標。整個過程中用戶主觀感受會更加舒服。

作者：Ayoub kada

6. 界面關(guān)聯(lián)

可以使用相同元素來加強連貫操作之間的連貫性，達到加強操作體驗流暢度和減少用戶流失的目的。相同元素可以是前后頁面之間的共有元素，比如一個圖片或者一個單詞等，也可以是同一個頁面中具有操作邏輯關(guān)系的兩個元素。

作者：Alexander Kontsevoy

四、微交互動效

微交互動效屬于功能性動效，與聚焦于影視、游戲等領(lǐng)域具有娛樂屬性的體驗動效不同，功能性動效具有清晰的邏輯目的，聚焦于幫助用戶理解當前所處狀態(tài)和解決產(chǎn)品問題。動效的融入能夠讓產(chǎn)品設(shè)計更加人性化，許多微交互動效在實際的操作中并不會被用戶注意到，但如果缺少了它會讓用戶感受到明顯的缺失感。動效常常作為各個交互環(huán)節(jié)之間的有效連接手段，讓整個產(chǎn)品的交互和流程變得更加完整和流暢。產(chǎn)品融入動效的目的是吸引用戶，但不能讓用戶分心，比如為整個產(chǎn)品首頁的元素添加動效，使全部元素都動起來，此時用戶要看哪里呢？這就會適得其反。而且也不要使用過于復(fù)雜或特殊的動畫效果，這些往往會給用戶帶來不好的產(chǎn)品體驗。

五、微交互動效設(shè)計原則

一個優(yōu)秀的微交互動效，在設(shè)計上必須是克制的并且有清晰的任務(wù)目標還要自然流暢，在設(shè)計微交互動效時應(yīng)該遵循以下三個核心原則：

1. 克制有度：控制動效的持續(xù)時間與出現(xiàn)頻率，確保不會增加額外的操作成本，不干擾用戶對產(chǎn)品的正常使用。
2. 清晰聚焦：重點突出且符合邏輯，并給予用戶充足的查看時間。
3. 自然流暢：保證視覺的連續(xù)性，要做到不卡、不閃、不跳。

為了保證動效有清晰的用途并能夠完成目標，在設(shè)計時需要注意以下幾方面的問題：

1. 用戶注意力引導(dǎo)

設(shè)計時要考慮你想通過動效將用戶的注意力吸引到產(chǎn)品的什么地方。

2. 動效目標

需要考慮動效目標是下面的哪一種：

1. 使用動效來吸引用戶注意時，需要考慮是否需要讓用戶一下子就能注意到動效變化并立即采取行動。
2. 使用特定元素在不同狀態(tài)間轉(zhuǎn)換時，要保持視覺的連續(xù)性。
3. 使用動效來表明已經(jīng)處于用戶注意力范圍內(nèi)的不同元素之間的層級關(guān)系是怎么樣的。

3. 出現(xiàn)頻率

需要明確交互動效在單次會話中出現(xiàn)的次數(shù)。

4. 觸發(fā)機制

觸發(fā)機制分為 2 種用戶直接出發(fā)和間接出發(fā)，需要明確觸發(fā)機制是哪一種：

用戶操作后直接觸發(fā)交互動畫，例如：Hover 事件觸發(fā)了按鈕的動畫效果

作者：Aaron Iker

用戶操作后間接觸發(fā)交互動畫，例如：當用戶向下瀏覽界面時，觸發(fā)頁面的內(nèi)容加載動效。

作者：Saptarshi Prakash

六、微交互動效的時間問題

動效是服務(wù)于產(chǎn)品的，所以動效的好壞對用戶體驗有著至關(guān)重要的影響。動效設(shè)計不能以自嗨的角度進行設(shè)計，需要遵循一定的設(shè)計原則和相關(guān)約束，因為你所設(shè)計的效果能否最終落地還需要靠開發(fā)人員的開發(fā)。在動效設(shè)計中時間是其非常重要的設(shè)計核心，在設(shè)計動效時需要考慮 2 種時間類型，一種是響應(yīng)時間另一種是持續(xù)時間。

1. 響應(yīng)時間

響應(yīng)時間是指從用戶執(zhí)行操作到出現(xiàn)反饋之間的時間間隔，不同的觸發(fā)機制，其響應(yīng)時間的限制也存在差異。

1. 用戶操作直接觸發(fā)的反饋，理想情況下的響應(yīng)時間應(yīng)該控制在 100 毫秒以內(nèi)。
2. 用戶操作間接觸發(fā)的反饋，響應(yīng)時間可以在 2 秒以內(nèi)，超過 2 秒用戶會覺得喪失了控制權(quán)，而在 1 秒左右的時間內(nèi)，用戶會短暫進入心流狀態(tài)專注于獲取系統(tǒng)響應(yīng)。
3. 如果反饋結(jié)果出現(xiàn)超過 2 秒，則需要設(shè)計加載動效，來告知用戶系統(tǒng)正在努力執(zhí)行任務(wù)。
4. 如果反饋結(jié)果的時間在 2～9 秒范圍內(nèi)，則需要使用循環(huán)加載動效，可以用趣味化的設(shè)計形式，來緩解用戶因為等待所產(chǎn)生的焦慮于不滿情緒。
5. 如果反饋結(jié)果的時間超過 10 秒時，則需要使用進度條形式的具有指示含義的加載樣式。因為它能夠給用戶帶來對等待時間的心里預(yù)期，加載速度的變化對用戶滿意度的影響非常大。如果進度是開始快最后慢，用戶會很抓狂。如果是開始慢而最后快，則用戶內(nèi)心會非常興奮，因為這超出了用戶心理預(yù)期。

2. 持續(xù)時間

微交互動效的持續(xù)時間不易過長，以免占用用戶過多的時間，從而影響用戶閱讀和操作的效率，除了加載動效以外其他類型動效的持續(xù)時間要控制在 500ms 以內(nèi)。如果希望用戶能夠清晰的捕捉到元素的變化過程，持續(xù)時間需要大于 200ms；如果覺得元素的瞬間變化用戶也是能夠接受的，那么持續(xù)時間可以控制在 200ms 以內(nèi)。

例如：鼠標的 Hover 事件，動效幾乎是瞬間發(fā)生的，用戶不會感覺奇怪反而會覺得系統(tǒng)響應(yīng)是極快的。

微交互動效的具體持續(xù)時間，不僅受到元素自身的大小和動效復(fù)雜程度的影響，還受動效目標和運行動效設(shè)備的影響。因為不同的設(shè)備之間存在性能差異，同樣的動畫效果，在性能好的設(shè)備上能夠完美流暢的運行，而在性能較差的設(shè)備上卻會出現(xiàn)卡頓的情況，自然持續(xù)時間會變長。

1. 小元素的輕微變化動效，一般在 200～300ms 以內(nèi)。
2. 較大元素的復(fù)雜變化動效，可延長時間到 400～500ms。
3. 運動較快的動效更容易吸引用戶的注意力，同時也更節(jié)省時間。如果運動元素在用戶視線范圍之外，為了達到吸引用戶注意的目的，可以使用在短時間內(nèi)讓元素產(chǎn)生較大變化的動畫效果，如變化范圍較大的元素位移動畫。如果運動元素已經(jīng)位于用戶的視線范圍之內(nèi)，為了保證視覺的連續(xù)性，動畫效果只要完成過度即可結(jié)束，避免造成用戶注意力分散。
4. 運動較慢的動效對用戶注意力的影響很弱，適用于非用戶直接觸發(fā)的場景。如果動效不是用戶直接觸發(fā)的，不希望用戶的注意力被轉(zhuǎn)移或分散，可以控制動效在長時間內(nèi)變化較小的動畫效果。

對于不同的設(shè)備而言，動效的持續(xù)時間也存在不同，因為不同設(shè)備的屏幕尺寸及性能都存在差異，所以理想的持續(xù)時間也不相同。一般移動設(shè)備的屏幕越大往往動效的移動距離也就越大，因此持續(xù)時間也應(yīng)該越長。在可穿戴設(shè)備上的動效持續(xù)時間比手機上快大約 30%，平板電腦上的動效持續(xù)時間比手機慢大約 30%。

而對于臺式設(shè)備而言，動效的設(shè)計比移動設(shè)備更為簡單快速，常見持續(xù)時間為 150～200ms，因為在臺式設(shè)備上如果動效過于復(fù)雜容易出現(xiàn)卡頓和掉幀的情況，快速響應(yīng)則能很好的避免這一問題。

動效的出場時間要比入場時間更短，因為動效在入場時需要讓用戶獲取動效所要傳達的信息，所以應(yīng)當慢一些，但動效出場時則表明用戶此時已經(jīng)完成任務(wù)且不需要該動效元素了，所以應(yīng)該快速出場來節(jié)省用戶時間。

七、常見的動效類型

在微交互動效的設(shè)計中如果位置、縮放、旋轉(zhuǎn)以及透明度等四大基礎(chǔ)屬性能夠滿足目標需求時，就不必再加入其他的屬性了，一方面可能會影響動效在設(shè)備上的流暢度，另一方面也可能會增加開發(fā)難度和包體積的大小。為了讓動效在加速和減速的運動過程中更加自然和諧，需要對他們的運動節(jié)奏進行調(diào)整，也就是曲線調(diào)節(jié)。屬性的變化分為線性變化和曲線變化。

1. 線性變化

線性變化的屬性具有勻速和驟停的特征，常用于與物理屬性無關(guān)的過渡動效或者速度恒定的循環(huán)動效。線性變化常常會給人帶來生硬不自然的感覺，所以不要將它應(yīng)用在與物理屬性有關(guān)的動效中。

例如：小球鐘擺的運動，如果用線性變化，那么整體的運動節(jié)奏會顯得非常詭異，所以與物理屬性有關(guān)運動需要使用曲線變化，讓整體運動更有節(jié)奏感。

2. 曲線變化

曲線包含多種類型，而在微交互動效設(shè)計中緩動曲線是應(yīng)用最為廣泛的，效果也最為自然。緩動曲線分為標準曲線、減速曲線、加速曲線和夏普曲線。

標準曲線( Ease In Out ) 是最為常見的緩動曲線，運動元素在運動初期快速加速運動，然后緩慢減速。常用于元素從一個位置移動到另一個位置。例如：元素進入或離開屏幕時，導(dǎo)致屏幕上其他元素產(chǎn)生位移時建議使用。

減速曲線( Ease Out ) 多用于元素由屏幕外進入屏幕時使用，元素以全速進入屏幕然后逐漸緩慢減速到達指定目標位置。

加速曲線(Ease In) 多用于元素離開屏幕時使用，元素逐漸加速離開屏幕，整個持續(xù)時間要小于元素進入屏幕的時間。

夏普曲線：夏普曲線與標準曲線類似，也稱 Ease In Out，元素的加速和減速變化較快，主要用在已有元素離開屏幕后在次返回的情況。

八、微交互設(shè)計常用工具

目前設(shè)計微交互動效的工具有很多，下面羅列一些作為設(shè)計師能夠上手使用的工具：Framer X、Principle、AE、Origami Studio、Protopie、Figma 等等。至于哪一款工具好用并沒有一個相對的評判標準，選擇也只是就個人的需要和難易程度而言的，如果你熟悉代碼推薦使用 Framer X，可控性非常高并且能夠真機體驗實際效果，如果追求簡單易上手那就可以選擇 Principle，一款簡單而又能出效果的交互制作工具，如果想要制作充滿細節(jié)的交互動畫可以選擇使用 After Effects。

下面是對這些交互動畫設(shè)計工具的介紹：

1. Figma

這款工具能夠?qū)崿F(xiàn)一些簡單的交互效果，能夠輕松的表達頁面之間的邏輯操作關(guān)系，對于產(chǎn)品和交互設(shè)計師來說是非常便捷的，并且云同步功能也不必在各種備份了。

2. After Effects

這款工具對于設(shè)計來講可能都不會陌生，通過 AE 能夠制作出很多充滿細節(jié)的交互效果與動畫作品，就算基礎(chǔ)的位置、旋轉(zhuǎn)、透明度與縮放屬性也能夠制作出眾多的動畫效果，軟件的高度可控性對設(shè)計人員的要求更高，最終效果如何全屏設(shè)計師的經(jīng)驗與軟件熟練度，使用 AE 制作交互效果更多的是需要耐心與創(chuàng)意。唯一不好的地方可能就是無法對效果進行真機體驗了。

3. Principle

一個輕量的交互動畫制作工具，簡單易上手被眾多設(shè)計師所青睞，但是這款工具只能在 Mac 電腦上使用，對于一些簡單交互效果，比如：縮放，位移和界面跳轉(zhuǎn)等等，能夠連接移動設(shè)備進行效果體驗。如果配合 AE 制作交互動畫，簡直是完美的組合，彌補了 AE 無法直接體驗效果的缺陷和 Principle 無法制作復(fù)雜效果的缺點。

4. Protopie

界面看起來有點類似 Principe 的一款工具，但功能相對 Princple 來說功能更加齊全，內(nèi)置了眾多的觸發(fā)動作和反應(yīng)動作足以滿足你想做的絕大部分交互效果，而且還支持移動設(shè)備傳感器，比如：陀螺儀、羅盤、聲音等等，通過傳感器的觸發(fā)實現(xiàn)視差效果、指南針和語音交互等動能效果，可以說是非常強大。

5. Framer X

利用 Framer 可以輕松搭建一個網(wǎng)站，無需輸入任何代碼而且還能夠?qū)崿F(xiàn)自適應(yīng)布局，目前已經(jīng)與 Figma 打通，通過插件可以輕松實現(xiàn)將 Figma 的文件導(dǎo)入 Framer 中來制作交互效果。目前有一些設(shè)計師已經(jīng)開源了部分網(wǎng)站模板供大家熟悉使用，而且如果你對 React 代碼非常熟悉的話，對于網(wǎng)站的搭建就更加如虎添翼了，能夠?qū)崿F(xiàn)很多好玩且有趣的交互效果。

作為設(shè)計師完全可以利用這個工具來搭建屬于自己的個人網(wǎng)站，不需要代碼知識一鍵發(fā)布上線，只不過訪問速度可能有些慢，但效果還是非常不錯的，對于找工作來講是非常有幫助的。

6. Origami Studio

Origami Studio 是新一代的原型設(shè)計神器，可以將設(shè)計好的交互效果直接傳到移動端應(yīng)用 Origami Live 上，在移動設(shè)備上離線瀏覽，體驗交互效果在真機上的真實體驗，而且工具本身還提供了很多設(shè)備基礎(chǔ)功能的調(diào)用，例如：攝像頭、震動功能等等，可以做出逼真且豐富的原型交互效果。Origami Studio 相比于其他的原型設(shè)計軟件來說，有更豐富的接口和可控參數(shù)，能夠?qū)С鲂Ч４娴绞謾C上，可以隨時隨地進行效果演示。

工具只是幫助實現(xiàn)想法的手段，創(chuàng)意思路才是最重要的，所以沒有必要對掌握多少設(shè)計工具充滿執(zhí)念。不要作設(shè)計中的萬金油，要做領(lǐng)域深耕的獨行俠。

九、總結(jié)

微交互是聚焦于完成單個任務(wù)或單個事件，輔助用戶專注于完成某個單獨任務(wù)的產(chǎn)品元素。微交互與交互設(shè)計是存在區(qū)別的，交互注重產(chǎn)品功能框架和用戶操作流程，而微交互的目的則是讓用戶在使用產(chǎn)品的同時產(chǎn)生愉悅和驚喜，提升產(chǎn)品體驗。

微交互能夠作為產(chǎn)品的功能性引導(dǎo)和各種類型的信息反饋，常常以各種形式穿插在產(chǎn)品的各個角落之中，比如：顯示系統(tǒng)狀態(tài)和界面跳轉(zhuǎn)之間的關(guān)聯(lián)銜接等。

微交互動效應(yīng)該遵循克制有度、清晰聚焦、自然流暢這三個設(shè)計原則，除此之外還要注意動效的目標和出現(xiàn)頻率與觸發(fā)機制等問題，讓動效有清晰的用途并能夠完成預(yù)期目標。關(guān)于微交互動效的響應(yīng)時間與持續(xù)時間，需要根據(jù)用戶的觸發(fā)類型、反饋結(jié)果的呈現(xiàn)時間以及操作設(shè)備的類型做出綜合性的判斷，選取符合用戶行為習慣的最佳時間。在動效的設(shè)計當中要注意屬性變化的曲線類型選擇，不同的曲線類型都會對應(yīng)不同的效果感受。

關(guān)于微交互動效制作工具的選擇方面因人而異，每個工具都有屬于自己的優(yōu)勢，很多時候都是多個工具協(xié)作使用來完成一個效果。在工作當中我們想要的只是個結(jié)果，置于是用什么工具完成的其實并不重要。

作者：RainVision