App中的動效設(shè)計不是具體的需求設(shè)計，不能對產(chǎn)品本身產(chǎn)生很大的變化和改進(jìn)，只是能在設(shè)計層面和體驗層面為用戶創(chuàng)造多一點的價值。所以在做相關(guān)設(shè)計的時候，不可為做動效而做動效，要把握住動效的“度”，不可華而不實，需要服務(wù)于具體的需求和場景。

App的龐大復(fù)雜度和動效的豐富度成反比，App越復(fù)雜，其動效也應(yīng)該輕量化而簡潔。App功能越簡單，其動效則可以適度豐富，甚至形成與自己App相符合的動效風(fēng)格。

主要分為以下幾部分：

一、控件動畫

控件動畫，可在動畫運(yùn)動曲線、動畫出現(xiàn)方向等方面，進(jìn)行統(tǒng)一處理。給用戶帶來順滑的轉(zhuǎn)場動畫，讓整個頁面更加順滑，并且有規(guī)則。

分為以下6種：

1. toast 提示條（出現(xiàn)——消失動畫）
2. dialog（出現(xiàn)——操作——消失動畫）
3. 導(dǎo)航／頁簽切換動畫
4. actionsheet動畫
5. 分享控件動畫
6. 選擇控件動畫

二、加載動畫

分為以下4種：

1. 下拉刷新加載：下拉加載一般分為兩種形式：動畫加文字、純動畫。
2. 切換新頁面數(shù)據(jù)加載：當(dāng)切換到新頁面時，常常會有加載數(shù)據(jù)的時候。主要有：轉(zhuǎn)菊花的動畫，進(jìn)度條的動畫，百分比的進(jìn)度動畫。
3. 頁面上拉加載：上拉加載的樣式不會過于復(fù)雜，一般與下拉加載的動畫配套來實現(xiàn)，上下盡量保持一致。
4. 頁面局部加載：常見的局部加載場景有視頻列表、加載圖片的占位圖等。

三、細(xì)節(jié)動畫

有以下2種：

1、點贊動畫

點贊分為連續(xù)贊和單獨贊。點贊時為了給用戶營造良好的用戶體驗和心里滿足，一般會藏有彩蛋動畫，從而刺激用戶點擊欲。

2、二維碼動畫

下落收起動畫，二維碼作為社交app中的個人身份的代表，大多使用card下落又收起的動畫。

四、功能模塊動畫

根據(jù)各個app的突出特色功能和亮點功能，一體化的設(shè)計它那個模塊的動畫，詳細(xì)刻畫。啟動頁加載動畫。

例如社交類app的尋找好友模塊，加好友模塊。

例如安全類app的安全掃描模塊，安全檢測模塊。

五、彩蛋動畫

為了用戶營造驚喜，和體現(xiàn)產(chǎn)品設(shè)計逼格的地方。在產(chǎn)品關(guān)鍵路線中的一些彩蛋動畫設(shè)計，能為用戶帶來較高的愉悅感。在聊天軟件中的，關(guān)鍵詞彩蛋，豐富聊天情感，增強(qiáng)互動。

例如same app中，隨著上拉刷新，雞的眼神和嘴形都有變化。

例如涂手 app中，隨著上拉刷新，手指間的小動作，戳戳手的小互動，讓人在等待刷新過程中，更加有情感化和趣味性。

除此之外，還有運(yùn)營動畫，各類banner動畫。它需要根據(jù)各類需求，選擇適合的動畫。在這里不做統(tǒng)一的劃分，它需要結(jié)合具體的場景、表達(dá)內(nèi)容點以及傳達(dá)意圖來說。

作者：戴維，來自Tencent ISUX的一枚交互設(shè)計師， 知乎專欄：戴小維的交互學(xué)習(xí)小站

本文由 @戴維 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。