HTML5在品牌设计传播中的应用

李 芮 （首都师范大学 100000）

HTML5在品牌设计传播中的应用

李 芮 （首都师范大学 100000）

本文通过对现有的各类HTML5页面案例进行分类研究，分别总结出四大功能类型：与四类表现形式。并以此为研究基础，继续探寻总结HTML5页面利用移动互联网在品牌传播中的优势和应用价值，为今后的设计应用提供一定的理论基础。

品牌；HTML5；移动互联网；功能分类；表现形式

随着移动通信技术的强劲发展，品牌企业的宣传推广方式发生着巨大的变化，开始运用多种媒体进行品牌推广的探索。尤其是HTML5标准正式发布之后，借助微信平台强大的传播力，越来越多的品牌HTML5专题页面展现在大众视野之中。HTML5以多种媒体相结合的形态发布信息，通过趣味的互动体验让用户参与其中，为品牌的互联网传播提供了全新的框架和平台，也为品牌设计带来了新方法与新思路。

一、H5页面的功能分类

目前，H5页面的样式众多，从功能与设计目标来看，H5专题页在品牌设计传播中主要有以下四大类型：

1.品牌宣传型

这一类型H5页面重点在于向用户展示品牌整体气质，塑造品牌形象。运用符合品牌气质的外显性视、听、声元素相结合的形式，将品牌的定位、个性、故事等内涵性元素展现出来，向观者传达品牌理念，打造沉浸式体验使观者感同身受，起到宣传品牌的目的。《逸鲜小阁》一例，伴随着悠扬的背景音乐，通过用户对当下拥挤、繁忙现状排斥的情感与该品牌所追求的新鲜与安逸的生活态度相对比，将品牌形象和所要传达的理念娓娓道来，用H5拉近品牌与顾客间的距离，使顾客从心底出发去感知逸鲜小阁的品牌形象。

2.商品展示型

商品展示型页面顾名思义就是用于展示介绍商品的详细内容，将商品的特性通过平面图文、三维立体等功能方式展现出来。这一类型的H5页面多见于汽车品牌，如MINI Cooper品牌所设计的《The MINI Story Mobile》。采用3D全景模式展示MINI Cooper的汽车展厅，用导航菜单延展出所要展示的产品和品牌故事。页面风格上简洁大气，配色上明朗活泼，创造身临其境的视觉感受，突出MINI Cooper品牌目前年轻、高端化的产品定位。

3.活动运营型

活动运营型H5属于最常见的页面类型，主要是品牌为其举办的活动进行推广营销而设计的，其中包括活动邀请函、图文信息、页面游戏、测试问卷等形式。这类H5页面风格一般根据具体活动内容而定，符合整体气氛，形式多种多样、天马行空。

4.总结报告型

该类型页面多见于品牌年度总结。以用户与该软件的关联事件和使用数据为纽带，拉近品牌与用户间的距离。淘宝出品的《3万亿感谢有你》，以“3万亿”为起点，逐步展开数字的由来，从接触使用淘宝软件开始，到第一次网上购物等多个时间点，将用户吸引入与自身有关的时间轴。用一系列与用户息息相关的数据，描绘出用户的淘宝购物历程，再配以扁平与写实相结合的设计风格，用简洁风趣的方式满足用户与他人分享展示购物数据的心理。

二、H5页面的表现形式

HTML5页面将图片、文字、视频、音频、互动游戏等多种媒体形态融合一起，从用户角度出发，针对不同品牌、产品、活动等选择不同的表现形式。具体有以下四种表现形式。

1.图文介绍型

图文介绍型H5页面属于最基础、最典型的表现形式。以沃尔沃汽车的《尊沃认证二手车》H5专题页为例。首先用一组图片的形式说明中国二手汽车交易市场的混乱现象，继而用另一组图文展现沃尔沃汽车突破传统的交易方式，为车主带来最放心安全的二手车交易，突出“以人为尊”的品牌理念，与第一部分形成鲜明的对比，很好的宣传了品牌。

2.情景体验型

这一类型页面旨在为用户还原打造真实场景，使用户在无意识情况下融入品牌商所创造的氛围当中，将生活中真实的情境迁移到H5页面，吸引用户的注意力，增加用户对这一系列活动的熟悉感，减少陌生感和生硬感，使用户增加对品牌的良好印象。

例如，星巴克品牌发布的《玛奇朵学校》专题页面（如图1）。整个页面采用学校授课的形式，加上“透视屏幕”的效果，分4步讲述制作一杯星巴克玛奇朵咖啡。每步一个具体问题，点击屏幕可透过屏幕看到答案，然后点选答案，进入下一课。其还原了学校中上课考试毕业的常见场景，参与形式新颖且难度较低，使用户能够主动参与到这个情境中，利用用户的猎奇心理，引发用户的好奇心与探知欲。视觉上以咖啡色为主色调，淡绿色为背景色，呼应星巴克品牌颜色，画质精良，处处体现星巴克的品质，为宣传品牌起到了一定作用。

图1《玛奇朵学校》H5截图

除了上述模拟真实场景的体验类H5外，还有一种仿照微信聊天模式的H5也非常常见。如网易出品的《世上乐土朝鲜STYLE》、小米公司出品的《大屏手机就是小米MAX群》等都是模仿微信聊天的界面与对话模式，利用用户与他人进行有目标有目的、逻辑严谨、风趣幽默的对话，穿插配以视频、图片、文字等形式，一步步引领用户去了解产品特点。

