在筆者剛學(xué)習(xí)動效那會兒，因?yàn)閳?zhí)著于鉆研軟件技法，而忽略了動效的基本原理，導(dǎo)致作出了很多生硬的動效設(shè)計(jì)。和很多事情一樣，動效設(shè)計(jì)如果違背了自然規(guī)律，必定會損害產(chǎn)品的可用性。

在用戶界面中，動效不僅僅是一種視覺裝飾，而是一種強(qiáng)大的力量，它可增強(qiáng)產(chǎn)品參與度并擴(kuò)展設(shè)計(jì)交流的范圍。

本文給大家介紹了十二項(xiàng)最基本的動效設(shè)計(jì)原理，這些都適合用于UX/UI設(shè)計(jì)項(xiàng)目中，是非常有用的運(yùn)動原理，建議收藏反復(fù)食用。

原理一：緩動 Easing

緩動效果模擬了現(xiàn)實(shí)世界中對象隨時(shí)間加速或減速的方式，它適用于所有運(yùn)動的元素。自然界中沒有東西是從一點(diǎn)呈線性地移動到另一點(diǎn)。現(xiàn)實(shí)中，物體在移動時(shí)往往會加速或減速。我們的大腦習(xí)慣于期待這種運(yùn)動，因此在做動畫時(shí)，應(yīng)利用此規(guī)律。自然的運(yùn)動會讓用戶對你的應(yīng)用感覺更舒適，從而產(chǎn)生更好的總體體驗(yàn)。

線性動畫

沒有任何速度上的變化的的動畫稱為線性動畫，如坐標(biāo)圖所示，運(yùn)動的曲線成直線狀態(tài)。這種動畫效果往往顯得很僵硬，不自然，讓用戶覺得不協(xié)調(diào)。一般來說，應(yīng)避免線性運(yùn)動。

緩出動畫

運(yùn)動的開頭速度很快，結(jié)尾處逐漸減速的動畫稱為緩出動畫。運(yùn)動曲線呈拋物線狀態(tài)，緩出動畫最適合界面里面的動效，快速的入場給人反應(yīng)很快的感覺。

緩入動畫

和緩出相反，緩入動畫是開頭慢結(jié)尾快，這就像自然落下的球體一樣，速度越來越快。但是，從交互的角度來看，緩入可能讓人感覺有點(diǎn)不自然，因?yàn)榻Y(jié)尾很突然；在現(xiàn)實(shí)中移動的物體往往是減速，而不是突然停止。緩入還有讓人感覺行動遲緩的不利效果，這會對網(wǎng)站或應(yīng)用的響應(yīng)速度給人的感覺產(chǎn)生負(fù)面影響。

緩入緩出動畫

把緩入和緩出曲線連接在一起，就是完整的緩入緩出動畫，它的運(yùn)動過程可以想象一輛汽車從起步到停車的動作，可以實(shí)現(xiàn)比單純緩出更生動的效果。由于開頭慢、中間快和結(jié)尾慢，動畫將有更強(qiáng)的對比，會讓用戶感到愉悅。

因此，緩動原理實(shí)際上是使動畫不再那么尖銳或生硬的過程。

原理二：變形 Transformation

變形是由一個(gè)形態(tài)變成另一個(gè)形態(tài)，這種形變是動畫里最引人注目的。通過元素形態(tài)的轉(zhuǎn)變，告知用戶元素的狀態(tài)或作用發(fā)生了改變。

例如這個(gè)下載動畫，下載完成后變形為按鈕，其實(shí)是符合用戶預(yù)期的。這種無縫轉(zhuǎn)換，可以提高用戶的認(rèn)知度，提

升了動畫的連貫性。

在動效中，利用擠壓變形原則能夠喚起用戶的主觀記憶。是剛性的還是柔軟的，通過物體運(yùn)動的變形狀態(tài)就能很好的體現(xiàn)出來。

原理三：克隆 Cloning

當(dāng)元素被克隆時(shí)，可表達(dá)出元素與元素之間的某種連續(xù)性。在此原理中，如何讓物體的出現(xiàn)和離開具有連續(xù)性、關(guān)系和過渡，是信息準(zhǔn)確傳遞的關(guān)鍵。

例如這個(gè)發(fā)布按鈕，點(diǎn)擊它會創(chuàng)建多個(gè)新對象，引導(dǎo)注意力，非常清晰的表達(dá)了他們之間的關(guān)系。

