從ios&Android系統談動效設計

一、動效起源於什麼？

• ios6(視覺表層&信息的外觀）→ios7(動效&信息的運作方式）

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

• 表現視覺層級關係的

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

在手機上建立坐標系

三、動效如何分類？

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

• 如何引導用戶的視線？

（1）icon→Page

ios鏡頭運動&焦點移動

icon即APP&文件夾本身

高級視圖→細節視圖

• 集合視圖轉換（UI Collection View Transition Layout）：以用戶操作焦點為中心的運動
• 基準點&線：用戶的操作點或軸
• 運動路徑：根據操作點和軸進行移動
• 規律：越靠近屏幕邊緣的操作焦點，越以更高的啟動速度開啟界面

• 用戶感覺：中心點內容離操作者更近，屏幕邊緣離操作者相對較遠
• 意義：銜接操作與界面切換過渡動態，引導用戶在不同界面的切換過程中移動視覺焦點

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

• XY軸，icon放大變成app&文件夾，切換為app界面&文件夾
• 圖標以屏幕中心為軸漸次縮放每個圖標，產生一種由遠及近貼到主屏上的感覺

（iOS的視差效果&鏡頭運動&空間深度）

APP的icon→全屏APP界面

APP的空間態

• 用戶的操作點為放大中心

同理，

ios的相冊

年度→精選→時刻→照片

1. 照片縮略圖在不同尺寸上的的放大直至全屏查看

2. 動態運動軌跡取決於用戶在屏幕上的觸摸點

• 年度→精選

• 精選→時刻

• 時刻→照片

Android

• Launch

（2）list→Page

Android

1.漣漪反饋→舊頁面fade

2.新頁面上浮

漣漪紋

• List上浮，展開Detail View

（3）button→Page

ios

android

（4）tilte→Page

ios日曆

• 年視圖→月視圖

以用戶所點擊的具體日期為中心進行動態放大切換

• 月視圖→周視圖

則是以所點擊的日期所在行，進行 Y 軸的縱向提升

印象筆記

ios天氣

（5）page→多任務

ios

APP的時間態

單任務&全屏界面——

APP在空間上無法跳轉→（APP間不能同時呈現而只能用）時間先後次序選擇

• X軸水平排列，APP間共處於同一平面
• 鏡頭向圖標圖層做反向運動則視野擴大，APP界面縮小

同級轉化&兄弟轉化

andriod

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

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

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

• 縱向層疊瀏覽窗口

• 立體透視層疊效果

• 利用豎向屏幕空間

• 點擊位置作為基準線進行立體透視運動

chrome：Y軸，被拉下去了

鎖屏界面

若鎖屏前是icon界面

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

• 界面視差空間結構

附一張eico創意總監張卷益先生的圖

若鎖屏前是APP界面

• 鏡頭則向APP界面做相對運動

推薦閱讀：