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

　　什么是ui動效設計

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

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

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

ui動效設計（圖片來自網(wǎng)絡）

　　常見的ui動效類型

　　1、旋轉(zhuǎn)

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

　　2、填充

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

　　3、形狀變化

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

　　4、縮放

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

　　怎么做一款ui動效設計

　　1、先下載 AE 文檔

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

ui動效設計（圖片來自網(wǎng)絡）

　　2、將素材導入到 AE

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

　　3、創(chuàng)建 UI

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

　　4、自定義組件

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

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

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

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

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

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

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