還有這個(gè)運(yùn)動健康頁面，在添加練習(xí)項(xiàng)目時(shí)，從主按鈕克隆生成一系列練習(xí)項(xiàng)目，選擇完成后原路返回。

原理四：覆蓋 Overlay

利用覆蓋原理能讓原本有限的空間得以延伸，用以顯示額外的可見元素，補(bǔ)償了用戶體驗(yàn)中的單一統(tǒng)一視野或“客觀視圖”。覆蓋原理在UI設(shè)計(jì)中常用于列表橫滑，通過覆蓋，隱藏相關(guān)操作，以減少視覺上的干擾。

在某種程度上，作為設(shè)計(jì)師，“層”的概念是顯而易見的，不言而喻。我們用層來設(shè)計(jì)，層的概念被深深地內(nèi)化了。但是，我們必須小心區(qū)分“制作”和“使用”的過程。

作為不斷參與“制作”過程的設(shè)計(jì)師，我們要非常熟悉我們正在設(shè)計(jì)的物體的所有部分（包括隱藏部分）。然而，作為用戶，那些不可見的部分是根據(jù)定義和實(shí)踐，在視覺和認(rèn)知上隱藏的。

原理五：偏移和延遲 Offset & Delay

偏移和延遲原理是表明元素之間的層級與關(guān)系，在新元素入場時(shí)利用偏移和延遲讓信息或界面元素按照秩序進(jìn)退場，定義對象關(guān)系和層次結(jié)構(gòu)。

在上面的示例中，浮動操作按鈕 (FAB) 轉(zhuǎn)換為頭部背景。數(shù)據(jù)圖表在時(shí)間的延遲下依次出現(xiàn)，暗示用戶這里的信息與其他元素之間的區(qū)別，吸引用戶注意力。

原理六：遮罩 Masking

遮罩是決定元素變化的結(jié)果是什么，通過暫時(shí)使對象顯示和隱藏，以連續(xù)無縫的方式轉(zhuǎn)換，保持了敘事流程的效果。雖然對象本身保持不變，但因?yàn)樗辛诉吔绾臀恢?，這兩個(gè)因素決定了對象是什么。

例如這個(gè)轉(zhuǎn)動的咖啡杯，借助遮罩，通過改變logo的位置和吸管的朝向，造成杯子在自轉(zhuǎn)的假象。

在上面的例子中，音樂封面改變了邊界形狀和位置，但沒有改變內(nèi)容。轉(zhuǎn)換發(fā)生在用戶執(zhí)行操作后激活，是相當(dāng)巧妙的技巧。

原理七：父子關(guān)系 Parenting

父子關(guān)系是將界面元素關(guān)聯(lián)起來的重要原則，創(chuàng)建出空間和時(shí)間層次關(guān)系。它最適合作為“實(shí)時(shí)”互動，例如拖動列表順序時(shí)，其他信息會同步跟上。

回想一下，很多元素屬性都可以創(chuàng)造這種聯(lián)動的繼承關(guān)系，例如不透明度、位置、旋轉(zhuǎn)、縮放、形狀、顏色等。

原理八：數(shù)值變化 Value Change

文本和數(shù)字的變化是如此普遍，以至于我們忽略了它們，而我們卻沒有給它們帶來區(qū)別和嚴(yán)謹(jǐn)來評估它們在支持可用性方面的作用。

數(shù)字和值表示現(xiàn)實(shí)中正在發(fā)生的事情，既可以發(fā)生在實(shí)時(shí)活動中，也可以發(fā)生在非實(shí)時(shí)活動中。它可能是時(shí)間、收入、速度、游戲得分等。當(dāng)我們使用動態(tài)的數(shù)值變化時(shí)，它激活了一種“神經(jīng)反饋”，用戶會覺得自己與這些數(shù)值有關(guān)聯(lián)的。如果這些值是靜態(tài)的，就感覺與現(xiàn)實(shí)的聯(lián)系會減少。

數(shù)值的變化在各類金融理財(cái)和日歷APP中經(jīng)常出現(xiàn)，數(shù)據(jù)的動態(tài)表達(dá)和交流可能會對數(shù)據(jù)的價(jià)值產(chǎn)生影響；如上圖中的數(shù)值的動態(tài)變化，讓用戶感知到自己可能有能力影響到數(shù)據(jù)，提升了參與活動的意愿。

