《新媒体信息编辑（第2版 微课版）》 课件 第9章 新媒体 H5 页面设计

第9章新媒体H5页面设计H5是由HTML5简化而来的词汇，其设计目的是为了在移动设备上支持多媒体。与传统广告媒介相比，H5页面具有开发周期短、传播范围广、传播速度快、开发成本小、形式丰富等优势，因此H5页面已经成为如今新媒体营销的首要选择。本章将介绍新媒体H5页面设计的相关知识。目录contents01了解H502H5页面设计基础03H5页面设计Part/

01了解H5H5是HTML5的简称，也指用H5语言制作的一切数字产品。H5之所以能够引发广泛关注，根本原因在于它为下一代互联网提供了全新的框架和平台，包括提供免插件的音频或视频、图像动画、本体存储及更多炫酷且重要的功能，并使这些应用标准化和开放化。H5最显著的优势在于其跨平台性，用H5搭建的站点与应用可以兼容PC端与移动端。它可以轻易地移植到各种不同的开放平台与应用平台上，这种强大的兼容性可以显著降低站点与应用的开发与运营成本，让企业特别是创业者获得更多的发展机遇。H5的本地存储特性也给用户带来了更多的便利性。基于H5开发的轻应用比本地App拥有更短的启动时间和更快的联网速度，而且无须下载占用存储空间，特别适合手机等移动终端。H5让开发者无须依赖第三方浏览器插件即可创建高级图形、版式、动画及过渡效果，这也能让用户用较少的流量就可以欣赏到炫酷的视觉与听觉效果。Part/

02H5页面设计基础H5页面通过简单明了的文字介绍、炫酷的动画及图片拼接，并搭配背景音乐和视频的形式，将营销内容以一种合理、有趣的方式来进行推广。由于其营销效果显著，传播方便，H5页面已经成为众多企业开展营销推广活动的首选方式之一。9.2.1H5页面的类型活动运营型H5页面是为进行活动推广而专门设计的，其展示形式包括游戏、贺卡、邀请函和测试题等。●活动运营型活动运营型H5页面9.2.1H5页面的类型品牌宣传型H5页面相当于一个品牌的微型官网，其主要作用是塑造品牌形象，向用户传达品牌理念。在设计品牌宣传型H5页面时，要使用与品牌气质相符合的视觉语言。●品牌宣传型“一个奶盒的五行之旅”H5页面9.2.1H5页面的类型产品介绍型H5页面主要用于介绍产品的功能，通过运用H5页面形成的互动效果全面、形象地展示产品的特性，以刺激用户的购买兴趣。●产品介绍型“放·自由我”H5页面9.2.1H5页面的类型近几年，年度使用报告是各大平台常见的H5玩法，通过互动式体验将原本枯燥乏味的总结报告变得生动有趣，并且让用户觉得这样的总结报告与自己息息相关。●总结报告型“小红书之城，我的足迹报告”H5页面9.2.1H5页面的类型为了更好地展示自己的企业文化，很多企业会将职位招聘广告做成H5页面，并将其分享到微信、微博、QQ等平台。求职者可以在H5页面一键报名，同时企业还可以对相关数据进行实时监控。●职位招聘型一些步骤式的教学教程，非常适合采用H5翻页的形式来展现。一页展示一个步骤，通过滑动页面交互形式，让用户加深对教程步骤的认识和理解，进而达到良好的学习效果。●教学教程型9.2.2H5页面的展示形式简单图文式是典型的H5页面展示形式。其中，“图”可以是插画、漫画、照片、GIF图等多种形式，“文”是标题与文字。简单图文式的H5页面通过翻页、滑动页面、点击页面等简单的交互操作，让页面产生类似幻灯片的显示效果。●简单图文式简单图文式H5页面9.2.2H5页面的展示形式礼物式、贺卡式、邀请函式的H5页面抓住了用户喜欢收到礼物这一心理，通过给用户制造好感来潜移默化地达到宣传产品与品牌的目的。●礼物、贺卡、邀请函式贺卡式H5页面邀请函式H5页面9.2.2H5页面的展示形式问答、评分、测试式的H5页面利用用户的求知欲和探索欲，吸引用户不断关注页面中的信息，不断地探索，以寻找最终的答案。这类H5页面要求文案主线逻辑清晰，页面视觉效果出众，问题有趣。●问答、评分、测试式测试式H5页面9.2.2H5页面的展示形式问答、评分、测试式的H5页面利用用户的求知欲和探索欲，吸引用户不断关注页面中的信息，不断地探索，以寻找最终的答案。这类H5页面要求文案主线逻辑清晰，页面视觉效果出众，问题有趣。●问答、评分、测试式视频、动画式的H5页面以全屏视频或动画为主，大多通过讲述故事来吸引用户的注意力，结合音乐和音效使用户全身心沉浸其中。整个H5页面播放过程几乎没有交互，或者只使用简单的交互（如点击按钮后继续播放），当故事进入尾声时会出现一屏广告画面。●视频、动画式随着H5技术的发展与成熟，全景/VR式的H5页面已经成为行业流行趋势之一。用户可以滑动手机屏幕或移动手机，查看上下左右360°或720°的画面，这种互动能让用户看到的视角更大，更有身临其境的体验。●全景、VR式9.2.3H5页面设计的原则无论H5页面中包含的内容有多少，都要按照一定的顺序进行展示，做到“一个页面只讲一件事”。在设计H5页面时，要先对页面内容做一个整体的规划，分清页面内容的主次、并列等关系，将页面内容有条理地展示出来。1．页面内容要有条理性H5页面中所包含的内容要精简，挑选最精准、最核心的内容进行展示，其他次要或多余的内容可以去除。此外，为了更好地帮助用户理解页面内容，可以设置一些概括性的标题提升页面内容的条理性和简洁性。2．页面内容要精简虚拟元素是指向用户解释关于页面内容的信息或操作该内容的提示。在H5页面中添加这些虚拟元素往往会造成页面空间的浪费，使有效内容的展示区域减少，进而降低用户的阅读体验。若有些虚拟元素是不可缺少的，可以将其简化，或者将其设置为隐藏状态。3．少使用虚拟元素如果用户打开H5页面花费的时间过长，往往会导致一部分用户因缺乏耐心而直接关闭页面，所以要保证H5页面的加载速度。在设计H5页面时，可以通过减少页面数量、合理添加图片及精简信息等方式来提高H5页面的加载速度。4．提高页面加载速度9.2.4H5页面设计的技巧在设计H5页面时，可以将信息融入一定的故事情景中，最好是多数人都经历过的情景，这样才能让用户从中找到熟悉感，让用户感同身受，进而唤起发自心底的认同感，更乐意接受H5页面所传达的信息。1．信息情景化、故事化“父亲的老相册——播客种草机”H5页面9.2.4H5页面设计的技巧在设计H5页面时，可以将信息融入一定的故事情景中，最好是多数人都经历过的情景，这样才能让用户从中找到熟悉感，让用户感同身受，进而唤起发自心底的认同感，更乐意接受H5页面所传达的信息。1．信息情景化、故事化在H5页面加入互动机制，能让用户在充满趣味的氛围中深入地感知与体验H5页面所宣传的产品，进而提升其对产品的认知。2．增强互动性“阅字如愿”H5页面9.2.4H5页面设计的技巧在设计H5页面时，可以将信息融入一定的故事情景中，最好是多数人都经历过的情景，这样才能让用户从中找到熟悉感，让用户感同身受，进而唤起发自心底的认同感，更乐意接受H5页面所传达的信息。1．信息情景化、故事化在H5页面加入互动机制，能让用户在充满趣味的氛围中深入地感知与体验H5页面所宣传的产品，进而提升其对产品的认知。2．增强互动性让用户深入了解产品的一种有效方法是让其切实地参与产品的设计与生产，所以能让用户产生参与感的H5页面更容易获得他们的喜爱。在设计H5页面时，新媒体编辑可以根据产品本身的特性和用户的喜好进行参与机制的设置。3．增加参与感“360°探索RedmiK30Pro”H5页面9.2.4H5页面设计的技巧在设计H5页面时，可以将信息融入一定的故事情景中，最好是多数人都经历过的情景，这样才能让用户从中找到熟悉感，让用户感同身受，进而唤起发自心底的认同感，更乐意接受H5页面所传达的信息。1．信息情景化、故事化在H5页面加入互动机制，能让用户在充满趣味的氛围中深入地感知与体验H5页面所宣传的产品，进而提升其对产品的认知。2．增强互动性想让H5页面迅速爆红，第一时间抓住当前热点并借机进行品牌宣传是一条捷径。4．借势营销，增强话题性让用户深入了解产品的一种有效方法是让其切实地参与产品的设计与生产，所以能让用户产生参与感的H5页面更容易获得他们的喜爱。在设计H5页面时，新媒体编辑可以根据产品本身的特性和用户的喜好进行参与机制的设置。3．增加参与感“流言之书”H5页面Part/

