移动互联网通俗地说就是移动通信和互联网二者的结合，随着4G时代的到来以及移动终端设备群体的不断壮大，移动互联网的迅速发展势不可挡，伴随互联网核心语言的标准规范制定完成，H5一经面世便备受青睐。消费升级带来的后营销时代使得移动营销正趋向于多元化、深度化，表现万式不一而足，诸如明星直播、剧情交互、次元穿越等。在H5标准规范开放之后，除了可以通过编程实现效果，更是有一些零代码工具可以通过使用其提供免插件的语昔视频、图像动画、本地存储等重要功能来实现可视化制作，并能达到类似APP的轻应用体验。

一、H5的强大优势

由于H5在不同的平台上都可以灵活运用它强大的兼容性可以显著地降低开发与运营成本，让企业特别是创业者获得更多的发展机遇。另外，H5开发的轻应用相对于APP来说，它的启动时间更短、联网速度更快，而且无需下载占用存储空间，特别适合手机等移动媒体。同时H5丰富的导流入口，以及极高的导流效率使得商家在产品宣传万面占有更大的优势。不仅如此，H5特有的实时更新、差量更新的优秀体验也大幅度降低了它的使用门槛。从2014年刷爆朋友圈的H5小游戏围住神经猫到前段时间紧贴互联网热点的淘宝造物节，到为腾讯创新大赛推出的穿越故宫来看你等经典案例，更使人们看到了多元化H5设计给新媒体传播带来的无穷潜力。

