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

本文微交互動效設計描繪的方向屬于功能性動效，適用于UI界面的交互動效設計。具有清晰的邏輯目的，著重幫助用戶理解和有效的度過當前所處的狀態。動效涵蓋范圍有入場/出場動效（enter & exit）、過渡動效（transition）、通知動效（notice）和加載動效（loading）。

Web、App中添加動效設計所遵循的12條原則

• 緩動（Easing）、偏移量和延遲（Offset & Delay）主要與時間相關。
• 父子關系（Parenting）用于闡述元素之間的關系。
• 變形（Transformation）、數值變化（Value Change）、遮罩（Masking）、覆蓋（Overlay）、生成（Cloning）多作用于加強元素自身的延續性。
• 視差（Parallax）多作用于表明元素的層級關系。
• 蒙層（Obscuration）、多維化（Dimensionality）、鏡頭平移與縮放（Dolly & Zoom）作用于表明元素與空間的關系。

1. 緩動（Easing）

當運動發生的時候，元素運動速率的變化符合用戶的預期。自然界之中是很少存在完全線性的運動的，沒有任何東西能夠完美的保持勻速運動，緩動效果能夠讓運動看起來更加接近自然，符合用戶的認知，達到用戶的預期。

例子：你手機里面幾乎所有動態效果都是緩動的，看起來是不是非常舒服和諧呢？

2. 偏移量和延遲（Offset & Delay）

利用偏移和延遲來錯開元素的運動時間，表明元素之間的層級與關系。設計師利用錯開運動時間的方法，讓信息或界面元素按照有所區別的秩序進退場，利用明顯的錯序運動暗示用戶信息與界面元素之間或許存在某些區別，或利用錯序的方法吸引用戶的注意。但一般情況設計師不應該使用太多的延時效果，因為譬如說網絡的加載本身就已經需要時間，所以延遲效果的使用最好只用于服務于技術。

例子：蘋果官網各商品詳情頁均有大量運用。

3. 父子關系（Parenting）

在用戶進行操作時，有父子關系的元素幫助用戶更好地理解它們之間的層級關系以及帶來更加有理可循的操作反饋。正如上面給出的這張動圖，位于下方的方塊的左右運動，而位于上方的方塊跟隨下方方塊進行左右運動并同時進行自己的縮放運動，他們之間構成了父子關系。說得簡單一點，父子關系就是子元素的某個屬性的值隨父元素的某個屬性參數的值按照一定的比例進行變化。

例子：Google Allo 按住發送按鈕向上滑動，發送內容字體變大。

4. 變形（Transformation）

利用變形來告知用戶元素的狀態或作用發生了改變。人們對于實物的變形是敏感的，合理的變形能夠清晰高效地將正確的信息以最高效、最令人愉悅的方式傳遞給用戶。注意，這里所說的變形并不一定要像上面那種動圖一樣動作那么大才算變形?；蛟S是顏色的變化，也有可能是角度的改變，這些都能達成我們想要的效果。

例子：知乎 Live 選擇贊助金額的動畫效果。

5. 數值變化（Value Change）

連續性的數值變化動態效果能讓用戶清晰地看見數值到底是在變多還是變少。關于這一點，我想多用兩張動圖呈現，大家可以看到，數值變化有連續性動態效果的一張是不是更能讓你知道數字是在變多還是變少？想象一下，假如在某款理財 App 里面，這個數值是你的錢的話，那么數量的增加與減少這個信息對于用戶來說就非常重要了。

例子：京東金融手機 App，“總資產”，及“白條”頁面的數值變化效果。

6. 遮罩（Masking）

遮罩型的動畫是在界面元素進場或者退場的時候創造連續性效果的一種選擇。這種類型的動效似乎在 Material Design 里面比較常見，所以沒有使用過原生安卓系統的伙伴們可能比較陌生。

例子：原生安卓系統（5.0 以上 7.0以下版本可見，7.0取消了菜單按鈕，以上劃操作代替。）點擊菜單按鈕呼出菜單的動畫效果。美圖秀秀手機 App 處于首頁的各個功能按鈕點擊后的轉場效果。

