123,123

內(nèi)容簡(jiǎn)介

　　這是一本關(guān)于互聯(lián)網(wǎng)動(dòng)效設(shè)計(jì)的實(shí)戰(zhàn)教程圖書(shū)，介紹了移動(dòng)互聯(lián)網(wǎng)時(shí)代體驗(yàn)動(dòng)效設(shè)計(jì)行業(yè)的發(fā)展趨勢(shì)。本書(shū)分為7 章，通過(guò)文字和視頻兩種教學(xué)形式相結(jié)合，讓大家對(duì)UI 前期的行業(yè)、技能以及部門(mén)工作協(xié)同等知識(shí)有所了解，同時(shí)對(duì)動(dòng)效軟件的操作和動(dòng)效案例的制作有較全面的掌握。本書(shū)除了文字介紹外，還有近20 個(gè)視頻教學(xué)案例，由淺入深地教會(huì)讀者使用After Effects 制作動(dòng)效，且在學(xué)習(xí)之余，為讀者分享了一些關(guān)于思維導(dǎo)圖、分鏡頭繪制、前端開(kāi)發(fā)等相關(guān)知識(shí)，以及工作過(guò)程中可能會(huì)遇到的一些困難解決方案和風(fēng)險(xiǎn)規(guī)避方法等。本書(shū)適于傳統(tǒng)UI 設(shè)計(jì)師、在校相關(guān)專(zhuān)業(yè)學(xué)生或者希望系統(tǒng)學(xué)習(xí)UI 動(dòng)效設(shè)計(jì)的人學(xué)習(xí)使用。

作者簡(jiǎn)介

　　畢康銳，江西南昌大學(xué)藝術(shù)與設(shè)計(jì)專(zhuān)業(yè)學(xué)士，武漢華中科技大學(xué)計(jì)算機(jī)軟件工程碩士。江西南昌人。先后擔(dān)任江西南昌大學(xué)科技學(xué)院數(shù)字媒體研究所講師，廣東工大用戶(hù)體驗(yàn)設(shè)計(jì)學(xué)科特邀教師。深圳設(shè)計(jì)聯(lián)合會(huì)成員、中國(guó) 用戶(hù)體驗(yàn)專(zhuān)業(yè)協(xié)會(huì)（UXPA）成員、2017年UXPA中國(guó)用戶(hù)體驗(yàn)設(shè)計(jì)大賽評(píng)委。先后曾服務(wù)于奧地利 Woduschegg & partener 設(shè)計(jì)咨詢(xún)事務(wù)所、華為軟件技術(shù)、騰訊ISUX、VIVO UED用戶(hù)體驗(yàn)設(shè)計(jì)團(tuán)隊(duì)。中國(guó)首部紅色動(dòng)漫連續(xù)劇《安源小子》后期特效合成部門(mén)負(fù)責(zé)人。近十年對(duì)于移動(dòng)互聯(lián)網(wǎng)UI 動(dòng)效（Motion Graphic）領(lǐng)域的研究和探索較為專(zhuān)注，包括 Rom平臺(tái)、APP、互聯(lián)網(wǎng)營(yíng)銷(xiāo)視頻、HTML5營(yíng)銷(xiāo)案、特效后期合成等領(lǐng)域。

圖書(shū)目錄

01 初識(shí)UI動(dòng)效 013之前先動(dòng)腦——如何提煉

1.1 認(rèn)識(shí)UI 014

1.1.1 UI 操作系統(tǒng)的發(fā)展簡(jiǎn)介 014

1.1.2 UED 團(tuán)隊(duì)的構(gòu)成與介紹 017

1.1.3 UI 的應(yīng)用領(lǐng)域分析 018

1.1.4 UI 設(shè)計(jì)師的自我修養(yǎng) 025

1.2 認(rèn)識(shí)UI 動(dòng)效 028

1.2.1 孕育中的UI 動(dòng)效 029

1.2.2 UI 動(dòng)效行業(yè)的現(xiàn)狀與發(fā)展 030

1.2.3 UI 動(dòng)效的應(yīng)用領(lǐng)域分析 032

1.2.4 讓設(shè)計(jì)有意義地存在 037

