動效設(shè)計作為能夠極大豐富我們的視覺體驗的一門設(shè)計，在當(dāng)下是非常盛行的，學(xué)習(xí)起來并不難，主要在于能夠細(xì)心專研，就可以學(xué)會，關(guān)鍵在于動手！什么是功能性的動效功能性動效，指的是在UI設(shè)計中作為功能的一部分被采用的小動效，有著非常明確和合理的目的。

- 為了減輕認(rèn)知的負(fù)擔(dān)。- 防止發(fā)生變化時看漏。- 在空間關(guān)系中確立良好的層級關(guān)系。- 以用戶為中心的設(shè)計方法，直觀的用戶界面，響應(yīng)性，人性化等等都是必須的。功能性動效，將有助于你實現(xiàn)這些目標(biāo)。也可以這樣思考：當(dāng)一個動效不符合一個功能性的目的，那么這個動效多存在可能會讓用戶覺得困惑或者惱怒。下面是我目前收集的這一系列的動效。我希望你會在你的設(shè)計中對你有所幫助。那么什么是指向性動效？它是指能夠有效的描述物體之間的邏輯關(guān)系，同時通過視覺效果，可視化的描述用戶操作時候當(dāng)前的狀態(tài)，用戶可以很清晰的感受到物體與物體之間的位置或者層級關(guān)系。指向型動效的分類1.滑動信息列表會跟隨著用戶的交互手勢而動，然后卡片到相應(yīng)的位置上，保持整齊感，它屬于指向型動畫，物體的滑動取決于用戶是用那種手勢滑動的。它的作用就是通過指向型轉(zhuǎn)場，有效幫助用戶清理頁面層級的排列情況。

2. 擴(kuò)大頁面中的卡片會從縮略圖轉(zhuǎn)化為全屏視圖（一般這個卡片的中心點(diǎn)也會跟隨移動到屏幕的中央）。反向動效就是卡片從全屏視圖轉(zhuǎn)換為縮略圖。它的優(yōu)點(diǎn)是能清楚的告訴用戶點(diǎn)擊的地方被放大了。

3. 最小化頁面元素點(diǎn)擊之后縮小，然后移動到屏幕上相應(yīng)的位置，相反的動效就是擴(kuò)大，從縮略圖重新變?yōu)槿?。這樣做的好處是能夠清楚的告訴用戶，最小化的元素可以在哪里被找到，如果沒有動效引導(dǎo)，可能用戶需要花時間去尋找。

4. 切換對象當(dāng)前頁面移動到后面，新的頁面移動到前面，這樣能夠清楚解釋頁面之間是進(jìn)行切換的，不會顯得轉(zhuǎn)換的太突兀和莫名其妙。

5. 展開推疊堆疊在一起的元素被展開。能夠清楚的告訴用戶每個元素的排列情況，從哪里來到哪里去，也顯得更加有趣。

6. 翻頁當(dāng)用戶實施滑動手勢的時候，出現(xiàn)像現(xiàn)實生活中翻頁一般的效果。真正動效轉(zhuǎn)場也能夠清晰的展現(xiàn)列表層級的信息架構(gòu)，并且模仿現(xiàn)實生活中的動效更加富有情感。

7. 添加到列表新的元素加入到原有的列表中，舊的元素被推開而不是替換，從而有現(xiàn)實中騰出位置的感覺，這種轉(zhuǎn)場效果能夠清楚的展現(xiàn)列表重新排列的過程，讓用戶知道新舊信息的位置，不會產(chǎn)生迷惑。

8. 導(dǎo)航標(biāo)簽轉(zhuǎn)換根據(jù)內(nèi)容的轉(zhuǎn)換，按鈕相應(yīng)的在視覺上做出改變，而標(biāo)題是隨著內(nèi)容移動而改變的，這樣能夠清晰的展示標(biāo)簽和內(nèi)容之間的從屬關(guān)系，讓用戶能夠清晰理解頁面之間的架構(gòu)。

9. 融合元素會根據(jù)用戶的點(diǎn)擊交互而分離或者是結(jié)合，用戶可以感受到元素與元素之間的關(guān)聯(lián)，比起直接切換，顯然用融合動畫更加有趣。

