網絡成本的降低促使承擔推廣作用的 H5 越來越多的使用視頻呈現的形式，但邁過初期朋友圈視頻給用戶帶來巨大新鮮感的時代之后，想要繼續通過視頻類 H5 爭奪用戶注意力，變得越來越難。

饒是如此，在過去半年中亦是涌現了《番茄炒蛋》《Julia系列》等視頻的現象級刷屏，繼而帶來巨大的推廣紅利。

該文將通過三個方面向你介紹新人如何入場做一個推廣類 H5 視頻：

• 第一基本流程，視頻類與其他普通 H5 的不同在哪里？如何進行規劃？
• 第二客觀元素，有哪些細節是視頻 H5 這個形式需要考慮的交互體驗？
• 第三主觀元素，什么讓用戶看下去并分享，需要培養的能力層有哪些？

一、基本流程

視頻類與其他普通 H5 的不同在哪里？又應該如何進行規劃？

1. 需求文檔畫風清奇

產品 Demo？不存在的。

至于需求文檔么，很可能是這樣的：

體會一下：

所以第一步，深度剖析需求。在這個過程中，需要得到：

• 業務預期：業務目標/業務規劃/核心資源。
• 話題洞察：受眾圈層/圈層場景/圈層訴求。
• 設計目標：綜合業務訴求和用戶心理洞察得出設計目標。

2. 主題腦暴 + 建立共識

有了目標之后就可以進行腦暴或者推演了。

△ 來源于微信公眾號：根叔雷吼根

在這個腦暴中，你需要得到：

• 一個主題（給用戶傳達什么、中心焦點是什么）
• 一個主題的表達方向（手法是什么，利用用戶的什么情緒，埋入了什么分享因子）
• 一個該方向的效果說明（它的調性是什么效果，是什么畫面感）

這個提案同時需要各方相關人員認同甚至用戶測試通過再往下走，直到達到概念共享為止，不能達成共識的概念都是耍流氓，切莫自 high。

3. 除了畫稿子還要寫東西

等終于確定了方案，進入了落地時間，你還可能面臨的一個問題：

交互：「這好像一個視頻啊……」

需求方：「什么好像！一開始就是啊，有什么問題嗎？」

交互：「視頻的交互原型怎么畫？」

需求方：「emmmmm，要不直接進視覺？」

視覺設計師：

交互：「是哦，沒有劇本，演員也沒法演嘛，呵呵呵呵」

對，接下來就是劇本創作。劇本腳本包括以下內容：大綱、劇情、臺詞、腳本、分鏡……

不會寫劇本？答案很簡單：學。

怎么學？答案很簡單：抄！噢不，是先從臨摹開始。

• Step1：找至少一個你看好的符合你方案調性的有借鑒意義的，簡單說就是可以臨摹的對象。然后復盤寫出它的整體大綱。
• Step2：逐步、逐秒、逐幀地寫出它的詳細劇本，包括但不限于：臺詞、轉場、音樂、情緒、表情等。
• Step3：分析其重點、轉折、梗、意圖等。

此處 Po 還原 PAPI 醬臺詞還原，僅供參考：

這時候，你可能就開始對劇本和視頻把控開始有概念了，可以開始嘗試了。對于沒有太多文字功底的同學，千萬不要急功近利。做不到那種下筆如有神的大牛，就老實從大綱到鋪梗再到細節。注意焦點的集中，不要過于沉迷小片段，因噎廢食。

4. 做情感化設計

最后，寫完了劇本，一定要有清晰的認知，你不是寫一個小說，這是一個推廣廣告，你要對用戶體驗負責，還要對需求方負責。

• 把控基礎的用戶體驗。
• 心理上用戶心流引導，關注用戶觀看腦電波圖的變化。
• 流量變現的引導，最終的走向是可以導入賣貨的。

總結以上，做一個視頻類 H5 流程如何，應該如何規劃呢？

