交互媒体设计与开发是一个较为广泛的领域，其中以H5 技术为核心的Web 前端开发占据重要地位。近年来，H5 技术发展迅速，尤其是在移动端得到广泛应用，逐渐成为App 开发、UI 设计、网络营销、传媒娱乐等领域中的重要技术之一。各高校在传媒和设计相关专业的教学中，也越来越重视学生新媒体应用技术与创新能力的培养。但是，受限于师资、设备与理念等方面的不足，教学效果不甚理想。比较常见的窘境是计算机类学生技术能力较强，但缺乏艺术设计与创新能力；文科和艺术类学生虽然具备较好的策划和设计能力，但受限于技术能力不足，作品往往只能停留在原型设计阶段，无法达到可以实际使用的程度。这两类学生的合作也往往因为不了解对方领域的基本原理和流程而困难重重。

    近年来，随着互联网作为基础设施的快速发展，前端开发技术和工具也发生了前所未有的变化。以Figma、Canva 为代表的在线开发工具引领了设计软件从离线到在线、从大而全到小而美的潮流。这些强调无感迭代、多人合作、海量资源的在线开发平台大大降低了交互媒体设计和开发的技术门槛，掀起了一波交互媒体开发的新浪潮。在这次浪潮中，国内企业纷纷跟进，易企秀、即时设计、iVX 等在线开发平台脱颖而出。其中，iVX 作为H5 开发工具iH5 的升级版，以其强大易用的专业化功能吸引了大批不懂代码但又希望从事前端开发的非计算机专业人员，也成为众多程序员提高效率、简化开发流程的有力助手。

    本书以iVX 平台的前端开发技术为主线，在编写过程中，充分考虑了零代码基础的文科生与艺术生的实际情况，以深入浅出的讲解和丰富的案例带领读者迅速掌握H5 交互设计的核心技术与设计理念。本书的另一大特色是介绍了大量“全国大学生广告艺术大赛”历年交互类的获奖作品，这些作品都是企业真实命题，并且超过半数使用了iH5或iVX 平台开发。通过对这些同龄人真实创作案例的赏析，学生可以建立信心、激发兴趣，快速提升实践能力。坚持以赛促教、以赛促学、以赛促改，是笔者所在院系教师团队经过多年探索的经验总结，本书的编写正是基于此经验。

    在体例上，本书每章包含4 个部分，各部分安排如下。理论讲解：围绕本章主题讲解基本概念和理论。

    项目实训：对理论讲解部分内容做项目实训，教师当堂演示，学生当堂模仿练习。

    拓展训练：在项目实训的基础上进一步引导学生应用本书所学技能动手实践。课时充裕的课程，可将本部分用作学生的课堂练习，教师进行现场辅导。课时紧张的课程也可留作课后作业。

    本章小结：总结本章要点。

    教师在授课过程中应根据实际情况灵活选用章节内容，例如，部分章节有多个项目实训的可以按需选用其一，其余留作课堂练习或课后作业。我们建议的教学时间为每章4 ～ 6 课时，总学时32 ～ 48 学时，其中包含了讲授、演示与实训时间。

    为避免链接失效导致案例无法访问，书中所有互动作品均以录屏方式展示，读者扫描案例对应的二维码即可在线观看，您也可以在浏览器中输入脚注中的网址直接访问互动作品原件。

    由于在线开发平台的版本迭代较快，读者在使用本教材时可能会发现书中内容与软件界面不符的情况，为最大限度保证教材内容的时效性，我们会持续发布《更新说明》。请读者扫描前言中的二维码下载书中使用的案例素材及更新文件。

    由于编者水平有限，书中难免存在不足之处，欢迎广大读者批评指正。

                                  编者

                                 2023 年8 月