移動界面的動效類型/分類維度有哪些？

01-01

移動界面中動效一般有入場動效、界面元素登場動效、轉場過渡動效、操作觸發及狀態反饋動效、信息載入動效等等，還有其他嗎？
或者如果給移動界面動效分類的話，最合適的維度應該是怎麼樣的呢？
跪求知乎大神牛們解惑答疑！

從問題描述來看，提問的同學對界面設計中的動效已經有不少觀察和積累了，似乎只差一點點總結。看到這個問題之前，我也沒想過給界面設計的動效分類。既然看到了，可以借這個機會梳理一下自己的思路~所以在這裡拋磚引玉了。

1. 按照動效的出現時機：

入場動效、轉場動效、信息載入動效——題主舉例的這些都可以說是按照出現時機分類的動效吧。細分下來，每個交互點都可以是一個動效出現的時機，沒辦法逐個命名、完全窮盡，只能具體情況具體命名了。

2. 按照設計動效的目的：

反饋當前狀態、提示信息層級、增強界面的情感化因素……如果說設計都是有有意識地去解決某個問題，那麼設計產出的動效，也可以按照明確地目的來分類。（推薦《流動之美-探討移動動效設計_Tamic的交互設計》。這篇文章中談到的動效設計的6大作用，我理解就是將動效按照設計目的來分類啦~）

3. 按照動效的表現風格：

動效的表現風格和視覺設計風格密不可分。這種分類的劃分比較感性。大致想到的有：

誇張擬人型——常見於動畫片的動作設計，可以明顯感覺到動作中的阻尼。運用到界面中，可以讓界面元素擬人化、富有感情色彩；

流暢爽利型——像Medium界面中的大部分動效、Clear的動效等，與簡潔的界面風格一致的極簡動效；

科幻魔法型——變形是科幻和魔幻作品中經久不衰的主題，其中的超現實感也可以給界面的動效設計帶來啟發和靈感。

4. 按照動效的呈現方式：

Meaningful Transitions 這個網站是 Johannes Tonollo 本科畢業論文的副產品。其中總結了界面動效的幾種主要呈現方式，值得仔細研究：

（嚴格來講，Feedback 和 Feedforward 與其說是按照呈現方式，不如說是按照設計目的來劃分的。）

恩，暫時想到這麼多了。如果有了新想法再過來補充。

最後碎碎念多說幾句，某知乎牛人曾說他解決問題的思路是「先問為什麼，再問是什麼」，我個人是很認同的。生命寶貴，對於 profession 領域的問題，應該先想清楚目的，再去尋求或總結答案。分類或許可以為動效設計提供一個現成的框架，但是如何幫助我們更好的設計動效呢？似乎並不清楚。所以，在此我也期待其他人的解答~

該回答移至本人知乎專欄

從iosAndroid系統談動效設計 - 狐痴山 - 知乎專欄

動效從不同維度看可以有很多種分類方法，而我們對動效進行分類的目的無外乎：1、方便理解與記憶。2、方便項目管理。基於上述目的，我舉例兩種個人工作中最常用分類方法。

1、動效的專業維度 -（方便理解與記憶）

專業維度以動效本身的目的、作用為出發點，總體可分為3大類：A.信息交互、B.操作與反饋、C.情感與品牌。

A. 信息交互：指系統中元素的狀態發生變化時銜接類的動效。這類動效主要有2種作用：1、解釋空間關係（如：應用打開與關閉、層級遞進與返回...）；2、元素銜接過渡（如：APP Bar的Collapse效果、iOS日曆中的年月日的切換…）。

B. 操作與反饋：指當用戶與系統中的元素產生交互時的反饋性動效。這類動效主要有2種作用：1、對操作的反饋（如：iOS中開關按鈕的動效、Android的水波紋...）。2、對狀態的反饋（如：系統中的Loading類動效、iOS中密碼輸入錯誤的動效...）。

C. 情感與品牌：指系統中展示品牌調性的趣味性動效。這類動效主要有2種作用：1、強化品牌認知（如：開機動畫、語音動畫…）；2、創造愉悅感（Onboarding頁的引導動畫、icon的微動畫...）

2、動效的業務維度 -（方便項目管理）

業務維度以動效所對應的產品的功能特性為出發點，這裡以操作系統產品（Operating System，簡稱OS）為例，總體可分為2大類：A.系統級動效、B.應用級動效。

A.系統級動效：指在系統各場景中反覆出現且形式一致的動效。主要包括3種類型：1、轉場（如開關應用、翻頁、跳轉、劃屏…）；2、控制項（Button、Slider、Switch、CheckBox...）；3、模式（如：下拉刷新、空頁面...）。

B.應用級動效：指系統各個模塊內，形式各異的特性動效。主要模塊分類包括：開機、桌面、語音、各個系統APP等等。

整體的概覽如下圖：

以我的實際工作經驗來看，上述分類方式基本能覆蓋住99%的動效場景，可以將動效系統的管理起來，希望對大家有幫助。

最近正好在研究動效，我們從動效的用途方面進行了以下分類：

1. 頁面轉場動效

展現頁面關係
聚焦對象
流程引導
統一編排

2. 操作引導及反饋

狀態切換與過渡
流程引導
自身狀態變化
平面空間內容組織
立體空間內容組織

3. 內容呈現

個性化
描述過程
展現邏輯關係
展現層級關係
漸進引導

4. 取悅用戶

自然過渡
產生愉悅
製造驚喜

目前移動設計中出現的動效都是以上分類的獨立或組合展示，如有遺漏請添加。

歡迎一起探討。

請參考keynote動效分類~

根據各位大神和優設網上的文章，加上自己最近做的一些東西進行整理的謝謝各位。

原文網址：初步總結頁面間跳轉動效

比較反對硬生生給界面動畫分類。動畫的存在是為了更好的體現界面本身的語言，是界面的有機組成部分，該有則有，不應該有的地方硬加上只會嘩眾取寵。我們所做的一切都是為了產品，為了人和機器的溝通，加上華麗的代名詞和生澀的分類於產品無益，於行業無益。所以界面特效的存在只有一個類型：表達型。

我先簡述動效所能提供的作用，接著按照其作用進行分類。

動效設計在移動端的應用可帶來如下六種好處：

(1) 過渡流暢

通過界面及其元素的出現和消失，以及大小、位置和透明度的變化，使用戶和產品的交互過程更流暢。

(2) 高效反饋

通過動效讓用戶了解程序當前狀態，同時對用戶操作（平移、放大、縮小、刪除等）及時做出反饋。

(3) 引導操作

通過動效對功能的方向、位置、喚出操作、路徑等進行暗示和指導，以便用戶在有限的移動屏幕內發現更多功能。

(4) 層級展現

通過焦點縮放、覆蓋、滑出等動效幫助用戶構建空間感受。

(5) 增強操縱

通過動效對現實世界的模擬並且不需要任何提示，迎合用戶的意識認知。使產品的交互方式更接近真實世界。

(6) 創新體驗

通過細節的設計和交互方式的創新為產品增加亮點，或者在某些系統錯誤情況下減緩用戶的焦慮不安的情緒，為APP帶來更情感化的體驗，可以表達出產品的氣質與態度，以塑造品牌價值。

動效類型：轉場類動效、反饋類動效、引導類動效、模擬類動效、趣味性動效、品牌塑造類動效。

動效作用參考文章：

流動之美-探討移動動效設計

動效只是更多的感官體驗而已。在時間維度增加要表達的內容，那麼它的分類就直接按照目的來劃分，是要主動吸引，還是給的操作後反饋。一般設計過程中兩者也會有相互照應的時候