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