原理九：蒙層 Obscuration

蒙層與原理四的覆蓋類似，只不過蒙層帶有透明屬性，它擋住了后面的信息，但又沒有全擋住。iOS中常見的毛玻璃效果就是如此，它讓用戶意識到正在操作的對象，還有另一個(gè)世界。拓展了Z軸的層次結(jié)構(gòu)，補(bǔ)償用戶體驗(yàn)中的單一視野。

原理十：視差  Parallax

當(dāng)用戶滾動時(shí)，在視覺平面中創(chuàng)建空間層次結(jié)構(gòu)。其目的是為了建立各元素的層級關(guān)系，移動速度更快的交互式元。對用戶來說顯得更接近，較慢的非交互式元素，會退回到背景顯得更遠(yuǎn)，從而更好把內(nèi)容和環(huán)境區(qū)分開來 。

設(shè)計(jì)師可以利用時(shí)間本身來創(chuàng)建這些關(guān)系，告訴用戶界面中的哪些對象具有更高的優(yōu)先級。用戶不僅認(rèn)為界面對象現(xiàn)在具有超出視覺設(shè)計(jì)中確定的層次結(jié)構(gòu)，而且現(xiàn)在可以利用這種層次結(jié)構(gòu)，讓用戶意識到設(shè)計(jì)之前掌握用戶體驗(yàn)內(nèi)容。

原理十一：多維 Dimensionality

維度是將界面的元素多維化，使元素看起來像可翻轉(zhuǎn)的，可折疊的，浮動的?？梢允共煌腢I元素實(shí)現(xiàn)無縫的過渡銜接，它通常以折紙維度、浮動維度和對象維度這三種方式來呈現(xiàn)。

此外，維度原理克服了視覺平面中的分層悖論，其中缺乏深度的物體存在于同一平面上，但出現(xiàn)在其他物體的“前面”或“后面”。

折紙維度可以被認(rèn)為是“折疊”或“鉸鏈”的三維界面對象，它由多個(gè)元素組合成“折紙”結(jié)構(gòu)，隱藏的物體在空間上仍然可以說是“存在”的，即使它們不可見。

浮動維度為界面對象提供了空間起源和離開，使交互模型直觀且具有高度敘事性。常見的“3D”卡片就是通過這一維度來實(shí)現(xiàn)的。

對象維度會產(chǎn)生具有真實(shí)深度和形式的維度對象，可以看到，雖然在2D層，元素卻可以3D視角呈現(xiàn)真實(shí)的維度。

原理十二：平移與縮放  Dolly & Zoom

平移與縮放是電影概念，指的是與相機(jī)有關(guān)的對象的運(yùn)動，以及畫面中圖像本身的大小從遠(yuǎn)景平滑變化到特寫鏡頭（反之亦然）。

在某些情況下，無法判斷對象是否正在縮放?？赡苁窃谠?3D 空間中向著相機(jī)移動，也許是相機(jī)在向?qū)ο笠苿?，又或者是對象自身在放大縮小。以下三個(gè)示例說明了可能的情況。

鏡頭平移：被拍攝物保持靜止而鏡頭移動或鏡頭保持靜止，而被攝物體進(jìn)行遠(yuǎn)離或接近鏡頭的前后移動。

鏡頭縮放：鏡頭與被攝物體在位置上保持靜止，而被攝物自身進(jìn)行縮放。

縮放：是指視角和對象都沒有在空間上移動，而是物體本身在縮放（或者我們的視野正在縮小，從而導(dǎo)致圖像放大），這向觀看者傳達(dá)了附加界面對象在其他對象或場景“內(nèi)部”的信息。

移動還可以結(jié)合維度原則，從而產(chǎn)生更多空間和深度體驗(yàn)，并向用戶傳達(dá)當(dāng)前視圖“前面”或“后面”的其他區(qū)域或內(nèi)容?？s放允許無縫轉(zhuǎn)換 - 實(shí)時(shí)和非實(shí)時(shí) - 支持可用性。在創(chuàng)建空間心智模型時(shí)，Dolly & Zoom Principle 中采用的這種無縫性非常強(qiáng)大。

作者： 印跡_ 來源：站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加藍(lán)小助，微信號:ben_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司