03H5页面设计当前，H5页面所带来的惊艳展示效果越来越受用户的欢迎。随着诸多H5页面设计工具的不断涌现，H5页面的设计变得越来越简单。9.3.1常用的H5页面设计工具易企秀是一个基于智能内容创意设计的数字化营销软件，主要提供H5创景、海报图片、营销长页、问卷表单、互动抽奖小游戏和特效视频等各式内容的在线设计，且支持PC、App、小程序、WAP多端使用，用户可以根据自己的需要自由选择使用端进行创意设计，并快速分享到社交媒体平台开展营销。●易企秀MAKA是一个集在线设计、活动营销于一身的全平台工具，用户可以使用MAKA轻松设计H5、海报、视频等类型的作品，以及策划报名预约、接力、在线投票、抽奖、趣味答题、收款、拼团等活动。MAKA还支持分渠道数据统计和社交关系传播贡献分析，帮助用户高效地进行裂变管理和渠道激励。●MAKA秀米是一款微信公众号图文编辑工具，也可以在线设计H5页面。秀米H5是针对于移动端的一种营销应用方式，可以设计集文字、图片、音乐等信息形式于一身的展示页面，非常适合移动端传播。使用秀米H5可以制作固定页H5、长页H5及合集H5，其中长页H5还可以与秀米图文互通。●秀米9.3.1常用的H5页面设计工具人人秀是一个数字化活动营销中台，主要提供互动营销、H5、问卷、小程序、海报和画册的6合1产品营销矩阵、丰富的场景解决方案以及技术开放能力。人人秀的H5设计工具，一键拖拽即可设计VR、游戏、投票、抽奖、红包、答题、拼团等H5页面，内置丰富的模板，可以轻松实现活动推广、公司招聘等需要。●人人秀兔展具有H5、短视频、互动游戏、小程序等多种表现形式，是使用H5技术的全面专业生产平台，它为微场景、微信H5页面、微信邀请函、短视频和场景应用提供独特的解决方案。●兔展iH5是一款专业级H5设计工具，功能非常强大，能够实现很多其他H5设计工具无法实现的功能。作为一款基于云端的网页交互设计工具，用户在无须编码的前提下，通过对多媒体元素的拖拉、排放、设置等可视化的操作，实现在线编辑功能。●iH59.3.2使用易企秀设计H5页面下面以易企秀为例，