• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 新人想要入场视频类H5 设计?你需要了解这些

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

作者:未知素设计 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含H5,H5页面,HTML5,html5教程,交互设计,广告设计,短视频,经验分享等相关知识,未知素设计希望在学习及工作中可以帮助到您

网络成本的降低促使承担推广作用的 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等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 腾讯实战案例!设计师如何从零开始做一款H5?
  • 腾讯最新设计神器,可以一键智能生成H5!
  • 工作复盘:从四大角色带你了解H5制作流程
  • 腾讯出品!你离高效制作动画只差这一篇文章的距离
  • 新人想要入场视频类H5 设计?你需要了解这些
  • 腾讯设计师:极速适配 iPhone X 的技巧揭秘!
  • H5页面如何适配iPhone X ?腾讯设计师给出了通用解决方案!

相关文章

  • 2018-08-23每次看到这些不禁感叹!手绘好的妹子真的可以为所欲为…
  • 2018-08-23刚毕业没作品?学会做UI 概念设计方案,也能打动面试官!
  • 2018-08-23你设计的图标,能顺利通过图标的可用性测试吗?
  • 2018-08-23都是好图片,为什么你拿来用就怪怪的?
  • 2018-08-23豆瓣9.4!Netflix这部汇集顶级设计师的纪录片,简直拍成了美剧的级别
  • 2017-08-06前端开发中一些常用技巧总结
  • 2018-08-23全民K歌歌房是如何设计出来的?让腾讯的体验设计师告诉你
  • 2018-08-23新鲜出炉!五个超方便的Sketch 48 新功能介绍
  • 2018-08-23配色和字体都很棒,但为什么界面看着不高级?
  • 2018-08-23超全面!设计师必须了解的美术基础

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 网易高手:角色权限设计的100种解法
    • 前端开发者的工具、库和资源
    • 浅色还是深色?教你选择合适的界面配色方案!
    • 16个优点告诉你,为什么表单设计应该用这个方法?
    • 设计实战!为扁平风的移动端赛车游戏定制插画
    • AI+AE教程!教你制作可爱的BB-8机器人小动画
    • 漫山遍野的多边形元素,正在入侵每一份设计稿
    • Bootstrap3.0学习笔记之表格相关
    • 那些能力差的设计师,都喜欢说这10句话
    • 腾讯内部分享!一个工作坊的完整设计流程剧透

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有