本書根據藝術設計專業應用型人才培養目標的要求編寫，包括新媒體動態設計概述、動態設計的創意構思、動態設計的實現方法、動態設計在新媒體中的應用、動態設計的優化和測試、新媒體動態設計案例分析、動態設計進階技巧。本書注重培養讀者的動態設計思維和實現動態效果的能力，引用分析了大量專業教學成果以及相關行業優秀案例，以幫助讀者了解新媒體動態設計領域的發展歷史、發展前沿以及創作流程，進而展現出新媒體動態設計的輪廓概貌。
本書適合作為高等院校和職業院校設計相關專業教材，也可以作為該領域的從業者和愛好者的參考用書。

王毅，魯美傳媒動畫學院，副教授，藝術與科技專業學科帶頭人，負責實驗及本科教學工作。負責的相關課程有：計算基礎、數字動態設計基礎、自媒體動畫設計、動畫短片設計。

隨著信息時代的快速發展，新媒體已成為人們日常生活中不可或缺的一部分。它以其快捷、直觀的特性，極大地改變了人們獲取、交流信息的方式。在這個數字化的時代，媒體不再是靜止的文字或圖片，而是呈現出豐富多彩、生動活潑的動態內容。
新媒體動態設計是對傳統靜態設計的延伸和拓展。在數字化媒體環境下，通過運用各種技術手段和創意理念，引入動態元素，創造出具有運動、變化和互動特性的多媒體內容，使信息呈現更加生動豐富，吸引用戶的注意力，提升用戶體驗。
本書首先介紹了新媒體動態設計的基本概念和歷史發展，讓讀者對動態設計有一個清晰的認識。本書重點介紹了各類動畫制作工具的基本操作和應用，包括但不限于運用JavaScript、CSS 制作動態效果等，幫助讀者熟練運用這些工具進行動態設計；討論了動態設計中常用的交互設計原則，幫助讀者理解如何將動態設計與用戶體驗相結合，提升產品的互動性和吸引力。同時通過豐富的實例，展示了動態設計在不同領域的應用，涵蓋網頁設計、移動應用、廣告宣傳等多個方面，希望能夠引導讀者通過實際項目的練習，將所學知識應用于實踐中，從而鞏固所學并提升動態設計的實際操作能力。本書旨在為廣大讀者提供一個全面而系統的指導，幫助他們掌握新媒體動態設計的基本原理、技術方法以及創意實踐。通過本書的學習，讀者能夠了解動態設計的基本概念，掌握各類動畫制作工具的使用，以及在實際項目中運用動態設計的技巧。
本書由王毅、張彬彬主編，龐聰、金曉依為副主編，參與編寫的人員還有宗誠、楊步凡、崔哲航、李江、陳逸凡、李樂。希望本書能夠成為廣大讀者學習和掌握新媒體動態設計的有力工具，同時也希望讀者在學習的過程中能夠發揮自己的創造力和想象力，為新媒體設計的未來做出積極的貢獻。

編者
2024年1月

第一章 新媒體動態設計概述 001
第一節 動態設計的發展歷程 002
一、動態設計的起源 002
二、動畫產業的崛起 002
三、動態設計的初步探索 003
四、移動設備和應用的崛起 003
五、動態設計的挑戰和前景 003
第二節 動態設計的基本概念 004
一、什么是動態設計 004
二、動態設計在新媒體中的應用 005
三、基本動畫技巧 006
第三節 新媒體動態設計的優勢和應用 008
一、新媒體動態設計的特點 009
二、新媒體動態設計的優勢 009
三、新媒體動態設計的應用 009
四、新媒體動態設計的設計要點 010
第四節 動態設計的設計元素和設計原則 010
一、設計元素 011
二、設計原則 011
三、迪士尼動畫的十二原則 012
第五節 常見動態設計軟件和工具 016
一、二維動畫軟件 017
二、三維動畫軟件 018
第六節 新媒體動態設計的發展趨勢和前景展望 019
一、技術驅動的創新 020
二、用戶體驗的重塑 020
三、跨媒體融合與互聯性 020
四、數據驅動 020
五、設計倫理與社會責任 021
六、可持續性設計 021

第二章 新媒體動態設計的創意構思 023
第一節 創意構思的流程和方法 024
一、常見的創意構思流程 024
二、 動態設計創意構思方法 025
第二節 設計思維的應用 026
一、用戶觀察與人性化設計 026
二、問題定義與原型測試 026
三、創新與品牌差異化 027
四、敏捷設計和快速迭代 027
五、跨學科合作 028
第三節 創意構思的案例分析 028
一、常見的網站動態設計的創意應用 028
二、可視化數據 029
三、交互游戲 030
四、藝術品展示 030
五、品牌與產品宣傳 031

