ui動效設(shè)計(jì)是ui設(shè)計(jì)中體現(xiàn)動態(tài)效果的一種設(shè)計(jì)，很大程度上能增加ui設(shè)計(jì)的整體效果，讓用戶有一個(gè)更新鮮的感覺。那到底什么是ui動效設(shè)計(jì)？常見的ui動效類型有哪些？怎么設(shè)計(jì)一個(gè)ui動效？今天faceui小編要為大家介紹。

　　什么是ui動效設(shè)計(jì)

　　ui動效設(shè)計(jì)，顧名思義即動態(tài)效果的設(shè)計(jì)，用戶界面上所有運(yùn)動的效果，也可以視其為界面設(shè)計(jì)與動態(tài)設(shè)計(jì)的交集。在UI設(shè)計(jì)當(dāng)中，一個(gè)好的動效設(shè)計(jì)可以提升UI界面與用戶的交互體驗(yàn)，讓枯燥的界面生動起來，甚至能帶給用戶一種“砰然心動”的感覺。

　　合理的動效可以幫助引導(dǎo)、取悅用戶，減少等待時(shí)間，更能增加產(chǎn)品識別度。換個(gè)角度來說，如果現(xiàn)在APP沒有動效，你肯定會感覺少了點(diǎn)什么，比如最簡單的加載動畫得有吧。動效的重要性在于將交互、視覺過渡處理的更加細(xì)膩，而且能夠承載更多的信息，比如iOS動效、MD動效等。

　　優(yōu)秀的UI動效設(shè)計(jì)在提升產(chǎn)品體驗(yàn)、用戶粘性等方面的重要作用不言而喻，動效設(shè)計(jì)現(xiàn)在可是越來越吃香了，在企業(yè)招聘當(dāng)中，會動效設(shè)計(jì)是絕對占有優(yōu)勢的。

ui動效設(shè)計(jì)（圖片來自網(wǎng)絡(luò)）

　　常見的ui動效類型

　　1、旋轉(zhuǎn)

　　旋轉(zhuǎn)動效是我們在操作界面過程中比較常見的動效類型，主要是切換過程中圖標(biāo)或其元素的角度旋轉(zhuǎn)，是針對具體圖標(biāo)做出的巧妙設(shè)計(jì)。很多APP圖標(biāo)設(shè)計(jì)中都是有你了旋轉(zhuǎn)的效果來模擬失誤晃動的感覺，讓用戶覺得親近、自然.

　　2、填充

　　填充的主要內(nèi)容就是填充圖標(biāo)顏色，這種效果適用于選中過渡到面型的圖標(biāo)樣式，課室是局部的色塊填充，也可以填充到整體，切換的過程中都可以做到自然淋漓。若只有線性圖標(biāo)的樣式，圖標(biāo)就會比較偏薄，展示的效果就沒有那么理想。

　　3、形狀變化

　　形狀變化動效具比較強(qiáng)的趣味性，需要針對圖標(biāo)形狀元素訂制的一種，自由度呢比較高。對設(shè)計(jì)師而已有更多的擴(kuò)散空間，可以自由發(fā)揮，制作出更多有趣的效果。比如說：VX的消息圖標(biāo)，每次雙擊都可以切換不同不同的表情包，給用戶留下深刻的印象。

　　4、縮放

　　縮放動效比較適合新手設(shè)計(jì)師，相對比較簡單、穩(wěn)重、包容性比較好，既有動興又不會太復(fù)雜。應(yīng)用比較廣泛，適合大多數(shù)的產(chǎn)品，比較保守不容易出錯，對于視覺引導(dǎo)和明確反饋是絕對夠用的了。

　　怎么做一款ui動效設(shè)計(jì)

　　1、先下載 AE 文檔

　　下載一個(gè)基本的 Sticker Sheet 文檔。它包含一組 Material 組件，基準(zhǔn) UI 組件和導(dǎo)航轉(zhuǎn)場動畫。

ui動效設(shè)計(jì)（圖片來自網(wǎng)絡(luò)）

　　2、將素材導(dǎo)入到 AE

　　首先，我們需要制作動效的相關(guān)素材。選一款 UI 設(shè)計(jì)工具，最好是支持 AE 的。

　　3、創(chuàng)建 UI

　　有了庫中的這些基礎(chǔ)組件之后，你可以通過拖拽快速構(gòu)建 UI ，并且將它們整合進(jìn)新的 AE comp 當(dāng)中去。

　　4、自定義組件

　　這些基準(zhǔn)組件為你提供了良好的基礎(chǔ)，現(xiàn)在你可以拿它們來創(chuàng)建各種 UI。這是 AE 中主屬性這一功能最令人側(cè)目的地方。這一經(jīng)常被忽略的功能，其實(shí)可以快速創(chuàng)建出高度可復(fù)用的單個(gè)組件素材，創(chuàng)建好了之后就無需來回復(fù)制原始的素材了。它在功能上，非常接近 Sketch 中的符號（Symbols）的使用方式。

　　通過向每個(gè)組件添加主屬性，能將 UI 界面快速地轉(zhuǎn)化為成組的動畫。同樣的，也可以在 Baseline UIs 文件夾中找到這些素材。

　　5、動畫轉(zhuǎn)場過渡

　　現(xiàn)在，已經(jīng)建立了創(chuàng)建 UI 動畫的一個(gè)基本的工作流了，接下來就可以制作動畫效果了。在 Navigation Transitions（導(dǎo)航轉(zhuǎn)場過渡） 這個(gè)文件夾當(dāng)中，有詳細(xì)的范例，演示了如何在 AE 中使用Material Design的運(yùn)動模式。

　　在剛剛開始的時(shí)候，所有的屬性都是沒有緩動動畫的。然后，通過時(shí)間重新映射和設(shè)置關(guān)鍵幀的持續(xù)時(shí)長來實(shí)現(xiàn)緩動的效果。這個(gè)時(shí)候可以非常輕松快速地調(diào)整緩動和持續(xù)時(shí)長，因?yàn)闉榱丝刂普麄€(gè)轉(zhuǎn)場過渡的效果，只需要映射兩次關(guān)鍵幀就夠了。而這也是將緩動曲線應(yīng)用到所有元素的動畫當(dāng)中的一種簡單的方法。

　　這種方法可以應(yīng)用于幾乎所有符合 Material 運(yùn)動規(guī)律的過渡動效，創(chuàng)造一致的視覺體驗(yàn)。當(dāng)然，這套方法是沒法處理更加復(fù)雜或者高度風(fēng)格化的動畫效果和流程的，但是這種情況并不常見。

　　以上就是faceui小編要為大家介紹的關(guān)于ui動效設(shè)計(jì)的相關(guān)內(nèi)容。ui設(shè)計(jì)一個(gè)很大的區(qū)別于其他設(shè)計(jì)的地方就在于能夠進(jìn)行動效設(shè)計(jì)。相信上述小編介紹的內(nèi)容，讓大家對ui動效設(shè)計(jì)有了一個(gè)基本的認(rèn)識和了解了吧。