我們從五個(gè)部分來具體講述用戶體驗(yàn)動效的12大原則：

　　1. UI動效不等于用戶體驗(yàn)動效

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

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

　　4. 原則，技術(shù)，屬性和價(jià)值觀

　　5. 用戶體驗(yàn)的12大原則

　　UI動效不等于用戶體驗(yàn)動效

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

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

　　就好比，UI動效是建筑的施工，用戶體驗(yàn)的12大原則是基礎(chǔ)的施工圖，施工需要在施工圖的引導(dǎo)下才能做到正確無誤。12大原則為設(shè)計(jì)師提供了強(qiáng)有力的理論支持。

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

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

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

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

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

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

　　敘述性是用戶體驗(yàn)中事件的線性進(jìn)展，導(dǎo)致時(shí)間/空間框架。這可以被認(rèn)為是在整個(gè)用戶體驗(yàn)中連接在一起的一系列謹(jǐn)慎的時(shí)刻和事件。

　　關(guān)系是指界面對象之間的空間、時(shí)間的層次表示，指導(dǎo)用戶理解和決策。

　　原理，風(fēng)格，屬性和價(jià)值觀

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

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

　　時(shí)機(jī)控制：緩動和偏移與延遲

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

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

　　時(shí)間軸：視差

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

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

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

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

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

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

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

　　頁面加入新元素或新場景進(jìn)入時(shí)的層級關(guān)系

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

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

　　多個(gè)對象交互運(yùn)動時(shí)的空間關(guān)系。

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

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

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

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

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

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

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

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

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

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

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

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

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

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