四個移動介面最常見的動效類型

 　　這兩天有一款動效神器Hype 3特別受歡迎，借這股動效的勁頭，今天胡癡兒(騰訊使用者體驗設計師)給同學們科普一下動效的類型 >>>

　　一、動效起源於什麼?

　　iOS 6(視覺表層&資訊的外觀)→ iOS 7(動效&資訊的運作方式)

　　二、動效是用來幹什麼的?

　　表現視覺層級關係的

　　是幾種UI元素之間的相互轉換

　　三、動效如何分類?

　　一個元素如何能夠填滿整個頁面?

　　如何引導使用者的視線?

　　一、Icon → Page

　　iOS 鏡頭運動&焦點移動

　　icon即APP&檔案夾本身。

　　進階視圖 → 細節視圖

　　Z軸，鏡頭向icon圖層做相向運動，視野縮小，視野中物體變大;

　　XY軸，icon放大變成app&檔案夾，切換為app介面&檔案夾

　　(iOS的視差效果&鏡頭運動&空間深度)

　　APP的 icon → 全屏APP介面

　　APP的空間態：

　　啟動：

　　二、list → Page

　　Android

　　1. 漣漪反饋 → 舊頁面Fade：

　　2. 新頁面上浮：

　　漣漪紋

　　List上浮，展開Detail View

　　三、Button → Page

　　iOS

　　四、Tilte → Page

　　五、page → 多任務

　　iOS：

　　APP的時間態：單任務&全屏介面 —— APP在空間上無法跳轉→(APP間不能同時呈現而只能用)時間先後次序選擇。

　　X軸水平排列，APP間共處於同一平面

　　鏡頭向表徵圖圖層做反向運動則視野擴大，APP介面縮小

　　Andriod：

　　XY軸，垂直，上下排列，高低疊加

　　APP的Page和其他APP同在Z軸空間

　　Safari：Z軸&鏡頭從平視變為俯瞰：

　　Chrome：Y軸，被拉下去了：

　　鎖定畫面：

　　若鎖屏前是icon介面：

　　鏡頭穿過icon圖層，向icon介面做相對運動

　　若鎖屏前是APP介面

　　鏡頭則向APP介面做相對運動

　　臨時圖層：

　　當鎖定畫面收到通知&密碼解鎖&拉出通知中樞&拉出控制中心，表明有”臨時“圖層覆蓋，則：

　　毛玻璃&背景虛化&淺景深&距離感&層次感

　　前景“淺景深”

　　背景“視差”

　　附一張圖