Be For Web - 故事板 http://www.beforweb.com/taxonomy/term/207 en 站在VR世界的大门前 - 故事板在VR设计中的运用 http://www.beforweb.com/node/841 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-logo-vr-hmd-product-design.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>周日吗。雨终于下了起来,看样子不太像模棱两可随便落两滴的样子。据说晚些会有台风?</p> <p>很棒,感到很棒,现在所在的地方。一家叫做&ldquo;Both&rdquo;的店,在虹桥这边的红坊创意园区。实际上直到走进了红坊的大门才意识到自己回到了这里;说起来像是什么老去处,不过也只是在2013年相同的季节与朋友来看过一场北欧民谣的live而已。</p> <p>转眼间三年已经过去,那晚的树、草坪、厂房以及弥漫在整个世界当中的夏天气息依然如此清晰,仿佛只是昨日所发生,甚至比&ldquo;昨日&rdquo;的感觉要更近一些;这些记忆与此时此刻的所见所感自然而然的重叠在一起,自己也不禁恍惚起来 - 三年的跨度似乎在瞬间被压缩成薄薄的一片什么东西,之间所发生过的一切都印在上面,就像一张褪色的明信片,莫名其妙的出现在衬衣口袋里面,自己甚至没有察觉。</p> <p>直到发现时,从口袋里拿出来仔细打量,才忆起,在这样一个&ldquo;瞬间&rdquo;里,自己所失去及收获到的所有。</p> <p>环境使然。我指,明明只是要安心的坐在这里敲敲本周译文的前言,却一发不可收拾的几乎又要意识流起来。仅是环境使然。而说起这家店,两层的空间,卖一些唱片,卖一些咖啡与软硬饮料(糟糕的是不提供红茶);楼梯转角的一片空地被布置成私家影院一般,此刻正在准备进行日本音乐一类的主题活动,墙壁上无声的投射着黑白老电影,DJ正在试碟,一些&ldquo;观众&rdquo;坐在阶梯座位上四处打量或是把玩着手机等待活动开始。</p> <p>坐在二层靠边的位置,一副事不关己的样子,漫不经心的边打字边探头观望着下面人们的一举一动。身边是一整面墙的书架,零零散散的摆放着一些书与唱片。唔,活动开始,主持人自我介绍,是一名来自大阪的唱片店老板,通常在美国、英国、荷兰、德国一些地方淘碟,甄选后进行售卖;而最近才开始尝试通过网络购买唱片,虽然便利很多,但同时也失去了原本的很多乐趣。想必是这样喽,与音乐及其载体进行的互动,从来就不仅是关于音乐及其载体本身那么简单。</p> <!--break--><p>这里一直在分心,听唱片店老板谈音乐话题。原本想写些什么已经不大记得,思路完全飘到这个环境以及正在进行的主题活动所营造的音乐气场之中。从人与音乐互相尊重的黑胶时代,到可以轻而易举在网络上获取音乐的时代,人们似乎在越发便捷的得到着越来越多的东西,看上去充实而富足,但不经意间所失去的却是一些更加宝贵的体验。严格来讲我并未亲身经历过黑胶作为主流载体的时代,但在世纪交替前后共约十年的时间里着实花了不少时间与金钱在&ldquo;打口磁带&rdquo;及&ldquo;打口CD&rdquo;上面,那时日复一日蹲在成堆的磁带与CD当中挖宝、和老板一起修复磁带的情景至今仍会浮现在眼前;所得到的音乐本身固然令人愉悦,但将所有那些获取音乐的过程连同在一起,才算得上真正完整的音乐体验。</p> <p>时至今日,这些显然已无从谈起;所以开始有越来越多的人重新开始关注起黑胶?关于这一点我不大清楚,自己从未参与过黑胶相关的互动活动,无论在过去的年代还是如今。在我想象当中,&ldquo;重拾乐趣&rdquo;这件事似乎只对真正经历过的人才有意义,而看到如今比我还要年轻很多的朋友们在尝试这类活动,感觉会有些蹩脚;不过终归是会对&ldquo;人与音乐的深层互动&rdquo;有所推动的事情,不做纠结也罢。只是说到这里突然开始感受到磁带与CD的尴尬位置 - 分明承载了整整一代人的音乐心路,却一方面不像黑胶那样原始而经典到值得人们回头重温,同时又不如线上时代各种载体这样能够提供最快捷便利的内容体验,只有被年复一年的&ldquo;珍藏&rdquo;在箱子当中无可避免的渐渐受潮发霉。</p> <p>似乎已经写了太多,在正文之前。或许是很多朋友完全不会有兴趣及共鸣的话题吧。也罢,毕竟这些从来只是一个人的自言自语,况且如今在公众号里面也会分开推送了。头脑中仍在萦绕着关于&ldquo;音乐&rdquo;、&ldquo;唱片&rdquo;、&ldquo;昏暗的爵士角落&rdquo;、&ldquo;打口时代&rdquo;一类的东西无法停下,但还是决定至少在手头停下这些文字了;将昨天做好的译文整理好,很快便一并发布上来,一些照片照例会放在后面的彩蛋当中。谢谢诸位的时间,下面进入译文。</p> <p>作为一种高效快捷的沟通方式,故事板(storyboard)在影视、游戏和网页设计等领域当中十分常见,通常用于快速展示空间位置、镜头组、运动、互动关系等方面的设计概念。一直以来,我们都习惯于通过故事板的边框来界定场景范围;不过如果场景本身没有所谓的边界,无法通过有限的矩形来完整呈现,我们又该如何呢?</p> <p><img alt="01-vr-design-storyboard.png" src="/sites/default/files/images/201607-2/01-vr-design-storyboard.png" style="width: 600px; height: 109px;" /></p> <p class="figure-caption">Cardboard Crash项目初期使用故事板的错误方式 - 传统的矩形故事板无法有效呈现自身没有边界的VR环境。</p> <p>实际上,我们只需换个角度来看问题 - 过去的方式是在故事板当中定义目标对象与场景边界之间(或界面元素与屏幕边界之间)的相对位置关系;而对于没有边界的VR世界来说,我们需要定义的则是目标对象与用户之间的相对位置关系。某种意义上讲,这是名副其实的&ldquo;以用户为中心&rdquo;的设计思路,只是对于习惯了传统方式的设计师们来说,一开始可能会感到有些陌生。</p> <p>具体来说,在传统的故事板当中,我们描绘的通常是用户所看到的东西;然而对于VR来说,有限的矩形范围只能展现出第一人称视角观察到的虚拟世界的一小部分。换一种思路,不妨试着用故事板本身来代表用户在虚拟世界当中目力所及的整个区域,并在其中通过第三人称视角来展示用户与目标对象在这个区域当中的相对位置关系。</p> <h3> VR故事板</h3> <p>&ldquo;角度&rdquo;与&ldquo;距离&rdquo;是VR故事板当中的两个关键要素。</p> <p>先来看角度。下面的图示用到了Mike Alger出品的&ldquo;<a href="https://vimeo.com/141330081">VR Interface Design Previsualization Methods</a>&rdquo;视频(学习VR设计必看)当中的数据,同时也参考到Alex Chu的演讲&ldquo;<a href="http://alexchu.net/Presentation-VR-Design-Transitioning-from-a-2D-to-a-3D-Design-Paradigm">VR Design: Transitioning from a 2D to a 3D Design Paradigm</a>&rdquo;。</p> <p><img alt="02-vr-design-storyboard.png" src="/sites/default/files/images/201607-2/02-vr-design-storyboard.png" style="width: 600px; height: 189px;" /></p> <p class="figure-caption">头部旋转的舒适角度及相应的视野区域</p> <p>VR头显的默认视野范围大约是94度。保持固定坐姿时,你可以比较舒适的向左右两侧转头30度,最多不超过55度;如果是站姿或坐在转椅上,这两个数字还会有所增长。不过目前,就让我们聚焦在局限性最高的情境当中好了。</p> <p>再来看距离。在一定的范围内,离自己越近的物体越能引发人们的关注。不过所谓的&ldquo;范围&rdquo;具体是怎样的呢?</p> <p><img alt="03-vr-design-storyboard.png" src="/sites/default/files/images/201607-2/03-vr-design-storyboard.png" style="width: 600px; height: 189px;" /></p> <p class="figure-caption">清晰、舒适的3D深度感知与相应的视距</p> <p>要确保最基本的舒适度,虚拟环境中的目标对象与用户之间的距离不应小于0.5米(Oculus推荐的最小值是0.75米);而10米以上则会使用户的3D深度感知急剧下降;一旦超过20米,目标对象就很难被留意到了。所以我们应该将重要的物体放置在距离用户0.5到10米的范围之间。</p> <p>将&ldquo;角度&rdquo;与&ldquo;距离&rdquo;两个要素整合起来,我们便可以得到下图所示的舒适区域分布,其中灰色越深的区域代表舒适度越高。这幅示意图正是VR故事板的基础模板:</p> <p><img alt="04-vr-design-storyboard.png" src="/sites/default/files/images/201607-2/04-vr-design-storyboard.png" style="width: 440px; height: 440px;" /></p> <p>移除矩形边框及多余的线条,将用户的形象放置进去,调整一下人物与环境的比例,将图形倾斜至3D视角,我们便得到了一幅空白的VR故事板:</p> <p><img alt="05-vr-design-storyboard.png" src="/sites/default/files/images/201607-2/05-vr-design-storyboard.png" style="width: 600px; height: 338px;" /></p> <p>在里面随便画一些互动对象或是环境元素:</p> <p><img alt="06-vr-design-storyboard.png" src="/sites/default/files/images/201607-2/06-vr-design-storyboard.png" style="width: 600px; height: 135px;" /></p> <p>VR故事板可以清晰的展示出用户与目标对象在3D空间当中的位置关系;同时运用多张故事板则可以表现出用户与虚拟世界之间的动态互动关系。</p> <h3> 尚不完美</h3> <p>通过用户视野范围界定的故事板主要适用于场景初期的设定,而且用户的视点必须是可预测和可控的。在具备互动性的VR环境中,这一点很容易实现,你通常可以在每个场景开始之初重置用户的视点位置及视线方向。</p> <p>而对于360&deg;视频来说,事情会变得有些复杂:用户在每个场景开始时的视线方向取决于他在上一个场景结束时所注视的方向,你很难做出预测,进而难以通过我们的VR故事板进行预先设计与描述。推荐各位阅读Jessica Brillhart的文章&ldquo;<a href="https://medium.com/@brillhart/in-the-blink-of-a-mind-attention-1fdff60fa045#.yqoswo449">In the Blink of a Mind &mdash; Attention</a>&rdquo;(Medium,墙外),来了解怎样应对这样的状况。</p> <h3> 模板</h3> <p>或许将来,每一名设计师都能佩戴着高端VR头显,通过某种所见即所得的设计工具直接沉浸在3D世界当中进行工作。不过在那一天真正到来之前,我们依然要运用一直以来所熟悉的2D模式进行VR设计。本文所探讨的VR故事板就是这样一种变通性质的工具。</p> <p>我制作了一组模板,其中包含六个空白场景以及用来做注释的文稿线。你可以下载这份可打印的<a href="https://www.dropbox.com/s/9akxpp7870c9eyr/vr-storyboard-template-print.pdf?dl=0">PDF文件</a>(DropBox),或直接保存下面这张图片;打印到纸上,随时使用,会很便利。</p> <p><img alt="07-vr-design-storyboard.png" src="/sites/default/files/images/201607-2/07-vr-design-storyboard.png" style="width: 600px; height: 464px;" /></p> <h3> 彩蛋 from C7210</h3> <p>一些今日照片。雨中宁静的红坊园区:</p> <p><img alt="" src="/sites/default/files/images/201607-1/IMG_9008.JPG" style="width: 450px; height: 600px;" /></p> <p><img alt="" src="/sites/default/files/images/201607-1/IMG_9009.JPG" style="width: 450px; height: 600px;" /></p> <p>Both Music店:</p> <p><img alt="" src="/sites/default/files/images/201607-1/IMG_9010.JPG" style="width: 450px; height: 600px;" /></p> <p><img alt="" src="/sites/default/files/images/201607-1/IMG_9012.JPG" style="width: 450px; height: 600px;" /></p> <p>略遗憾的没有红茶的整个下午。闲散的靠着玻璃围栏听着下面的唱片店老板聊着音乐:</p> <p><img alt="" src="/sites/default/files/images/201607-1/IMG_9013.JPG" style="width: 450px; height: 600px;" /></p> <p>店旁边的上海城市雕塑艺术中心。没有感到多么的&ldquo;城市&rdquo;,寂静岭的味道么说有倒是有些:</p> <p><img alt="" src="/sites/default/files/images/201607-1/IMG_9014.JPG" style="width: 450px; height: 600px;" /></p> <p><img alt="" src="/sites/default/files/images/201607-1/IMG_9015.JPG" style="width: 450px; height: 600px;" /></p> <p><img alt="" src="/sites/default/files/images/201607-1/IMG_9016.JPG" style="width: 450px; height: 600px;" /></p> <p><img alt="" src="/sites/default/files/images/201607-1/IMG_9017.JPG" style="width: 450px; height: 600px;" /></p> <p><img alt="" src="/sites/default/files/images/201607-1/IMG_9018.JPG" style="width: 450px; height: 600px;" /></p> <p>那么,本周就是这样了;真的会有台风吗?希望回去之前不会遇到。下周见,各位。</p> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/207" typeof="skos:Concept" property="rdfs:label skos:prefLabel">故事板</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/206" typeof="skos:Concept" property="rdfs:label skos:prefLabel">虚拟现实</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/205" typeof="skos:Concept" property="rdfs:label skos:prefLabel">VR</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sun, 10 Jul 2016 09:37:30 +0000 C7210 841 at http://www.beforweb.com http://www.beforweb.com/node/841#comments