UI移動端界面動畫創意與實現

本書內容涉及手機、移動設備的UI動效設計基礎、自然回饋動效設計、層級關係動效設計、愉悅的等待動效設計及打造活力視覺動效設計。

前言

第1章 動效設計基礎知識1
1.1 什麼是動效設計2
1.2 動效設計方法2
1.2.1 理解動效2
1.2.2 動態設計舉例2
1.3 動效在介面設計中的用途3
1.3.1 觀察系統狀態3
1.3.2 導航和過渡4
1.3.3 使用者的視覺回饋4
1.3.4 加深印象5
1.3.5 增強操控感5
1.4 動效設計原則5
1.4.1 舒適度的建立5
1.4.2 令人愉悅的提示功能6
1.4.3 額外增加介面活力6
1.4.4 吸引用戶的注意力6
1.4.5 讓等待變得更愉快7
1.4.6 介面銜接的延續感7
1.5 動效製作要素8
1.5.1 回應的回饋8
1.5.2 快速靈敏8
1.5.3 簡明清晰9
1.5.4 目的性9
1.5.5 過渡流暢自然9
1.5.6 關聯性10
1.5.7 增強操縱10
1.5.8 引導幫助10
1.5.9 昇華體驗11
1.6 動效設計重點11
1.6.1 材質與空間11
1.6.2 運動軌跡11
1.6.3 時間表現力12
1.6.4 個性化元素12
1.6.5 導向設計12
1.6.6 背景關係13
1.6.7 交互共鳴13
1.6.8 情感表現14
1.6.9 聚焦動效14
1.7 動效設計表現手法14
1.7.1 拉伸與擠壓14
1.7.2 期望15
1.7.3 入場15
1.7.4 連續動作與姿態對應16
1.7.5 重疊與跟隨動作16
1.7.6 動勢漸進/漸出16
1.7.7 次級運動17
1.7.8 節奏時態17
1.7.9 誇張18
1.7.10 立體造型18
1.7.11 吸引力18
1.8 動效設計趨勢19
1.8.1 個性化元素19
1.8.2 有趣的運動方式19
1.8.3 交互回饋的生命力20
1.9 動效設計常用的軟體20
1.9.1 Adobe After Effects20
1.9.2 Adobe Photoshop21
1.9.3 Adobe Animate（Flash）21
1.9.4 pixate21
1.9.5 Hype 322

第2章 自然回饋動效設計23
2.1 登錄框輸入動效設計24
2.2 照片操作動效設計25
2.3 名片介面動效設計27
2.4 書寫動效設計29
2.5 密碼輸入動效設計31
2.6 郵箱登錄介面動效設計33
2.7 圖像切換動效設計36
2.8 撥號介面動效設計38
2.8.1 繪製觸控元件39
2.8.2 製作結果動畫40
2.9 翻滾動效設計42
2.9.1 制作主視覺動效42
2.9.2 製作觸控動效44
2.10 確認按鈕動效設計45
2.10.1 製作觸控按鈕45
2.10.2 製作結束動效47
2.11 開關控制項動效設計48
2.11.1 繪製控制項圖形49
2.11.2 繪製切換動畫50
2.12 換歌介面動效設計52
2.12.1 製作光碟控制項效果52
2.12.2 製作裝飾動畫53
2.13 滑動解鎖動效設計54
2.13.1 編輯狀態動畫55
2.13.2 繪製觸控圖形56
2.14 刷新動效設計57
2.14.1 製作滑動效果57
2.14.2 製作拉伸動效58
2.14.3 添加文字動畫59

第3章 層級關係動效設計61
3.1 收音機啟動介面動效設計62
3.2 相冊介面切換動效設計64
3.3 票務介面動效設計66
3.4 音樂播放介面動效設計68
3.4.1 製作選擇動畫68
3.4.2 繪製控制動畫元素69
3.5 好友列表動效設計70
3.5.1 製作動效元素71
3.5.2 處理動畫細節71
3.6 分享動效設計72
3.6.1 處理主體動畫效果73
3.6.2 製作跟隨元素動畫74
3.7 圖表資料動效設計75
3.7.1 處理細節元素動畫76
3.7.2 製作主體狀態動畫77
3.8 手錶介面切換動效設計78
3.8.1 繪製主介面動畫78
3.8.2 製作觸控動畫79
3.9 卡片切換動效設計80
3.9.1 製作主體動畫81
3.9.2 處理觸控元素動畫82
3.10 系統提示動效設計83
3.10.1 繪製主體動效元素84
3.10.2 制作主介面回饋動畫86
3.10.3 製作文字動畫87
3.11 功能交互動效設計88
3.11.1 製作狀態列動畫88
3.11.2 製作主體動畫控制項89
3.11.3 處理回饋動畫91
3.12 卡片式登錄介面動效設計92
3.12.1 製作觸控動畫92
3.12.2 製作輸入狀態93
3.12.3 編輯確認動畫95
3.12.4 製作切換動畫96
3.13 待機滑動動效設計98
3.13.1 製作主體狀態動畫98
3.13.2 添加文字動畫99
3.13.3 製作細節元素動畫100
3.13.4 製作結果動畫101
3.14 備忘便簽動效設計102
3.14.1 為素材圖像添加裝飾102
3.14.2 製作滑動動畫103
3.14.3 製作進度條進度動畫105
3.14.4 為進度條進度動畫添加裝飾105

第4章 愉悅的等待動效設計107
4.1 時鐘外掛程式動效設計108
4.2 上傳圖示動效設計109
4.3 抽獎轉盤動效設計111
4.4 資料應用loading動效設計113
4.4.1 繪製介面狀態113
4.4.2 製作loading動畫115
4.5 卡通載入動效設計116
4.5.1 製作進度條動效116
4.5.2 製作氣球動畫117
4.6 載入進度條動效設計119
4.6.1 繪製進度條動畫119
4.6.2 製作轉圈動畫120
4.7 提示動效設計123
4.7.1 製作觸發動效123
4.7.2 製作回應動效124
4.8 對錯控制項動效設計125
4.8.1 製作正確動畫效果125
4.8.2 繪製出錯動畫效果126
4.9 時間過渡動效設計127
4.9.1 編輯轉換效果128