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

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

H5是什麼

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

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

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

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

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

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

H5的開發流程

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

H5原型具有因素

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

H5的使用場景

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

設計排版

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

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

強焦點排版

散焦點排版

聲效設計

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

聲效若是不注重細節，乾巴巴的拼上去效果會差不少，能夠參考一下「多普勒」效應，掃描二維碼對比一下。

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

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

動效設計

咱們應該很熟悉貝塞爾函數了，它是怎麼與真實世界創建關係的？

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

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

文案

文案用「用戶體驗」的維度來思考，把咱們想說的變成他們想看的。

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

敘事節奏

敘述節奏，優秀的做品都有一個從敘述到收尾的一個過程，不過節奏的張弛大體都有必定的規律可循，咱們先看差勁的節奏，不能吸引着用戶走到最後。

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

交互設計

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

作好本身的「小事」

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

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

這是書中摘錄的一句話，咱們前端也是相當重要的一換，要有責任感。

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

附件與聯繫方式

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

若是涉及到版權問題請及時與我聯繫（nihaojob@163.com）。