摘要：　　HTML5（以下简称H5）是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。目前，H5技术正处于

　　HTML5（以下简称“H5”）是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。目前，H5技术正处于不断发展的过程中，作为移动轻应用，它在未来具有无限可能，潜力巨大。

　　H5页面设计的新媒体特点

　　1.开发成本低廉，简化代码。H5由于是开放的平台，人人都是开发者，人人都是发布者，使得开发成本低廉。页面变得更小，减少了用户不必要的支出；而且，性能更好使耗电量更低；方便升级，打开即可使用最新版本，免去重新下载升级包的麻烦，使用过程中就直接更新了离线缓存。

　　H5为了做到尽可能简化，避免了一些不必要的复杂设计。例如DOCTYPE的改进，在过去的HTML版本中第一行的DOCTYPE过于冗长，没有几个人能记得住，在实际的Web开发中也没有什么意义。除简化了DOCTYPE，还简化了字符集声明，为了让一切变得简单，H5开发可谓下足了工夫。为了避免造成误解，H5制作对每一个细节都有着非常明确的规范说明，不允许有任何歧义和模糊。

　　2.跨平台性，兼容性好。H5有着很强的兼容能力，允许存在不严谨的写法。然而不严谨的错误处理方案在H5开发的规范中都有着明确的规定，也希望未来在浏览器中有一致的支持。对于H5开发的一些新特性，如果旧的浏览器不支持也不会影响页面的显示，在H5规范中也考虑了这方面的内容。例如在H5中的〈input〉标签的b，pe属性中增加了很多类型，当浏览器不支持这些类型时，会将其默认视为text。

　　3.交互性强。交互设计是指设计人和产品或服务互动的一种机制，以用户体验为基础进行的人机交互设计要考虑用户的背景、使用经验以及在操作过程中的感受，从而设计符合最终用户的产品，使得最终用户在使用产品时愉悦、符合自己的逻辑、高效使用产品。

　　合理的交互设计可以采用一些触发的功能来实现。首先点击选项直接跳转页面，优点是迅速直接，单个页面停留时间短，如果题量适当，整个测试短时间内就能完成。缺点是若触发区域过小，并且触发反馈不明显，易造成误触现象，影响整个H5的体验。相对于传统游戏，H5互动游戏除具备迅速传播的优势之外，还具有快速设计、快速开发的特点。在网络媒体行业，面对媒体资讯的高速爆发，H5互动小游戏可以做到快速贴合媒体事件的时间周期，并在一定程度上承载资讯，通过揣摩用户心理，达到广泛传播的目的，成为通过资讯拉动网友参与热情与气氛的利器。

　　4.易传播性。移动互联网如燎原之势普及开来，而在中国，移动互联网的主要应用之一微信，又一直在很多模块里使用H5技术，比如微信公众号。当前的微信朋友圈里经常会出现H5制作，比如会议邀请、组织招聘和活动策划，大大方便了朋友之间的传播。

　　综上所述，与原生应用相比，H5页面的传播性和灵活性使它更加符合媒体产品对时效性和差异化的要求，成为2016年移动媒体产品最重要的形态之一。

　　H5页面设计在新媒体中的应用方向

　　1.视觉图文设计。如今，移动端H5如雨后春笋般迅速发展花样繁多，无论是宣传产品、内容介绍、新闻推广都会想方设法利用H5设计出来。视觉方向是指以画面为主的H5，这里指的不单单是好看，而是把重点放在画面执行上，画面有更丰富的动效，有更强的视觉冲击力。

　　视觉方向的H5拥有着炫酷的画面、华丽的动效以及特点鲜明的手绘，让人印象深刻，过目不忘。说到视觉表现力，不得不提的是大众点评App推出过一系列H5，无论是画面效果还是夸张的动效，都能给人留下深刻的印象，但是在内容和交互上就没有那么深入人心了。H5的画面表现不单是视觉层面，还要考虑到屏幕之间的切换，如何把握整套页面之间的节奏，什么时候抛出按钮，什么时候正确引导。还包括动效、音乐等，这些都是需要设计师花时间去琢磨研究的。H5的视觉表现上，即使是简单单一的画面，调整好了节奏，感官综合得好，反而胜过大多数仅靠画面撑场的作品。

