Mugeda零代码可视化H5设计实战

本书主要讲解Mugeda软件的功能与操作方法，配以大量的演示及课堂案例，讲练结合，符合院校的教学方式。书中通过解析典型案例，详细介绍软件的实际操作方法，从而达到培养读者设计思维、提高实际操作能力的目的。本书共分为8章，内容包括融媒体传播与H5概述，Mugeda软件的界面、操作流程、账户管理等基础内容，Mugeda软件中编辑素材的工具和属性设置等内容，Mugeda软件媒体工具的用法，Mugeda软件用于动画制作的相关知识点和方法，Mugeda软件中行为交互的相关内容，以及关联绑定、表单与逻辑判断的内容，最后设置了3个综合案例，帮助读者巩固所学知识。

本书既适合新媒体，艺术设计等相关专业的师生，也可供设计师、程序员和艺术工作者等阅读参考。

王非

·Mugeda推荐设计师、Mugeda认证设计师

·荣获Mugeda比赛双料冠军、央视主办的第三届“你好，新时代一人民的小康”青年融媒体作品大赛最佳交互融合作品奖;

·曾为中国奥林匹克委员会等多家大型组织提供创作服务;

·拥有丰富的实战经验，对H5设计有独特见解;

·擅长讲授如何利用各类技术平台制作精彩的应用场景，并将实战经验融入课程中,有助于读者建立系统化的知识体系，理解和掌握软件底层逻辑，构建系统化的设计思维，并形成自己的一套学习方法。

抖音视频/今日头条/哗哩哗哩/快手/小红书账号:木疙瘩H5

近年来，互联网技术不断发展，移动设备及智能手机被广泛应用，普及度越来越高。网页作为互联网信息的重要载体，受重视程度不断增强，其制作技术也面临新的挑战。

H5为互动形式的多媒体广告页面，是在原有网页制作的基础上衍生的一种新型技术。它不仅能用于传统的计算机端网页建设，更主要的是可应用于手机、平板等移动端的网页开发和制作。因此，掌握H5的制作，具有相当大的现实意义及应用前景。

H5广泛应用于商业促销、互动活动、海报宣传、活动邀请、客户管理、电商引流、创意展示、简历名片、节日贺卡、公益宣传等场景。其类型多种多样，包括展示类、全景/.VR类、动画类、交互动画类、模拟类、合成类、数据应用类、游戏类、跨屏类、综合类等。

本书立足于实战，遵循实用、够用的原则，精选了大量实战案例，为读者讲授如何利用现有的H5技术平台制作各种精彩的应用场景。本书共8章，内容包括融媒体传播与H5概述、软件操作基础、编辑素材的方法，媒体工具的应用、动画制作方法、行为交互、关联与表单等，并通过大量案例深入浅出地讲解H5的制作过程及技巧。书中内容结构清晰，案例操作步骤详细，语言通俗易懂，还配有视频教学，非常适合初、中级网页制作人员学习。

本书中所有案例均为作者精心挑选，这些案例详细讲解了网页制作工具的基本应用及制作技巧，辅以设计理念、学习思考的方法，并将作者多年积累的制作经验融入其中，使读者能够在短时间内迅速掌握H5的设计制作方法。

为方便读者学习，本书提供教学课件、案例的素材文件和教学视频，并附赠思维宝典，读者可扫描下方二维码，随时随地学习和演练。

教学课件

素材文件

教学视频

思维宝典

在本书编写过程中，我的家人对我的写作给予了支持与帮助。在出版过程中，由于参与审校、设计的各位编辑辛勤的劳动，才使本书得以出版发行，在此表示由衷的感谢。

最后，感谢读者朋友们选用了这本书，如果本书能让您有所收获，那么我写书的初衷也就达到了。

王　非

2022年5月

第1章 融媒体传播与H5概述

1.1信息传播 004

1.1.1.信息传播简介 004

1.1.2.信息传播的特点 004

1.2融媒体 004

1.2.1.融媒体简介 004

1.2.2.融媒体的优势 005

1.2.3.融媒体落地实施 006

1.3H5简介 007

1.3.1.H5的概念 007

1.3.2.H5的基本特征 007

1.3.3.H5的应用 008

1.3.4.H5的传播与营销 011

1.4H5设计 012

1.4.1.H5策划的原则 012

1.4.2.H5的策划步骤 015

1.4.3.H5的营销小技巧 015

1.4.4.H5的微信功能 016

1.4.5.H5页面设计法则 016

第2章 Mugeda操作基础

2.1Mugeda简介 022

2.1.1.Mugeda平台 022

2.1.2.Mugeda的优势 022

2.1.3.Mugeda账号注册.方法 023

2.1.4.Mugeda的版本 023

2.2Mugeda基本操作.流程 024

2.2.1.新建文件的方法 024

