本书介绍了零代码在线开发平台 iVX 的开发流程和基本功能，以 H5 交互媒体开发为主要应用，结合全国大学生广告艺术大赛历年获奖作品，深入浅出地讲解了交互媒体设计的理念和技术，帮助读者快速提高交互媒体的开发和创作能力。
本书适合作为网络与新媒体、传播学、广告学、视觉传达等相关专业的核心教材，也适合广大新媒体爱好者与从业者参考学习。

交互媒体设计与开发是一个较为广泛的领域，其中以 H5 技术
为核心的Web 前端开发占据重要地位。各高校在传媒和设计相关专
业的教学中，也越来越重视学生新媒体应用技术与创新能力的培养。
但是，受限于师资、设备与理念等方面的不足，教学效果不甚理想。
比较常见的窘境是计算机类学生技术能力较强，但缺乏艺术设
计与创新能力；文科和艺术类学生虽然具备较好的策划和设计能力，
但受限于技术能力不足，作品往往只能停留在原型设计阶段，无法达
到可以实际使用的程度。这两类学生的合作也往往因为不了解对方领
域的基本原理和流程而困难重重。iVX 作为 H5 开发工具iH5 的升级版，
以其强大易用的专业化功能吸引了大批不懂代码但又希望从事前端开发
的非计算机专业人员，也成为众多程序员提高效率、简化开发流程的有力
助手。
本书以iVX平台的前端开发技术为主线，在编写过程中，充分考
虑了零代码基础的文科生与艺术生的实际情况，以深入浅出的讲解和
丰富的案例带领读者迅速掌握 H5 交互设计的核心技术与设计理念。本
书的另一大特色是介绍了大量全国大学生广告艺术大赛历年交互
类的获奖作品，这些作品都是企业真实命题，并且超过半数使用了iH5
或iVX平台开发。

交互媒体设计与开发是一个较为广泛的领域，其中以H5 技术为核心的Web 前端开发占据重要地位。近年来，H5 技术发展迅速，尤其是在移动端得到广泛应用，逐渐成为App 开发、UI 设计、网络营销、传媒娱乐等领域中的重要技术之一。各高校在传媒和设计相关专业的教学中，也越来越重视学生新媒体应用技术与创新能力的培养。但是，受限于师资、设备与理念等方面的不足，教学效果不甚理想。比较常见的窘境是计算机类学生技术能力较强，但缺乏艺术设计与创新能力；文科和艺术类学生虽然具备较好的策划和设计能力，但受限于技术能力不足，作品往往只能停留在原型设计阶段，无法达到可以实际使用的程度。这两类学生的合作也往往因为不了解对方领域的基本原理和流程而困难重重。
近年来，随着互联网作为基础设施的快速发展，前端开发技术和工具也发生了前所未有的变化。以Figma、Canva 为代表的在线开发工具引领了设计软件从离线到在线、从大而全到小而美的潮流。这些强调无感迭代、多人合作、海量资源的在线开发平台大大降低了交互媒体设计和开发的技术门槛，掀起了一波交互媒体开发的新浪潮。在这次浪潮中，国内企业纷纷跟进，易企秀、即时设计、iVX 等在线开发平台脱颖而出。其中，iVX 作为H5 开发工具iH5 的升级版，以其强大易用的专业化功能吸引了大批不懂代码但又希望从事前端开发的非计算机专业人员，也成为众多程序员提高效率、简化开发流程的有力助手。
本书以iVX 平台的前端开发技术为主线，在编写过程中，充分考虑了零代码基础的文科生与艺术生的实际情况，以深入浅出的讲解和丰富的案例带领读者迅速掌握H5 交互设计的核心技术与设计理念。本书的另一大特色是介绍了大量全国大学生广告艺术大赛历年交互类的获奖作品，这些作品都是企业真实命题，并且超过半数使用了iH5或iVX 平台开发。通过对这些同龄人真实创作案例的赏析，学生可以建立信心、激发兴趣，快速提升实践能力。坚持以赛促教、以赛促学、以赛促改，是笔者所在院系教师团队经过多年探索的经验总结，本书的编写正是基于此经验。
在体例上，本书每章包含4 个部分，各部分安排如下。理论讲解：围绕本章主题讲解基本概念和理论。
项目实训：对理论讲解部分内容做项目实训，教师当堂演示，学生当堂模仿练习。
拓展训练：在项目实训的基础上进一步引导学生应用本书所学技能动手实践。课时充裕的课程，可将本部分用作学生的课堂练习，教师进行现场辅导。课时紧张的课程也可留作课后作业。
本章小结：总结本章要点。
教师在授课过程中应根据实际情况灵活选用章节内容，例如，部分章节有多个项目实训的可以按需选用其一，其余留作课堂练习或课后作业。我们建议的教学时间为每章4 ～ 6 课时，总学时32 ～ 48 学时，其中包含了讲授、演示与实训时间。
为避免链接失效导致案例无法访问，书中所有互动作品均以录屏方式展示，读者扫描案例对应的二维码即可在线观看，您也可以在浏览器中输入脚注中的网址直接访问互动作品原件。
由于在线开发平台的版本迭代较快，读者在使用本教材时可能会发现书中内容与软件界面不符的情况，为最大限度保证教材内容的时效性，我们会持续发布《更新说明》。请读者扫描前言中的二维码下载书中使用的案例素材及更新文件。
由于编者水平有限，书中难免存在不足之处，欢迎广大读者批评指正。
编者
2023 年8 月

