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

标签: CDC上海 交互设计 视频设计 | 发表时间:2012-07-03 05: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)

相关 [交互 视频 设计] 推荐:

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

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

交互设计师如何做交互?

- Jerry - UED TEAM,用户体验设计,web前端开发
尽管很多谈及交互的书上都已经回答过了:. 发现用户需要,建立明确需求. 还是有很多对交互设计有兴趣的朋友会问我这个问题,并希望我能回答得详细,具体到我工作中的每个细节. 其实交互设计需要做什么,会随每个交互设计师的工作内容差异而不同,具体到每个项目也会有区别. 下面分享下我是怎样做交互,方式不一定是最合适,希望大家多指点,共同学习进步.

交互设计-简单

- DayuLu - 腾讯CDC
  交互设计是近几年流行的一个词语. 现在市场上有许多资料来介绍什么是交互设计,如何做交互设计等. 从场景,任务,用户,操作等分析. 但由于受实际情况的限制,往往不能很深入. 所以笔者结合实际工作体验与大家分享下,具体做设计时候是怎么考虑的. 如果要说什么是一个好的交互设计,个人浅见就是简单. 本文以下内容都是围绕简单2字进行展开.

交互设计初体验

- - 微博UDC
9月初,我来到新浪微博UDC部门交互设计岗位实习. 在接近四个月的学习时间里,我对交互设计行业有了深一步的了解,认识到了交互设计师的一些具体职责. 鉴于之前接受的知识大多来自书本或网络上的文章,在校期间参与项目的机会并不多,因此,我对此次实习做了一些总结:一方面,希望鞭策自己,在以后的工作中有所进步;另一方面,也希望能帮助刚步入交互设计行业的同学更快的适应工作,更好地学习交互设计.

交互设计入门–了解交互设计

- - 互联网的那点事...
为什么会有交互设计,交互设计能够做什么?. ▎1.成功的互联网产品具备哪些要素. ①当你的Boss需要做个产品时,它首先必须是可实现的,这也是为什么核心程序员架构师的待遇普遍较高的原因,因为他们是生产力. 那么成功的产品首先要具备– 可实现模型. ”当然不是,产品的终极目标是盈利,你的领导也只关心这个.

交互设计,产品设计与用户体验设计

- 章明 - 所有文章 - UCD大社区
交互设计,产品设计和用户体验设计经常被混淆,而实际上完全不是一个概念甚至不是一个纬度的概念;. 一直认为交互设计与互动设计很接近,互动设计这个词更多用在flash设计中,维基百科中的交互设计的定义也证实这个想法:. 交互设计,又称互动设计,(英文Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域.

web交互设计原则和模式

- shallwelin - 译言-
原文作者:Bill Scott. 原文链接:Designing Web Interfaces Principles and Patterns for Rich Interaction. web界面设计(丰富交互设计的原则和模式). (本书英文版大家可以到我blog下载:http://blog.youmila.com/?p=325).

好的交互设计就是简单

- 小宇 - 互联网的那点事...
交互设计是近几年流行的一个词语. 现在市场上有许多资料来介绍什么是交互设计,如何做交互设计等. 从场景,任务,用户,操作等分析. 但由于受实际情况的限制,往往不能很深入. 所以笔者结合实际工作体验与大家分享下,具体做设计时候是怎么考虑的. 如果要说什么是一个好的交互设计,个人浅见就是简单. 本文以下内容都是围绕简单2字进行展开.