10. 滾動根據(jù)用戶的手勢進(jìn)行滾動操作，非常使用與列表信息的查看。這個交互方式是我們用的最頻繁的，仙子我們也可以加入一些動效使這個交互更加的有趣和豐富。

11. 平移當(dāng)一張圖片在我們有限的屏幕里沒有辦法看完的時候，會使用這樣的效果。除了放大效果，這樣的平移還可以加上動效配合一些功能使用。

12.保存指示器用戶一旦進(jìn)行保存、下載某個物體，物體會復(fù)制一份，同時縮小、移動到保存指示器中。這樣可以提示用戶下載或者是收藏的內(nèi)容在哪里可以找到，能夠告訴用戶對象已經(jīng)被添加。適合場景1.滑動效果適合場景：當(dāng)你設(shè)計的元素需要導(dǎo)航以列表方式呈現(xiàn)的時候可以使用滑動效果。例如一些明星的選擇，款式的選擇，適合用這樣的方式呈現(xiàn)。

2. 彈出效果適合場景：當(dāng)你設(shè)計的元素是需要和用戶進(jìn)行單一交互的時候。例如點(diǎn)開圖片查看詳情，讓轉(zhuǎn)場過渡更自然。

3. 最小化適合場景：當(dāng)用戶想要最小化某個元素的時候。例如搜索、添加快捷按鈕的點(diǎn)擊事件，符合從哪來到哪去的原理。

4. 切換對象適合場景：當(dāng)用戶在元素之間切換?；瑒有Ч鄬碚f比較單一和常見，使用動效切換可以讓用戶產(chǎn)生眼前一亮的效果，例如一些商品款式的切換，就可以使用這樣的效果。

5. 展開推疊適合場景：當(dāng)用戶打開一堆功能選項的時候。例如一個功能里面隱藏了好幾個二級功能時，就可以使用這樣的效果，利于用戶引導(dǎo)。

6. 翻頁效果適合場景：當(dāng)用戶進(jìn)行一些翻頁操作時。例如看小說，讀長篇文章，使用這樣的效果會更貼近現(xiàn)實生活，引起用戶共鳴。

7. 添加到列表適合場景：當(dāng)用戶需要進(jìn)行新操作時。有一些頁面呈現(xiàn)的是將新的事件替換掉舊的，而使用這樣的動效可以讓用戶更清晰的知道自己做了什么，例如點(diǎn)贊，打賞。

8. 導(dǎo)航標(biāo)簽轉(zhuǎn)換適合場景：同一層級頁面之間的切換。例如切換導(dǎo)航，或者進(jìn)度流程。使用動效可以讓用戶更了解架構(gòu)，是標(biāo)簽而不是按鈕的感覺。

9. 融合效果適合場景：當(dāng)用戶操作一個功能點(diǎn)時可能會處罰其他功能。例如運(yùn)動app開始健身或者跑步的時候，點(diǎn)擊開始后會出現(xiàn)暫定或是結(jié)束。

10. 滾動適合場景：當(dāng)用戶垂直或者水平移動頁面時。例如列表，圖片，很多場景下都可以使用，也因此過于平凡，可以加一些動效讓頁面活起來。

11. 平移適合場景：移動大于界面的的頁面。例如地圖，可以配合其他功能滾動產(chǎn)生平移效果。

12.保存指示器適合場景：當(dāng)用戶添加書簽、下載、保存，加入等行為的時候使用。各種各樣的設(shè)計趨勢層出不窮，這一點(diǎn)足見設(shè)計師們的探索之心。漂亮的視覺，舒適的體驗，流暢的動效，自然的聲音，如今的UI設(shè)計的要求真的是越來越高。為了更好的設(shè)計，世界范圍內(nèi)的設(shè)計師都會不遺余力地前進(jìn)和發(fā)現(xiàn)。最后再強(qiáng)調(diào)一下，AE到底有多重要呢？它除了可以更加生動的展示產(chǎn)品的功能、界面、交互操作等細(xì)節(jié)，讓設(shè)計細(xì)節(jié)更生動的體現(xiàn)出來。而且還能增加設(shè)計的親和力和趣味性。