如何設計刷屏級H5？5招讓你成為大牛！

新媒體管家

公眾賬號對話中回復「設計」

可以獲取今日美丫靈感雞湯

又到了

漲知識的周末啦

（可是小花卻用來睡懶覺）

前幾天

一條H5廣告

猶如龍捲風般

刮入了小花的朋友圈裡

沒看過的朋友

反正做人呢

最重要的是想開點啦

對自己好一點~

這周還有另外一個H5也刷屏了朋友圈

點開觀看以後

每一步的發展方向小花都心裡有數

直到最後

才深覺滿滿的套路

上面兩個本周火爆H5

都是傳播性比較明顯的

能吸引發用戶的

好奇、窺探等心理來傳播

不管是形式上的還是內容上

還是風格上的都是很有創意的

同樣，還有一個互動性的H5

人民日報結合當時的《戰狼2》的熱點

推出了一款互動性H5

通過上傳照片更換軍裝的形式

勾起了人們窺探自己穿軍裝照片的慾望

然後大家紛紛轉發朋友圈

緊跟愛國主題背景下的風潮

一個火爆的H5

它的設計流程非常重要

那麼今天我們告訴大家

設計一個H5需要的

設計要點是哪些？

目前H5在設計方法上

可以籠統地劃分為三大類型

互動廣告派

互聯網設計派

工具執行派

H5的設計部分

只是整個流程中的其中一環

作為設計師的我們

需要了解整個流程，貫穿始終

作為一個好的H5會告訴你

它都經歷了哪些環節？

涉及到哪些因素？

了解需求，選好方向

每一個H5的設計都是建立在具體需求之上的，當你拿到需求是，需要先搞清楚做這個網站的目的是什麼？每個項目追求的目的都不同。

騰訊通過「穿越故宮來看你」這個主題，出品了一支帶有調侃和穿越特徵的古裝說唱類H5。最初的項目訴求才是最後決定作品面貌的關鍵因素。

確定表現形式

H5的表現形式目前已經非常多了，並且還在不斷創新，我們究竟選什麼樣的表現形式好呢？

講故事賣情懷？

強調功能陳述內容？

小遊戲？

這是之前刷爆過朋友圈的吳亦凡系列H5作品，當預算充足時，項目有需要藉助明星效應，我們可以採用拍攝視頻並且製作特效合成的方式來執行項目。

設計風格、表現形式

比如，你選擇了偽裝朋友圈的形式的話，那麼你就要去研究怎麼做出更像朋友圈的頁面，去研究微信內部的UI細節，特彆強調臨摹和還原。

從原型繪製、內容表達、版式設計、文字設計、到最後的動效聲效設計，一個完整的H5不是單純的視覺表現，還結合了聽覺、交互這兩大類。需要我們跳出傳統式固有的設計框架，理解全新的媒介和方法。

開發實現效果圖

很多人對H5製作望而卻步，大多數都是因為卡在這一步，不清楚H5怎麼生成的。其實，主要的方法有兩種：

1、有代碼實現：設計文件打包-->前端工程師開發-->作品上傳服務-上線。

2、無代碼實現：設計文件打包-->上傳-H5設計工具網站-->作品同步在工具伺服器的上線。

不管是上面哪一種，都需要設計師清楚，想要做出的頁面效果，前段工程師才能確定是否能夠實現出來。因此，這一步，溝通最重要。

數據成績單反映設計效果

你設計的創意和作品的表現形式好不好，推廣到不到位，時間點掌握得恰當不恰當...數據的成績單很快就能夠引導你接下來應該怎麼調整戰略和打法。

上面是騰訊出品的H5移動頁面用戶報告，案例中詳細歸納了目前H5網站在數據方面的特徵。

總結H5設計流程，都是小花最近看的一本書《H5+移動營銷設計寶典》裡面的知識內容，以上這些僅僅是這本書其中的一點點點點...書中還有更多內容去介紹：H5設計的規範技巧、設計方法，還有行業里最為優秀的互動團隊的大量優秀案例與一手材料。

同時，還收錄了不同領域與行業的意見，這裡有小團隊、大團隊、小企業、大集團，他們的觀點會幫助你理解和判斷行業究竟會在未來變成什麼樣子。

關於這本書，小花不做其他的介紹，就像序言裡面說的：所有斬釘截鐵的推薦，其實都是主觀偏見的結果，最終讀書獲益的多寡，還是取決於書籍內容本身適不適合你，與其他方面關係有限，更與作者關係有限。先看書的內容，不如先了解作者是誰。

這本書的作者是誰呢？

小呆（蘇杭），設計媒體人，從建立自己的資訊公眾號到走訪全國H5相關團隊和企業，再到組建自己的團隊，他花了兩年時間，寫出了被業內譽為「中國第一本H5設計營銷寶典」的書籍。

其實，你買到的不是一本書，你買到的是一套會自我升級的行業內容庫，它能節約大量學習時間，能讓你更快速獲得知識。

這本書很早之前就在爭取優惠，但無奈，出版社那邊總是在加印，目前已經加印三次，總量10000+啦~我們最終給大家爭取到了七五折包郵哦~

小花推薦的書都是直接由出版社發貨出去的，保證正品！正品！正品！這本書還有三個免單名額！本期免單中獎者收到的將是簽名版哦~

上期《Magical Geometry》三名免單的幸運兒分別是：

1、訂單號: 134****8611 鄭*強（首單）

2、訂單號: 156****1833 王*姍（隨機）

3、訂單號: 152****5315 楊*達（隨機）

請以上三位朋友添加小花WX：nycmg02，進行免單操作~

本期依然從購書粉絲中抽取3名免單

簽名版！

（抽獎規則：首單&隨機）

活動名單會在下期的圖書推薦中公布哦

想要購買的同學

點擊展開全文

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