H5页面制作入门教程学习课件.ppt
合集下载
H5页面微场景制作入门教程(共34张)
第22页，共34页。
表单（也叫信息收集表、报名表、信息反馈表等）是场景创建者用 来收集查看场景的用户反馈信息的重要工具。可点击(diǎn jī)“表 单”创建也可直接在互动模板里直接快捷创建。
第23页，共34页。
【设置动画】
动画设置主要应用于：文字(wénzì)、图片、图形、一键拨号、输入框等组件 设置方法：点击组件→选择“动画”→进入动画设置页面
方式
第32页，共34页。
制作 小窍门 (zhìzuò)
资料准备全，图片要清楚
文字要简洁，重点更突出 制作很简单，就看熟练度
场景有创意，谁也挡不住 愿您出佳作，祝君展宏图
第33页，共34页。
分享 经验 (fēn xiǎnɡ) 共同成长
感谢您的聆听
第34页，共34页。
也可点击“上传”上传图片到“我的背景”库
第15页，共34页。
背景 编辑 (bèijǐng)
→背景创建后，点击编辑栏上的背景齿轮，即可对背景进行 编辑。 →背景编辑主要包括：剪切、更换、效果（放大、缩小）、删除。
第16页，共34页。
点击(diǎn jī)“音乐”即可创建【背景音乐】
1.【音乐库】为官方提供的音乐素材 2.【外部链接】插入网络音乐链接 3.【我的音乐】自主上传音乐
组件是构成场景的基本要素
1.文本 2.背景 3.音乐 4.视频 5.图片 6.形状 7.图集 8.互动 9.表单 10.特效
第13页，共34页。
1.点击“文本”后 →即可创建 2.单击文本框
→出现(chūxiàn)编辑菜 单
3.双击文本框
→进入基础编辑
第14页，共34页。
点击(diǎn jī)“背景”后，选择“背景库”中的背景图
表单（也叫信息收集表、报名表、信息反馈表等）是场景创建者用 来收集查看场景的用户反馈信息的重要工具。可点击(diǎn jī)“表 单”创建也可直接在互动模板里直接快捷创建。
第23页，共34页。
【设置动画】
动画设置主要应用于：文字(wénzì)、图片、图形、一键拨号、输入框等组件 设置方法：点击组件→选择“动画”→进入动画设置页面
方式
第32页，共34页。
制作 小窍门 (zhìzuò)
资料准备全，图片要清楚
文字要简洁，重点更突出 制作很简单，就看熟练度
场景有创意，谁也挡不住 愿您出佳作，祝君展宏图
第33页，共34页。
分享 经验 (fēn xiǎnɡ) 共同成长
感谢您的聆听
第34页，共34页。
也可点击“上传”上传图片到“我的背景”库
第15页，共34页。
背景 编辑 (bèijǐng)
→背景创建后，点击编辑栏上的背景齿轮，即可对背景进行 编辑。 →背景编辑主要包括：剪切、更换、效果（放大、缩小）、删除。
第16页，共34页。
点击(diǎn jī)“音乐”即可创建【背景音乐】
1.【音乐库】为官方提供的音乐素材 2.【外部链接】插入网络音乐链接 3.【我的音乐】自主上传音乐
组件是构成场景的基本要素
1.文本 2.背景 3.音乐 4.视频 5.图片 6.形状 7.图集 8.互动 9.表单 10.特效
第13页，共34页。
1.点击“文本”后 →即可创建 2.单击文本框
→出现(chūxiàn)编辑菜 单
3.双击文本框
→进入基础编辑
第14页，共34页。
点击(diǎn jī)“背景”后，选择“背景库”中的背景图
h5制作课件
交互功能应简洁明了，避免过 于复杂和繁琐，提高用户体验
。
响应式设计
根据不同设备的屏幕大小和分 辨率，优化页面布局和交互效 果，提高用户体验。
兼容性考虑
确保交互功能在不同浏览器和 设备上都能正常工作，提高兼 容性。
性能优化
优化代码和资源加载，提高页 面加载速度和交互响应速度，
提高用户体验。
05
H5性能优化策略
H5制作流程概述
确定主题和目标
明确H5页面的主题和目标 ，为制作提供方向。
素材准备
收集所需的图片、音频、 视频等素材。
测试与优化
在多种设备上测试H5页面 ，确保兼容性和流畅性，
并进行优化调整。
规划和设计
根据主题和目标，规划页 面结构、布局、交互等。
制作页面
使用合适的工具或在线平 台，按照设计制作H5页面
THANKS
感谢观看
遵循W3C标准，确保代码在不同浏览器和设备上的一致性。
响应式设计
根据不同设备的屏幕尺寸和分辨率，设计适应不同设备的页面布局和 样式。
使用跨平台的框架和库
如Bootstrap、jQuery等，这些框架和库已经经过广泛测试，具有良 好的跨平台兼容性。
自动化测试工具
使用自动化测试工具对H5页面进行测试，确保在不同浏览器和设备 上都能正常运行。
03
H5动画效果实现
动画类型与效果选择
进入动画
从无到有，如淡入
退出动画
从有到无，如淡
强调动画
突出某个元素，如放大、旋转
组合动画
多个动画组合使用，如淡入淡出、平移旋转
动画制作技巧分享
合理选择动画效果
根据内容需要选择合适的 动画效果，避免过度使用 或滥用
。
响应式设计
根据不同设备的屏幕大小和分 辨率，优化页面布局和交互效 果，提高用户体验。
兼容性考虑
确保交互功能在不同浏览器和 设备上都能正常工作，提高兼 容性。
性能优化
优化代码和资源加载，提高页 面加载速度和交互响应速度，
提高用户体验。
05
H5性能优化策略
H5制作流程概述
确定主题和目标
明确H5页面的主题和目标 ，为制作提供方向。
素材准备
收集所需的图片、音频、 视频等素材。
测试与优化
在多种设备上测试H5页面 ，确保兼容性和流畅性，
并进行优化调整。
规划和设计
根据主题和目标，规划页 面结构、布局、交互等。
制作页面
使用合适的工具或在线平 台，按照设计制作H5页面
THANKS
感谢观看
遵循W3C标准，确保代码在不同浏览器和设备上的一致性。
响应式设计
根据不同设备的屏幕尺寸和分辨率，设计适应不同设备的页面布局和 样式。
使用跨平台的框架和库
如Bootstrap、jQuery等，这些框架和库已经经过广泛测试，具有良 好的跨平台兼容性。
自动化测试工具
使用自动化测试工具对H5页面进行测试，确保在不同浏览器和设备 上都能正常运行。
03
H5动画效果实现
动画类型与效果选择
进入动画
从无到有，如淡入
退出动画
从有到无，如淡
强调动画
突出某个元素，如放大、旋转
组合动画
多个动画组合使用，如淡入淡出、平移旋转
动画制作技巧分享
合理选择动画效果
根据内容需要选择合适的 动画效果，避免过度使用 或滥用
《H5页面设计与制作》课件1
腾讯：2016腾讯WE大会·无 境，用于会议邀请
奥美：稀有动物悬赏 令，用于企业招聘
1.5 H5的类型
营销宣传类 知识新闻类 游戏互动类 网站应用类
1.5 H5的类型
1. 营销宣传类 营销宣传类H5是最常见的，它通常都是为产品、品牌以及活动做宣 传推广而设计的。
招商银行APP：来！坐！
腾讯：Next Idea x 故宫
宝马：全新BMW M2 即将上市
1.5 H5的类型
2. 知识新闻类 知识新闻类H5同样比较普遍，它通常都是根据社会重大事件进行宣 传新闻、普及知识的。
澎湃新闻：垃圾分类可视化 查询手册
网易新闻：自白
腾讯新闻×WWF×微公益： 腾讯新闻
1.5 H5的类型
3. 游戏互动类 游戏互动类H5一般比较简单，在微信中点开就可以直接玩，不用安 装卸载，通常多为娱乐或引流而制作。
花瓣
UI中国
H5初识
随着移动互联网的兴起，H5逐渐成为了互 联网传播领域的一个重要传播形式，因此学习和 掌握H5成为了广大互联网从业人员的重要技能 之一。本章对H5的定义、发展、特点、应用以 及类型进行系统讲解。通过对本章的学习，读者 可以对H5有一个宏观的认识，有助于高效便利 地进行后续的H5设计制作。
学习目标
网易新闻×哒哒×999皮炎平： 守护你的幸运足球
网易新闻×哒哒：睡姿大比拼 小米：我在宫里遇到一件 奇怪的事
1.5 H5的类型
4. 网站应用类 网站应用类H5在产品设计领域中常被称为“H5网站”，可以直接 在浏览器中观看和操作，不像App那样需要安装，它通常带有大量信息 及App中的部分功能。
站酷
腾讯：穿越未来来看你
贝壳租房×奇葩说： 100年后你将住在哪个奇葩星球
《H5页面设计与制作》课件7
长页滑动H5制作
长页滑动H5的本质是一镜到底展示信息内 容，其免去了用户翻页跳转的操作，可以更好地 提高用户浏览体验。本章从实战角度对长页滑动 H5的项目策划、交互设计、视觉设计以及制作 开发进行系统讲解与演练。通过对本章的学习， 读者可以对长页滑动H5有一个基本的认识，并 快速掌握设计制作常用长页滑动H5的方法。
效果图
7.1.2 交互设计
通过前期基本的项目策划，对这支H5的原型进行了梳理，并运 用Axure进行了绘制。
7.1.3 视觉设计
使用谷歌浏览器登录iH5官网，使用iH5制作食品餐饮行业产品 介绍H5，使用Photoshop软件制作页面的视觉设计。使用iH5的页 面>剪切>使用滚动条功能制作最终效果。
7.1.4 制作发布
效果图
7.2 课堂练习——文化传媒行业活动邀请H5制作
使用谷歌浏览器登录iH5官网，使用iH5制作文化传媒行业活动 邀请H5，使用Photoshop软件制作页面的视觉设计，使用iH5的页 面>剪切>使用滚动条功能、事件功能制作最终效果。
效果图
7.3 课后习题——服装饰品行业产品营销H5制作
使用谷歌浏览器登录iH5官网，使用iH5制作服装饰品行业产品 营销H5，使用Photoshop软件制作页面的视觉设计，使用iH5的页 面>剪切>使用滚动条功能制作最终效果。
学习目标
了解食品餐饮行业产品介绍H5的项目策划 掌握食品餐饮行业产品介绍H5的交互设计
7.1 课堂案例——食品餐饮行业产品介绍H5制作
项目策划 交互设计 视觉设计 制作发布
Байду номын сангаас.1.1 项目策划
Tree Cake是一家致力提供新鲜美味的线上蛋糕品牌，本次想借 助H5推广店内热销蛋糕，达到用户关注品牌进行购买的目的。在策 划上，针对内容分为了品牌介绍以及产品介绍。针对视觉，以蛋糕图 片为主，采用金色和白色，凸显蛋糕的品质与新鲜。针对制作，主要 运用长页的表现形式提高用户浏览体验。
长页滑动H5的本质是一镜到底展示信息内 容，其免去了用户翻页跳转的操作，可以更好地 提高用户浏览体验。本章从实战角度对长页滑动 H5的项目策划、交互设计、视觉设计以及制作 开发进行系统讲解与演练。通过对本章的学习， 读者可以对长页滑动H5有一个基本的认识，并 快速掌握设计制作常用长页滑动H5的方法。
效果图
7.1.2 交互设计
通过前期基本的项目策划，对这支H5的原型进行了梳理，并运 用Axure进行了绘制。
7.1.3 视觉设计
使用谷歌浏览器登录iH5官网，使用iH5制作食品餐饮行业产品 介绍H5，使用Photoshop软件制作页面的视觉设计。使用iH5的页 面>剪切>使用滚动条功能制作最终效果。
7.1.4 制作发布
效果图
7.2 课堂练习——文化传媒行业活动邀请H5制作
使用谷歌浏览器登录iH5官网，使用iH5制作文化传媒行业活动 邀请H5，使用Photoshop软件制作页面的视觉设计，使用iH5的页 面>剪切>使用滚动条功能、事件功能制作最终效果。
效果图
7.3 课后习题——服装饰品行业产品营销H5制作
使用谷歌浏览器登录iH5官网，使用iH5制作服装饰品行业产品 营销H5，使用Photoshop软件制作页面的视觉设计，使用iH5的页 面>剪切>使用滚动条功能制作最终效果。
学习目标
了解食品餐饮行业产品介绍H5的项目策划 掌握食品餐饮行业产品介绍H5的交互设计
7.1 课堂案例——食品餐饮行业产品介绍H5制作
项目策划 交互设计 视觉设计 制作发布
Байду номын сангаас.1.1 项目策划
Tree Cake是一家致力提供新鲜美味的线上蛋糕品牌，本次想借 助H5推广店内热销蛋糕，达到用户关注品牌进行购买的目的。在策 划上，针对内容分为了品牌介绍以及产品介绍。针对视觉，以蛋糕图 片为主，采用金色和白色，凸显蛋糕的品质与新鲜。针对制作，主要 运用长页的表现形式提高用户浏览体验。
《H5页面设计与制作》课件3
学习目标
了解媒体娱乐行业消消乐H5的项目策划 掌握媒体娱乐行业消消乐H5的交互设计
3.1 课堂案例——媒体娱乐行业消消乐H5制作
项目策划 交互设计 视觉设计 制作发布
3.1.1 项目策划
King Game Studios是一家游戏工作室，此次想借助H5在网络 上获取一定的关注度。在策划上，结合了工作室的游戏性质，运用 H5制作工具中的模版设计一款消除类益智H5小游戏。旨在通过游戏， 刺激用户了解甚至关注到King Game Studios。
互动游戏H5制作
互动游戏H5由于具备简单有趣及交互性强 的特点，因此给用户带来了一定的感官刺激，并 且间接地将企业的品牌进行了宣传。本章从实战 角度对互动游戏H5的项目策划、交互设计、视 觉设计以及制作开发进行系统讲解与演练。通过 对本章的学习，读者可以对互动游戏H5有一个 基本的认识，并快速掌握设计制作常用互动游戏 H5的方法。
效果图
3.2 课堂练习——食品餐饮行业翻牌子H5制作
注册登录易企秀官网，查找符合要求的互动H5模板，调整相关 的文字内容。
效果图
3.3 课后习题——健康医疗行业打地鼠H5制作
注册登录易企秀官网，查找符合要求的互动H5模板，调整相关前期基本的项目策划，对这支H5的原型进行了梳理，并运 用Axure进行了绘制。
媒体娱乐行业消消乐H5原型图
3.1.3 视觉设计
本次H5由于采用的是制作工具中的模版，因此可以直接到制作， 不需要进行专门的视觉设计。
3.1.4 制作发布
使用谷歌浏览器注册登录易企秀官网，使用互动H5免费模板制 作媒体娱乐行业消消乐，并修改活动名称、分享描述以及关注的二维 码。
H5培训PPT幻灯片课件
39
I want you to join H5!
40
最后，分享一个能够动态展示H5的网站
/
41
1
什么是HTML5？
2
其本身的含义对我们的营销没有任何卵用
通俗的讲：是网络页面编辑脚本的规范和标
准
（万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改）
3
但其呈现效果却是目前最炙手可热的营销 手段之一
4
5
从引爆朋友圈的H5小游戏《围住神经猫》 到颠覆传统广告的大众点评H5专题页《我们之间只有一个字》 各种H5游戏和专题页纷纷崭露头角。 “H5”，这个由HTML5简化而来的词汇，借由微信这个移动社交平台， 正在走进更多人的视野。
从二维码入口到性感的loading页，再到最后分享提示的设计，包括文案措辞和背景音效， 无不与整体的戏虐风保持一致，给到用户一个完整统一的互动体验。
30
尤其关注“分享提示”这个细节设计
31
2
紧跟热点，利用话题效应
32
天天P图《全民COS武媚娘》
操作简单易上手，一键上传照片就能立刻完成媚娘妆，与万千媚娘们进行PK，娱乐了大众 又推广了产品
在浏览过程中我只使用了一种向上滑动的手势，而页面呈现出来的效果却犹如一个流畅的动 态GIF
38
结语
随着手机硬件的升级、HTML5技术的发展以及微信 平台的开放，HTML5的跨平台、低成本、快迭代等 优势被进一步凸显，这对身处于移动互联网大潮的 企业主、品牌、设计师和开发者来说，都将是一个 最好的时代。
6
从功能与设计目标来看， H5专题页主要有以下4大类型
1
活动运营型
2
品牌宣传型
I want you to join H5!
40
最后，分享一个能够动态展示H5的网站
/
41
1
什么是HTML5？
2
其本身的含义对我们的营销没有任何卵用
通俗的讲：是网络页面编辑脚本的规范和标
准
（万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改）
3
但其呈现效果却是目前最炙手可热的营销 手段之一
4
5
从引爆朋友圈的H5小游戏《围住神经猫》 到颠覆传统广告的大众点评H5专题页《我们之间只有一个字》 各种H5游戏和专题页纷纷崭露头角。 “H5”，这个由HTML5简化而来的词汇，借由微信这个移动社交平台， 正在走进更多人的视野。
从二维码入口到性感的loading页，再到最后分享提示的设计，包括文案措辞和背景音效， 无不与整体的戏虐风保持一致，给到用户一个完整统一的互动体验。
30
尤其关注“分享提示”这个细节设计
31
2
紧跟热点，利用话题效应
32
天天P图《全民COS武媚娘》
操作简单易上手，一键上传照片就能立刻完成媚娘妆，与万千媚娘们进行PK，娱乐了大众 又推广了产品
在浏览过程中我只使用了一种向上滑动的手势，而页面呈现出来的效果却犹如一个流畅的动 态GIF
38
结语
随着手机硬件的升级、HTML5技术的发展以及微信 平台的开放，HTML5的跨平台、低成本、快迭代等 优势被进一步凸显，这对身处于移动互联网大潮的 企业主、品牌、设计师和开发者来说，都将是一个 最好的时代。
6
从功能与设计目标来看， H5专题页主要有以下4大类型
1
活动运营型
2
品牌宣传型
《H5页面设计与制作》课件2
H5的设计与制作
从0到1开始打造一款H5，这是策划、交互 设计、视觉设计以及制作开发相互配合的综合过 程。本章对H5设计与制作的项目流程、常用软 件、基本规范、注意事项以及创意方法进行系统 讲解。通过对本章的学习，读者可以对H5的整 体设计与制作有一个基本的认识，有助于高效便 利地进行后续的H5设计和制作。
2.5.3 H5的常用创意设计风格
H5的常用创意设计风格可以总结为极简冷淡、扁平图形、摄影 图像、拼贴叠加、怀旧复古、现代科技、仿真写实以及手绘插画8种。
2.5.4 H5的动效设计运用
H5的动效设计运用可以通过转场动效、内容动效、功能动效以 及辅助动效这4个方面进行介绍。
2.5.5 H5的音效设计方法
H5音效设计可以分为背景音效以及辅助音效。 1. 背景音效 H5常见的背景音效有3类，分别是功能音效、拟声音效以及环境 音效。 2. 辅助音效 H5常见的辅助音效有3类，分别是功能音效、拟声音效以及环境 音效。
2.5.6 H5的常用测试方法
在H5正式上线之前，都会进行几次测试以收获反馈及效果。常 用的测试方法微信有小范围测试以及微信公众号测试。
2.5 H5的创意实现
H5的常用策划方法 H5的常用交互方法 H5的创意设计风格 H5的动效设计运用 H5的音效设计方法 H5的常用测试方法 H5的常规数据分析
2.5 H5的创意实现
H5的创意实现可以从内容策划、交互交互、视觉设计、动效设 计、音效设计、测试方法以及数据分析这7个方面进行寻找。
百分比。对于需要进行跳转外部链接的H5，用户转化率是非常 重要的数据。
1. 微信小范围测试 微信小范围测试是指将H5通过单独发送好友，转发朋友圈以及 发送至微信群进行的测试。 2. 微信公众号测试 微信公众号测试是指如果我们有自己的公众号，可以将做的H5 以链接或二维码的形式编辑到微信图文中进行的测试。同时可以在图 文中将常见的引导问题以选择题的形式出现，提升用户反馈的参与度。
从0到1开始打造一款H5，这是策划、交互 设计、视觉设计以及制作开发相互配合的综合过 程。本章对H5设计与制作的项目流程、常用软 件、基本规范、注意事项以及创意方法进行系统 讲解。通过对本章的学习，读者可以对H5的整 体设计与制作有一个基本的认识，有助于高效便 利地进行后续的H5设计和制作。
2.5.3 H5的常用创意设计风格
H5的常用创意设计风格可以总结为极简冷淡、扁平图形、摄影 图像、拼贴叠加、怀旧复古、现代科技、仿真写实以及手绘插画8种。
2.5.4 H5的动效设计运用
H5的动效设计运用可以通过转场动效、内容动效、功能动效以 及辅助动效这4个方面进行介绍。
2.5.5 H5的音效设计方法
H5音效设计可以分为背景音效以及辅助音效。 1. 背景音效 H5常见的背景音效有3类，分别是功能音效、拟声音效以及环境 音效。 2. 辅助音效 H5常见的辅助音效有3类，分别是功能音效、拟声音效以及环境 音效。
2.5.6 H5的常用测试方法
在H5正式上线之前，都会进行几次测试以收获反馈及效果。常 用的测试方法微信有小范围测试以及微信公众号测试。
2.5 H5的创意实现
H5的常用策划方法 H5的常用交互方法 H5的创意设计风格 H5的动效设计运用 H5的音效设计方法 H5的常用测试方法 H5的常规数据分析
2.5 H5的创意实现
H5的创意实现可以从内容策划、交互交互、视觉设计、动效设 计、音效设计、测试方法以及数据分析这7个方面进行寻找。
百分比。对于需要进行跳转外部链接的H5，用户转化率是非常 重要的数据。
1. 微信小范围测试 微信小范围测试是指将H5通过单独发送好友，转发朋友圈以及 发送至微信群进行的测试。 2. 微信公众号测试 微信公众号测试是指如果我们有自己的公众号，可以将做的H5 以链接或二维码的形式编辑到微信图文中进行的测试。同时可以在图 文中将常见的引导问题以选择题的形式出现，提升用户反馈的参与度。
(完整版)H5培训PPT
4
合理运用技术，打造流畅的互动体验
淘宝《双12》活动专题H5页面
在浏览过程中我只使用了一种向上滑动的手势，而页面呈现出来的效果却犹如一个流畅的动 态GIF
结语
随着手机硬件的升级、HTML5技术的发展以及微信 平台的开放，HTML5的跨平台、低成本、快迭代等 优势被进一步凸显，这对身处于移动互联网大潮的 企业主、品牌、设计师和开发者来说，都将是一个 最好的时代。
从功能与设计目标来看， H5专题页主要有以下4大类型
1
活动营型
2
品牌宣传型
4
总结报告型
3
产品介绍型
1
活动运营型
大众点评为电影《狂怒》设计的推广页
以选择为主旋律，复古风格，层层推出大众点评网上购票，网上选座位的最终营销目的。
2
品牌宣传型
《首草先生的情书》
以一位男士的口吻娓娓道来在成长历程中对妻子的爱与愧疚，最后引出“首草——滋阴圣 品，爱妻首选”的宣传语。
3
产品介绍型
LEXUS NX 产品H5页面
体验和操控性极佳，页面设计科技感十足
4
总结报告型
京东的十大任性
扁平化风格，纸面质感复古卡片，最后有小刘的小彩蛋做压轴
形式为功能服务
在确定了专题页的功能目标之后，接下来就是关键的设计阶段了。 列举几种常见的H5专题页表现形式：
1
简单图文
嘀嘀打车
为设计加分的4个要点
1
细节与统一
大众点评《一步之遥》H5推广
从二维码入口到性感的loading页，再到最后分享提示的设计，包括文案措辞和背景音效， 无不与整体的戏虐风保持一致，给到用户一个完整统一的互动体验。
尤其关注“分享提示”这个细节设计
《H5页面设计与制作》课件5
效果图
学习目标
了解文化传媒行业知识分享H5的项目策划 掌握文化传媒行业知识分享H5的交互设计
5.1 课堂案例——IT互联网行业节日答题H5制作
项目策划 交互设计 视觉设计 制作发布
5.1.1 项目策划
知学在五一劳动节来临之际，希望推出一款节日祝福及宣传自身 品牌的H5。在策划上，沿用了5.2的经验，结合了H5制作工具的节日 文化答题模板，既起到了节日祝福同时又可以很好的宣传公司的品牌。
效果图
5.2 课堂练习——IT互联网行业脑力测试H5制作
使用谷歌浏览器登录凡科官网，使用凡科互动免费模板制作IT互 联网行业脑力测试H5，修改并替换首页中的素材、调整奖项设置以 及高级设置。
效果图
5.3 课后习题——文化传媒行业知识分享H5制作
使用谷歌浏览器登录凡科官网，使用凡科互动免费模板制作文化 传媒行业知识分享H5，修改并替换首页中的素材、调整奖项设置以 及高级设置。
测试问答H5制作
测试问答H5因为够能激起用户参与分享的 欲望，因此它一直都是众多H5中最受欢迎的一 类。本章从实战角度对测试问答H5的项目策划、 交互设计、视觉设计以及制作开发进行系统讲解 与演练。通过对本章的学习，读者可以对测试问 答H5有一个基本的认识，并快速掌握设计制作 常用测试问答H5的方法。
5.1.2 交互设计
通过前期基本的项目策划，对这支H5的原型进行了梳理，并运 用Axure进行了绘制。
5.1.3 视觉设计
使用谷歌浏览器登录凡科官网，使用凡科互动免费模板制作IT互 联网行业节日答题H5，修改并替换首页中的素材、替换中奖页面素 材、调整奖项设置以及高级设置。
5.1.4 制作发布
学习目标
了解文化传媒行业知识分享H5的项目策划 掌握文化传媒行业知识分享H5的交互设计
5.1 课堂案例——IT互联网行业节日答题H5制作
项目策划 交互设计 视觉设计 制作发布
5.1.1 项目策划
知学在五一劳动节来临之际，希望推出一款节日祝福及宣传自身 品牌的H5。在策划上，沿用了5.2的经验，结合了H5制作工具的节日 文化答题模板，既起到了节日祝福同时又可以很好的宣传公司的品牌。
效果图
5.2 课堂练习——IT互联网行业脑力测试H5制作
使用谷歌浏览器登录凡科官网，使用凡科互动免费模板制作IT互 联网行业脑力测试H5，修改并替换首页中的素材、调整奖项设置以 及高级设置。
效果图
5.3 课后习题——文化传媒行业知识分享H5制作
使用谷歌浏览器登录凡科官网，使用凡科互动免费模板制作文化 传媒行业知识分享H5，修改并替换首页中的素材、调整奖项设置以 及高级设置。
测试问答H5制作
测试问答H5因为够能激起用户参与分享的 欲望，因此它一直都是众多H5中最受欢迎的一 类。本章从实战角度对测试问答H5的项目策划、 交互设计、视觉设计以及制作开发进行系统讲解 与演练。通过对本章的学习，读者可以对测试问 答H5有一个基本的认识，并快速掌握设计制作 常用测试问答H5的方法。
5.1.2 交互设计
通过前期基本的项目策划，对这支H5的原型进行了梳理，并运 用Axure进行了绘制。
5.1.3 视觉设计
使用谷歌浏览器登录凡科官网，使用凡科互动免费模板制作IT互 联网行业节日答题H5，修改并替换首页中的素材、替换中奖页面素 材、调整奖项设置以及高级设置。
5.1.4 制作发布
《H5页面设计与制作》课件10
学习目标
了解文化传媒行业活动推广H5的项目策划 掌握文化传媒行业活动推广H5的交互设计
10.1 课堂案例——旅游出行行业活动推广H5制作
项目策划 交互设计 视觉设计 制作发布
10.1.1 项目策划
旅行社在春节推出了新加坡七日游旅行套餐，现在想策划一款 H5来推广该旅行套餐。在内容上，首先模拟锁屏界面，界面上提示 收到微信消息，点击消息解锁进入模拟的微信聊天界面，亲戚分享旅 行心情并让我浏览其朋友圈，接着场景转换到模拟的朋友圈界面，开 始浏览别人分享的各处景观。最后的页面，点击按钮可以跳转到新加 坡七日游的链接了解活动。针对视觉，模拟了锁屏、微信聊天和朋友 圈界面，加强了代入感。针对制作，微信聊天以及朋友圈观看会以视 频的形式展现，同时浏览朋友圈的视频中也嵌入了很多小视频，使整 个H5非常生动。
10.1.2 交互设计
通过前期基本的项目策划，对这支H5的原型进行了梳理，并运 用Axure进行了绘制。
10.1.3 视觉设计
使用谷歌浏览器登录iH5官网，使用iH5制作旅游出行行业产品 介绍H5，使用Photoshop软件制作页面的视觉设计，使用iH5的动 效、事件、横幅制作最终效果。
10.1.4 制作发布
效果图10.2 课堂练习——化传媒行业活动推广H5制作使用谷歌浏览器登录iH5官网，使用iH5制作文化传媒行业活动 推广H5，使用Photoshop软件制作页面的视觉效果，使用iH5的动 效、事件、横幅功能制作最终效果。
效果图
10.3 课后习题——电子数码行业品牌推广H5制作
使用谷歌浏览器登录iH5官网，使用iH5制作电子数码行业品牌 推广H5，使用Photoshop软件制作页面的视觉设计，使用iH5的动 效、事件、横幅功能制作最终效果。
《H5页面设计与制作》课件4
4.1.2 交互设计
通过前期基本的项目策划，对这支H5的原型进行了梳理，并运 用Axure进行了绘制。
4.1.3 视觉设计
使用谷歌浏览器注册登录凡科官网，使用凡科互动免费模板制作 电子商务行业九宫格，修改并替换首页中的素材、替换中奖页面素材、 调整奖项设置以及高级设置。
4.1.4 制作发布
效果图
活动抽奖H5制作
活动抽奖H5通常可以在短时间内快速传播， 吸引较多的流量，因此常用于引流推广活动。本 章从实战角度对活动抽奖H5的项目策划、交互 设计、视觉设计以及制作开发进行系统讲解与演 练。通过对本章的学习，读者可以对活动抽奖 H5有一个基本的认识，并快速掌握设计制作常 用活动抽奖H5的方法。
4.2 课堂练习——金融理财行业摇一摇H5制作
使用谷歌浏览器注册登录凡科官网，使用凡科互动免费模板制作 金融理财行业摇一摇H5，修改并替换首页中的素材、替换中/未中奖 页面素材、调整奖项设置以及高级设置。
效果图
4.3 课后习题——文化传媒行业刮刮乐H5制作
使用谷歌浏览器注册登录凡科官网，使用凡科互动免费模板制作 文化传媒行业刮刮乐H5，修改并替换首页中的素材、中/未中奖页面 素材、调整奖项设置以及高级设置。
效果图
学习目标
了解电子商务行业九宫格H5的项目策划 掌握电子商务行业九宫格H5的交互设计
4.1 课堂案例——电子商务行业九宫格H5制作
项目策划 交互设计 视觉设计 制作发布
4.1.1 项目策划
Shopping是一款专业的综合类购物平台，此次想在618电商大 促来临之际，推出一个活动抽奖H5刺激用户进行商品购宫格抽奖模板，分别设置一、二、三等奖，并限制用户1天3次的抽 奖机会，进一步刺激用户进行抽奖。
《H5页面设计与制作》课件9
学习目标
了解金融理财行业节日祝福H5的项目策划 掌握金融理财行业节日祝福H5的节日祝福H5制作
项目策划 交互设计 视觉设计 制作发布
9.1.1 项目策划
金融理财保险公司在新春佳节之际，想制作一款H5，即达到节 日祝福又起到宣传品牌的作用。在策划上，针对内容分为了首尾祝福 页、3款险种介绍页以及穿插在险种介绍之间的祝福页。针对视觉， 采用红色剪纸的形式营造春节气氛。针对制作，运用走马灯的表现形 式进一步体现春节的喜庆。
9.1.4 制作发布
效果图
9.2 课堂练习——电子商务行业活动促销H5制作
使用谷歌浏览器登录凡科官网，使用凡科互动为传单制作电子商 务行业活动促销H5，使用Photoshop软件制作首屏、先领劵、大礼 包、送亲友、送长辈、关注我们等页面的视觉设计，使用凡科微传单 的趣味中的球体仪功能制作最终效果。
3D/全景H5制作
3D/全景H5可以将产品的每个角度都淋漓 尽致地展现，令用户有身临其境的感觉。本章从 实战角度对3D/全景H5的项目策划、交互设计、 视觉设计以及制作开发进行系统讲解与演练。通 过对本章的学习，读者可以对3D/全景H5有一 个基本的认识，并快速掌握设计制作常用3D/全 景H5的方法。
9.1.2 交互设计
通过前期基本的项目策划，对这支H5的原型进行了梳理，并运 用Axure进行了绘制。
9.1.3 视觉设计
使用谷歌浏览器登录凡科官网，使用凡科互动为传单制作金融理 财行业节日祝福H5，使用Photoshop软件制作首页、尊享一生、步 步高升、关爱一生、岁岁平安、悦享一生、恭喜发财等页面的视觉设 计，使用凡科微传单的趣味中的走马灯功能制作最终效果。
效果图
9.3 课后习题——家居装修行业产品推广H5制作
《学会H5制作课件教程》
1 HTML和CSS
了解HTML和CSS的基本语法 和结构，为H5课件制作打体查询和流动布 局，以适应不同设备的屏幕 尺寸。
3 动画和过渡效果
掌握CSS动画和过渡属性，为课件添加生动的动态效果。
页面设计原则
简洁明了
避免信息过载，让学生专注于 主要内容。
一致性
保持页面元素的一致性和统一 性，提升整体课件的质量。
视觉吸引力
运用美学原理，使用合适的颜 色、字体和图片来增强课件的 视觉吸引力。
H5课件的制作步骤
1
收集素材
2
搜索并收集与主题相关的图片、图标和
视频等素材。
3
添加交互
4
为课件添加按钮、链接和动画等交互元 素，提升用户体验。
确定主题
选定一个主题或目标，为课件的制作提 供方向。
构建页面
使用HTML和CSS构建课件的基本页面结构。
课件动画的添加
1 适度而独特
运用合适的动画效果，使课 件更加生动，但避免过度使 用。
2 时间控制
确保动画与课件内容的呈现 节奏相匹配，不要让学生感 到厌倦。
3 流畅过渡
使用过渡效果，使页面之间的切换更加平滑和连贯。
如何优化H5课件的交互体验
用户反馈
提供有意义的反馈，帮助学 生了解他们的行为和进展。
学会H5制作课件教程
一个引人入胜，易于理解的教程，使用H5技术制作出令人惊叹的课件。通过 本教程，你将学到以下内容：
适宜人群
学生和教师
想要制作与众不同的课件， 提升教学互动的能力。
企业培训师
希望用现代化的方式培训员 工，并提高培训效果。
自学爱好者
对新兴技术充满好奇，希望 掌握H5课件的制作技巧。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
→背景创建后，点击编辑栏上的背景齿轮，即可对背景 进行编辑。 →背景编辑主要包括：剪切、更换、效果（放大、缩 小）、删除。
精品
点击“音乐”即可创建【背景音乐】
1.【音乐库】为官方提供的音乐素材 2.【外部链接】插入网络音乐链接 3.【我的音乐】自主上传音乐
精品
点击“视频”后，给场景添加网络视频 点击“什么是视频通用代码”，出现详细操作
精品
很重要 特别重要
“保存”只是对操作进行保存，如果不点击 “发布”此场景未发布的编辑内容，在场景 分享出去时，别人看不到最新编辑的内容。 点击“退出”则推出编辑页面。
精品
点击发布后，可获得场景二维码、场景连接和 更多的一键分享方式。
精品
下载更大的场景二维码 （在“我的推广”里找到二维码，如下图）
精品
点击“图片”后，选择“图片库”中的图片素材 或点击“上传”上传图片到“我的图片”库
精品
点击“形状”后，选择“形状组件” 库中选择形状组件
“形状”是便于用户制作扁 平化页面的素材， 形状素材和文字一样可以做 “颜色、大小”等设置。
精品
图集：是几张图片的集合 主要设置：图片比例、切换方式
精品
“互动”是方便制作者与观看者互动的组件 互动组件目前主要是“一键拨号”，正在不断增加
1.文本 2.背景 3.音乐 4.视频 5.图片 6.形状 7.图集 8.互动 9.表单 10.特效
精品
1.点击“文本”后 →即可创建 2.单击文本框 →出现编辑菜单 3.双击文本框 →进入基础编辑
精品
点击“背景”后，选择“背景库”中的背景图 也可点击“上传”上传图片到“我的背景”库
精品
背景编辑
精品
“我的场景”管理
• 点击“我的场景”可看到自己创 建的所有场景列表。
• 点击单个场景右下角的齿轮，即 可对此场景进行“设置、编辑、 复制、转送和删除”操作。
• 点击“开放”/“关闭”，对场 景进行开放和关闭。
精品
在微信里分享场景
微信扫一扫场 景二维码→打 开场景→点击 右上角菜单→ 选择分享方式
使用微信或者QQ进行登录。
登录易企秀账号
点击官网右上角“登录”
1.邮箱登录： 输入邮箱和密码，点击
“登录”即可。
2.第三方登录： 无需注册，直接点击图标，
使用微信或者QQ进行登录。
创建场景
点击右上角 创建场景
精品
【套模板】选择一个模板，把模板中需要修改的地方修改即可快捷制作。
【自主创建】点击“+”进入自主创建，一页一页创建场景。
H5页面几乎适用于所有企业和个人
常用免费H5页面制作工具
易企秀 腾讯风铃 京东 兔展 搜狐快海报 初页 最酷网 秀米秀制作 MAKA 点点客海报 ……
怎么制作H5页面?
制作小提示
• 制作H5场景推荐使用谷歌浏览器 • 也可在手机上下载制作工具客户端，在手机上进行制
作
精品
H5场景制作与运用流程
1
资料
准备
2
场景
制作
3
发布
宣传
4
信息
收集
精品
制作前，准备好4个资料
创意：
展示什么，用什么方式
音乐：
烘托氛围，MP3格式
图片：
提前备好，视觉效果好
文字：
准备充分，具有感染力
精品
免费注册易企秀账号
进入官网后点击右上角“注册”
1.邮箱注册： 输入邮箱和密码，点击
“注册”即可。
2.第三方登录： 无需注册，直接点击图标，
右侧的“页面管理”
5大管理操作
1. 复制：点中条框，点击“复制” 2. 我的模板 ：点中条框，点击“我的
复制”，出现在左侧“页面模板”中， 可删除
3. 删除：点中条框，点击“删除” 4. 移动：点中条框，可上下拖动 5. 添加：点击“+”，添加一页
精品
10个基本组件+设置+发布
组件是构成场景的基本要素
精品
制作小窍门
资料准备全，图片要清楚 文字要简洁，重点更突出 制作很简单，就看熟练度 场景有创意，谁也挡不住 愿您出佳作，祝君展宏图
• 点击预览图标，即可对此页面的 动画设置进行整体预览。
精品
精品
设置是对场景的基 本信息进行设置， 主要包括：场景封 面、场景名称、场 景描述、翻页方式。
点击“场景共享” 和“友情展示”下 拉键，可参加易企 秀官方活动和尾页 设置。
特效组件是给某一个页面加上一个特殊的效果。 点击“特效”即可为当前页面选择合适的特效
精品
表单（也叫信息收集表、报名表、信息反馈表等）是 场景创建者用来收集查看场景的用户反馈信息的重要 工具。可点击“表单”创建也可直接在互动模板里直 接快捷创建。
精品
【设置动画】
动画设置主要应用于：文字、图片、图形、一键拨号、输入框等组件 设置方法：点击组件→选择“动画”→进入动画设置页面
精品
制作小提示
H5页面微场景制作 入门教程
入门了，一切都变得很简单！
什么是H5？ 为什么要做H5页面? 什么场合可以用到H5页面? 常用的免费H5制作工具？ 怎么制作H5页面?
什么是H5？
H5是指第5代HTML（超文本标记语言），也指用H5语言制 作的一切数字产品。 通俗地说，H5是一种创建网页的方式。它会让手机网页看 上去更炫酷，功能也更丰富多彩。
为什么要做H5页Biblioteka ?智能手机、平板电脑等移动终端设备越来越普及，用户在移动端花的时 间也越来越长。
H5页面中以文字、图片、动画、声音等相结合的富媒体出现，给用户带 来了全新体验，技术本身带来的新奇感让人们心生向往。
用户时间碎片化，接收信息爆炸性增长，企业营销需要迅速抓住客户眼 球。
什么场合可以用到H5页面?
精品
场景名称
填写名称 后期可改
填写完毕 点击创建
精品
点击选择 为了自己 管理方便
制作页面
精品
页面模板
在易企秀制作页面的左侧栏， 易企秀官方为大家提供了分 门别类的“页面模板”，在 制作场景的过程中，可以参 考或者直接套用页面模板进 行场景创建。 自己制作的页面，也可以保 存为“我的”模板，以供下 次使用。 企业账号将自己的场景设置 为“企业页面模板”，子账 号可以直接使用。 精品
微信互动营销：大转盘、刮刮卡、优惠券、投票调查、小游戏…… 商业展示：企业宣传、产品展示、品牌传播、优惠促销、企业招聘…… 会议活动：会议、展览会、发布会、活动…… 数字出版与教育：电子杂志、多媒体课件、培训课程…… 电子贺卡：商业贺卡、节日贺卡、生日贺卡、祝福卡…… 个人应用：个人秀、婚礼邀请、聚会Party、求职简历……
精品
点击“音乐”即可创建【背景音乐】
1.【音乐库】为官方提供的音乐素材 2.【外部链接】插入网络音乐链接 3.【我的音乐】自主上传音乐
精品
点击“视频”后，给场景添加网络视频 点击“什么是视频通用代码”，出现详细操作
精品
很重要 特别重要
“保存”只是对操作进行保存，如果不点击 “发布”此场景未发布的编辑内容，在场景 分享出去时，别人看不到最新编辑的内容。 点击“退出”则推出编辑页面。
精品
点击发布后，可获得场景二维码、场景连接和 更多的一键分享方式。
精品
下载更大的场景二维码 （在“我的推广”里找到二维码，如下图）
精品
点击“图片”后，选择“图片库”中的图片素材 或点击“上传”上传图片到“我的图片”库
精品
点击“形状”后，选择“形状组件” 库中选择形状组件
“形状”是便于用户制作扁 平化页面的素材， 形状素材和文字一样可以做 “颜色、大小”等设置。
精品
图集：是几张图片的集合 主要设置：图片比例、切换方式
精品
“互动”是方便制作者与观看者互动的组件 互动组件目前主要是“一键拨号”，正在不断增加
1.文本 2.背景 3.音乐 4.视频 5.图片 6.形状 7.图集 8.互动 9.表单 10.特效
精品
1.点击“文本”后 →即可创建 2.单击文本框 →出现编辑菜单 3.双击文本框 →进入基础编辑
精品
点击“背景”后，选择“背景库”中的背景图 也可点击“上传”上传图片到“我的背景”库
精品
背景编辑
精品
“我的场景”管理
• 点击“我的场景”可看到自己创 建的所有场景列表。
• 点击单个场景右下角的齿轮，即 可对此场景进行“设置、编辑、 复制、转送和删除”操作。
• 点击“开放”/“关闭”，对场 景进行开放和关闭。
精品
在微信里分享场景
微信扫一扫场 景二维码→打 开场景→点击 右上角菜单→ 选择分享方式
使用微信或者QQ进行登录。
登录易企秀账号
点击官网右上角“登录”
1.邮箱登录： 输入邮箱和密码，点击
“登录”即可。
2.第三方登录： 无需注册，直接点击图标，
使用微信或者QQ进行登录。
创建场景
点击右上角 创建场景
精品
【套模板】选择一个模板，把模板中需要修改的地方修改即可快捷制作。
【自主创建】点击“+”进入自主创建，一页一页创建场景。
H5页面几乎适用于所有企业和个人
常用免费H5页面制作工具
易企秀 腾讯风铃 京东 兔展 搜狐快海报 初页 最酷网 秀米秀制作 MAKA 点点客海报 ……
怎么制作H5页面?
制作小提示
• 制作H5场景推荐使用谷歌浏览器 • 也可在手机上下载制作工具客户端，在手机上进行制
作
精品
H5场景制作与运用流程
1
资料
准备
2
场景
制作
3
发布
宣传
4
信息
收集
精品
制作前，准备好4个资料
创意：
展示什么，用什么方式
音乐：
烘托氛围，MP3格式
图片：
提前备好，视觉效果好
文字：
准备充分，具有感染力
精品
免费注册易企秀账号
进入官网后点击右上角“注册”
1.邮箱注册： 输入邮箱和密码，点击
“注册”即可。
2.第三方登录： 无需注册，直接点击图标，
右侧的“页面管理”
5大管理操作
1. 复制：点中条框，点击“复制” 2. 我的模板 ：点中条框，点击“我的
复制”，出现在左侧“页面模板”中， 可删除
3. 删除：点中条框，点击“删除” 4. 移动：点中条框，可上下拖动 5. 添加：点击“+”，添加一页
精品
10个基本组件+设置+发布
组件是构成场景的基本要素
精品
制作小窍门
资料准备全，图片要清楚 文字要简洁，重点更突出 制作很简单，就看熟练度 场景有创意，谁也挡不住 愿您出佳作，祝君展宏图
• 点击预览图标，即可对此页面的 动画设置进行整体预览。
精品
精品
设置是对场景的基 本信息进行设置， 主要包括：场景封 面、场景名称、场 景描述、翻页方式。
点击“场景共享” 和“友情展示”下 拉键，可参加易企 秀官方活动和尾页 设置。
特效组件是给某一个页面加上一个特殊的效果。 点击“特效”即可为当前页面选择合适的特效
精品
表单（也叫信息收集表、报名表、信息反馈表等）是 场景创建者用来收集查看场景的用户反馈信息的重要 工具。可点击“表单”创建也可直接在互动模板里直 接快捷创建。
精品
【设置动画】
动画设置主要应用于：文字、图片、图形、一键拨号、输入框等组件 设置方法：点击组件→选择“动画”→进入动画设置页面
精品
制作小提示
H5页面微场景制作 入门教程
入门了，一切都变得很简单！
什么是H5？ 为什么要做H5页面? 什么场合可以用到H5页面? 常用的免费H5制作工具？ 怎么制作H5页面?
什么是H5？
H5是指第5代HTML（超文本标记语言），也指用H5语言制 作的一切数字产品。 通俗地说，H5是一种创建网页的方式。它会让手机网页看 上去更炫酷，功能也更丰富多彩。
为什么要做H5页Biblioteka ?智能手机、平板电脑等移动终端设备越来越普及，用户在移动端花的时 间也越来越长。
H5页面中以文字、图片、动画、声音等相结合的富媒体出现，给用户带 来了全新体验，技术本身带来的新奇感让人们心生向往。
用户时间碎片化，接收信息爆炸性增长，企业营销需要迅速抓住客户眼 球。
什么场合可以用到H5页面?
精品
场景名称
填写名称 后期可改
填写完毕 点击创建
精品
点击选择 为了自己 管理方便
制作页面
精品
页面模板
在易企秀制作页面的左侧栏， 易企秀官方为大家提供了分 门别类的“页面模板”，在 制作场景的过程中，可以参 考或者直接套用页面模板进 行场景创建。 自己制作的页面，也可以保 存为“我的”模板，以供下 次使用。 企业账号将自己的场景设置 为“企业页面模板”，子账 号可以直接使用。 精品
微信互动营销：大转盘、刮刮卡、优惠券、投票调查、小游戏…… 商业展示：企业宣传、产品展示、品牌传播、优惠促销、企业招聘…… 会议活动：会议、展览会、发布会、活动…… 数字出版与教育：电子杂志、多媒体课件、培训课程…… 电子贺卡：商业贺卡、节日贺卡、生日贺卡、祝福卡…… 个人应用：个人秀、婚礼邀请、聚会Party、求职简历……