我們從五個部分來具體講述用戶體驗動效的12大原則：

　　1. UI動效不等于用戶體驗動效

　　2. 實時與非實時交互的區別

　　2. 4種提升動效可用性的方式

　　4. 原則，技術，屬性和價值觀

　　5. 用戶體驗的12大原則

　　UI動效不等于用戶體驗動效

　　在界面設計中，大部分動效被設計者理解為UI動效， 其實不然。 在正式介紹12大原則之前，我們要先介紹下兩者的不同。

　　UI動效通常被設計師認為是讓用戶體驗更加愉悅的東西，但實際并沒有增加太多價值。在本文中，我將說明UI動效必須以用戶體驗12大原則為基礎，那才能為可用性加分。

　　就好比，UI動效是建筑的施工，用戶體驗的12大原則是基礎的施工圖，施工需要在施工圖的引導下才能做到正確無誤。12大原則為設計師提供了強有力的理論支持。

　　在設計動效前，區分“狀態”和“行為”是很重要的。用戶體驗中的狀態元素基本上是靜態的，行為是暫時的，他們基于交互動作。當一些元素處于被掩蓋或遮擋的狀態未顯示出來時，用戶需要進行短暫的行為動作與界面進行交互。

　　此外，交互在時間的維度上都可以被認為是實時或非實時發生的。實時意味著用戶直接與用戶界面中的對象進行交互。非實時意味著對象行為是后交互式的：它發生在用戶操作之后，并且是過渡性的。這是一個重要的區別。因此，實時交互也可以被認為是“直接操縱”，用戶行為與界面交互是同時進行的。非實時交互僅在用戶行為發生后，并且直到狀態改變結束后用戶才可繼續使用。

　　區分二者的差別，將幫助我們更好的領會用戶體驗動效的十二項原則。

　　以下四種方式，是提升用戶體驗動效可用性的核心：

　　可預期性分為兩個方面 ，用戶如何看待對象是什么，以及它是如何體現的。另一種說法是，作為設計師，我們希望最大限度地縮小用戶期望與他們實際體驗之間的差距。

　　連續性是指用戶流程的順暢與用戶體驗的流暢要一致。連續性包括場景/頁面內、場景/頁面之間的連續與流暢。

　　敘述性是用戶體驗中事件的線性進展，導致時間/空間框架。這可以被認為是在整個用戶體驗中連接在一起的一系列謹慎的時刻和事件。

　　關系是指界面對象之間的空間、時間的層次表示，指導用戶理解和決策。

　　原理，風格，屬性和價值觀

　　我們可以想象一個層級結構，頂部是原理，中間是風格，下面是屬性，底部是值。

　　原理是一切動效的前提和規則，通過原理能產生許多不同的風格。風格可以被認為是原理之間的組合。屬性是要創建動效對象的特定參數。包括位置、不透明度、比例、旋轉、錨點、顏色、形狀等。值是時間軸上的實際數字屬性值，用于實現動效的關鍵因素。

　　時機控制：緩動和偏移與延遲

　　對象關系：驅動關聯

　　對象連續性：轉型、數值變化、遮罩、疊加、克隆

　　時間軸：視差

　　空間的連續性：景深、空間維度、移動變焦

　　當交互事件發生時，對象行為需與用戶期望一致。

　　所有具有時間行為的運動都需要緩動（無論是實時還是非實時的交互）。緩動可以讓運動更自然，并且使動效有更強的連續性，更能滿足用戶的期望。

　　動效運動時接近于勻速運動的，這種動畫顯的機械且不真實。圖二是模擬了橡皮筋、小球落地的運動，這個動效的特點是有彈性，也叫彈性運動。作為設計師，除了美學之外，我們還需要關注可用性，哪個例子更能支持你的動效作品？

　　緩動是存在在自然界中的，假設把緩動的程度想象成一個“階梯”，那么其中超出用戶預期的緩動效果體驗較差，是不可用的。將用戶體驗動效與用戶行為無縫連接，這才是一件合理可用的事情，因為它不會影響用戶的注意力。線性運動顯然是過于明顯的，感覺像是不完整的效果，容易分散用戶的注意力。在考慮動效的緩動時，要先想想它在現實世界中的運動規律。

　　動效與用戶行為完全無縫連接才是最好的效果么？這邊舉一個相矛盾的例子，它與用戶行為也不是無縫的，但它是經過設計過的。用戶可以注意到運動對象是彈跳的進入的，這也是超出用戶的預期，但比線性動效要好多了。

