廢話不多說，25學(xué)堂今天跟大家說說APP動效設(shè)計分類和APP動效制作軟件分享。

下面是是16種常見的APP動效設(shè)計分類大全以及相應(yīng)的APP動效設(shè)計案例欣賞。

之前也介紹過的《移動APP的交互動效設(shè)計5點規(guī)范和交互動效分類》，最近APP設(shè)計群里的很多同學(xué)都在問，APP動效到底是用什么軟件制作的呢？ 今天老譚在這里統(tǒng)一回答大家，新手可以用AE（after effects）來制作設(shè)計APP動效。

因為該軟件容易上手。,主要談手機App中的轉(zhuǎn)場動效,強烈推薦原型設(shè)計師閱讀學(xué)習(xí),體驗下動效的神奇妙用。

1.滑動

適用場合：當(dāng)用戶需要導(dǎo)航以列表方式呈現(xiàn)的信息時

運動描述：信息列表會跟隨用戶的滑動交互手勢而移動。物體會自動移動到適當(dāng)?shù)奈恢?，保持整齊感

一致性：屬于指向性轉(zhuǎn)場動效，物體的滑動取決于用戶滑動手勢的指向

優(yōu)點：通過指向性轉(zhuǎn)場，有效的幫助用戶理清物體的排列狀況

用戶感受：像是在捋一條長長的綢帶

?APP動效設(shè)計案例：

看點：

1.動畫前半部分的滑動附上了彈性，加深了物理感。

2.后半部分注意左右list 和calendar散開一剎那時，輕微的放大，打造了一種鏡頭感

3.最后堆疊、展開效果

2.彈出

適用場合：當(dāng)用戶與單一物體交互時

運動描述：物體會從縮略圖轉(zhuǎn)化為全屏視圖（一般物體的中心點也會同時移動到屏幕中央）

一致性：反向動效是對象從全屏視圖轉(zhuǎn)換為縮略圖

優(yōu)點：能夠清楚的告訴用戶，是哪個物體被放大了

用戶感受：物體在放大

APP動效設(shè)計案例：

看點：底部標(biāo)簽欄圖標(biāo)按三個方向上移消失，下方彈出一個X圖標(biāo)，與此同時彈出3個小圖標(biāo)。

3.最小化

適用場合：當(dāng)用戶想要最小化某個物體時

運動描述：物體縮小，同時移動到屏幕上的相應(yīng)位置

一致性：相反的動效就是擴大，從縮略圖重新變?yōu)槿?

優(yōu)點：能夠清楚的告訴用戶，最小化的物體可以在哪里被找到。

用戶感受：物體在縮小

APP動效設(shè)計案例：

其實放大/縮小最杰出的典范大概就是iOS7的打開應(yīng)用程序/退回主屏幕了，這個也不錯的動效設(shè)計。

這個動效，即作為啟動屏,一定程度上緩解了用戶焦慮，同時又是Logo，提升了品牌效應(yīng)，最后應(yīng)用啟動后的縮小，能夠很好地聯(lián)系上下文，讓用戶不致感到突兀。

4、切換對象

適用場合：當(dāng)用戶在對象之間切換時

運動描述：當(dāng)前物體移動到后面，新的物體(應(yīng)用)移動到前面

一致性：

優(yōu)點：能夠解釋清楚物體/應(yīng)用程序之間進行了切換

用戶感受：原物體縮回，新物體出現(xiàn)

APP動效設(shè)計案例：

現(xiàn)在可能不太流程這種幅度太大的動效，因為可能會導(dǎo)致用戶感到突兀

5.展開堆疊

適用場合：當(dāng)用戶打開一沓物體時

運動描述：堆疊的一堆物體被展開

一致性：將一群物體堆疊

優(yōu)點：能夠清楚的告訴用戶，物體的排列情況

用戶感受：物體似乎擴展開來了

6.翻頁

適用場合：當(dāng)用戶翻頁時

運動描述：當(dāng)用戶實施滑動手勢時，出現(xiàn)生活中翻頁一般的效果

一致性：指向性動效，翻頁的指向取決于手指滑動的指向

優(yōu)點：這種動效轉(zhuǎn)場能夠清晰的展現(xiàn)列表信息的信息架構(gòu)

用戶感受：似乎感覺和真實生活中的翻頁差不多

APP動效設(shè)計案例：

Flipboard和Paper是翻頁風(fēng)的代表，不過Steller也不錯，（300k，圖像質(zhì)量壓縮的比較過）

7.添加到列表

適用場合：當(dāng)用戶需要將物體添加到已存列表中時

運動描述：新物體會滑動到列表中，而列表中得舊內(nèi)容會被擠走（是主動讓位還是被擠走，效果可以自行嘗試），從而騰出空間

一致性：相反的轉(zhuǎn)場動效是刪除列表中得物體

