After Effects移動UI交互動效設(shè)計與制作（全彩慕課版）

目　　錄
第 1章　UI動效設(shè)計基礎(chǔ)
1．1　了解UI動效設(shè)計
1．1．1　什么是UI動效設(shè)計
1．1．2　UI動效的發(fā)展
1．1．3　動效在UI界面中的作用
1．2　UI動效設(shè)計的必要性
1．2．1 增強(qiáng)用戶體驗
1．2．2　提升產(chǎn)品氣質(zhì)
1．2．3　體現(xiàn)設(shè)計師優(yōu)勢
1．3　如何設(shè)計動效？
1．3．1　首先需要有一個創(chuàng)意想法
1．3．2　根據(jù)想法進(jìn)行豐滿實現(xiàn)
1．4　動效設(shè)計的類型有哪些？
1．4．1　轉(zhuǎn)場過渡
1．4．2　層級展示
1．4．3　空間擴(kuò)展
1．4．4　關(guān)注聚焦
1．4．5　內(nèi)容呈現(xiàn)
1．4．6　操作反饋
1．5　動效設(shè)計制作軟件有哪些？
1．6　基礎(chǔ)動效類型
1．6．1　基礎(chǔ)動效
1．6．2　屬性變化
1．6．3　運(yùn)動節(jié)奏
1．6．4　基礎(chǔ)動效組合應(yīng)用
1．7　本章小結(jié)
第 2章　掌握After Effects基礎(chǔ)操作
2．1　After Effects概述
2．2　After Effects工作界面
2．2．1　認(rèn)識After Effects工作界面
2．2．2　工具欄
2．2．3　“項目”面板
2．2．4　“合成”窗口
2．2．5　“時間軸”面板
2．2．6　其他面板
2．3　After Effects的基本操作
2．3．1　創(chuàng)建項目文件
2．3．2　在項目文件中創(chuàng)建合成
2．3．3　保存和關(guān)閉項目文件
2．3．4　After Effects中的基本工作流程
2．4　素材的導(dǎo)入與管理操作
2．4．1　導(dǎo)入素材的基本方法
2．4．2　導(dǎo)入PSD格式素材
實戰(zhàn)——通過導(dǎo)入PSD格式文件創(chuàng)建合成
2．4．3　導(dǎo)入AI格式素材
實戰(zhàn)——通過導(dǎo)入AI格式文件創(chuàng)建合成
2．4．4　素材的管理操作
2．4．5　嵌套合成
2．5　認(rèn)識“時間軸”面板
2．5．1　“音頻/視頻”選項
2．5．2　“圖層基礎(chǔ)”選項
2．5．3　“圖層開關(guān)”選項
2．5．4　“轉(zhuǎn)換控制”選項
2．5．5　“父級和鏈接”選項
2．5．6　“時間控制”選項
2．6　After Effects中的圖層
2．6．1　認(rèn)識不同類型的圖層
2．6．2　圖層的混合模式
實戰(zhàn)——快速制作圖片切換動效
2．7　本章小結(jié)
第3章　關(guān)鍵幀基礎(chǔ)動效制作
3．1　了解關(guān)鍵幀
3．1．1　理解幀與關(guān)鍵幀
3．1．2　關(guān)鍵幀的創(chuàng)建方法
3．2　關(guān)鍵幀的編輯操作
3．2．1　選擇關(guān)鍵幀
3．2．2　移動關(guān)鍵幀
3．2．3　復(fù)制關(guān)鍵幀
3．2．4　刪除關(guān)鍵幀
實戰(zhàn)——制作火焰循環(huán)動效
3．3　基礎(chǔ)“變換”屬性
3．3．1　“錨點”屬性
3．3．2　“位置”屬性
實戰(zhàn)——制作背景圖片滑動切換動效
3．3．3　“縮放”屬性
3．3．4　“旋轉(zhuǎn)”屬性
3．3．5　“不透明度”屬性
實戰(zhàn)——制作APP啟動界面動效
3．4　關(guān)于運(yùn)動路徑
3．4．1　將直線運(yùn)動路徑調(diào)整為曲線運(yùn)動路徑
3．4．2　運(yùn)動自定向
實戰(zhàn)——制作飛機(jī)飛行動效
3．5　關(guān)于圖表編輯器
3．5．1　認(rèn)識圖表編輯器
3．5．2　設(shè)置對象的緩動效果
實戰(zhàn)——制作圓球彈跳緩動動效
3．6　本章小結(jié)
第4章　蒙版動效制作與輸出
4．1　形狀的應(yīng)用
4．1．1　關(guān)于路徑形狀
4．1．2　創(chuàng)建路徑群組
4．1．3　設(shè)置路徑形狀屬性
實戰(zhàn)——制作簡單的圓環(huán)Loading動效
4．2　創(chuàng)建蒙版動效
4．2．1　蒙版動效原理
4．2．2　形狀工具
4．2．3　鋼筆工具
4．2．4　軌道遮罩
實戰(zhàn)——制作iOS系統(tǒng)解鎖文字遮罩動效
4．2．5　設(shè)置蒙版屬性
實戰(zhàn)——制作聚光燈動效
4．2．6　蒙版的疊加處理
實戰(zhàn)——制作二維碼掃描動效
4．3　在After Effects中渲染輸出動畫
4．3．1　認(rèn)識渲染工作區(qū)
4．3．2　理解渲染設(shè)置選項
4．3．3　渲染輸出
實戰(zhàn)——將動效渲染輸出為視頻文件
4．3．4　配合Photoshop輸出GIF文件
實戰(zhàn)——將動效輸出為GIF動畫圖片
4．3．5　將動畫嵌入到手機(jī)模板
實戰(zhàn)——將動畫嵌入到手機(jī)模板中
4．4　本章小結(jié)
第5章　UI元素動效
5．1　圖標(biāo)動效
5．1．1　圖標(biāo)在UI界面中的作用
5．1．2　圖標(biāo)動效的常見表現(xiàn)形式
5．1．3　制作天氣圖標(biāo)動效
實戰(zhàn)——制作天氣圖標(biāo)動效
5．1．4　制作日歷圖標(biāo)動效
實戰(zhàn)——制作日歷圖標(biāo)動效
5．2　加載進(jìn)度條與開關(guān)按鈕動效
5．2．1　常見的加載進(jìn)度條表現(xiàn)方式
5．2．2　制作常見的矩形進(jìn)度條動效
實戰(zhàn)——制作常見的矩形進(jìn)度條動效
5．2．3　開關(guān)按的功能特點
5．2．4　制作開關(guān)按鈕動效
實戰(zhàn)——制作開關(guān)按鈕動效
5．3　文字動效
5．3．1　文字動效的表現(xiàn)優(yōu)勢
5．3．2　文字動效的常見表現(xiàn)形式
5．3．3　制作手寫文字動效
實戰(zhàn)——制作手寫文字動效
5．4　Logo動效
5．4．1　Logo動效概述
5．4．2　Logo動效的表現(xiàn)優(yōu)勢
5．4．3　Logo動效需要注意的問題
5．4．4　制作電商Logo動效
實戰(zhàn)——制作電商Logo動效
5．5　工具欄動效
5．5．1　關(guān)于工具欄動效設(shè)計
5．5．2　制作工具欄圖標(biāo)旋轉(zhuǎn)展開動效
實戰(zhàn)——制作工具欄圖標(biāo)旋轉(zhuǎn)展開動效
5．6　本章小結(jié)
第6章　界面切換轉(zhuǎn)場動效
6．1　界面切換轉(zhuǎn)場動效的核心規(guī)則
6．1．1　轉(zhuǎn)場動效自然流暢
6．1．2　動效層次分明
6．1．3　關(guān)聯(lián)是過渡動效的重要功能
6．1．4　快速的界面切換過渡
6．1．5　動效表現(xiàn)效果要清晰
6．1．6　制作登錄轉(zhuǎn)場動效
實戰(zhàn)——制作登錄轉(zhuǎn)場動效
6．2　常見的界面切換轉(zhuǎn)場動效
6．2．1　彈出
6．2．2　測滑
6．2．3　漸變放大
6．2．4　其他
6．2．5　制作圖片翻頁切換動效
實戰(zhàn)——制作圖片翻頁切換動效
6．3　導(dǎo)航菜單切換動效
6．3．1　交互式動態(tài)導(dǎo)航菜單的優(yōu)勢
6．3．2　導(dǎo)航菜單的設(shè)計要點
6．3．3　制作側(cè)滑導(dǎo)航菜單動效
實戰(zhàn)——制作側(cè)滑導(dǎo)航菜單動效
6．4　本章小結(jié)
第7章　UI界面動效
7．1　動效設(shè)計的作用與常見效果
7．1．1　動效設(shè)計的作用
7．1．2　常見的UI界面交互動效
7．1．3　制作天氣界面動效
實戰(zhàn)——制作天氣界面動效
7．1．4　制作界面加載動效
實戰(zhàn)——制作界面加載動效
7．2　UI界面交互動效設(shè)計規(guī)范
7．2．1　界面動效設(shè)計要點
7．2．2　通過動效設(shè)計提升UI界面用戶體驗
7．2．3　制作通話界面動效
實戰(zhàn)——制作通話界面動效
7．3　優(yōu)秀的界面動效有哪些特點
7．3．1　表現(xiàn)當(dāng)前系統(tǒng)狀態(tài)
7．3．2　使界面中的鏈接元素具有觸感
7．3．3　界面轉(zhuǎn)場動效要求快速而流暢
7．3．4　使用動效表現(xiàn)界面中的變化
7．3．5　注意界面動效的細(xì)節(jié)表現(xiàn)
7．3．6　制作APP應(yīng)用歡迎動效
實戰(zhàn)——制作APP應(yīng)用歡迎動效
7．4　本章小結(jié)