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

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

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

因?yàn)樵撥浖菀咨鲜帧?主要談手機(jī)App中的轉(zhuǎn)場動(dòng)效,強(qiáng)烈推薦原型設(shè)計(jì)師閱讀學(xué)習(xí),體驗(yàn)下動(dòng)效的神奇妙用。

1.滑動(dòng)

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

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

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

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

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

?APP動(dòng)效設(shè)計(jì)案例：

看點(diǎn)：

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

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

3.最后堆疊、展開效果

2.彈出

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

運(yùn)動(dòng)描述：物體會(huì)從縮略圖轉(zhuǎn)化為全屏視圖（一般物體的中心點(diǎn)也會(huì)同時(shí)移動(dòng)到屏幕中央）

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

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

用戶感受：物體在放大

APP動(dòng)效設(shè)計(jì)案例：

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

3.最小化

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

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

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

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

用戶感受：物體在縮小

APP動(dòng)效設(shè)計(jì)案例：

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

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

4、切換對(duì)象

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

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

一致性：

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

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

APP動(dòng)效設(shè)計(jì)案例：

現(xiàn)在可能不太流程這種幅度太大的動(dòng)效，因?yàn)榭赡軙?huì)導(dǎo)致用戶感到突兀

5.展開堆疊

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

運(yùn)動(dòng)描述：堆疊的一堆物體被展開

一致性：將一群物體堆疊

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

用戶感受：物體似乎擴(kuò)展開來了

6.翻頁

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

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

一致性：指向性動(dòng)效，翻頁的指向取決于手指滑動(dòng)的指向

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

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

APP動(dòng)效設(shè)計(jì)案例：

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

7.添加到列表

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

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

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

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

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

APP動(dòng)效設(shè)計(jì)案例：

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

8.固定標(biāo)簽

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

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

一致性：-

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

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

APP動(dòng)效設(shè)計(jì)案例：

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

9.橫豎屏切換

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

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

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

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

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

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

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

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

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

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

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

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

11.分合

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

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

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

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

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

12.滾動(dòng)

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

運(yùn)動(dòng)描述：根據(jù)用戶手勢指向滾動(dòng)

一致性：

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

用戶感受：

Albumatic應(yīng)用

13.平移

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

運(yùn)動(dòng)描述：

一致性：

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

用戶感受：

14.滾動(dòng)條

適用場合：滾動(dòng)列表時(shí)

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

一致性：

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

用戶感受：

15.頁碼指示器

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

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

一致性：

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

APP動(dòng)效設(shè)計(jì)案例欣賞：

16.保存指示器

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

運(yùn)動(dòng)描述：用戶一旦保存、下載某個(gè)物體，物體會(huì)復(fù)制一份，同時(shí)縮小、移動(dòng)到保存指示器中

一致性：

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

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

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

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

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

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