中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

一、什么是微交互

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

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

• 傳達反饋或行動的結果。
• 完成一項單獨的任務。
• 增強直接操縱感。
• 幫助用戶可視化其操作的結果并防止錯誤。

一個完整的微交互閉環流程通常由觸發、規則、反饋、循環和模式四部分構成。

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

二、交互設計與微交互的區別

交互設計又稱互動設計（英文Interaction Design, 縮寫 IxD 或者 IaD），是指“設計交互式數字產品、環境、系統和服務的活動”。除了數字領域，交互設計在非數字領域也得到應用，比如探索用戶和產品的交互方面。交互設計通常涵蓋以下幾個方面：設計、人機交互和軟件開發。交互設計在于定義人造物的行為方式（the “interaction”，即人工制品在特定場景下的反應方式）相關的界面。

——來源：維基百科

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

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

三、微交互的作用

微交互對于產品而言作用是非常大的，它可以用于功能性引導，例如：鼓勵用戶進行點贊、評論、轉發分享等，也可以用于各種類型的信息反饋，例如：操作后的即時反饋。同時，還能夠增加用戶與產品之間的互動，提升產品的用戶體驗。

根據「霍洛效應」，如果用戶喜歡產品的某個方面，可能會放大這種喜歡程度以至于對整個產品都會產生積極的態度，反之亦然。結合「霍洛效應」并通過恰到好處的細節設計，不僅能夠在產品設計時事半功倍，還能提升用戶滿意度。

3.1 顯示系統狀態

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

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

3.2 鼓勵用戶參與

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

作者：Jeremy Lefebvre

3.3 錯誤預防

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

3.3.1 可撤銷原則

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

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

3.3.2 防重原則

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

3.4 突出變化

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

作者：Jon Anto

3.5 可視化輸入

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

作者：Ayoub kada

3.6 界面關聯

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

作者：Alexander Kontsevoy

四、微交互動效

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

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

五、微交互動效設計原則

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

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

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

（1）用戶注意力引導

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

（2）動效目標

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

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

（3）出現頻率

需要明確交互動效在單次會話中出現的次數。

（4）觸發機制

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

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

作者：Aaron Iker

b. 用戶操作后間接觸發交互動畫，例如：當用戶向下瀏覽界面時，觸發頁面的內容加載動效。

作者：Saptarshi Prakash

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

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

6.1 響應時間

響應時間是指從用戶執行操作到出現反饋之間的時間間隔，不同的觸發機制，其響應時間的限制也存在差異。

a. 用戶操作直接觸發的反饋，理想情況下的響應時間應該控制在100毫秒以內。

b. 用戶操作間接觸發的反饋，響應時間可以在2秒以內，超過2秒用戶會覺得喪失了控制權，而在1秒左右的時間內，用戶會短暫進入心流狀態專注于獲取系統響應。

c. 如果反饋結果出現超過2秒，則需要設計加載動效，來告知用戶系統正在努力執行任務。

d. 如果反饋結果的時間在2～9秒范圍內，則需要使用循環加載動效，可以用趣味化的設計形式，來緩解用戶因為等待所產生的焦慮于不滿情緒。

e. 如果反饋結果的時間超過10秒時，則需要使用進度條形式的具有指示含義的加載樣式。因為它能夠給用戶帶來對等待時間的心里預期，加載速度的變化對用戶滿意度的影響非常大。如果進度是開始快最后慢，用戶會很抓狂。如果是開始慢而最后快，則用戶內心會非常興奮，因為這超出了用戶心理預期。

6.2 持續時間

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

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

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

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

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

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

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

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

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

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

七、常見的動效類型

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

7.1 線性變化

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

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

7.2 曲線變化

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

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

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

c. 加速曲線（Ease In） 多用于元素離開屏幕時使用，元素逐漸加速離開屏幕，整個持續時間要小于元素進入屏幕的時間。

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

八、微交互設計常用工具

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

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

8.1 Figma

這款工具能夠實現一些簡單的交互效果，能夠輕松的表達頁面之間的邏輯操作關系，對于產品和交互設計師來說是非常便捷的，并且云同步功能也不必在各種備份了。

8.2 After Effects

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

8.3 Principle

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

8.4 Protopie

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

8.5 Framer X

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

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

8.6 Origami Studio

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

Origami Studio相比于其他的原型設計軟件來說，有更豐富的接口和可控參數，能夠導出效果保存到手機上，可以隨時隨地進行效果演示。

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

九、總結

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

微交互能夠作為產品的功能性引導和各種類型的信息反饋，常常以各種形式穿插在產品的各個角落之中，比如：顯示系統狀態和界面跳轉之間的關聯銜接等。

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

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