H5 技術(shù)開發(fā)指南 —— 不怕沒有技術(shù)團(tuán)隊(duì)，不怕沒有預(yù)算
或許你常常有這樣的困惑：腦海中有無數(shù)個(gè) big idea 飄蕩，一到具體執(zhí)行卻“捉襟見肘”，因?yàn)檎覀€(gè)靠譜供應(yīng)商實(shí)在很難，而且預(yù)算真的有限......
來源：Social Talent（微信號：SocialTalent）
作者：Social Talent Circle @ 陳建峰
本文將和大家分享H5未來發(fā)展的幾點(diǎn)思考，并重點(diǎn)介紹在沒有技術(shù)團(tuán)隊(duì)和低預(yù)算的情況下，如何利用設(shè)計(jì)工具實(shí)踐自己的內(nèi)容創(chuàng)意，無需編程來設(shè)計(jì)H5交互場景應(yīng)用。
微信等社交超級app的崛起、帶來了內(nèi)容創(chuàng)意營銷的黃金時(shí)代
國內(nèi)以微信為代表的超級App的崛起，帶來了數(shù)億的活躍用戶，解決了內(nèi)容的傳播通路，通過內(nèi)嵌瀏覽器內(nèi)核，用戶只需點(diǎn)擊一個(gè)鏈接，無需在移動(dòng)端輸入網(wǎng)址便可快速訪問內(nèi)容頁面，極大提高了用戶獲取內(nèi)容的便捷性。
由于社交化傳播的特點(diǎn)，內(nèi)容營銷的地位和價(jià)值提到前所未有的高度，海量的傳播不僅僅屬于有充足推廣預(yù)算的大機(jī)構(gòu)所獨(dú)享，一款優(yōu)質(zhì)的內(nèi)容，在低成本下同樣能得到讀者的大量轉(zhuǎn)發(fā)，帶來可觀的傳播效應(yīng)。去中心化的社交傳播特性，帶來了內(nèi)容創(chuàng)意營銷的黃金時(shí)代，為眾多創(chuàng)意策劃群體帶來施展拳腳的機(jī)會(huì)。
Html5 將成為內(nèi)容的重要載體
Html5經(jīng)過8年的演進(jìn)，終于于2014年年底正式發(fā)布標(biāo)準(zhǔn)，未來各大瀏覽器內(nèi)核將會(huì)逐步支持H5標(biāo)準(zhǔn)，解決了H5頁面渲染的統(tǒng)一性。
就像W3C首領(lǐng)JeffJaffe表示的那樣：“HTML5代表著下一代的網(wǎng)頁元素。就在不久之前，用戶還在瀏覽靜態(tài)網(wǎng)頁，而如今的網(wǎng)頁卻如此豐富。現(xiàn)在，所有人都可以使用最新的穩(wěn)定標(biāo)準(zhǔn)來創(chuàng)造元素，并且可以應(yīng)用在所有瀏覽器中。如果我們無法做到這一點(diǎn)，我們就無法做到統(tǒng)一網(wǎng)頁標(biāo)準(zhǔn)?！?/span>
H5具有豐富的表現(xiàn)力及跨端能力，雖然體驗(yàn)與原生app還有差距，隨著騰訊于2014年年底開放了X5瀏覽器內(nèi)核，優(yōu)化了webkit的H5渲染，同時(shí)，微信開放了JsSDK，使H5頁面可以輕松調(diào)用微信app原生的功能，大大豐富了H5的交互體驗(yàn)，目前，眾多的機(jī)構(gòu)已將H5做為內(nèi)容呈現(xiàn)及服務(wù)導(dǎo)入的標(biāo)準(zhǔn)方式，移動(dòng)互聯(lián)網(wǎng)時(shí)代，H5已替代flash，成為富媒體內(nèi)容的重要載體。
H5場景應(yīng)用，將會(huì)成為連接傳播、互動(dòng)、服務(wù)的界面
超級APP+H5場景應(yīng)用，將成為未來移動(dòng)互聯(lián)網(wǎng)的主要形態(tài)，隨著微信等社交平臺的越發(fā)成熟與開放，內(nèi)容將不僅僅是靜態(tài)的形式，結(jié)合超級APP的接口與流量，H5將呈現(xiàn)出更多的用戶互動(dòng)功能特征，在傳播、互動(dòng)的同時(shí)，借助APP的高級接口，H5不僅僅做為導(dǎo)流的媒介，還可以直接在H5輕應(yīng)用里完成卡券、訂單、支付等服務(wù)功能，借助微信wifi、iBeacon，H5還可以方便的和線下服務(wù)結(jié)合，H5場景應(yīng)用，將會(huì)成為連接傳播、互動(dòng)、服務(wù)的界面。
內(nèi)容營銷，創(chuàng)意為王，創(chuàng)意不該被技術(shù)捆綁
一年前，要實(shí)現(xiàn)一個(gè)簡單的H5場景應(yīng)用，還不是件輕松地事，涉及到前端動(dòng)效及交互開發(fā)、微信接口開發(fā)、服務(wù)端開發(fā)，現(xiàn)在，大量的優(yōu)秀H5場景應(yīng)用快速推出，這與H5開發(fā)團(tuán)隊(duì)的逐漸成熟以及多款H5可視化設(shè)計(jì)工具推出有直接的關(guān)系。
如何不用開發(fā)、不受技術(shù)限制，低成本完成優(yōu)質(zhì)的H5場景應(yīng)用，是眾多創(chuàng)意設(shè)計(jì)機(jī)構(gòu)所期盼的，這個(gè)目標(biāo)，已經(jīng)不遠(yuǎn)。
綜合來講，完成一款H5場景應(yīng)用的交付，基本上有以下兩種實(shí)現(xiàn)方式：
交給專業(yè)開發(fā)團(tuán)隊(duì)
如果你不差錢，擁有自己的開發(fā)團(tuán)隊(duì)或者有靠譜的外包伙伴，那你可以擁有極大的自由度盡情發(fā)揮你的創(chuàng)意，隨著近年來技術(shù)的發(fā)展，也有些成熟的開源開發(fā)框架可以來提升開發(fā)效率，比如CreatJs、GreenSock、Zepto.js、ScrollMagic等。
目前高預(yù)算H5場景應(yīng)用很多采用定制開發(fā)這種模式。
優(yōu)點(diǎn)：高自由度定制、最優(yōu)的代碼運(yùn)行效率。
缺點(diǎn)：開發(fā)周期長，高昂的人員成本、溝通成本，如果是外包，還會(huì)帶來較高的管理成本。
選用 H5 設(shè)計(jì)工具
能擁有技術(shù)團(tuán)隊(duì)的營銷策劃機(jī)構(gòu)畢竟是少數(shù)，大量的H5內(nèi)容也沒有充足的預(yù)算來進(jìn)行技術(shù)外包，不過隨著H5的火爆，許多技術(shù)團(tuán)隊(duì)開發(fā)了H5設(shè)計(jì)工具來降低開發(fā)門檻，實(shí)現(xiàn)無需編程，可視化設(shè)計(jì)H5交互場景應(yīng)用，這無疑是對預(yù)算有限、沒有開發(fā)團(tuán)隊(duì)的機(jī)構(gòu)是件好事，大部分的H5場景應(yīng)用，完全可以選擇設(shè)計(jì)工具完成交付。
優(yōu)點(diǎn)：低成本、周期短、可由設(shè)計(jì)師獨(dú)立完成交付，溝通成本低、改版快。
缺點(diǎn)：自由度受限，不能完全達(dá)到編代碼的自由度、代碼有冗余，運(yùn)行效率降低，不過隨著工具產(chǎn)品的發(fā)展以及手機(jī)性能的提升，這些逐漸會(huì)得到改善。
市面上已有很多優(yōu)秀的H5設(shè)計(jì)工具，策劃設(shè)計(jì)機(jī)構(gòu)完全可以根據(jù)自身的創(chuàng)意需求選擇合適的H5設(shè)計(jì)工具，來降低開發(fā)、實(shí)施成本。
下面從 H5 場景應(yīng)用的四個(gè)層級來提供選擇建議：
1、動(dòng)態(tài)展示
展示級的 H 5場景應(yīng)用是目前用的最多的類型，主要實(shí)現(xiàn)動(dòng)態(tài)的內(nèi)容展示，類似于PPT的動(dòng)態(tài)效果，目前此類的產(chǎn)品已有很多選擇，比如MAKA、易企秀、初頁、兔展等，已有大量的機(jī)構(gòu)采用此類工具進(jìn)行H5場景應(yīng)用設(shè)計(jì)，學(xué)習(xí)成本低，可快速實(shí)現(xiàn)。
對于動(dòng)畫要求較高的創(chuàng)意需求，如果需要設(shè)計(jì)組合動(dòng)畫、支持序列動(dòng)畫（比如大眾點(diǎn)評的“我們之間就一個(gè)字”）、支持動(dòng)畫時(shí)間序列管理，可以選擇 Epub360、AdobeEdge、Hype 等，這些軟件偏向于設(shè)計(jì)師專業(yè)群體，需要些學(xué)習(xí)成本 。
展示類 H5 一般以設(shè)計(jì)和文案為重中之重，動(dòng)態(tài)效果服務(wù)于內(nèi)容。制作難度不大，一個(gè)比較簡便的方法就是先做好靜態(tài)設(shè)計(jì)，之后再考慮畫面元素的動(dòng)態(tài)展示。以下推薦兩個(gè)用在線編輯平臺做的H5，通過大量序列動(dòng)畫的應(yīng)用，可以做到不遜色于高級 H5 定制的水平：
2、交互式動(dòng)畫
交互級的 H5 場景應(yīng)用除了支持動(dòng)畫外，還需要支持手勢觸發(fā)和設(shè)備觸發(fā)行為（搖一搖、重力感應(yīng)等），此類的 H5 場景需求逐漸增長，一款 H5 場景應(yīng)用可以將內(nèi)容進(jìn)行層級組織，通過用戶的觸發(fā)行為進(jìn)行內(nèi)容的交互呈現(xiàn)，同時(shí)通過觸發(fā)反饋來增強(qiáng)用戶的交互體驗(yàn)。目前支持觸發(fā)器功能，能實(shí)現(xiàn)交互級的設(shè)計(jì)工具主要有epub360、adobeEdge、Hype等。
交互式動(dòng)畫典型的代表就是游戲，通過動(dòng)作觸發(fā)、參數(shù)變量設(shè)置、邏輯判斷和記憶存儲實(shí)現(xiàn)復(fù)雜的交互。以下推薦的案例是一款推理游戲，綜合運(yùn)用了動(dòng)作觸發(fā)、序列動(dòng)畫、參數(shù)、擦除、判斷、記憶儲存等功能。零開發(fā)。
3、互動(dòng) & 用戶參與
互動(dòng)級的 H5，需要支持用戶的參與、提升游戲性，讀者不僅僅只是內(nèi)容的閱讀者和轉(zhuǎn)發(fā)者，還能夠參與內(nèi)容的個(gè)性化修改，形成讀者自己的內(nèi)容，滿足讀者的社交需求，完成此類的 H5 場景應(yīng)用，以往基本上都需要開發(fā)團(tuán)隊(duì)介入了，如今類似 Epub360 這樣的平臺已支持靈活的參數(shù)變量以及計(jì)時(shí)器功能，甚至微信拍照、錄音等高級接口也已經(jīng)實(shí)現(xiàn)零代碼編寫的用戶界面操作。
以下中國好歌曲的案例就用到了拍照功能，用戶可以選擇自己的照片與好歌曲的導(dǎo)師合影：
從以上案例我們可以看到H5技術(shù)發(fā)展的迅速，一年前復(fù)雜的開發(fā)如今已經(jīng)可以通過在線編輯器來實(shí)現(xiàn)，一方面為企業(yè)節(jié)省了成本，另一方面，因?yàn)槌杀镜?、周期短的特征，使得品牌?chuàng)意的大量產(chǎn)出和實(shí)施成為可能。
2015，注定是內(nèi)容營銷的黃金時(shí)代，“沒有開發(fā)團(tuán)隊(duì)、預(yù)算不足”，這已經(jīng)不是逃離這個(gè)黃金時(shí)代的理由。如果你對自身的創(chuàng)意設(shè)計(jì)有足夠的信心，那就行動(dòng)起來，技術(shù)已不是創(chuàng)意的壁壘，或許，下一款刷爆朋友圈的內(nèi)容，就是你的創(chuàng)意杰作。
轉(zhuǎn)載請?jiān)谖恼麻_頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺授權(quán)，侵權(quán)必究。
評論
評論
推薦評論
全部評論（1條）