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 .