融媒体设计与实现系列图书
木疙瘩（Mugeda）官方推荐用书
可视化H5页面设计与制作 Mugeda标准教程
人民邮电出版社
北京
图书在版编目（CIP）数据
可视化H5页面设计与制作.Mugeda标准教程/彭澎，彭嘉琦著.--北京：人民邮电出版社，2020.4
ISBN 978-7-115-53231-2
Ⅰ.①可… Ⅱ.①彭…②彭… Ⅲ.①网页制作工具 Ⅳ.①TP393.092.2
中国版本图书馆CIP数据核字（2020）第040285号
◆著 彭澎 彭嘉埼
责任编辑 李莎
责任印制 马振武
◆人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
网址 http://www.ptpress.com.cn
艺堂印刷（天津）有限公司印刷
◆开本：800×1000 1/16
印张：13
字数：262千字 2020年4月第1版
印数：1-5000册 2020年4月天津第1次印刷
定价：59.80元
读者服务热线：(010)81055410 印装质量热线：(010)81055316
反盗版热线：(010)81055315
广告经营许可证：京东工商广登字20170147号
本书以Mugeda为平台，系统地介绍了可视化H5交互动画页面的设计思路、设计方法与技术实现。
本书共8章，主要内容包括移动通信和信息传播的基础知识及其与H5的关系，Mugeda的操作界面及基本操作，属性设置与基本的H5页面设计与制作，行为、触发事件与交互的设置和制作，帧动画和特型动画的设计与应用，虚拟现实、微信、图表、表单、预置考题、陀螺仪等实用工具的应用，以及交互逻辑案例解析。
本书为Mugeda官方标准教程，内容全面、案例丰富，具有很强的可读性和实用性，可作为高校相关专业和各类H5培训班的教材，也可作为新媒体从业人员自学H5页面设计与制作的参考书。
可视化H5页面的设计与制作技术是建立在HTML5标准基础上的一种具有巨大发展潜力的技术。随着移动通信标准5G的应用，可视化H5页面设计与制作技术的应用和发展空间将更为广阔。
自2019年1月《可视化H5页面设计与制作》教材出版以来，广大读者给予了大力支持，也提出了很多中肯的建议。作为教材的编写者，我首先对广大读者，特别是提出宝贵建议的读者表示由衷的感谢。
Mugeda平台于今年10月推出了新版本。新推出的平台，功能更加完善，操作性和实用性也更强。为了能更好地满足读者学习的需要，结合读者的建议，在北京乐享云创科技有限公司（Mugeda平台的所有方）的鼎力支持下，重新编写了本教材。本教材在结构上进行了全面的调整，强化了系统性、条理性和可教学性、可学习性。本教材内容完整，实例丰富，特别是对一些重点内容和难以理解的内容，都配有教学用视频案例。除此之外，教材配套资源中还提供了大量的教学素材，这将更加便于教师教学和学生学习。教材中，强化了要点提示内容，使读者在学习中能够精准地掌握相关操作。本教材延续了前一版本的写作思路，遵循理论结合实际，以及将复杂问题简单化的编写原则。
为了帮助读者快速掌握Mugeda的操作方法，深刻领会功能实现与视觉表现的关系，本书立足于实际应用，以任务实例串讲知识点的方式，详细解析H5页面的设计思路、设计方法与技术实现。
适用读者
本书没有特定的读者群，只要有基本的计算机操作能力的人员，都可以通过本书的学习而掌握书中内容。
教学使用
本书非常适合教学和学生自学使用。对于各层次的不同专业的教学来说，由于专业不同，培养目标不同，对H5页面设计与应用的需求不同，教师在教学和学时安排上可以根据专业特色和学生水平，在实践环节予以合理的安排。也可以将本课程内容作为技术支撑进行相关课程教学，例如“用户体验设计”“移动界面设计与应用”等课程。
学时分配
本书共8章内容，环环相扣，重要知识点结合操作任务来讲解，且都配有课堂实训或练习。总体上，第2章至第6章是全书的重点部分，建议占总学时的三分之二，并以实训为主。
配套资源使用说明及下载方式
本书的配套资源包括教学PPT和素材，对于重难点内容则提供相应的案例视频，手机扫码即可观看。扫描下方二维码，关注微信公众号“职场研究社”，并回复“53231”，即可获得整套资源的下载方式。
职场研究社
致谢
本书从规划、编写，到出版，都得到了北京乐享云创科技有限公司及人民邮电出版社的大力支持，北京乐享云创科技有限公司领导还特意安排工程技术人员对本书的内容进行全面的技术审校。在此表示衷心的感谢。特别致谢：北京乐享云创科技有限公司的王志先生、王强军先生、徐谭谭女士；人民邮电出版社的李莎老师和罗芬老师。
由于编者水平有限，书中不足之处在所难免，敬请广大读者批评指正。我们的联系邮箱为luofen@ptpress.com.cn。
作者
2020年2月
移动互联信息技术的快速崛起，对人们的生活方式及消费方式产生了巨大的影响。随着5G的部署，信息传播与信息应用将进入一个全新的时代。为了使读者了解为什么要学习H5应用开发技术，本章将从移动通信技术、信息内容及其传播、移动用户终端与智能手机等3个方面进行简要的介绍，以帮助读者更好地理解H5的概念、特点及其应用发展。本章主要内容如图1.1所示。
H5是以移动通信为基础的应用技术，因此学习和掌握H5相关技术，首先应该认识和了解移动通信技术的特点及其发展过程。
人类最初的交互活动应该与我们现在所看到和观察到的自然界中的其他各类动物一样，主要通过动作和叫声进行信息交流。但人类的进化与其他动物进化的最大区别在于人类不仅进化了自己的大脑，还通过劳动进化出了语言，又进一步创作出了文字，直至如今出现的各种智能技术，使得人类的信息交流不论在内容上还是形式上都越来越丰富，越来越精确，越来越迅速。移动通信就是人类通信技术发展到一定阶段的产物。
1.通信的产生与发展
通信(Communication)是用于表达人与人之间通过某种媒体进行的信息交流与传递的专用名词。通信是指把信息从一个地方传送到另一个地方的过程，其目的是传输消息。用来实现通信过程的系统被称为通信系统。
在中国古代，人们就利用烽火台、金鼓、锦旗、消息树等来实现远距离的信息传递。进入19世纪后，人们开始利用电信号来实现远距离通信，使信息传递更快更畅达。
2.移动通信
电磁波的发现和相关理论的建立，打开了无线通信的大门。从字面上讲，移动是物体之间物理位置关系发生改变，所以移动通信可以理解为在通信过程中，信息的发送方和接收方的位置关系可以随时改变的通信。从用户的角度理解，可以将移动通信理解为通信的双方或多方可以在运动状态下进行通信，例如微信群聊。
现代移动通信技术是以电子技术为基础发展起来的，其发展大致经历了五个阶段。
1.从第一代到第四代移动通信技术
第一代移动通信（1G）技术是以模拟技术为基础的蜂窝无线电话系统，这个阶段的移动通信受网络容量的限制，系统只能传输语音信号，只能实现区域性通信，不能进行移动通信的长途漫游，因而这是一种区域性的移动通信系统。
当移动通信技术发展到第四代（以下简称4G）时，移动通信系统已经成为集广域网、互联网于一体的通信系统了。4G系统能够为用户提供与固网宽带一样的网速，下载速度和上传速度分别可以达到100Mbit/s和20Mbit/s，能够传输高质量的视频图像。
2.第五代移动通信技术
第五代移动通信（以下简称5G）技术将用户体验放在第一位，不仅能为人们提供极大的生活便利，还将深刻改变人们的生活行为习惯，促进社会各行各业服务方式的转型。与第四代移动通信技术相比，5G技术在网络平均吞吐率、传输速度、3D、互动式游戏等方面的应用实现了极大的提升。
采用5G技术的移动通信系统能够提供更强的业务支撑，并强化了“软”配置的研究和开发，运营商可以依据业务流量的变化而随时对网络资源进行调整。
就信息传播而言，移动通信具有巨大的优势，特点明显，其在给人们的工作和生活带来极大便利的同时，必须解决好客观存在的一些问题。
1.移动通信的优势
（1）便捷性
用户利用移动设备（如智能手机、笔记本电脑）可随时接入通信网络，享受通信网络所提供的服务。所以从应用者的角度看，便捷性是移动通信最突出的优点和特征，这使得通过移动设备实现信息获取、办公、人与人之间的沟通远比PC设备方便。
（2）移动通信服务的广泛性与丰富性
对移动通信用户来说，信息服务是通过移动终端设备获得的。随着移动终端设备的智能化，移动通信为用户提供的服务越来越丰富。如今，用户通过移动终端设备不仅可以随时随地与他人通话、发短信、视频聊天、玩游戏等，还可以实现包括定位、信息处理、指纹扫描、条码扫描、IC卡扫描、面部识别及酒精含量检测等功能。
移动通信服务的发展给人们的生活带来了很多便利，如在春运期间人们可直接在手机App上订票，不必再去火车站彻夜排队，而且在不少车站人们刷一下智能车票或身份证就能进站；人们点一点手机就可以叫出租车、购物、转账、导航……可见，移动通信技术极大地改变了人们的生活方式。
2.移动通信中应解决的关键问题
（1）资源的有限性
为了达到使用便捷的效果，移动终端设备通常具有体积小、重量轻、耗能低的特点，并且要求能够在各种环境下稳定工作。正因如此，移动设备受无线信道、通信等资源的制约，在路径选择、安全支持、服务质量等方面受到限制和影响。此外，由于移动终端设备（如智能手机、手提电脑）基本上都是使用自带的电池来供应能量，而每个移动设备中的电池能量是有限的，因此移动终端设备连续使用时间有限。上述这些问题是移动通信技术及其应用中所面临的资源有限问题。
（2）跨平台应用开发
面对不同的移动终端设备、不同的应用平台，需要考虑移动通信应用的兼容性问题。即使是同一个应用，各个“端”独立开发，不仅开发周期长，而且人员成本高，技术人员也往往会处于重复、低能的工作状态。因而为了提高跨平台的互操作性，提高应用开发和用户使用效率，必须要解决好跨平台应用开发这一重要问题。
目前，跨平台的技术方案受到越来越多的技术人员和企业的关注。说到跨平台技术，现在不能不提H5。H5在跨平台应用开发方面具有强大的优势，不管是在Mac、Windows、Linux、iOS、Android还是其他平台，只要有浏览器，H5应用几乎可以访问任何平台。此外，H5的开发成本低，调试方便，迭代速度快，无需审核，即时响应，能在用户毫无感知的情况下进行更新。
（3）其他问题
除上述问题外，移动通信还存在异构网络互连问题、系统的结构问题、信号传播的条件和环境问题、通信安全问题等诸多问题，这些也是移动通信需要解决的基础性问题。
信息是消息中有意义的内容，是为了满足用户决策的需要而经过加工处理的数据。信息传播是对信息内容的传播，学习H5应用开发技术的主要目的就是实现更有效、更丰富、更便捷的信息传播，所以在学习H5应用技术之前还是应该先了解与信息内容紧密相关的信息表达形式及信息传播等相关概念，以及它们之间的关系等。
1.信息内容
内容是与形式相对应的概念，但又与形式密切相关——内容决定形式，形式依赖内容。与此同时，形式还可以反作用于内容，影响内容。
从内容的角度可以把信息理解为就是内容的表达形式。内容可利用信息传播技术传播出去。例如，一则故事，可以采用文字、图形图像、动画、声音等多种形式表述，对不同的人群，利用何种形式表述是提升信息传播效果的关键。
2.信息的表现形式
信息的表现形式是随着人类文明和科技水平的发展而不断发展的。例如，石器时代，人类将要传达或记录的内容用图形的形式画在岩壁上，图1.2所示的中国云南沧源岩画就是石器时代人类记录下的狩猎场景信息。后来，文字的出现进一步丰富了人类对内容的表现形式，例如图1.3所示的已有约1000年历史的纳西族东巴象形文字。
再后来，信息的表现形式发展到可用电信号来表示，如图1.4和图1.5所示。
信息传播是由通信过程实现的，涉及通信系统的组成、通信方式等多方面的内容，本小节仅对传输途径、传输媒体等内容进行简单的介绍。
1.信息传输媒体
在日常生活中，人们所说的媒体一般是指承载、传播信息的物质实体，但在信息技术和通信技术领域中，媒体不仅包括储存、呈现、处理、传递信息的物理载体，还包括多媒体计算机中所说的非物质实体，即信息内容表现形式，如文字、声音、图形图像、动画等。信息技术和通信技术领域中的这些所谓的媒体更确切的称呼应该是传输媒体。
随着计算机技术、网络技术和通信技术的发展，在信息技术领域中相继出现了“新媒体”“融媒体”这样的词。“新媒体”一词已经出现很多年，并广为人知，但什么是“融媒体”却众说纷纭。根据几大搜索引擎中对“融媒体”的描述，简单地说，融媒体不是指某种独立的实体媒体，它是把传统媒体与新媒体的优势发挥到极致，使单一媒体的竞争力变为多媒体共同的竞争力，从而为“我”所用，为“我”服务。融媒体是充分利用媒介载体，把广播、电视、报纸等既有共同点，又存在互补性的不同媒体，在人力、内容、宣传等方面进行全面整合，实现资源通融、内容兼容、宣传互融、利益共融的新型媒体。融媒体还可以被理解为是跳出图文或视频的传统框架综合考虑文、图、音、视、全景、图表、动画等各种媒体形式，根据叙事需求，合理组织不同媒体形态来展示信息的共同体。其中，H5是实现融媒体信息传播的重要技术。
2.信息传输途径
途径是指一件事物能使另一件事物发生改变的方法。信息传播途径是指将信息从一个地方传到另一个地方的方法。
信息传播途径从传统的报纸、邮件、电视等传播方式，已经发展到利用移动互联网通过微信、微博、博客、短视频、直播等方式进行信息传播。随着人工智能技术、5G技术，以及H5应用为代表的传播技术的发展、成熟和完善，信息传播的内容和形式将会越来越丰富，信息传播的质量和效率会越来越高，信息传播对人们的消费和生活习惯所产生的影响也会越来越大。
通信的目的是把信息从一个地方传到另一个地方，对完成通信任务的通信系统来说，它都必须具备三个基本要素：信源、传输媒体和信宿。在移动通信系统中，移动用户终端设备是直接面向用户的应用设备，因而它既是信源设备又是信宿设备，其性能的高低对用户的使用体验和移动通信信息服务的推广有非常重要的影响。
1.移动用户终端与生活
随着网络及通信技术的发展，移动信息服务已成为人们工作与生活中不可或缺少的组成部分。如今，无处不在的移动用户终端不仅为人们提供基本的通话、拍照、听音乐、玩游戏等服务，还为人们提供定位导航、信息处理、指纹扫描、身份证识别、声音识别、条码及二维码识别、IC卡识别，以及企业宣传、产品推销、活动介绍、教育服务、应急处理等各种服务。移动信息服务成为文化传播、教育培训、娱乐、移动执法、移动办公和移动商务的重要工具。
2.移动用户终端的基本功能和品类
在移动信息服务中扮演着重要角色的移动用户终端自诞生以来，就在不断地改造与发展。在功能上，移动用户终端设备已经拥有强大的处理能力，可以完成复杂的数据信息处理任务，可以通过无线局域网、蓝牙和红外线进行通信。在设备类别方面，移动用户终端包括手机、笔记本电脑、POS机、车载电脑等，它们的功能越来越强，越来越智能化，而体积则越来越小，使用也越来越便捷、越来越灵活。
自全球首款智能手机投放市场以来，短短20年间，智能手机的软硬件技术、用户体验设计都发生了颠覆性的变化。目前智能手机越来越普及，使用智能手机已经成为人们日常生活中的重要内容，其给人们的生活、工作带来了极大的便利。如今，人们随时随地都可以使用智能手机享受各种信息服务，例如购票、支付款、导航、看新闻、看直播、听音乐等。下面以iPhone手机为例，来梳理智能手机在性能、外观，以及应用等方面的变化和发展。
1.屏幕尺寸和性能
第一代 iPhone屏幕的尺寸是3.5英寸（约89毫米），分辨率是320像素×480像素，屏幕像素密度是91像素/英寸，1600万色的TFT触控屏。而到第十四代iPhone X时，其屏幕无边框，尺寸是5.8英寸（约147毫米），由于采用了OLED技术，其分辨率达到2436像素× 1125像素，屏幕像素密度达到458像素/英寸。
2.外观变化
第一代iPhone的外观尺寸是115毫米×61毫米×11.6毫米，重量是135克，机身材料是金属材质。第十四代iPhone X的外观尺寸已经是143.6毫米×70.9毫米×7.7毫米，重量是174克，机身前后都是增强型玻璃面，外框是一个连续的不锈钢带。iPhone X保留了顶部的听筒、自拍相机 和传感器，取消了Home键，以Face ID取代了集合在Home键上的Touch ID功能。
3.操作系统及处理器性能变化
第一代iPhone采用iOS 2.0操作系统，CPU为ARM11,CPU频率为416Hz，运存（程序运行的存储空间）为128MB，内存有4GB和8GB两个版本。第十四代iPhone X拥有3GB的运存，内存有64GB和256GB两个版本，操作系统目前已升级到iOS 11.1，并采用A11 Bionic处理器，在此处理器中，内置了一系列复杂的控制器，并且对每一个控制器都针对特定的任务进行了优化。
4.拍摄性能变化
第一代iPhone采用单摄像头，后置摄像头是200万像素，支持视频拍摄、连拍、滤镜、自动对焦和数码变焦。第十四代iPhone X采用的是后置双1200万像素摄像头，广角镜头光圈为F1.8，能以60帧/秒的速度拍摄4K视频，也能以240帧/秒的速度拍摄1080P慢动作视频。长焦镜头光圈升级至F2.4，可以拍出更加令人惊叹的照片。双镜头均支持光学防抖，并且采用4个LED补光灯。零延迟的快门，可以更加准确地抓住关键瞬间。两个后置镜头都具有光学图像防抖功能，而且反应更快，即使在弱光下，也能拍出效果出众的照片和视频。前置摄像头为700万像素，光圈为F2.2，拥有景深识别功能，人像光效功能则根据摄影布光的基本原则，结合深度感应摄像头和面谱绘制等复杂的软硬件技术，能够生成逼真的影棚级光效。
5. App应用变化
第一代iPhone不支持3G网络，无复制、粘贴以及音乐等功能。如今，不仅是第十四代iPhone X，多款智能手机都可以当作电脑使用，功能非常强大。这是由于智能手机具有与电脑相同的安装和卸载应用程序的特点。应用程序可以提供各种各样的功能，如游戏、导航、新闻、天气预报等。用户能够根据需求安装相应的应用程序，这就极大地扩展了智能手机的应用范围，使用户可以随时随地像使用电脑一样使用智能手机工作、学习及享受各种信息服务。
人们上网所看到的网页，多数是用HTML编写的，而HTML是“超文本标记语言”的英文缩写。其“超文本”是指页面内可以包含图片、链接、音乐、程序等非文字元素，“标记”则是指这些超文本必须由包含属性的开头与结尾的标志来标记。HTML5是指第5代HTML规范标准，常被简称H5。H5是包括HTML、CSS、JavaScript在内的一套技术组合。
在多媒体应用中，H5指利用H5技术制作的数字产品，本书介绍的H5主要是指这类数字产品。
H5最大的特点是跨平台，在不需要开发者做太多的适配工作，也不需要用户下载的情况下，随意打开一个浏览器就能访问H5页面。H5提供完善的实时通信支持，具体表现在以下几个方面。
1.内容及视觉效果
H5支持字体嵌入、排版、动画、虚拟现实等功能。其中，动画和虚拟现实是品牌营销、活动推广、网页游戏、网络教育课件的重要表现形式。在PC互联网时代，这些内容基本是用Flash来制作的，但由于移动互联网的主流移动操作系统一般不支持Flash，并且Adobe公司也不再开发移动版Flash，这使得H5成为移动智能终端上制作和展现动画内容的最佳技术之一。
2.图像图形处理能力
H5支持图片的移动、旋转、缩放等常用编辑功能。利用H5开发工具，一个非专业人士在很短的时间内，也可以轻而易举地完成具有动画、虚拟现实等形式的交互类H5的设计与制作。
3.多媒体应用特点
App的原生开发方式对文字和音视频混排的多媒体内容处理来说相对麻烦，需要拆分文字、图片、音频、视频，解析对应的统一资源定位符（以下简称URL）并分别用不同的方式进行处理。H5则不受这方面的限制，可以将文字和音视频放在一起进行处理。
4.交互方式
H5提供了非常丰富的交互方式，不需要编码，按照开发工具中提供的提示信息，通过 简单的配置就可实现各种方式的交互。
5.开发与应用优势
H5的开发成本和维护成本低，开发周期短，并且升级方便，打开即可使用最新版本，免去用户重新下载和升级的麻烦。对于开发者来说，H5开发的门槛较低。
6.应用环境优势
H5的安装和使用都很灵活、方便；增强了图形渲染、影音、数据存储、多任务处理等处理能力；本地离线存储，浏览器关闭后数据不丢失；强化了Web网页的表现性能；支持更多插件，功能越来越丰富。H5兼容性好，用H5的技术开发出来的应用在各个平台都适用，且可以在网页上直接进行调试和修改。
7.传播推广
H5的推广成本低，传播能力强，视觉效果好，实时性强，是各种组织机构进行活动宣传、企业品牌推广和产品营销的利器。
1. H5开发工具
H5开发工具的出现，使得一款含有图像、视频、音频、动画等媒体形式的交互数字产品，制作用时短，发布方便，使用也方便。
目前，市场上有多种H5开发平台，这些平台为开发H5提供了有力的支持，使H5的开发变得轻松简单，方便快捷，且开发成本低。例如，易企秀、MAKA、Mugeda等，这些开发平台都有各自的特点。
简单、方便、易操作、易掌握、功能强大的H5开发工具，为编程零基础的人们开发精美的H5提供了便利。同H5应用需求的发展一样，未来的H5开发与制作会像如 今人们使用Word文档一样普及。这就是为什么要学习H5开发工具，掌握H5页面制作技术的一个重要原因。
2. H5营销
打开手机，在头条、腾讯及微信朋友圈中看到的那些精美的，带有动画、音乐、视频等表现形式的，点开后可以滑动翻页且还带各种特效的作品，基本上都是利用H5技术制作的，这其中包括企业产品广告、活动宣传广告，以及新闻、小游戏、纪念相册、课件、婚礼请帖等。
H5的传播性极强，一个优秀的H5在很短的时间内甚至可以达到数亿的曝光量。相对于传统营销，H5营销具有明显优势，如表1.1所示。
由此不难理解，为什么现在很多商家或企业都在努力研究和制作H5，利用H5来实现营销目的了。
1. H5所支持的媒体形式和多种交互方式
H5与智能手机相结合营造出前所未有的内容创新空间，丰富的媒体形式与交互方式的融合，使数字内容的呈现方式发生了巨大的变革。H5完美地支持了所有目前常见的媒体形式及移动交互方式，分别如图1.6和图1.7所示。
2.案例赏析
H5媒体形式和交互方式丰富多样，在全景VR、全景视频、交互图表、多点触控、手写识别等方面的应用极为广泛，深受用户的喜爱。表1.2提供了一些采用不同媒体形式和交互方式设计制作的H5案例供读者欣赏。
