微交互對于產(chǎn)品而言作用是很大的，能夠作為產(chǎn)品的功能性引導(dǎo)和各種類型的信息反饋，輔助用戶完成產(chǎn)品或單個(gè)任務(wù)的產(chǎn)品元素，以各種形式穿插其中。本文對微交互進(jìn)行了詳細(xì)的解析，帶你進(jìn)一步認(rèn)識微交互。

一、什么是微交互

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

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

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

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

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

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

交互設(shè)計(jì)又稱互動設(shè)計(jì)（英文Interaction Design, 縮寫 IxD 或者 IaD），是指“設(shè)計(jì)交互式數(shù)字產(chǎn)品、環(huán)境、系統(tǒng)和服務(wù)的活動”。除了數(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)的界面。

——來源：維基百科

換句話說交互設(shè)計(jì)就是人與人、機(jī)器、系統(tǒng)及環(huán)境等交互行為的外在表現(xiàn)的設(shè)計(jì)。交互設(shè)計(jì)師需要通過對用戶心理模型和用戶行為等分析，設(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)。

三、微交互的作用

微交互對于產(chǎn)品而言作用是非常大的，它可以用于功能性引導(dǎo)，例如：鼓勵(lì)用戶進(jìn)行點(diǎn)贊、評論、轉(zhuǎn)發(fā)分享等，也可以用于各種類型的信息反饋，例如：操作后的即時(shí)反饋。同時(shí)，還能夠增加用戶與產(chǎn)品之間的互動，提升產(chǎn)品的用戶體驗(yàn)。

根據(jù)「霍洛效應(yīng)」，如果用戶喜歡產(chǎn)品的某個(gè)方面，可能會放大這種喜歡程度以至于對整個(gè)產(chǎn)品都會產(chǎn)生積極的態(tài)度，反之亦然。結(jié)合「霍洛效應(yīng)」并通過恰到好處的細(xì)節(jié)設(shè)計(jì)，不僅能夠在產(chǎn)品設(shè)計(jì)時(shí)事半功倍，還能提升用戶滿意度。

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

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

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

3.2 鼓勵(lì)用戶參與

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

作者：Jeremy Lefebvre

3.3 錯(cuò)誤預(yù)防

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

3.3.1 可撤銷原則

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

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

3.3.2 防重原則

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

3.4 突出變化

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

作者：Jon Anto

3.5 可視化輸入

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

作者：Ayoub kada

3.6 界面關(guān)聯(lián)

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

作者：Alexander Kontsevoy

四、微交互動效

微交互動效屬于功能性動效，與聚焦于影視、游戲等領(lǐng)域具有娛樂屬性的體驗(yàn)動效不同，功能性動效具有清晰的邏輯目的，聚焦于幫助用戶理解當(dāng)前所處狀態(tài)和解決產(chǎn)品問題。動效的融入能夠讓產(chǎn)品設(shè)計(jì)更加人性化，許多微交互動效在實(shí)際的操作中并不會被用戶注意到，但如果缺少了它會讓用戶感受到明顯的缺失感。

動效常常作為各個(gè)交互環(huán)節(jié)之間的有效連接手段，讓整個(gè)產(chǎn)品的交互和流程變得更加完整和流暢。產(chǎn)品融入動效的目的是吸引用戶，但不能讓用戶分心，比如為整個(gè)產(chǎn)品首頁的元素添加動效，使全部元素都動起來，此時(shí)用戶要看哪里呢？這就會適得其反。而且也不要使用過于復(fù)雜或特殊的動畫效果，這些往往會給用戶帶來不好的產(chǎn)品體驗(yàn)。

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

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

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

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

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

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

（2）動效目標(biāo)

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

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

（3）出現(xiàn)頻率

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

（4）觸發(fā)機(jī)制

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

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

作者：Aaron Iker

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

作者：Saptarshi Prakash

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

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

6.1 響應(yīng)時(shí)間

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

a. 用戶操作直接觸發(fā)的反饋，理想情況下的響應(yīng)時(shí)間應(yīng)該控制在100毫秒以內(nèi)。