優(yōu)點：這種轉(zhuǎn)場效果能夠清楚的展現(xiàn)列表的重新排列過程，讓用戶知道舊信息到哪兒去了，新信息在哪里

用戶感受：舊列表似乎再給新物體騰出空間

APP動效設(shè)計案例：

這個動畫速度比較快，實際上下了Task的童鞋可以看到，是通過折疊把上面的列表向上“推”給新項目騰出空間。

8.固定標(biāo)簽

適用場合：當(dāng)用戶滾動帶有標(biāo)簽的列表時（常見的頭部固定，可參考iOS7的電話簿列表）

運動描述：標(biāo)簽會始終保持在列表的頂部，兼顧了導(dǎo)航和內(nèi)容瀏覽

一致性：-

優(yōu)點：這種動效能夠清晰的描述出內(nèi)容與標(biāo)簽之間的關(guān)系

用戶感受：標(biāo)簽始終保持在列表的頂部

APP動效設(shè)計案例：

導(dǎo)航欄，現(xiàn)在不流行死板的固定不動，而是下滑手勢出現(xiàn)，上滑手勢消失，增大可讀區(qū)域。

9.橫豎屏切換

適用場合：當(dāng)內(nèi)容需要根據(jù)設(shè)備的旋轉(zhuǎn)來旋轉(zhuǎn)、重新排列時

運動描述：內(nèi)容伴隨屏幕的旋轉(zhuǎn)而旋轉(zhuǎn)，與設(shè)備旋轉(zhuǎn)指向一致。

一致性：內(nèi)容的旋轉(zhuǎn)取決于設(shè)備的旋轉(zhuǎn)

優(yōu)點：能夠在設(shè)備旋轉(zhuǎn)的同時，平滑的保證內(nèi)容的過渡

用戶感受：內(nèi)容好像是液態(tài)的，伴隨屏幕旋轉(zhuǎn)

10.按鈕標(biāo)簽轉(zhuǎn)換

適用場合：同一層級之間的導(dǎo)航

運動描述：根據(jù)內(nèi)容的轉(zhuǎn)換，按鈕相應(yīng)地在視覺上轉(zhuǎn)換為標(biāo)簽

一致性：標(biāo)題隨內(nèi)容移動、改變

優(yōu)點：能夠清晰的展示標(biāo)簽和內(nèi)容之間的從屬關(guān)系，讓用戶理解架構(gòu)

用戶感受：按鈕轉(zhuǎn)換為標(biāo)簽

Flickr for iOS細節(jié)之一（稍后我們會放出《Flickr for iOS的20處交互細節(jié)》）

11.分合

適用場合：當(dāng)用戶分離 結(jié)合物體時

運動描述：物體會根據(jù)用戶的交互行為而分離/結(jié)合

一致性：分離與結(jié)合

優(yōu)點：能夠讓用戶清晰的感受到物體之間分合關(guān)系

用戶感受：分離和結(jié)合

12.滾動

適用場合：當(dāng)用戶水平或垂直的移動物體時

運動描述：根據(jù)用戶手勢指向滾動

一致性：

優(yōu)點：非常適用于列表信息的查看

用戶感受：

Albumatic應(yīng)用

13.平移

適用場合：當(dāng)用戶水平或垂直的移動物體時

運動描述：

一致性：

優(yōu)點：非常適合地圖界面

用戶感受：

14.滾動條

適用場合：滾動列表時

運動描述：當(dāng)屏幕中的信息滾動時，滾動條也成比例的滾動

一致性：

優(yōu)點：能夠告知用戶當(dāng)前所處的位置，也能讓用戶了解信息的長度

用戶感受：

15.頁碼指示器

適用場合：當(dāng)翻頁、切換屏幕內(nèi)容時

運動描述：通過實心點得移動來告知用戶頁面已經(jīng)切換，同時還能告知用戶頁面的數(shù)量

一致性：

優(yōu)點：能夠告訴用戶當(dāng)前處于哪一頁，總共多少頁

APP動效設(shè)計案例欣賞：

16.保存指示器

適用場合：當(dāng)用戶添加書簽、下載、保存時

運動描述：用戶一旦保存、下載某個物體，物體會復(fù)制一份，同時縮小、移動到保存指示器中

一致性：

優(yōu)點：能夠提示用戶下載的內(nèi)容能在哪里找到，能夠告訴用戶對象已經(jīng)被添加

用戶感受：所下載的物體飛到了下載文件夾中了。

最后，有興趣的小伙伴們可以學(xué)習(xí)APP動效設(shè)計入門教程以及設(shè)計方法總結(jié)和一些app動效設(shè)計知識。當(dāng)然，這些只是跟大家聊聊一些app動效的設(shè)計的技巧和方法。

具體的操作可以給我們留言。

25學(xué)堂推薦一款關(guān)于Easy?Slowmo?FX?慢動作特效制作軟件的APP。

文章轉(zhuǎn)載自：http://www.ui.cn/project.php?act=view&id=13576&pm=1&p=7 。