《H5+交互融媒体设计》全套PPT课件.pptx

第1章认识H5交互融媒体

学习要点：随着舆论生态、媒体格局、传播方式发生深刻变化，数字产品从形态到内

容再到传播方式都在不断创新与发展。“融媒体”理念越来越深入普及，这个理念以发展为前提，以扬优为手段，不断变化和迭代。融媒体把传统媒体与新媒体的优势发挥到极致，使单一媒体的竞争力变为多媒体共同的竞争力。现阶段融媒体主要表现为把广播、电视、互联网的优势互为整合，互为利用。比如把广播的迅疾、便捷，电视的直观、立体，互联网的“四个无限”(无限空间、无限时间、无限作者、无限受众)打通，将“我无他有”与“他无我有”的部分兼收并蓄、

互为共融。融媒体产品，也是集结了文字、图像、音视频及多种交互技术于一体，具有多终端、

多平台、多渠道发布的特点。

H5交互融媒体是基于HTML5开发的移动端交互产品，具有跨终端、跨平台、无须本地下

载等众多优势。从开发成本来说，开发一个基于HTML5的移动站点要比开发一个原生APP的成本低很多。原生APP包括安卓、iOS、WP等众多不同的手机系统应用，当手机用户需要使用该应用的时候，就要下载与手机系统相对应的移动应用。但如果是HTML5应用，不仅仅只是手机，即便是在平板、嵌入式设备等其他智能硬件上，H5都能很好地自动适应，它是唯一一个可以横跨所有智能设备的技术应用，具有非常广泛的发展前景。

随着移动互联网产业的不断升级，H5的应用越来越广泛，与场景的结合越来越密切。注重

体验、参与交互、强化分享更成为H5的设计价值趋向。伴随着5G的发展，大数据、云计算将为媒体融合及更深层次的创新应用提供有力支撑，也将涌现出更多形式丰富、传播面广的融媒体产品，为移动交互创意设计及线上线下互动设计开辟新的沃土。

1.1

什么是H5?

HTML5技术

(HyperTextMarkupLanguage)中文直意为“超级文本标记语言”

兼容性、合理性、高效性、可分离性、简洁性、通用性、无插件等

HTML

HTML5=HTML+CSS+JavaScript

结构样式行为

JavaScript

■

E

●HTML-——结构●Css———样式●JavaScript——行为

HTML5

CSS3

H5是国人的一种爱称，指基于HTML5技术

制作的数字产品，一般集文字、动效、音频、

视频、图片、图表和互动调查等各种媒体表

现方式为一体。

司

Ohyeah.…

Weredefinitely9oingHTML5.

wt1egk*an,

,7?n

却棉有未来的延度约sthefUNeP*J

60其保策要

yn.

P4

6r

来自未来的车颜要一切

Aarceemesnrghenhe

巡题Tesla【特斯拉】

《邀嚣Tesla【特斯拉】

观照Tesla【特斯拉】

T三5L片

A0R,-

0

扫码体

扫码体验H5

“围住神经猫”,上线微信朋友圈3天

的时间便创造了用户500万，访问量超1

亿的神话。

1.2

为什么要做H5?

1、用户可视化的选择偏好

碎片化的阅读特点引发用户对可视化效果的追求。海量的信息加上细碎的阅读

时间，要求信息必须尽可能地用较短篇幅呈现丰富内容，同时具有相当的吸引力。比如，与其看2000字枯燥的新型冠状病毒疫情扩散新闻文本，用户更喜爱用消息直播、数据解读、可视化呈现等方式简明扼要地集纳在一个H5专题里，满足其基本核心内容快速获取的需求。可见，用户对数据可视化、内容微视频化、H5专题化的需求在移动互联网时代大大增加。

2、多终端跨平台的应用需求

移动设备的多样化，手机型态持续创新，全面屏、升降摄像头、双面屏到最

近的折叠屏，新形态手机给用户带来不一样的操作体验。毫无疑问，在移动互联网的趋向下，多半的用户流量未来还是源于移动端的用户。H5产品的开发，改善了页面多媒体元素的运用问题，无论是动画、视频还是酷炫的交互，不只能够大胆运用这些元素，且无需担忧阅读不流畅的问题，满足了用户多终端跨平台的使用需求，保持产品的稳定性和优秀的体验感。

3、社会化媒体的分享要求

当下社交媒体大发展的环境下，用户的社交或者说互动、分享需求更加强烈。

用户不仅要获取信息，还要在信息传播中实现社会交往。作为一个需要与他人交流的社会人，用户在交流时有交流内容的需要，不仅要实现与网友之类的弱关系互动，也要完成与自己好友之类的强关系互动。H5产品的社交分享属性既是用户的客观需求，也是产品实现自身市场推广和信息裂变传播的有效方式。

4、企业转化引流的选择

H5