123,123,123

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

　　在 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ì)在其中的作用越來(lái)越重要，不會(huì)做動(dòng)效設(shè)計(jì)的 UI 設(shè)計(jì)師的就業(yè)會(huì)有很大的局限性。因此，UI 動(dòng)效設(shè)計(jì)是互聯(lián)網(wǎng)設(shè)計(jì)師未來(lái)需要具備的一項(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ì)，再到未來(lái)的創(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)教材。

作者簡(jiǎn)介

　　張鼎，畢業(yè)于同濟(jì)大學(xué)，曾在華為、小鵬汽車、浦發(fā)銀行等公司擔(dān)任交互與動(dòng)效設(shè)計(jì)師，目前就職于字節(jié)跳動(dòng)；十余年來(lái)深耕用戶體驗(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
11認(rèn)識(shí)After Effects的面板與菜單 2
111菜單欄 2
112工具欄 13
113項(xiàng)目面板組 15
114【合成】面板 17
115【時(shí)間軸】面板19
116【效果和預(yù)設(shè)】面板 25
117其他常用面板 26
12項(xiàng)目、合成與圖層27
121新建與設(shè)置項(xiàng)目 27
122新建與設(shè)置合成 28
123圖層通用屬性 28
124圖層樣式 30
125圖層類型 30
13渲染發(fā)布 47
131渲染輸出設(shè)置 47
132導(dǎo)出圖片序列 50
14效果、關(guān)鍵幀與表達(dá)式51
141常用的內(nèi)置自帶效果插件51
142表達(dá)式 63
第2章動(dòng)效基礎(chǔ)知識(shí)
21動(dòng)效設(shè)計(jì)簡(jiǎn)史 67
211智能手機(jī)時(shí)代的來(lái)臨 67
212從MIUI V5和iOS 7談起68
213后來(lái)者——Material Design
中的Animation（動(dòng)畫） 70
214另立門派——記得Metro UI嗎 72
22動(dòng)效的價(jià)值 74
221動(dòng)效的潤(rùn)滑與緩沖作用 74
222使用動(dòng)效展現(xiàn)層級(jí)/框架/邏輯 79
223反作用力——動(dòng)效反推界面設(shè)計(jì)82
224動(dòng)效設(shè)計(jì)的靈魂——節(jié)奏感 83
225指尖的舞蹈——動(dòng)效與交互動(dòng)作的融合86
23UI動(dòng)效設(shè)計(jì)的分類解析91
231根據(jù)交互動(dòng)作劃分 91
232根據(jù)交互功能與場(chǎng)景劃分 98
233響應(yīng)不同輸入手段的反饋動(dòng)效類型 105
第3章統(tǒng)一的韻律：智能手機(jī)系統(tǒng)的動(dòng)效設(shè)計(jì)規(guī)范
31動(dòng)效設(shè)計(jì)規(guī)范概述 109
311定義設(shè)計(jì)DNA 110
312劃分系統(tǒng)層級(jí) 112
313劃分動(dòng)效設(shè)計(jì)的顆粒度 114
32動(dòng)效設(shè)計(jì)規(guī)范在華為智能手機(jī)EMUI 30設(shè)計(jì)中的應(yīng)用 118
321點(diǎn)線之美：EMUI 30的動(dòng)效設(shè)計(jì)DNA 118
322EMUI 30動(dòng)效設(shè)計(jì)規(guī)范 119
33案例：動(dòng)畫曲線精進(jìn) 121
331慣性往復(fù)動(dòng)效 122
332壓縮-3D翻轉(zhuǎn)回彈動(dòng)效 129
333依次錯(cuò)落進(jìn)場(chǎng)的組合動(dòng)效 136
第4章智能感知?jiǎng)有г谥悄芷嘦I 設(shè)計(jì)中的應(yīng)用
41智能感知與智能汽車用戶體驗(yàn) 149
411智能汽車：新的浪潮之巔 149
412智能汽車的用戶體驗(yàn)與UI設(shè)計(jì) 149
42智能汽車的感知體系與車機(jī)動(dòng)效設(shè)計(jì) 151
421智能汽車的感知體系151
422動(dòng)效——理想的實(shí)時(shí)動(dòng)態(tài)信息傳遞方式 151
43暢想：HUD是否是車機(jī)最理想的模式 157
431HUD與智能汽車 157
432淺談HUD與動(dòng)效設(shè)計(jì)158
44智能汽車創(chuàng)意UI動(dòng)效實(shí)戰(zhàn)162
441案例：使用Particular效果制作下雪與雪花堆積動(dòng)效 162
442案例：使用Particular效果制作下雨與雨花濺起動(dòng)效174
第5章突破二維空間——3D動(dòng)效在ARUI 設(shè)計(jì)中的應(yīng)用
513D動(dòng)效設(shè)計(jì)概述 191
511擬物化視覺風(fēng)格時(shí)代的3D動(dòng)效 191
512“輕3D”與“2 5D”——扁平化風(fēng)格下的3D動(dòng)效創(chuàng)新 193
523D動(dòng)效在AR UI設(shè)計(jì)中的應(yīng)用 197
521淺談AR眼鏡的交互體系197
522新形態(tài)UI：懸浮在現(xiàn)實(shí)空間中的立體界面 198
523行業(yè)案例：“視族”AR智能眼鏡的桌面動(dòng)態(tài)圖標(biāo)設(shè)計(jì) 200
53案例：巧用3D圖層做LED燈箱 203
531搭建基本框架203
532添加3D標(biāo)題 206
533制作LED燈箱 210
534為5個(gè)LED屏幕盒子分配獨(dú)立的屏幕內(nèi)容 215
535添加Particular效果 218
536為5個(gè)LED屏幕盒子創(chuàng)建反射 226
537模擬低分辨率LED屏幕的顆粒效果 228
538創(chuàng)建光纜生長(zhǎng)逐個(gè)點(diǎn)亮LED屏幕的動(dòng)畫 230
539增加攝像機(jī)運(yùn)動(dòng)動(dòng)畫 232
5310增加細(xì)節(jié)233
第6章懸停的舞蹈：Hover（懸停）動(dòng)效在Web端UI 設(shè)計(jì)中的應(yīng)用
61Hover（懸停）動(dòng)效概述 238
62Hover（懸停）動(dòng)效在Web端UI設(shè)計(jì)中的應(yīng)用 238
621Hover（懸停）動(dòng)效的幾大交互應(yīng)用場(chǎng)景 238
622Hover（懸停）動(dòng)效在VR/AR交互中的回歸 244
63案例：做一組粒子聚散效果的Hover（懸停）動(dòng)效 245
631打開初始工程文件，完成前期準(zhǔn)備工作 246
632制作第一組Hover（懸停）動(dòng)效 247
633新建合成用于粒子動(dòng)效250
634添加圖片素材，作為發(fā)射器形狀251
635用多張圖片替換作為隨機(jī)多樣化的粒子樣式 254
636制作Particular效果的粒子發(fā)射關(guān)鍵幀動(dòng)畫258
637復(fù)制輔助說(shuō)明文字圖層，創(chuàng)建粒子到文字的過(guò)渡動(dòng)畫 261
638添加發(fā)光效果 263
639為粒子起始發(fā)射添加上升運(yùn)動(dòng)趨勢(shì) 264
6310將制作完成的粒子動(dòng)畫合成導(dǎo)入主場(chǎng)景合成266
6311制作輔助說(shuō)明文字呈粒子化消散的動(dòng)效 268
第7章小空間，大天地：轉(zhuǎn)場(chǎng)動(dòng)效與數(shù)據(jù)可視化動(dòng)效在智能手表中的應(yīng)用
71“視覺連貫”轉(zhuǎn)場(chǎng)動(dòng)效與數(shù)據(jù)可視化動(dòng)效概述 271
711“視覺連貫”轉(zhuǎn)場(chǎng)動(dòng)效概述 271
712數(shù)據(jù)可視化動(dòng)效概述272
72轉(zhuǎn)場(chǎng)動(dòng)效與數(shù)據(jù)可視化動(dòng)效在智能手表交互中的應(yīng)用 273
721智能手表交互中的轉(zhuǎn)場(chǎng)動(dòng)效 273
722智能手表交互中的數(shù)據(jù)可視化動(dòng)效 274
73案例：智能手表運(yùn)動(dòng)健身類App的立體地圖數(shù)據(jù)可視化動(dòng)效 279
731創(chuàng)建3D地圖 280
732創(chuàng)建模擬用戶跑步路線的發(fā)光軌跡動(dòng)效 285
733添加軌跡光線在穿梭過(guò)程中粗細(xì)變化的動(dòng)效288
734添加軌跡光線在穿梭過(guò)程中顏色變化的動(dòng)效289
735為粒子束軌跡光線創(chuàng)建結(jié)束時(shí)的關(guān)鍵幀 291
736為軌跡光線添加類似于虛線的斷點(diǎn)分段效果 292
737為軌跡路線添加發(fā)光等更豐富的視覺效果293
738創(chuàng)建鏡頭運(yùn)動(dòng)動(dòng)畫 297
739添加數(shù)據(jù)輔助說(shuō)明 298