在用戶界面中，動效不僅僅是一種視覺裝飾，而是一種強大的力量，它可增強產品參與度并擴展設計交流的范圍。
本文給大家介紹了十二項最基本的動效設計原理，這些都適合用于UX/UI設計項目中，是非常有用的運動原理，建議收藏反復食用。
原理一：緩動 Easing
緩動效果模擬了現實世界中對象隨時間加速或減速的方式，它適用于所有運動的元素。自然界中沒有東西是從一點呈線性地移動到另一點。現實中，物體在移動時往往會加速或減速。我們的大腦習慣于期待這種運動，因此在做動畫時，應利用此規律。自然的運動會讓用戶對你的應用感覺更舒適，從而產生更好的總體體驗。
線性動畫
沒有任何速度上的變化的的動畫稱為線性動畫，如坐標圖所示，運動的曲線成直線狀態。這種動畫效果往往顯得很僵硬，不自然，讓用戶覺得不協調。一般來說，應避免線性運動。
緩出動畫
運動的開頭速度很快，結尾處逐漸減速的動畫稱為緩出動畫。運動曲線呈拋物線狀態，緩出動畫最適合界面里面的動效，快速的入場給人反應很快的感覺。
緩入動畫
和緩出相反，緩入動畫是開頭慢結尾快，這就像自然落下的球體一樣，速度越來越快。但是，從交互的角度來看，緩入可能讓人感覺有點不自然，因為結尾很突然；在現實中移動的物體往往是減速，而不是突然停止。緩入還有讓人感覺行動遲緩的不利效果，這會對網站或應用的響應速度給人的感覺產生負面影響。
緩入緩出動畫
把緩入和緩出曲線連接在一起，就是完整的緩入緩出動畫，它的運動過程可以想象一輛汽車從起步到停車的動作，可以實現比單純緩出更生動的效果。由于開頭慢、中間快和結尾慢，動畫將有更強的對比，會讓用戶感到愉悅。
因此，緩動原理實際上是使動畫不再那么尖銳或生硬的過程。
原理二：變形 Transformation
變形是由一個形態變成另一個形態，這種形變是動畫里最引人注目的。通過元素形態的轉變，告知用戶元素的狀態或作用發生了改變。
例如這個下載動畫，下載完成后變形為按鈕，其實是符合用戶預期的。這種無縫轉換，可以提高用戶的認知度，提
升了動畫的連貫性。
在動效中，利用擠壓變形原則能夠喚起用戶的主觀記憶。是剛性的還是柔軟的，通過物體運動的變形狀態就能很好的體現出來。
原理三：克隆 Cloning
當元素被克隆時，可表達出元素與元素之間的某種連續性。在此原理中，如何讓物體的出現和離開具有連續性、關系和過渡，是信息準確傳遞的關鍵。
例如這個發布按鈕，點擊它會創建多個新對象，引導注意力，非常清晰的表達了他們之間的關系。
還有這個運動健康頁面，在添加練習項目時，從主按鈕克隆生成一系列練習項目，選擇完成后原路返回。
原理四：覆蓋 Overlay
利用覆蓋原理能讓原本有限的空間得以延伸，用以顯示額外的可見元素，補償了用戶體驗中的單一統一視野或“客觀視圖”。覆蓋原理在UI設計中常用于列表橫滑，通過覆蓋，隱藏相關操作，以減少視覺上的干擾。
在某種程度上，作為設計師，“層”的概念是顯而易見的，不言而喻。我們用層來設計，層的概念被深深地內化了。但是，我們必須小心區分“制作”和“使用”的過程。
作為不斷參與“制作”過程的設計師，我們要非常熟悉我們正在設計的物體的所有部分（包括隱藏部分）。然而，作為用戶，那些不可見的部分是根據定義和實踐，在視覺和認知上隱藏的。
原理五：偏移和延遲 Offset & Delay
偏移和延遲原理是表明元素之間的層級與關系，在新元素入場時利用偏移和延遲讓信息或界面元素按照秩序進退場，定義對象關系和層次結構。
在上面的示例中，浮動操作按鈕 (FAB) 轉換為頭部背景。數據圖表在時間的延遲下依次出現，暗示用戶這里的信息與其他元素之間的區別，吸引用戶注意力。
原理六：遮罩 Masking
遮罩是決定元素變化的結果是什么，通過暫時使對象顯示和隱藏，以連續無縫的方式轉換，保持了敘事流程的效果。雖然對象本身保持不變，但因為它有了邊界和位置，這兩個因素決定了對象是什么。
例如這個轉動的咖啡杯，借助遮罩，通過改變logo的位置和吸管的朝向，造成杯子在自轉的假象。
在上面的例子中，音樂封面改變了邊界形狀和位置，但沒有改變內容。轉換發生在用戶執行操作后激活，是相當巧妙的技巧。
原理七：父子關系 Parenting
父子關系是將界面元素關聯起來的重要原則，創建出空間和時間層次關系。它最適合作為“實時”互動，例如拖動列表順序時，其他信息會同步跟上。
回想一下，很多元素屬性都可以創造這種聯動的繼承關系，例如不透明度、位置、旋轉、縮放、形狀、顏色等。
原理八：數值變化 Value Change
文本和數字的變化是如此普遍，以至于我們忽略了它們，而我們卻沒有給它們帶來區別和嚴謹來評估它們在支持可用性方面的作用。
數字和值表示現實中正在發生的事情，既可以發生在實時活動中，也可以發生在非實時活動中。它可能是時間、收入、速度、游戲得分等。當我們使用動態的數值變化時，它激活了一種“神經反饋”，用戶會覺得自己與這些數值有關聯的。如果這些值是靜態的，就感覺與現實的聯系會減少。
數值的變化在各類金融理財和日歷APP中經常出現，數據的動態表達和交流可能會對數據的價值產生影響；如上圖中的數值的動態變化，讓用戶感知到自己可能有能力影響到數據，提升了參與活動的意愿。
原理九：蒙層 Obscuration
蒙層與原理四的覆蓋類似，只不過蒙層帶有透明屬性，它擋住了后面的信息，但又沒有全擋住。iOS中常見的毛玻璃效果就是如此，它讓用戶意識到正在操作的對象，還有另一個世界。拓展了Z軸的層次結構，補償用戶體驗中的單一視野。
原理十：視差 Parallax
當用戶滾動時，在視覺平面中創建空間層次結構。其目的是為了建立各元素的層級關系，移動速度更快的交互式元。對用戶來說顯得更接近，較慢的非交互式元素，會退回到背景顯得更遠，從而更好把內容和環境區分開來 。
設計師可以利用時間本身來創建這些關系，告訴用戶界面中的哪些對象具有更高的優先級。用戶不僅認為界面對象現在具有超出視覺設計中確定的層次結構，而且現在可以利用這種層次結構，讓用戶意識到設計之前掌握用戶體驗內容。
原理十一：多維 Dimensionality
維度是將界面的元素多維化，使元素看起來像可翻轉的，可折疊的，浮動的。可以使不同的UI元素實現無縫的過渡銜接，它通常以折紙維度、浮動維度和對象維度這三種方式來呈現。
此外，維度原理克服了視覺平面中的分層悖論，其中缺乏深度的物體存在于同一平面上，但出現在其他物體的“前面”或“后面”。
折紙維度可以被認為是“折疊”或“鉸鏈”的三維界面對象，它由多個元素組合成“折紙”結構，隱藏的物體在空間上仍然可以說是“存在”的，即使它們不可見。
浮動維度為界面對象提供了空間起源和離開，使交互模型直觀且具有高度敘事性。常見的“3D”卡片就是通過這一維度來實現的。
對象維度會產生具有真實深度和形式的維度對象，可以看到，雖然在2D層，元素卻可以3D視角呈現真實的維度。
原理十二：平移與縮放 Dolly & Zoom
平移與縮放是電影概念，指的是與相機有關的對象的運動，以及畫面中圖像本身的大小從遠景平滑變化到特寫鏡頭（反之亦然）。
在某些情況下，無法判斷對象是否正在縮放。可能是在在 3D 空間中向著相機移動，也許是相機在向對象移動，又或者是對象自身在放大縮小。以下三個示例說明了可能的情況。
鏡頭平移：被拍攝物保持靜止而鏡頭移動或鏡頭保持靜止，而被攝物體進行遠離或接近鏡頭的前后移動。
鏡頭縮放：鏡頭與被攝物體在位置上保持靜止，而被攝物自身進行縮放。
縮放：是指視角和對象都沒有在空間上移動，而是物體本身在縮放（或者我們的視野正在縮小，從而導致圖像放大），這向觀看者傳達了附加界面對象在其他對象或場景“內部”的信息。
移動還可以結合維度原則，從而產生更多空間和深度體驗，并向用戶傳達當前視圖“前面”或“后面”的其他區域或內容。縮放允許無縫轉換 – 實時和非實時 – 支持可用性。在創建空間心智模型時，Dolly & Zoom Principle 中采用的這種無縫性非常強大。
以上，便是有關動效設計的十二條基本原理，希望能給你帶來一些啟發。
參考資料
https://developers.google.com/web/fundamentals/design-and-ux/animations/the-basics-of-easing?hl=zh-cn
https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
原文地址：站酷
作者：印跡_
轉載請注明：學UI網》用動效創造可用性：動效設計的基本原理
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( 91whvog3.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務