李钢，中国传媒大学数字媒体艺术方向硕士，广播电视艺术学方向博士，中美富布莱特（Fulbright）项目联合培养博士，美国田纳西大学访问学者，英国高等教育学会（HEA）会员，四川省广播影视高等教育学会常务理事。现为国家级一流本科学科建设点西南交通大学传播系教师，国家级一流本科课程《新媒体概论》教学团队主讲教师，硕士研究生导师。多年从事数字媒体与影视创作的教学与研究工作，指导学生多次获得国家级和省级学科竞赛大奖。

曹静，成都东软学院数字艺术与设计学院副教授，多年从事互动媒体、UI设计等相关研究与教学工作。

第1 章　iVX 入门 001
11 H5 概况 001
111 H5 是什么 001
112 H5 编辑工具 001
113 H5 案例展示 002
12 iVX 工作流程 004
121 准备工作 004
122 新建应用 004
123 界面 006
124 父子对象 008
125 项目实训：翻页 008
13 前台布局 011
131 常用布局组件 011
132　项目实训：自适应网页 015
14　常用素材组件 018
15　拓展训练 023
16　本章小结 024
第2 章　交互基础 025
21　事件 025
211　事件概述 025
212　项目实训：活动报名表 027
22　轨迹 032
221　轨迹与关键帧动画 032
222　时间轴 033
223　项目实训：切西瓜 034
224　项目实训：冰冻果汁 037
23　计数器与条件容器 040
231　计数器 040
232　条件容器 041
233　项目实训：按住1 秒钟 041
234　项目实训：色觉游戏 044
24　触发器 047
241　触发器概述 047
242　项目实训：倒计时 047
25　拓展训练 053
26　本章小结 054
第3 章　动画基础 055
31　组件 055
32　动效与动效组 055
321　动效的使用场景 055
322　动效的添加 055
323　动效组 057
324　项目实训：动效果汁 057
33　滑动时间轴 059
331　滑动时间轴概述 059
332　项目实训：滑动天气 059
34　运动与缓动 064
35　图片序列与面板 065
351　图片序列 065
352　面板 066
353　项目实训：蓝色星球 066
36　画中画 068
361　画中画概述 068
362　项目实训：画中画 068
37　拓展训练 071
38　本章小结 072
第4 章　全景与3D 世界 073
41　全景 073
411　全景概述 073
412　项目实训：720全景风光 074
413　全景视频 082
42　3D 世界 083
421　3D 世界概述 083
422　项目实训：3D 邀请函 084
43　拓展训练 088
44　本章小结 088
第5 章　物理世界 089
51　物理世界概述 089
511　项目实训：小熊滑滑梯 091
512　项目实训：飞机大战 093
52　拓展训练 101
53　本章小结 104
第6 章　数据库与服务 105
61　数据库 105
611　数据库概述 105
612　项目实训：简易表单提交 107
613　项目实训：数据库抽奖 113
62　用户数据库 126
621　用户数据库概述 126
622　项目实训：手机短信验证注册与登录 127
63　微信注册与登录 135
631　微信注册与登录概述 135
632　项目实训：微信注册与登录 137
64　拓展训练 139
65　本章小结 139
第7 章　适配 141
71　适配概述 141
711　适配的含义 141
712　设备像素比（DPR） 141
72　iVX 中的屏幕适配 142
721　设备适配 142
722　前台适配 142
723　排版容器 144
724　横幅 145
73　横屏适配 146
731　项目实训：设备适配 148
732　项目实训：视频真横屏适配 150
74　拓展训练 154
75　本章小结 154
第8 章　H5 创意设计 155
81　H5 作品的分类 155
82　H5 作品的设计原则 155
821　交互作品量表 155
822　H5 作品创作的一般性原则 156
83　H5 作品的设计流程 156
831　版面设计 157
832　交互设计 159
84　H5 设计常用工具软件 163
841　设计工具 163
842　H5 制作工具 164
843　辅助工具 165
85　大广赛参赛指南 166
851　大广赛简介 166
852　大广赛互动作品创作要点 167
853　大广赛iVX 平台创作与提交问题汇总 168
86　本章小结 172
参考文献 173
致谢 174