二、H5表现形式探究

 在明确功能目标之后，就要进行下一个十分重要的步骤了一一设计。在H5的视觉效果中图像、文字和色彩是其中三大主要元素，它们共同传递出完整的视觉效果，在特定的语境下承载特定的含义，以此向受众展现所要传递的思想、观念和消息团。如何有的放矢地在仅有的几张页面里进行设计，需要把握好内容传播的核心、场景化的灵活运用、潜在用户与目标用户的心理状况。尽可能做到让用户打开H5页面时能有眼前一亮的感觉，随之心动产生共鸣，继而动手分享。本文探讨了以下几种常用的H5设计形式。

 (一)幻灯片展示形式H5

 这一类型的H5可以说是最基础的表现形式，通俗来看就是页面内容的展示，有很多的第三万制作工具都能够完成这项工作。虽然一般来说采用这种形式的H5不会让用户有很强的参与感，用户带来的转发量和转化率也相对较低，但对于甲万来说，却可以利用这种成本较低简便易行的H5去紧贴热点，快速反应，达到热点及时转化的效果。即便是简单的展示型H5也可以以版面和内容来打动用户，如果有清晰的前期策划，独特的设计风格同样可以达到很好的传播效果。就通常的设计版面来说，直线型画面相对中规中矩，简单的直线分割容易打造沉稳而具有品质感的页面基调，给人严肃而具有理性的感觉，同时在视觉上对不同内容起到明确的区分作用。斜线型版面视觉上更具冲击力，整体版面更加动感，并有一定的引导性，容易给人以平面延续的感觉。同时它配合适当的动效能够在第一时间给用户带来画面冲击，倾斜的角度越大冲击感越强，比较适合在活动、促销、推荐等场景下使用。圆形版面在手机屏幕上的表现天然具有视线聚焦的吸引力，适合主标题、主图和其他关键信息的展示。利用圆形巧妙灵动地将画面内容进行分割，相比较直线版面会更加流畅，视觉上更具亲和力，更适合手绘风格、卡通风格的页面设计。

 例如“觅食”出品送粮票H5，首先粮票本身就是一件很具有情怀感的物件，同时它采用了暖黄色的色调来搭配页面上使用的插画效果，共同营造出了温馨的场景同时配上拟物化的文案引发用户的同理心，即使采用简单的直线拍版同样也能给用户留下记忆点达到很好的消息传达的效果。

 (二)交互式H5

 如果说展示型H5触发了“视觉设计”的技能点那么交互式H5即触发了“交互设计”的技能点。互联网传播相对于纸媒的一个最大的优势可以说就是用户参与程度的提升，在互联网环境中用户可以根据自己的进度来进行对信息的获取与转化，这个时候的H5也不再是呆板的翻页，不再需要去单纯地等待动效的加载，用户体验开始影响到H5页面的设计过程中。特别是交互式H5使用户体验更直接更深层次，参与感更加强烈，参与效果更加真实可信，更易产生分享的冲动。

 其中一个典型的例子就是“杜蕾斯”的产品宣传推广一一杜蕾斯博物馆(图2)。无论是其中展出的十二位当代艺术家的作品，还是美术馆本身的形式，都为艺术、商业、技术三者的完美融合提供了范例。杜蕾斯利用一个构成风格的博物馆虚拟空间将性与色彩的艺术相融合，为消费者打造一个存在于意识中的虚拟的真实空间。在基础万式上，杜蕾斯美术馆完整地继承了弗拉基米尔·塔特林的“第三世界纪念碑”，但它是在屏幕上以二进制的手法实现一个装置，让这件事有了更多元的意义。如果把杜蕾斯美术馆理解成为二维作品，它是一幅构成风格的画;而如果将其理解为三维空间，它就是一座充满了构成元素的、只存在于意识中的建筑;如果将其理解为富媒体作品，它又是另外一个完全不同的数字交互装置。这种超现实的新颖性视觉体验使得其在5月31日预览的时候，在线峰值超过了10万人次，世界上没有任何一个美术馆可以容纳这样的人流，但与此同时，杜蕾斯美术馆又是一个提供纯粹私人化体验的场馆。换言之，杜蕾斯为每一泞叭都搭建了属于他自己的美术馆。除了正常的互动设置，杜蕾斯美术馆设置了开馆与闭馆时间，并计划将永远保持在线。即便在展览结束之后，也会继续完成这座美术馆的重新利用、装修、租售，像现实空间本身一样与现实空间接轨。

 (三)答题测试数据提交式H5

 如果说交互设计在创造和建立的是用户与产品及服务之间有意义的关系，那么数据提交类H5则就是对这种关系的数据汇总fa7。这类H5可以在企业完成对用户产品宣传的过程之后，同时也完成了对用户数据收集的过程。这类H5巧妙利用用户的求知欲和探索欲，结合剧情发展一步一步引导用户，因此首先要有一条清晰的线索，用户通过引导答题最后到达的结果页也需要合理不突兀，如果能辅以出彩的视觉和文案，将原本的枯燥问答结合在主题剧情中将会达到更加出彩的视觉效果。

 用户在互联网上输入自己的选择提交后，企业后台会根据用户输入的信息进行数据处理，并进而分析用户的喜好、需求、消费水平、消费态度等，以更小的范围来确定目标受众。当H5触发“数据库”技能点之后，你会发现互联网变得更聪明更智能了，打开网站的首页它会更精准地为你推荐你想要获取的产品与服务，同时它也会记录下你的每一次选择，企业将收集到的用户信息加以俊理分析，得出的结论更精准，更符合用户需求，同时用户也能轻松地完成在线预约、活动报名等达到数据提交的目的。

 大众点评为姜文的电影《一步之遥》做的推广H5就采用这类形式,通过让用户为姜文的代表作评分来达到推广电影的目的。视觉设计上采用复古的大字报风格，在文案的选择、字体的处理以及装饰小元素等细节上也十分用心，脑洞大开的动画创意更是令人拍案叫绝。最关键的它并不是让用户被动地接受设计者的提问，而是主动地参与到设计者为其构建的情景之中，最后完成一套完整的消息传播过程。

 (四)动态游戏式H5

 在触发“交互设计”和“数据库”的技能点之后，“游戏引擎”黑科技该上场了。不同于前几种H5开发万式，游戏类H5的开发成本、技术含量都要更高，它需要各个环节的密切配合和协作，例如:策划、创意、设计、游戏制作以及激励手段等。最先火起来的爆款就是那只席卷了整个朋友圈的“神经猫”。这个开发时间仅为一天半，美术和程序各一少泊勺小团队运用H5技术开发的“魔性”小游戏《围住神经猫》上线仅三天就坐拥1亿访问量。一个看似简单的小游戏却带来惊人的传播效果，不少公司摩拳擦掌纷纷投入H5游戏的开发。同时随着越来越多优秀的游戏类H5的问世，如果还是仅仅对之前爆款进行小币多小改已经很难引起用户的兴趣。因此很多设计师开始将游戏答题与其他视觉元素甚至AR/VR技术相结合以期达到更好的视觉传播效果。

 (五)复合功能式H5

 H5最初立项时的名称为Web Application 1.0, Application就是APP应用的全称。然而不同的是H5技术主要是从核心底层重新构建整个互联网的基础，而APP技术只需要在过去的语言基础上去开发应用就行了，所以APP应用先于H5火了起来。H5技术的开发者们在开发伊始就将应用的功能置了内核，用户不再需要安装一大堆的APP应用，而是就像PC时代一样直接通过浏览器去登录。因此，有人预言H5技术或可将移动互联网带回到浏览器时代。如果说APP应用是为移动互联网锦上添花，那么H5则是为整个互联网提供了一个全新的框架和平台。

 在用户层面，用户不用下载APP软件就可实现参会邀请、在线预订、一键导航和产品测试等功能。使用起来更便捷，享受的服务范围更加广泛。在企业层面，需要将功能型的H5当作一个产品来对待，不断地迭代，满足用户需求。

 例如6月底横空出世的淘宝造物节，它的开场就是一个可以交互并且带有重力感应的插画全景世界给用户一个美妙的体验观感。虽然从原理上来说，开发者实际只是用了CSS3的空间变换命令来实现伪3D的视觉效果，但是以前都是用在真实场景图片上，而这次是首次用在插画上，所以会给人完全不同的新鲜感。另外它的用色也很大胆明快，四个主色打造炫酷全景漫画效果:造未来一科技场一蓝色;造昔造艺一昔乐艺术一红色;造原力一创业相关一紫色;购票、分享一淘宝色一橙色，给人很强的视觉冲击感，很容易便会被用户记住并乐于分享。

三、结束语

 如今HTMLS行业已进入高速稳定的发展时期，并在手机页游、移动应用、移动营销、教育、AR/VR等各大领域实现跨界发展，基于HTMLS技术的“移动互联网+’’时代正在到来。文中提到的只是常见的一些H5的形式，在实际设计H5的时候可以根据不同的需求选择不同的技能叠加使用，最终达到最佳的视觉传达与用户体验效果。