對(duì)于H5這個(gè)名詞大家可能已經(jīng)很熟悉了，筆者對(duì)于這個(gè)詞真是又愛又恨，愛的是html5終于被大家接受并如此的重視，恨的是怎么可以把html5簡(jiǎn)稱做H5呢，那些這么去簡(jiǎn)稱的人知道html5真正的意義嗎，知道html是什么東西嗎，作為一直關(guān)注html5的技術(shù)狗，筆者實(shí)在不能接受這樣的簡(jiǎn)稱，html5本身就是簡(jiǎn)寫了，還要弄出個(gè)H5來，不倫不類!(以上純屬個(gè)人情感宣泄，如果傷害到某些人，筆者不表示道歉)
本篇原文作者就是些的h5,內(nèi)容還是不錯(cuò)的，忍不住與大家分享，但我必須給HTML5 正名。
然而這不是偶然，而是趨勢(shì)。在具體介紹HTML5 營(yíng)銷之前，我想和大家分享一份eMarketer的數(shù)據(jù)，其中顯示了2012年-2018年品牌在不同媒體渠道的預(yù)算比重：
相比電視、雜志、戶外廣告等傳統(tǒng)媒體呈逐年下降的趨勢(shì)，品牌營(yíng)銷在數(shù)字和移動(dòng)方面的投入在逐年上升。而且，在所有渠道預(yù)算中移動(dòng)技術(shù)的投入增長(zhǎng)最快，遠(yuǎn)遠(yuǎn)高于其他渠道的增長(zhǎng)。當(dāng)然，這樣的結(jié)論你應(yīng)該不會(huì)感到驚訝，因?yàn)槲覀冊(cè)缫蚜?xí)慣了24小時(shí)手機(jī)陪伴的生活，而品牌最關(guān)注的就是消費(fèi)者“在哪”的問題。
據(jù)美國(guó)的調(diào)查數(shù)據(jù)顯示，我們每天要查看手機(jī)150次，44%的人睡覺都把手機(jī)放在身邊，9%的美國(guó)人承認(rèn)他們?cè)诤龠輹r(shí)使用手機(jī)……毫無疑問，手機(jī)是有史以來最強(qiáng)大的媒介，從早上醒來到臨睡前的一秒，這個(gè)幾英寸的屏幕都在和我們“交流”。
顯然，移動(dòng)營(yíng)銷已是大勢(shì)所趨，我們可以看到已經(jīng)廣泛應(yīng)用的簽到、二維碼技術(shù)，正在興起的iBeacon、微信的Wifi連接，還有就是本文將與大家分享的HTML5 技術(shù)。文章有點(diǎn)長(zhǎng)，可能需要費(fèi)些時(shí)間閱讀，全文包括：HTML5 技術(shù)簡(jiǎn)介及其特性，怎么實(shí)現(xiàn)、有哪些應(yīng)用場(chǎng)景，以及如何推廣等內(nèi)容。
Part 1 什么是HTML5 ？
經(jīng)常有朋友找我咨詢HTML5 的問題，但是在和他們溝通的過程中，我發(fā)現(xiàn)很多人對(duì)HTML5 的理解都是停留在用戶層面，邀請(qǐng)函、小游戲、品牌展示、抽獎(jiǎng)等等。其實(shí)如果上升到營(yíng)銷層面的話，僅在用戶層面去思考是遠(yuǎn)遠(yuǎn)不夠的，因?yàn)槿魏蝹鞑ザ家紤]有效性的問題，如果100w pv帶來的只是刷屏效果，而對(duì)品牌帶不來任何有效轉(zhuǎn)化，這樣的傳播顯然是不成功的。
對(duì)于事物的理解，如果不能從多個(gè)角度去分析，我們很難跳出原有的思考框架去看問題。因此，這篇文章我想以更原始的角度，從H5這項(xiàng)技術(shù)本身為出發(fā)點(diǎn)去闡述；事實(shí)上互聯(lián)網(wǎng)技術(shù)的發(fā)展本質(zhì)上也是需求驅(qū)動(dòng)的，程序語言其實(shí)是高于應(yīng)用層面的產(chǎn)品。以下的內(nèi)容希望不會(huì)太晦澀，也希望能對(duì)你有所啟發(fā)。
簡(jiǎn)單來說，HTML5 就是一種高級(jí)網(wǎng)頁技術(shù)，我們平時(shí)看到那些邀請(qǐng)函、小游戲都是HTML5 網(wǎng)頁，確切來說叫HTML 5（國(guó)外目前沒有H5的叫法），它跟我們平時(shí)上網(wǎng)看到的那些網(wǎng)頁本質(zhì)上沒有任何區(qū)別，只不過大家普遍接受的那個(gè)網(wǎng)頁技術(shù)版本是HTML4，而這個(gè)版本是在1997年發(fā)布的。
什么是HTML，我這里簡(jiǎn)單解釋一下——想象一下兩個(gè)計(jì)算機(jī)在溝通的場(chǎng)景，A如果要把一個(gè)圖文信息傳給B的時(shí)候，交流過程中B肯定會(huì)產(chǎn)生這樣的問題：你給了我那么多信息，哪些是網(wǎng)頁標(biāo)題、哪些是正文、哪些又是圖片呢？于是，A和B商量了一個(gè)辦法，用一些符號(hào)來標(biāo)記不同類型的內(nèi)容，而這些標(biāo)記的一整套規(guī)范就是HTML。
比如當(dāng)A要把圖文的標(biāo)題傳給B的時(shí)候，最終給B的表達(dá)是這樣的：
品牌HTML5 營(yíng)銷完全實(shí)戰(zhàn)指南</titile><br />如果設(shè)計(jì)HTML語言的人是中國(guó)人，那表達(dá)就會(huì)是這樣的：<br /><標(biāo)題 始>品牌HTML5 營(yíng)銷完全實(shí)戰(zhàn)指南<標(biāo)題 終><br />所以大家可以看到，HTML 其實(shí)是一項(xiàng)非常人性化的發(fā)明。關(guān)于HTML技術(shù)的詳解有興趣的讀者可以自行查閱，這里我主要跟大家介紹幾個(gè)營(yíng)銷人應(yīng)該關(guān)注的HTML5 特性，它能讓你對(duì)HTML5 能做成什么樣有個(gè)根本的認(rèn)識(shí)。<br />No.1 繪圖功能（Canvas、SVG）<br />這是H5一個(gè)非常重要的特性，你在很多H5中看到的動(dòng)畫效果就是用H5的繪圖功能做的，比較典型的例子是STC風(fēng)云榜分享的可口可樂的例子，有興趣可以點(diǎn)擊最后的“閱讀原文”看一下。<br />為了方便理解，你可以將HTML5 的繪圖功能類比為Flash，但是唯一的決定性區(qū)別是，F(xiàn)lash做出來的動(dòng)畫無法在移動(dòng)端的瀏覽器中瀏覽，因?yàn)锳dobe早已在2012年就停止了對(duì)移動(dòng)端flash的開發(fā)。毫無疑問，未來的移動(dòng)網(wǎng)頁游戲和動(dòng)畫會(huì)是HTML5 的天下。<br />從技術(shù)實(shí)現(xiàn)的角度，HTML5 配合JS（一種程序語言）可以做出任何二維動(dòng)畫，并且因?yàn)槭蔷W(wǎng)頁元素，所有元素均可以監(jiān)測(cè)到用戶點(diǎn)擊的數(shù)據(jù)，也就是說你可以知道用戶在HTML5 動(dòng)畫網(wǎng)頁中的所有交互行為。但是，具體到實(shí)際應(yīng)用，我們就要考慮周期、成本，和用戶體驗(yàn)的問題，復(fù)雜的動(dòng)畫相應(yīng)的制作周期和成本會(huì)提高，同時(shí)也有可能影響加載速度等用戶體驗(yàn)相關(guān)的問題。<br />以下這個(gè)網(wǎng)站是HTML5 繪圖功能的典型例子，非常強(qiáng)大。你可以選擇不同型號(hào)的毛筆、筆觸半徑以及墨水的顏色，整個(gè)繪圖過程非常順暢，而且還有一個(gè)模擬手握毛筆的人性化設(shè)計(jì)。<br />No.2 三維效果（css3 3D）<br />H5的華麗效果離不開一種叫CSS的技術(shù)，形象的說，如果把HTML5比作漫畫的素描稿，CSS就是上色用的，相當(dāng)于word界面上方的格式工具欄，如果沒有CSS我們看到的HTML5 網(wǎng)頁就只能以“素顏”見人了。如果你熟悉互聯(lián)網(wǎng)技術(shù)的命名規(guī)則你應(yīng)該能知道css3就是CSS的升級(jí)版本。<br />在css3中有個(gè)非?？岬墓δ苁侨S渲染，也就說HTML5 中能做出3D動(dòng)畫甚至3D游戲。目前我們看到的H5中css3 3D的應(yīng)用較少，這個(gè)也許會(huì)是下一個(gè)營(yíng)銷類HTML5 應(yīng)用的熱點(diǎn)，建議大家持續(xù)關(guān)注。<br />下面這兩個(gè)網(wǎng)頁游戲就是用HTML5 +css3 3D做的，第一個(gè)是俄羅斯方塊的3D版，想象一下在三維的空間里玩俄羅斯方塊是什么感覺，喜歡挑戰(zhàn)空間想象力的朋友可以試一下；第二個(gè)游戲是3D版坦克大戰(zhàn)，非常精致耐玩的游戲，一句話評(píng)價(jià)就是“根本停不下來”。<br /><p>No.3 離線存儲(chǔ)（HTML5 Web Storage）</p><br />HTML5 的另一個(gè)重要特性就是離線存儲(chǔ)，它能將用戶的資源文件保存在本地，這樣在頁面加載的時(shí)候網(wǎng)頁能使用本地資源，從而實(shí)現(xiàn)離線狀態(tài)下訪問網(wǎng)頁應(yīng)用。舉個(gè)例子，通過離線存儲(chǔ)，你可以在沒有網(wǎng)絡(luò)的情況下閱讀公眾號(hào)的文章（當(dāng)然這只是技術(shù)上可行，微信目前沒有此功能）。<br />當(dāng)然離線存儲(chǔ)能容納的數(shù)據(jù)量是有限制，跟瀏覽器有關(guān)，目前Chrome支持5M。大家或多或少都知道cookie這個(gè)東西，它也是記錄用戶瀏覽數(shù)據(jù)的，比如百度那些根據(jù)你的搜索習(xí)慣給你推薦的廣告就是這種技術(shù)實(shí)現(xiàn)的，不過它的容量是4k。<br />技術(shù)細(xì)節(jié)大家可以忽略，但是關(guān)于離線存儲(chǔ)這個(gè)功能，大家可以發(fā)揮想象——假設(shè)離線存儲(chǔ)的容量是100個(gè)G甚至更多，瀏覽器就變成了一個(gè)超級(jí)應(yīng)用入口，所有網(wǎng)頁應(yīng)用都具備離線存儲(chǔ)和在線瀏覽的功能，這時(shí)候在線Office、在線記事本甚至在線PhotoShop都可以實(shí)現(xiàn)，我們的電腦只需要裝一個(gè)程序——瀏覽器。在這個(gè)假設(shè)中，瀏覽器將干掉Windows，一切用戶操作都在云端進(jìn)行！稍微有點(diǎn)難理解，大家可以仔細(xì)體會(huì)。<br />以下是運(yùn)用離線存儲(chǔ)的一個(gè)例子，這個(gè)提供在線便簽功能的網(wǎng)站無論有沒有網(wǎng)絡(luò)都可以訪問，并且你記錄的所有便簽都會(huì)保存下來，很實(shí)用的網(wǎng)站，有興趣可以試一下。<br />科普先告一段落，雖然HTML5 有很多特性，但因?yàn)槠邢?，本文只能介紹跟營(yíng)銷有關(guān)的內(nèi)容，其他的特性很多是程序猿的事，如果大家反饋還要了解更多，我可以再寫一篇具體介紹。<br />Part 2 HTML5 能怎么玩？<br />在了解完H5的一些基礎(chǔ)知識(shí)后，相信大家最關(guān)心的還是應(yīng)用層面的問題——H5能做什么，有哪些玩法？接下來我將列舉一些典型的例子和大家探討：<br />幻燈片式玩法<br />以下這個(gè)特斯拉的例子相信很多人都看過，精美的圖片設(shè)計(jì)+簡(jiǎn)單的翻頁效果，在我的印象中大概3、4月份看到特斯拉這個(gè)HTML5 的時(shí)候，大家還不知道原來微信營(yíng)銷可以這么玩，記得那時(shí)候我們看到之后就在一周內(nèi)做了一個(gè)類似的HTML5 ，用于STC的品牌展示。當(dāng)然，在這之后HTML5 就千樹萬樹梨花開了。<br />這是H5最早期也是最典型的玩法，因?yàn)楹?jiǎn)單、實(shí)用，所以至今還很流行。其效果就是簡(jiǎn)單的圖片展示&翻頁交互，最終整體的表現(xiàn)很像幻燈片展示。<br />其實(shí)幻燈片式的HTML5 現(xiàn)在已經(jīng)出現(xiàn)了很多在線制作軟件供大家使用，所以制作成本在現(xiàn)在看來幾乎是等于零的，而在之前這樣一個(gè)應(yīng)用的開發(fā)可能要將近一萬（再一次見證了互聯(lián)網(wǎng)思維的破壞力）。當(dāng)然啦，這對(duì)于品牌主來說是一個(gè)好事，因?yàn)楹芏鄷r(shí)候這種簡(jiǎn)單的展示已經(jīng)能滿足需求了，不需要花不必要的錢。<br />★ 應(yīng)用場(chǎng)景<br />由于制作簡(jiǎn)單，周期短，這種HTML5 展現(xiàn)形式適用于頻繁、小型的需求。用在線編輯器的話，不需要任何開發(fā)，你只需要要配備一名設(shè)計(jì)和文案。<br />總結(jié)得不全，幻燈片式HTML5 可能有以下的應(yīng)用場(chǎng)景：<br />1、定期發(fā)布的內(nèi)容，幾乎零預(yù)算。這些內(nèi)容相對(duì)而言比較常規(guī)，但是有時(shí)微信圖文又無法達(dá)到理想的效果，通過H5的形式會(huì)更易于傳播，當(dāng)然前提是要有好的設(shè)計(jì)。比如數(shù)據(jù)報(bào)告、頻繁上線的新產(chǎn)品或功能、小型線下活動(dòng)邀請(qǐng)、活動(dòng)相冊(cè)等等。<br />2、結(jié)合熱點(diǎn)的營(yíng)銷，周期極短。這種情況下，時(shí)效性是非常重要的，如果開發(fā)一個(gè)HTML5 用了半個(gè)月，熱點(diǎn)想必也結(jié)冰了。所以，應(yīng)該以最快的速度推出才是明智的選擇，而這時(shí)候引起廣泛傳播的關(guān)鍵就在于文案和設(shè)計(jì)。<br />此外，大家不要輕視這種短頻快的傳播，有時(shí)候它要比很多大投入的傳播來得有效。沒有人能完全掌握受眾的興趣點(diǎn)，所以一次大投入的傳播不一定就能出效果，但是多次熱點(diǎn)傳播出效果的概率從統(tǒng)計(jì)學(xué)的角度也要高一些。如上文所述，我們可以實(shí)現(xiàn)用戶在HTML5 中所有交互行為的監(jiān)測(cè)，因此，如果短頻快的傳播能配合有效的數(shù)據(jù)監(jiān)測(cè)，便可以進(jìn)行持續(xù)優(yōu)化，降低不確定性。<br />交互式動(dòng)畫<br />可口可樂這個(gè)案例在之前的風(fēng)云榜中推薦過，是運(yùn)用HTML5 繪圖功能的典型例子。當(dāng)然這里面的交互還是比較簡(jiǎn)單的，只不過它基本體現(xiàn)了交互式動(dòng)畫的感覺。整個(gè)可口可樂的時(shí)間軸是隨著用戶向上滑動(dòng)頁面“繪制”出來的。<br />其實(shí)除了這種敘事型的HTML5 動(dòng)畫，我們能看到的大多數(shù)HTML5 游戲也都都屬于這一類，比如神經(jīng)貓、打企鵝、2048等等。最近也有一個(gè)比較火的HTML5 游戲叫“財(cái)務(wù)包子鋪”，在這個(gè)游戲中用戶扮演包子鋪的創(chuàng)業(yè)老板，在事業(yè)發(fā)展的不同階段做出經(jīng)營(yíng)決策，最終登上人生巔峰。雖然游戲中植入了赤裸裸的產(chǎn)品推廣（知乎的一本新書），但最后還是取得了3天破300萬PV的成績(jī)。<br />這些類型各異的HTML5 應(yīng)用，本質(zhì)上都是基于H5的動(dòng)畫技術(shù)做的。它們所涉及的相關(guān)動(dòng)畫技術(shù)主要有HTML5 的Canvas/SVG，以及JS、css3，目前大部分HTML5 的動(dòng)畫效果還是用JS實(shí)現(xiàn)的，實(shí)現(xiàn)的效果類似PPT中的動(dòng)畫功能，只能實(shí)現(xiàn)元素的平移、旋轉(zhuǎn)、隱現(xiàn)等等。事實(shí)上通過JS+Canvas/SVG+css3可以實(shí)現(xiàn)非常復(fù)雜的交互式動(dòng)畫，最直觀的就是HTML5 游戲，比如神經(jīng)貓，還有上文提到的3D版坦克大戰(zhàn)。<br />那么，HTML5 到底能實(shí)現(xiàn)什么樣的動(dòng)畫效果呢？我想這應(yīng)該是大家在做HTML5 時(shí)最頭疼的問題，因?yàn)椴恢滥茏龀墒裁礃樱阋簿筒恢缽暮蜗率帧Ｋ韵旅嫖医o大家介紹一個(gè)網(wǎng)站：http://fff.cmiscm.com/，在這個(gè)網(wǎng)站中，你幾乎能看到所有HTML5 能夠?qū)崿F(xiàn)的動(dòng)畫效果，下次如果需要做HTML5 的時(shí)候就可以跟開發(fā)說“你看，就是這個(gè)效果”。<br />以下是該網(wǎng)站上幾個(gè)示例的截圖：<br />抓綿羊：你可以在奔跑的羊群中隨意抓取并放到任意位置<br />種樹：在屏幕任意地方點(diǎn)擊都會(huì)在相應(yīng)的地方種一顆樹，你可以看到樹的生長(zhǎng)過程。<br />3D罐頭：css3 3D的好展示，你可以看到三維罐頭的任意角度<br />照片處理：你可以把照片藝術(shù)化，圖示為處理過程截圖<br />★ 應(yīng)用場(chǎng)景<br />交互式動(dòng)畫類型的HTML5 制作周期和成本比較高，需要提前規(guī)劃。除了創(chuàng)意、文案、設(shè)計(jì)這些以外，開發(fā)周期較長(zhǎng)，優(yōu)質(zhì)的HTML5 大約在兩周到4周左右，也有可能更長(zhǎng)。<br />這種類型的HTML5 要找靠譜的供應(yīng)商，因?yàn)閺?fù)雜交互做出來的效果，在用戶看來只有好和垃圾兩種層次，所以慎重。當(dāng)然如果你自己要花血本自建團(tuán)隊(duì)也不是不行——產(chǎn)品經(jīng)理、設(shè)計(jì)師、前端工程師、PHP工程師（涉及表單、登錄、評(píng)論等元素的時(shí)候需要），各一枚就夠了。<br />以下是總結(jié)的應(yīng)用場(chǎng)景：<br />1、中小型活動(dòng)/品牌事件的傳播，預(yù)算不多、周期較短。這種情況一般就是某些新品發(fā)布、企業(yè)招聘、公關(guān)事件、中型會(huì)議等的傳播。此時(shí)你需要權(quán)衡周期和成本的因素。<br />一般來說一周以內(nèi)的時(shí)間不太可能做出優(yōu)質(zhì)的HTML5 ，這時(shí)候你可能要考慮幻燈片式的簡(jiǎn)易開發(fā)或者參考已有的作品，然后著重從設(shè)計(jì)和文案上下功夫。如果有一到兩周的時(shí)間可以嘗試做一些輕交互的HTML5 ，除了常見的那些平移、縮放、淡入淡出的動(dòng)效以外，在這里我比較建議大家嘗試一下css3 3D的效果，這是一個(gè)趨勢(shì)，當(dāng)然成本也會(huì)相應(yīng)的上升一個(gè)量級(jí)。<br />2、大型活動(dòng)/品牌事件的傳播，預(yù)算充足、計(jì)劃性強(qiáng)、周期較長(zhǎng)。一般大家看到的那些美輪美奐并且極具傳播性的HTML5 基本上都屬于這一類，比如上文提到的可口可樂“分享快樂128年”，以及我們之前分享過的潘婷“一封來自1947年的明信片”。像這一類在美學(xué)、交互和故事性上都表現(xiàn)突出的案例，都不是一兩周的功夫能做出來的，不計(jì)算創(chuàng)意、設(shè)計(jì)和文案的時(shí)間，光是開發(fā)和調(diào)試也要小一個(gè)月。<br />因此大家看到好的作品要理性看待，不能覺得很?；蛘呃习逭f好就想著也做一個(gè)，其實(shí)像這種交互與故事一體的應(yīng)用，如果時(shí)間不夠只完成一半，整個(gè)HTML5 基本是沒法用的，也就是所有之前的投入都是無用功。這也是為什么有很多供應(yīng)商無法在指定時(shí)間交付的原因，可能一開始就在做一個(gè)完不成的任務(wù)。<br />功能型 HTML5<br />看一下以下的兩個(gè)例子，第一個(gè)是百度針對(duì)地鐵漲價(jià)做的HTML5 ，它可以計(jì)算你每天坐地鐵要多少錢并且實(shí)時(shí)顯示大家的評(píng)論；第二個(gè)是STC的社交移動(dòng)風(fēng)云榜，很簡(jiǎn)單，就是精品HTML5 的展示：<br />這兩個(gè)H5都有一個(gè)特點(diǎn)，除了針對(duì)受眾的熱點(diǎn)內(nèi)容傳播以外，它們很像一個(gè)“供用戶重復(fù)使用”的產(chǎn)品，這就是所謂的功能型H5。其實(shí)大家看到風(fēng)云榜可能會(huì)覺得它只是一個(gè)再簡(jiǎn)單不過的網(wǎng)頁，但如果從它滿足用戶需求并產(chǎn)生重復(fù)“使用”行為的角度，它其實(shí)是一個(gè)產(chǎn)品，事實(shí)上我們從一開始就是把它當(dāng)產(chǎn)品來運(yùn)營(yíng)的，關(guān)注Social Talent的朋友可能會(huì)有所感受——每周更新、定期群發(fā)推薦HTML5 的圖文、欄目更新通知等等。<br />功能型HTML5 的獨(dú)特價(jià)值在于，除了具備傳播性以外，它通過用戶的重復(fù)使用行為使得HTML5 的傳播是一個(gè)持續(xù)不斷的過程，這一點(diǎn)是一般的HTML5 所不具備的。風(fēng)云榜首次發(fā)布時(shí)轉(zhuǎn)發(fā)6w+多，目前每月的訪問量都在10w左右，不算多，但是給我們帶來的流量轉(zhuǎn)化都是精準(zhǔn)的，關(guān)注我們的大多還是從事營(yíng)銷相關(guān)職業(yè)的朋友。<br />個(gè)人覺得web應(yīng)用肯定是未來發(fā)展的方向，就像上文所說的，很有可能未來的操作系統(tǒng)將被瀏覽器所取代，服務(wù)和應(yīng)用將進(jìn)入完全的云世界。當(dāng)然距離這種假設(shè)還比較遠(yuǎn)，但唯一大家可以放心遵守的原則，就是聚焦于用戶需求。<br />我所說的功能型HTML5 ，是同時(shí)聚焦于用戶需求并且注重傳播性的H5輕應(yīng)用，也就是在設(shè)計(jì)HTML5 的時(shí)候除了考慮傳播的問題以外，也要思考如何把它變成一個(gè)持續(xù)運(yùn)營(yíng)的產(chǎn)品。這里面其實(shí)是思考角度的問題，從“我要傳播什么”到“我希望用戶傳播什么”的轉(zhuǎn)變。<br />★ 應(yīng)用場(chǎng)景<br />輕交互重功能的功能型HTML5 制作周期較短、成本也不高，成功的關(guān)鍵不在于酷炫的交互，而在于用戶需求的把握以及后續(xù)的運(yùn)營(yíng)。<br />因此，這一類HTML5 需要的是一名高水平的的產(chǎn)品經(jīng)理，而以設(shè)計(jì)、開發(fā)為輔。功能型HTML5 目前沒有太多成熟的例子，不過我認(rèn)為離線存儲(chǔ)的技術(shù)可能會(huì)是功能型HTML5 的應(yīng)用重點(diǎn)，大家可以關(guān)注一下。<br />以下是總結(jié)的應(yīng)用場(chǎng)景：<br />1、品牌賬號(hào)的粉絲運(yùn)營(yíng)。功能型HTML5 由于具備一定的產(chǎn)品特性，其大的價(jià)值就是提高粉絲活躍度和忠誠(chéng)度。我們需要根據(jù)本身品牌的形象定位以及受眾的特性設(shè)計(jì)功能型HTML5 ，要將品牌或產(chǎn)品的功能性特征抽象到生活方式或者精神追求的層次。<br />舉個(gè)例子，賣洗手液的可以抽象為健康生活方式，設(shè)計(jì)一個(gè)改善生活健康狀態(tài)的功能型HTML5 ；服裝品牌可以抽象為追求時(shí)尚前沿，設(shè)計(jì)一個(gè)定期更新時(shí)尚潮流資訊的功能型HTML5 。事實(shí)上，以粉絲需求為中心的功能型HTML5 將潛移默化的提升品牌影響力，在提升忠誠(chéng)度的同時(shí)帶來持續(xù)的口碑傳播。<br />2、結(jié)合熱點(diǎn)內(nèi)容的品牌傳播。這種類型的傳播是最常見的，但是往往很多結(jié)合熱點(diǎn)的HTML5 傳播都是一次性娛樂消費(fèi)，大家看過就忘了。其實(shí)如果能從用戶需求挖掘和產(chǎn)品運(yùn)營(yíng)的角度去思考，許多針對(duì)熱點(diǎn)的HTML5 傳播都有很大提升的空間。<br />近來大家都喜歡報(bào)道習(xí)大大和彭麻麻的“私生活”或者非正式領(lǐng)導(dǎo)會(huì)晤之類的，如果有人能做一個(gè)類似微博“學(xué)習(xí)粉絲團(tuán)”那樣，定期更新“學(xué)習(xí)資訊”的功能型HTML5 ，想來必火。<br />Part 3 HTML5 如何推廣？<br />實(shí)際上HTML5 可以推廣的渠道有限，不像App的推廣有各類應(yīng)用商店的流量。關(guān)于這個(gè)問題可以說的不多，我僅針對(duì)性的提出幾點(diǎn)建議：<br />1、從用戶角度挖掘HTML5 的價(jià)值點(diǎn)，寫一篇軟文。通過圖文群發(fā)來推廣HTML5 無疑是最重要的方式，但是如果只是簡(jiǎn)單硬性推廣，比如宣布今天創(chuàng)新互聯(lián)上線了一個(gè)高大上云云的HTML5 ，然后就讓用戶點(diǎn)擊“閱讀原文”自己看，顯然這種新聞通稿式的推廣不會(huì)有太好的效果。<br />一個(gè)好的HTML5 一定具備打動(dòng)用戶的價(jià)值點(diǎn)，從一個(gè)角度切入寫一篇軟文，無論通過投稿的方式還是大號(hào)轉(zhuǎn)發(fā)都能給你帶來意想不到的傳播效果。投入再大再精彩的HTML5 ，如果沒有好的推廣就只能孤芳自賞，所以哪怕是留點(diǎn)推廣預(yù)算也是值得的。<br />2、盡你所能利用所有能推廣HTML5 的渠道。目前比較常用的方式：通過公眾號(hào)的圖文群發(fā)推廣、微信群推廣、線下二維碼推廣，以及前面提到的KOL轉(zhuǎn)發(fā)和投稿等。這里主要說一下有關(guān)微信群的幾點(diǎn)建議。<br />首先，你需要列出所有你能用到的資源，并發(fā)動(dòng)內(nèi)部人員轉(zhuǎn)發(fā)，當(dāng)然前提是HTML5 做得很棒。值得注意的一點(diǎn)是，每個(gè)微信群其實(shí)都有自己的定位——工作、生活或者閑聊扯淡，所以為了提升打開率可以適當(dāng)?shù)臑椴煌奈⑿湃憾ㄖ妻D(zhuǎn)發(fā)的文案，比如以上文的STC風(fēng)云榜為例，對(duì)于工作學(xué)習(xí)為主的群可以是“品牌HTML5 做成這樣也是蠻拼的！”，如果是更加生活化的群就可以是“史上最好玩的HTML5 應(yīng)用，根本停不下來”之類的，但是如果H5的調(diào)性實(shí)在和微信群的定位不搭，建議不要造成打擾。<br />3、充分利用“閱讀原文”和自定義菜單。由于微信的限制，圖文中唯一能跳轉(zhuǎn)的鏈接就是“閱讀原文”。關(guān)于如何利用好“閱讀原文”有三點(diǎn)小tips：<br />不要浪費(fèi)每一篇圖文的“閱讀原文”，可能的話對(duì)于每一篇圖文用不同的文案引導(dǎo)點(diǎn)擊；<br />如果你的目的是推廣HTML5 ，不要在閱讀原文的提示之后或者閱讀原文引導(dǎo)和正文之間插播公眾號(hào)的廣告；<br />通過字體或者顏色的視覺跳躍引起讀者的注意，而且不要長(zhǎng)期使用同一個(gè)格式，因?yàn)楫?dāng)用戶習(xí)慣了固定的格式之后會(huì)不自覺的忽略這些內(nèi)容。<br /><p>此外，自定義菜單也是需要充分利用的功能，一般來說新增粉絲都會(huì)瀏覽一遍公眾號(hào)的菜單，根據(jù)我們的數(shù)據(jù)監(jiān)測(cè)，平均每個(gè)菜單項(xiàng)會(huì)有20%的新增粉絲點(diǎn)擊。假如你的賬號(hào)每天能有500個(gè)粉絲增長(zhǎng)，就會(huì)有100個(gè)人以上點(diǎn)擊了菜單的某一項(xiàng)，因?yàn)檫@是持續(xù)進(jìn)行的主動(dòng)行為，由此為HTML5 帶來的瀏覽量可能比圖文群發(fā)還要高。</p><br /><p>關(guān)鍵詞：創(chuàng)新互聯(lián),成都品牌<a ><strong>網(wǎng)站建設(shè)公司</strong></a>,<a ><strong>網(wǎng)站制作</strong>公司</a>,<a ><strong>重慶網(wǎng)站建設(shè)</strong></a>,<a href="http://bm7419.com/"><strong>網(wǎng)站設(shè)計(jì)</strong></a>,網(wǎng)站建設(shè),手機(jī)<a ><strong>網(wǎng)站開發(fā)</strong></a></p> <p>
本文標(biāo)題：<a href="http://bm7419.com/news/170259.html">HTML5品牌營(yíng)銷實(shí)戰(zhàn)指南</a>
<br>
文章源于：<a href="http://bm7419.com/news/170259.html">http://bm7419.com/news/170259.html</a>
</p>
<p>
<a href="http://bm7419.com/" target="_blank">成都網(wǎng)站建設(shè)公司</a>_<a target="_blank">創(chuàng)新互聯(lián)</a>，為您提供<a href="http://bm7419.com/news/yidongjianshe/">移動(dòng)網(wǎng)站建設(shè)</a>、<a href="http://bm7419.com/news/mbxdh/">面包屑導(dǎo)航</a>、<a href="http://bm7419.com/news/keywordsseo/">關(guān)鍵詞優(yōu)化</a>、<a href="http://bm7419.com/news/jingtai/">靜態(tài)網(wǎng)站</a>、<a href="http://bm7419.com/news/xiangyingshi/">響應(yīng)式網(wǎng)站</a>、<a href="http://bm7419.com/news/xiaochengxu/">小程序開發(fā)</a> </p>
<p class="adpic">
<a href="http://bm7419.com/service/ad.html" target="_blank" class="ad">廣告</a>
<a href="" target="_blank" class="adimg"><img src=""></a>
</p>
<p class="copy">
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：
<a href="http://bm7419.com/" target="_blank">創(chuàng)新互聯(lián)</a>
</p>
</div>
<div id="v60sp5b" class="newsmorelb">
<p>猜你還喜歡下面的內(nèi)容</p>
<ul>
<li>
<a href="/news/170254.html">強(qiáng)勢(shì)品牌建立 網(wǎng)站推廣企業(yè)三力闖市場(chǎng)</a>
<span>2022-06-21</span>
</li><li>
<a href="/news/170252.html">原創(chuàng)文章那點(diǎn)事兒，你知嗎？</a>
<span>2022-06-21</span>
</li><li>
<a href="/news/170250.html">字體與排版應(yīng)用指南</a>
<span>2022-06-21</span>
</li><li>
<a href="/news/170248.html">網(wǎng)站優(yōu)化的四種特性</a>
<span>2022-06-21</span>
</li><li>
<a href="/news/170240.html">成都軟件公司報(bào)價(jià)應(yīng)該怎么看</a>
<span>2022-06-21</span>
</li><li>
<a href="/news/170238.html">成都企業(yè)手機(jī)網(wǎng)站有必要制作嗎？</a>
<span>2022-06-21</span>
</li><li>
<a href="/news/170236.html">網(wǎng)站需要備案嗎？</a>
<span>2022-06-21</span>
</li><li>
<a href="/news/170234.html">如何做好手機(jī)網(wǎng)站seo優(yōu)化?</a>
<span>2022-06-21</span>
</li> </ul>
</div>
</div>
<div id="65nvsp6" class="col-lg-3 noneb">
<a href="http://bm7419.com/waimao.html" title="外貿(mào)網(wǎng)站制作" target="_blank"><img src="/upload/news/waimaowangzhanjianshe.png" alt="外貿(mào)網(wǎng)站制作" class="img-responsive"></a>
<div id="rzrdlyq" class="bkright">
<p><a href="http://bm7419.com/news/jianshe/">網(wǎng)站建設(shè)知識(shí)</a></p>
<ul>
<li>
<a class="text_overflow" href="/news/170255.html">Web前端構(gòu)建工具版本號(hào)管理方案思考</a>
<span>2022-06-21</span>
</li><li>
<a class="text_overflow" href="/news/170249.html">選擇網(wǎng)站域名常用哪些技巧?</a>
<span>2022-06-21</span>
</li><li>
<a class="text_overflow" href="/news/170239.html">企業(yè)網(wǎng)站如何防范勒索網(wǎng)站攻擊？</a>
<span>2022-06-21</span>
</li><li>
<a class="text_overflow" href="/news/170237.html">SEO優(yōu)化時(shí)如何準(zhǔn)確把握關(guān)鍵詞密度?</a>
<span>2022-06-21</span>
</li><li>
<a class="text_overflow" href="/news/170235.html">淺談百度蜘蛛IP的意義</a>
<span>2022-06-21</span>
</li><li>
<a class="text_overflow" href="/news/170233.html">慎重的使用向右的指向性符號(hào)</a>
<span>2022-06-21</span>
</li> <li>
<a class="text_overflow" href="/news/170232.html">交互式網(wǎng)頁設(shè)計(jì)之新手入門手冊(cè)</a>
<span>2022-06-21</span>
</li><li>
<a class="text_overflow" href="/news/170231.html">企業(yè)衡量網(wǎng)站SEO優(yōu)化工作成果好壞的標(biāo)準(zhǔn)具體是哪些？</a>
<span>2022-06-21</span>
</li><li>
<a class="text_overflow" href="/news/170230.html">網(wǎng)站推廣企業(yè)實(shí)施品牌戰(zhàn)略，受益良多!</a>
<span>2022-06-21</span>
</li><li>
<a class="text_overflow" href="/news/170229.html">創(chuàng)新互聯(lián)淺談什么是Web</a>
<span>2022-06-21</span>
</li><li>
<a class="text_overflow" href="/news/170228.html">網(wǎng)頁設(shè)計(jì)中7個(gè)令人抓狂的錯(cuò)誤</a>
<span>2022-06-21</span>
</li> </ul>
</div>
<div id="zmuxowe" class="bkright tag">
<p><a href="http://bm7419.com/hangye/" target="_blank">行業(yè)網(wǎng)站建設(shè)</a></p>
<ul>
<li id="cjanfxf" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a href="http://bm7419.com/hangye/sdgz/" target="_blank">水電改造</a>
</li><li id="x15l6xf" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a href="http://bm7419.com/hangye/shipaifang/" target="_blank">石牌坊</a>
</li><li id="5t10kr6" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a href="http://bm7419.com/hangye/weilanhulan/" target="_blank">圍欄護(hù)欄</a>
</li><li id="oldlt6f" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a href="http://bm7419.com/hangye/gaokongche/" target="_blank">高空作業(yè)車租賃</a>
</li><li id="q0x6kwu" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a href="http://bm7419.com/hangye/hntjbg/" target="_blank">混凝土攪拌罐</a>
</li><li id="ig6yusk" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a href="http://bm7419.com/hangye/iso/" target="_blank">iso認(rèn)證</a>
</li><li id="bewi5gy" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a href="http://bm7419.com/hangye/qchs/" target="_blank">報(bào)廢汽車回收</a>
</li><li id="dgd6k6x" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a href="http://bm7419.com/hangye/baiwuyu/" target="_blank">白烏魚</a>
</li> </ul>
</div>
</div>
</div>
<footer>
<div id="zxphyro" class="carousel-inner footjz">
<div id="lo5gtl6" class="container">
<i class="icon iconfont zbw"></i>
高品質(zhì)定制 <i class="icon iconfont"></i>
跨終端自動(dòng)兼容 <i class="icon iconfont"></i>
節(jié)約開發(fā)成本 <i class="icon iconfont"></i>
開發(fā)周期短 <i class="icon iconfont"></i>
一體化服務(wù)
<button type="button" class="btn btn-default btn-lg" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 立即開始2800定制網(wǎng)站建設(shè)</button>
<button type="button" class="btn btn-default btn-xs" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 2800定制網(wǎng)站建設(shè)</button>
</div>
</div>
<div id="omy6zck" class="carousel-inner bqsy">
<div id="tmeqxyw" class="container">
<div id="ibt0ex1" class="lxfs">
<h4 class="yutelnone">028-86922220 13518219792</h4>
<h4 class="yutelblock"><a href="tel:02886922220">028-86922220</a> <a href="tel:13518219792">13518219792</a></h4>
<a class="btn btn-default" href="tencent://message/?uin=532337155&Site=&Menu=yes" role="button">網(wǎng)站建設(shè)<span>QQ</span>：532337155</a>
<a class="btn btn-default" href="tencent://message/?uin=631063699&Site=&Menu=yes" role="button">營(yíng)銷推廣<span>QQ</span>：631063699</a>
<a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=532337155&version=1&src_type=web&web_src=oicqzone.com" role="button">網(wǎng)站制作<span>QQ</span>：532337155</a>
<a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=631063699&version=1&src_type=web&web_src=oicqzone.com" role="button">營(yíng)銷推廣<span>QQ</span>：631063699</a>
<a class="btn btn-default nonea" href="tencent://message/?uin=1683211881&Site=&Menu=yes" role="button">售后QQ：1683211881</a>
<div id="jskwp6l" class="dz">專注：
<a target="_blank">網(wǎng)站設(shè)計(jì)制作</a><a target="_blank">服務(wù)器托管</a><a target="_blank">定制網(wǎng)站建設(shè)</a><a target="_blank">成都網(wǎng)站設(shè)計(jì)</a><a target="_blank">成都制作網(wǎng)站</a> <address>地址：成都太升南路288號(hào)錦天國(guó)際A幢10樓</address>
</div>
</div>
<div id="z0njweg" class="bzdh dz"><img src="../imges/bottom_logo.png" alt="創(chuàng)新互聯(lián)">
<p><a href="http://bm7419.com/menu.html" target="_blank">成都創(chuàng)新互聯(lián)科技有限公司</a><br>
Tel：400-028-6601（7x24h）</p></div>
</div>
</div>
</footer>
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://bm7419.com/" title="曰本AⅤ无码视频一区二区">曰本AⅤ无码视频一区二区</a>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="56krn" class="pl_css_ganrao" style="display: none;"><thead id="56krn"></thead><dl id="56krn"></dl><wbr id="56krn"></wbr><sub id="56krn"><optgroup id="56krn"><td id="56krn"></td></optgroup></sub><nav id="56krn"></nav><bdo id="56krn"><mark id="56krn"><listing id="56krn"></listing></mark></bdo><style id="56krn"><delect id="56krn"></delect></style><nav id="56krn"><center id="56krn"><optgroup id="56krn"><sub id="56krn"></sub></optgroup></center></nav><address id="56krn"></address><dfn id="56krn"></dfn><td id="56krn"></td><strike id="56krn"><th id="56krn"><dl id="56krn"></dl></th></strike><nobr id="56krn"></nobr><samp id="56krn"><tbody id="56krn"><strike id="56krn"></strike></tbody></samp><button id="56krn"><dl id="56krn"></dl></button><div id="56krn"></div><dl id="56krn"></dl><menuitem id="56krn"></menuitem><address id="56krn"></address><option id="56krn"><strike id="56krn"><button id="56krn"><dl id="56krn"></dl></button></strike></option><form id="56krn"></form><div id="56krn"><rp id="56krn"></rp></div><noscript id="56krn"></noscript><strong id="56krn"></strong><small id="56krn"><progress id="56krn"></progress></small><abbr id="56krn"></abbr><kbd id="56krn"><p id="56krn"></p></kbd><delect id="56krn"></delect><del id="56krn"></del><pre id="56krn"><menu id="56krn"><font id="56krn"><strong id="56krn"></strong></font></menu></pre><em id="56krn"></em><samp id="56krn"><i id="56krn"><meter id="56krn"></meter></i></samp><track id="56krn"></track><rt id="56krn"><em id="56krn"><s id="56krn"><b id="56krn"></b></s></em></rt><s id="56krn"></s><tbody id="56krn"></tbody><strong id="56krn"></strong><nav id="56krn"></nav><tr id="56krn"></tr><tr id="56krn"></tr><ul id="56krn"></ul><b id="56krn"></b><abbr id="56krn"><source id="56krn"><noframes id="56krn"><rt id="56krn"></rt></noframes></source></abbr><small id="56krn"><style id="56krn"><delect id="56krn"></delect></style></small><strong id="56krn"><address id="56krn"><nav id="56krn"></nav></address></strong><legend id="56krn"></legend><form id="56krn"></form><dl id="56krn"><button id="56krn"></button></dl><dl id="56krn"><ruby id="56krn"><dl id="56krn"></dl></ruby></dl><source id="56krn"></source></div>
</html>