那些刷屏的H5，到底是怎麼做出來的？

在日常的工作中

我們總是會接觸到H5

小到招聘廣告

大到百萬級的營銷活動

都離不開H5的身影

可H5到底是什麼？

可能大多數人都說不清楚

H5到底是什麼？

關於H5，有很多種解讀，在百度上搜索關鍵詞「H5是什麼」，得到的答案五花八門，有的回答H5是HTML5、移動PPT、網頁版APP等等，一連串的回答讓人摸不著頭腦，根本搞不清哪個答案才是正確的。

百度搜索到的部分H5解釋

之所以H5的概念如此複雜，其實是因為很多人是站在行業的角度去解讀，比如說:程序員就會H5就是HTML5的不規範寫法；互聯網設計師會認為H5是移動版PPT/ APP；而我們普通用戶經常在微信中打開H5， 便會覺得H5就是微信的炫酷「小頁面」，可以說H5與這些概念都相關，但又與它們都不相同，其實，H5就是「手機版網頁」，它包含了HTML5、移動版PPT/APP/Minisite等所有的延伸概念。

H5與這些概念都相關，但又與它們都不相同

H5是怎麼火起來的？

但是從2014年起，H5這項還不太成熟的技術就逐步走俏，成為各大互聯網公司的營銷寵兒，各種各樣的新玩法，頻頻刷爆朋友圈。

營銷類H5頁面案例

新聞類H5頁面案例

遊戲類H5頁面案例

應用類H5頁面案例

內容更豐富，體驗更多樣，更節約製作時間和製作成本，再加上其極強的傳播效果，註定了H5在企業當中的重要地位，招聘市場上隨便一搜H5設計師的招聘信息，薪水簡直高到爆。

招聘網站截圖

從招聘信息當中可以看出，隨著H5技術的迭代升級，已不在局限於視覺和動效這些表層的內容了，真正具有價值的是對廣告本身營銷性的打造，與視覺相結合的深層技巧。

H5設計要求

H5應該跟誰學？

縱觀市面上的H5案例，雖然也有比較全面的解析，但仍舊不夠徹底，大多是淺嘗輒止，以至於大多數的設計師對於H5的理解成了「套模板完事」。直到蘇杭的這本書面世，才算是真正的解決了H5這個難題。

再開啟這本書之前，先一起來了解了解作者，看看這本書是否有那麼厲害。

蘇杭，設計從業8年多，站酷650W 粉絲的人氣推薦設計師，熟悉國內H5領域的朋友應該也對他不陌生，國內第一本H5設計圖書《H5 移動營銷設計寶典》就是蘇杭編著的。

《H5 移動營銷設計寶典》

在2017年站酷CUBE被全場推薦

在H5領域的傑出成績，也讓蘇杭受到各大公司的邀約，曾為騰訊、天貓、中國電信、海航集團等眾多知名企業定製H5項目。

2015年，蘇杭老師受邀到百度MUX總部做H5線下分享

隨著第一本書籍的出版，讓蘇杭老師看到了大批讀者的反饋，也逐漸意識到光靠一本書是不夠系統性地去學習H5的， 為了能讓更多剛步入該領域的H5設計師和非專業領域的朋友學習。

蘇杭老師足足用了近2年的時間，編寫了這本《H5 營銷設計手冊：創意、視覺、實戰》，一本專門為初學H5的讀者創作的H5基礎書。

書籍封面實拍

H5要學哪些知識？

說一千道一萬，不如一起來看看，本書的全部內容以設計方法和實戰案例為主要介紹對象，對理論的講述也基本圍繞製作展開，解決了只懂理論不知操作的問題。

教學視頻的部分PPT截圖

書中還以二維碼形式植入了大量的動態輔助內容，包括行業文章、動態演示、聲效演示、H5案例演示和全套的教學視頻，只為讀者更好的學習體驗。

本書的配套網站酷5網（如上圖）

全書內容共分十一章，由淺及深，確保每個知識點都能看懂，每個實戰案例都能學會。

首先，一起來重新認識H5

先從概念上搞明白H5到底是什麼，現階段的應用領域，在設計上的展現形式，所扮演的角色。

書籍內頁實拍

第二章：了解H5設計的工具和規範

一個優秀的獵人打獵之前一定會磨好自己的劍，一個好的設計師也一樣得明白自己需要的工具，否則你談不上優秀。

書籍內頁實拍

第三章：高質量素材的獲取

素材整合想必都不陌生吧，不管從事哪一行，這都是每個設計師應該具備的素質條件。想要設計出好看的作品，這個必須收藏。

書籍內頁實拍

第四章:H5的策劃技巧

俗話說：「知己知彼，百戰不殆」，要的就是掌握用戶的習慣，抓住用戶的心理，有針對性的進行創作。

書籍內頁實拍

第五章：頁面設計技巧

人有五官，視覺為先，顏值的重要性，就不多說了吧……

書籍內頁實拍

第六章：元素與文字設計技巧

一個好的版式設計，更能抓住用戶的眼球，持續跟你互動，沒有人願意看混亂不堪的頁面。

書籍內頁實拍

第七章：動態設計技巧

H5特有的動態效果，是傳統設計所不具備的，H5設計的動態頁面展現，更能滿足用戶。

書籍內頁實拍

第八章：音效設計技巧

人類五官是相通的，在H5設計中視覺聽覺常常是一起出場，因而更具備感染力。

書籍內頁實拍

第九章：H5數據分析測試

用戶會騙人，市場會騙人，數據不會，這句話不是沒有道理的，H5投放效果如何，一定要用數據說話。

書籍內頁實拍

第十章：H5設計案例全流程實戰

好的作品皆來源於無數次的實踐，跟著案例做一個完整的H5，復盤整個學習成果。

書籍內頁實拍

第十一章：H5的進階學習

當有一天你掌握了基本的H5製作，總會需要向更高級的H5進發，如何尋找方向，這裡告訴你。

書籍內頁實拍

可以說，要學習H5的製作，這一本一定不能錯過，不管你是設計行業的老人，還是各領域的職場從業人員，亦或者是需要學習H5創作的初學者或H5製作的愛好者，相信這本書一定能找到你要的答案！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！