不只是看客——浅谈交互式视频设计

标签: CDC上海 交互设计 视频设计 | 发表时间:2012-07-03 13:56 | 作者:CDCer
出处:http://cdc.tencent.com

  最近红辣椒乐队( The Red Hot Chili Peppers )推出了新单曲  Look Around ,让作为交互设计师的我爱上加爱的是他们给这支单曲制作了交互版的 MV !这个交互式视频在演艺界和科技界都引起了不小反响,相信未来有更多的艺人会采用互动视频的方法来提升歌迷的参与度!

  观看地址:  http://redhotchilipeppers.com/videos/47-look-around-interactive

 

  拖动鼠标,可以选择观看 4 个乐队成员在不同场景里的表演,通过点击房间里的家具,还能观看乐队成员拍摄 MV 时的现场照片。据说有歌迷为了看到 4 个人的完整表演和所有图集,前后看了 6 遍……

  其实,交互式视频概念的出现已经有些年头了,但是交互的方式各不相同。不断创新的交互体验完美迎合了大众对新鲜感的贪婪追求,对于这样一个活力四射的交互媒介,有必要对其研究一下。

 

1. 何为交互式视频?

  交互式视频,是指通过各种技术手段,将交互体验融入到线性的视频的新型视频。它的风靡起源于 2005 年,随着当时宽带接入速度的提升和多媒体播放技术的成熟(主要是 flash ),交互式视频越来越多。最初主要是由广告商赞助的广告视频,借用各种新奇的交互方式来吸引人们点击观看,增加产品的曝光度,可以认为是病毒营销一种。发展到如今,已经诞生了各种专门设计制作交互式视频的公司,甚至个人也可以很方便的在 YouTube 上制作交互式视频。

 

2. 交互式视频的种类

  交互式视频可以大致分为 3 类:

第一类:可定制式

  这一类的互动视频(指交互式视频,下同)允许用户在观看时调整一些视频的变量元素,但是视频本身仍然是线性的,这使得每个人看到的视频都一样,又都不一样。开头所提到的 Look Around 交互版 MV 就是这一类的代表(音乐视频不会随着用户点击而改变段落,它一直播放着,只是每个人看到的房间不同)。最基础的体验是在视频观看时,鼠标移到某物件上能显示该物件信息的 tag ,这招最常见的就是被用作服装导购。

 

第二类:会话式

  指用户可以类似会话的方式直接参与改变视频的顺序甚至结果,视频可以不再是线性的了,视频的设计者准备好多个结局和段落,让观看者自行选择。举个例子,假设 Windows 是一段视频,那它就是会话式的,我们与 Windows 的交互都是通过会话窗口进行的。

 

第三类:探索式

  顾名思义,探索式的互动视频一般只提供很少提示(甚至不提示),让用户在视频中自行摸索可交互的点和交互方式。这类视频一般会采用现实生活中的场景(让人更容易产生代入感),在用户操作前,会一直循环播放场景,直到用户发现了交互点,才会继续。

 

3. 交互式视频的实现工具与案例

工具 1 : YouTube

 

  YouTube 上已经诞生了不少商业的与非商业的交互式视频,基本都属于会话式交互。得益于 YouTube 强大的在线视频编辑功能,设计者可以在视频中加入带有超链接的注释,在视频的播放过程中,先根据剧情内容设计好注释出现的时间,再在观看者选择时链接到相应的视频,就大功告成了,非常简单,效果可以很赞。

