UI設(shè)計(jì)出了靜態(tài)的效果之外經(jīng)常會(huì)加入一些動(dòng)態(tài)效果，因?yàn)檫@樣可以讓整個(gè)UI設(shè)計(jì)變得更加動(dòng)感，讓人感覺充滿生機(jī)，下面我們跟隨小編一起來了解一下UI動(dòng)效設(shè)計(jì)的相關(guān)資料吧。

UI動(dòng)效設(shè)計(jì)常見類型

　　1、旋轉(zhuǎn)。旋轉(zhuǎn)動(dòng)效是我們?cè)诓僮鹘缑娴倪^程中比較常見的動(dòng)效類型，它主要是切換過程中圖標(biāo)或其中元素的角度旋轉(zhuǎn)，是針對(duì)具體圖標(biāo)做的巧妙設(shè)計(jì)。很多app的圖標(biāo)設(shè)計(jì)中都使用了旋轉(zhuǎn)的效果來模擬實(shí)物的晃動(dòng)感覺，讓用戶覺得親切自然。

　　2、填充。填充的主要內(nèi)容就是填充圖標(biāo)顏色，這種效果適用于選中后過渡到面性的圖標(biāo)樣式，可以是局部色塊的填充，也可是填充整體，切換過程都可以做到自然流暢。若只有線性圖標(biāo)的樣式，圖標(biāo)面積偏單薄，不易出效果一般不建議使用。

　　3、形狀變化。形狀變化動(dòng)效一般具有較強(qiáng)的趣味性，它也是需要針對(duì)圖標(biāo)形狀元素定制化設(shè)計(jì)的一種。它的自由度較高，供設(shè)計(jì)師發(fā)揮的空間大，能產(chǎn)生許多有趣的效果。比如QQ的消息圖標(biāo)，每次雙擊都切換不同的表情，給用戶留下深刻的印象。

　　4、縮放。縮放動(dòng)效是比較適合新手設(shè)計(jì)師選擇的一種動(dòng)效類型。它是簡(jiǎn)單穩(wěn)重、包容性好的一種動(dòng)效，既有動(dòng)式又不會(huì)太復(fù)雜夸張。對(duì)于視覺引導(dǎo)和明確反饋完全夠用，所以它的應(yīng)用比較廣泛，適合大多數(shù)產(chǎn)品，是比較保守不易出錯(cuò)的選擇。

（圖片來自網(wǎng)絡(luò)）

　　UI動(dòng)效設(shè)計(jì)方法

　　一、從哪里開始

　　動(dòng)效主要的作用通過動(dòng)態(tài)演示 UI元素的變化來引導(dǎo)用戶操作，動(dòng)畫也有能力通過圖標(biāo)，Logo，插圖為一款應(yīng)用塑造性格，但不管怎樣，動(dòng)畫易用性的優(yōu)先級(jí)肯定是要高于增加設(shè)計(jì)創(chuàng)意形式。在展示你的動(dòng)畫能力之前，讓我們先回到最核心的 UI動(dòng)效基礎(chǔ)上來，去關(guān)注 UI中的導(dǎo)航和轉(zhuǎn)換。

　　二、轉(zhuǎn)換模式

　　當(dāng)設(shè)計(jì)一個(gè)導(dǎo)航轉(zhuǎn)換時(shí)，簡(jiǎn)單和統(tǒng)一就是2個(gè)最關(guān)鍵的點(diǎn)。為了實(shí)現(xiàn)這一點(diǎn)，我們選擇了2種類型的動(dòng)效模式：

　　1. 基于容器的轉(zhuǎn)換

　　如果界面中涉及到一個(gè)容器，比如按鈕、卡片或者列表，那么轉(zhuǎn)換就是基于容器的動(dòng)畫。容器通常很容易根據(jù)它們的可見邊識(shí)別出來，但是要記住，它們也可以是在轉(zhuǎn)換之前不可見，就是沒有分割線的列表一樣。這種模式過程分為三個(gè)步驟來做：

　　先使用 Material標(biāo)準(zhǔn)的緩動(dòng)動(dòng)畫讓容器動(dòng)起來(先快速開始，然后緩慢結(jié)束)。在下面這個(gè)例子中，容器的大小和圓角半徑發(fā)生了改變，從一個(gè)圓形按鈕變化到一個(gè)填充屏幕的矩形。

　　容器中的元素以適配容器寬度進(jìn)行縮放，元素被固定在頂部并隱藏在容器內(nèi)，這樣就在容器和內(nèi)部元素之間創(chuàng)建了清晰的聯(lián)系。

　　在轉(zhuǎn)換過程中消失的內(nèi)容元素會(huì)隨著容器的加速而淡出，當(dāng)容器減速時(shí)，新的內(nèi)容元素會(huì)淡入。當(dāng)元素快速移動(dòng)時(shí)，通過淡入淡出元素來實(shí)現(xiàn)無(wú)縫的轉(zhuǎn)換效果。

（圖片來自網(wǎng)絡(luò)）

把這個(gè)設(shè)計(jì)模式應(yīng)用于所有容器轉(zhuǎn)換上，將會(huì)建立一致的效果。它還能明確開始和結(jié)束之間的關(guān)系，因?yàn)槭怯萌萜鲃?dòng)畫進(jìn)行引導(dǎo)的。為了展示這種模式的靈活性，有些容器只是使用 Material動(dòng)畫的標(biāo)準(zhǔn)緩動(dòng)從屏幕外滑入， 它滑動(dòng)的方向取決于與之關(guān)聯(lián)的組件的位置。 例如，點(diǎn)擊左上角的抽屜導(dǎo)航圖標(biāo)，菜單將從左側(cè)滑入容器。