3.游戏参与型

在现代竞争日益加快的情境下，游戏化具有很大的吸引力，开始被越来越多的应用。“游戏化的思维”的核心是将游戏元素应用到非游戏的活动中，通过让浏览过程更加有趣而使得项目产生吸引力。它具有更好的传播效果，使受众体验到愉快的氛围，并能够轻松、深刻的记忆其中的信息。《天猫超市请客节》一例，采用双屏互动游戏模式，卡通漫画风格，通过点击屏幕上“变身请客侠”字样，生成一个二维码，邀请身边人通过微信扫描二维码，即可双机体验“请客侠”的耍帅技、搞笑技、吃货技、打拼技、柔情技五种技巧游戏。游戏化设计可以为H5页面提供更加有趣、吸引人的宣传方式，使品牌与用户建立长期的紧密联系，强化与用户的关系。

4.感应互动型

这类H5页面以新颖的交互方式形成独有的特色，使用户沉浸于有趣的互动体验之中，为用户留下深刻印象，加深对品牌活动的了解。天猫出品的《2015世界为谁倾倒》页面（如图2），运用HTML5的重力感应功能，每次切换屏幕变换一个国家，突出世界各地的特色。用新颖有趣的交互方式充分调动用户的参与度，使用户印象深刻，促使用户进行分享传播，从而宣传品牌活动。

图2《2015世界为谁倾倒》H5截图

三、H5页面在品牌传播中的优势和应用价值

相对报纸、广播等传统媒体来说，互联网在品牌传播方面的优势显而易见，尤其是移动互联网所带来的影响力是前所未有的。HTML5页面正是利用移动互联网的特色在品牌传播中发挥着其自身优势和价值。H5页面在品牌传播中的优势如下：

（1）社交化传播渠道。HTML5页面的流行，除了依靠移动设备和技术的普及，更多的是由于微信、微博等移动端应用的发展。移动端的信息传播不仅更加便捷，在时间上用户有相对的自由性，空间上也具有全球性和无限性。通过公众号的形式，将各品牌所要发布的内容传递给用户，用户再通过分享形成二次、多次传播，从而使品牌信息得到推广。通过这一类的社交渠道，不仅拉近了彼此间的距离，也加深了用户对品牌的兴趣和了解程度，吸引消费者与品牌产生更多良性互动，促进品牌成长。

（2）跨平台传播。H5页面不仅可以同时兼容PC端与移动端、安卓与IOS等系统，还能借助智能设备扫描二维码的方式有效地串联起各个媒体，与传统媒体相结合，实现线上与线下的有效结合，将碎片化的品牌资源进行整合。传统媒体的权威性和影响力，以及新媒体特有的互动性和便捷性，形成优势互补，为用户带来一个全方位的品牌体验，吸引更多的用户增加用户黏性，并使其转化为对该品牌的信任和依赖，最后形成购买力。

（3）沉浸式体验。Html5页面能够使人们沉浸在品牌营造的情境之中。通过更生动形象的视觉和听觉刺激来吸引用户的注意力，并且结合有趣的互动体验带给用户控制感和现场感，在不知不觉中达成品牌产品的传播目的。

（4）开发推广简单。H5的开发技术与APP、网站等比较而言相对简单，成本较低，研发周期也较短。维护更新也只需在网站即可，不需要更新客户端。这就给了中小品牌更多的机会和空间宣传品牌。

品牌的塑造与推广是通过有效传播实现的。而HTML5作为一种传播优势明显的全球性媒体传播平台，为企业的品牌传播开辟了一片新天地，有利于企业提高品牌传播的速度、质量和效果。H5页面在品牌传播中的应用价值如下：

（1）建设完善品牌传播的渠道。H5最主要就是基于微信传播，而微信正是用户数量庞大、优势突出的传播途径。品牌可以通过整合运用各类平台，实现对企业品牌立体化、跨媒体化的传播，使消费者对品牌有全新的认知，提高对品牌的认可度、接受度。

（2）提升品牌忠诚度。H5页面发挥独有的优势，能够建立和巩固消费者与品牌间的信赖关系，有效提升用户对品牌的忠诚度。无论是沉浸式的视听体验还是游戏化的交互方式，让用户主动将品牌信息与好友进行分享交流，从而使品牌与用户建立长期的紧密联系，强化与用户的关系。

（3）促进品牌创新。品牌的创新推动着品牌的塑造与发展。H5作为一种优势明显的新平台，为品牌的创新提供了更多的可能性，有利于品牌在表现方式、传播途径等方面的创新，提升品牌质量。

四、结语

现在越来越多的品牌将宣传阵地从传统媒体转移到移动互联网平台。移动端 Html5页面可以通过品牌、产品和用户之间的双向互动为品牌提供新的设计传播渠道，通过创新传播方式，塑造个性化传播优势，为企业品牌传播开辟更广阔的领域，提高传播效果，打造出生动、完整的品牌形象。

[1]蔡丽杰.基于用户体验的微信H5界面设计研究[D].天津工业大学，2016.

[2]张余.移动互联网时代H5页面的设计与营销[J]. 东南传播，2015（9）.

[3]徐峰.新媒介对品牌传播的有效性研究[D]. 湖南师范大学，2008.

[4]王洪亮，吴颖，戴璐.视觉传达与媒体应用[M]. 中国传媒大学出版社， 2009 .