做動(dòng)效 After Effects跨平臺(tái)UI動(dòng)效設(shè)計(jì)教程
定 價(jià)：128 元
- 作者：張鼎（Keith）
- 出版時(shí)間：2023/12/1
- ISBN：9787121469558
- 出 版 社：電子工業(yè)出版社
- 中圖法分類：TP391.413
- 頁碼：308
- 紙張：
- 版次：01
- 開本：16開
在 5G 時(shí)代，互聯(lián)網(wǎng)行業(yè)流行“全棧設(shè)計(jì)師”（什么都要會(huì)）。目前， UI 設(shè)計(jì)是互聯(lián)網(wǎng)行業(yè)乃至整個(gè)智能設(shè)備行業(yè)不可或缺的環(huán)節(jié)，而動(dòng)效設(shè)計(jì)在其中的作用越來越重要，不會(huì)做動(dòng)效設(shè)計(jì)的 UI 設(shè)計(jì)師的就業(yè)會(huì)有很大的局限性。因此，UI 動(dòng)效設(shè)計(jì)是互聯(lián)網(wǎng)設(shè)計(jì)師未來必備的一項(xiàng)技能。本書從理論、行業(yè)、實(shí)戰(zhàn)三大環(huán)節(jié)入手，旨在梳理一條盡可能完整的跨越平臺(tái)、貫穿用戶體驗(yàn)始終的動(dòng)效設(shè)計(jì)全鏈條。從早期的動(dòng)效設(shè)計(jì)，到目前主流的智能設(shè)備 UI 動(dòng)效設(shè)計(jì)，再到未來的創(chuàng)新動(dòng)效設(shè)計(jì)形態(tài)，本書系統(tǒng)性地梳理動(dòng)效設(shè)計(jì)的幾大價(jià)值和完整細(xì)致的分類，以幫助讀者更系統(tǒng)、更全面地學(xué)習(xí)動(dòng)效設(shè)計(jì)，理解、思考動(dòng)效設(shè)計(jì)的真正價(jià)值。在工具實(shí)戰(zhàn)方面，本書以專題模塊的形式，提取了幾種常見、實(shí)用的動(dòng)效類型，并緊密結(jié)合案例進(jìn)行講解，以幫助讀者更快、更好地掌握軟件的使用方法。本書的內(nèi)容從入門到深入，從理論到實(shí)戰(zhàn)，適合院校設(shè)計(jì)專業(yè)（如交互設(shè)計(jì)、動(dòng)畫設(shè)計(jì)等）的學(xué)生，剛進(jìn)入用戶體驗(yàn)設(shè)計(jì)領(lǐng)域的職場(chǎng)新人，以及已有一定行業(yè)工作經(jīng)驗(yàn)但希望能更系統(tǒng)、更深入地學(xué)習(xí)動(dòng)效設(shè)計(jì)的設(shè)計(jì)師閱讀。另外，本書也可以作為設(shè)計(jì)培訓(xùn)機(jī)構(gòu)的培訓(xùn)教材。
張鼎，畢業(yè)于同濟(jì)大學(xué)，曾在華為、小鵬汽車、浦發(fā)銀行等公司擔(dān)任交互與動(dòng)效設(shè)計(jì)師，目前就職于字節(jié)跳動(dòng)；10余年來深耕用戶體驗(yàn)與動(dòng)效設(shè)計(jì)，參與設(shè)計(jì)的產(chǎn)品涵蓋多種軟/硬件形態(tài)和平臺(tái)，包括華為旗艦智能手機(jī)Mate系列、智能電動(dòng)轎跑小鵬P7、AR智能眼鏡，以及眾多跨移動(dòng)端與Web端的軟件產(chǎn)品；對(duì)跨平臺(tái)設(shè)備的用戶體驗(yàn)和動(dòng)效設(shè)計(jì)具有豐富的實(shí)戰(zhàn)設(shè)計(jì)經(jīng)驗(yàn)。
第1章 認(rèn)識(shí)UI動(dòng)效神器AfterEffects
1.1認(rèn)識(shí)After Effects的面板與菜單...............................................2
1.1.1菜單欄......................................2
1.1.2工具欄.................................13
1.1.3項(xiàng)目面板組.....................................................................15
1.1.4【合成】面板............................................................17
1.1.5【時(shí)間軸】面板...................................................19
1.1.6【效果和預(yù)設(shè)】面板..............................25
1.1.7其他常用面板..........................................................26
1.2項(xiàng)目、合成與圖層..........................................27
1.2.1新建與設(shè)置項(xiàng)目.................................................27
1.2.2新建與設(shè)置合成...............................................28
1.2.3圖層通用屬性........................................................28
1.2.4圖層樣式...........................................................................30
1.2.5圖層類型...........................................................................30
1.3渲染發(fā)布...............................................................................47
1.3.1渲染輸出設(shè)置..........................................................47
1.3.2導(dǎo)出圖片序列........................................................50
1.4效果、關(guān)鍵幀與表達(dá)式..........................51
1.4.1常用的內(nèi)置自帶效果插件..............51
1.4.2表達(dá)式..............................63
第2章 動(dòng)效基礎(chǔ)知識(shí)
2.1動(dòng)效設(shè)計(jì)簡(jiǎn)史............................................................67
2.1.1智能手機(jī)時(shí)代的來臨..............................67
2.1.2從MIUI V5和iOS 7談起.......................68
2.1.3后來者——Material Design
中的Animation（動(dòng)畫）...............70
2.1.4另立門派——記得Metro UI嗎...............72
2.2動(dòng)效的價(jià)值.....................................................................74
2.2.1動(dòng)效的潤滑與緩沖作用....................74
2.2.2使用動(dòng)效展現(xiàn)層級(jí)/框架/邏輯.........................................79
2.2.3反作用力——?jiǎng)有Х赐平缑嬖O(shè)計(jì)...........................................82
2.2.4動(dòng)效設(shè)計(jì)的靈魂——節(jié)奏感...............................83
2.2.5指尖的舞蹈——?jiǎng)有c交互動(dòng)作的融合..........86
2.3UI動(dòng)效設(shè)計(jì)的分類解析...........................91
2.3.1根據(jù)交互動(dòng)作劃分........................................91
2.3.2根據(jù)交互功能與場(chǎng)景劃分.........98
2.3.3響應(yīng)不同輸入手段的反饋動(dòng)效類型...................105
第3章 統(tǒng)一的韻律：智能手機(jī)系統(tǒng)的動(dòng)效設(shè)計(jì)規(guī)范
3.1動(dòng)效設(shè)計(jì)規(guī)范概述.......................................109
3.1.1定義設(shè)計(jì)DNA........................................................110
3.1.2劃分系統(tǒng)層級(jí)......................................................112
3.1.3劃分動(dòng)效設(shè)計(jì)的顆粒度..................114
3.2動(dòng)效設(shè)計(jì)規(guī)范在華為智能手機(jī)EMUI 3.0設(shè)計(jì)中的應(yīng)用......................... 118
3.2.1點(diǎn)線之美：EMUI 3.0的動(dòng)效設(shè)計(jì)DNA................... 118
3.2.2EMUI 3.0動(dòng)效設(shè)計(jì)規(guī)范...................119
3.3案例：動(dòng)畫曲線精進(jìn) ............................ 121
3.3.1慣性往復(fù)動(dòng)效.....................................................122
3.3.2壓縮-3D翻轉(zhuǎn)回彈動(dòng)效...................129
3.3.3依次錯(cuò)落進(jìn)場(chǎng)的組合動(dòng)效......136
第4章 智能感知?jiǎng)有г谥悄芷嘦I 設(shè)計(jì)中的應(yīng)用
4.1智能感知與智能汽車用戶體驗(yàn)........................................149
4.1.1智能汽車：新的浪潮之巔.........149
4.1.2智能汽車的用戶體驗(yàn)與UI設(shè)計(jì)....................................149
4.2智能汽車的感知體系與車機(jī)動(dòng)效設(shè)計(jì)......................... 151
4.2.1智能汽車的感知體系...........................151
4.2.2動(dòng)效——理想的實(shí)時(shí)動(dòng)態(tài)信息傳遞方式....................... 151
4.3暢想：HUD是否是車機(jī)最理想的模式.......157
4.3.1HUD與智能汽車.............................................157
4.3.2淺談HUD與動(dòng)效設(shè)計(jì)..........................158
4.4智能汽車創(chuàng)意UI動(dòng)效實(shí)戰(zhàn)............162
4.4.1案例：使用Particular效果制作下雪與雪花堆積動(dòng)效.......162
4.4.2案例：使用Particular效果制作下雨與雨花濺起動(dòng)效..........................174
第5章 突破二維空間——3D動(dòng)效在ARUI 設(shè)計(jì)中的應(yīng)用
5.13D動(dòng)效設(shè)計(jì)概述................................................ 191
5.1.1擬物化視覺風(fēng)格時(shí)代的3D動(dòng)效..................................... 191
5.1.2“輕3D”與“2 . 5D”——扁平化風(fēng)格下的3D動(dòng)效創(chuàng)新......................................193
5.23D動(dòng)效在AR UI設(shè)計(jì)中的應(yīng)用.........................................197
5.2.1淺談AR眼鏡的交互體系..............197
5.2.2新形態(tài)UI：懸浮在現(xiàn)實(shí)空間中的立體界面...198
5.2.3行業(yè)案例：“視族”AR智能眼鏡的桌面動(dòng)態(tài)圖標(biāo)設(shè)計(jì)......200
5.3案例：巧用3D圖層做LED燈箱......................................... 203
5.3.1搭建基本框架...................................................203
5.3.2添加3D標(biāo)題..........................................................206
5.3.3制作LED燈箱.......................................................210
5.3.4為5個(gè)LED屏幕盒子分配獨(dú)立的屏幕內(nèi)容..................215
5.3.5添加Particular效果................................218
5.3.6為5個(gè)LED屏幕盒子創(chuàng)建反射................................... 226
5.3.7模擬低分辨率LED屏幕的顆粒效果................ 228
5.3.8創(chuàng)建光纜生長逐個(gè)點(diǎn)亮LED屏幕的動(dòng)畫........ 230
5.3.9增加攝像機(jī)運(yùn)動(dòng)動(dòng)畫......................232
5.3.10增加細(xì)節(jié).................................................................233
第6章 懸停的舞蹈：Hover（懸停）動(dòng)效在Web端UI 設(shè)計(jì)中的應(yīng)用
6.1Hover（懸停）動(dòng)效概述............. 238
6.2Hover（懸停）動(dòng)效在Web端UI設(shè)計(jì)中的應(yīng)用............................................... 238
6.2.1Hover（懸停）動(dòng)效的幾大交互應(yīng)用場(chǎng)景................................ 238
6.2.2Hover（懸停）動(dòng)效在VR/AR交互中的回歸............................ 244
6.3案例：做一組粒子聚散效果的Hover（懸停）動(dòng)效................................ 245
6.3.1打開初始工程文件，完成前期準(zhǔn)備工作................ 246
6.3.2制作第一組Hover（懸停）動(dòng)效.................................. 247
6.3.3新建合成用于粒子動(dòng)效.............250
6.3.4添加圖片素材，作為發(fā)射器形狀...........................................251
6.3.5用多張圖片替換作為隨機(jī)多樣化的粒子樣式.................................254
6.3.6制作Particular效果的粒子發(fā)射關(guān)鍵幀動(dòng)畫..........................................258
6.3.7復(fù)制輔助說明文字圖層，創(chuàng)建粒子到文字的過渡動(dòng)畫.................261
6.3.8添加發(fā)光效果..................................................263
6.3.9為粒子起始發(fā)射添加上升運(yùn)動(dòng)趨勢(shì)............................ 264
6.3.10將制作完成的粒子動(dòng)畫合成導(dǎo)入主場(chǎng)景合成..........................................266
6.3.11制作輔助說明文字呈粒子化消散的動(dòng)效....................... 268
第7章 小空間，大天地：轉(zhuǎn)場(chǎng)動(dòng)效與數(shù)據(jù)可視化動(dòng)效在智能手表中的應(yīng)用
7.1“視覺連貫”轉(zhuǎn)場(chǎng)動(dòng)效與數(shù)據(jù)可視化動(dòng)效概述..............................271
7.1.1“視覺連貫”轉(zhuǎn)場(chǎng)動(dòng)效概述............................................271
7.1.2數(shù)據(jù)可視化動(dòng)效概述........................272
7.2轉(zhuǎn)場(chǎng)動(dòng)效與數(shù)據(jù)可視化動(dòng)效在智能手表交互中的應(yīng)用................... 273
7.2.1智能手表交互中的轉(zhuǎn)場(chǎng)動(dòng)效................................................. 273
7.2.2智能手表交互中的數(shù)據(jù)可視化動(dòng)效............................................. 274
7.3案例：智能手表運(yùn)動(dòng)健身類App的立體地圖數(shù)據(jù)可視化動(dòng)效.................... 279
7.3.1創(chuàng)建3D地圖............................................................280
7.3.2創(chuàng)建模擬用戶跑步路線的發(fā)光軌跡動(dòng)效........................ 285
7.3.3添加軌跡光線在穿梭過程中粗細(xì)變化的動(dòng)效..........................................288
7.3.4添加軌跡光線在穿梭過程中顏色變化的動(dòng)效..........................................289
7.3.5為粒子束軌跡光線創(chuàng)建結(jié)束時(shí)的關(guān)鍵幀.................................291
7.3.6為軌跡光線添加類似于虛線的斷點(diǎn)分段效果.................. 292
7.3.7為軌跡路線添加發(fā)光等更豐富的視覺效果..........................................293
7.3.8創(chuàng)建鏡頭運(yùn)動(dòng)動(dòng)畫................................297
7.3.9添加數(shù)據(jù)輔助說明................................298
書單推薦
