App動效類型大梳理

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

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

主要分為以下幾部分：

一、控件動畫

控件動畫，可在動畫運動曲線、動畫出現方向等方面，進行統一處理。給用戶帶來順滑的轉場動畫，讓整個頁面更加順滑，并且有規則。

分為以下6種：

1 toast 提示條（出現——消失動畫）

2 dialog（出現——操作——消失動畫）

3 導航／頁簽切換動畫

4 actionsheet動畫

5 分享控件動畫

6 選擇控件動畫

二、加載動畫

分為以下5種：

1 下拉刷新加載

下拉加載一般分為兩種形式：動畫加文字、純動畫。

2 切換新頁面數據加載

當切換到新頁面時，常常會有加載數據的時候。主要有：轉菊花的動畫，進度條的動畫，百分比的進度動畫。

3 頁面上拉加載

上拉加載的樣式不會過于復雜，一般與下拉加載的動畫配套來實現，上下盡量保持一致。

4 頁面局部加載

常見的局部加載場景有視頻列表、加載圖片的占位圖等。

三、細節動畫

有以下2種：

1 點贊動畫

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

2二維碼動畫

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

四、功能模塊動畫

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

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

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

五、彩蛋動畫

為了用戶營造驚喜，和體現產品設計逼格的地方。在產品關鍵路線中的一些彩蛋動畫設計，能為用戶帶來較高的愉悅感。在聊天軟件中的，關鍵詞彩蛋，豐富聊天情感，增強互動。

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

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

除此之外，還有運營動畫，各類banner動畫。它需要根據各類需求，選擇適合的動畫。在這里不做統一的劃分，它需要結合具體的場景、表達內容點以及傳達意圖來說。

 

來自：https://zhuanlan.zhihu.com/p/24832096