本書介紹了零代碼在線開發(fā)平臺 iVX 的開發(fā)流程和基本功能，以 H5 交互媒體開發(fā)為主要應(yīng)用，結(jié)合全國大學(xué)生廣告藝術(shù)大賽歷年獲獎作品，深入淺出地講解了交互媒體設(shè)計的理念和技術(shù)，幫助讀者快速提高交互媒體的開發(fā)和創(chuàng)作能力。
本書適合作為網(wǎng)絡(luò)與新媒體、傳播學(xué)、廣告學(xué)、視覺傳達(dá)等相關(guān)專業(yè)的核心教材，也適合廣大新媒體愛好者與從業(yè)者參考學(xué)習(xí)。
交互媒體設(shè)計與開發(fā)是一個較為廣泛的領(lǐng)域，其中以 H5 技術(shù)
為核心的Web 前端開發(fā)占據(jù)重要地位。各高校在傳媒和設(shè)計相關(guān)專
業(yè)的教學(xué)中，也越來越重視學(xué)生新媒體應(yīng)用技術(shù)與創(chuàng)新能力的培養(yǎng)。
但是，受限于師資、設(shè)備與理念等方面的不足，教學(xué)效果不甚理想。
比較常見的窘境是計算機(jī)類學(xué)生技術(shù)能力較強(qiáng)，但缺乏藝術(shù)設(shè)
計與創(chuàng)新能力；文科和藝術(shù)類學(xué)生雖然具備較好的策劃和設(shè)計能力，
但受限于技術(shù)能力不足，作品往往只能停留在原型設(shè)計階段，無法達(dá)
到可以實際使用的程度。這兩類學(xué)生的合作也往往因為不了解對方領(lǐng)
域的基本原理和流程而困難重重。iVX 作為 H5 開發(fā)工具iH5 的升級版，
以其強(qiáng)大易用的專業(yè)化功能吸引了大批不懂代碼但又希望從事前端開發(fā)
的非計算機(jī)專業(yè)人員，也成為眾多程序員提高效率、簡化開發(fā)流程的有力
助手。
本書以iVX平臺的前端開發(fā)技術(shù)為主線，在編寫過程中，充分考
慮了零代碼基礎(chǔ)的文科生與藝術(shù)生的實際情況，以深入淺出的講解和
豐富的案例帶領(lǐng)讀者迅速掌握 H5 交互設(shè)計的核心技術(shù)與設(shè)計理念。本
書的另一大特色是介紹了大量全國大學(xué)生廣告藝術(shù)大賽歷年交互
類的獲獎作品，這些作品都是企業(yè)真實命題，并且超過半數(shù)使用了iH5
或iVX平臺開發(fā)。
交互媒體設(shè)計與開發(fā)是一個較為廣泛的領(lǐng)域，其中以H5 技術(shù)為核心的Web 前端開發(fā)占據(jù)重要地位。近年來，H5 技術(shù)發(fā)展迅速，尤其是在移動端得到廣泛應(yīng)用，逐漸成為App 開發(fā)、UI 設(shè)計、網(wǎng)絡(luò)營銷、傳媒娛樂等領(lǐng)域中的重要技術(shù)之一。各高校在傳媒和設(shè)計相關(guān)專業(yè)的教學(xué)中，也越來越重視學(xué)生新媒體應(yīng)用技術(shù)與創(chuàng)新能力的培養(yǎng)。但是，受限于師資、設(shè)備與理念等方面的不足，教學(xué)效果不甚理想。比較常見的窘境是計算機(jī)類學(xué)生技術(shù)能力較強(qiáng)，但缺乏藝術(shù)設(shè)計與創(chuàng)新能力；文科和藝術(shù)類學(xué)生雖然具備較好的策劃和設(shè)計能力，但受限于技術(shù)能力不足，作品往往只能停留在原型設(shè)計階段，無法達(dá)到可以實際使用的程度。這兩類學(xué)生的合作也往往因為不了解對方領(lǐng)域的基本原理和流程而困難重重。
近年來，隨著互聯(lián)網(wǎng)作為基礎(chǔ)設(shè)施的快速發(fā)展，前端開發(fā)技術(shù)和工具也發(fā)生了前所未有的變化。以Figma、Canva 為代表的在線開發(fā)工具引領(lǐng)了設(shè)計軟件從離線到在線、從大而全到小而美的潮流。這些強(qiáng)調(diào)無感迭代、多人合作、海量資源的在線開發(fā)平臺大大降低了交互媒體設(shè)計和開發(fā)的技術(shù)門檻，掀起了一波交互媒體開發(fā)的新浪潮。在這次浪潮中，國內(nèi)企業(yè)紛紛跟進(jìn)，易企秀、即時設(shè)計、iVX 等在線開發(fā)平臺脫穎而出。其中，iVX 作為H5 開發(fā)工具iH5 的升級版，以其強(qiáng)大易用的專業(yè)化功能吸引了大批不懂代碼但又希望從事前端開發(fā)的非計算機(jī)專業(yè)人員，也成為眾多程序員提高效率、簡化開發(fā)流程的有力助手。
本書以iVX 平臺的前端開發(fā)技術(shù)為主線，在編寫過程中，充分考慮了零代碼基礎(chǔ)的文科生與藝術(shù)生的實際情況，以深入淺出的講解和豐富的案例帶領(lǐng)讀者迅速掌握H5 交互設(shè)計的核心技術(shù)與設(shè)計理念。本書的另一大特色是介紹了大量全國大學(xué)生廣告藝術(shù)大賽歷年交互類的獲獎作品，這些作品都是企業(yè)真實命題，并且超過半數(shù)使用了iH5或iVX 平臺開發(fā)。通過對這些同齡人真實創(chuàng)作案例的賞析，學(xué)生可以建立信心、激發(fā)興趣，快速提升實踐能力。堅持以賽促教、以賽促學(xué)、以賽促改，是筆者所在院系教師團(tuán)隊經(jīng)過多年探索的經(jīng)驗總結(jié)，本書的編寫正是基于此經(jīng)驗。
在體例上，本書每章包含4 個部分，各部分安排如下。理論講解：圍繞本章主題講解基本概念和理論。
項目實訓(xùn)：對理論講解部分內(nèi)容做項目實訓(xùn)，教師當(dāng)堂演示，學(xué)生當(dāng)堂模仿練習(xí)。
拓展訓(xùn)練：在項目實訓(xùn)的基礎(chǔ)上進(jìn)一步引導(dǎo)學(xué)生應(yīng)用本書所學(xué)技能動手實踐。課時充裕的課程，可將本部分用作學(xué)生的課堂練習(xí)，教師進(jìn)行現(xiàn)場輔導(dǎo)。課時緊張的課程也可留作課后作業(yè)。
本章小結(jié)：總結(jié)本章要點(diǎn)。
教師在授課過程中應(yīng)根據(jù)實際情況靈活選用章節(jié)內(nèi)容，例如，部分章節(jié)有多個項目實訓(xùn)的可以按需選用其一，其余留作課堂練習(xí)或課后作業(yè)。我們建議的教學(xué)時間為每章4 ～ 6 課時，總學(xué)時32 ～ 48 學(xué)時，其中包含了講授、演示與實訓(xùn)時間。
為避免鏈接失效導(dǎo)致案例無法訪問，書中所有互動作品均以錄屏方式展示，讀者掃描案例對應(yīng)的二維碼即可在線觀看，您也可以在瀏覽器中輸入腳注中的網(wǎng)址直接訪問互動作品原件。
由于在線開發(fā)平臺的版本迭代較快，讀者在使用本教材時可能會發(fā)現(xiàn)書中內(nèi)容與軟件界面不符的情況，為最大限度保證教材內(nèi)容的時效性，我們會持續(xù)發(fā)布《更新說明》。請讀者掃描前言中的二維碼下載書中使用的案例素材及更新文件。
由于編者水平有限，書中難免存在不足之處，歡迎廣大讀者批評指正。
編者
2023 年8 月
李鋼，中國傳媒大學(xué)數(shù)字媒體藝術(shù)方向碩士，廣播電視藝術(shù)學(xué)方向博士，中美富布萊特（Fulbright）項目聯(lián)合培養(yǎng)博士，美國田納西大學(xué)訪問學(xué)者，英國高等教育學(xué)會（HEA）會員，四川省廣播影視高等教育學(xué)會常務(wù)理事�，F(xiàn)為國家級一流本科學(xué)科建設(shè)點(diǎn)西南交通大學(xué)傳播系教師，國家級一流本科課程《新媒體概論》教學(xué)團(tuán)隊主講教師，碩士研究生導(dǎo)師。多年從事數(shù)字媒體與影視創(chuàng)作的教學(xué)與研究工作，指導(dǎo)學(xué)生多次獲得國家級和省級學(xué)科競賽大獎。
曹靜，成都東軟學(xué)院數(shù)字藝術(shù)與設(shè)計學(xué)院副教授，多年從事互動媒體、UI設(shè)計等相關(guān)研究與教學(xué)工作。
第1 章 iVX 入門 001
11 H5 概況 001
111 H5 是什么 001
112 H5 編輯工具 001
113 H5 案例展示 002
12 iVX 工作流程 004
121 準(zhǔn)備工作 004
122 新建應(yīng)用 004
123 界面 006
124 父子對象 008
125 項目實訓(xùn)：翻頁 008
13 前臺布局 011
131 常用布局組件 011
132 項目實訓(xùn)：自適應(yīng)網(wǎng)頁 015
14 常用素材組件 018
15 拓展訓(xùn)練 023
16 本章小結(jié) 024
第2 章 交互基礎(chǔ) 025
21 事件 025
211 事件概述 025
212 項目實訓(xùn)：活動報名表 027
22 軌跡 032
221 軌跡與關(guān)鍵幀動畫 032
222 時間軸 033
223 項目實訓(xùn)：切西瓜 034
224 項目實訓(xùn)：冰凍果汁 037
23 計數(shù)器與條件容器 040
231 計數(shù)器 040
232 條件容器 041
233 項目實訓(xùn)：按住1 秒鐘 041
234 項目實訓(xùn)：色覺游戲 044
24 觸發(fā)器 047
241 觸發(fā)器概述 047
242 項目實訓(xùn)：倒計時 047
25 拓展訓(xùn)練 053
26 本章小結(jié) 054
第3 章 動畫基礎(chǔ) 055
31 組件 055
32 動效與動效組 055
321 動效的使用場景 055
322 動效的添加 055
323 動效組 057
324 項目實訓(xùn)：動效果汁 057
33 滑動時間軸 059
331 滑動時間軸概述 059
332 項目實訓(xùn)：滑動天氣 059
34 運(yùn)動與緩動 064
35 圖片序列與面板 065
351 圖片序列 065
352 面板 066
353 項目實訓(xùn)：藍(lán)色星球 066
36 畫中畫 068
361 畫中畫概述 068
362 項目實訓(xùn)：畫中畫 068
37 拓展訓(xùn)練 071
38 本章小結(jié) 072
第4 章 全景與3D 世界 073
41 全景 073
411 全景概述 073
412 項目實訓(xùn)：720全景風(fēng)光 074
413 全景視頻 082
42 3D 世界 083
421 3D 世界概述 083
422 項目實訓(xùn)：3D 邀請函 084
43 拓展訓(xùn)練 088
44 本章小結(jié) 088
第5 章 物理世界 089
51 物理世界概述 089
511 項目實訓(xùn)：小熊滑滑梯 091
512 項目實訓(xùn)：飛機(jī)大戰(zhàn) 093
52 拓展訓(xùn)練 101
53 本章小結(jié) 104
第6 章 數(shù)據(jù)庫與服務(wù) 105
61 數(shù)據(jù)庫 105
611 數(shù)據(jù)庫概述 105
612 項目實訓(xùn)：簡易表單提交 107
613 項目實訓(xùn)：數(shù)據(jù)庫抽獎 113
62 用戶數(shù)據(jù)庫 126
621 用戶數(shù)據(jù)庫概述 126
622 項目實訓(xùn)：手機(jī)短信驗證注冊與登錄 127
63 微信注冊與登錄 135
631 微信注冊與登錄概述 135
632 項目實訓(xùn)：微信注冊與登錄 137
64 拓展訓(xùn)練 139
65 本章小結(jié) 139
第7 章 適配 141
71 適配概述 141
711 適配的含義 141
712 設(shè)備像素比（DPR） 141
72 iVX 中的屏幕適配 142
721 設(shè)備適配 142
722 前臺適配 142
723 排版容器 144
724 橫幅 145
73 橫屏適配 146
731 項目實訓(xùn)：設(shè)備適配 148
732 項目實訓(xùn)：視頻真橫屏適配 150
74 拓展訓(xùn)練 154
75 本章小結(jié) 154
第8 章 H5 創(chuàng)意設(shè)計 155
81 H5 作品的分類 155
82 H5 作品的設(shè)計原則 155
821 交互作品量表 155
822 H5 作品創(chuàng)作的一般性原則 156
83 H5 作品的設(shè)計流程 156
831 版面設(shè)計 157
832 交互設(shè)計 159
84 H5 設(shè)計常用工具軟件 163
841 設(shè)計工具 163
842 H5 制作工具 164
843 輔助工具 165
85 大廣賽參賽指南 166
851 大廣賽簡介 166
852 大廣賽互動作品創(chuàng)作要點(diǎn) 167
853 大廣賽iVX 平臺創(chuàng)作與提交問題匯總 168
86 本章小結(jié) 172
參考文獻(xiàn) 173
致謝 174
書單推薦
