本文微交互動效設(shè)計描繪的方向?qū)儆诠δ苄詣有Вm用于UI界面的交互動效設(shè)計弧械。具有清晰的邏輯目的八酒，著重幫助用戶理解和有效的度過當(dāng)前所處的狀態(tài)。動效涵蓋范圍有入場/出場動效（enter & exit）刃唐、過渡動效（transition）羞迷、通知動效（notice）和加載動效（loading）。
Web画饥、App中添加動效設(shè)計所遵循的12條原則
緩動（Easing）衔瓮、偏移量和延遲（Offset & Delay）主要與時間相關(guān)。父子關(guān)系（Parenting）用于闡述元素之間的關(guān)系抖甘。變形（Transformation）热鞍、數(shù)值變化（Value Change）、遮罩（Masking）、覆蓋（Overlay）碍现、生成（Cloning）多作用于加強(qiáng)元素自身的延續(xù)性幅疼。視差（Parallax）多作用于表明元素的層級關(guān)系。蒙層（Obscuration）昼接、多維化（Dimensionality）爽篷、鏡頭平移與縮放（Dolly & Zoom）作用于表明元素與空間的關(guān)系。
1. 緩動（Easing）
當(dāng)運(yùn)動發(fā)生的時候慢睡，元素運(yùn)動速率的變化符合用戶的預(yù)期逐工。自然界之中是很少存在完全線性的運(yùn)動的，沒有任何東西能夠完美的保持勻速運(yùn)動漂辐，緩動效果能夠讓運(yùn)動看起來更加接近自然泪喊，符合用戶的認(rèn)知，達(dá)到用戶的預(yù)期髓涯。
例子：你手機(jī)里面幾乎所有動態(tài)效果都是緩動的袒啼，看起來是不是非常舒服和諧呢？
2. 偏移量和延遲（Offset & Delay）
利用偏移和延遲來錯開元素的運(yùn)動時間纬纪，表明元素之間的層級與關(guān)系蚓再。設(shè)計師利用錯開運(yùn)動時間的方法，讓信息或界面元素按照有所區(qū)別的秩序進(jìn)退場包各，利用明顯的錯序運(yùn)動暗示用戶信息與界面元素之間或許存在某些區(qū)別摘仅，或利用錯序的方法吸引用戶的注意。但一般情況設(shè)計師不應(yīng)該使用太多的延時效果问畅，因為譬如說網(wǎng)絡(luò)的加載本身就已經(jīng)需要時間娃属，所以延遲效果的使用最好只用于服務(wù)于技術(shù)。
例子：蘋果官網(wǎng)各商品詳情頁均有大量運(yùn)用护姆。
3. 父子關(guān)系（Parenting）
在用戶進(jìn)行操作時矾端，有父子關(guān)系的元素幫助用戶更好地理解它們之間的層級關(guān)系以及帶來更加有理可循的操作反饋。正如上面給出的這張動圖签则，位于下方的方塊的左右運(yùn)動须床，而位于上方的方塊跟隨下方方塊進(jìn)行左右運(yùn)動并同時進(jìn)行自己的縮放運(yùn)動，他們之間構(gòu)成了父子關(guān)系渐裂。說得簡單一點(diǎn)豺旬，父子關(guān)系就是子元素的某個屬性的值隨父元素的某個屬性參數(shù)的值按照一定的比例進(jìn)行變化。
例子：Google Allo 按住發(fā)送按鈕向上滑動柒凉，發(fā)送內(nèi)容字體變大族阅。
4. 變形（Transformation）
利用變形來告知用戶元素的狀態(tài)或作用發(fā)生了改變。人們對于實(shí)物的變形是敏感的膝捞，合理的變形能夠清晰高效地將正確的信息以最高效坦刀、最令人愉悅的方式傳遞給用戶。注意，這里所說的變形并不一定要像上面那種動圖一樣動作那么大才算變形鲤遥°逅拢或許是顏色的變化，也有可能是角度的改變盖奈，這些都能達(dá)成我們想要的效果混坞。
例子：知乎 Live 選擇贊助金額的動畫效果。
5. 數(shù)值變化（Value Change）
連續(xù)性的數(shù)值變化動態(tài)效果能讓用戶清晰地看見數(shù)值到底是在變多還是變少钢坦。關(guān)于這一點(diǎn)究孕，我想多用兩張動圖呈現(xiàn)，大家可以看到爹凹，數(shù)值變化有連續(xù)性動態(tài)效果的一張是不是更能讓你知道數(shù)字是在變多還是變少厨诸？想象一下，假如在某款理財 App 里面禾酱，這個數(shù)值是你的錢的話微酬，那么數(shù)量的增加與減少這個信息對于用戶來說就非常重要了。
例子：京東金融手機(jī) App颤陶，“總資產(chǎn)”得封，及“白條”頁面的數(shù)值變化效果。
6. 遮罩（Masking）
遮罩型的動畫是在界面元素進(jìn)場或者退場的時候創(chuàng)造連續(xù)性效果的一種選擇指郁。這種類型的動效似乎在 Material Design 里面比較常見，所以沒有使用過原生安卓系統(tǒng)的伙伴們可能比較陌生拷呆。
例子：原生安卓系統(tǒng)（5.0 以上 7.0以下版本可見闲坎，7.0取消了菜單按鈕，以上劃操作代替茬斧。）點(diǎn)擊菜單按鈕呼出菜單的動畫效果腰懂。美圖秀秀手機(jī) App 處于首頁的各個功能按鈕點(diǎn)擊后的轉(zhuǎn)場效果。
7. 覆蓋（Overlay）
覆蓋用于在扁平化（沒有厚度）設(shè)計的界面上闡明兩個相互獨(dú)立的元素的位置關(guān)系项秉。在實(shí)際上沒有厚度绣溜、沒有縱深概念扁平化設(shè)計中，覆蓋動畫的使用能讓本來就非常有限的屏幕空間被更好的利用起來娄蔼。
例子：微信橫劃刪除聊天記錄怖喻。
8. 蒙層（Obscuration）
蒙層與覆蓋非常相似，在沒有縱深概念的扁平化設(shè)計中表現(xiàn)縱深岁诉，它并不完全將處于下方的元素遮蓋住锚沸，而通常是通過高斯模糊或變暗的手段讓下方的元素保留一定的可視性。
例子：在 iOS 里面隨處可見的毛玻璃效果涕癣。
9. 生成（Cloning）
當(dāng)元素被生產(chǎn)出來時哗蜈，表達(dá)元素與元素之間的連續(xù)性的關(guān)系。這種動畫能夠非常清晰地表達(dá)因某個操作而產(chǎn)生的一個或數(shù)個事件發(fā)生以及它們之間的關(guān)系。
例子：蘋果的 Messages 發(fā)送信息的效果距潘。
10. 視差（Parallax）
界面元素同時開始運(yùn)動炼列，但運(yùn)動的效率不同，構(gòu)成一種視差的效果音比。用戶在進(jìn)行滾動操作的時候通過視差效果可以在扁平化的界面里面表現(xiàn)空間中個元素的位置及層級關(guān)系俭尖。這種效果還非常的美觀高端，能讓整個頁面看起來更加活潑一些硅确。通過視差的特性目溉，我能引導(dǎo)用戶去關(guān)注應(yīng)該應(yīng)該關(guān)注的地方，運(yùn)動效率高的元素通常表達(dá)的是距離用戶更近菱农，適合承載更加有使用性意義的重要信息缭付，而運(yùn)動效率較低的元素通常表達(dá)的是距離用戶較遠(yuǎn)，而且或許沒有承載什么重要的信息循未。
例子：蘋果官網(wǎng)各商品詳情頁陷猫。
11. 多維化（Dimensionality）
將界扁平化的界面元素多維化從而表達(dá)空間中個元素的位置及層級關(guān)系。其實(shí)扁平并不符人類認(rèn)知邏輯的（而符合人類認(rèn)知邏輯是幾乎可以說是可用性的第一原則）的妖，所以人們在扁平化的界面里面下足了功夫來在沒有縱深和厚度的界面里表達(dá)縱深和厚度绣檬，這句話讀起來非常拗口，但實(shí)際上就是這樣的嫂粟。多維化的使用比較少娇未，因為添加縱深感有很多種手法（覆蓋、蒙層星虹、陰影零抬，etc.），而多維化的開發(fā)成本是比較高的宽涌。
例子：iBooks 的翻頁效果和 Flipboard 的翻頁效果平夜，滴滴打車退出呼叫狀態(tài)的 Appbar 動畫。
12. 鏡頭平移與縮放（Dolly & Zoom）
鏡頭平移與縮放聽起來好像是一樣的東西卸亮，事實(shí)上確完全是兩碼事忽妒。鏡頭平移是拍攝的術(shù)語，被拍攝物保持靜止而鏡頭移動或鏡頭保持靜止而被攝物體進(jìn)行遠(yuǎn)離或接近鏡頭的前后移動兼贸，縮放是鏡頭與被攝物體在位置上保持靜止而被攝物自身進(jìn)行縮放段直。鏡頭平移與縮放效果表明元素與空間之間的關(guān)系，也能表現(xiàn)出一種縱深感寝受。
例子：iOS 的解鎖動畫是典型的鏡頭平移效果坷牛，而雙擊放大圖片操作的那個動畫是典型的縮放效果。
一.優(yōu)秀的微動效很澄，歸納成三個核心原則
克制有度：控制出現(xiàn)頻率和出現(xiàn)時長京闰，不增加額外的操作颜及，不干擾用戶和給予用戶足夠的理解時間。
清晰聚焦：符合邏輯蹂楣，重點(diǎn)突出俏站，給予用戶充足清晰的閱讀時間。
自然流暢：保持基本視覺的連續(xù)性痊土，緩沖過渡肄扎，做到一氣呵成。
I Remember?— 一個有關(guān)回憶的網(wǎng)站赁酝，點(diǎn)開后給你耳目一新的瀏覽體驗犯祠。
二. 響應(yīng)時間與持續(xù)時間
時間是動效核心元素，設(shè)計動效時需要考慮兩類時間 —— 響應(yīng)時間與持續(xù)時長酌呆。
1. 響應(yīng)時間
響應(yīng)時間指從用戶執(zhí)行操作到反饋出現(xiàn)的間隔時間衡载。觸發(fā)機(jī)制不同，響應(yīng)時間的限制也不同：
對于由用戶操作 直接觸發(fā) 的反饋隙袁，理想的響應(yīng)時間應(yīng)該控制在 100毫秒內(nèi)痰娱。
對于由用戶操作 間接觸發(fā) 的反饋，響應(yīng)時長可允許達(dá)到 1秒左右菩收，不可超過2秒無反饋梨睁。
當(dāng) 超過2秒 才能獲取反饋結(jié)果時，須設(shè)計加載動效（loading）娜饵。
當(dāng)反饋時間為 2-9秒 時垫挨，可使用循環(huán)的加載樣式（如常見的菊花轉(zhuǎn)）状蜗。
當(dāng)反饋時間 超過10秒 時肢专，須使用帶有進(jìn)度指示的加載樣式（如已加載了60%诀蓉，還剩30秒）衔统。
2. 持續(xù)時間
交互微動效的持續(xù)時間不宜過長举反，以避免浪費(fèi)用戶時間蹂匹，影響用戶的閱讀和操作效率岛都，其持續(xù)時間一般不超過500毫秒 ( 加載動效除外 )风瘦。
若你希望用戶能清晰地捕捉到元素的漸進(jìn)變化队魏，持續(xù)時須大于200毫秒；若你不介意用戶認(rèn)為元素的改變是瞬間的万搔，希望盡量節(jié)省用戶時間胡桨，持續(xù)時間也可設(shè)計在 200毫秒以內(nèi)（如hover到按鈕上顏色瞬間發(fā)生微妙改變）。
具體的持續(xù)時間的取值瞬雹，一方面會受到元素的大小昧谊、動效的復(fù)雜程度影響；另一方面也會受到動效的目標(biāo) 和 運(yùn)行動效的設(shè)備的影響：
小元素的輕微變化效果（如漸隱漸現(xiàn)酗捌、大小變化等小范圍變化）呢诬，一般在 200~300毫秒以內(nèi)涌哲。
較大元素的復(fù)雜變化效果（如包含大范圍緩動位移），可長達(dá) 400-500毫秒尚镰。
較快的動效更容易吸引用戶注意力阀圾，也更節(jié)省時間。若動效元素在用戶的視線之外狗唉，為了吸引用戶注意并采取行動初烘，可使用在短時間內(nèi)變化較大的動效（如發(fā)生位置移動和速率改變）；若動效元素已經(jīng)在用戶的注意范圍內(nèi)分俯，為了保持視覺連續(xù)性肾筐，完成必要的過渡（如漸隱漸現(xiàn)）后即可結(jié)束。
較慢的動效較少分散用戶注意力缸剪，更適用于非用戶直接觸發(fā)的場景吗铐。若動效不是用戶直接觸發(fā)的，不希望用戶注意力被轉(zhuǎn)移橄登，可使用在長時間內(nèi)變化較小的動效（一般不會出現(xiàn)位置移動）抓歼。
不同設(shè)備的屏幕尺寸和特性不同，理想的持續(xù)時間也不一樣拢锹。一般來說谣妻，對于移動設(shè)備而言，屏幕越大往往動效的位移也越大卒稳，因此持續(xù)時間也應(yīng)該越長（可穿戴設(shè)備上的持續(xù)時間大約比手機(jī)上快30%蹋半，平板電腦上的持續(xù)時間大約比手機(jī)上慢30%）。而臺式設(shè)備的動效設(shè)計往往比移動設(shè)備中的動效設(shè)計更簡單快速（150毫秒~200毫秒間較為常見）充坑，這是因為復(fù)雜的動效在臺式設(shè)備場景下容易出現(xiàn)掉幀减江、卡頓的情況，瞬時響應(yīng)的動效能避免這一點(diǎn)捻爷。
出場動效一般比入場動效更快 ( 如當(dāng)入場動效設(shè)置為230毫秒時辈灼，出場動效可設(shè)置為200毫秒) 這是因為元素入場時用戶一般需要閱讀并處理新出現(xiàn)的信息，而元素出場時通常表明用戶在此元素上的任務(wù)已完成也榄，不需要再關(guān)注了巡莹，快速出場能夠節(jié)省用戶更多時間。
三. 常用動效類型及應(yīng)用參考
在瀏覽器中最常用甜紫、最容易實(shí)現(xiàn)且能保障性能的是 位置（position）降宅、大小（scale）囚霸、旋轉(zhuǎn)（rotation）腰根、透明度（opacity） 這四種屬性的變化，當(dāng)變化這四種屬性的任意一種或幾種就能達(dá)到交互微動效的目的時拓型，無須再加入其它不必要的屬性额嘿，以免影響動效流暢度瘸恼。
屬性的變化一般又分為 線性（liner）變化 和 曲線（curves）變化兩種。
1. ?線性變化
線性變化具有 勻速岩睁、驟停 這兩個特征钞脂，一般適用于與物理屬性無關(guān)的過渡動效（如透明度屬性的變化，包含漸隱漸現(xiàn)或顏色間的切換）捕儒，或有規(guī)律的加載動效（如均勻的循環(huán)冰啃、數(shù)值變化或進(jìn)度變化）。在與物理參數(shù)有關(guān)的變化中（如位置變化）刘莹，盡量避免使用線性變化阎毅，否則很容易給人帶來動效僵硬、不自然的感覺点弯。
2. ?曲線變化
曲線包含多種類型扇调，在交互微動效設(shè)計中，緩動曲線（easing）的應(yīng)用范圍最廣抢肛、效果最自然狼钮、對用戶的干擾也較小，多用于與物理屬性相關(guān)的屬性變化中捡絮，常用場景如下：
結(jié)語
交互微動效以功能性為主熬芜，須遵循克制有度、清晰聚焦福稳、自然流暢這三個核心設(shè)計原則涎拉。在設(shè)計前，思考希望如何影響用戶的注意力的圆、動效的目標(biāo)是什么鼓拧、動效出現(xiàn)的頻率和觸發(fā)機(jī)制是怎樣的，在設(shè)計時選擇合適動效類型和持續(xù)時間并關(guān)注反饋的響應(yīng)時間越妈，做到有理有據(jù)季俩、令人信服。
自譯參考：https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