• 需求整理——剖析業務預期、洞察話題切入點、確定設計目標。
• 確定主題——通過不限于腦暴的方式，確定能達到設計目標的故事主題、方向、效果。
• 交互腳本——包括大綱、劇本、腳本分鏡等。
• 交互把控——從情感化設計的角度，一個完成 H5 流程體驗規劃。

二、客觀元素

做為 H5 視頻的體驗問題，有以下10條因素是做視頻需要考慮的基礎建設。

1. loading

Loading 界面的趣味性，影響用戶的初始留存和觀看心態。并控制 loading 時間，研究表明超過5秒則會流失75%的用戶。

2. 視頻點擊引導

H5 視頻往往不能直接播放，而是需要點擊播放，此時對播放點擊的引導做得好有助于沉靜式體驗。

3. 視頻長度

根據騰訊體驗部門2017年對視頻類 H5 的研究結果呈現：「對于視頻小于100秒和大于100秒的末屏平均觸達率，分別為39%和6%。視頻小于100秒用戶停留時長接近視頻時長。」從中可以看出用戶對視頻時長的一個普遍心理接受范圍。

4. 聲音開關功能

用戶打開 H5 的場景比較多樣，聲音功能保障了在不合適場合下，打開后有合理的處理方式。

5. 跳過功能

做得輕量的「跳過」功能，讓用戶感受到可以掌控感，給予給用戶選擇的權利。并在用戶二次拜訪能更快觸及引流功能。

6. 重播功能

需要考慮用戶對你的視頻是否有再看一遍的需求，根據這個分析結果得到「重播」的需求必要性。

7. 引流功能

視頻所服務的對象，是要承擔引流需求的，按優先級考慮并可以根據劇情給出不同的話術及利益引導。

8. 分享功能

視頻如沒有外推渠道，最終傳播需要靠用戶自分享，分享按鈕作為最終的推動力，可以根據劇情給出不同的話術及利益引導。

9. 視頻大小

雖然 wifi 網絡普及，但用流量觀看視頻的情況不在少數。視頻的大小關系到網絡加載時間及用戶流量耗費，需要在畫質保障的情況下謹慎壓縮。

10. 視頻交互

最后考慮作為一個視頻 H5，而不是一個 TVC 廣告，用戶是可以從一個觀眾轉變為參與者的，作為設計者可以做更多的不同交互嘗試。

三、主觀元素

主題定了，劇本寫了，但是能不能讓用戶看下去，能不能讓用戶分享，這些涉及的主觀因素分享因子、社交貨幣等非常重要。要討論這些問題，內容龐雜，本文定位為視頻新入場，所以暫不做詳細解讀，提供如下推薦書單，與你共勉。

1. 市場營銷

《市場營銷原理》《定位》《場景革命》《瘋傳》《引爆點》《一個廣告人的自白》《超級符號就是超級創意》《異類》

2. 大眾心理學/行為學

《烏合之眾烏合之眾-大眾心理研究》《游戲化思維》《影響力》《社會性動物》

3. 文學/編劇

《微電影劇本創作教程》《你能寫出好故事》《你的劇本遜斃了》《故事》 《救貓咪-電影編劇寶典》

最后，想要找到能觸動用戶的話題切入點，對生活的好奇心以及敏銳的觀察力，都是必不可少需要鍛煉養成的習慣?？磿蟮母吨T實踐，嘗試去創作，才能真正有所獲得。

歡迎關注作者的微信公眾號：「未知素設計」

「H5頁面實戰案例」

• 《H5玩法知多少？騰訊超多實戰案例讓你大開眼界！》
• 《讓H5不止于自嗨！打造一款百萬級傳播HTML 5的技巧（附案例）》
• 《火遍QQ空間的「拾光」H5，是如何從零開始打造的？》
• 《刷爆網絡的「薛之謙憋大招H5」，設計師是這么做出來的！》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com