新人想要入场视频类H5 设计？你需要了解这些

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

网络成本的降低促使承担推广作用的 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. 文学/编剧

《微电影剧本创作教程》《你能写出好故事》《你的剧本逊毙了》《故事》 《救猫咪-电影编剧宝典》

最后，想要找到能触动用户的话题切入点，对生活的好奇心以及敏锐的观察力，都是必不可少需要锻炼养成的习惯。看书之后的付诸实践，尝试去创作，才能真正有所获得。

欢迎关注作者的微信公众号：「未知素设计」

「H5页面实战案例」

• 《H5玩法知多少？腾讯超多实战案例让你大开眼界！》
• 《让H5不止于自嗨！打造一款百万级传播HTML 5的技巧（附案例）》
• 《火遍QQ空间的「拾光」H5，是如何从零开始打造的？》
• 《刷爆网络的「薛之谦憋大招H5」，设计师是这么做出来的！》

================明星栏目推荐================

优优教程网： UiiiUiii.com 是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。

设计导航：国内人气最高的设计网址导航，设计师必备： https://www.muzisucai.com/