　　如果容器是從屏幕邊界進(jìn)入，則它會(huì)淡入并放大。 動(dòng)畫不是從0%的比例開始出現(xiàn)，而是從95%開始，以避免過度彈跳。 縮放動(dòng)畫使用 Material動(dòng)畫的減速規(guī)范，這意味著它以最大速度開始并輕輕地減速并停止。 當(dāng)元素要退出時(shí)，容器會(huì)在沒有縮放的情況下淡出， 退出動(dòng)畫設(shè)計(jì)會(huì)比進(jìn)入時(shí)更微妙，以便讓用戶將注意力集中在新內(nèi)容上。

　　2. 沒有容器的過渡

　　有些界面并不會(huì)基于容器進(jìn)行轉(zhuǎn)換，例如點(diǎn)擊底部導(dǎo)航中的圖標(biāo)，將用戶帶去一個(gè)新界面。 在這些情況下，使用兩步模式：

　　開始元素以淡出的方式消失，結(jié)束元素以淡入的方式進(jìn)入。隨著最終元素的淡入，它也會(huì)使用 Material動(dòng)畫緩動(dòng)規(guī)律進(jìn)行細(xì)微的放大。如果在開始和結(jié)束元素之間有一個(gè)很清晰的空間和層級(jí)關(guān)系，共享動(dòng)畫就可以強(qiáng)化這種關(guān)系。例如，在導(dǎo)航步驟上，開始和結(jié)束組件共享一個(gè)垂直滑動(dòng)動(dòng)畫，這種方式加強(qiáng)了在垂直方向上的信息內(nèi)容。當(dāng)按下步驟中的下一個(gè)按鈕時(shí)，組件元素之間共享了一個(gè)水平滑動(dòng)動(dòng)畫，從左向右的滑動(dòng)強(qiáng)化了步驟進(jìn)行的概念。共享動(dòng)畫也是運(yùn)用了谷歌 Material動(dòng)畫的標(biāo)準(zhǔn)緩動(dòng)。

（圖片來自網(wǎng)絡(luò)）

　　三、最佳實(shí)踐

　　1. 保持簡(jiǎn)單

　　考慮到導(dǎo)航轉(zhuǎn)換的高頻率和易用性的特點(diǎn)，導(dǎo)航的切換更傾向于引導(dǎo)功能而不是炫酷的效果。這也并不是說動(dòng)畫的形式永遠(yuǎn)都不要個(gè)性化，只是要確保動(dòng)畫是符合品牌風(fēng)格的。能吸引用戶眼球的動(dòng)畫通常都在一些像小圖標(biāo)，logo，加載狀態(tài)或者空狀態(tài)等元素中。下面最左邊的簡(jiǎn)單動(dòng)畫可能不會(huì)在 Dribbble 上得到太多的點(diǎn)贊，但是它會(huì)使應(yīng)用變得更好用。

　　2. 選擇合適的持續(xù)時(shí)間和緩動(dòng)形式

　　導(dǎo)航的切換是需要優(yōu)先考慮功能實(shí)用性，所以需要優(yōu)化持續(xù)時(shí)間，速度上要快一些，但是也不要快到讓用戶完全注意不到。持續(xù)時(shí)間是根據(jù)動(dòng)畫在屏幕中所占的位置來決定的。由于導(dǎo)航切換通常會(huì)占據(jù)屏幕的大部分面積，所以根據(jù)經(jīng)驗(yàn)建議300ms會(huì)是一個(gè)不錯(cuò)的時(shí)間選擇。相比之下，像開關(guān)這樣的小控件使用的時(shí)間就會(huì)很短，只需要100ms。如果一個(gè)過渡動(dòng)畫你感覺太快或者太慢，建議以25ms的增量來調(diào)整它的持續(xù)時(shí)間，直到最終達(dá)到一個(gè)比較舒服的狀態(tài)。

　　Easing(緩動(dòng))描述了動(dòng)畫的加速和減速速率，大多數(shù)導(dǎo)航的切換使用 Material動(dòng)畫的標(biāo)準(zhǔn)緩動(dòng)，這是一種非對(duì)稱類型的緩動(dòng)形式。這意味著元素在開始階段以很大的加速度進(jìn)行加速運(yùn)動(dòng)，然后再以很小的加速度去減速，目的是將用戶注意力集中在過渡結(jié)束的位置。這種類型的緩動(dòng)使得動(dòng)畫看起來非常自然，因?yàn)楝F(xiàn)實(shí)世界中的物體是不會(huì)立即開始或者停止運(yùn)動(dòng)的。如果過渡看起來很僵硬、不自然，很可能是因?yàn)殄e(cuò)誤的選擇了對(duì)稱性或者線性速率。

（圖片來自網(wǎng)絡(luò)）

　　以上就是小編為你整理的關(guān)于UI動(dòng)效設(shè)計(jì)的相關(guān)資料，希望可以幫助你更好的掌握UI設(shè)計(jì)的動(dòng)效類型和設(shè)計(jì)的技巧，讓你在做ui交互設(shè)計(jì)的時(shí)候更輕松哦!