(关于注释的操作:  http://www.youtube.com/t/annotations_about  

  一个利用注释制作交互式视屏的案例: http://www.youtube.com/watch?v=m3MT59zc6Ms ,实则是心理咨询中心的广告

 

工具 2 : Flash

  Flash 相信大家都很熟悉, Flash 视频嵌入技术据说在 HTML5 淫威下已经日渐没落了,但是所谓“瘦死的骆驼比马大”, Flash 在交互式视频方面几乎占据了 100% 的市场份额,这归功于它极强的拓展性,多平台的兼容性,制作的简易和灵活性。( YouTube 的视频编辑器使用的也是 FLash技术 )

  这里向大家推荐的是宅男(目测)设计师 Olivier Otten 设计的多达 22 个 Flash 交互式视频片段。全部都是探索性互动视频,很有乐趣。也许糅合其中几个点子,就能制作出一段完整的交互式视频了。

http://www.selfcontrolfreak.com/    

 

工具 3 : Creative coding

  软件工程师可以拯救世界,这句话不是随便说说的。万能的 Coding 能实现各种令人意想不到的互动效果。最近工程师 PetrosVrellis 用 openFrameworks (一种开源的 C++Toolkit )实现了一段互动版的梵高名作《星空》( Starry Night ),效果很震惊,令我五体投地。视频中的演示是在触摸屏幕上运行的,很期待最终能它能以 App 的形式出现供大家欣赏把玩。

  观赏地址:  http://v.youku.com/v_show/id_XMzUxMzcxMDc2.html

 

  关于这段技术的实现, Petros介绍到 : “我开发了一个能生成“流动”效果的算法,约有 8 万个点能随之运动速度场不是由电脑自动生成的,我不得不手动设置,要做到恰到好处非常困难…我在 1920 × 1080 的分辨率下获得了每秒 30 帧的画面,用的是 intel i5-2500K 的 CPU 以及 geforce GTX560 的显卡多点触控跟踪借助了 ofxKinect 和 ofxOpenCV 背景音乐花了很多心血,也有不少的运气成分” (翻译 by36 氪)

 

工具 4 :混合式

  混合式也就是将以上所有提到的方法和类型自由组合进行创作的方法了,这常常能获得 1+1>2 的效果。

  YouTube 上非常有名的一段广告“猎人与熊”( A hunter ___a bear )就是采用了定制式结合会话式, YouTube 注释再加 Flash 动画的手法。

     http://www.youtube.com/watch?v=4ba1BqJ4S2M

 

 

  还有更高科技的, 360 °全景体验式互动视频,类似视频版的街景地图,让人有种掉进了邓布利多的冥想盆的感觉,有木有?

  体验地址: http://im360.immersivemedia.com/watch/im360/

  该网站还制作了 iOS 版应用,下载体验地址:  http://itunes.apple.com/us/app/nimmo-bay-360/id476439088?mt=8

 

4 .交互式视频的钱前景

  正如文章开头所说,最早的交互式视频来自广告创意,所以商业市场上的应用前景自然是大大的看好。事实证明用户很买这类互动体验的账,投资方经常能做到小成本大产出,相比传统媒体,它更容易将观众转化成你的顾客。

 

  在美国,已经兴起了一批专业制作交互式视频的公司,在这里提供给大家学习参考,他们的客户中不乏知名电视台,全球五百强和顶级奢侈品公司。

http://www.videoclix.tv  
http://www.clikthrough.com/
http://www.wirewax.com/

  由于各种众所周知的原因,国内在线视频行业尚未达到如此发达的地步。但是以互联网发展的经验来看,中国市场对交互式视频制作的需求将会逐步提升,期待各界的创意工作者、设计师、工程师们的发力。

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=5770)

相关 [视频 设计] 推荐:

流式视频处理架构设计

- - IT瘾-dev
在LiveVideoStack线上交流分享中,新浪微博视频平台架构师曾诚分享了微博大规模视频处理如何应对多业务场景,大流量,高并发的挑战. 包括利用工作流式计算引擎实现场景动态配置,以及采用流式上传协议SVE来解决大流量高并发的问题等内容. 整理 / LiveVideoStack. 大家好,我叫曾诚,来自新浪微博视频平台.

不只是看客——浅谈交互式视频设计

