汽車網(wǎng)絡(luò)與新媒體營銷課件：H5設(shè)計(jì)與制作

汽車網(wǎng)銷實(shí)戰(zhàn)運(yùn)用

H5設(shè)計(jì)與制作1）了解H5的概念；2）理解H5的特征；3）掌握H5的主要類型。知識(shí)目標(biāo)1)具備正確使用H5軟件各項(xiàng)應(yīng)用功能的能力；2)具備根據(jù)市場需求開展H5設(shè)計(jì)與制作的能力。能力目標(biāo)從H5設(shè)計(jì)與制作入手，了解我國“移動(dòng)+社交”網(wǎng)絡(luò)時(shí)代的迅猛發(fā)展，隨著5G網(wǎng)絡(luò)技術(shù)的到來，人類進(jìn)入了萬物互聯(lián)的新時(shí)代，互聯(lián)網(wǎng)正在全面的融入生產(chǎn)生活當(dāng)中，創(chuàng)造了人類新空間，從中領(lǐng)悟到中國互聯(lián)網(wǎng)發(fā)展迅速，規(guī)模龐大，鼓勵(lì)學(xué)生培養(yǎng)自己的創(chuàng)新精神，積極參與到科技創(chuàng)新中去，激發(fā)學(xué)生的愛國主義和民族自豪感。素養(yǎng)目標(biāo)任務(wù)導(dǎo)入小王假期參加某汽車4S店兼職，距離4S店淡季營銷活動(dòng)還有一周的時(shí)間，為做好客戶邀約，加深公眾對本次活動(dòng)的印象，增加活動(dòng)吸引力，市場經(jīng)理安排小王采用新媒體技術(shù)H5制作本次活動(dòng)邀請函。于是，小王開始查詢學(xué)習(xí)：H5是什么、H5有哪些特征？如何使用合適的軟件制作H5？

【知識(shí)解讀】

（一）H5定義H5是HTML5的簡稱，全稱HyperTextMarkupLanguage，中文譯為“超文本標(biāo)記語言”，數(shù)字5指Html的第5次重大技術(shù)修改，其標(biāo)準(zhǔn)規(guī)范于2014年10月最終制訂并在全球推行。

【知識(shí)解讀】

HTML是一種制作萬維網(wǎng)頁面的標(biāo)準(zhǔn)計(jì)算機(jī)語言，是網(wǎng)頁的開發(fā)端和接收端約定如何標(biāo)記標(biāo)題、正文、圖片、文字樣式等頁面內(nèi)容的一整套規(guī)范，H5頁面是利用Html5編碼技術(shù)實(shí)現(xiàn)的一種數(shù)字應(yīng)用，在傳播上具有多維信息傳播，跨終端輕應(yīng)用，幻燈播放型、場景體驗(yàn)型、交互游戲型頁面的特點(diǎn)。總之，H5是一種借助網(wǎng)絡(luò)表現(xiàn)形式來達(dá)到制作者相關(guān)傳播目的一種新型表現(xiàn)形式。如圖3-4-1所示為寶馬官方商城的微信小程序界面。想一想請同學(xué)們判斷下列軟件中哪些是可以制作H5，并討論H5與APP之間的區(qū)別。兔展、易企秀、搜狐快站、微頁、MAKA、百度H5.凡科互動(dòng)、iH5.秀米、H5DS、初頁、木疙瘩易企微、意派、人人秀、爆米兔、今日頭條、微博、抖音、快手。

_____________________________________________________________________

