After Effects CC移動網站UI互動動效設計全程揭秘

內容簡介

《After Effects CC移動網站UI互動動效設計全程揭秘》以After Effects CC為設計工具，對UI互動動效設計的流程和製作技巧進行了全面、細緻的剖析。《After Effects CC移動網站UI互動動效設計全程揭秘》內容簡潔、通俗易懂，通過知識點汗府趨寒與實例相結合的方式，讓讀者能夠清晰明了地理解UI互動動效設計的相關內容，從而達到學以致用的目的。全書共分6章，分別為理解UI互動設計、初識UI互動動效、After Effects軟體基礎操作、在After Effects中製作動效並輸出、製作UI元素互動動效和UI界面動效設計。

書籍目錄

第1章理解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章AfterEffects軟體基礎操作

3.1　認識AfterEffects37

3.1.1　AfterEffects概述37

3.1.2　AfterEffects的套用領域37

3.2　AfterEffects工作界面41

第4章在AfterEffects中製作動效並輸出

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　在AfterEffects中渲染輸出動畫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章製作UI元素互動動效

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

After Effects CC移動網站UI互動動效設計全程揭秘

基本介紹

內容簡介

書籍目錄

相關詞條

熱門詞條