　　2.内容方向设计。内容方向是指介绍内容为主的H5，从用户情感出发，从大众所熟知和想了解的方面入手。如节日类、信息广告类、电视影片类等。重点放在内容方面要引人入胜，能够吸引特定用户，把H5有目标、有目的地去投放。

　　腾讯网《活着》项目组策划的《活在此时》，充分透析了“北漂”一天的忙碌生活，直击为了生活而奋斗着的年轻人的内心，主题震撼，内容充实，闻者心动，见者伤感。为抗战胜利70周年举行盛大阅兵仪式而策划的《阅兵手册》，内容上充分展示了各个方阵的信息，在看阅兵直播的同时，手持这款H5，既长见识还能给他人介绍。腾讯新闻发布系列H5《传统节气》。随着人们开始越来越关注传统文化的传承，二十四节气的由来、习俗等知识，越来越多的人想深入了解。实时推出《传统节气》，既满足了此类人群的需求，又弘扬了传统文化。

　　3.交互方向设计。在移动端，要在网页上实现交互和动效需要借助H5技术(例如CSS3媒体查询、CSS3动画、Canvas等)。现在的手机浏览器大都支持H5的核心技术，例如对触摸事件和手势的响应、播放声音和视频、渲染CSS变换，以及获取设备的加速度传感器数据等。这些技术衍生了诸如互动小游戏、交互型动画页面、可视化新闻等，为市场营销、媒体报道等提供了大量不同形式的载体，同时为产品策划与视觉设计带来了更多的想象空间。

　　交互方向的H5，重点放在和用户的交互体验方面，让用户有很强的参与感。这就需要在互动过程中做到完美的体验，吸引用户一步一步按照设计师思路看完H5。交互方向H5一大类是小游戏，早期的围住神经猫、虐心的小鸟等都是火遍朋友圈。《俄罗斯阅兵——抢答1分钟》参与互动答题，再配上风格独特的手绘图案，可以说是H5中的精品。

　　H5的创新发展

　　1.内容营销。H5本身只是一个承载信息和传达信息的工具。我们想让信息能快速传播,让信息更加生动有趣,更加富有情感，讲故事是最好的方式。通过页面设计让内容精确地到达受众的面前可以增加H5的使用。随着互联网的发展，任何人都可以发布心情文字，内容的好坏都有个人来评判，情怀就是最重要的体现方式。H5的精髓就是讲一个好故事，用故事去吸引观众。

　　2.技术支持。H5在技术实现方面已经有了长足的进步，但是在多媒体应用、本地缓存的运用上还有待进一步的提高。我们可以利用新媒体的标签，随时将视频文件或者音频文件插入网页的任何位置，很便利，甚至我们还可以利用简单的代码，定制一些功能齐全的H5播放器。这些都需要技术的支持才能实现。

　　利用H5的后台程序缓存技术，我们和互联网的连接速度会更加快捷，网页的加载速度及缓存可以实现离线的时候也可以看到内容，方便了受众接受信息。

　　结  语

　　好的产品需要恰当的渠道来让用户发现和传播，如果把一个个H5专题比作“箭矢”，新闻客户端、微信和微博等传播渠道就是射出这些箭矢的“弓”。利用新闻客户端、微信和微博内嵌的网页浏览器，H5页面可以与新闻文章、朋友圈状态和好友微博一起触达用户，再通过用户的分享形成扩散传播。

　　参考文献：

　　①谭坤 吕悦宁：《基于微信平台的H5广告设计策略分析》[J]，《包装工程》，2016年第20期

　　②何华康：《H5技术：网络与新媒体的创新发展》[J]，《中国报业》，2016年第5期

　　③张余：《移动互联网时代H5页面的设计与营销》[J]，《东南传播》，2015年第9期

　　（作者单位：上海建桥学院）