_____________________________________________________________________12（一）傳播性強(qiáng)H5創(chuàng)意營銷的主要傳播行為集中在微信及微博平臺(tái)上，優(yōu)勢在于能夠借力朋友圈及微博強(qiáng)大的傳播力度及范圍，另外，HTML5技術(shù)本身所具有的跨平臺(tái)多設(shè)備傳播的特點(diǎn)，也減少了傳播過程中的阻礙，傳播性更強(qiáng)。（二）互動(dòng)性好在宣傳一款產(chǎn)品概念的傳播過程中，最重要的就是產(chǎn)品本身的互動(dòng)性，以及用戶在體驗(yàn)后的感官感受。3（三）內(nèi)容聚焦化從內(nèi)容的顆粒度來說，H5營銷的內(nèi)容更加具體、細(xì)致，一般一個(gè)H5針對一個(gè)專門的活動(dòng)，內(nèi)容一般是會(huì)議邀請、組織招聘、產(chǎn)品推廣和品牌傳播等。H5的特征H5具有以下特點(diǎn)12（四）應(yīng)用形式簡單化H5營銷是基于網(wǎng)頁的營銷方式，用戶運(yùn)用無需下載，不占用手機(jī)內(nèi)存，可即點(diǎn)即用，方便快捷。只要能打開網(wǎng)頁的環(huán)境就能進(jìn)行H5營銷，H5營銷門檻較低，用戶的使用成本較小。H5營銷針對特定的活動(dòng)節(jié)日，指向性更加明確，內(nèi)容更加有參與度，相對而言是場景與事件營銷。3（六）制作與維護(hù)成本低H5采用的是web（網(wǎng)絡(luò)）頁面的結(jié)構(gòu)，其本身為網(wǎng)頁的創(chuàng)建。H5營銷是基于網(wǎng)頁的營銷方式，且可以跨平臺(tái)使用，所以只需產(chǎn)品經(jīng)理，設(shè)計(jì)師、前端開發(fā)后端開發(fā)各一位就可以完成項(xiàng)目開發(fā)。H5的特征H5具有以下特點(diǎn)汽車H5的類型活動(dòng)推廣的H5頁面形式多變，包括游戲、邀請函、賀卡、測試題等形式。如今的H5活動(dòng)運(yùn)營頁需要有更強(qiáng)的互動(dòng)、更高質(zhì)量、更具話題性的設(shè)計(jì)來促成用戶傳播。如:汽車展覽會(huì)邀請函，可以通過填寫個(gè)人信息來參加活動(dòng)。1.活動(dòng)運(yùn)營型汽車H5的類型與活動(dòng)運(yùn)營型頁面不同的是，品牌推廣型的H5頁面等同于是這個(gè)品牌的微官網(wǎng)，重點(diǎn)在于塑造品牌形象，向客戶傳達(dá)品牌理念，因此這類頁面在設(shè)計(jì)上必須特別注重貼近品牌的定位和氣質(zhì)，使客戶對品牌留下難以磨滅的印象。這種設(shè)計(jì)最好運(yùn)用大膽的設(shè)計(jì)、走心的文案，需要UI和交互的人員有更多的創(chuàng)造力，如吉普汽車設(shè)計(jì)的《征服世界，駕馭未來》H5營銷策劃，將汽車強(qiáng)悍的性能表現(xiàn)得淋漓盡致。2.品牌推廣型汽車H5的類型視頻類H5大多以全屏視頻的形式存在，能夠減少其他因素對用戶的干擾，H5的體驗(yàn)不會(huì)輕易被中斷，而且用視頻能夠展現(xiàn)出一些H5程序?qū)崿F(xiàn)不了的特效，結(jié)合音樂和音效更能讓用戶全身心沉浸。法拉利跑車發(fā)布的視頻類H5，以沖擊的視角和震撼的背景音樂，彰顯汽車強(qiáng)勁的爆發(fā)力和速度3.視頻型汽車H5的類型營銷游戲型H5是使用H5語言制作的游戲，該類游戲最合適的運(yùn)行平臺(tái)是智能手機(jī)或平板電腦等移動(dòng)終端，可把該類游戲視作手機(jī)版的網(wǎng)頁游戲，在游戲的基礎(chǔ)上加入營銷目的，畫面通常會(huì)置入廣告。常見的游戲H5有密室逃脫類、劇情游戲類、以及棋牌、迷宮、打地鼠等小游戲，如圖：汽車團(tuán)購會(huì)游戲營銷活動(dòng)。4.營銷游戲型

