UI動效設計從入門到精通

《UI動效設計從入門到精通》是2019年機械工業出版社出版的圖書，作者是何福貴。

基本介紹

• 中文名：UI動效設計從入門到精通
• 作者：何福貴
• 出版社：機械工業出版社
• ISBN：9787111617839

內容簡介

動效是科技產品“情感化設計”的紐帶，的動效設計在提升產品體驗、用戶黏性方面能夠起到積極作用，

讓產品充滿生命力，使用戶和界面之間產生情感的聯繫，從而提升用戶體驗。目前，動效已成為APP產品互動

設計和界面設計必不可少的元素之一。

本書是關於UI動效設計的實戰教程圖書，內容涵蓋兩種*典型、套用*廣泛的動效套用端：移動端和Web端，

包括動效的作用、設計原則、分類、動效設計方法、動效典型製作軟體及各類動效實例，其中，製作平台包

括After Effects、Android、Adobe Illustrator、 JavaScript、CSS3、DragonBones、Adobe Animate和

Cinema 4D等，動效實例包括基礎動效、高級動效、3D動效等。

本書可作為UI設計等相關從業人員的參考手冊，也可作為大中專院校設計相關專業的培訓教程，還可作為廣

大視覺設計和動效開發愛好者的拓展學習資料。

圖書目錄

動效基礎知識

1.1為什麼要為APP設計動效/

1.2動效套用/

1.2.1移動APP動效/

1.2.2Web網站動效/

1.3移動APP動效設計/

1.3.1什麼是移動APP的互動動

效設計/

1.3.2移動APP動效的作用/

1.3.3移動APP動效設計原則/

1.3.4移動APP互動動效分類/

1.4Web網站動效設計/

1.4.1Web網站動效設計原則/

1.4.2動效網站設計欣賞/

1.5動效設計方法/

1.6動效製作軟體/

1.6.1After Effects/

1.6.2Adobe Photoshop/

1.6.3Adobe Illustrator/

1.6.4Adobe Edge Animate/

1.6.5Adobe Animate CC/

1.6.6Quartz Composer/

1.6.7Principle/

1.6.8Framer/

1.6.9jQuery/

1.6.10Origami/

1.6.11Cinema 4D/

1.6.12Flinto/

1.6.13Hype /

1.7動效設計流程/

1.8本章小結/

動效的分類和作用

2.1基礎動效/

2.1.1運動/

2.1.2放大和縮小/

2.1.3消失和出現/

2.1.4翻轉/

2.1.5旋轉/

2.1.6變形/

2.1.7變色/

2.2動效作用/

2.2.1使界面充滿動感/

2.2.2系統狀態動態提示/

2.2.3使界面友好有趣/

2.2.4流暢的過渡/

2.2.5界面元素的靈活隱藏和

展示/

2.2.6增強操縱感/

2.2.7高效反饋/

2.2.8引導作用/

2.2.9創新體驗/

2.3動效分類/

2.3.1視覺反饋動效/

2.3.2空間拓展動效/

2.3.3功能改變動效/

2.3.4層次結構互動動效/

2.3.5視覺提示動效/

2.3.6系統套用提示動效/

2.3.7趣味互動動效/

2.3.8轉場動效/

2.4動效評判/

2.5本章小結/After Effects的套用

3.1After Effects簡介/

3.1.1After Effects軟體及

特點/

3.1.2After Effects CC工作

界面/

3.1.3After Effects CC的

合成/

3.1.4After Effects CC的圖層/

3.1.5After Effects CC的

渲染/

3.2After Effects CC 動畫/

3.2.1關鍵幀動畫/

3.2.2效果動畫/

3.2.3蒙版動畫/

3.2.4文字動畫/

3.2.5表達式動畫/

3.2.63D動畫/

3.3After Effects動畫導出/

3.3.1導出為視頻和圖像

序列/

3.3.2套用Bodymovin把After Effects

動畫轉換成Web/Android/iOS

原生動畫/

3.3.3套用Lottie庫實現Android/

iOS/Web載入After Effects

動畫/

3.4在Android中套用After Effects

動畫/

3.5在Web中套用After Effects

動畫/

3.6本章小結/

Android基礎動畫

4.1繪圖動畫/

4.1.1Graphics類基礎/

4.1.2Matrix類變換圖片/

4.1.3繪製路徑文字/

4.1.4繪製圖片倒影/

4.1.5drawBitmapMesh實現圖像

扭曲/

4.2矢量動畫/

4.2.1Android SVG動畫/

4.2.2插值動畫/

4.3Drawable動畫/

4.3.1Drawable類/

4.3.2Drawable實現Frame動畫

效果/

4.3.3Drawable的高效用法/

4.4Tween補間動畫/

4.5屬性動畫/

4.5.1Animator/

4.5.2ObjectAnimator/

4.5.3AnimatorSet/

4.6控制項動畫/

4.6.1圖片滑動切換/

4.6.2圖片手勢放大縮小/

4.6.3PhotoView和ViewPager

實現圖片滑動和縮放/

4.6.4列表摺疊/

4.7本章小結/

APP基本動效

5.1滑動/

5.2縮放/

5.3展開摺疊/

5.4橫豎屏切換/

5.5堆疊切換/

5.6提示/

5.7圖表/

5.7.1MPAndroidChart/

5.7.2HelloCharts/

5.7.3AChartEngine/

5.7.4XCLCharts/

5.7.5GraphView/

5.7.6HTML5數據圖表/

5.8滑動刪除/

5.9GitHub中優秀的開源動效

項目/

5.10本章小結/

APP進階動效

6.1圖示/

6.1.1PS打造相機圖示/

6.1.2AI打造動感立體圖示/

6.2導航和選單動效/

6.2.1BottomTabBar實現導航

動效/

6.2.2DrawerLayout和Navigation

View實現Android策劃

選單/

6.2.3jQuery和CSS3製作手風琴

摺疊選單/

6.2.4jQuery和CSS3實現導航

選單/

6.3Loading動效/

6.3.1Android中進度條/

6.3.2Progress Wheel/

6.3.3AE製作水波紋

Loading/

6.3.4AE外掛程式Loadup輕鬆創建

各式Loading進度條/

6.4手勢動畫/

6.4.1Android手勢動畫/

6.4.2點擊波網頁動畫特效/

6.4.3AE手勢動畫庫/

6.5文字動效/

6.5.1AI與AE打造漂亮字型

動效/

6.5.2AE Saber外掛程式製作字型

動效/

6.5.3jQuery和CSS3實現彩色霓虹燈發光文字動效/

6.5.4網頁SVG文字動效/

6.5.5AE Super Text Pack/

6.6AE Trapcode 外掛程式/

6.6.1安裝Trapcode/

6.6.2Trapcode Particular粒子

特效/

6.6.3Trapcode 3D Stroke製作

文字描邊/

6.6.4Trapcode Mir製作變形

動畫/

6.7本章小結/

Android中的3D動畫

7.1Camera 3D動畫實現/

7.1.1Camera 3D實現圖片旋轉

動畫/

7.1.2Roate3dAnimation實現旋轉

圖片動畫/

7.1.3Rotate3D實現3D旋轉

動畫/

7.1.4Camera與Matrix實現3D

立方體/

7.2OpenGL ES/

7.2.1OpenGL ES基礎/

7.2.2在Android中使用OpenGL

ES/

7.2.3Android中OpenGL ES

基本操作/

7.2.4OpenGL ES實現彩色旋轉

的立方體/

7.3本章小結/

HTML5動畫

8.1HTML5動畫簡介/

8.1.1canvas元素結合

JavaScript/

8