7. 覆蓋（Overlay）

覆蓋用于在扁平化（沒有厚度）設計的界面上闡明兩個相互獨立的元素的位置關系。在實際上沒有厚度、沒有縱深概念扁平化設計中，覆蓋動畫的使用能讓本來就非常有限的屏幕空間被更好的利用起來。

例子：微信橫劃刪除聊天記錄。

8. 蒙層（Obscuration）

蒙層與覆蓋非常相似，在沒有縱深概念的扁平化設計中表現縱深，它并不完全將處于下方的元素遮蓋住，而通常是通過高斯模糊或變暗的手段讓下方的元素保留一定的可視性。

例子：在 iOS 里面隨處可見的毛玻璃效果。

9. 生成（Cloning）

當元素被生產出來時，表達元素與元素之間的連續性的關系。這種動畫能夠非常清晰地表達因某個操作而產生的一個或數個事件發生以及它們之間的關系。

例子：蘋果的 Messages 發送信息的效果。

10. 視差（Parallax）

界面元素同時開始運動，但運動的效率不同，構成一種視差的效果。用戶在進行滾動操作的時候通過視差效果可以在扁平化的界面里面表現空間中個元素的位置及層級關系。這種效果還非常的美觀高端，能讓整個頁面看起來更加活潑一些。通過視差的特性，我能引導用戶去關注應該應該關注的地方，運動效率高的元素通常表達的是距離用戶更近，適合承載更加有使用性意義的重要信息，而運動效率較低的元素通常表達的是距離用戶較遠，而且或許沒有承載什么重要的信息。

例子：蘋果官網各商品詳情頁。

11. 多維化（Dimensionality）

將界扁平化的界面元素多維化從而表達空間中個元素的位置及層級關系。其實扁平并不符人類認知邏輯的（而符合人類認知邏輯是幾乎可以說是可用性的第一原則），所以人們在扁平化的界面里面下足了功夫來在沒有縱深和厚度的界面里表達縱深和厚度，這句話讀起來非常拗口，但實際上就是這樣的。多維化的使用比較少，因為添加縱深感有很多種手法（覆蓋、蒙層、陰影，etc.），而多維化的開發成本是比較高的。

例子：iBooks 的翻頁效果和 Flipboard 的翻頁效果，滴滴打車退出呼叫狀態的 Appbar 動畫。

12. 鏡頭平移與縮放（Dolly & Zoom）

鏡頭平移與縮放聽起來好像是一樣的東西，事實上確完全是兩碼事。鏡頭平移是拍攝的術語，被拍攝物保持靜止而鏡頭移動或鏡頭保持靜止而被攝物體進行遠離或接近鏡頭的前后移動，縮放是鏡頭與被攝物體在位置上保持靜止而被攝物自身進行縮放。鏡頭平移與縮放效果表明元素與空間之間的關系，也能表現出一種縱深感。

例子：iOS 的解鎖動畫是典型的鏡頭平移效果，而雙擊放大圖片操作的那個動畫是典型的縮放效果。

優秀的微動效，歸納成三個核心原則

克制有度：控制出現頻率和出現時長，不增加額外的操作，不干擾用戶和給予用戶足夠的理解時間。

清晰聚焦：符合邏輯，重點突出，給予用戶充足清晰的閱讀時間。

自然流暢：保持基本視覺的連續性，緩沖過渡，做到一氣呵成。

I Remember?— 一個有關回憶的網站，點開后給你耳目一新的瀏覽體驗。

Intro

結語

交互微動效以功能性為主，須遵循克制有度、清晰聚焦、自然流暢這三個核心設計原則。在設計前，思考希望如何影響用戶的注意力、動效的目標是什么、動效出現的頻率和觸發機制是怎樣的，在設計時選擇合適動效類型和持續時間并關注反饋的響應時間，做到有理有據、令人信服。

譯者：L_Lainey

自譯參考：https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc

本文由 @L_Lainey 翻譯發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自PEXELS，基于CC0協議