2.2.2.发布流程 025

2.2.3.问题处理途径 027

2.3Mugeda平台编辑.界面及快捷键 029

2.3.1.菜单栏 029

2.3.2.工具栏 032

2.3.3.面板 033

2.3.4.快捷键 038

2.4作品尺寸与屏幕

.适配 039

2.4.1.作品尺寸设置 039

2.4.2.屏幕适配设置 039

2.5Mugeda账户管理 041

2.5.1.我的作品 041

2.5.2.我的模板 043

2.5.3.素材管理 044

2.5.4.回收站 044

2.5.5.我的账户 044

第3章 编辑素材

3.1“选择”工具组 048

3.1.1.“选择”工具 048

3.1.2.“节点”工具 048

3.1.3.“变形”工具 049

3.1.4.“缩放”工具 049

3.1.5.“快捷”工具 049

3.1.6.“辅助线”工具 050

3.2“绘制”工具组 051

3.2.1.“直线”工具 051

3.2.2.“曲线”工具 052

3.2.3.“矩形”工具 052

3.2.4.“圆角矩形”工具 052

3.2.5.“椭圆”工具 052

3.2.6.“多边形”工具 053

3.3图形的属性设置 053

3.3.1.宽高属性 053

3.3.2.坐标属性 054

3.3.3.锁定边距 054

3.3.4.填充色 054

3.3.5.边框色 056

3.3.6.边框类型 056

3.3.7.透明度 056

3.3.8.旋转 057

3.3.9.端点和接合点 058

3.3.10.滤镜属性设置 058

3.4图形的排布组合 060

3.4.1.排列 060

3.4.2.对齐 061

3.4.3.变形 061

3.4.4.组合 061

3.4.5.合并 062

3.4.6.相交 062

3.4.7.剪裁 062

3.5课堂案例：绘制.精美CD 063

3.6课后习题：旭日.东升 067

第4章 媒体工具

4.1素材的压缩与上传 070

4.1.1.图片素材 070

4.1.2.Photoshop（PSD）.素材 074

4.1.3.音频素材 075

4.1.4.视频素材 078

4.2编辑文本 082

4.2.1.文字编辑 082

4.2.2.预置文本 082

4.2.3.云字体 083

4.2.4.裁剪组 084

4.2.5.文本段落工具 085

4.3添加媒体 085

4.3.1.添加幻灯片 085

4.3.2.添加网页 086

4.3.3.添加图表 087

4.3.4.添加虚拟现实 088

4.3.5.添加直播 091

4.4课堂案例：制作.手机屏保 092

4.5课后习题：今昔.对比 095

第5章 动画制作

5.1时间线与帧 098

5.1.1.“时间线”面板 098

5.1.2.编辑帧 099

5.2动画类型 101

5.2.1.序列帧动画 101

5.2.2.关键帧动画 102

5.2.3.元件动画 104

5.2.4.路径动画 105

5.2.5.进度动画 106

5.2.6.变形动画 108

5.2.7.遮罩动画 110

5.3属性动画 113

5.3.1.滤镜动画 113

5.3.2.编辑运动曲线 114

5.4预置动画 120

5.4.1.添加预置动画 120

5.4.2.设置预置动画 120

5.4.3.自定义预置动画 121

5.5课堂案例：风景加载动画 121

5.6课后习题：手机短信 126

第6章 行为交互

6.1行为概述 130

6.1.1.行为的定义 130

6.1.2.添加行为 130

6.1.3.行为的触发 130

6.2行为控制 131

6.2.1.帧的行为 131

6.2.2.页的行为 134

6.2.3.动画的控制 137

6.2.4.播放元件片段 139

6.2.5.声音的控制 141

6.2.6.视频的控制 144

6.2.7.改变元素属性 148

6.2.8.图片的控制 150

6.3课堂案例：头像.生成器 156

6.4课后习题：问答.测试 162

第7章 关联与表单

7.1关联绑定 166

7.1.1.舞台动画关联 166

7.1.2.元件动画关联 168

7.1.3.属性关联 169

7.1.4.自动关联 170

7.1.5.公式关联 172

7.2表单 172

7.2.1.自定义表单 172

7.2.2.定制文字 178

7.3逻辑判断 180

7.3.1.多种表达式的写法 180

7.3.2.条件判断 190

7.3.3.逻辑表达式判断 191

7.4课堂案例：音乐.播放器 192

7.5课后习题：滑动.解锁 201

第8章

综合案例8.1视频弹幕 204

8.1.1.案例效果 204

8.1.2.制作步骤 204

8.2星语心愿 212

8.2.1.案例效果 212

8.2.2.制作步骤 212

8.3拼图游戏 221

8.3.1.案例效果 221

8.3.2.制作步骤 221

8.4课后习题：邀请函 230