数字媒体艺术创新力丛书--新媒体动态设计

本书根据艺术设计专业应用型人才培养目标的要求编写，包括新媒体动态设计概述、动态设计的创意构思、动态设计的实现方法、动态设计在新媒体中的应用、动态设计的优化和测试、新媒体动态设计案例分析、动态设计进阶技巧。本书注重培养读者的动态设计思维和实现动态效果的能力，引用分析了大量专业教学成果以及相关行业优秀案例，以帮助读者了解新媒体动态设计领域的发展历史、发展前沿以及创作流程，进而展现出新媒体动态设计的轮廓概貌。
本书适合作为高等院校和职业院校设计相关专业教材，也可以作为该领域的从业者和爱好者的参考用书。

王毅，鲁美传媒动画学院，副教授，艺术与科技专业学科带头人，负责实验及本科教学工作。负责的相关课程有：计算基础、数字动态设计基础、自媒体动画设计、动画短片设计。

随着信息时代的快速发展，新媒体已成为人们日常生活中不可或缺的一部分。它以其快捷、直观的特性，极大地改变了人们获取、交流信息的方式。在这个数字化的时代，媒体不再是静止的文字或图片，而是呈现出丰富多彩、生动活泼的动态内容。
新媒体动态设计是对传统静态设计的延伸和拓展。在数字化媒体环境下，通过运用各种技术手段和创意理念，引入动态元素，创造出具有运动、变化和互动特性的多媒体内容，使信息呈现更加生动丰富，吸引用户的注意力，提升用户体验。
本书首先介绍了新媒体动态设计的基本概念和历史发展，让读者对动态设计有一个清晰的认识。本书重点介绍了各类动画制作工具的基本操作和应用，包括但不限于运用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