一個前端工程師最近迷上了營銷類的H5頁面，被五花八門的H5頁面迷的眼花繚亂，興趣使然，于是買了一本《H5 營銷設計指南》，看完以后對營銷類的H5頁面有了更深的理解，感覺很實在，所以參考讀書筆記整理成PPT分享給出來。

H5是什么

我們聽到太多的H5的消息，尤其是前端工程師，更是耳熟能詳，但是H5真的是我們理解的H5嗎？他有哪些我們不知道的知識點嗎？

有的說是HTML5的簡寫形式，有的說是微信網站專用的形式，有的說是移動APP等等，其實H5是中國本土化的一個稱呼，他就好像中國的“腎6、腎7”一樣，如果翻譯成英文，老外估計也是一臉懵，

這句話是從搜狐可以的一個頻道里摘錄的（不一定是官方），大概講解了在中國，H5的移動營銷領域也走進了世界前列。

我們在這里引入一個概念，超媒體。“超媒體”是超級媒體的縮寫。超媒體是一種采用非線性網狀結構對塊狀多媒體信息（包括文本、圖像、視頻等）進行組織和管理的技術。

H5的迅猛發展離不開這四個因素的支持。

當H5和超媒體在移動端畫上等號的時候，我們對設計師也就提出了更高的要求：“綜合感官能力”

H5的開發流程

H5的開發流程和普通的網站開發流程基本類似，不過需要著重介紹一下數據統計這方面，為了更好的跟進營銷方案，就需要通過數據進行分析，做出更好的調整和經驗積累，PV：點擊量，UV：獨立用戶訪問量這幾個名詞。

H5原型具備因素

H5的原型要具備的因素，視覺、動效、節奏、音效、交互、可實施性 視覺是指我們的視覺風格，海報類？60年代風格？動效、聲效與交互形式的結合，加上好的敘事節奏以及切實可行的實施方案才能支撐起一個H5原型。

H5的使用場景

H5頁面不太適合深度的閱讀，大部分使用場景是在地鐵上、電梯里、等上菜的時間等等

設計排版

移動端設計寸土寸金，所以要盡量主題明確，頁面數量也要控制在5-8頁面，不要讓用戶產生疲勞。

這里引申一個視覺排版的概念，一級信息、二級信息、三級信息，是有優先級的。

強焦點排版

散焦點排版

聲效設計

聲音設計的重要性，讓我們不禁想起卓別林反對有聲電影的故事。

聲效如果不注重細節，干巴巴的拼上去效果會差很多，可以參考一下“多普勒”效應，掃描二維碼對比一下。

這個格式的文件會更小，但是兼容性并不理想，

關于聲效設計的一些知識點匯總，參考學習。

動效設計

我們應該很熟悉貝塞爾函數了，它是怎么與真實世界建立關系的？

動效設計不是怎么炫怎么來的，簡單說幾個原則，不要讓動效阻礙用戶的注意力，不要讓動效搶走用戶的注意力，轉場時間要快，動效強度要有優先級。

關于動效設計的一些知識點匯總，參考學習。

文案

文案用“用戶體驗”的維度來思考，把我們想說的變成他們想看的。

文案參考資料：《X型文案與Y型文案》

敘事節奏

敘述節奏，優秀的作品都有一個從敘述到收尾的一個過程，不過節奏的張弛大致都有一定的規律可循，我們先看差勁的節奏，不能吸引著用戶走到最后。

這樣的敘事節奏，會緊緊的抓住用戶的胃口，跟隨者內容的布局，一直走到最后收尾，不會讓用戶感到單調乏味。

交互設計

更多的人機交互方式，就看我們如何設計、如何結合起來了，“好的形式，實際上就是舊元素的新組合”，更何況這幾年的交互方式更豐富。

做好自己的“小事”

圖片就展示不出來了，可以下載附件查看，會有一些工匠精神的共鳴。

設計師應該有自己的情感，這是天職，是設計師的價值。

這是書中摘錄的一句話，我們前端也是至關重要的一換，要有責任感。

我只是知識的搬運工，如果有錯誤還請斧正，共同進步。

附件與聯系方式

最后附上keynote文件和導出的一份.PPT格式的文件百度網盤鏈接 和 書摘與讀后感，方便大家參考學習。

如果涉及到版權問題請及時與我聯系（nihaojob@163.com）。

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的《H5 移动营销设计指南》 读书笔记整理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。