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

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

　　2. 實時與非實時交互的區(qū)別

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

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

　　5. 用戶體驗的12大原則

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　對象關系：驅(qū)動關聯(lián)

　　對象連續(xù)性：轉(zhuǎn)型、數(shù)值變化、遮罩、疊加、克隆

　　時間軸：視差

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　當對象發(fā)生變化時，創(chuàng)建連續(xù)的敘事流程。

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

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

　　當價值主體發(fā)生變化時，創(chuàng)造一種動態(tài)和連續(xù)的敘事關系。

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

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

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

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

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

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

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