web浏览器博物馆_Web-Based Interactive Storytelling （2）

接着介绍Vincent Morriset的案例。这三个都是他为加拿大乐队Arcade Fire做的互动MV。他的高质量作品扭转了我对这些互动mv一贯又躁又乱的印象，强烈建议去各网址体验。
1. Neon Bible (网址）

做旧质感的标题，鼠标可以与之互动。点击进入MV。

鼠标hover到手上时，手会弹起。

点击手会reveal道具，点击空白处可以往空中扔道具......

点击主角脸部，会出现歌词。。。（只有特定的时候点击才有效）

细节：Neon bible几个大字也会随着鼠标甩动———physicality。

移动鼠标可以控制光的方向，和手的位置

还可以让光源打到一只手上

转到侧面。点击每一张牌可以翻面，点击手可以洗牌。

点击手开始下雨。慢慢把主角都淹没了....

。。高潮部分。可以让手乱舞。剧终。。。。

PS：整个MV的质感，以及“手”的形象，应该是在致敬David Bowie的经典封面。

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 Design​zhuanlan.zhihu.com

试说新语​zhuanlan.zhihu.com

欢迎搜索公众号“IrisDesignClass"，关注 [ Iris的设计课 ]。
会写一些所思所见、设计沉淀，不定时更新。