web浏览器博物馆_Web-Based Interactive Storytelling (2)
接着介绍Vincent Morriset的案例。这三个都是他为加拿大乐队Arcade Fire做的互动MV。他的高质量作品扭转了我对这些互动mv一贯又躁又乱的印象,强烈建议去各网址体验。
1. Neon Bible (网址)
2.Just a Reflecktor (网址)
Just A Reflecktor 幕后https://www.zhihu.com/video/1099200502914531328
为Arcade Fire乐队同名歌曲做的互动MV,简直神作。它讲述的是一个非洲女舞者被带到海地,然后被当地一群奇怪的群众带入另一个世界的故事。就像歌名讲的,Reflecktor,最后女舞者看到的是自己投影在另一个世界的喻体。
观众可以用手机联网跟这个MV互动,(当然也可以退而求其次用鼠标,更懒的甚至可以看懒人版无互动MV。),用手机的移动来改变MV的画面和情节。这个过程还需要用到笔记本电脑的摄像头。 在整个体验中,technology被放在幕后,experience才是主角。下面图解一下互动流程。
首先用PC登录https://www.justareflektor.com/,会得到一个码。
然后在手机浏览器里输入http://g.co/af,会自动跳转到项目网址,然后输入这个码。
此时手机就可以与电脑端通过webSocket通信了。当你挥动手机的时候,手机自带的加速度计和陀螺仪所捕捉到的实时运动数据就可以传给web端了。
然后根据指示,把手机竖直对着电脑摄像头,让摄像头能捕捉到手机页面上的标的图案。
(手机自身的传感器数据,加上PC摄像头捕捉到的影像,就可以准确的判定手机实时的位置和运动趋势了。这些将被用来控制这个MV的播放) 在这个过程中,手机只是被当成了传感器和数据发送器而已。
最终的效果是,当观众对着电脑挥舞手机的时候,可以实时用手部的动作来控制电脑屏幕上的MV变化。下面是我挥舞手机时,电脑上MV的变化。真的有一种我的手机照亮了MV里面内容的感觉。怎么说呢,现实和虚拟之间的次元壁瞬间消失了。
(其实我们的鼠标、键盘等输入设备无一不是连接现实世界到虚拟世界的端口,只是我们习以为常之后,就没有那种sense of wonder了。有一次我跟朋友去博物馆,发现一个可以控制视频播放进度的扭蛋设备。我们觉得很新奇,但旁边的工程师却说,这不就是个鼠标滚轮吗?可见sense of wonder真的只能初见,一旦习以为常就无法再次体验了。)
虽然我也做过大大小小很多互动项目了,但是这个体验还是惊艳到了我。
其中,每个细节的互动效果都能为整体的故事/意境服务,不像很多项目为了互动而互动。不同效果之间也很consistent,没有拼凑感。且很贴心地为不同用户设计了多种体验(手机版、鼠标版、懒人无互动版)。唯一不足是,手机经常短联。最后我不得不用鼠标完成全程。但即便用鼠标也足够炫酷了。下面截图几个鼠标互动的效果。
还有一个画龙点睛之笔是它的logo/图腾。这个体验有一种神秘感,而它的图腾非常契合。从loading进度条,到mv里面的植入,可以说无处不在。
搞笑(也很感动)的是,这个团队的设计师大概是强迫症。在技术介绍页面上,为了使视觉系统跟图腾保持一致,ta硬是把一些tech logo全画成了自家图腾的系列。(这事儿我也干过)
彩蛋: 因调用了电脑摄像头,最后mv女主在破碎的镜子里看到的,是观众自己的脸。。。
最后,开发团队(来自google chrome的技术支持)把代码开源了。有兴趣的人可以在这个页面上(https://www.justareflektor.com/tech?home )亲自改变参数、试验效果。
3. 还是这个乐队的歌——Sprawl2 (网址)
这个体验也需要调用摄像头,捕捉你的动作。
它有两种互动模式:dance | click。dance模式下,观众在摄像头前挥舞手臂可以让MV里的舞者动起来。click模式则是用鼠标来拖动舞者的动作。
在UI上,它用一种舞厅灯管的效果来做按钮和状态条,跟这个MV浑然一体(毕竟全MV就是“不如跳舞”的意思)。
下面是我挥舞手臂带动MV里的角色一起跳舞。当我动作幅度加大时,“dance”那个灯管会变亮。当我幅度减少时,则会转暗。用这种很自然的方式给用户提供信息。
其实这些从技术角度并不难,也不新鲜,但是体验设计从来都是内容大于技术。It's what you do with that technology that makes the difference。
最后补充一下同一个MV用鼠标互动的效果。
事无巨细的web互动体验图解篇:终于完结了!!!
对这位导演Vincent我简直是拜服。希望自己做的VR体验可以不输给他的作品吧(VR并没有天生的优势。需要找到这个媒体自己的visual/narrative/interactive language,才不至于让它成为负累。)
-------------------------------------欢迎关注我的专栏-------------------------------------
D for Designzhuanlan.zhihu.com
试说新语zhuanlan.zhihu.com
欢迎搜索公众号“IrisDesignClass",关注 [ Iris的设计课 ]。
会写一些所思所见、设计沉淀,不定时更新。
web浏览器博物馆_Web-Based Interactive Storytelling (2)相关推荐
- 第十一章:WEB浏览器中的javascript
客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...
- android web_适用于Android的最佳Web浏览器
android web Your phone probably already has Chrome on it, but that's not the be all, end all when it ...
- Web信息系统采用浏览器 服务器结构,基于web浏览器服务器框架体系教材管理系统.doc...
基于web浏览器服务器框架体系教材管理系统 基于web浏览器服务器框架体系教材管理系统 [摘要] 通过对目前高校教材管理现状进行分析,引出建立网络教材管理系统的重要性和必要性讨论,具体介绍了教材管理系 ...
- 《JavaScript权威指南第7版》第15章 Web浏览器中的JavaScript 15.1 15.2 15.3
第15章 Web浏览器中的JavaScript 15.1 网络编程基础 15.1.1 HTML script 标签中的JavaScript 模块 指定脚本类型 脚本运行时:异步和延迟 按需加载脚本 1 ...
- [C# 网络编程系列]专题四:自定义Web浏览器
前言: 前一个专题介绍了自定义的Web服务器,然而向Web服务器发出请求的正是本专题要介绍的Web浏览器,本专题通过简单自定义一个Web浏览器来简单介绍浏览器的工作原理,以及帮助一些初学者揭开浏览器这 ...
- Beaker:一个基于Electron的点对点Web浏览器
Beaker是一个基于Electron.Chromium和Node.js的实验性.点对点Web浏览器.Beaker包含新的基于Dat的API,用于构建无主机应用程序,同时又保持与传统Web的兼容性. ...
- 大多数Web浏览器中都可以使用PUT,DELETE,HEAD等方法吗?
我在这里看到了几个问题,例如如何调试RESTful服务 ,其中提到: 不幸的是,同一浏览器不允许我测试HTTP PUT,DELETE,并且在某种程度上甚至无法测试HTTP POST. 我还听说其他一些 ...
- 禁用Cookie在web浏览器中读取/写入c#应用程序
我希望网站无法读取cookie或在webbrowser c#控制应用程序中写入新的cookie.当webbrowser c#应用程序运行时,我宁愿禁用所有网站的所有读/写cookie操作,如果不是,那 ...
- 服务器应用程序不可用您试图在此 Web 服务器上访问的 Web 应用程序当前不可用。请点击 Web 浏览器中的“刷...
错误提示: 服务器应用程序不可用您试图在此 Web 服务器上访问的 Web 应用程序当前不可用.请点击 Web 浏览器中的"刷新"按钮重试您的请求. 管理员注意事项:详述此特定请求 ...
最新文章
- 为了爱情,吃掉150瓶“老干妈”的程序员
- tlb存的什么_什么是MMU,TLB
- 【python开源项目】推荐一款prize万能抽奖小工具发布
- windows新建或者重命名文件及目录必须手动刷新才干显示出来问题解决方法
- 应用编排与管理:核心原理
- python开发环境配置_百度资讯搜索_python开发环境配置
- 2012年4月18日 新的开始
- CreateProcess error = 2,系统找不到指定的文件
- 理论基础 —— 树 —— 树的存储结构
- java调用MySQL脚本_Java调用SQL脚本执行常用的方法示例
- python成绩转换_Python格式化输出%与format能不能互相转换?
- java安全相关类 (java.security包)
- IDEA 2020下载与安装
- 下载网页上的各种视频只需四步
- vs2010下配置HPSocket教程,详细截图附入门demo源码
- git回退版本 简单易懂
- 女程序员未来的职场出路在哪里?
- 卖家盒子提示服务器正在维护,户户通提示位置信息改变的解决办法
- 30 岁前实现财务自由的人,都做对了哪些事?
- SPI FLASH的dummy指的是什么?