《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年后你将住在哪个奇葩星球
1.3 H5的特点
H5具有跨平台、多媒体、强互动以及易传播的特点。
H5的特点
1.4 H5的应用
H5的应用形式多样，常见的应用领域有品牌宣传、产品展示、活动 推广、知识分享、新闻热点、会议邀请、企业招聘、培训招生等。
网易云音乐：寻找「梦想」 的旅程，用于品牌宣传
掌握H5的定义 了解H5的发展 了解H5的特点 熟悉H5的应用 熟悉H5的类型
1.1 H5的定义
H5指的是移动端上基于HTML5技术的交互动态网页，是用于移 动互联网的一种新型营销工具，通过移动平台（如微信）传播。
网易云音乐：你的荣格心理原型
PUPUPULA：2018汪H5的发展
开始阶段 引爆阶段 绽放阶段 成熟阶段
1.2 H5的发展
1. 开始阶段 H5的开始可以追溯到2014 年，其最初的呈现状态和PPT类 似，将经过简单设计的静态页面 设置成滑动翻页效果，常用于婚 礼邀请、企业招聘等。
免费婚礼邀请函模版
1.2 H5的发展
2. 引爆阶段 2014年下半年，一款名为《围住神经猫》的H5小游戏，引爆了微 信朋友圈，最后页面浏览量达数亿级。随后相继产生的《看你有多色》 等小游戏，让H5真正的开启了引爆。
围住神经猫
博雅：看你有多色
1.2 H5的发展
3. 绽放阶段 2015年～2016年是H5的全面绽放阶段。在这一阶段中的H5交互设 计酷炫、表现形式新颖，以最大限度加强用户参与感，提高用户分享H5 的意愿。
豆瓣：我们的精神世界
淘宝×京东：造物节邀请函
讯极光计划：记忆重构
1.2 H5的发展
4. 成熟阶段 2017年后，H5慢慢褪去了一些复杂酷炫的交互效果，开始走向成 熟。这一阶段的H5轻互动，重内容，传播量最大的主要有两种形式，一 种是纯视频类H5，另一种是测试类H5。
合集下载
微信H5页面制作简易教程 共35页PPT资料共37页PPT
微信H5页面制作简易教程 共35页 PPT资料
46、法律有权打破平静。——马·格林 47、在一千磅法律里，没有一盎司仁 爱。— —英国
48、法律一多，公正就少。——托·富 勒 49、犯罪总是以惩罚相补偿；只有处 罚才能 使犯罪 得到偿 还。— —达雷 尔
50、弱者比强者更能得到法律的保护 。—— 威·厄尔
61、奢侈是舒适的，否则就不是奢侈 。——CocoCha nel 62、少而好学，如日出之阳；壮而好学 ，如日 中之光 ；志而 好学， 如炳烛 之光。 ——刘 向 63、三军可夺帅也，匹夫不可夺志也。 ——孔 丘 64、人生就是学校。在那里，与其说好 的教师 是幸福 ，不如 说好的 教师是 不幸。 ——海 贝尔 65、接受挑战，就可以享受胜利的喜悦 。——
46、法律有权打破平静。——马·格林 47、在一千磅法律里，没有一盎司仁 爱。— —英国
48、法律一多，公正就少。——托·富 勒 49、犯罪总是以惩罚相补偿；只有处 罚才能 使犯罪 得到偿 还。— —达雷 尔
50、弱者比强者更能得到法律的保护 。—— 威·厄尔
61、奢侈是舒适的，否则就不是奢侈 。——CocoCha nel 62、少而好学，如日出之阳；壮而好学 ，如日 中之光 ；志而 好学， 如炳烛 之光。 ——刘 向 63、三军可夺帅也，匹夫不可夺志也。 ——孔 丘 64、人生就是学校。在那里，与其说好 的教师 是幸福 ，不如 说好的 教师是 不幸。 ——海 贝尔 65、接受挑战，就可以享受胜利的喜悦 。——
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页面设计与制作》课件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页面制作简易教程 共35页PPT资料37页PPT
33、如果惧怕前面跌宕的山岩，生命 就永远 只能是 死水一 潭。 34、当你眼泪忍不住要流出来的时候 ，睁大 眼睛， 千万别 眨眼!你会看到 世界由 清晰变 模糊的 全过程 ，心会 在你泪 水落下 的那一 刻变得 清澈明 晰。盐 。注定 要融化 的，也 许是用 眼泪的 方式。
35、不要以为自己成功一次就可以了 ，也不 要以为 过去的 光荣可 以被永 远肯定 。
微信H5页面制作简易教程 共35页PPT资料
31、别人笑我太疯癫，我笑他人看不 穿。(名 言网) 32、我不想听失意者的哭泣，抱怨者 的牢骚 ，这是 羊群中 的瘟疫 ，我不 能被它 传染。 我要尽 量避免 绝望， 辛勤耕 耘，忍 受苦楚 。我一 试再试 ，争取 每天的 成功， 避免以 失败收 常在别 人停滞 不前时 ，我继 续拼搏 。
16、业余生活要有意义，不要越轨。——华盛顿 17、一个人即使已登上顶峰，也仍要自强不息。——罗素·贝克 18、最大的挑战和突破在于用人，而用人最大的突破在于信任人。——马云 19、自己活着，就是为了使别人过得更美好。——雷锋 20、要掌握书，莫被书掌握；要为生而读，莫为读而生。——布尔沃
ENDห้องสมุดไป่ตู้
35、不要以为自己成功一次就可以了 ，也不 要以为 过去的 光荣可 以被永 远肯定 。
微信H5页面制作简易教程 共35页PPT资料
31、别人笑我太疯癫，我笑他人看不 穿。(名 言网) 32、我不想听失意者的哭泣，抱怨者 的牢骚 ，这是 羊群中 的瘟疫 ，我不 能被它 传染。 我要尽 量避免 绝望， 辛勤耕 耘，忍 受苦楚 。我一 试再试 ，争取 每天的 成功， 避免以 失败收 常在别 人停滞 不前时 ，我继 续拼搏 。
16、业余生活要有意义，不要越轨。——华盛顿 17、一个人即使已登上顶峰，也仍要自强不息。——罗素·贝克 18、最大的挑战和突破在于用人，而用人最大的突破在于信任人。——马云 19、自己活着，就是为了使别人过得更美好。——雷锋 20、要掌握书，莫被书掌握；要为生而读，莫为读而生。——布尔沃
ENDห้องสมุดไป่ตู้
《H5页面制作》课件
参考资料和学习资源
阅读相关书籍和教程，参考优秀的H5页面案例，不断学习和实践提升自己的技能。
Q& A
1 常见问题解答
解答常见的关于H5页面制作的问题， 帮助学生理解和掌握相关知识。
2 学生互动和讨论
鼓励学生提问和互相交流，加深对H5 页面制作的理解和应用。
页面调试和优化
检查页面的代码和功能，解 决bug，并对页面进行性能优 化，提升用户体验。
总结
H5页面制作的未来趋势
H5页面将继续发展，并提供更多的功能和交互效果，为用户呈现更丰富的内容和体验。
需要进一步提升的技能和能力
学习更深入的HTML、CSS和JavaScript知识，了解最新的Web开发技术和趋势。
H5页面制作
H5页面制作是一门富有挑战性的技术，旨在利用HTML、CSS和JavaScript创建 出富有交互性和响应式设计的网页。 简介H5页面的定义和作用
H5页面是指使用HTML5标准开发的网页，具有更高的兼容性和功能扩展性，可以为用户提供 更丰富的体验。
H5页面制作的优势和挑战
优势：多平台兼容、丰富的交互效果、灵活的布局；挑战：技术复杂度、适配和性能优化。
前期准备
1 确定页面设计和功能需求
明确页面的设计风格和所需的功能，为后续开发提供指导。
2 熟悉相关软件和技术
了解使用的开发工具、HTML、CSS和JavaScript等相关技术，并掌握其基本用法。
制作流程
1
结构设计
了解常用的HTML标签和属性，设计页面的布局和响应式设计，确保网页能在不 同设备上正常显示。
2
样式设计
熟悉CSS选择器和属性，通过设置样式让页面更美观，并添加动画效果提升用户 体验。
阅读相关书籍和教程，参考优秀的H5页面案例，不断学习和实践提升自己的技能。
Q& A
1 常见问题解答
解答常见的关于H5页面制作的问题， 帮助学生理解和掌握相关知识。
2 学生互动和讨论
鼓励学生提问和互相交流，加深对H5 页面制作的理解和应用。
页面调试和优化
检查页面的代码和功能，解 决bug，并对页面进行性能优 化，提升用户体验。
总结
H5页面制作的未来趋势
H5页面将继续发展，并提供更多的功能和交互效果，为用户呈现更丰富的内容和体验。
需要进一步提升的技能和能力
学习更深入的HTML、CSS和JavaScript知识，了解最新的Web开发技术和趋势。
H5页面制作
H5页面制作是一门富有挑战性的技术，旨在利用HTML、CSS和JavaScript创建 出富有交互性和响应式设计的网页。 简介H5页面的定义和作用
H5页面是指使用HTML5标准开发的网页，具有更高的兼容性和功能扩展性，可以为用户提供 更丰富的体验。
H5页面制作的优势和挑战
优势：多平台兼容、丰富的交互效果、灵活的布局；挑战：技术复杂度、适配和性能优化。
前期准备
1 确定页面设计和功能需求
明确页面的设计风格和所需的功能，为后续开发提供指导。
2 熟悉相关软件和技术
了解使用的开发工具、HTML、CSS和JavaScript等相关技术，并掌握其基本用法。
制作流程
1
结构设计
了解常用的HTML标签和属性，设计页面的布局和响应式设计，确保网页能在不 同设备上正常显示。
2
样式设计
熟悉CSS选择器和属性，通过设置样式让页面更美观，并添加动画效果提升用户 体验。
《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 以链接或二维码的形式编辑到微信图文中进行的测试。同时可以在图 文中将常见的引导问题以选择题的形式出现，提升用户反馈的参与度。
《网页设计与制作(1)》课件
了解各种颜色间的搭配和配色原则，以及如何使用颜
字体和排版原则
了解如何选择合适的字体和排版样式，以及如何使用
图片和多媒体的使用
1 多媒体的优势
2 图片的优化
3 响应式设计概念
了解如何使用图片、音频和 视频来增强网页的吸引力和 互动性。
了解图片优化的重要性，以 及如何选择合适的图片格式 和尺寸，以达到更快的加载 速度。
了解如何使用响应式设计来 适应不同的屏幕大小和设备 类型，以提升用户体验。
用户体验设计概念
1
了解用户
通过市场调研和用户反馈，了解用户的需求和特点。
2
ห้องสมุดไป่ตู้
设计用户旅程
将用户体验分解为不同的阶段，设计出让用户流畅、愉快的体验过程。
3
测试和优化
通过用户测试和分析数据，对网页进行不断优化，提升用户体验。
网页制作工具和技术
《网页设计与制作(1)》 PPT课件
欢迎来到《网页设计与制作(1)》PPT课件！在这个课程中，我们将探讨网页设 计和制作的基本概念和技术，帮助您成为一名优秀的网页设计师和开发者。
课程介绍
目标和目的
通过本课程，您将学习如何设 计和制作精美、现代化的网页， 并掌握实用的前端技术。
受众群体
任何对网页设计和制作感兴趣 的人，尤其是想要成为网页设 计师和开发者的人群。
安全性和可访问性
了解如何提升网页的安全性和可访问性，以便更好 地保护用户隐私和权益。
总结
感谢您学习本课程！通过本课程，您应该已经掌握了网页设计和制作的基本 概念和技术，为成为一名优秀的网页设计师和开发者打下了坚实的基础。
掌握网页制作的整个流程，包括需求分析、设计、开
常用网页制作技巧和技
字体和排版原则
了解如何选择合适的字体和排版样式，以及如何使用
图片和多媒体的使用
1 多媒体的优势
2 图片的优化
3 响应式设计概念
了解如何使用图片、音频和 视频来增强网页的吸引力和 互动性。
了解图片优化的重要性，以 及如何选择合适的图片格式 和尺寸，以达到更快的加载 速度。
了解如何使用响应式设计来 适应不同的屏幕大小和设备 类型，以提升用户体验。
用户体验设计概念
1
了解用户
通过市场调研和用户反馈，了解用户的需求和特点。
2
ห้องสมุดไป่ตู้
设计用户旅程
将用户体验分解为不同的阶段，设计出让用户流畅、愉快的体验过程。
3
测试和优化
通过用户测试和分析数据，对网页进行不断优化，提升用户体验。
网页制作工具和技术
《网页设计与制作(1)》 PPT课件
欢迎来到《网页设计与制作(1)》PPT课件！在这个课程中，我们将探讨网页设 计和制作的基本概念和技术，帮助您成为一名优秀的网页设计师和开发者。
课程介绍
目标和目的
通过本课程，您将学习如何设 计和制作精美、现代化的网页， 并掌握实用的前端技术。
受众群体
任何对网页设计和制作感兴趣 的人，尤其是想要成为网页设 计师和开发者的人群。
安全性和可访问性
了解如何提升网页的安全性和可访问性，以便更好 地保护用户隐私和权益。
总结
感谢您学习本课程！通过本课程，您应该已经掌握了网页设计和制作的基本 概念和技术，为成为一名优秀的网页设计师和开发者打下了坚实的基础。
掌握网页制作的整个流程，包括需求分析、设计、开
常用网页制作技巧和技
H5 页面设计与制作
2.3 设计与制作H5的基本规范
2. H5的页面适配 H5的页面适配包括H5工具的自动适配、页面安全区的设置以及 H5其他设备的处理3个方面。
2.3 设计与制作H5的基本规范
（1）H5工具的自动适配 H5的在线制作工具本身就具备自动适配的功能，因此最主流的 尺寸虽然是根据iPhone5的手机屏幕尺寸而来，也可以保证对于大多 数手机的自动满屏适配。
围住神经猫
博雅：看你有多色
1.2 H5的发展
3. 绽放阶段 2015年～2016年是H5的全面绽放阶段。在这一阶段中的H5交互设 计酷炫、表现形式新颖，以最大限度加强用户参与感，提高用户分享H5 的意愿。
豆瓣：我们的精神世界
淘宝×京东：造物节邀请函
讯极光计划：记忆重构
1.2 H5的发展
4. 成熟阶段 2017年后，H5慢慢褪去了一些复杂酷炫的交互效果，开始走向成 熟。这一阶段的H5轻互动，重内容，传播量最大的主要有两种形式，一 种是纯视频类H5，另一种是测试类H5。
掌握H5的定义 了解H5的发展 了解H5的特点 熟悉H5的应用 熟悉H5的类型
1.1 H5的定义
H5指的是移动端上基于HTML5技术的交互动态网页，是用于移 动互联网的一种新型营销工具，通过移动平台（如微信）传播。
网易云音乐：你的荣格心理原型
PUPUPULA：2018汪年全家福 我是创益人×腾讯广告×腾讯基金 会：敦煌数字修复
1.2 H5Байду номын сангаас发展
开始阶段 引爆阶段 绽放阶段 成熟阶段
1.2 H5的发展
1. 开始阶段 H5的开始可以追溯到2014 年，其最初的呈现状态和PPT类 似，将经过简单设计的静态页面 设置成滑动翻页效果，常用于婚 礼邀请、企业招聘等。
《H5页面设计与制作》第4章
4.2.1 认识H5页面介绍中的文字及字体
37
衬线字体
衬线字体容易识别，它强调每个字母笔画的 开始和结束，因此易读性比较高。在整文阅读的 情况下，适合使用衬线字体进行排版，易于换行 阅读的识别性，避免发生行间的阅读错误，如 Didot 、 Bodoni 、 Century 、 Computer Modern等。
打开背景素材
添加Logo
绘制路径
4.2.4 设计案例 制作招聘H5页面文字
45
设置字符参数
输入文字
4.2.4 设计案例 制作招聘H5页面文字
46
绘制矩形
输入文字
复制“秋”文字
4.2.4 设计案例 制作招聘H5页面文字
47
设置斜面和浮雕参数
设置内发光参数
4.2.4 设计案例 制作招聘H5页面文字
51
绘制文本框
输入正文文字
调整字体大小
调整字体大小
4.2.5 设计案例 制作招聘H5页面长图文字
52
绘制文本框
输入正文文字
设置文字样式
4.2.5 设计案例 制作招聘H5页面长图文字
53
完成后的效果
目录 Content
4.1 H5页面的图片设计 4.2 H5页面的文字设计 4.3 H5页面的音效设计
设计人员在获取音效素材后，就要进行音效的选择与添加。
符合H5页面主题和内容
1
适当加入过渡音效效果
4
2
尽量少用歌曲作为音效
3
音效的时间长度要适中
4.3.4 设计案例 使用Audition制作音效
58
Audition是一款多音轨编辑工具，支持128 条音轨、多种音频格式和特效，可以很方便地对 音频文件进行修改、合并等操作。
H5页面制作PPT课件
此课件下载可自行编辑修改，供参考！ 感谢您的支持，我们努力做得更好！
精选ppt2021最新
28
【设置动画】
动画设置主要应用于：文字、图片、图形、一键拨号、输入框等组件 设置方法：点击组件→选择“动画”→进入动画设置页面
精选ppt2021最新
29
制作小提示
• 点击预览图标，即可对此页面的 动画设置进行整体预览。
精选ppt2021最新
30
精选ppt2021最新
设置是对场景的基 本信息进行设置， 主要包括：场景封 面、场景名称、场 景描述、翻页方式。
H5页面中以文字、图片、动画、声音等相结合的富媒体出现，给用户带 来了全新体验，技术本身带来的新奇感让人们心生向往。
用户时间碎片化，接收信息爆炸性增长，企业营销需要迅速抓住客户眼 球。
精选ppt2021最新
4
什么场合可以用到H5页面?
微信互动营销：大转盘、刮刮卡、优惠券、投票调查、小游戏…… 商业展示：企业宣传、产品展示、品牌传播、优惠促销、企业招聘…… 会议活动：会议、展览会、发布会、活动…… 数字出版与教育：电子杂志、多媒体课件、培训课程…… 电子贺卡：商业贺卡、节日贺卡、生日贺卡、祝福卡…… 个人应用：个人秀、婚礼邀请、聚会Party、求职简历……
精选ppt2021最新
16
右侧的“页面管理”
5大管理操作
1.复制：点中条框，点击“复制” 2.我的模板 ：点中条框，点击“我的
复制”，出现在左侧“页面模板”中， 可删除
3.删除：点中条框，点击“删除” 4.移动：点中条框，可上下拖动 5.添加：点击“+”，添加一页
精选ppt2021最新
17
10个基本组件+设置+发布