作為一個UX、UI設(shè)計師，我們需要知道如何通過動效來提高用戶體驗?，F(xiàn)在奇酷UI培訓老師為大家詳細講解“用戶體驗動效的12大原則”，想了解更多技術(shù)干貨請聯(lián)系我們或收藏奇酷教育官網(wǎng)qlmhb.cn

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

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

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

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

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

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

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

　　當元素從主體分裂離開時，可闡述二者之間的連續(xù)性關(guān)系。

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

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

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

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

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

　　當用戶移動界面時，在平面創(chuàng)造出空間層次。

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

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

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

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

　　用翻轉(zhuǎn)的方式，打造元素入場與離場的空間感。

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

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

　　整體翻轉(zhuǎn)可讓對象整體更具有真是空間的形態(tài)。

　    旋轉(zhuǎn)是通過3D卡片的效果來實現(xiàn)的整體翻轉(zhuǎn)。這樣的結(jié)構(gòu)增強了視覺設(shè)計與敘述事件上的表現(xiàn)力，可通過翻轉(zhuǎn)卡片來查看更多內(nèi)容。

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

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

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

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

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