1.3 如何玩轉(zhuǎn)UI 動(dòng)效 038

1.3.1 系統(tǒng)設(shè)備的準(zhǔn)備 038

1.3.2 我的切身學(xué)習(xí)體會(huì) 039

1.3.3 螺旋提升計(jì)劃 040

1.3.4 建造你的靈感彈藥庫(kù) 042

1.3.5 如何正確看待“審美” 044

1.3.6 嘿！你著什么急 044

1.4 UI 動(dòng)效制作的工具介紹 045

1.4.1 二維/ 原型類(lèi)動(dòng)畫(huà)工具 045

1.4.2 3D 類(lèi)動(dòng)畫(huà)工具 049

1.4.3 After Effects 052

02 動(dòng)手之前先動(dòng)腦——如何提煉你的設(shè)計(jì)思維 055

2.1 全局考量 056

2.1.1 設(shè)計(jì)師和美工，僅一步之遙 056

2.1.2 “先整體后局部”的思考程序 057

2.1.3 美觀，不代表一定優(yōu)質(zhì) 058

2.1.4 設(shè)計(jì)該有溫度 059

2.2 如何構(gòu)思你的動(dòng)效方案 059

2.2.1 你真的懂得如何去“看”嗎 060

2.2.2 繪制你的動(dòng)畫(huà)分鏡頭 062

2.2.3 可行性評(píng)估 065

2.2.4 可拓展性和pin牌感 066

2.2.5 構(gòu)思期間的進(jìn)展同步 066

2.3 思維導(dǎo)圖構(gòu)建和靈感提煉 067

2.3.1 什么是思維導(dǎo)圖 067

2.3.2 如何繪制你的思維導(dǎo)圖 071

2.3.3 養(yǎng)成靈感提煉的習(xí)慣 072

03 教你如何快速玩轉(zhuǎn)After Effects——五大學(xué)習(xí)階段全修煉073

3.1 半小時(shí)，熟悉After Effects 系統(tǒng)的基本操作 074

3.1.1 認(rèn)識(shí)After Effects 的基本面板 074

3.1.2 如何將PSD 文件導(dǎo)入After Effects 075

3.1.3 如何將AI 文件導(dǎo)入After Effects 077

3.1.4 如何將Sketch 文件導(dǎo)入After Effects 080

3.1.5 新建工程文件與相關(guān)參數(shù)設(shè)置 083

3.1.6 頂部工具欄的認(rèn)識(shí) 084

3.1.7 圖層編輯區(qū)域的介紹 084

3.1.8 紅條出現(xiàn)，別慌 087

3.2 一小時(shí)，熟悉界面基本操作技巧 088

3.2.1 新建固態(tài)層（Solid Layer） 088

3.2.2 “嵌套”功能的使用 089

3.2.3 創(chuàng)建“父子關(guān)聯(lián)” 090

3.2.4 SHY 和 SOLO 091

3.2.5 關(guān)于“MASK”（遮罩）功能的介紹 094

3.2.6 3D Layer（3D 層） 099

3.2.7 實(shí)戰(zhàn)：After Effects 攝像機(jī)的操作 101

3.3 兩小時(shí)，學(xué)會(huì)形狀圖層的運(yùn)用 101

3.3.1 如何創(chuàng)建Shape Layer 102

3.3.2 Contents 屬性的使用 103

3.3.3 關(guān)于路徑圖形的創(chuàng)建 114

3.3.4 Anchor Point（圖層軸心點(diǎn)） 115

3.3.5 如何創(chuàng)建文字層 116

3.3.6 Null Object( 空對(duì)象) 的創(chuàng)建和使用 117

3.3.7 “木偶圖釘”工具的使用 118

3.3.8 圖層的復(fù)制、截?cái)嗪腿ナ孜蔡幚?120

3.4 一小時(shí)，讓你的UI 動(dòng)起來(lái) 122

3.4.1 幀與關(guān)鍵幀 122

3.4.2 關(guān)鍵幀的創(chuàng)建與使用 123

3.4.3 曲線(xiàn)動(dòng)畫(huà)效果的制作 126

3.5 聊聊渲染 130

3.5.1 After Effects 渲染面板的介紹 130

