●章 理解UI 交互設計
1.1 UI 設計 1
1.1.1 UI 設計概述 1
1.1.2 了解UI 設計師 2
1.1.3 UI 設計的特點 2
1.1.4 UI 設計的相關術語 4
1.2 交互設計與用戶體驗 5
1.2.1 交互設計概述 5
1.2.2 交互設計的基本步驟 5
1.2.3 用戶體驗概述 6
1.2.4 用戶體驗的5 個層面 6
1.2.5 用戶體驗的需求層次 9
1.2.6 交互設計與用戶體驗的關繫 12
1.3 移動端用戶體驗的發展趨勢 13
1.4 在UI 交互中加入動效設計 14
1.4.1 UI 動效的發展 14
1.4.2 動效在UI 交互設計中的作用 15
第2章 初識UI 交互動效
2.1 UI 交互動效 17
2.1.1 UI 交互動效概述 17
2.1.2 UI 交互動效的應用領域 18
2.2 交互動效與UI 設計 22
2.2.1 優秀交互動效的特點 22
2.2.2 交互動效的優勢 23
2.2.3 動效的分類 25
2.3 交互動效在用戶體驗中的應用 26
2.3.1 在交互過程中添加動效需要考慮的因素 26
2.3.2 如何表現交互動效 26
2.4 如何設計動效 28
2.4.1 要有一個創意想法 28
2.4.2 根據想法付諸行動 30
2.5 制作UI 交互動效的工具 30
2.6 認識基礎UI 交互動效 34
2.6.1 基礎動效 34
2.6.2 屬性變化 34
2.6.3 運動節奏 35
2.6.4 基礎動效組合應用 36
第3章 After Effects 軟件基礎操作
3.1 認識After Effects 37
3.1.1 After Effects 概述 37
3.1.2 After Effects 的應用領域 37
3.2 After Effects 工作界面 41
第4章 在After Effects 中制作動效並輸出
4.1 關鍵幀與圖表編輯器 79
4.1.1 幀與關鍵幀 79
4.1.2 創建關鍵幀 80
4.1.3 關鍵幀的基本操作方法 80
實例06——制作趣味矩形拼圖動效鈕 82
4.1.4 圖表編輯器的操作方法 89
實例07——制作彈跳變形動效 90
4.2 形狀的應用 97
4.2.1 關於形狀 97
4.2.2 創建路徑群組 98
4.2.3 路徑形狀屬性設置 99
實例08——制作簡單的Loading動效 102
4.3 調整動畫運動路徑 106
4.3.1 將直線運動路徑調整為曲線運動路徑 106
4.3.2 運動自定向 108
實例09——制作魔法飛行動效 108
4.4 創建和使用蒙版圖層 112
4.4.1 蒙版動畫原理 113
4.4.2 形狀工具 113
4.4.3 鋼筆工具 114
4.4.4 創建蒙版 114
實例10——為素材圖層創建蒙版 114
4.4.5 設置蒙版屬性 116
實例11——制作蒙版屬性動效 118
4.4.6 蒙版的疊加處理 121
實例12——制作掃描二維碼動效 122
4.5 在After Eff ects 中渲染輸出動畫 127
4.5.1 認識渲染工作區 127
4.5.2 理解渲染設置選項 128
4.5.3 渲染輸出 130
實例13——將動效渲染輸出為視頻文件 130
4.5.4 配合Photoshop 輸出GIF 文件 132
實例14——將動效輸出為GIF 動畫圖片 132
4.5.5 將動畫嵌入手機模板 133
實例15——將動畫效果嵌入手機模板中 133
第5章 制作素交互動效
5.1 按鈕與圖標動效設計 137
5.1.1 開關按鈕 137
5.1.2 制作開關按鈕動效 137
實例16——制作開關按鈕動效 138
5.1.3 圖標在UI 界面中的作用 143
5.1.4 圖標動效的常見表現方法 144
5.1.5 制作圖標變換動效 147
實例17——制作圖標變換動效 147
5.1.6 制作日歷圖標動效 153
實例18——制作日歷圖標動效 153
5.1.7 制作相機圖標動效 153
實例19——制作相機圖標動效 153
5.2 進度條動效設計 159
5.2.1 常見的進度條表現形式 159
5.2.2 制作矩形進度條動效 161
實例20——制作矩形進度條動效 161
5.2.3 制作圓形進度條動效 165
實例21——制作圓形進度條動效 165
5.3 工具欄動效設計 165
5.3.1 關於工具欄動效設計 165
5.3.2 制作展開工具欄動效 166
實例22——制作展開工具欄動效 166
5.3.3 制作工具圖標動感展開動效 175
實例23——制作工具圖標動感展開動效 176
5.4 文字動效設計 176
5.4.1 文字動效的表現優勢 176
5.4.2 常見的文字動效表現方法 177
5.4.3 制作手寫文字動效 180
實例24——制作手寫文字動效 180
5.4.4 制作閃光描邊文字動效 185
實例25——制作閃光描邊文字動效 185
5.5 Logo 動效設計 185
5.5.1 動態Logo 概述 185
5.5.2 動態Logo 表現的優勢 187
5.5.3 Logo 動效需要注意的問題 189
5.5.4 制作動感模糊Logo 動效 189
實例26——制作動感模糊Logo動效 189
5.5.5 制作動感切片Logo 動效 189
實例27——制作動感切片Logo動效 189
第6章 UI 界面動效設計
6.1 動效設計的作用與常見效果 195
6.1.1 動效設計的作用 195
6.1.2 常見的UI 界面交互動效 199
6.1.3 制作手機充電動效 203
實例28——制作手機充電動效 203
6.1.4 制作手機垃圾清理完成動效 208
實例29——制作手機垃圾清理完成動效 208
6.2 界面加載等待動效設計 208
6.2.1 了解加載等待動效 208
6.2.2 加載動效的常見表現形式 209
6.2.3 制作簡單的圓環加載動效 211
實例30——制作簡單的圓環加載動效 211
6.2.4 制作界面下拉刷新加載動效 215
實例31——制作界面下拉刷新加載動效 215
6.3 引導界面動效設計 215
6.3.1 什麼是引導界面 215
6.3.2 引導界面的設計要素 216
6.3.3 制作引導界面切換動效 217
實例32——制作引導界面切換動效 218
6.4 導航菜單動效設計 223
6.4.1 交互式動態導航菜單的優勢 223
6.4.2 導航菜單的設計要點 224
6.4.3 制作側邊滑入導航菜單動效 225
實例33——制作側邊滑入導航菜單動效 225
6.5 界面切換動效設計 232
6.5.1 4 種常見的界面切換轉場動效 232
6.5.2 界面切換動效的設計規則 235
6.5.3 制作登錄轉場動效 238
實例34——制作登錄轉場動效 238
6.5.4 制作App 解鎖轉場動效 239
實例35——制作App 解鎖轉場動效 239
6.6 UI 界面交互動效設計規範 245
6.6.1 界面動效設計要點 245
6.6.2 通過動效設計提升UI 界面用戶體驗 248
6.6.3 制作天氣界面動效 251
實例36——制作天氣界面動效 251
6.6.4 制作界面列表入場動效 257
實例37——制作界面列表入場動效 257
6.7 如何設計出優秀的UI 交互動效 257
6.7.1 明確繫統狀態 257
6.7.2 讓按鈕和操控擁有觸感 258
6.7.3 有意義的轉場動效 258
6.7.4 幫助用戶開始 259
6.7.5 強調界面的變化 260
6.7.6 需要注意的細節 260
6.7.7 制作App 界面菜單滑動動效 260
實例38——制作App 界面菜單滑動動效 260