《H5+移動營銷設計指南》 讀書筆記整理

一個前端工程師最近迷上了營銷類的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）。