作為一個UX、UI設計師，我們需要知道如何通過動效來提高用戶體驗。現在奇酷UI培訓老師為大家詳細講解“用戶體驗動效的12大原則”，想了解更多技術干貨請聯系我們或收藏奇酷教育官網www.rrryy.cn

　　當元素在顯示與遮擋之間切換時，變化過程要保持連續性。

　　遮罩原則就是蒙版的概念，形狀改變與功能改變之間的關系。雖然設計師對靜態的“遮罩”有所了解，但我們應該意識到，遮罩動效是隨著時間而發生變話的一種動態行為，而不是一種精致的狀態。一瞬間改變遮罩區域，將內容順暢的顯示或隱藏起來的效果，也具有敘事的作用。

　　在上面例中，頂部圖片通過形狀和位置的改變成為了唱片。在不改變元素內容的情況下，通過遮罩來改變元素本身，是一個相當不錯的手法。這個例子屬于非實時交互，是用戶操作之后才發生的。

　　記住，界面動畫的原理與時間緊密相關，通過連續性、敘述性、關聯性與可預期性這四種方式來成為提神用戶體驗的支柱。上述的例子中，盡管元素的內容前后保持不變，但是外輪廓和位置的變化，能讓用戶很明晰那的看出來它是什么。

　　在做界面設計的時候，都會有圖層的概念。在做動效的時候用疊加的效果，會讓層次更加明顯。

　　當界面中存在多個頁面元素時，可通過疊加排序來彌補扁平空間缺乏層次的問題，以此提高體驗可用性。也就是在一個非三維的平面空間里，通過元素之間的上下關系來傳遞它們的相對位置。

　　上圖一的案例中，前景元素（人名信息）向右滑動，可顯示出收藏等其他信息；上圖二的案例中，整個界面向下滑動，可顯示出其下方圖層的其他內容（下方內容同時使用“偏移”與“延遲”原則來表述元素之間的獨立關系）疊加原則是設計師通過縱深關系定位圖層層級，向用戶展示更多信息、更多的空間內容。

　　當元素從主體分裂離開時，可闡述二者之間的連續性關系。

　　在當前的元素或場景中分裂出新元素時，對形態變化的描述顯得十分重要。用簡單的不透明度變化是不足以描述分裂的狀態。

　　在以上三個實例中，當用戶注意力集中在主元素時，新元素在主元素的基礎上被分離開，這種雙重動作具有清晰的敘事性：“X”創建了子對象“Y”。

　　讓用戶看到非主視覺元素的對象或場景，打造空間感。

　　與遮罩原則類似，景深原則既可以是靜止狀態的，也可以是具有時效性的。景深的靜止狀態還比較好理解，它的“時效性”可能會給設計師帶來疑惑。現在我們將“景深”視為遮蔽的一種行為動作，而不是靜止的狀態。當行為發生時，非主視覺元素變模糊，達到突出主視覺并產生空間景深的效果。

　　景深原則看起來像是次要元素被模糊虛化或被透明圖層覆蓋，這也是一種設計多個元素互動時的實時交互。景深原則經常利用模糊與疊加透明度的手法，讓用戶感受到主元素與次要元素在空間上的層次關系。

　　當用戶移動界面時，在平面創造出空間層次。

　　“視差”在用戶體驗動效中體現的是，不同的元素以不同的速度進行運動。在保持原本設計的完整性的前提下，視差可以讓用戶聚焦于主要操作的內容。在視差效果下，用戶對背景元素的感知會被弱化。設計師可以通過這一原則將即時性的內容從環境中分離出來。

　　主要用了蒙版、放大縮小的屬性來實現視差的效果。視差原則是讓用戶在操作時，明確各元素之間的關系。用戶會感覺到，放大的前景元素距離自己很近，而縮小的圖片距離自己越來越遠。

　　設計師通過設置元素的快慢速度、大小，便能讓用戶感知到元素的層級。因此，將背景或沒有互動的元素放慢或縮小，讓它們“遠離用戶”是有道理的。

　　這樣的視覺效果，不僅會讓用戶對界面的感知超出平面的層次，也有利于將用戶把更多的關注下意識的引導至要呈現的主元素上，對用戶的引導是非常有效且實用的。

　　用翻轉的方式，打造元素入場與離場的空間感。

　　翻轉可有效的改善平面化和非邏輯性的用戶體驗。人們很擅長利用空間感來體驗現實和虛擬的世界。因此具有空間感的入場或離場是能增加用戶的心理預期。另外，空間維度可改善平面視覺無法分層的情況，它可以讓同一平面的元素產生前后疊加的感覺。空間維度常以三種方式呈現：折紙翻轉、懸浮翻轉、整體翻轉。其中折紙翻轉可被理解為三維中的折疊和旋轉。

　　上圖所示，在多個元素組合成的折紙結構中，被隱藏的部分是看不見的，但它們在“空間上”仍是存在的。平面化被包裝成連續的空間體驗，用戶在對界面或某元素進行交互操作時即可感受到。懸浮翻轉為界面元素的入場與離場，提供更直觀的展現方式。

　　整體翻轉可讓對象整體更具有真是空間的形態。

　    旋轉是通過3D卡片的效果來實現的整體翻轉。這樣的結構增強了視覺設計與敘述事件上的表現力，可通過翻轉卡片來查看更多內容。

　　用連續的空間描述來引導界面元素和空間。

　　移動變焦是一個電影概念，通過移動相機或物體的距離來控制影像的遠近。但是在某些情況下。無法判斷是對象在同一平面縮放，還是3D空間中攝像機在超固定對象的方向移動，或者是3D空間中對象在朝著固定的攝像機方向移動。

　　由于這里涉及到元素變化與場景的轉換，因此下面會將“相機移動”與“變焦”分開來講，并說明它們是如何提高用戶體驗的可用性。

　　相機移動（Dolly）是一個電影術語，含義是相機朝向或遠離主體的移動而造成的縮放效果。

　　在用戶體驗中，空間的運動可以引發用戶的視角變化，或當對象變化時保持視角的靜止。相機移動結合翻轉原則，可以打造更多、更好、更深入的空間體驗。變焦是指相機與元素不做空間移動，而是對元素本身進行的縮放（或者說我們的視角減小，導致元素放大）。這使觀看者感受到視角內的內容是在更多元素或更大的場景之內。
         奇酷教育官網上每天都會更新大量UI培訓資源，目的是為了適合不同的人群來學習。想了解更多或不懂的地方可以在線咨詢。