3.5.2 不同的渲染輸出方式介紹 132

04 動(dòng)效大爆炸——H5動(dòng)效的實(shí)現(xiàn)方式與Material Design動(dòng)畫(huà) 135

4.1 了解HTML5 136

4.1.1 什么是HTML5 136

4.1.2 前端工程師的介紹 138

4.1.3 動(dòng)畫(huà)實(shí)現(xiàn)大揭秘1：原生動(dòng)畫(huà) 139

4.1.4 動(dòng)畫(huà)實(shí)現(xiàn)大揭秘2：CSS3 動(dòng)畫(huà) 145

4.1.5 動(dòng)畫(huà)實(shí)現(xiàn)大揭秘3：CSS2 + JavaScript 149

4.1.6 動(dòng)畫(huà)實(shí)現(xiàn)大揭秘4：Canvas + SVG 150

4.1.7 動(dòng)畫(huà)實(shí)現(xiàn)大揭秘5：WebGL 154

4.1.8 動(dòng)畫(huà)實(shí)現(xiàn)大揭秘6：另辟蹊徑 156

4.2 Material Design 動(dòng)畫(huà)，你必須要知道的 160

4.2.1 什么是Material Design 動(dòng)畫(huà) 160

4.2.2 影響Material Design 動(dòng)畫(huà)的客觀屬性 161

4.2.3 Material Design 的動(dòng)畫(huà)表現(xiàn)形式 163

4.2.4 Material Design 動(dòng)畫(huà)設(shè)計(jì)的注意事項(xiàng) 168

05 游戲有外掛，動(dòng)效有腳本——不同動(dòng)效插件的介紹與使用方法 173

5.1 概述 174

5.2 Shape Fusion（融合效果腳本插件） 174

5.2.1 Shape Fusion 的安裝與加載方法 175

5.2.2 Shape Fusion 的使用與操作流程 176

5.3 Mt. Mograph Motion（圖形動(dòng)畫(huà)腳本插件）178

5.3.1 面板區(qū)域的介紹 179

5.3.2 動(dòng)畫(huà)命令的介紹 180

5.4 Bodymovin（After Effects 動(dòng)畫(huà)轉(zhuǎn)HTML5的腳本插件） 185

5.4.1 關(guān)于Lottie 工具的介紹 186

5.4.2 Bodymovin 的安裝與加載方式 186

5.4.3 如何在Bodymovin 中完成動(dòng)畫(huà)的渲染輸出 189

06 手把手教你玩動(dòng)效——?jiǎng)有е谱鞣椒ǖ囊曨l全解析 193

6.1 概述 194

6.2 基礎(chǔ)篇 194

6.2.1 水波紋加載動(dòng)畫(huà) 195

6.2.2 界面構(gòu)成五部曲 196

6.2.3 LOGO 誕生記 197

6.2.4 圓環(huán)波普棉花糖 198

6.2.5 線(xiàn)體ICON 變形計(jì) 199

6.2.6 水滴融合Loading（有插件+ 無(wú)插件雙實(shí)現(xiàn)版本）200

6.2.7 靈動(dòng)的文字百葉窗 201

6.2.8 生長(zhǎng)的自行車(chē) 202

6.2.9 液態(tài)流體的LOGO 203

6.3 進(jìn)階篇 204

6.3.1 圖形切割 204

6.3.2 2D 卡通的爆炸LOGO 206

6.3.3 電擊的LOGO 207

6.3.4 動(dòng)感涂鴉字體LOGO 208

6.3.5 HUD 炫動(dòng)光環(huán) 209

6.4 Gao級(jí)篇 210

6.4.1 Hologram 全息手表演示動(dòng)效 211

6.4.2 QQ 會(huì)員15 周年加速特權(quán)篇?jiǎng)有Х桨?212

6.4.3 粒子LOGO 動(dòng)畫(huà) 21313

07 踏上不歸路，jiu請(qǐng)堅(jiān)持到底 215

7.1 自學(xué)，究jing有多難 216

7.2 關(guān)于Performance Flow（演繹過(guò)程） 220

7.3 我的個(gè)人學(xué)習(xí)建議 222

后記 224