b. 用戶操作間接觸發(fā)的反饋，響應(yīng)時(shí)間可以在2秒以內(nèi)，超過2秒用戶會覺得喪失了控制權(quán)，而在1秒左右的時(shí)間內(nèi)，用戶會短暫進(jìn)入心流狀態(tài)專注于獲取系統(tǒng)響應(yīng)。

c. 如果反饋結(jié)果出現(xiàn)超過2秒，則需要設(shè)計(jì)加載動效，來告知用戶系統(tǒng)正在努力執(zhí)行任務(wù)。

d. 如果反饋結(jié)果的時(shí)間在2～9秒范圍內(nèi)，則需要使用循環(huán)加載動效，可以用趣味化的設(shè)計(jì)形式，來緩解用戶因?yàn)榈却a(chǎn)生的焦慮于不滿情緒。

e. 如果反饋結(jié)果的時(shí)間超過10秒時(shí)，則需要使用進(jìn)度條形式的具有指示含義的加載樣式。因?yàn)樗軌蚪o用戶帶來對等待時(shí)間的心里預(yù)期，加載速度的變化對用戶滿意度的影響非常大。如果進(jìn)度是開始快最后慢，用戶會很抓狂。如果是開始慢而最后快，則用戶內(nèi)心會非常興奮，因?yàn)檫@超出了用戶心理預(yù)期。

6.2 持續(xù)時(shí)間

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

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

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

a. 小元素的輕微變化動效，一般在200～300ms以內(nèi)。

b. 較大元素的復(fù)雜變化動效，可延長時(shí)間到400～500ms。

c. 運(yùn)動較快的動效更容易吸引用戶的注意力，同時(shí)也更節(jié)省時(shí)間。如果運(yùn)動元素在用戶視線范圍之外，為了達(dá)到吸引用戶注意的目的，可以使用在短時(shí)間內(nèi)讓元素產(chǎn)生較大變化的動畫效果，如變化范圍較大的元素位移動畫。如果運(yùn)動元素已經(jīng)位于用戶的視線范圍之內(nèi)，為了保證視覺的連續(xù)性，動畫效果只要完成過度即可結(jié)束，避免造成用戶注意力分散。

d. 運(yùn)動較慢的動效對用戶注意力的影響很弱，適用于非用戶直接觸發(fā)的場景。如果動效不是用戶直接觸發(fā)的，不希望用戶的注意力被轉(zhuǎn)移或分散，可以控制動效在長時(shí)間內(nèi)變化較小的動畫效果。

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

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

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

七、常見的動效類型

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

7.1 線性變化

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

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

7.2 曲線變化

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

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

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

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

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

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

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

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

8.1 Figma

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

8.2 After Effects

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

8.3 Principle

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

8.4 Protopie

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

8.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)站模板供大家熟悉使用，而且如果你對React代碼非常熟悉的話，對于網(wǎng)站的搭建就更加如虎添翼了，能夠?qū)崿F(xiàn)很多好玩且有趣的交互效果。

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

8.6 Origami Studio

Origami Studio是新一代的原型設(shè)計(jì)神器，可以將設(shè)計(jì)好的交互效果直接傳到移動端應(yīng)用Origami Live上，在移動設(shè)備上離線瀏覽，體驗(yàn)交互效果在真機(jī)上的真實(shí)體驗(yàn)，而且工具本身還提供了很多設(shè)備基礎(chǔ)功能的調(diào)用，例如：攝像頭、震動功能等等，可以做出逼真且豐富的原型交互效果。

Origami Studio相比于其他的原型設(shè)計(jì)軟件來說，有更豐富的接口和可控參數(shù)，能夠?qū)С鲂Ч４娴绞謾C(jī)上，可以隨時(shí)隨地進(jìn)行效果演示。

工具只是幫助實(shí)現(xiàn)想法的手段，創(chuàng)意思路才是最重要的，所以沒有必要對掌握多少設(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)銜接等。

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

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