第三章 新媒體動態設計的實現方法 033
第一節 HTML 基礎與動態設計準備 034
一、HTML 簡介 034
二、HTML 的基礎結構 034
三、常用HTML 元素簡介 035
四、CSS 和JavaScript 與HTML 的互動 036
五、HTML5 新特性與動態設計 036
六、開發者工具與動態設計 036
第二節 使用JavaScript 制作動畫 037
一、JavaScript 及其在動畫制作中的角色 037
二、JavaScript 的基礎知識 037
三、使用JavaScript 進行DOM 操作 039
四、使用JavaScript 創建動畫 040
五、實戰：使用JavaScript 制作一個簡單的動畫 042
六、JavaScript 動畫的優化 043
七、JavaScript 動畫庫 044
第三節 使用CSS 制作動畫 046
一、CSS 及其在動畫制作中的角色 046
二、CSS 基礎知識 046
三、初識CSS 動畫 047
四、深入理解CSS transition 049
五、深入理解CSS animation 051
六、CSS 動畫的優化 052
七、CSS 動畫庫 053
第四節 使用動態設計軟件實現動態效果  055
一、 動態網頁設計工具概述 055
二、 Adobe Dreamweaver：綜合網頁設計工具 056
三、 Adobe XD：從靜態到動態 057
四、 Webflow：無代碼網頁動態設計 058
五、 跨平臺設計工具 059

第四章 動態設計在新媒體中的應用 061
第一節 動態設計在網頁設計中的應用 062
一、動畫效果 062
二、頁面轉場效果 066
第二節 動態設計在APP 設計中的應用 067
一、交互性元素 067
二、動態過渡效果 068
三、動態加載 069
四、導航菜單 071
五、數據可視化 074
第三節 動態設計在品牌形象設計中的應用 075
一、動態品牌標志 075
二、動態字體設計 076
三、動畫包裝設計 076
四、動態廣告設計 077
五、品牌的動態社交媒體營銷 077
六、虛擬現實和增強現實體驗 078

第五章 新媒體動態設計的優化和測試 081
第一節 動態設計的優化方法 082
一、硬件、軟件的優化 082
二、關鍵幀動畫優化 082
三、動畫合并 083
四、減少細節 084
五、素材優化 085
六、預渲染和緩存 085
七、層次化動畫 086
八、質量和性能平衡 087
第二節 動態設計的測試方法 087
一、觀察與分析 087
二、動作演繹 087
三、遵循動畫法則 088
四、用戶反饋與用戶交互 088
五、原型測試 089
六、提供優雅降級方案 089
七、專家評審 089
第三節 動態設計的調整和改進 089
一、姿勢和動作的流暢性 089
二、時間和節奏 091
三、表情和姿態 092
四、造型優化 094
五、特效和粒子效果 095
六、反饋和迭代 095

第六章 新媒體動態設計案例分析 097
第一節 網頁動態設計案例 098
一、菜單導航 098
二、頁腳設計 101
三、鼠標懸停 103
四、加載 105
第二節 APP 動態設計案例 106
一、視覺反饋 106
二、按鈕點擊反饋 107
三、菜單展開和折疊 107
四、元素視覺引導 108
五、系統狀態 109
六、有趣的動效 109
第三節 品牌形象動態設計案例 110
一、標志設計的動態化 110
二、海報設計的動態化 112
三、表現形式的動態化 115
四、未來趨勢與挑戰 119

第七章 新媒體動態設計進階技巧 121
第一節 利用SVG 實現動態效果 122
一、SVG 入門 122
二、掌握SVG 基礎 122
三、SVG 顏色和樣式 123
四、SVG 變換和動畫 124
五、SVG 天氣圖標項目實戰 126
第二節 利用Canvas 實現動態效果 127
一、Canvas 入門 127
二、掌握Canvas 基礎 128
三、Canvas 顏色和樣式 131
四、Canvas 圖形變換 131
五、Canvas 事件和交互 132
六、Canvas 像素操作和性能優化 132
七、Canvas 項目實戰 134
第三節 利用WebGL 實現動態效果 136
一、WebGL 簡介 136
二、WebGL 環境和基本語法 136
三、WebGL 圖形渲染基礎 139
四、WebGL 坐標系統和變換 139
五、WebGL 光照 143
六、WebGL 動畫和交互 148
七、 WebGL 性能優化 150

參考文獻 152