1、新媒体H5页面设计第10章H5是由HTML5简化而来的词汇，设计目的是为了在移动设备上支持多媒体。与传统广告媒介相比，H5页面具有开发周期短、传播范围广、传播速度快、开发成本小、形式丰富等优势，因此H5页面已经成为如今新媒体营销的首要选择。本章将介绍新媒体H5页面设计的相关知识。了解H5页面的类型、展示形式，以及版面布局结构。了解常用的制作H5页面的工具。了解H5页面设计的原则与技巧。掌握使用H5制作工具制作H5页面的方法。学习目标Contents目录H5到底是什么1H5页面设计的原则与技巧3H5页面制作基础2H5页面制作4一、H5到底是什么H5是HTML5的简称，也指用H5语言制作的一切数字
2、产品。H5 最显著的优势在于其跨平台性，用H5搭建的站点与应用可以兼容PC端与移动端、Windows Linux、安卓与iOS。此外，H5的本地存储特性也给用户带来了更多的便利性。Contents目录H5到底是什么1H5页面设计的原则与技巧3H5页面制作基础2H5页面制作4二、H5页面制作基础2H5页面的展示形式4H5页面素材的搜集3H5常见版面布局类型1H5页面的类型二、H5页面制作基础活动运营型活动运营型H5页面是为进行活动推广而专门设计的，是常见的一种H5页面类型，其展示形式包括游戏、贺卡、邀请函和测试题等。二、H5页面制作基础品牌宣传型品牌宣传型H5页面则相当于一个品牌的微型官网，其主
3、要作用是塑造品牌形象，向用户传达品牌理念。转转App推出的品牌宣传H5页面二、H5页面制作基础产品介绍型产品介绍型H5页面主要用于介绍产品的功能，通过运用H5页面形成的互动效果全面、形象地展示产品的特性，以刺激用户的购买兴趣。别克VELITE 6车型宣传H5页面二、H5页面制作基础总结报告型使用H5页面来展示自己的年终总结，通过互动式体验将原本枯燥乏味的总结报告变得生动、有趣，并且让用户觉得这样的总结报告与自己息息相关。中信银行年度报告H5页面二、H5页面制作基础职位招聘型为了更好地展示自己的企业文化，很多企业会将招聘广告做成H5页面，并将其分享到微信、微博、QQ等平台。求职者可以在H5页面一
4、键报名，同时企业还可以对相关数据进行实时监控。教学教程型一些步骤式的教学教程，非常适合采用H5翻页的形式来展现。一页展示一个步骤，通过滑动页面交互形式，让用户加深对教程步骤的认识和理解，进而达到良好的学习效果。二、H5页面制作基础简单图文式简单图文式是典型的H5页面展示形式。其中，“图”可以是插画、漫画、照片、GIF图等多种形式，“文”是标题与文字。简单图文式H5页面二、H5页面制作基础礼物、贺卡、邀请函式礼物式、贺卡式、邀请函式的H5 页面抓住了人们喜欢收到礼物这一心理，通过给用户制造好感来潜移默化地达到宣传产品与品牌的目的。贺卡式H5页面邀请函式H5页面二、H5页面制作基础问答、评分、测试
5、式问答、评分、测试式的H5页面利用人们的求知欲和探索欲，吸引人们不断关注页面中的信息，不断地探索，以寻找最终的答案。测试式H5页面二、H5页面制作基础游戏式游戏式的H5页面具有操作简单、竞技性强的特点，通过游戏互动让用户在充满趣味的氛围中了解产品或品牌，帮助企业达到营销推广的目的。二、H5页面制作基础直线型布局直线型布局适合制作信息量较少、内容简短的H5页面，如产品宣传类H5 页面、事物对比类H5页面、情景展示类H5页面等。直线型布局结构直线型布局H5页面二、H5页面制作基础三角型布局三角型布局一般适用于活动类H5页面、节日促销类H5页面、游戏类H5 页面、招聘类H5页面等。三角型布局结构三角
6、型布局H5页面二、H5页面制作基础骨骼型布局体验流程类、简历类、邀请函类等需要分版块、分框架的H5页面均适合采取这种布局形式。骨骼型布局结构骨骼型布局H5页面二、H5页面制作基础中心型布局产品展示类、情景展示类、测试题类、邀请函类页面都适合采用中心型布局结构。中心型布局结构中心型布局H5页面二、H5页面制作基础倾斜型布局产品展示类、游戏类、招聘类、报告类和活动类H5页面均适合采用倾斜型布局结构。倾斜型布局结构倾斜型布局H5页面二、H5页面制作基础全图型布局全图型布局结构适用于节日类、电影宣传类、场景展示类和人物类H5页面。全图型布局H5页面二、H5页面制作基础蒙版型布局当页面背景不是特别纯净或
7、者想突出文字但又不想影响背景图的展示时，可以采用蒙版型布局结构。蒙版型布局H5页面二、H5页面制作基础渐变型布局渐变型布局结构适用于需要同时表达文字和场景主题的H5页面，如节日类、场景展示类、电影宣传类等。渐变型布局结构渐变型布局H5页面二、H5页面制作基础内容内容 1内容内容 2内容内容 3内容内容 4图片素材音效素材字体素材H5案例参考网站Contents目录H5到底是什么1H5页面设计的原则与技巧3H5页面制作基础2H5页面制作4三、H5页面设计的原则与技巧 H5页面设计的原则1 H5页面设计的技巧2三、H5页面设计的原则与技巧页面内容要有条理性页面内容尽量精简尽量少使用虚拟元素提高页面
8、加载速度三、H5页面设计的原则与技巧1.信息情景化、故事化“小牛在线”App H5 页面“小牛在线”App在进行品牌推广时，利用职场人向领导申请加薪的情景设计了H5页面。在这款H5页面中，小牛加班、申请加薪等经历与大部分职场人士的工作经历相符，让人们在观看作品时很容易产生心理共鸣。三、H5页面设计的原则与技巧2.增强互动性康王推出的“2019，没毛病”H5 页面用户可以选择自己想要的励志语句和适合这句话的场景，最后生成一张海报。这样带有互动性质的页面既能增加用户对品牌的好感度，又为其带来精神上的欢乐。三、H5页面设计的原则与技巧3.增加参与感沙宣品牌方制作的“潮妈型动：沙宣帮你拍大片”H5 页
9、面在这款H5 页面中，用户既可以上传亲子照并将其分享至朋友圈进行拉票，又可以观看其他用户上传的照片并为其投票。活动结束之后，用户可以根据票数排名获取相应的奖励。三、H5页面设计的原则与技巧4.借势营销，增强页面的话题性火山小视频联合歌手推出的测试类H5 页面用户可以通过声音解码器测试自己的歌手CP音是哪位明星。三、H5页面设计的原则与技巧5.保证页面的流畅性随着H5技术的不断发展，在设计H5页面时还可以为其添加多种特效，如绘图、摇一摇、吹起、重力感应、3D视图等互动效果。在为H5页面添加这些特效时，设计者要注意保证页面的流畅性，否则页面出现卡顿，会让用户产生不好的浏览体验，进而导致其离开页面。
10、Contents目录H5到底是什么1H5页面设计的原则与技巧3H5页面制作基础2H5页面制作4四、H5页面制作常用的H5制作工具1 使用易企秀制作H5微场景2四、H5页面制作1易企秀是一款针对移动互联网营销的手机幻灯片、H5场景应用制作工具，将原来只能在PC端制作和展示的各类复杂营销方案转移到更为便携的手机上。用户可以根据自己的需要随时随地在PC端、手机端进行制作和展示，随时随地进行营销。易企秀的主要产品界面四、H5页面制作2秀米是一个微营销内容制作和托管平台，致力于为用户提供个性化设计工具和服务，专注于移动端内容制作，用极具创意的设计和效果为用户打动更多的人群。秀米H5秀组件四、H5页面制作
11、3MAKA是一款非常轻便的H5制作工具，能够制作出专业级的H5酷炫动态效果。MAKA为用户提供了涵盖婚礼喜帖、邀请函、活动促销推广、简历招聘、微贺卡制作、微喜帖、微相册、动态海报等各类微场景秀的制作模板。MAKA 部分H5模板四、H5页面制作4兔展是一个免费的H5页面应用生成器平台。用户通过在PC端便捷的操作，就可以利用图文、音乐、动画和视频等多种形式制作个性化微场景H5页面。兔展首页四、H5页面制作5iH5是一款支持PC端云端编辑的网页版H5工具，提供H5编辑、效果监测和平台社交功能，允许用户在线编辑网页交互内容。iH5不仅版面清爽、制作体验好，提供了海量的模板，还为用户准备了视频教程。iH
12、5的H5设计开发工具四、H5页面制作6意派是一款非常专业的H5交互设计工具。不同于模板类的H5页面制作工具，其专业级的功能能够满足更多的个性化设计需求，几乎支持完全自由的交互设计，如序列帧、SVG动画等。意派Epub360的H5设计页面四、H5页面制作此外，还有很多其他可以制作H5页面的工具，如凡科、初页、人人秀、木疙瘩等。四、H5页面制作课后习题1试分析下图中的H5页面属于何种展示形式，其版面布局属于何种类型。2为某鲜花店制作开店宣传和促销的H5页面，要求如下。（1）要包含介绍店铺的文字和图片。（2）要包含介绍店铺内参加优惠活动的鲜花的图片和文字。（3）要包含店铺联系方式以及介绍店铺地址的文字和地图。（4）配上音效。