汽車H5的類型展示類H5是最常見的移動(dòng)H5網(wǎng)頁，因其交互形式簡單（翻頁）、制作快捷（套圖），應(yīng)用上非常廣泛，包括邀請函、多媒體新聞、相冊、動(dòng)態(tài)海報(bào)等。汽車品牌是最常使用這類H5頁面的，因?yàn)镠5頁面既可以幫助汽車制造商設(shè)計(jì)出緊跟智能手機(jī)飛速發(fā)展步伐的車載信息娛樂系統(tǒng)及應(yīng)用，也可以協(xié)助他們管理建設(shè)這些系統(tǒng)的成本。他們還能控制甚至減少開發(fā)這些信息娛樂系統(tǒng)的成本，如圖。5.展示型頭腦風(fēng)暴

團(tuán)隊(duì)成員列舉關(guān)注最多的兩個(gè)H5設(shè)計(jì)類型，并說明關(guān)注的原因？

_____________________________________________________________________

_____________________________________________________________________H5的設(shè)計(jì)H5的內(nèi)容設(shè)計(jì)在現(xiàn)如今的營銷環(huán)境下，企業(yè)品牌開展線上營銷活動(dòng)的形式越來越多樣化，都熱衷于通過有趣的表達(dá)形式向用戶傳遞品牌價(jià)值。而現(xiàn)如今火熱的H5頁面就具備趣味性的形式，H5頁面的體量輕便型、內(nèi)容多樣化、玩法趣味性等多種優(yōu)點(diǎn)，讓企業(yè)可以通過從用戶、內(nèi)容、技術(shù)等多個(gè)方面進(jìn)行營銷活動(dòng)創(chuàng)意設(shè)計(jì)。但是企業(yè)在開展H5營銷活動(dòng)時(shí)，想要有好的創(chuàng)意點(diǎn)也不是那么容易的。H5的展示設(shè)計(jì)隨著移動(dòng)技術(shù)的持續(xù)提升與發(fā)展，移動(dòng)端頁面的展示形式也有一定的創(chuàng)新，這一點(diǎn)在H5頁面上尤其顯著，不同形式的H5頁面能夠給用戶帶來不同的視覺體驗(yàn)，企業(yè)進(jìn)行H5制作的時(shí)候，可以根據(jù)自己的實(shí)際需求選擇H5頁面的展示形式全景H5頁面制作M全景H5頁面，絕大多數(shù)制作方法和一般的H5制作一樣，一般全景頁面的情況、內(nèi)容都非常豐富，為了更好地協(xié)助用戶識(shí)別合理原素，大家必須根據(jù)注重動(dòng)畫再加上一些顯著的指示標(biāo)志，正確引導(dǎo)用戶單擊閱讀，例如閃動(dòng)、擺動(dòng)、轉(zhuǎn)動(dòng)這些H5的制作工具模板制作類H5工具模板制作類H5工具是一種軟件或在線平臺(tái)，旨在幫助用戶快速創(chuàng)建具有交互性的H5頁面。這些工具提供了各種預(yù)先設(shè)計(jì)好的模板，涵蓋了不同主題和風(fēng)格，用戶可以根據(jù)自己的需求選擇合適的模板進(jìn)行個(gè)性化編輯。常見的基礎(chǔ)類H5工具主要有:易企秀、MAKA、初頁、兔展、人人秀等，以上H5工具均面向普通用戶提供一定的使用模板，用戶可自定義模板和使用免費(fèi)模板的基礎(chǔ)上創(chuàng)建幻燈片，對文字、圖片等進(jìn)行編輯，此類工具優(yōu)點(diǎn)在于提供的模板量大，用戶易于操作，動(dòng)畫類型也相對簡單，交互性有待加強(qiáng)。常見H5工具有