Be For Web - Google VR http://beforweb.com/taxonomy/term/210 en Google设计师谈VR设计的现状、挑战与前景 http://beforweb.com/node/888 <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://beforweb.com/sites/default/files/article-thumbs/icon-vr-cardboard-unity-development-c.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>要说眼前的这些字是一天一天工作之后拳击或跑步或练鼓然后回到公司继续工作然后回家内务家务直到午夜浑身酸痛而兴奋的敲打出来的也毫不过分。事实就是这样。回头看所有这些日子,我越发活在这世界里,同时又越发沉迷于独特或特定的世界。我亲眼见识到有人能够以这种方式强大的存在着,这让我着迷。你咬我啊。</p> <p>今天被师哥的几记前手拳打的边疼边笑。</p> <p>简单介绍下本文。访谈性质,两位在技术前沿探索许久的设计师谈论VR设计的现状、挑战与前景。其中Mike Alger是我所认为的真正意义上的VR设计师,他的几段设计理念讲解视频能让你明白作为设计师可以用怎样的思考与实践方式来面对全新技术的挑战,建议搜来看,不看会遗憾。</p> <!--break--><p>下面进入译文。</p> <p>设计传统的2D界面尚且需要你掌握大量专业知识并付出辛勤的汗水,要打造全新的体验独特的3D世界又将意味着什么?Mike Alger和Andy Stone正是致力于研究这一问题的两位走在前沿的VR设计师。</p> <p>Mike Alger目前就职于Google,过去几年里一直在VR领域进行探索,他所制作的几部VR设计理念讲解视频堪称业界经典。Andy Stone是Emerson Stone设计公司的合作伙伴,同时也是Medium上的VR话题作者之一。</p> <h3> 实体与空间的迷宫</h3> <p>关于VR,首先需要定义清楚的就是&ldquo;虚拟现实&rdquo;这个概念本身。这个名字不错,也存在了有一段时间了,但如今我们知道这个概念有着更广泛和深刻的所指,沉浸式体验的意义更在于对我们所生活的这个现实世界进行扩展。</p> <p>VR不仅代表着一种全新的人机交互范式,它更需要我们对物理及空间相关的知识有着深层的理解,包括音效设计、建筑设计、光影与物理效应等等方面。对于社交类产品来说,这些要素很可能重塑个人空间、个人形象的展现形式,以及人与人之间的互动模式。</p> <p>在为VR进行设计之前,我们需要充分考虑清楚自己的设计倾向及其有可能对用户造成的影响。这是一项长期工作,随着我们对全新社交范式的理解的不断深入,相关指导原则的制定及道德层面的讨论也会持续进行。</p> <h3> 如何看待VR设计目前所处的阶段?</h3> <h4> Andy Stone</h4> <p>我个人看来,在这么短的时间里,Google就能将其设计语言充分融入到VR/AR体系当中,使其在实际设备当中看起来如此成熟适用(至少在公众的眼中),这是件很有趣的事。通过观察和研究,我们发现,Google Material设计语言不仅在移动及桌面领域有所建树,即便在VR当中,它同样能大有所为,界面元素的投影及层次关系在全虚拟化的界面环境当中依旧适用。</p> <p>我认为VR/AR目前仍处于探索和概念演示阶段,我们也在一点点的理解着这项新技术真正的价值所在。回顾电影的发展史,在头一个十年里,人们只是在捣鼓一些小片段,直到慢慢懂得怎样通过这项技术去叙事 - VR目前所处的阶段有些类似。怎样将新技术落地到实际需求当中,让公众大范围的接受,这是我们所面对的巨大挑战。</p> <p>VR给人的感觉还太新、太科技化,除非受到足够有效的引领,否则大众很难被真正打动。与其为某个特定的VR设备或app打广告,还不如从行业整体角度来向公众展示这项技术将如何改变我们在娱乐、社交、教学、协作等方面的传统模式。</p> <h4> Mike Alger</h4> <p>我认为我们正在从媒体过分炒作的热度当中回归理性。各路VR设备逐一登场,等待已久的早期用户们都已完成购置,第一批app产品也各就各位。但我们仍然没有找到能够提供持久优质体验的模式及用例,难以使用户持续使用产品。于是人们很可能对当前的状况感到厌倦,而将希望寄托在下一个有可能的热点领域,从而使VR沦为3D电视或云计算机那样的潮流产物。或许机器学习一类的概念最终也会走上这条路。</p> <p>然而,我不认为VR真正的价值在于目前我们所能看到的这些成果当中。我之所以投身其中,是因为我能想象到这项技术在未来的面貌,而且我还意识到,很多运用模式在如今其实同样可行。你可以说&ldquo;在未来,放射学家能够通过VR设备直接观察3D化的扫描影像,精准度更高,也更易于病人理解&rdquo;,然后再想想看,这些在现在真的不可行吗?所需的技术其实都已具备。MRI和CT扫描结果都使用DICOM格式保存,你可以使用免费软件从中获取图形甚至是3D模型,再经由Unity的处理,我们就可以通过VR设备查看3D影像了。整个流程实现起来并不困难,我们越早使用,就会有越多病人从中受益。我不知道这样说是否恰当,但我所看到的就是明明有一大堆现成的乐高积木摆在我们面前,而我们却什么都没有去搭建。</p> <h3> 为什么这样的实际用例在现实当中少之又少?</h3> <h4> Mike Alger</h4> <p>因为我们需要设计师和开发人员共同投入其中,并且需要花费时间,而时间很贵。联想到媒体炒作的问题,的确,目前VR在实际应用方面的模式与体验还谈不上理想,但这也正是查尔斯&middot;卓别林、奥逊&middot;威尔斯、比尔&middot;盖茨这类人物辈出的阶段。这些人可以充分利用新媒介的潜力,为人们带来前所未有的内容体验,使人们欲罢不能。</p> <p>届时,建筑师们再也不会满足于只能在2D媒介上设计房屋,买家也不会在虚拟畅游过实地之前作出购买决策。建模人员无需再痛苦的对着屏幕拉着选框去选中一大堆锚点,然后再把对象旋转过来一个个去掉那些本不希望选中的点。工程师们会将VR设备作为他们的标配之一,通过它来观察线缆与下水道的分布情况。而所有这些使用场景所涉及到的技术在当前都已存在。</p> <h3> VR接下来所面临的挑战是什么?</h3> <h4> Andy Stone</h4> <p>我认为,所有的行业最终都将受益于VR/AR技术,正像如今所有的行业都离不开计算机与移动设备。</p> <p>但是当前,这样的技术变革对于多数行业来说并不划算。接下来的一两年,将显著受益于VR技术的行业将有工程、工业设计、建筑、医疗 - 以及任何依赖于CAD与成像技术、并希望影像更加精确逼真的领域。另一方面,AR技术的运用可能会更加引人注目,譬如直接在车窗上显示导航路线,在墙面上显示其内部的布线结构,或是在学生的课桌上直接呈现教学内容等等。在我看来,接下来的几年当中,将会有大量设计师及创业团队致力于研究怎样将内容从二维屏幕迁移至真实世界的物体表面。</p> <h4> Mike Alger</h4> <p>与其他媒介当中的产品所遇到过的挑战相仿:我们应该怎样设计出实用、高效、有意义的交互方式,怎样实现出来并保持迭代?我们的机遇在于如何将自己早已掌握纯属的设计理念及技能运用到新媒介的产品当中,使其更简单、易用、舒适、符合直觉。</p> <h3> 谁将为VR而设计?</h3> <h4> Mike Alger</h4> <p>虽然Oculus、Steam、Daydream等厂商在提供硬件设备的同时也在创作内容,但本质上他们是在为开发者们提供着独创内容的舞台。这个问题有点类似于&ldquo;谁在为iPhone而设计?&rdquo;,是第三方软件服务公司,还是苹果?苹果当然会始终为iPhone提供着系统与软件,但没有哪家公司能够包揽一切,他们最终仍然需要其他人来创造产品并赚取酬劳。</p> <h4> Andy Stone</h4> <p>数字产品设计已经逐渐突破2D的禁锢而走向3D世界,不过多数设计师恐怕仍然没有做好充足的准备。过去几年里,我们的注意力主要集中在一系列尺寸固定的2D屏幕上,尝试着跨平台的、具有响应性和统一性的界面设计。在VR领域,屏幕不再存在,视图没有边缘,元素的大小取决于它与世界整体的比例关系。设计公司与科技巨头们开始雇佣环境及建筑设计师来打造这样的虚拟世界,因为他们对于怎样在3D世界当中导航与寻路更加在行。内容提供商和软件服务商所创造的VR内容将能更好的依存于Google和Facebook这样的巨头所提供的确定性较高的软硬件平台。这些巨头将制定出更加明确的行业标准及核心体验准则,第三方公司则会依据这些原则将自己的内容和产品并入平台系统当中。</p> <p>英文原文:https://uxdesign.cc/designing-for-virtual-reality-interviews-ba7b5076bff#.mo6kij2sn,作者:Caio Braga</p> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><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/205" typeof="skos:Concept" property="rdfs:label skos:prefLabel">VR</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/206" typeof="skos:Concept" property="rdfs:label skos:prefLabel">虚拟现实</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/200" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品设计</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/210" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Google VR</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Wed, 01 Mar 2017 16:04:02 +0000 C7210 888 at http://beforweb.com http://beforweb.com/node/888#comments 站在VR世界的大门前 - 实战起步指南 http://beforweb.com/node/865 <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://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>继续VR话题。对此的探索、学习或哪怕只是浅尝,我自己在继续,也希望同样愿意继续的朋友(即便只有很少的一些)也能够一起继续。今天是一篇极具初学指南风格的初学指南,是那种,如果身边有同事说起&ldquo;想了解一些尝试一下&rdquo;的时候你会愿意把文章分享给他们看的初学指南,有作者自身的学习经验,也有她所推荐的更多学习资源(以及我所提供的译文学习资源)。</p> <p>下面进入译文。</p> <p>本文面向有兴趣了解和上手VR设计开发、却无从起步的朋友们。</p> <p>为了更具实践性,我们将聚焦于最易上手的平台与技术,包括Google Cardboard和Unity等等,希望能够帮助尽可能多的朋友顺利启程,逐渐体会到构建VR世界的乐趣所在。</p> <!--break--><h3> 如今的VR技术能实现些什么?</h3> <p>盲目的学习总会使人缺失目标与兴趣。我们不妨先来看看当今的一些典型案例,以便对自己有可能做到的或难以实现的目标有所了解。</p> <p><a href="http://giantofficial.com/"><strong>Giant</strong></a>,一部VR短片,取材于南斯拉夫战火当中的真实事件。在片中,你可以全视角的观看四周的环境,了解故事发展,但无法扮演主动参与者的角色。这类模式的重点在于沉浸式的叙事体验,而非互动娱乐。</p> <p><a href="https://www.tiltbrush.com/"><strong>Tilt Brush</strong></a>,一款VR绘画工具。通过手持控制器,你可以在3D世界当中全视角的创造和欣赏作品,自由度超高。</p> <p><a href="https://www.youtube.com/watch?v=BWjP77TztTQ"><strong>Portal: Aperture Robot Repair Vive VR Demo</strong></a>(YouTube)。在时长约5分钟的游戏体验当中,你可以自由的与虚拟世界进行互动、围绕着机器人走动并对其进行维修。游戏打造的很是精细,实际过程也非常有趣,而且体现出了VR在互动式教学方面的巨大潜力,你可以设想将来的解剖学或工程领域以这种方式指导学生学习实践的情景,很多灾难性的后果将得以避免。</p> <p><a href="http://jobsimulatorgame.com"><strong>Job Simulator</strong></a>,一款屡获嘉奖的VR游戏,你可以在办公室一类的典型环境当中通过非常搞笑的方式完成日常工作和生活里的琐事,很有意思。相比于之前三个案例,Job Simulator提供了最为专注的VR互动游戏体验。</p> <h3> 我该怎样起步?</h3> <p>我个人在刚刚开始尝试VR设计开发时,遇到的最大的问题便是&ldquo;究竟怎样起步?&rdquo;。我需要了解和掌握的技术有哪些?怎样实际测试和体验?工作流程是怎样的?</p> <p>起步阶段所需用的清单如下:</p> <ul> <li> 一部主流智能手机</li> <li> Google Cardboard或同类设备(5至20美金)</li> <li> 一台普通的笔电或桌面计算机(如果手机是iPhone,则需要macOS设备)</li> <li> 个人免费版本的Unity</li> <li> Xcode(如果手机是iPhone)或Android Studio(如果手机是安卓系统),两者均免费</li> </ul> <p>当然,用Gear VR、HTC Vive、Oculus Rift代替Cardboard也完全可行,不过本文的原则在于通过成本最为低廉的方式起步(即将正式发售的Daydream View及Daydream-ready手机也是不错的选择)。</p> <p>除非你尚未拥有时下主流的手机和计算机,否则全部开销无非几美金的样子;起步阶段所需的相关软件全部免费。</p> <h3> 工作流程是怎样的?</h3> <p>实际情况将取决于你所选定的平台和开发工具。不过,作为起步指南,本文将以使用<strong>Unity</strong>面向<strong>Cardboard</strong>制作<strong>iOS app</strong>作为示范。</p> <p>你需要使用笔电或桌面计算机在Unity中构建3D环境和互动模式。Unity本身是一款游戏引擎,你可以在其中制作2D和3D游戏。免费版本的界面看上去大致如下:</p> <p><img alt="" src="/sites/default/files/images/201610-3/01-vr-design-development-guide.png" style="width: 600px; height: 365px;" /></p> <p>在起步阶段,你并不需要掌握Unity中的脚本编程能力,当然如果具备相关技术则再好不过。关于这一点,我们在后面详细说。</p> <p>准备将app放入iPhone进行测试时,你需要在Unity当中构建(<strong>Build</strong>)项目,并通过Xcode打包运行(<strong>Run</strong>)到手机。在这个环节,当前的Unity和Xcode在衔接配合方面时常会出现问题,可以参考这篇<a href="https://unity3d.com/cn/learn/tutorials/topics/mobile-touch/building-your-unity-game-ios-device-testing">Unity官方指南</a>进行解决。</p> <p>之后,你的VR app会在iPhone中自动运行起来。此时将手机塞到Cardboard中,戴到头上便可以了。四处看看你所构建的VR世界吧。</p> <p>如果你拥有编程经验,或是使用过Maya一类的3D工具,那么整个作业流程对你来说不会很陌生。即便没有也没问题,保持学习和实践,你很快就会掌握到一定程度。</p> <p>推荐阅读:</p> <ul> <li> <a href="http://beforweb.com/node/860" target="_blank">站在VR世界的大门前 - 项目特质与设计开发流程的策略选择</a></li> <li> <a href="http://beforweb.com/node/861" target="_blank">站在VR世界的大门前 - 开发工具与设备平台的选择</a></li> <li> <a href="http://beforweb.com/node/843" target="_blank">Unity与Cardboard app基础实践(1)</a></li> <li> <a href="http://beforweb.com/node/844" target="_blank">Unity与Cardboard app基础实践(2)</a></li> <li> <a href="http://beforweb.com/node/845" target="_blank">Unity与Cardboard app基础实践(3)</a></li> </ul> <h3> 怎样学习Unity?</h3> <p>有很多线上教程供你在不同阶段参考学习。</p> <p>我个人建议首先观看和阅读一些<a href="https://unity3d.com/learn/tutorials">Unity的官方提供的教学视频和文章</a>,以便对Unity的工作方式有一个大致的感知。当然很多朋友更喜欢<a href="https://teamtreehouse.com/tracks/game-development-with-unity">Treehouse上的教程</a>,如果你想更加全面和系统化的进行学习,Treehouse是不错的选择。</p> <p>因为我们要在Unity中创建Cardboard(Google VR)项目,所以你需要下载<a href="https://developers.google.com/vr/unity/">Google Unity SDK</a>,其中包含的范例demo及官方文档本身就是绝佳的学习资源。</p> <p>作为一款强大的游戏引擎,Unity复杂的功能和界面可能会使初学者心怀畏惧,没关系,跟随着相关的视频教程,你很快便能上手。接下来建议你构想一个最为简单的互动游戏,试着在Unity中进行实践。期间你一定会遇到各种各样大大小小的问题 - 自己去Google,然后一个一个解决掉 - 将目标和挑战逐渐分解到原子层面,在实践中摸索,最后拼合成完整的体系。</p> <p>正如前面所说,在起步阶段,你并不一定需要掌握编程能力,但如果对C、Jave、C#等语言有所了解,那绝对会帮你加分。如果你在编程方面一穷二白,那么自己去寻找解决方案,将代码复制粘贴到自己的项目当中也完全不成问题,实际上很多开发人员本身也是这样做的 - 别被代码吓住而裹足不前。</p> <p>推荐阅读:<a href="http://beforweb.com/node/833" target="_blank">关于怎样学习VR设计</a></p> <h3> 怎样了解行业术语和最佳实践?</h3> <p>对于我们多数人来说,VR领域当中充满了陌生的术语与实践原则。</p> <p><a href="https://unity3d.com/cn/learn/tutorials/topics/virtual-reality">Unity官方提供的VR实践指南</a>给我带来了不少帮助。你也可以在<a href="https://developer3.oculus.com/documentation/intro-vr/latest/concepts/bp_intro/">Oculus的文档</a>中找到很多干货,此外有很多个人文章同样极具价值,譬如Timoni West的&ldquo;<a href="https://medium.com/@timoni/ux-pointers-for-vr-design-dd52b718e19#.ryb18kg2s">UX pointers for VR design</a>&rdquo;(Medium)、Adrienne Hunter的&ldquo;<a href="http://www.vrinflux.com/the-basics-of-virtual-reality-ux/">Get started with VR: user experience design</a>&rdquo;等等。建议你多做学习笔记,因为知识量很快会膨胀到需要管理和回顾的程度。</p> <p>有一点需要特别关注的是3D世界对人脑的影响作用。在自身位置没有产生任何变化的情况下,人们在虚拟世界当中体验到的运动很容易给身体带来不适。所以很多简单的VR游戏会将主角固定在场景中的某个位置,或是对其移动方式进行限制。此外要记得,我们创建的是高度沉浸化的体验环境,我们正在改变人们对于&ldquo;现实&rdquo;的感知,你必须对自己所创造的东西负责 - 虚拟世界的运作方式要符合人们在现实中的认知原则,而不只是基于你个人的片面理解或主观愿望。</p> <p>推荐阅读:<a href="http://beforweb.com/node/864" target="_blank">站在VR世界的大门前 - 设计实战六原则</a></p> <h3> 我需要掌握3D建模能力吗?</h3> <p>在起步阶段,不需要。</p> <p>当然,如果你有着清晰而明确的想法,希望实现出自己想要的东西,那么是的,你需要学习3D建模。但通常情况下,在刚刚上手时,或是在制作非常简易的小游戏时,你无需自己建模,去<a href="https://www.assetstore.unity3d.com/en/">Unity资源商店</a>免费下载或购买一些现成的素材就足够了。</p> <p>如果你希望深入学习建模,那么可以使用<a href="http://www.autodesk.com/education/free-software/maya">Maya提供的免费版本</a>,并参考<a href="http://ucbugg.com/static/index.html#labsintroductiontomaya">这套教程</a>。此外Treehouse也有一套<a href="https://teamtreehouse.com/library/3d-art-with-maya-lt">不错的资源</a>。</p> <p>Maya并不是唯一的选择,只是我个人最熟悉而已。你同样可以尝试<a href="https://www.maxon.net/en/products/cinema-4d/overview/">Cinema 4D</a>或<a href="https://www.blender.org">Blender </a>(完全免费)。</p> <h3> 还有更多问题?</h3> <p>一定会有。我一直在<a href="http://morgane.com/threeD">自己的网站</a>保持学习记录,如果你希望深入学习Maya、Unity以及所有和VR设计开发相关的技能,不妨到我整理的学习资源当中找找看有没能帮助到你的。</p> <p>我个人强烈推荐在游泳中学习游泳的方式。一开始会无所适从,挑战重重,这很正常。找到适合自己的学习资源,跟随着教程保持学习,你会渐渐的找到感觉。一起试着起步吧,大家。</p> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><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/205" typeof="skos:Concept" property="rdfs:label skos:prefLabel">VR</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/206" typeof="skos:Concept" property="rdfs:label skos:prefLabel">虚拟现实</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/208" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Unity</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/209" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Cardboard</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/210" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Google VR</a></li></ul> Sun, 30 Oct 2016 07:55:50 +0000 C7210 865 at http://beforweb.com http://beforweb.com/node/865#comments 站在VR世界的大门前 - 阶段小结 http://beforweb.com/node/846 <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://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>已然八月中旬,烈日依旧,在酷热的午间出门也真不是件轻松的事,越发感到阳光像是某种需要竭尽所能加以对抗的顽劣实体。再次来到红坊的both MUSIC(官方的拼写方式确是这样),坐在灯光昏黄的二楼边角,对面的水泥墙上投映着关于戴安娜王妃的电影。今天是Daily Vinyl Weekend活动日,所谓&ldquo;爵士凉舱&rdquo;,有唱片可以淘,也有现场演出可以看,貌似还有网络电台在现场录制。从前并没有参与过,对于黑胶的关注与实践也只是从上个月第一次过来both写字那次开始;相比于公众活动而言,还是喜欢自己私下做研究功课,自娱自乐、自给自足。不过既然来了,还是看看会不会有什么有意思的事情发生吧。</p> <p>DJ和乐手们在调试设备,电影不再播放,取而代之的是JZ Lips Radio的logo打在墙上。些许无聊,晚些再做播报,先来简单念叨一下正经事。</p> <p>前次的&ldquo;<a href="http://beforweb.com/node/845">Unity与Cardboard app基础实践(3)</a> &rdquo;成文略为不易,跨越周末及数个工作日,希望可以为各位的学习与探索带来一些参考价值。算下来,从四月份下旬开始,已经连续做了十五期的<a href="http://beforweb.com/taxonomy/term/205" target="_blank">VR话题</a>,将近四个月的历程(说起来自己也有些惊讶,真的已经四个月了吗?),不同类型的内容或多或少也有了些积累。对于VR领域的一些基本概念以及设计开发相关的理念技术,自己感到有了一些浅薄的认知 - 虽然依旧站在VR世界的门外,不过确实有向前挪了一小步的样子。不知各位感觉如何?</p> <p>所以本周给自己放个假,不再做新的译文或教程,而是将之前这十五期的内容做以归纳和小结,便于集中索引与回顾。</p> <p>唔,活动正式开始,无非是DJ推荐自己喜欢的音乐来现场播放,然后一票听众坐在下面玩着手机或是聊天?巴西的音乐么,并不了解,Bossa Nova?关于这个国家的音乐,原始、粗鲁而肮脏的Thrash Metal乐团Sepultura便是我认知当中的全部了(并且仍是挚爱之一)。</p> <!--break--><p>这当间到门口抽了支烟,仅仅几分钟便被炽热的空气烘出一头的汗水。回到both,在一楼的集市翻了翻唱片,恍惚之间仿佛回到了上世纪九十年代末在南开中学后街或是南开大学门外的河边,那样蹲在一箱箱的打口磁带面前满眼放光的挖着宝。无论磁带、CD或是黑胶唱片,这些专一于音乐本身的载体缤纷绚丽而又无比真实的堆积在面前,你可以通过双眼去观察,通过双手去触摸,通过实实在在的音乐设备去播放,通过双耳去仔细的聆听这些得来不易的声音,甚至抄起吉他去一遍遍的模仿 - 这就是完整体验的意义所在,真实而富足。</p> <p>两位乐手在现场讲解音乐制作,鼓机、采样、Loop一类,并非我所喜好,过分科技化的声音,于我而言总是充斥着冰冷与机械感。似乎也没有再多东西好聊,拍些照片埋进正文后面的彩蛋便好。</p> <p>接下来开始说正事。过去几个月里,我在搜集VR设计相关主题的内容资源时,通常会遵循某种原则,目标是帮助包括我在内的传统UX设计师们了解&ldquo;VR&rdquo;这个广阔而复杂的新媒介概念背后的一些最基本的东西,包括设备常识、设计理念、自学方法与心得、基础实践等若干方面。所以今天针对这十五期内容进行归纳时也会采用相同的分类原则。</p> <p>首先按照发布的时间顺序列一份清单出来:</p> <ol> <li> <a href="http://beforweb.com/node/827" target="_blank">从二维界面到虚拟现实(1) - 初识VR</a></li> <li> <a href="http://beforweb.com/node/828" target="_blank">从二维界面到虚拟现实(2) - 基础概念与设计工具</a></li> <li> <a href="http://beforweb.com/node/829" target="_blank">站在VR世界的大门前 - 一些观念,一些经验</a></li> <li> <a href="http://beforweb.com/node/832" target="_blank">站在VR世界的大门前 - 一名UX设计师的VR设计初体验</a></li> <li> <a href="http://beforweb.com/node/833" target="_blank">念叨 - 关于怎样学习VR设计</a></li> <li> <a href="http://beforweb.com/node/835" target="_blank">访C7210:站在VR世界大门前的UX设计师</a></li> <li> <a href="http://beforweb.com/node/837" target="_blank">站在VR世界的大门前 - 自学路上的点点滴滴</a></li> <li> <a href="http://beforweb.com/node/838" target="_blank">关于Google Daydream,设计师应该知道的9件事</a></li> <li> <a href="http://beforweb.com/node/839" target="_blank">站在VR世界的大门前 - 主流VR平台交互特性浅析</a></li> <li> <a href="http://beforweb.com/node/840" target="_blank">站在VR世界的大门前 - VR UI设计案例学习</a></li> <li> <a href="http://beforweb.com/node/841" target="_blank">站在VR世界的大门前 - 故事板在VR设计中的运用</a></li> <li> <a href="http://beforweb.com/node/842" target="_blank">站在VR世界的大门前 - 便捷实用的POV纸质原型</a></li> <li> <a href="http://beforweb.com/node/843" target="_blank">站在VR世界的大门前 - Unity与Cardboard app基础实践(1)</a></li> <li> <a href="http://beforweb.com/node/844" target="_blank">站在VR世界的大门前 - Unity与Cardboard app基础实践(2)</a></li> <li> <a href="http://beforweb.com/node/845" target="_blank">站在VR世界的大门前 - Unity与Cardboard app基础实践(3)</a></li> </ol> <p>然后归纳到五个类别之下,并从每篇文章当中摘一部分关键内容作为引言:</p> <h3> 设备常识</h3> <h4> <a href="http://beforweb.com/node/839" target="_blank">主流VR平台交互特性浅析</a></h4> <p>英文原文作者本身是设计师,主要站在不同硬件平台交互特性的角度进行介绍,涵盖Cardboard、Daydream、Gear VR、Vive、Oculus与PS VR。</p> <p>如今市面上已经有不少VR设备了,而且越来越多的厂商正在加入这一大军。哪一款最适合于你的产品?答案最终取决于产品自身的目标及典型用例。如果你希望将某种简单快捷的快餐型内容体验介绍给尽量多的用户,那么建议你聚焦于Cardboard,并通过iOS和安卓app来承载内容。如果你希望产品可以为用户带来长时间的高品质沉浸体验,那么Vive、Rift或PS VR这类高端设备将是不二之选。</p> <p>无论聚焦于哪一类平台,人机互动模式都是你在设计VR产品的过程中必须时刻考虑到的。长久以来,包括我们自己在内,人们都已习惯于通过鼠标或触屏与数字世界进行互动,然而这些&ldquo;传统&rdquo;的交互模式在VR领域行不通,用户要学习新的操作方法,而我们更需要首先调整设计思维模式;一路上,还有太多东西等待我们去学习和探索。</p> <p><img alt="" src="http://beforweb.com/sites/default/files/images/201606-3/07-vr-devices-interaction-mode.jpg" style="width: 600px; height: 458px;" /></p> <h4> <a href="http://beforweb.com/node/838" target="_blank">关于Google Daydream,设计师应该知道的9件事</a></h4> <p>选择了尚未正式发布、连硬件设备还没有上市的Daydream作为话题,也是因为一方面这是最容易理解与入门、上手的平台形式,另一方面也想具备一些相对超前的时效性。在接下来的几个月便有可能逐渐开始普及开来的最为亲民的平台与产品,快来做些了解也好。</p> <p>在I/O 2016大会上,Google推出了&ldquo;Daydream&rdquo; - 这是一套基于Android的开源平台体系,用以构建高质量的移动VR应用及相关服务。面向Daydream设计开发的app将仅能运行在未来那些经过Google认证的Daydream-ready移动设备上。</p> <p>Daydream是一套全新的VR平台体系,相应的,VR设计师们在为其打造产品时也需要首先了解一系列新的设计原则。在I/O 2016大会上,Google的VR设计团队登台,为设计师与开发者们讲解了面向Daydream平台进行设计的最佳实践方式。设计的关键在于怎样打造舒适、沉浸及独特的VR体验。</p> <p><img alt="" src="http://beforweb.com/sites/default/files/images/201606-3/04-vr-devices-interaction-mode.png" style="width: 600px; height: 604px;" /></p> <h3> 基础概念</h3> <h4> <a href="http://beforweb.com/node/827" target="_blank">从二维界面到虚拟现实(1) - 初识VR</a></h4> <p>我(英文原文作者)是Google的一名产品设计师。2012年,我当时就职的一家名为Sparrow的法国创业公司被Google收购。从那时起,我就一直在Gmail团队效力,并全程参与了旗舰产品Inbox by Gmail的设计工作。</p> <p>这些年下来,始终置身于移动app设计领域,自己也觉得遇到了瓶颈一样。我很希望扩展自己的技能范围,每天学些新东西,让自己在从未接触过的某个领域当中有所斩获。我需要走出自己的舒适地带,通过接受新的挑战来重启职业生命,于是我在2015年4月申请加入了Google VR团队。</p> <p>最初的几周对我来说相当茫然,不过日复一日,零散的认知碎片逐渐组合成完整的拼图,我一点点看清了当前VR设计与开发领域的整体框架,也开始明白了自己希望在其中扮演的角色,以及要成为这样的角色需要掌握哪些技能。</p> <p><img alt="" src="http://beforweb.com/sites/default/files/images/201604-4/01-VR-product-ux-design-basic.png" style="width: 600px; height: 441px;" /></p> <h4> <a href="http://beforweb.com/node/828" target="_blank">从二维界面到虚拟现实(2) - 基础概念与设计工具</a></h4> <p>新的空间维度与沉浸式体验所带来的冲击是前所未有的。要在三维世界当中打造令人舒适的互动体验,你需要了解一些此前可能并未接触过的技术概念与设计原则。而在设计工具方面,传统的纸笔和Sketch(app)等工具依然有着用武之地,此外,Cinema 4D、Maya、Unity等3D设计工具也是我们需要尝试接触和学习的。</p> <p>VR还相当年轻。作为先行者,我们需要去学习和探索的东西太多太多,这也正是我为此而兴奋并最终加入VR团队的原因。摆在我们面前的有挑战,更有机遇,我们理应尽最大的努力到这个新世界当中进行探索,去学习、理解、创造、迭代,如此反复的长久保持下去。</p> <p><img alt="" src="http://beforweb.com/sites/default/files/images/201604-4/04-c2-VR-product-ux-design-basic.jpg" style="width: 600px; height: 338px;" /></p> <h4> <a href="http://beforweb.com/node/829" target="_blank">一些观念,一些经验</a></h4> <p>各位UX/UI设计师们,在兴高采烈的决定投身于VR事业并自掏腰包购买硬件之前,我(英文原文作者)个人建议你们尽可能寻找机会亲身尝试不同类型的VR设备,至少搞清楚它们的区别与优劣。无论对于VR还是AR设备,试着了解每一类平台系统的特性,寻找对于自己来说最为适合的切入点。切莫盲目的跟随潮流,随随便便买上一款HMD,然后自认为可以在一周之内画出一套Material界面控件包一类的东西,好像你在2D界面设计领域当中能够做到的那样。</p> <p>在花了14个月的时间专注于探索AR系统当中的交互模式及视觉语言之后,我可以告诉各位,不同于我们多年来所熟悉的任何平台,VR/AR更加复杂,更加系统化和科学化,与现实层面的关联更为密切。相比于过去,我们必须更加透彻的理解如今所要面对的新平台,以及怎样以形形色色的人类行为特征为核心进行设计。</p> <p>不过你要知道,我们过去所熟悉的产品体验设计原则并没有过时,只是与新技术的复杂特性之间的关联更为密切了。这也是我建议各位多花些时间去尽可能多的体验当前技术成果的原因之一,必须在实际当中尽早建立起整体认知。</p> <p><img alt="" src="http://beforweb.com/sites/default/files/images/201604-4/10-c2-VR-product-ux-design-basic.jpg" style="width: 600px; height: 422px;" /></p> <h3> 自学心得</h3> <h4> <a href="http://beforweb.com/node/833" target="_blank">关于怎样学习VR设计</a></h4> <p>因为最近一段时间的更新都集中在了VR方面,所以逐渐也有些朋友在这边或是微博留言问起究竟应该怎样去学习VR设计。我很想尽自己所能的给到一个什么标准答案,可惜做不到。如今,无论大公司还是小玩家,无论设计还是技术层面,大家都处于摸索的阶段,整个VR领域仍是一片wild west,太多东西有待探索和确立,其中自然也包括设计实践方式以及学习方法本身。</p> <p>况且我个人也只是刚刚接触不久,所以目前只能简单介绍下自己的一些所谓的学习方法供各位参考吧。大致分为三个方面:</p> <ul> <li> 阅读文章资讯</li> <li> 学习设计工具</li> <li> 实际体验</li> </ul> <p><img alt="" src="http://beforweb.com/sites/default/files/images/201605-2/6d4fa8d9gw1f32ybafcvej20qo0zkn3b.jpg" style="width: 600px; height: 800px;" /></p> <h4> <a href="http://beforweb.com/node/835" target="_blank">访C7210:站在VR世界大门前的UX设计师</a></h4> <p>几年前,随着触屏交互与移动设计大潮的汹涌而至,我们已经经历过一次思维模式与设计范式的重大调整;而在我看来,对于我们这些&ldquo;传统&rdquo;UX设计师来说,如今这次媒介级的跨越所带来的挑战要远远高于之前的那一次。</p> <p>在过去的十多年甚至是几十年的时间里,人机界面设计模式基本局限于二维框架当中,人与二维屏幕的互动占据着绝对主导的地位,无论在桌面时代还是移动时代均是如此。而VR给我们带来了真正意义上的第三维度,人与数字世界的互动介质也从二维屏幕转变成为三维空间。设计师们更多需要考虑的是怎样在一个接近于现实世界的虚拟空间当中充分利用人类已有的行为习惯来打造最为自然的交互模式,而不是顺从于我们多年来所习惯的思维模式,将二维人机互动模式盲目的迁移到三维世界当中。这些原则说起来容易,但毕竟是全新的信息媒介,作为设计师,不经过充分的实境体验,不去亲身感受三维世界当中的特性与痛点,那么所谓的&ldquo;用户体验&rdquo;便无从设计。有了实际的体验以及基于这些体验的思考,慢慢梳理自己的方向和目标,上手恰当的设计工具进行预习,一步一步循序渐进的将自己推向VR设计的学习正轨,这是我们目前需要做的。</p> <p><img alt="" src="http://beforweb.com/sites/default/files/images/201605-2/1_pic.jpg" style="width: 600px; height: 800px;" /></p> <h4> <a href="http://beforweb.com/node/837" target="_blank">自学路上的点点滴滴</a></h4> <p>我(英文原文作者)有幸参加了2015年的Google I/O大会,并领到了一个免费的Cardboard。回到家,戴上这纸盒遨游了那么一阵子,我便开始为VR世界所着迷。怎样才能投身于这个全新的技术领域?我思考起这样的问题,只是看不到明确的答案。在这之前,我从没想过自己会涉足游戏设计或3D建模一类 - 这些对我来说有些遥不可及,听上去就让人觉得有些惊悚,像是要光着脚板去爬山一样的感觉。不过话虽如此,总还是要去尽力尝试才好,于是我走上了VR设计的探索与学习之路。</p> <p>据我当时所了解,Unity 3D应该是时下最为主流的设计引擎了,于是我下载了一套免费的个人版本,开始摸索。不过程序一启动,我就被界面吓到了,各种面板和窗口,无数参数选项,满眼都是功能,完全不知如何下手。我突然开始理解为什么有很多同行刚一开始尝试就决定放弃了。我需要重新思考一下。</p> <p>我决定后退一步,寻找一种更适合自己的学习路线。接下来的道路很漫长,我逐渐摸索,在VR设计与开发的研究上花费了几个月的时间,期间还做了个demo出来。本文便是我一路自学下来所得到的一些经验与感受。</p> <p><img alt="" src="http://beforweb.com/sites/default/files/images/201606-1/03-vr-design-development-learning-experience.png" style="width: 600px; height: 269px;" /></p> <h3> 项目经验</h3> <h4> <a href="http://beforweb.com/node/832" target="_blank">一名UX设计师的VR设计初体验</a></h4> <p>我(英文原文作者)是一名产品设计师,一名自诩的用户体验专家,职责涵盖信息架构设计、交互及UI设计。目前,我正在一家主流的影视制作公司担任高级UX设计师一职,所负责的web及移动app产品涉及企业与消费市场两大方面。</p> <p>去年,我转岗到内部的一个VR团队担任UX设计leader。我个人来说并不认为自己有足够的资格来担任这个职位,毕竟对于VR这个全新的信息媒介,我几乎没有任何相关的经验背景。本文就是我在这个新领域当中进行设计初体验时所得到的一些经验分享。我相信如今有很多设计师和我一样,一方面不具备相关的经验,一方面又希望进入VR领域去扩展技能、开拓视野。所以希望本文能够为各位带来一些指引与帮助。</p> <p><img alt="" src="http://beforweb.com/sites/default/files/images/201605-1/04-ux-designer-vr-experience.png" style="width: 600px; height: 315px;" /></p> <h4> <a href="http://beforweb.com/node/840" target="_blank">VR UI设计案例学习</a></h4> <p>最近,我(英文原文作者)在一个安卓VR app项目当中负责界面的设计开发工作。对我个人来说,这是一片从未涉足过的全新领域,因此感到无比兴奋,并希望将自己一路上所学到的经验分享给各位,同时也想通过这种形式对自己的一些设计方法和解决方案进行总结。</p> <p>本文话题聚焦在整个设计流程当中的以下几个阶段:</p> <ul> <li> 探索与研究</li> <li> 技术需求与局限</li> <li> 脚本、信息架构、功能与内容</li> <li> 草图</li> <li> 界面原型</li> <li> GUI设计</li> </ul> <p><img alt="" src="http://beforweb.com/sites/default/files/images/201607-1/05-case-study-vr-ui-design.jpg" style="width: 600px; height: 416px;" /></p> <h3> 实战方法</h3> <h4> <a href="http://beforweb.com/node/841" target="_blank">故事板在VR设计中的运用</a></h4> <p>作为一种高效快捷的沟通方式,故事板(storyboard)在影视、游戏和网页设计等领域当中十分常见,通常用于快速展示空间位置、镜头组、运动、互动关系等方面的设计概念。一直以来,我们都习惯于通过故事板的边框来界定场景范围;不过如果场景本身没有所谓的边界,无法通过有限的矩形来完整呈现,我们又该如何呢?</p> <p>实际上,我们只需换个角度来看问题 - 过去的方式是在故事板当中定义目标对象与场景边界之间(或界面元素与屏幕边界之间)的相对位置关系;而对于没有边界的VR世界来说,我们需要定义的则是目标对象与用户之间的相对位置关系。某种意义上讲,这是名副其实的&ldquo;以用户为中心&rdquo;的设计思路,只是对于习惯了传统方式的设计师们来说,一开始可能会感到有些陌生。</p> <p><img alt="" src="http://beforweb.com/sites/default/files/images/201607-2/03-vr-design-storyboard.png" style="width: 600px; height: 189px;" /></p> <h4> <a href="http://beforweb.com/node/842" target="_blank">便捷实用的POV纸质原型</a></h4> <p>和很多人一样,我(英文原文作者)在实际体验过VR之后,便开始为其中所蕴含的各种可能性及巨大的潜力而着迷。最近一段时间,我也终于有机会和团队一起去动手构建VR世界了。</p> <p>面向全新的信息媒介进行设计,期间势必遇到各种独特的挑战;当然,相应的学习与探索的机遇同样并存。譬如我在刚刚开始构思主场景的时候便发现了一些从前在设计2D界面时未曾遇到过的麻烦。所谓主场景,也就是用户戴上头显并加载了我们的app之后看到的第一个场景。</p> <p>挑战在于,我所熟知的概念原型制作方法当中,没有哪种既能清晰的呈现出用户及互动元素在虚拟环境中的位置关系,同时又非常便于团队之间进行沟通和协作。经过一番探索,我找到了一种非常简单高效的实践方式,而本文便是相关的实战经验汇总。</p> <p><img alt="" src="http://beforweb.com/sites/default/files/images/201607-3/01-vr-design-pov-paper-prototyping.jpg" style="width: 600px; height: 451px;" /></p> <h4> <a href="http://beforweb.com/node/843" target="_blank">Unity与Cardboard app基础实践(1)</a></h4> <p>了解怎样使用Unity与Google VR SDK来制作最为简单的VR demo app,并部署到实际设备当中,然后通过Cardboard进行体验。本期甚至无需自己制作任何东西 - 尝试将SDK中自带的demo项目放进iPhone便好 - 不去实际操作也不成问题,毕竟涉及到Xcode、Unity的使用;单纯了解到一些&ldquo;流程&rdquo;方面的常识也是收获。</p> <p>本期的英文原文是Google官方的一篇文档,内容略干涩,几乎没有配图,于是我做了一定程度的编译,并使用了自己操作时的截图作为演示。</p> <p><img alt="" src="http://beforweb.com/sites/default/files/images/201607-4/05.png" style="width: 600px; height: 338px;" /></p> <h4> <a href="http://beforweb.com/node/844" target="_blank">Unity与Cardboard app基础实践(2)</a></h4> <p>通过Unity构建一些简单的3D环境,然后打包到app当中供Cardboard使用。本文相比于上期来说增加了一些更具体的东西,包括从Unity商店下载环境资源、在项目中使用Google VR Unity SDK提供的组件及第三方脚本等等,实战性略强些。不过还是那句话,读过之后不去实际操作也不成问题,作为设计师,在目前单纯去解到一些&ldquo;流程&rdquo;方面的常识也是收获。</p> <p>此外和上期类似,这次的编译程度也比较大,因为原文成文的时间较早,之后无论是Unity相关界面还是Google提供的SDK使用方式都有变化,包括第三方脚本代码亦需要进行手动变更;几乎所有的配图都替换成了我自己实际操作时的截图。</p> <p><img alt="" src="http://beforweb.com/sites/default/files/images/201607-5/02.png" style="width: 600px; height: 338px;" /></p> <h4> <a href="http://beforweb.com/node/845" target="_blank">Unity与Cardboard app基础实践(3)</a></h4> <p>&ldquo;Unity与Cardboard app基础实践&rdquo;的话题之前已经做过两期,均是译文。第三期直接自己写了,两方面考虑:一是目前能看到的Cardboard实战文章或视频教程大多是基于旧版SDK,而非Daydream发布之后更新的大一统版本的&ldquo;Google VR&rdquo;SDK,时效性上有问题,翻译过程中需要做大量的修改工作,包括代码和配图等等方面;另外自己也希望将之前学到的若干知识点汇总在一个完整的小范例当中进行实践,既然方法已经学到了,就整合到一起,一边梳理一边将流程分享出来。</p> <p>我们接下来将要一起捣鼓的东西,简单描述一下大约就是借来一些免费的Unity资源,搭起3D场景,在里面放上一两个没有任何意义的3D对象,使用Google提供的SDK组件模拟VR视野,当视线聚焦在3D对象上时,VR准星会发生形变,同时3D对象会改变外观,暗示互动性;而通过鼠标模拟Cardboard按钮点击事件还可以使3D对象产生位移。大致就是这样。如果有兴趣打包成app放到iPhone当中,便可以直接塞到Cardboard里面以真实VR的方式进行体验了。</p> <p>提炼一下具体的实践要点,包括:</p> <ul> <li> 向Unity项目中导入Google VR Unity SDK。</li> <li> 在Unity Asset Store中浏览并下载免费资源包。</li> <li> 调用Google VR相关组件,构建VR模式。</li> <li> 向场景(Scene)中添加交互对象。</li> <li> 编写代码,制定凝视交互的规则。</li> <li> 构建事件系统及触发规则。</li> <li> 通过Xcode将VR app部署到iPhone当中。</li> </ul> <p><img alt="" src="http://beforweb.com/sites/default/files/images/201608-1/44.png" style="width: 600px; height: 338px;" /></p> <h3> 彩蛋</h3> <p>已是周日下午,整理正文和种彩蛋,准备发布。从茶水间的冷柜里面拿出一根盐水冰棍吃掉 - 唯一没有被抢光的品种。接下来还有跑步机要去践踏(请加油,膝盖君),有美味的晚餐要去吃掉,或许还有电影可以看一看。</p> <p>与我一同悠然片刻 - Louise,美妙的萨克斯和钢琴,来自Lester Young与Teddy Wilson(Pres and Teddy)。</p> <p><iframe border="0" frameborder="no" height="86" marginheight="0" marginwidth="0" src="http://music.163.com/outchain/player?type=2&amp;id=1659195&amp;auto=0&amp;height=66" width="330"></iframe></p> <p>昨天的Daily Vinyl Weekend活动期间的一些照片。JZ Lips Radio的主持人与DJ有的没的交流着巴西音乐一类(我总会忘记他的名字,上次来both便已见过):</p> <p><img alt="" src="/sites/default/files/images/201608-2/IMG_0115.JPG" style="width: 450px; height: 600px;" /></p> <p>两位乐手的现场表演。但凡海归总爱把&ldquo;我中文不好&rdquo;这句话挂在嘴边,纵使早已被自己满口的北方爷们儿腔调出卖,无趣呢:</p> <p><img alt="" src="/sites/default/files/images/201608-2/IMG_0113.JPG" style="width: 450px; height: 600px;" /></p> <p>集市里的一些唱片(最终买来三张老爵士,忘记拍照片,下次再放):</p> <p><img alt="" src="/sites/default/files/images/201608-2/IMG_0119.JPG" style="width: 450px; height: 600px;" /></p> <p><img alt="" src="/sites/default/files/images/201608-2/IMG_0114.JPG" style="width: 450px; height: 600px;" /></p> <p>既然来到both,便少不了去旁边的城市雕塑艺术中心拍几张照片回来(实际上也是去厕所的必经之路):</p> <p><img alt="" src="/sites/default/files/images/201608-2/IMG_0117.JPG" style="width: 450px; height: 600px;" /></p> <p><img alt="" src="/sites/default/files/images/201608-2/IMG_0116.JPG" style="width: 450px; height: 600px;" /></p> <p><img alt="" src="/sites/default/files/images/201608-2/IMG_0118.JPG" style="width: 450px; height: 600px;" /></p> <p>晚间,回转寿司与拉面的诱惑是难以抵挡的:</p> <p><img alt="" src="/sites/default/files/images/201608-2/IMG_0151.JPG" style="width: 450px; height: 600px;" /></p> <p>此外,八月第二批黑胶也已到手,最棒的一张莫过于Count Basie Feat. Lester Young &amp; Billie Holiday的1937年现场录音,此外还有Oscar Peterson及Benny Goodman等若干:</p> <p><img alt="" src="/sites/default/files/images/201608-2/IMG_0080.JPG" style="width: 450px; height: 600px;" /></p> <p><img alt="" src="/sites/default/files/images/201608-2/IMG_0081.JPG" style="width: 450px; height: 600px;" /></p> <p><img alt="" src="/sites/default/files/images/201608-2/IMG_0083.JPG" style="width: 450px; height: 600px;" /></p> <p>所以,本周便是这样?便是这样。下次见,各位。</p> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><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/206" typeof="skos:Concept" property="rdfs:label skos:prefLabel">虚拟现实</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/205" typeof="skos:Concept" property="rdfs:label skos:prefLabel">VR</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/64" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原型</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/209" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Cardboard</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/210" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Google VR</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/208" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Unity</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/211" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Daydream</a></li></ul> Sun, 14 Aug 2016 08:22:27 +0000 C7210 846 at http://beforweb.com http://beforweb.com/node/846#comments 站在VR世界的大门前 - Unity与Cardboard app基础实践(3) http://beforweb.com/node/845 <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://beforweb.com/sites/default/files/article-thumbs/icon-logo-cardboard-google-vr-ux-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>因为有的没的一些事情,推迟到周中来做更新,抱歉,抱歉。从上周五夜里开始念叨前言,到周末零零散散写了一些正文(本周不是译文),期间忙些家事、任性的放了空、看了些片子,一直持续到今天才完成配图一类,自己也觉得有些拖沓,好像节气上的立秋之后却依然难熬的烈日与暑热,夏天怎样也结束不掉的样子。以上是前言的前言,下面是前言。who cares.</p> <p>坦承本周并没有明亮如皓月一般的心情来念叨太多。近段时间家中的一些状况让自己时不时的难以打起精神。几年来每逢夏季便总要与生老病死、分崩离析一类的事情有所瓜葛,真实到无从躲闪,你期待我期待些什么?悠然洒脱的告诉自己thing&rsquo;s will be just fine然后一切便如太鼓达人里面的寿司卷一样玲珑剔透生机盎然起来?很想将自己深深埋在什么东西里面安心睡一会,一些冰冷而坚硬的什么东西,或是一些柔软而拥有体温的什么东西。你猜我想到了些什么?</p> <p>既没有心情敲字,又义无反顾的感到若不将另外一些什么东西依托于文字承载出来便真的愧对于疲惫而乖僻的神经所努力撑过的时而脆弱时而木然时而亢奋时而抑郁时而乖巧时而无比幸福的一周又一周。</p> <p>这便是所谓&ldquo;絮叨前言&rdquo;的意义所在。我的同事称之为&ldquo;叨逼叨&rdquo;。表意精准且万分优雅的三个字。</p> <p>说起来,近日有朋友列了一份好奇宝宝问题清单发给了我 - 尽是关于人生、处世、奋斗...一类,约莫有九个,号称还是从一百来个问题里筛出来的。也忍心,将这样一份清单明晃晃的摆在偌大一个人生输家面前,怎样看都像是法制节目记者隔着牢笼一本正经的采访失足青年那样。后者的脸上至少还会似有若无半推半就的打码,而我的底细你们都知道。</p> <!--break--><p>矫情如我,确是乐于在有时间时回答若干。&ldquo;回答&rdquo;二字并不恰当,毕竟算不得访谈,或是&ldquo;有问必答的知心老人时段&rdquo;一类,只是自己慢慢也会若隐若现的有些&ldquo;整理人生简历&rdquo;的欲望,形如职业履历那样,不过会更多的聚焦于非职业属性。是否需要理由,譬如帮助自己更清晰、更有条理的观察与寻找自我,或是接纳更多人在保持着特定距离的前提下了解自己?据说人上了年纪便会想要做这样一类无聊却尚可自我慰藉的事情。在一些柔软而拥有体温的什么东西里做着。</p> <p>关于正经事(真的吗?这么快就要说正经事了?),之前同事看到我在Unity里捣鼓代码和截图,问:&ldquo;这些四交互色计丝需要做的四吗?&rdquo; 我无不坦诚的回答:&ldquo;不四。&rdquo; 从来也只是自娱自乐而已,就连所谓交互设计的本职工作亦是如此,无非恰巧并幸运的可以用来作为工作来做罢了。时不时会有称自己为&ldquo;lucky bastard&rdquo;的欲望,不过想想看也不是很恰当。</p> <p>&ldquo;<a href="http://www.beforweb.com/node/844" target="_blank">Unity与Cardboard app基础实践</a>&rdquo;的话题之前已经做过两期,均是译文。第三期直接自己写了,两方面考虑:一是目前能看到的Cardboard实战文章或视频教程大多是基于旧版SDK,而非Daydream发布之后更新的大一统版本的&ldquo;Google VR&rdquo;SDK,时效性上有问题,翻译过程中需要做大量的修改工作,包括代码和配图等等方面;另外自己也希望将之前学到的若干知识点汇总在一个完整的小范例当中进行实践,既然方法已经学到了,就整合到一起,一边梳理一边将流程分享出来。</p> <p>我们接下来将要一起捣鼓的东西,简单描述一下大约就是借来一些免费的Unity资源,搭起3D场景,在里面放上一两个没有任何意义的3D对象,使用Google提供的SDK组件模拟VR视野,当视线聚焦在3D对象上时,VR准星会发生形变,同时3D对象会改变外观,暗示互动性;而通过鼠标模拟Cardboard按钮点击事件还可以使3D对象产生位移。大致就是这样。如果有兴趣打包成app放到iPhone当中,便可以直接塞到Cardboard里面以真实VR的方式进行体验了。</p> <p>提炼一下具体的实践要点,包括:</p> <ul> <li> 向Unity项目中导入Google VR Unity SDK。</li> <li> 在Unity Asset Store中浏览并下载免费资源包。</li> <li> 调用Google VR相关组件,构建VR模式。</li> <li> 向场景(Scene)中添加交互对象。</li> <li> 编写代码,制定凝视交互的规则。</li> <li> 构建事件系统及触发规则。</li> <li> 通过Xcode将VR app部署到iPhone当中。</li> </ul> <h3> 需要准备的原料</h3> <ul> <li> <a href="http://unity3d.com/get-unity">Unity</a>:下载并安装最新的免费个人版本。</li> <li> <a href="https://github.com/googlesamples/cardboard-unity">Google VR Unity SDK</a>:下载并解压,其中包含了SDK以及Google官方提供范例项目。</li> <li> Cardboard:Google Cardboard或其他同类设备均可。</li> <li> <a href="https://developer.apple.com/download/">Xcode</a>:用于将最终打包的app部署到iPhone当中。体量庞大,如果不准备实际部署也可忽略。</li> </ul> <h3> 布置3D环境与交互组件</h3> <p>打开Unity,新建3D项目:</p> <p><img alt="" src="/sites/default/files/images/201608-1/01.png" style="width: 600px; height: 363px;" /></p> <p>点击菜单栏中的<strong>Assets &gt; Import Package &gt; Custom Package</strong>,选择之前解压缩的Google VR Unity SDK当中的<strong>GoogleVRForUnity.unitypackage</strong>:</p> <p><img alt="" src="/sites/default/files/images/201608-1/02.png" style="width: 600px; height: 338px;" /></p> <p><img alt="" src="/sites/default/files/images/201608-1/03.png" style="width: 600px; height: 338px;" /></p> <p>在接下来弹出的<strong>Import Unity Package</strong>对话框中,确保所有资源都有被勾选,然后点击<strong>Import</strong>按钮:</p> <p><img alt="" src="/sites/default/files/images/201608-1/04.png" style="width: 600px; height: 422px;" /></p> <p>导入完成后,<strong>Project</strong>面板当中的资源路径看上去应该是这样的:</p> <p><img alt="" src="/sites/default/files/images/201608-1/05.png" style="width: 600px;" /></p> <p>Google VR Unity SDK布置完毕,下面我们来找一些现成的环境素材。点击<strong>Asset Store</strong>面板,在内嵌页面的右侧导航当中找到<strong>3D Models &gt; Enviroments</strong>,接下来可以筛选出所有的免费模型,找到自己喜欢的,确认资源中包含.unity场景文件,例如下图当中我所选用的Moon Landscape资源包所提供的Demo Scene(接下来所涉及到的相关文件操作均以Moon Landscape为例):</p> <p><img alt="" src="/sites/default/files/images/201608-1/06.png" style="width: 600px; height: 338px;" /></p> <p>建议在这里挂好VPN,然后点击内嵌页中的<strong>Download</strong>或<strong>Import</strong>(如果之前已经下载过)按钮。下载完成后,在弹出的<strong>Import Unity Package</strong>对话框中,确保所有资源都有被勾选,然后点击Import按钮:</p> <p><img alt="" src="/sites/default/files/images/201608-1/07.png" style="width: 600px; height: 439px;" /></p> <p>导入完成后,在<strong>Project</strong>面板的<strong>Assets</strong>管理器当中找到刚刚下载的资源包里的demo场景文件:</p> <p><img alt="" src="/sites/default/files/images/201608-1/08.png" style="width: 600px; height: 332px;" /></p> <p>双击打开该文件,<strong>Scene</strong>面板当中会出现<strong>demo</strong>场景,我们接下来就在这里工作:</p> <p><img alt="" src="/sites/default/files/images/201608-1/09.png" style="width: 600px;" /></p> <p>想要置身于3D环境当中以第一人称视角观察世界,我们需要&ldquo;眼睛&rdquo;,即Unity提供的Camera控件。新建的空白场景当中不包含任何Camera控件,我们需要自己来添加。点击菜单栏当中的<strong>Game Object &gt; Camera</strong>:</p> <p><img alt="" src="/sites/default/files/images/201608-1/10.png" style="width: 600px;" /></p> <p>确保新添加的Camera控件被选中(如果没有,可以在左侧Hierarchy面板当中点选),在右侧<strong>Inspector</strong>面板当中点击Tag下拉菜单,选择&ldquo;<strong>MainCamera</strong>&rdquo;:</p> <p><img alt="" src="/sites/default/files/images/201608-1/11.png" style="width: 600px;" /></p> <p>由于Moon Landscape场景当中的地形会高出水平面,所以我们需要调整Camera的位置,使其位于地面以上。在&ldquo;<strong>Postion</strong>&rdquo;当中,为&ldquo;<strong>Y</strong>&rdquo;输入恰当的数值,譬如&ldquo;25&rdquo;(或任何能够确保Camera垂直方向的位置略微高出地面的数值):</p> <p><img alt="" src="/sites/default/files/images/201608-1/12.png" style="width: 600px; height: 153px;" /></p> <p>同样在<strong>Inspector</strong>面板当中,点击底部的<strong>Add Component</strong>按钮,输入关键词&ldquo;Physics&rdquo;,点选&ldquo;<strong>Physics Raycaster</strong>&rdquo;(使Camera视线可以与3D对象进行互动):</p> <p><img alt="" src="/sites/default/files/images/201608-1/13.png" style="width: 600px; height: 344px;" /></p> <p>一番设置之后,Camera控件的<strong>Inspector</strong>面板看上去应该是这样的:</p> <p><img alt="" src="/sites/default/files/images/201608-1/14.png" style="width: 600px;" /></p> <p>接下来我们需要添加Google VR相关组件。在<strong>Project</strong>面板的资源列表中找到<strong>Assets &gt; GoogleVR &gt; Prefabs</strong>文件夹,将其中的<strong>GvrViewerMain</strong>拖放到左侧的<strong>Hierarchy</strong>面板中(这一步骤相当于为Unity项目添加Google VR模式,包括视觉样式及互动机制等等):</p> <p><img alt="" src="/sites/default/files/images/201608-1/15.png" style="width: 600px; height: 379px;" /></p> <p><img alt="" src="/sites/default/files/images/201608-1/16.png" style="width: 600px;" /></p> <p>确保<strong>GvrViewerMain</strong>被选中,在右侧<strong>Inspector</strong>面板当中调整&ldquo;<strong>Screen Size</strong>&rdquo;和&ldquo;<strong>Viewer Type</strong>&rdquo;的值,选择需要部署的手机型号及Cardboard款式:</p> <p><img alt="" src="/sites/default/files/images/201608-1/17.png" style="width: 600px;" /></p> <p>接下来我们要向Camera视野当中添加准星,用于接下来的凝视交互。在<strong>Project</strong>面板的资源列表中找到<strong>Assets &gt; GoogleVR &gt; Prefabs &gt; UI</strong>文件夹,将其中的<strong>GvrReticle</strong>拖放到左侧<strong>Hierarchy</strong>面板中的Camera控件上,使其成为Camera的子元素:</p> <p><img alt="" src="/sites/default/files/images/201608-1/18.png" style="width: 600px; height: 400px;" /></p> <p><img alt="" src="/sites/default/files/images/201608-1/19.png" style="width: 600px;" /></p> <p>OK我们来预览一下当前场景的实际效果。点击顶部的<strong>Play</strong>按钮,界面会自动切换到Game模式。夜空、月球表面、Cardboard分屏、准星,还不坏(此时可以按住键盘上的<strong>alt</strong>或<strong>control</strong>键,同时移动鼠标,测试一下主视角的移动方式):</p> <p><img alt="" src="/sites/default/files/images/201608-1/20.png" style="width: 600px;" /></p> <p>再次点击顶部的<strong>Play</strong>按钮,退出Game模式。接下来我们要向场景当中添加互动对象。立方体(Cube)是Unity当中最基础最简单的3D对象 - 点击菜单栏当中的<strong>Game Object &gt; 3D Object &gt; Cube</strong>,一个立方体便会被添加到场景当中:</p> <p><img alt="" src="/sites/default/files/images/201608-1/21.png" style="width: 600px;" /></p> <p><img alt="" src="/sites/default/files/images/201608-1/22.png" style="width: 600px;" /></p> <p>我们需要将立方体置于Camera默认视线的前方(选中Camera控件即可查看其视野方向及范围,便于确定&ldquo;前方&rdquo;的具体位置)。此外,冷寂的月球环境让我想到了《2001太空漫游》当中的一些情景(斯坦利&middot;库布里克指导,1968年的鸿篇巨制,有谁看过没?),于是我希望将立方体修改为电影中的黑石碑样式。选中Cube,在右侧<strong>Inspector</strong>面板当中调整&ldquo;<strong>Position</strong>&rdquo;和&ldquo;<strong>Scale</strong>&rdquo;的值:</p> <p><img alt="" src="/sites/default/files/images/201608-1/23.png" style="width: 600px; height: 149px;" /></p> <p>调整之后Cube的形状与位置大致如下图所示:</p> <p><img alt="" src="/sites/default/files/images/201608-1/24.png" style="width: 600px;" /></p> <p>在这个简单的范例当中,3D环境及交互组件就是这些。下面我们要做一些代码工作了。</p> <h3> 编写代码,设定交互规则</h3> <p>在<strong>Assets</strong>面板当中点击鼠标右键,选择<strong>Create &gt; C# Script</strong>,将新添加的代码文件命名为&ldquo;<strong>Interactions</strong>&rdquo;:</p> <p><img alt="" src="/sites/default/files/images/201608-1/25.png" style="width: 600px;" /></p> <p>双击该文件,Unity会自动加载MonoDevelop代码编辑器。清除掉文件当中自带的全部内容,替换为以下代码:</p> <div> <pre class="brush:cpp;"> using UnityEngine; using System.Collections; public class Interactions : MonoBehaviour { public void SetGazedAt(bool gazedAt) { GetComponent&lt;Renderer&gt;().material.color = gazedAt ? Color.red : Color.black; } public void MoveUp() { transform.position += new Vector3 (0f, 1f, 0f); } void Start() { SetGazedAt(false); } public void OnGazeEnter() { SetGazedAt(true); } public void OnGazeExit() { SetGazedAt(false); } public void OnGazeTrigger() { MoveUp(); } }</pre></div> <p><img alt="" src="/sites/default/files/images/201608-1/26.png" style="width: 600px; height: 337px;" /></p> <p>代码本身并不复杂,简单解释一下逻辑。我们在Interactions类当中总共声明了6个函数:</p> <ul> <li> <strong>SetGazeAt()</strong>:根据传入的条件,判断交互对象(譬如立方体)应该呈现出红色还是黑色外观。</li> <li> <strong>MoveUp()</strong>:将交互对象沿Y轴向上移动一个单位的距离。</li> <li> <strong>Start()</strong>:调用特定的功能进行初始化设定(SetGazeAt,参数为&ldquo;false&rdquo;)。</li> <li> <strong>OnGazeEnter()</strong>:当准星聚焦于交互对象时,调用特定的功能(SetGazeAt,参数为&ldquo;true&rdquo;)。</li> <li> <strong>OnGazeExit()</strong>:当准星不再聚焦于交互对象时,调用特定的功能(SetGazeAt,参数为&ldquo;false&rdquo;)。</li> <li> <strong>OnGazeTrigger()</strong>:准星聚焦于交互对象时,用户按压Cardboard上的按钮,则调用特定的功能(MoveUp)。</li> </ul> <h3> 构建事件系统</h3> <p>代码搞定,接下来需要将事件处理系统添加到项目当中,使交互规则可以在视线与交互对象之间运作起来。点击菜单栏当中的<strong>Game Object &gt; UI &gt; Event System</strong>,将其添加到左侧的<strong>Hierarchy</strong>面板中:</p> <p><img alt="" src="/sites/default/files/images/201608-1/27.png" style="width: 600px;" /></p> <p>确保Event System处于选中态,在右侧<strong>Inspector</strong>面板当中点击底部的<strong>Add Component</strong>按钮,输入关键词&ldquo;Gaze&rdquo;,点选&ldquo;<strong>GazeInputModule</strong>&rdquo;,向事件系统中添加基于凝视的交互模组:</p> <p><img alt="" src="/sites/default/files/images/201608-1/28.png" style="width: 600px;" /></p> <p>我们需要提升凝视交互规则的优先级,使其不会被默认规则覆盖,否则在实际注视Cube对象时,准星的行为会有异常。点击&ldquo;<strong>Gaze Input Module</strong>&rdquo;标题右侧的齿轮图标,在下拉列表中选择&ldquo;<strong>Move Up</strong>&rdquo;,使&ldquo;<strong>Gaze Input Module</strong>&rdquo;整体移至&ldquo;<strong>Standalone Input Module</strong>&rdquo;上方:</p> <p><img alt="" src="/sites/default/files/images/201608-1/29.png" style="width: 600px;" /></p> <p><img alt="" src="/sites/default/files/images/201608-1/30.png" style="width: 600px; height: 284px;" /></p> <p>我们还需要使Cube能够响应代码定义的交互事件规则。在左侧的<strong>Hierarchy</strong>面板中选中Cube对象,在右侧<strong>Inspector</strong>面板当中点击底部的<strong>Add Component</strong>按钮,找到&ldquo;<strong>Interactions</strong>&rdquo;,将代码添加到Cube对象当中:</p> <p><img alt="" src="/sites/default/files/images/201608-1/31.png" style="width: 600px; height: 650px;" /></p> <p>再次点击<strong>Add Component</strong>按钮,输入&ldquo;Event&rdquo;,点选&ldquo;<strong>Event Trigger</strong>&rdquo;:</p> <p><img alt="" src="/sites/default/files/images/201608-1/32.png" style="width: 600px; height: 377px;" /></p> <p>接下来我们需要将特定的交互动作与代码中设定的规则关联起来。点击<strong>Add New Event Type</strong>按钮,选择&ldquo;<strong>PointerEnter</strong>&rdquo;:</p> <p><img alt="" src="/sites/default/files/images/201608-1/33.png" style="width: 600px; height: 194px;" /></p> <p>点击&ldquo;<strong>None (Object)</strong>&rdquo;右侧的按钮,在弹出的列表当中选择&ldquo;Cube&rdquo;自身:</p> <p><img alt="" src="/sites/default/files/images/201608-1/34.png" style="width: 600px; height: 142px;" /></p> <p>然后在右侧的Function列表中选择<strong>Interactions &gt; OnGazeEnter()</strong>,也就是我们之前在Interactions代码文件当中定义的OnGazeEnter函数:</p> <p><img alt="" src="/sites/default/files/images/201608-1/36.png" style="width: 600px;" /></p> <p>这一系列设置相当于告诉系统,当准星移动到Cube对象上时,执行OnGazeEnter函数当中定义的行为,即通过SetGazeAt()将Cube的外观设置为红色。</p> <p>同理,我们还需要告诉系统当准星离开Cube对象时,或是在Cube对象上按压Cardboard按钮时需要执行怎样的行为。</p> <p>点击&ldquo;<strong>Event Trigger</strong>&rdquo;底部的<strong>Add New Event Type</strong>按钮,选择&ldquo;<strong>PointerExit</strong>&rdquo;:</p> <p><img alt="" src="/sites/default/files/images/201608-1/37.png" style="width: 600px; height: 254px;" /></p> <p>确保事件对象为&ldquo;Cube&rdquo;,然后在右侧的Function列表中选择<strong>Interactions &gt; OnGazeExit()</strong>:</p> <p><img alt="" src="/sites/default/files/images/201608-1/38.png" style="width: 600px;" /></p> <p>同理,再次点击&ldquo;<strong>Event Trigger</strong>&rdquo;底部的<strong>Add New Event Type</strong>按钮,选择&ldquo;<strong>PointerClick</strong>&rdquo;:</p> <p><img alt="" src="/sites/default/files/images/201608-1/39.png" style="width: 600px;" /></p> <p>确保事件对象为&ldquo;Cube&rdquo;,然后在右侧的Function列表中选择<strong>Interactions &gt; OnGazeTrigger()</strong>:</p> <p><img alt="" src="/sites/default/files/images/201608-1/40.png" style="width: 600px;" /></p> <h3> 预览</h3> <p>至此,我们的范例已经基本完工,不如预览一下自己的工作成果。点击顶部的<strong>Play</strong>按钮,进入Game模式:</p> <p><img alt="" src="/sites/default/files/images/201608-1/41.png" style="width: 600px;" /></p> <p>按住<strong>alt</strong>键,同时移动鼠标,使准星聚焦于黑石碑,会发现石碑变成了红色,准星本身也变成了环状(提示所注视的对象具有交互特性):</p> <p><img alt="" src="/sites/default/files/images/201608-1/42.png" style="width: 600px;" /></p> <p>点按鼠标,石碑会一点点升起:</p> <p><img alt="" src="/sites/default/files/images/201608-1/43.png" style="width: 600px;" /></p> <p>说无聊也是够无聊的,但事已至此,完全可以给自己一点掌声,因为我们学会了一些很基础同时也很重要的东西。你还可以继续尝试做些额外的工作,譬如复制几个石碑,排成一行,看上去会很酷,同时也可以帮你了解在Unity当中操作3D对象的基本方法。如果无需担心设备的性能问题,又足够无聊,复制出几万个黑石碑,混乱的堆放起来,像《2010太空漫游》(《2001太空漫游》续作)那样将整个星球完全吞噬掉也无妨。</p> <p><img alt="" src="/sites/default/files/images/201608-1/44.png" style="width: 600px;" /></p> <h3> 打包app,在iPhone上运行</h3> <p>接下来的步骤属于选做作业,如果手头有Cardboard,那么实际体验一下终归会更有成就感一些。具体的实现流程和之前&ldquo;<a href="http://www.beforweb.com/node/843" target="_blank">Unity与Cardboard app基础实践(1)</a>&rdquo;当中介绍的相同。</p> <p>点击菜单栏中的<strong>File &gt; Build Settings</strong>:</p> <p><img alt="" src="/sites/default/files/images/201608-1/45.png" style="width: 600px;" /></p> <p>在<strong>Build Settings</strong>窗口中,选择<strong>Platforms</strong>列表里的&ldquo;<strong>iOS</strong>&rdquo;,然后点击列表下方的<strong>Switch Platform</strong>按钮:</p> <p><img alt="" src="/sites/default/files/images/201608-1/46.png" style="width: 600px;" /></p> <p>等待素材导入完成,然后点击<strong>Build Settings</strong>窗口中的<strong>Player Settings</strong>按钮,此时右侧的<strong>Inspector</strong>面板当中会出现<strong>PlayerSettings</strong>选项区:</p> <p><img alt="" src="/sites/default/files/images/201608-1/47.png" style="width: 600px;" /></p> <p>找到&ldquo;<strong>Settings for iOS</strong>&rdquo;部分,点击其中的&ldquo;<strong>Resolution and Presentation</strong>&rdquo;使其展开,将&ldquo;<strong>Default Orientation</strong>&rdquo;设置为&ldquo;<strong>Auto Rotation</strong>&rdquo;,然后取消勾选&ldquo;<strong>Allowed Orientations for Auto Rotation</strong>&rdquo;下的前三个选项,只保留最后一个&ldquo;<strong>Landscape Left</strong>&rdquo;为选中态:</p> <p><img alt="" src="/sites/default/files/images/201608-1/48.png" style="width: 600px;" /></p> <p>仍然在&ldquo;<strong>Settings for iOS</strong>&rdquo;当中,点击&ldquo;<strong>Other Settings</strong>&rdquo;使其展开,并找到&ldquo;<strong>Bundle Identifier</strong>&rdquo;字段,在这里为你的app输入一个合法的安装包名称,譬如&ldquo;com.mycompany.cardboarddemo&rdquo;,只要遵循&ldquo;com.&lt;公司或组织名称&gt;.&lt;app名称&gt;&rdquo;的形式即可:</p> <p><img alt="" src="/sites/default/files/images/201608-1/49.png" style="width: 600px;" /></p> <p>接下来要构建用于部署到iOS设备当中的Xcode项目。在之前的<strong>Build Settings</strong>窗口中点击<strong>Build</strong>按钮,选择恰当的保存位置及Xcode项目路径名称,点击<strong>Save</strong>按钮:</p> <p><img alt="" src="/sites/default/files/images/201608-1/50.png" style="width: 600px; height: 290px;" /></p> <p>看到&ldquo;Build Successful&rdquo;的系统消息之后,如果Xcode没有自动加载,那么到Finder当中找到刚刚构建好的Xcode项目文件夹,打开其中的.xcodeproj文件。用USB线连接好你的iPhone,在Xcode顶部的选项栏中选择自己的iPhone设备,点击Run按钮,稍等片刻,我们的小范例便会化身为app出现在手机里面了(如果初次运行不成功,Xcode提示安全问题一类,那么需要到iPhone的&ldquo;<strong>设置 &gt; 通用 &gt; 描述文件与设备管理</strong>&rdquo;当中将范例app设置为信任),塞进Cardboard遛遛看,虽然没什么花头,却是自己一步步捣鼓出来的,会开心。</p> <p>这一次,来自C我的实践教程,就是这样了,希望各位有所收获。</p> <h3> 彩蛋</h3> <p>实践范例有做也罢,泛读也好,终归到了每一期最为轻松的时段。在想,VR话题就这么做了有十五期的样子,或许下次阶段性汇总一下也好,梳理清晰,以励再战一类。</p> <p>现在是周四午间,人们三三两两奔去食堂,四周静下来,再过十分钟灯也会熄掉。独自坐在桌前听着Coltrane的&ldquo;It&#39;s Easy To Remember&rdquo;,无比悠然。</p> <p><iframe border="0" frameborder="no" height="52" marginheight="0" marginwidth="0" src="http://music.163.com/outchain/player?type=2&amp;id=18728885&amp;auto=0&amp;height=32" width="298"></iframe></p> <p>八月份所淘的第一批黑胶已经拿到,从拆包裹到取出碟片,一路喜悦。其中包括收录了这首歌的《Ballads》,爱极了:</p> <p><img alt="" src="/sites/default/files/images/201608-1/IMG_9968.JPG" style="width: 600px; height: 338px;" /></p> <p>以及日版三碟套装《Portrait Of John Coltrane》:</p> <p><img alt="" src="/sites/default/files/images/201608-1/IMG_9969.JPG" style="width: 450px; height: 600px;" /></p> <p>另有Eric Clapton的《Slow Hand》,1977。记得2000年夏天曾经买到这张专辑的打口磁带,其中的&ldquo;Wonderful Tonight&rdquo;是非常棒的版本:</p> <p><img alt="" src="/sites/default/files/images/201608-1/IMG_9966.JPG" style="width: 450px; height: 600px;" /></p> <p>以及Charlie Parker日版三碟Collections:</p> <p><img alt="" src="/sites/default/files/images/201608-1/IMG_9972.JPG" style="width: 450px; height: 600px;" /></p> <p>或许是状态切换的问题,上周末忙里偷闲在这家店写字却没有很实在的产出。忘记中文名叫做什么,招牌还不坏,衡山路附近。柚子茶做的很淡,不太像话。</p> <p><img alt="" src="/sites/default/files/images/201608-1/IMG_0005.JPG" style="width: 450px; height: 600px;" /></p> <p>昨天终于在路边停下来帮这些小狗拍了照片。半大的奶狗,本窝在车底的阴凉里休息,看到有人走过来,怕是认为放粮食的来了,跑过来一半大约发现味道不熟悉,开始踌躇起来,&ldquo;要不要靠近?&rdquo;,这样寻思着。后面的小家伙似乎也在忐忑的观望着接下来会发生什么。当然什么也不会发生,只是被拍照片而已喽:</p> <p><img alt="" src="/sites/default/files/images/201608-1/IMG_0007.JPG" style="width: 450px; height: 600px;" /></p> <p>另外腾云下面的艾玛哥终于改造成为太平洋咖啡,暗自感到失去了以前的一些味道,即便奥斯卡啊安子啊多福啊出来拉客,感觉也仍是怪怪的:</p> <p><img alt="" src="/sites/default/files/images/201608-1/IMG_0008.JPG" style="width: 450px; height: 600px;" /></p> <p>酒精这类东西,是不可以等到喝光上一瓶才记得要补货的,应该像为了过冬而早早开始储备食物的松鼠一样有忧患意识的活着。两瓶威士忌摆在一起送来的样子,让人感觉无比安心:</p> <p><img alt="" src="/sites/default/files/images/201608-1/IMG_0006.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></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/206" typeof="skos:Concept" property="rdfs:label skos:prefLabel">虚拟现实</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/205" typeof="skos:Concept" property="rdfs:label skos:prefLabel">VR</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/209" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Cardboard</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/210" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Google VR</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/208" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Unity</a></li></ul> Wed, 10 Aug 2016 15:21:41 +0000 C7210 845 at http://beforweb.com http://beforweb.com/node/845#comments 站在VR世界的大门前 - Unity与Cardboard app基础实践(2) http://beforweb.com/node/844 <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://beforweb.com/sites/default/files/article-thumbs/icon-logo-cardboard-google-vr-ux-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>John Coltrane的&ldquo;Say It&rdquo;,轻声开始整张《Ballads》专辑。空中似乎正有大片的云飘过,阳光忽的弱了下来,刚刚还是彻头彻尾的刺眼的白亮,现在已是灰蒙蒙的一片。片刻喘息之后,阳光的棱角重新变得分明起来。</p> <p>给自己制定了额度,七月的已经用掉,再等上两天进入八月,额度恢复之后便可以收新的唱片了,首先会买来这张《Ballads》,以及《John Coltrane and Johnny Hartman》等若干。我猜八月的额度很快便会用光,在接下来的时间里只有眼巴巴的等待着九月的到来。</p> <p>如此依序行事,并非古怪的癖好,我的功课便是这样做的 - 将之前听下来感到喜爱的爵士乐手一一列出(譬如John Coltrane、Lester Young、Charlie Parker、Count Basie、Duke Ellington、Louis Armstrong、Miles Davis和Chet Baker等等),对应着每位乐手,在淘宝上搜索出所有可以买到的唱片,去重,记录下来,然后逐一在线试听、分级,排名最为优先且价格可以接受的便放入购买清单;此外若遇到几乎是&ldquo;全网仅此一套&rdquo;的稀有品,也会无论怎样都要将优先级提到最高。这件事做起来相当不轻松,所需的耐心和耐力超出自己预想。目前仅前三位乐手就已经整理出二百多张,而从中挑选出十余张就足够排满接下来一两个月的购买计划了 - 不敢也无力过于奢侈和大张旗鼓的做这件事,若得以滋润便细水长流也好。</p> <p>说起来很是奇怪,在这样的周末午后,公司里却像是有几百万个人在加班。坐在茶水间敲着这些字的时间里,只是接连不断的有人过来泡饮料、铲冰、泡饮料、铲冰,简直心烦意乱。免费冷气与一大箱子冰块 - 不禁开始寻思人们或许真的愿意为了这些而在炎热的周末跑来公司;为什么不呢,毕竟不坏,或是如我一般无法在周末面对空寂的&ldquo;家&rdquo;而宁愿四处栖身也未可知。</p> <!--break--><p>或是去顶楼健身房跑步。上周日如约完成了第一次试跑。五公里下来,出乎预料的是并未感到明显的疲惫,看来多年未曾锻炼过的老身子骨还没那么差劲;不出预料的是双膝果然还是开始抱怨起来,这也是自己最担心的。膝关节一直脆,时不时便会出些问题,如今无论练鼓还是跑步带来的负荷都不小,只有渐进式的尝试,保持小心。</p> <p>接下来说正事吧。突然觉得这两期的名字起的有些问题,给人的感觉或许像是上下篇的样子。其实是两篇不同的文章,只是主题相似 - 通过Unity构建一些简单的3D环境,然后打包到app当中供Cardboard使用。本文相比于<a href="http://www.beforweb.com/node/843" target="_blank">上期</a>来说增加了一些更具体的东西,包括从Unity商店下载环境资源、在项目中使用Google VR Unity SDK提供的组件及第三方脚本等等,实战性略强些。不过还是那句话,读过之后不去实际操作也不成问题,作为设计师,在目前单纯去解到一些&ldquo;流程&rdquo;方面的常识也是收获。</p> <p>此外和上期类似,这次的编译程度也比较大,因为<a href="https://hackernoon.com/how-to-make-a-vr-app-with-zero-experience-927438e2dede#.vzfmjkor7">原文</a>成文的时间较早,之后无论是Unity相关界面还是Google提供的SDK使用方式都有变化,包括第三方脚本代码亦需要进行手动变更;几乎所有的配图都替换成了我自己实际操作时的截图。下面进入译文。</p> <p>时至今日,多少已经对VR世界有些神往了吧?作为设计师,是否已经有了上手的兴趣?大家都差不多的样子。最近,有几篇不错的文章给到我(英文原文作者)一些启示,包括:</p> <ul> <li> <a href="https://medium.com/google-design/from-product-design-to-virtual-reality-be46fa793e9b#.9cw3qwi0n">From product design to virtual reality</a>(Medium,墙外,作者Jean-Marc Denis,Beforweb译文版:<a href="http://beforweb.com/node/827" target="_blank">从二维界面到虚拟现实</a>)</li> <li> <a href="https://medium.com/facebook-design/a-month-designing-in-vr-62474aef1f1c#.q2u3awfec">A month designing in VR</a>(Medium,墙外,作者Julius Tarng)</li> <li> <a href="https://ustwo.com/blog/designing-for-virtual-reality-google-cardboard/">Designing for virtual reality</a>(ustwo出品)</li> </ul> <p>经过简单的研究与学习,我发现即便不曾有过3D设计或脚本编写等方面的背景经验,你仍然有可能创建出最基础最简单的VR世界,并以app的形式部署到手机当中,然后通过Cardboard进行体验。对产出形式没什么概念?我做的这款<a href="https://play.google.com/store/apps/details?id=com.liuliu.polyvr">PolyLand VR</a>就是实际范例;而具体的实践方法就是我将要在本文当中与各位分享的。</p> <h3> 所需要的工具</h3> <ul> <li> <strong>Cardboard</strong>:我个人使用Google Cardboard;其他Cardboard类设备也可。</li> <li> <strong>Unity</strong>:<a href="http://unity3d.com/get-unity">下载</a>并安装最新的免费个人版本即可。</li> <li> <strong>Android SDK</strong>:<a href="http://developer.android.com/sdk/index.html#Other">下载</a>并安装最新的Android开发工具包(本文以Android平台作为演示;相似的方法同样可以用于iOS,详见&ldquo;Unity与Cardboard app基础实践-1&rdquo;一文)。</li> <li> <strong>Google VR Unity SDK</strong>:<a href="https://github.com/googlesamples/cardboard-unity">在GitHub下载</a>;其中包含了SDK以及Google官方提供范例项目。</li> <li> <strong>用于Google VR Unity SDK的自动行走脚本</strong>:<a href="https://github.com/JuppOtto/Google-Cardboard">在GitHub下载</a>;作者Jupp Otto。</li> </ul> <p>我们将要一起学习制作的是一个非常简单的VR环境;在实际运行时,你可以通过头显上的按钮来打开或关闭自动行走功能。</p> <h3> 第1步:构建3D环境</h3> <p>打开Unity,新建3D项目:</p> <p><img alt="01.png" src="/sites/default/files/images/201607-5/01.png" style="width: 600px; height: 363px;" /></p> <p>我将会使用<a href="https://www.assetstore.unity3d.com/en/#!/content/35361">Forest Environment</a>这套免费的模型来搭建环境,你也可以在<a href="https://www.assetstore.unity3d.com/en/#!/home">Unity资源商店</a>随便逛逛,选择自己更加喜欢的环境模型拿回来用。在资源页面中点击<strong>Open in Unity</strong>按钮,Unity会自动将其加载到<strong>Asset Store</strong>面板当中。点击面板上的<strong>Download</strong>按钮(需要注册并登录Unity帐户;Unity不允许用户直接通过网页下载资源):</p> <p><img alt="02.png" src="/sites/default/files/images/201607-5/02.png" style="width: 600px; height: 338px;" /></p> <div class="entry-intro"> <p>注意:如无法下载,请尝试VPN。</p> </div> <p>下载完成之后,在<strong>Import Unity Package</strong>对话框中,确保所有资源都有被勾选,然后点击<strong>Import</strong>按钮:</p> <p><img alt="03.png" src="/sites/default/files/images/201607-5/03.png" style="width: 600px; height: 338px;" /></p> <p>在<strong>Project</strong>面板当中,按照下图所示的路径找到<strong>demoScene_free.unity</strong>文件,双击,然后我们下载到的环境模型便会被加载到<strong>Scene</strong>面板中:</p> <p><img alt="04-a.png" src="/sites/default/files/images/201607-5/04-a.png" style="width: 600px; height: 338px;" /></p> <p>点击顶部的<strong>Play</strong>按钮,在<strong>Game</strong>模式中查看一下目前的实际效果:</p> <p><img alt="04-b.png" src="/sites/default/files/images/201607-5/04-b.png" style="width: 600px; height: 338px;" /></p> <h3> 第2步:安装Google VR Unity SDK</h3> <p>在左侧的<strong>Hierarchy</strong>面板中,删除<strong>First Person Controller</strong>和<strong>Main Camera</strong>:</p> <p><img alt="05.png" src="/sites/default/files/images/201607-5/05.png" style="width: 600px; height: 338px;" /></p> <p>将之前下载的<strong>Google VR Unity SDK</strong>解压,得到&ldquo;<strong>gvr-unity-sdk-master</strong>&rdquo;文件夹。回到Unity,点击菜单栏中的<strong>Assets &gt; Import Package &gt; Custom Package</strong>,选择刚刚解压缩的文件夹中的<strong>GoogleVRForUnity.unitypackage</strong>,点击<strong>Open</strong>按钮。在接下来弹出的<strong>Import Unity Package</strong>对话框中,确保所有资源都有被勾选,然后点击<strong>Import</strong>按钮:</p> <p><img alt="06-a.png" src="/sites/default/files/images/201607-5/06-a.png" style="width: 600px; height: 338px;" /></p> <p><img alt="06-b.png" src="/sites/default/files/images/201607-5/06-b.png" style="width: 600px; height: 338px;" /></p> <p><img alt="06-c.png" src="/sites/default/files/images/201607-5/06-c.png" style="width: 600px; height: 338px;" /></p> <p>导入完成后,在<strong>Project</strong>面板的资源列表中找到<strong>Assets &gt; GoogleVR &gt; Legacy &gt; Prefabs</strong>文件夹,将其中的<strong>GvrMain</strong>拖放到<strong>Scene</strong>面板中:</p> <p><img alt="07-a.png" src="/sites/default/files/images/201607-5/07-a.png" style="width: 600px; height: 338px;" /></p> <p><img alt="07-b.png" src="/sites/default/files/images/201607-5/07-b.png" style="width: 600px; height: 338px;" /></p> <p>点击<strong>Play</strong>按钮,界面会自动切换到<strong>Game</strong>面板。按住<strong>alt</strong>或<strong>control</strong>键,同时移动鼠标,测试一下主视角的移动方式。如果测试时发现之前拖放进来的GvrMain在位置上不太合适(主视角漂浮在空中或是位于地面以下),你可以结束<strong>Play</strong>模式,回到<strong>Scene</strong>面板当中对其进行调整 - 在右侧检查器中调整&ldquo;<strong>Position</strong>&rdquo;的值,或是直接通过鼠标移动GvrMain对象均可。</p> <p><img alt="08.png" src="/sites/default/files/images/201607-5/08.png" style="width: 600px; height: 338px;" /></p> <h3> 第3步:添加自动行走功能</h3> <p>将之前下载的自动行走脚本文件包解压,将其中的<strong>Autowalk.cs</strong>文件夹拖放到<strong>Project</strong>面板的<strong>Assets</strong>根目录下:</p> <p><img alt="09-a.png" src="/sites/default/files/images/201607-5/09-a.png" style="width: 600px; height: 338px;" /></p> <p><img alt="09-b.png" src="/sites/default/files/images/201607-5/09-b.png" style="width: 600px; height: 338px;" /></p> <p>双击<strong>Autowalk</strong>文件,使其在MonoDevelop编辑器当中被打开。<strong>Command+F</strong>,搜索&ldquo;<strong>CardboardHead</strong>&rdquo;,并替换为&ldquo;<strong>GvrHead</strong>&rdquo;;搜索&ldquo;<strong>Cardboard.SDK</strong>&rdquo;,全部替换为&ldquo;<strong>GvrViewer.Instance</strong>&rdquo;,然后保存文件并关闭<strong>MonoDevelop。</strong></p> <p><img alt="10-a.png" src="/sites/default/files/images/201607-5/10-a.png" style="width: 600px; height: 338px;" /></p> <p><img alt="10-b.png" src="/sites/default/files/images/201607-5/10-b.png" style="width: 600px; height: 338px;" /></p> <p>回到<strong>Unity</strong>,点选主界面左侧<strong>Hierarchy</strong>面板中的&ldquo;<strong>GvrMain</strong>&rdquo;,然后在主界面右侧的检查器中点击<strong>Add Component</strong>按钮,在搜索框中输入&ldquo;<strong>autowalk</strong>&rdquo;,点选该文件:</p> <p><img alt="11.png" src="/sites/default/files/images/201607-5/11.png" style="width: 600px; height: 338px;" /></p> <p>检查器当中会出现新的&ldquo;<strong>Autowalk</strong>&rdquo;选项区。勾选&ldquo;<strong>Walk When Triggered</strong>&rdquo;,将&ldquo;<strong>Speed</strong>&rdquo;设置成&ldquo;<strong>1</strong>&rdquo;(或是你觉得更加合适的数值):</p> <p><img alt="12.png" src="/sites/default/files/images/201607-5/12.png" style="width: 600px; height: 338px;" /></p> <p>点击<strong>Play</strong>按钮,进入<strong>Game</strong>模式,你会发现在点击鼠标之后主视角会自动向前行进,再次点击则会停下。</p> <h3> 第4步:打包app</h3> <div class="entry-intro"> <p>注意:以下步骤仅针对安卓平台,因此译者并未执行到实际部署环节。iOS方面的流程大同小异,详见上周的&ldquo;<a href="http://beforweb.com/node/843" target="_blank">Unity与Cardboard app基础实践(1)</a>&rdquo;一文。</p> </div> <p>点击菜单栏中的<strong>File &gt; Build Settings</strong>,在弹出的<strong>Build Settings</strong>窗口中,选择<strong>Platforms</strong>列表里的&ldquo;<strong>Android</strong>&rdquo;,然后点击列表下方的<strong>Player Settings</strong>按钮:</p> <p><img alt="13.png" src="/sites/default/files/images/201607-5/13.png" style="width: 600px; height: 338px;" /></p> <p>Unity主界面右侧的检查器当中会出现<strong>PlayerSettings</strong>面板。在顶部的<strong>Company Name</strong>字段里输入公司或组织机构名称。接下来,在&ldquo;<strong>Settings for Android</strong>&rdquo;部分当中,点击&ldquo;<strong>Resolution and Presentation</strong>&rdquo;使其展开,将&ldquo;<strong>Default Orientation</strong>&rdquo;设置为&ldquo;<strong>Auto Rotation</strong>&rdquo;,然后取消勾选&ldquo;<strong>Allowed Orientations for Auto Rotation</strong>&rdquo;下的前三个选项,只保留最后一个&ldquo;<strong>Landscape Left</strong>&rdquo;为选中态:</p> <p><img alt="14.png" src="/sites/default/files/images/201607-5/14.png" style="width: 600px; height: 338px;" /></p> <p>仍然在&ldquo;<strong>Settings for Android</strong>&rdquo;当中,点击&ldquo;<strong>Other Settings</strong>&rdquo;使其展开,并找到<strong>Bundle Identifier</strong>字段,在这里为你的app输入一个合法的安装包名称,譬如&ldquo;com.mycompany.cardboarddemo&rdquo;,只要遵循&ldquo;com.&lt;公司或组织名称&gt;.&lt;app名称&gt;&rdquo;的形式即可:</p> <p><img alt="15.png" src="/sites/default/files/images/201607-5/15.png" style="width: 600px; height: 338px;" /></p> <p>仍然在&ldquo;<strong>Settings for Android</strong>&rdquo;当中,点击&ldquo;<strong>Publishing Settings</strong>&rdquo;使其展开。如果你没有keystore,那么在这里需要勾选&ldquo;<strong>Create New Keystore</strong>&rdquo;,然后输入密码,并点击&ldquo;<strong>Browse Keystore</strong>&rdquo;。在对话窗口中输入keystore的名称,点击<strong>Save</strong>按钮。此时在&ldquo;<strong>Browse Keystore</strong>&rdquo;按钮旁边会出现keystore所处的路径(更多信息请参考Android Studio官方文档当中的&ldquo;<a href="http://developer.android.com/intl/zh-cn/tools/publishing/app-signing.html">Sign Your App</a>&rdquo;部分)。在下方的&ldquo;<strong>Key</strong>&rdquo;选项区里,点击<strong>Alias</strong>下拉列表,选择&ldquo;<strong>Create a new key</strong>&rdquo;,在对话窗口中输入相关信息,点击<strong>Create Key</strong>按钮:</p> <p><img alt="16.png" src="/sites/default/files/images/201607-5/16.png" style="width: 600px; height: 338px;" /></p> <p>如果觉得需要,还可以在&ldquo;<strong>Icon</strong>&rdquo;及&ldquo;<strong>Splash Image</strong>&rdquo;当中添加相应的素材作为app icon和闪屏图片。最后在<strong>Build Settings</strong>窗口中点击<strong>Build</strong>按钮。Building期间,你可能需要选择Android SDK的根目录。解压之前下载好的Android SDK压缩包,选择这个文件夹即可。此外你可能还会被要求升级SDK,点击确认即可。Build完成后,你便可以在Android手机上安装app了,然后放到Cardboard里尽情体验吧。</p> <p><img alt="17.png" src="/sites/default/files/images/201607-5/17.png" style="width: 600px; height: 338px;" /></p> <p>有时你可能会发现视角不会随着头部的转动而相应的运动,这时重启app即可;具体原因或许和SDK及Android系统的版本有关。</p> <h3> 彩蛋</h3> <p>本周的鼓课练习曲,Nirvana的&ldquo;Lithium&rdquo;,不听听?我俨然已经不那么想练习任何不是Dave Grohl打的曲子了。</p> <p><iframe border="0" frameborder="no" height="86" marginheight="0" marginwidth="0" src="http://music.163.com/outchain/player?type=2&amp;id=21303931&amp;auto=0&amp;height=66" width="330"></iframe></p> <p>本周猫部长乖楚的样子(什么时候开始正式叫做&ldquo;部长&rdquo;了?):</p> <p><img alt="" src="/sites/default/files/images/201607-5/IMG_9661.JPG" style="width: 450px; height: 600px;" /></p> <p>而部长的抱枕玩具,很难不让人寻思:像模像样的做了一个商品标签,理应书写一些正经的产品信息,结果仍然只是个傻猫脑袋印在上面。不觉得好笑?</p> <p><img alt="" src="/sites/default/files/images/201607-5/IMG_9660.JPG" style="width: 450px; height: 600px;" /></p> <p>上周日,初次试跑的成绩;卡路里什么鬼并不是很在意,我不是为了任何燃烧能量或是锻炼身体的目标而跑。</p> <p><img alt="" src="/sites/default/files/images/201607-5/IMG_9658.JPG" style="width: 600px; height: 450px;" /></p> <p>所谓的卡路里都会随着汗水而蒸发掉吗还是什么?&ldquo;Fighters&rdquo;的帽子平时有些舍不得戴,虽说老师觉得这顶很不错;想留到和十多年前的老家伙们重聚排练时(如果会发生)反戴,just like the old days.</p> <p><img alt="" src="/sites/default/files/images/201607-5/IMG_9659.JPG" style="width: 450px; height: 600px;" /></p> <p>村上接力则进行到第十三本,《边境,近境》。一本一本下去,希望永远有得读。没有了便重新来过。</p> <p><img alt="" src="/sites/default/files/images/201607-5/IMG_9657.JPG" style="width: 450px; height: 600px;" /></p> <blockquote><p>&ldquo;持之以恒,不乱节奏...这对长期作业实在至为重要。一旦节奏得以设定,其余的问题便可以迎刃而解。然而要让惯性的轮子以一定的速度准确无误地旋转起来,对待持之以恒,何等小心翼翼也不为过。&rdquo;</p> </blockquote> <p><img alt="" src="/sites/default/files/images/201607-5/IMG_9656.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/206" typeof="skos:Concept" property="rdfs:label skos:prefLabel">虚拟现实</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/205" typeof="skos:Concept" property="rdfs:label skos:prefLabel">VR</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/208" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Unity</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/209" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Cardboard</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/210" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Google VR</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sat, 30 Jul 2016 08:35:15 +0000 C7210 844 at http://beforweb.com http://beforweb.com/node/844#comments 站在VR世界的大门前 - Unity与Cardboard app基础实践(1) http://beforweb.com/node/843 <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://beforweb.com/sites/default/files/article-thumbs/icon-logo-cardboard-google-vr-ux-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>今年的首个高温红色预警的日子,此刻约莫40度的样子,即便是在冷气充足的六楼茶水间,这样坐在靠窗的位置也仍算不得凉快,被烈日灼到几乎燃烧起来的空气奋力的在玻璃墙上寻找着任何可以渗透进来的缝隙。&ldquo;喂,让我们从这里进来可好?&rdquo; &ldquo;这个么,不大好,外面可有什么不妥?&rdquo; &ldquo;热的不行。&rdquo; &ldquo;理解倒是理解的。&rdquo; 这样说起来,怎样都觉得窗子就像是上了年岁的看门人,面对一群想闯进来的小家伙,明知他们要使坏,却无论如何都会顾此失彼的时不时被他们溜进来两三个。</p> <p>并没有。既没有小人国在打仗,也不存在坏小子与看门人的周旋。实际上眼前的一切都宁静的仿佛凝固了一般。阳光肆无忌惮的充斥在各个角落,好像某种具有弹性的实体填充在空间当中,反倒是办公楼、草坪、树木或是道路一类,却因为被暴晒至疲惫不堪,而慢慢蜕变成为虚无的、不成形的幻像。</p> <p>一个穿着热辣短裤的短发姑娘似有若无的撑着阳伞慢悠悠的从楼下走过。</p> <p>对我个人而言,今年夏天在整体感知上并不如去年那样难捱。一年前,同样是在七月下旬,天气变得真正炎热起来;我也正是从那时开始每日中午奔波回家,只为给斑喵开开空调、喂喂化毛膏和蜂蜜水,然后再赶回公司继续后半天的工作。期间对两种&ldquo;热&rdquo;的印象最为深刻,一是正午时分在光天化日之下等待出租车时的热 - 打开手机,地图上的小车图标仿佛热蚂蚁一样四处涌动却无人接单,放下手机,同样连半辆车都无法招到 - 那是一种极为无助又无处可逃的热;二是回到家打开门的瞬间从屋内翻滚着扑面而来的干燥而憋闷的热 - 斑喵就这样自己在房间里泡了半天,只是垂头丧气的把小脸依在毛茸茸的手上,并不再出来迎接我 - 那是一种可以通过自己辛苦奔波来驱散的热;虽然凉爽的效果持续不了许久,但对斑喵来说却是整个白天里最为舒适、最愿打起精神吃些东西的一段时间,我想那或许值得吧。</p> <p>今年因为一些变故而导致生活模式转变,无需每日如此奔波,于是对炎热的感知自然不再像去年那样强烈了。说起来,一年前,三、四年前,甚至十余年前的林林总总,时不时的便会清晰的闪回到眼前,仿佛是昨天刚刚撕下来扔进垃圾桶的日历纸,或是像街边转角的杂货店里陈列的小物件那样,你每每路过便会在不经意间瞥上一眼。</p> <!--break--><p>此外让自己也有些始料不及的是 - 这两天突然决定尝试跑步了。或许是受到朋友、同事的影响,或许是觉得仅凭练鼓还不够满足身心对于&ldquo;经由体能消耗而实现的沉浸感&rdquo;的需求,或许是因为看到村上春树无非也是从33岁开始练习跑步而受到激励 - 或许都有;无论怎样,希望至少可以尝试一下。在公司使用跑步机很方便,我仅需一双用来跑步的鞋 - MVP式的开始 - 不过这正是我从未有过的东西,于是更新掉这篇之后去买一双回来才好,明日便可使用。或许老师会在呢。</p> <p>有的没的也说了不少,该整理译文放出来了。本周和下一次的话题差不多是一回事 - 让你大致了解怎样使用Unity与Google VR SDK来制作最为简单的VR demo app,并部署到实际设备当中,然后通过Cardboard进行体验。本期甚至无需自己制作任何东西 - 尝试将SDK中自带的demo项目放进iPhone便好 - 不去实际操作也不成问题,毕竟涉及到Xcode、Unity的使用;单纯了解到一些&ldquo;流程&rdquo;方面的常识也是收获嘛。</p> <p>另外需要说明,本期的英文原文是<a href="https://developers.google.com/vr/unity/get-started-ios">Google官方的一篇文档</a>,内容略干涩,几乎没有配图,于是我做了一定程度的编译,并使用了自己操作时的截图作为演示。下面进入译文。</p> <p>本文会为你演示如何将Google VR SDK for Unity当中附带的demo项目部署到iPhone,以配合Cardboard浏览体验。为了确保练习的顺利进行,你可能需要提前了解一些关于Unity和Xcode的基础知识。</p> <p>如果你想了解该流程在安卓平台上的实现方式,请参考<a href="https://developers.google.com/vr/unity/get-started-android">Getting Started with Unity for Android</a>一文。</p> <h3> 基本条件</h3> <ul> <li> <strong>iPhone</strong>:硬件方面,Google VR SDK for Unity需要iPhone 5及5以上的设备配合运行,所适配的操作系统最低版本为iOS 8。</li> <li> <strong>Unity</strong>:Google VR SDK for Unity支持5.2.1或之后版本的Unity。如果你从未使用Unity开发过面向iOS的项目,那么可以参考后文关于Unity下载及配置安装的部分。</li> </ul> <h3> iOS开发基础及相关配置</h3> <p>如果未曾开发过iOS app,那么你需要在Apple注册一个开发者账号。推荐你阅读Unity提供的实践指南,包括:</p> <ul> <li> <a href="http://docs.unity3d.com/Manual/iphone-GettingStarted.html">Getting Started with iOS Development</a>当中的话题涉及到面向iOS设备开发Unity app所需了解的一些基本知识点。</li> <li> <a href="http://docs.unity3d.com/Manual/iphone-accountsetup.html">Account Setup</a>会一步步的引导你创建开发者账号并在Xcode当中进行配置。</li> </ul> <h3> 安装Google VR Unity SDK</h3> <p>或许你曾经开发过Unity相关的iOS项目,或许一切都是从零开始,没关系,我们现在来一起下载相关资源,并创建我们的第一个Google VR demo项目。</p> <ol> <li> <a href="https://developers.google.com/vr/unity/download">下载Google VR SDK for Unity</a>,解压文件包,其中包含SDK与demo项目。</li> <li> <a href="http://unity3d.com/get-unity/download">下载并安装最新版本的Unity</a>,期间需要选择待安装的组件,这时记得在下载管理器当中勾选&ldquo;<strong>iOS Build Support</strong>&rdquo;。</li> <li> 完成安装后,启动Unity,创建新的3D项目。</li> </ol> <p><img alt="01.png" src="/sites/default/files/images/201607-4/01.png" style="width: 600px; height: 338px;" /></p> <p class="figure-caption">在Unity中新建的3D项目</p> <h3> 导入并预览demo</h3> <p>首先,我们来导入资源包。点击菜单栏中的<strong>Assets &gt; Import Package &gt; Custom Package</strong>,找到之前下载并解压的Google VR SDK for Unity资源包,选择GoogleVRForUnity.unitypackage文件,点击<strong>Open</strong>按钮,在弹出的Import Unity Package对话框中,确保所有资源都有被勾选,然后点击<strong>Import</strong>按钮。需要注意,这里有可能出现警示信息,告知你API将会自动升级;如果出现了这样的信息,点击接受即可。</p> <p><img alt="02.png" src="/sites/default/files/images/201607-4/02.png" style="width: 600px; height: 338px;" /></p> <p class="figure-caption">导入外部资源包</p> <p><img alt="03.png" src="/sites/default/files/images/201607-4/03.png" style="width: 600px; height: 338px;" /></p> <p class="figure-caption">全选并确认导入</p> <p>导入完成后,在<strong>Project</strong>面板的资源列表中找到<strong>Assets &gt; Google VR &gt; DemoScenes &gt; HeadsetDemo</strong>文件夹,打开里面的<strong>DemoScene.unity</strong>,然后<strong>Scene</strong>视图当中会出现带有网格纹理的场景(scene),一个立方体悬浮在空中。</p> <p><img alt="04.png" src="/sites/default/files/images/201607-4/04.png" style="width: 600px; height: 338px;" /></p> <p class="figure-caption">打开DemoScene场景</p> <p>点击<strong>Play</strong>按钮,界面会自动切换到<strong>Game</strong>视图,你可以看到场景的实际渲染效果。按住键盘上的<strong>Control</strong>键,同时移动鼠标,视野会以z轴为轴心旋转;按住<strong>alt</strong>键的同时移动鼠标则能模拟上下左右的头部运动。</p> <p><img alt="05.png" src="/sites/default/files/images/201607-4/05.png" style="width: 600px; height: 338px;" /></p> <h3> 在iPhone上运行demo</h3> <p>点击菜单栏中的<strong>File &gt; Build Settings</strong>:</p> <p><img alt="06.png" src="/sites/default/files/images/201607-4/06.png" style="width: 600px; height: 338px;" /></p> <p>在<strong>Build Settings</strong>窗口中,选择<strong>Platforms</strong>列表里的&ldquo;<strong>iOS</strong>&rdquo;,然后点击列表下方的<strong>Switch Platform</strong>按钮:</p> <p><img alt="07.png" src="/sites/default/files/images/201607-4/07.png" style="width: 600px; height: 338px;" /></p> <p>等待素材导入完成,然后点击<strong>Build Settings</strong>窗口中的<strong>Player Settings</strong>按钮,这时Unity主界面右侧的检查器当中会出现<strong>PlayerSettings</strong>面板:</p> <p><img alt="08.png" src="/sites/default/files/images/201607-4/08.png" style="width: 600px; height: 338px;" /></p> <p>在<strong>PlayerSettings</strong>面板中,找到&ldquo;<strong>Settings for iOS</strong>&rdquo;部分,点击其中的&ldquo;<strong>Resolution and Presentation</strong>&rdquo;使其展开,将&ldquo;<strong>Default Orientation</strong>&rdquo;设置为&ldquo;<strong>Auto Rotation</strong>&rdquo;,然后取消勾选&ldquo;<strong>Allowed Orientations for Auto Rotation</strong>&rdquo;下的前三个选项,只保留最后一个&ldquo;<strong>Landscape Left</strong>&rdquo;为选中态:</p> <p><img alt="09.png" src="/sites/default/files/images/201607-4/09.png" style="width: 600px; height: 338px;" /></p> <p>仍然在&ldquo;<strong>Settings for iOS</strong>&rdquo;当中,点击&ldquo;<strong>Other Settings</strong>&rdquo;使其展开,并找到&ldquo;<strong>Bundle Identifier</strong>&rdquo;字段,在这里为你的app输入一个合法的安装包名称,譬如&ldquo;com.mycompany.cardboarddemo&rdquo;,只要遵循&ldquo;com.&lt;公司或组织名称&gt;.&lt;app名称&gt;&rdquo;的形式即可:</p> <p><img alt="10.png" src="/sites/default/files/images/201607-4/10.png" style="width: 600px; height: 338px;" /></p> <p>接下来要构建用于部署到iOS设备当中的Xcode项目。在之前的<strong>Build Settings</strong>窗口中点击<strong>Build</strong>按钮,选择恰当的保存位置及Xcode项目路径名称,点击<strong>Save</strong>按钮:</p> <p><img alt="11.png" src="/sites/default/files/images/201607-4/11.png" style="width: 600px; height: 338px;" /></p> <p>看到&ldquo;<strong>Build Successful</strong>&rdquo;的系统消息之后,到Finder当中找到刚刚构建好的Xcode项目文件夹,打开其中的.xcodeproj文件。用USB线连接好你的iPhone,在Xcode中点击<strong>Run</strong>按钮,运行刚刚打开的项目文件:</p> <p><img alt="12.png" src="/sites/default/files/images/201607-4/12.png" style="width: 600px; height: 338px;" /></p> <p>在iPhone中运行demo(这时已经可以放入Cardboard直接体验了):</p> <p><img alt="13.PNG" src="/sites/default/files/images/201607-4/13.PNG" style="width: 600px; height: 337px;" /></p> <p>视线聚焦在空中悬浮的立方体上,准星会变为环状,立方体变色:</p> <p><img alt="14.PNG" src="/sites/default/files/images/201607-4/14.PNG" style="width: 600px; height: 337px;" /></p> <p>低头看地上的菜单,准星及界面交互元素同样会发生变化:</p> <p><img alt="15.PNG" src="/sites/default/files/images/201607-4/15.PNG" style="width: 600px; height: 337px;" /></p> <p>结束了。嘎然而止。</p> <h3> 彩蛋 from C7210</h3> <p>顺利的买来一双跑步用的鞋子。继续把彩蛋种好,接下来推送给订阅了公众号的各位。</p> <p>上周有朋友&ldquo;强烈要求下期能见到猫部长&rdquo;,那也好的,而且终归刚刚前言里面也念叨了斑喵的事。</p> <p><img alt="" src="/sites/default/files/images/201607-4/IMG_9502.JPG" style="width: 450px;" /></p> <p class="figure-caption">自己怕是不知道把手攒成这种样子有多招人爱</p> <p><img alt="" src="/sites/default/files/images/201607-4/IMG_9501.JPG" style="width: 450px;" /></p> <p class="figure-caption">就这么趴在冰箱上也是常有的事</p> <p>说起猫,今天这样的天气里,实在放心不下外面的小朋友们,于是带了一些水放在楼下;去年整个夏天都会给到,今年有些迟了。小区里很多人会给小朋友们留猫粮,其实这种季节放些干净的水才更重要些。</p> <p><img alt="" src="/sites/default/files/images/201607-4/IMG_9499.JPG" style="width: 450px;" /></p> <p>上周有提到关于唱机和唱片的事。花费不少时间做了一些必要的功课,开始尝试购买唱片。首先淘到两套John Coltrane,包括1969年日版Impulse!三张套装,以及1975年的《The Gentle Side of John Coltrane》。相比而言如今多数的所谓&ldquo;音像制品&rdquo;简直乏味到极致。</p> <p><img alt="" src="/sites/default/files/images/201607-4/IMG_9355.JPG" style="width: 450px;" /></p> <p><img alt="" src="/sites/default/files/images/201607-4/IMG_9357.JPG" style="width: 450px; height: 600px;" /></p> <p><img alt="" src="/sites/default/files/images/201607-4/IMG_9356.JPG" style="width: 600px; height: 450px;" /></p> <p>练鼓方面,顺利完成Nirvana的&ldquo;Heart-Shaped Box&rdquo;。Dave Grohl的东西,你可以任性的往死里打,代价是会把双手和膝关节震到即便转天仍会疼痛。</p> <p><img alt="" src="/sites/default/files/images/201607-4/IMG_9452.JPG" style="width: 450px; height: 600px;" /></p> <p>村上接力则进行到了第十二本,也是到目前为止所有这些杂文集子里面最有味道的一本,《当我谈跑步时我谈些什么》。相比于年轻时的那些随笔或游记,这本年过半百之后的产出真的让人感到更多沉淀。</p> <p><img alt="" src="/sites/default/files/images/201607-4/IMG_9372.JPG" style="width: 450px; height: 600px;" /></p> <p>摘一段吧,某种程度上,或许感同身受。在闷热的鼓房里一遍接一遍的练着曲目,汗如雨注而无法停歇,直到膝痛或鼓棒折断 - 岂不是相同的意味:</p> <blockquote><p>就结果而言,在某种程度上,我也许是主动地追求孤绝。这种孤绝之感会像不时从瓶中溢出的酸一般,在不知不觉中腐蚀人的心灵,将之溶化。这是一把锋利的双刃剑,保护人的心灵,也细微却不间歇地损伤心灵的内壁。这种危险,我们大概有所体味,心知肚明。唯其如此,我才必须不断地物理性地运动身体,有时甚至穷尽体力,来排除身体内部负荷的孤绝感。说是刻意而为,不如说是凭着直觉行事。</p> </blockquote> <p><img alt="" src="/sites/default/files/images/201607-4/IMG_9519.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></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/206" typeof="skos:Concept" property="rdfs:label skos:prefLabel">虚拟现实</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/205" typeof="skos:Concept" property="rdfs:label skos:prefLabel">VR</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/208" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Unity</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/209" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Cardboard</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/210" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Google VR</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sat, 23 Jul 2016 10:41:27 +0000 C7210 843 at http://beforweb.com http://beforweb.com/node/843#comments