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

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

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

　　在上面例中，頂部圖片通過形狀和位置的改變成為了唱片。在不改變?cè)貎?nèi)容的情況下，通過遮罩來改變?cè)乇旧恚且粋€(gè)相當(dāng)不錯(cuò)的手法。這個(gè)例子屬于非實(shí)時(shí)交互，是用戶操作之后才發(fā)生的。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　相機(jī)移動(dòng)（Dolly）是一個(gè)電影術(shù)語，含義是相機(jī)朝向或遠(yuǎn)離主體的移動(dòng)而造成的縮放效果。

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