- - 腾讯CDC
  最近红辣椒乐队( The Red Hot Chili Peppers )推出了新单曲 . Look Around ,让作为交互设计师的我爱上加爱的是他们给这支单曲制作了交互版的 MV . 这个交互式视频在演艺界和科技界都引起了不小反响,相信未来有更多的艺人会采用互动视频的方法来提升歌迷的参与度.

设计师不容错过的十个TED视频

- - Jackchen Design 1984
TED于1984年由理查德·温曼和哈里·马克思共同创办,从1990年开始每年在美国加州的蒙特利举办一次,而如今,在世界的其他城市也会每半年举办一次. 它邀请世界上的思想领袖与实干家来分享他们最热衷从事的事业. “TED”由“科技”、“娱乐”以及“设计”三个英文单词首字母组成,这三个广泛的领域共同塑造着我们的未来.

vivo 短视频推荐去重服务的设计实践

- - 掘金 架构
vivo短视频在视频推荐时需要对用户已经看过的视频进行过滤去重,避免给用户重复推荐同一个视频影响体验. 在一次推荐请求处理流程中,会基于用户兴趣进行视频召回,大约召回2000~10000条不等的视频,然后进行视频去重,过滤用户已经看过的视频,仅保留用户未观看过的视频进行排序,选取得分高的视频下发给用户.

谷歌通过视频展示 Gmail 新设计,易用性更强

- 牛牛 - Engadget 中国版
看到这个截图你是否发现,好像在上一个版本的预览中有所见过. 其中很多元素在今年 7 月份的时候我们就看到,这次进行了改进. Google 的一段 Youtube 视频展示了新的 Gmail 界面,虽然很快被撤下,不过我们保留了视频副本. 新的快速对话界面更像即时聊天工具,附带了头像显示;同时高级搜索显示的位置更直观,使用更加方便,你只需要在搜索表单中填入相应搜索要素就可以完成高级搜索.

宅视频:裸

- 小鱼儿 - 宅映像
明天公司组织去贵州走红路,唱红歌,一去就是三天,所以这三天俺估计就没法发博客了,等我被红歌洗脑后回来再给大家继续胸奴吧. 今天要给大家推荐的是一段视频,名字叫《裸》是不是很带感,至于内容,大家看了就知道了. 这段关于女优和AV的故事片是不是相当泪流满面(坑爹啊. 里面竟然没有我们想要的AV镜头,这才真是让我泪流满面).

视频拍立得

- Jing - 设计|生活|发现新鲜
视频拍立得,像经典的Polaroid相机一样,按下快门拍摄一段美好时光,就可以即刻吐出一张可以播放动态视频的“照片”,与亲朋好友一起分享. 这种视频照片包含触摸显示屏、存储单元和微型电池,在摄影完成后的瞬间将数据写入电子相片的存储器. 这听起来很像是哈利波特里魔法城堡里的报纸,但是得益于今日发展迅速的显像技术和超薄电池,也许不久的将来我们就能在市场上看到它.

hold住姐视频

- xiaocaochong - 无聊哦
在2011年8月9日的《大学生了没》中,一位名叫miss lin的网友以夸张另类的造型、一口做作的英语、扭捏妖娆的姿态向大学生们介绍什么是Fashion. 其极度夸张搞笑的表演震撼了所有观众,miss lin的口头禅是“整个场面我要Hold住”. 因此得名“hold住姐”或“hold姐”而蹿红网络.

视频:Xoom2 vs iPad2

- - The Leying's Blog
iPad2是平板电脑的标杆,所以我们看到任何厂家的平板上市后首先就会浮想起一个问题:“这玩意和iPad2相比如何. ”于是乎,新上市的Xoom2还是和iPad2走到了一起,青梅煮酒,坐而论道. 评测来自国外媒体,对比内容包括两者的设计,系统,速度,摄像等方面.   不过作为平板,你也许更希望了解两者在网页浏览上的详细区别,那么下面这个视频会告诉你答案,虽然Xoom2屏幕看上去很花,但那是拍摄因素,与机器无关.