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