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

一、什么是微交互

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

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

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

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

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

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

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

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

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

三、微交互的作用

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

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

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

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

2. 鼓勵(lì)用戶參與

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

作者：Jeremy Lefebvre

3. 錯(cuò)誤預(yù)防

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

① 可撤銷原則

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

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

② 防重原則

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

4. 突出變化

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

作者：Jon Anto

5. 可視化輸入

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

作者：Ayoub kada

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

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

作者：Alexander Kontsevoy

四、微交互動(dòng)效

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

五、微交互動(dòng)效設(shè)計(jì)原則

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

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

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

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

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

2. 動(dòng)效目標(biāo)

需要考慮動(dòng)效目標(biāo)是下面的哪一種：

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

3. 出現(xiàn)頻率

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

4. 觸發(fā)機(jī)制

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

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

作者：Aaron Iker

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

作者：Saptarshi Prakash

六、微交互動(dòng)效的時(shí)間問題

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

1. 響應(yīng)時(shí)間

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

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

2. 持續(xù)時(shí)間

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

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

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

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

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

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

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

七、常見的動(dòng)效類型

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

1. 線性變化

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

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

2. 曲線變化

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

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

減速曲線( Ease Out ) 多用于元素由屏幕外進(jìn)入屏幕時(shí)使用，元素以全速進(jìn)入屏幕然后逐漸緩慢減速到達(dá)指定目標(biāo)位置。

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

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

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

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

下面是對(duì)這些交互動(dòng)畫設(shè)計(jì)工具的介紹：

1. Figma

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

2. After Effects

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

3. Principle

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

4. Protopie

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

5. Framer X

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

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

6. Origami Studio

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

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

九、總結(jié)

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

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

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

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

作者：RainVision