　　緩動會對可用性造成糟糕的影響嗎？答案是肯定的。我們要避免出現以下的情況：時間太慢或太快，會打破用戶的預期，造成注意力的分散；同樣如果緩動效果與整體的體驗不一致，也會產生負面的影響。這里所展示的只是很小一部分，設計師可以在項目中創建無數的“緩動”效果，不同場景的緩動都會帶來不同的視覺效果，給用戶帶來的體驗也是不同的。切記，在任何時候，都不要忘記緩動的作用！

　　頁面加入新元素或新場景進入時的層級關系

　　這個原理它可以很明確的告訴用戶界面中元素的關系。頂部的兩個矩形是組合在一起的，與最下面的矩形是分開的。我們可以把上面的組理解成標題和副標題，下面的是正文。這種方式同樣也適用于其他的頁面。在用戶接觸這些對象之前，設計師已經用偏移與延遲的設計原則，將信息規類好，便于用戶有效的識別。

　　在這個案例中，上面的按鈕和文字是一起出現的，相當于一個組合。他們出現的速度比下面兩個小圖標要快一些。最后一頁，文字和按鈕是一個整體，出現的速度比圖標要慢一些。用這種方式就能拉開了信息層級，讓動效更加豐富。

　　多個對象交互運動時的空間關系。

　　驅動關聯是非常重要的原則。上圖中，頂部元素與底部的元素在“比例”與“位置”的屬性上是關聯在一起，這種關聯與繼承關系，可以增強動效的可用性。界面中元素的屬性包括：比例、不透明度、位置、旋轉、形狀、顏色等，這些屬性中的任何屬性都可以相互關聯，為用戶提供更好的交互體驗。

　　圖片向左滑動和向右滑動是不同的效果，同時滑動后背景也是跟著變的。驅動關聯原理在做即時交互時能發揮出最好的效果。因為用戶通過驅動關聯能感受到界面元素的直接變化，設計師可以通過動效即時告訴用戶元素之間的關聯。

　　驅動關聯的動效分為3種形式，上面兩種屬于“直接繼承”，除此之外還有“延遲繼承和“逆向繼承”

　　當對象發生變化時，創建連續的敘事流程。

　　形態變化是很容易被識別的效果。如下圖用戶可以輕易的注意到“確認提交”的按鈕形態轉變成成圓形的進度條，隨后在最終狀態變換成確認的圖標。這種形態變換非常容易吸引到用戶到注意力，并且可以描繪出一個完整的流程。

　　這種變換是將用戶體驗的不同狀態（“按鈕-進度條-成功”三種狀態）無縫的銜接，最終產生用戶所期待的結果。用戶通過這些變換可直觀的看到三種功能狀態，并最終達到目的。變換原則可以將用戶體驗中不同時刻的信息分解成節點，并且在幾個變換的形態中無縫連接，完成一個完整的事件流程的傳遞。這樣連貫性的效果更容易被用戶的認知所接受。

　　當價值主體發生變化時，創造一種動態和連續的敘事關系。

　　數字及文本這些元素本身的值是可以改變的，這一點概念相對而言沒有那么顯而易見。因為，數字和文本的值變實在是太普遍了，以至于我們常常意識不到，也很少正確地評估他們對提升用戶體驗的幫助。

　　那么值變時的體驗是怎樣的？如果說文本的十二條動效體驗原則的核心是體驗提升的機會點，那么此處有3個機會點：向用戶表達數字背后的現實含義、溝通介質以及值的動態變化。

　　如果在畫面加載動效中，數字/文本沒有發生變化時，用戶會認為整個元素看起來是靜止的狀態，它們看起來與“限速55km/h”的標識牌的效果是一樣的　　

    很多數字/文本要反應現實發生的事件，比如時間、收入、游戲成績、商業指標、健身數據等。如果我們通過動態方式來表示這些內容，可以更直接感受到這些變化的信息。如果用靜態的方式來處理變化的數據，則會失去深層次體驗的機會。

　　動態變化的數值/文本，可以給到用戶強有力的反饋，讓用戶更直接的感受到內容的變化。然而當數值/文本是靜態的時候，數值變化的關聯就會減少，用戶也很難感受到內容背后的變量。

　　數值/文本變化原則，在實時與非實時的事件中都適用。在實時事件中，用戶可以通過對界面的交互改變數值/文本的內容；在非實事件中，比如加載或轉換，這些數值在沒有用戶參與的情況下發生改變。

         奇酷教育官網上每天都會更新大量UI培訓技術資源，目的是為了適合不同的人群來學習。想了解更多或不懂的地方可以在線咨詢。