Be For Web - AR http://www.beforweb.com/taxonomy/term/230 en 近来在尝试养成空间思维习惯 http://www.beforweb.com/node/1123 <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-vision-pro-spatial.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>一个月前,新平台随 WWDC23 登场。如此重大之事件,却未曾像七年前热衷于 VR/AR 的时期那样大书特书,也是稍有惭愧。仅稍有而已,毕竟一个月间没有哪一日不在忙碌于相关布道工作,只是输出平台不同。此刻回来这里落下些少许文字,像是回到属于自己的一片港湾。</p> <p>&ldquo;热衷于 VR/AR 的时期&rdquo;竟然已是七年前。&ldquo;时间真疯狂&rdquo;一类。顺手打开 Tom Waits。</p> <p>自己吭哧吭哧翻译 HIG 之事也有十年或不止?<a href="https://developer.apple.com/cn/design/human-interface-guidelines" target="_blank">官方中文版本《人机界面指南》</a>已于六月上线。继而规划相关工作。难以名状的时空跳跃之感。</p> <!--break--><p><img alt="" src="/sites/default/files/images/2023/%E6%88%AA%E5%B1%8F2023-08-18%2013_35_57.png" style="width: 640px; height: 395px;border: none;" /></p> <p>原本打算无论如何也要开门见山直切主题,意识流淌到指尖却又松松散散地凝聚成若即若离的&ldquo;前言&rdquo;,且毫无惭愧。也罢。十二年来无不如此,何须易之。</p> <p>近来在尝试养成某种习惯。面向空间计算的设计思维养成习惯。空间习惯。上下文是基于对 DC23 及《人机界面指南》相关内容的吸纳而尽可能抽象提炼出产品形态与交互体验设计思路主线并尝试带入长久以来习惯成自然的二维触屏或指针交互界面产品场景进而思考其存在于新平台输入与输出范式框架当中时大体会呈现出怎样一种面目。</p> <p>窗口与基本界面形态。</p> <p>空间容器与三维内容。</p> <p>空间与纵深。</p> <p>交互。</p> <p>共享空间与全空间。</p> <p>沉浸度。</p> <p>协作体验。</p> <p>譬如一个你日常惯用的 app,其基本架构及界面自身如何以窗口、挂饰的形式映射于 visionOS?</p> <p>基于内容的特质,窗口默认应该以更宽(如 Keynote 那样)还是更高(如 Safari 那样)的比例来呈现?</p> <p>窗口在空间环境中渲染的默认尺寸以及与用户之间的默认距离应该如何?</p> <p>哪些内容要素适合突破二维局限而以三维形式呈现于窗口之外或是空间容器之中?</p> <p>对应于这类内容的传统形式列表是否可能呈现为三维对象序列或某种集合视图?</p> <p>该序列或视图应该更接近于基本界面窗口本身,并通过眼手并用的间接操作来进行交互吗?还是更适合利用空间纵深拉至用户面前并通过直接操作的手势进行交互?</p> <p>与三维对象进行交互时,是否需要从多任务状态的共享空间进入独立聚焦的全空间?</p> <p>基于内容及其场景特质,在全空间中,应以穿透或渐近的形式提供半沉浸(如 Keynote 演示模式那样),使用户仍然可以与现实环境保持连接;还是经由塑造虚拟场景而提供全封闭沉浸(如 Keynote 排练模式那样),使用户进入完全不同的场景空间?</p> <p>产品自身的功能及内容特质是否适于提供多人共享/协作能力?是否可能针媒体类内容提供并排观看式的空间布局,或是针对可交互/协作的内容提供环绕式的空间布局?</p> <p>诸如此类。</p> <p>你也可以试一试,基于你的 app,或你所熟识的、常用的 app,考虑它基于空间的基本界面形态、空间与纵深的利用、适于其内容与场景特征的沉浸感程度、多人协作互动,等等。会很有意思。在我看来,这层&ldquo;习惯&rdquo;或&ldquo;训练&rdquo;,目前而言相比于直接上手使用 visionOS 界面组件库尝试设计界面,或使用 Reality Composer Pro 尝试进行场景与交互设计来说,会更加 essential 一些。</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="/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/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/354" typeof="skos:Concept" property="rdfs:label skos:prefLabel">空间计算</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/362" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Vision Pro</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/230" typeof="skos:Concept" property="rdfs:label skos:prefLabel">AR</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/79" typeof="skos:Concept" property="rdfs:label skos:prefLabel">HIG</a></li></ul> Sat, 29 Jul 2023 01:38:09 +0000 C7210 1123 at http://www.beforweb.com http://www.beforweb.com/node/1123#comments 你好,沉浸式体验设计师 Pt.2 Pt.3 http://www.beforweb.com/node/1117 <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-s-handshake-coop.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>记得<a href="http://beforweb.com/node/1116" target="_blank">上一篇</a>开篇还在念叨疫情的迫近感。几周之后的此刻已经进入&ldquo;全域静态管理&rdquo;。不记得已经连续+2在家办公有多久。前些天梦见大家都回到了公司,像是什么都没发生过一样,一起办公,准备着下一场活动。醒来感到是好温暖和幸福的梦。</p> <p>开小差跑到朋友圈写下:此次疫情或多或少让自己明确了一个非常个人化的职业成功标准:不再需要依赖于这座城市,或任何一个特定的城市与场所,也可以自由的把所爱的事一路做下去,再不受困。</p> <p>嗯。继续话题,&ldquo;你好,沉浸式体验设计师&rdquo;的第二与第三部分。曾在第一篇当中提到后两部分不做全译,因对我个人而言稍稍涉及敏感,相关部分跳过(上下文中有做注明)。一如既往,个人学习之用,独享翻译之过程而共享其结果,全部内容仅代表原文作者 Bruno Everling 之观点。</p> <!--break--><h3> Pt.2:AR 行业的过去、现在及未来</h3> <p>在<a href="http://beforweb.com/node/1116" target="_blank">第一部分</a>当中,我谈到了为什么沉浸式技术将成为 UI/UX 设计师新的前沿阵地,解释了 3D 界面相比于如今我们所习惯的 2D 模式来说为何更加贴近于人类的天性,以及这场即将到来的变革可能对设计师产生怎样的影响。</p> <p>那么 AR 技术何时才能足够成熟到可以被主流市场所接纳呢?如此复杂的技术并不易于预测,因为其中仍有一些严峻的技术挑战尚未得到解决。不过,如果你在关注行业中那些大玩家们近些年来取得的进展,那么你至少能大致预估到技术整体的走向。</p> <p>在第二部分中,我将和各位一起对当前 AR 行业的发展状况进行纵览,包括那些最大的参与者,以及他们各自的技术发展策略。</p> <h4> 炒作周期结束</h4> <p>如果你在过去十年当中关注过关于沉浸式技术的新闻,那么你也许会注意到,近些年里相关话题在公众当中的热度,相比于五年之前已经有所下降。伴随着成千上万科技博主与记者所宣扬的未来潜力,VR 最先跑完了一个炒作周期,而 AR 则紧随其后。在 Gartner 公司于 2018 年发布的新技术炒作周期曲线图当中,AR 正处于谷底的位置,而 VR 已经从曲线中消失了。从 2020 年起,这两项技术则不再出现在图表当中。</p> <p><img alt="" src="/sites/default/files/images/2022/Hype2018.png" style="width: 600px;" /></p> <p class="figure-caption">https://www.gartner.com/smarterwithgartner/5-trends-emerge-in-gartner-hype-cycle-for-emerging-technologies-2018</p> <p>那么这是否意味着沉浸式技术的失败呢?实际上恰恰相反,这个图表仅意味着炒作周期已经结束,人们开始将他们的希望、梦想或恐惧投射到下一个新技术上。</p> <p>有这样一句引言完美地概括了这一现象;虽然这句话的原始出处已无法考证,但人们通常认为它来自于未来学家 Roy Amara,因此它也被称作&ldquo;阿玛拉定律&rdquo;:</p> <blockquote><p>&ldquo;我们倾向于高估一项技术的短期效益,而低估其长期影响。&rdquo;</p> </blockquote> <p>人类并不那么善于进行长远预测。任何开创性的新技术通常都能在公众当中形成两方面的剧烈反应:一部分人会过度兴奋并产生不切实际的幻想,而另一部分人则抱有轻视或恐惧的态度,并主张禁止该技术的发展。这两类反应都有问题。</p> <p>根据 Gartner 的炒作周期曲线图,沉浸式技术会缓慢地进入到所谓&ldquo;生产力稳定期&rdquo;。在这个时期,技术已经渡过最猛烈的炒作阶段,并且在短期内无法再满足大众媒体的渴求,进而难以令他们继续保持兴趣。一些风投开始退身,很多受炒作的怂恿而立项的团队要么关张,要么转向其他领域。但仍会有一些人在坚持 100% 的投入;这些人在持续地创建和改进,因为他们理解这会是一场马拉松而非短跑冲刺。这些公司将成为大浪淘沙之后的胜利者。时间快进几年甚至几十年,这项技术将会成熟到超越曾经所有人的想象。</p> <p>下面,就让我们一起了解这样一些马拉松跑者,看看我们可以从他们身上学到些什么。</p> <div class="entry-intro"> <p>英文原文在此处对多家公司的相关技术进行介绍与分析。如第一篇文章所预告,此类内容对于译者涉及敏感,因而不做翻译。有兴趣的朋友请根据文末链接阅读原文。<br /> &mdash;&mdash; C7210</p> </div> <h3> Pt.3:如何开启沉浸式体验设计师的职业之路</h3> <p>当沉浸式技术成熟到能够被大众市场所接受时,势必有大量人员一拥而入;而从行业当前的发展状况来看,我们还有大约一到两年时间可以提前着手准备,例如熟悉 3D 相关技术,主动参与到全新设计范式的塑造当中。在后文中,我将谈及关于如何开始沉浸式体验设计师职业道路的潜在策略。我会分享一些我在过去五年里所收集的优质学习资源及工具,希望能帮助大家快速上手,并一起加入到这场变革的最前线。</p> <h4> 关于移动 AR</h4> <p>基于移动设备的 AR 可能难以代表 AR 技术的未来,但它仍是我们的最佳起点。听起来有些自相矛盾,我们来详细解释。</p> <p>正如我们在第一部分当中所说,数字化界面势必会向着与现实世界紧密结合的方向发展,而交互方式更贴近于我们自然天性的 AR 技术正是发展路径上的下一站。从很多方面来讲,AR 都是虚拟与现实得以真正融合的最后一块拼图。当然,我们距离那个阶段仍然很远;要实现其潜力的完全释放,以下这些先决条件必须得到满足:</p> <p><strong>硬件方面</strong>:界面的输出方式需要离人眼更近,使得内容可以从手机屏幕的局限当中解放出来,并能呈现在我们的自然视野所能覆盖到的任何地方。此外,设备中的诸多传感元件也必须能持续扫描我们周边的环境,从而实现高度精准的环境感知能力。</p> <p><strong>软件方面</strong>:数字化内容需要转换为 3D 形式,并能与现实世界无缝整合。取决于用户的输入,以及周围物理环境的状态,包括其他物体的相互作用、光照条件、物理定律、天气状况等方面的要素,3D 化内容应该能够动态地改变自身的外观、属性、及位置。</p> <p>虽然当前的移动 AR 在某些方面的表现还算像样,但它在体验上似乎很难全面达到上述这样理想的程度。要实现真正沉浸式的体验,类似 AR 眼镜这样的设备将成为必需。</p> <h4> 为何设计师应该拥抱移动 AR</h4> <p><img alt="" src="/sites/default/files/images/2022/1_CjYDwOD9Rp8xehPXn7BkaQ.jpeg" style="width: 600px;" /></p> <p class="figure-caption">图片来自 Patrick Schneider on Unsplash</p> <p>既然如此,为什么我仍推荐首先学习面向移动 AR 进行设计?因为我相信,作为一种过渡技术,移动 AR 在增强现实的发展史上仍有自己的一席之地;作为垫脚石,它能帮我们为了更加沉浸式的未来进行准备。正如现今的科技公司正在基于移动设备开发和验证 AR 所需的技术组件,作为设计师,我们同样可以将移动 AR 作为学习场地,从可用性的角度对新的界面范式进行试验。我能想到至少五个具体的理由来说明为什么移动 AR 可以完美地引导我们去学习&ldquo;沉浸式体验设计师&rdquo;所需掌握的必要技术:</p> <p><strong>一. 移动端界面是我们的主场</strong>。这方面我们早已掌握了来龙去脉。我们理解所有的规则及可能性,也包括局限。虽然关于移动 AR 我们还有一些新东西要学,但整体体验依然依附于移动设备的场景,遵从于通用的设计原则及交互模式。面向移动 AR,你确实需要以 3D 的方式进行设计,但又不完全是&mdash;&mdash;因为界面的输入方式仍然发生在二维触屏上。</p> <p><strong>二. 入门门槛较低</strong>。任何拥有移动设备的人都可以创造出移动 AR 体验,无需昂贵的硬件便能生成原型进行测试。而对于真正意义上的 AR 体验(譬如以眼镜作为载体),你可能会需要非常昂贵的软硬件,包括相关的专业知识,来处理早期普遍存在的技术问题。</p> <p><strong>三. 设计工具足够成熟</strong>。在近几年里,我尝试过诸多 app 和工具,但发现要针对 AR 眼镜相关体验去设计原型几乎是不可能的事,特别是在对 3D 和游戏设计缺乏深入理解的情况下。相比于毫无经验而上手 Unity,面向移动 AR 的设计工具则相对容易学习很多。</p> <p><strong>四. 移动 AR 更容易融入人们的生活</strong>。手机7天24小时陪伴着我们,不离左右。当前社会对于手机的接纳度很高,而 AR 眼镜的情况则相反。这使得我们有机会可以去探索一些 AR 眼镜尚难覆盖到的用例,特别是在户外公共空间当中。</p> <p><strong>五. 测试更容易</strong>。任何拥有智能手机的人都可以帮你测试原型。相比之下,通过最新的 AR 设备进行测试的成本则过于高昂。</p> <p>希望以上这些可以使大家明白,目前而言,移动 AR 可能是设计师试水&ldquo;沉浸式体验设计师&rdquo;的最佳途径了。至于具体如何起步,我创建了一份&ldquo;移动 AR 新手包&rdquo;供大家参考,其中包括了近些年里令我感到有所收获的一系列优质资源。</p> <h4> 移动 AR 新手包</h4> <h5> <strong>App</strong></h5> <p>先来看一些具有启发性的 app。熟悉移动 AR 的方式之一自然是尝试现有的 app,充分把玩。下面列出一些比较典型的,其中也包括一些不那么知名,但很具实验性质的 app。</p> <p><strong>Ikea Place</strong>:第一批移动 AR app 的代表,也是具有真实用例场景的产品,提供了上乘的解决方案。</p> <p><strong>Wanna Kicks</strong>:同样提供预览类的功能,具体用例聚焦于鞋类试穿和购买,实际体验非常惊艳。</p> <p><strong>纽约时报 app</strong>:最早一批拥抱 AR 技术的新闻类产品。他们会为新闻故事提供相关 AR 功能,从而实现更深层的沉浸体验。</p> <p><strong>无线电波的构造</strong>:非常早期的实验性 AR app,出自荷兰设计师 Richard Vijgen 之手。是付费 app,但非常值得尝试。</p> <p><strong>Meisai</strong>:作者 Takayuki Watanabe 在其中探索着各种不同的 AR 滤镜与视觉效果,非常有趣。</p> <p><strong>Qlone</strong>:也可以被看作是 3D 设计与原型工具,用来对现实物体进行 3D 扫描进而生成模型。</p> <h5> 阅读与学习资源</h5> <div class="entry-intro"> <p>此处内容对于译者涉及敏感,因而不做翻译。有兴趣的朋友请根据文末链接阅读原文。<br /> &mdash;&mdash; C7210</p> </div> <h5> 3D 设计与原型工具</h5> <p><img alt="" src="/sites/default/files/images/2022/0_Ex_y5o3S94GBnV8D.jpeg" style="width: 600px;" /></p> <p class="figure-caption">图片来自 Mehdi MeSSrro on Unsplash</p> <p>既要说,也要练,学新工具势在必行。也许最初令人生畏,但当你熟练之后,便会发现其中的乐趣。以下是一系列对于初学者来说较为友好的 3D 与原型工具供参考。</p> <p><a href="https://spline.design"><strong>Spline</strong></a>:对于初次体验 3D 是不错的选择,开发团队比较年轻,致力于让 3D 设计变得更简单。产品免费,易于使用,没有铺天盖地的复杂功能,输出快捷,恰到好处。</p> <p><img alt="" src="/sites/default/files/images/2022/%E6%88%AA%E5%B1%8F2022-04-01%2010_36_59.png" style="width: 600px;" /></p> <p><a href="https://www.vectary.com"><strong>Vectary</strong></a>:定位类似于 Spline,大体上在尝试打造 3D 设计领域的 Figma,聚焦于简单易用且易于协作的功能,既能引领你步入新领域,也能帮你在入门之后产出令人印象深刻的作品。</p> <p><img alt="" src="/sites/default/files/images/2022/%E6%88%AA%E5%B1%8F2022-04-01%2010_48_06.png" style="width: 600px;" /></p> <p><a href="https://www.blender.org"><strong>Blender</strong></a>:当 Spline 和 Vectary 已经难以满足进一步的需求时,你可以继续进阶到 Blender。我甚至不大理解这款软件之所以免费的理由,因为它切实提供了创建专业 3D 模型及动画所需的一切功能。最初上手的难度相对较高,但他们提供的学习资源质量很棒,有助于你快速提升水平。</p> <p><img alt="" src="/sites/default/files/images/2022/%E6%88%AA%E5%B1%8F2022-04-01%2010_35_53.png" style="width: 600px;" /></p> <p><a href="https://sparkar.facebook.com/ar-studio"><strong>Spark AR</strong></a>:最初由 Meta(Facebook)面向内部团队开发使用,而后面向公众发布。任何人都可以通过它来创建并发布他们自己的 AR 面具和滤镜。大体上讲,是这个产品开启了 Instagram 上全脸滤镜的热潮。虽然你可以通过这个软件制作非常复杂的东西,但他们在官网提供的教程还是可以帮助你非常便捷的创建自己的虚拟面具。</p> <p><img alt="" src="/sites/default/files/images/2022/%E6%88%AA%E5%B1%8F2022-04-01%2010_38_12.png" style="width: 600px; height: 329px;" /></p> <p><a href="https://www.adobe.com/products/aero.html"><strong>Adobe Aero</strong></a>:你可以轻松地将预制或自制的 3D 模型拖放到书桌或房间地板上,并添加相应的交互行为,创建出简单的 AR 原型。</p> <p><img alt="" src="/sites/default/files/images/2022/%E6%88%AA%E5%B1%8F2022-04-01%2010_38_44.png" style="width: 600px; height: 328px;" /></p> <p><a href="https://developer.apple.com/augmented-reality/tools/"><strong>Apple Reality Composer</strong></a>:Apple 自家的 AR 设计工具,定位类似于 Adobe Aero,如果你希望把玩一些 3D 内容,添加一些交互,创建一些简单的原型,那么这绝对是正确的工具。</p> <p><img alt="" src="/sites/default/files/images/2022/%E6%88%AA%E5%B1%8F2022-04-01%2010_40_41.png" style="width: 600px;" /></p> <p><a href="https://developer.apple.com/videos/play/wwdc2018/808/"><strong>纸和笔</strong></a>:若干年前 WWDC 的这部视频罕见地展示了 Apple 的设计师制作 AR 原型的幕后故事。我非常惊讶于他们仅通过纸、笔、胶水等工具就能实现大量原型设计工作。你可以远离屏幕几个小时,通过制作实体化原型来演示和验证数字化体验,太棒了不是么。</p> <h5> 如何获取 3D 模型</h5> <p><img alt="" src="/sites/default/files/images/2022/0_FmevKZoVJztHULy7.jpeg" style="width: 600px; height: 337px;" /></p> <p class="figure-caption">图片来自 Bradley Pelish on Unsplash​</p> <p>有时候,基于他人创造并提供的 3D 模型来设计体验确实会令事情简单一些。前面提到的很多 3D 工具都会通过他们自己的库和平台为用户提供模型。如果这些仍然难以满足你的所需,那么不妨试试以下平台:</p> <p><a href="https://thangs.com"><strong>Thangs</strong></a>:免费 3D 模型平台。质量水准不一,但你或许恰好能找到比较适合的。</p> <p><img alt="" src="/sites/default/files/images/2022/%E6%88%AA%E5%B1%8F2022-04-01%2010_53_12.png" style="width: 600px; height: 318px;" /></p> <p><a href="https://sketchfab.com"><strong>Sketchfab</strong></a>:付费平台,但整体水准明显更高。如果你需要质量过硬、细节出色的模型,不妨到这里一试。</p> <p><img alt="" src="/sites/default/files/images/2022/%E6%88%AA%E5%B1%8F2022-04-01%2010_53_37.png" style="width: 600px; height: 313px;" /></p> <p>大致就是这样。希望这份清单,包括整个文章系列,都能为大家带来价值。</p> <ul> <li> 英文原文:<a href="https://bruno-everling.medium.com/designing-immersive-experiences-e3d220c878b5">https://bruno-everling.medium.com/designing-immersive-experiences-e3d220c878b5</a></li> <li> 原文作者:Bruno Everling</li> <li> 译者:C7210</li> </ul> <p><img alt="" src="/sites/default/files/images/s/Banner-PS-BFW-3x.png" style="width: 450px; height: 116px;" /></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_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/355" typeof="skos:Concept" property="rdfs:label skos:prefLabel">3D设计</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/230" typeof="skos:Concept" property="rdfs:label skos:prefLabel">AR</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/231" typeof="skos:Concept" property="rdfs:label skos:prefLabel">增强现实</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/356" typeof="skos:Concept" property="rdfs:label skos:prefLabel">沉浸式体验</a></li></ul> Mon, 11 Apr 2022 15:19:51 +0000 C7210 1117 at http://www.beforweb.com http://www.beforweb.com/node/1117#comments 你好,沉浸式体验设计师 Pt.1 http://www.beforweb.com/node/1116 <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-s-handshake-coop.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;<a href="http://beforweb.com/node/1113" target="_blank">元之七层</a>&rdquo;开始恢复译文的欲望与状态,直至如今几乎每晚睡前必译上那么少许,以这样的宁静与舒适充实着每一天最后的时光,也着实让自己感到日子变得自在了些。此刻如此安静,我甚至可以听到斑斑打呼的小声响。</p> <p>来自 BrunoEverling@Medium 的系列文章,&ldquo;<a href="https://bruno-everling.medium.com/designing-immersive-experiences-e3d220c878b5">Intro to Immersive Experience Design</a>&rdquo;,关于 AR、3D 界面设计及相关趋势、个人学习策略等等,个人感到很有看头,译起来也很过瘾。全系列由三篇文章组成:</p> <!--break--><ul> <li> 第一部分:为何 3D 将成为 UI/UX 的未来</li> <li> 第二部分:AR 产业的过去、现在及未来</li> <li> 第三部分:沉浸式体验设计师的职业道路</li> </ul> <p>本篇为第一部分的全篇译文,略长;而后两部分出于某些原因或许考虑摘译。一如既往,个人学习之用,独享翻译之过程而共享其结果,全部内容仅代表原文作者 Bruno Everling 之观点。</p> <h3> 为何 3D 将成为 UI/UX 的未来</h3> <p>在第一部分中,我将和各位分享为什么我个人相信 AR 将成为 UI/UX 设计师新的前沿阵地。我会聊到界面范式为何势必由 2D 转向 3D,以及这项转变对于设计师及产品构建者的工作将形成怎样的影响。</p> <p>我的首要目标,是帮助大家了解如何充分利用我们此时所处的独特历史时期,即,加入这场变革并为之做好准备的窗口仍在开放,而设计师亦可在塑造这个年轻行业并创造长期影响力的过程中扮演至关重要的角色。</p> <h4> 我为什么要做这件事</h4> <p>我写这个文章系列的动机,来自于对如今人机界面技术发展状态的深切不满。互联网存在于我们生活当中的方方面面,我们可以随时随地访问到巨量的信息。而通往这广阔无垠的数字化世界的窗口却只有钞票大小,一切内容都受困于这块玻璃屏幕后面&mdash;&mdash;听起来并不那么方便,而且我们似乎已经习惯了这种不便。</p> <p>出身于工业设计的我,在创作出第一个数字化产品的很久以前,就开始进行实体化的设计了。我仍记得,在第一次设计自己的网站还有 app 时,由于必须面对的局限而感到的一丝沮丧:所有东西都必须是二维的,且必须被规规整整地填入一个矩形边框当中。此外,我也时常在想,在触屏交互范式以外,一定存在着某种更好的&ldquo;东西&rdquo;&mdash;&mdash;它会更贴近于我们的天性,更贴近于我们在现实世界中感知和处理信息的方式。</p> <p>三年前,我开始探索这&ldquo;东西&rdquo;可能是怎样的一种存在。很快,我接触到沉浸式体验相关的技术。我深深地陷入了兔子洞中,花了大量的时间阅读相关的资讯,尝试各种不同的设备和 app。接下来的文字,归纳了我这一路上所得的关键知识与洞见;如果你有兴趣去理解这迷人的新交互范式,那么希望这些文字能够成为你的学习捷径。</p> <h4> 增强现实</h4> <p><img alt="" src="/sites/default/files/images/2022/1_6I21cnFFnqWPqvI8hbFFjg.jpeg" style="width: 600px;" /></p> <p class="figure-caption">图片来自 zedinteractive on Pixabay</p> <p>增强现实技术,即 AR,能使计算机生成的信息叠加于现实事物之上。这个概念本身算不上新事物,相关的沉浸式技术研究课题已有数十年的历史。但直到近年,得益于相关软硬件越发强大的性能,越发小巧的尺寸,以及越发低廉的价格,这项技术才逐渐从大学实验室走向大众市场。从几年前开始,我们已经可以在智能手机上体验最早一批实际可用的 AR app,包括&ldquo;宝可梦 Go&rdquo;这样的游戏,以及社交平台上的各种面部效果等等。</p> <p>AR 如此大规模吸引到市场的注意,这确实令人兴奋;但要真正实现其潜力,AR 还有很长一段路要走。尽管移动端 AR 在当前所体现出了巨大的创新性,但以手机作为载体,似乎仍然很难实现人们所寻求的那个融合着现实与数字化信息的世界。</p> <p>我们当中那些尝试过高级技术与设备的人距离我们所说的&ldquo;理想世界&rdquo;确实更近了,但当前,无论是 Magic Leap 还是微软的 HoloLens,纵使能帮我们更清晰的瞥见那沉浸式的未来,它们也仍然被认为是此类设备较为早期的、bug 较多的版本。</p> <p>那么为何我个人仍如此确信 AR 会有一个光明的未来?我们不妨从界面设计的角度来思考这件事。</p> <h4> 认知负荷</h4> <p>我相信 AR 可以取得成功的理由很简单:这一切都在于&ldquo;认知负荷&rdquo;。这个概念由教育心理学家 John Sweller 于上世纪八十年代提出,用于描述人们完成任务时在心智上所需付出的精力总和。该理论认为,由于人们的短期记忆能力非常有限,因此,沉重的认知负荷会对人们完成任务的效率造成严重的负面影响,并使人们的学习能力受到阻碍。</p> <p>我们在设计产品时,一项重要的工作就是帮助用户降低认知负荷。一个 app 或网站,越易于导航和完成任务,便越好;体验越不费力,便越具有竞争力。</p> <p>人机界面的发展历史见证着认知负荷持续降低的历程。GUI(图形界面)之所以能代替命令行界面,并不只是因为它看起来更漂亮&mdash;&mdash;更重要的是,它使得人脑中相当一部分记忆空间得以解放,从而使人能更加聚焦于任务本身。命令行界面需要用户在完成任务的过程中持续回忆和输入各种命令与参数,而 GUI 则能将系统的底层逻辑以符合人们在现实世界中处理事物的方式可视化地呈现出来(文档、文件夹、抽屉),因此极大降低了人们所需付出的脑力。</p> <p><img alt="" src="/sites/default/files/images/2022/0_AoJH82ZWovhVqGaN.jpeg" style="width: 600px;" /></p> <p class="figure-caption">图片来自 Mika Baumeister on Unsplash</p> <p>而随着移动时代的到来,触屏技术使得人机界面的认知负荷进一步降低。人们可以通过与生俱来的灵活的手指,去直接触摸和控制数字化信息,这就使得指针交互所形成的抽象层面得以被移除。</p> <p>如今,另一类强大的人机界面类型同样得到了广泛的关注,即 VUI(语音界面)。通过语言与数字化设备进行沟通的方式更加自然省力,因为这原本就是我们生而为人所习惯的。这与命令行时代的情况恰好相反:在那时,我们必须学习和适应机器的语言,才能与它们进行沟通;如今,机器开始学习和理解我们的语言,以此与我们进行交流。</p> <h4> 关于&ldquo;输出&rdquo;的下一场变革</h4> <p>触控和语音在很大程度上都属于输入方式。而在输出方面,尚缺乏足够贴近人类天性的方式。人类是视觉动物,我们的双眼是帮助我们认知世界的最重要的感官。而一块小小的二维屏幕怎能真正满足我们的所需。</p> <p>正如触屏离我们的手更近(移动设备),VUI 离我们的嘴和耳朵更近(Airpods),人机界面的输出方式也将离我们的眼睛更近&mdash;&mdash;譬如智能眼镜。</p> <p><img alt="" src="/sites/default/files/images/2022/1_MLPoAg43GtBJDn9mgsUyTQ.jpeg" style="width: 600px;" /></p> <p class="figure-caption">图片来自 J&uuml;rgen Schmidtlein on Pixabay</p> <p>AR 眼镜能帮我们将数字化信息直接投射到真实世界的环境当中。这在本质上是非常强大的概念,因为内容终于打破了屏幕的禁锢。这意味着两件事:</p> <p>首先,内容可以超越矩形框架的范围,真正呈现在我们眼前的现实环境当中,在它们应该在的地方,而不再以手机屏幕作为两者之间的&ldquo;代理&rdquo;。</p> <p>第二,内容可以从二维扩展至三维。而由此所创造出的可能性将使更好、更直观的视觉沟通形式得以实现。更重要的是,这将使人机界面的认知负荷进一步降低。我们来看一些更直观的例子。</p> <h4> 早期的 AR 用例</h4> <p>最典型的例子之一便是地图:通常,在二维图像信息与三维环境信息之间进行转换会非常消耗脑力。而通过 AR,你可以直接将信息投射在道路上,从而将一部分脑力解放出来,用于关注更重要的事物。在驾车的场景中,这更是有利于安全性的提升:导航信息直接投射在视野前方,而不是呈现在方向盘侧面的二维屏幕上,这样驾车人的视线便无需去关注侧面的设备屏幕,确保注意力始终聚焦在行车路线上。</p> <p><img alt="" src="/sites/default/files/images/2022/roland-denes-8f-pKdt84uA-unsplash.jpg" style="width: 450px;" /></p> <p class="figure-caption">图片来自 Roland Denes on Unsplash</p> <p>我们在线上买鞋时,通常会仔细观察若干商品详情图片,并将它们在头脑中转化成复杂的模型,去设想鞋子在现实中甚至是在我们脚上的样子&mdash;&mdash;整个过程的认知负荷非常高。家具一类的产品也是同理。在这些场景中,AR 能让我们从不同的角度直观地看到产品在真实环境中的样子,帮助我们快速有效地制定决策。</p> <p>再来考虑操作手册的例子。譬如为了更换空气净化器的滤芯,而翻看着300多页厚的印满了小字和插图的说明手册,这着实不是什么良好的体验。借助 AR,清晰易懂的 3D 图形化的操作指引便可直接附着于操作对象之上。电气装配与维修也是同样的道理,这类在过去仅能由专业人员进行的操作,在 AR 的辅助下,都将会变得简单易行很多。</p> <p><img alt="" src="/sites/default/files/images/2022/1_j4QBnPCyDCgrVqrBHfFGLA.jpeg" style="width: 600px;" /></p> <p class="figure-caption">Carlos Fy / CC BY-SA</p> <p>以上这些例子仅展示了 AR 这项技术的一小部分潜力,更多的可能性仍有待我们去进行设计。这便引出了下一个话题,即设计师在该技术的进化历程中将扮演怎样的角色。</p> <h4> 沉浸式体验设计</h4> <p>AR 对于 UI/UX 设计意味着什么?</p> <p>从 2D 到 3D 的转变,对于设计师来说自然意味着一个全新维度的可能性&mdash;&mdash;字面意义上的全新维度。我们将可以通过事物的三维形体,而不只是二维形状,来传达其可供性(affordance)。界面元素与内容将拥有纵深,并能在多个角度上被观察和互动。</p> <p>我们也将拥有一种创建信息层级的新方式:除了颜色、对比度、大小以外,我们还将能利用远近距离来体现界面或内容元素之间的权重关系。我们也不再需要通过模拟的阴影效果让按钮看起来更有质感&mdash;&mdash;在三维环境中,我们可以让它&ldquo;真实的&rdquo;凸起于背景之上,就像现实世界当中的按钮那样。</p> <p><img alt="" src="/sites/default/files/images/2022/1_99TUvKh0kQ4Qfkh1ohSGMQ.jpeg" style="width: 600px;" /></p> <p class="figure-caption">图片来自 ID 849356 on Pixabay</p> <p>由于设计将不再受矩形框架的限制,我们一直以来所依赖的一些设计原则和架构或将不再适用,譬如网页设计中的12列栅格体系等等;内容更多将会锚定于物体表面,而非二维屏幕的框架之中。</p> <p>或许,所谓的&ldquo;响应式设计&rdquo;,届时将会指代 3D 对象随着用户距离的远近而呈现出不同的外观及功能性,而非基于屏幕或浏览器的尺寸而改变布局。例如,附着于产品表面的文本对象可以随着用户逐渐走远而增大字号,让人从较远的距离也能清晰阅读。</p> <p>在 AR 当中进行叙事的方式也将发生重大变化。每一个体验都将是独特的,且只存在于它所对应的特定场景当中。人们的行动方式不同,因此我们也就无法预先设计一条&ldquo;标准&rdquo;的行动路径,所谓&ldquo;边缘案例&rdquo;将成为常态,因此用研与测试工作将比以往更加重要。</p> <p>诸如此类的变化让我们看到一个事实:AR 将对数据的组织、管理与呈现方式产生根本性的影响,因此在 UI/UX 设计层面,同样需要全新的思路与方法。</p> <h4> 业界需要我们</h4> <p>我们已经大致了解了为何由 2D 向 3D 进行转变将成为必然,以及这将对我们这些设计师产生怎样的影响。那么接下来,我们可以做些什么呢?</p> <p>当我在几年前意识到 AR 的潜力时,摆在我面前的是两个选项:</p> <ol> <li> 等待技术的成熟及转变的发生,再进行响应。也就是等待别人搭桥,再去过河。</li> <li> 参与建造桥梁,成为第一批过河的人。</li> </ol> <p><img alt="" src="/sites/default/files/images/2022/0_Joo1xtldTQbSKFEt.jpeg" style="width: 600px;" /></p> <p class="figure-caption">图片来自 Mason Kimbarovsky on Unsplash</p> <p>我个人希望能有尽可能多的设计师选择第二条道路,在造桥的阶段就参与其中,而不是等待工程师们把一切都搞定。我认为这很重要,因为:</p> <p>正如曾经出现的诸多新技术,更多是由开发者们首先实现了参与,并在之后持续引领着业界;如今在 AR 方面,也呈现出缺乏以用户为中心的产品开发思路的问题。该技术新近所取得的进展,基本都是围绕着&ldquo;技术能实现什么&rdquo;而进行的;我们看到很多所谓的解决方案实际上没有在解决任何实际问题。AR 应该如何被用于满足用户实际需求,这依然是一片缺乏探索的领域。这便形成了某种恶性循环:迄今为止最为成功的 AR 案例并没带来太多实际价值,很容易被人忽视,因此设计师们也倾向于认为这项技术不存在真实用例,进而错过了参与其中并创造真实变革的机会。</p> <p>这个领域相对来说仍然非常年轻,因此还没有太多的工具或是设计准则可以依赖。这种局面对于设计师来说既是挑战也是机遇,一片开阔的土壤正等待着我们去开垦。这一次,我们可以探索和建立规则,而不是像过去几次技术变革那样,等待开发人员、业务分析师或市场部门来做这件事。</p> <p>我个人相信,摆在我们面前的是一个独特的机遇:AR 在未来的影响力是足以预见的,但实际技术仍需要发展几年,才能达到价格足够低廉,用户体验足够友好,进而进入大众市场的程度。任何理解了这一点的设计师都应该意识到,我们仍然有足够的时间来学习并逐渐实现 3D 界面设计的转化。</p> <p>随着越来越多的公司开始尝试跨入第三个维度,&ldquo;沉浸式体验设计师&rdquo;很可能将成为大受欢迎的职位。我们是否已经做好准备去迎接设计历史的新篇章,并在其中扮演我们的新角色了呢?</p> <p>在本系列文章后续的部分当中,我将和各位一起对当前的 AR 产业进行纵览,例如最重要的玩家有哪些,他们各自的沉浸式技术策略是怎样的,以及接下来几年的发展趋势。而最重要的,我还将和各位一起讨论如何充分利用当前的行业图景,以及作为设计师应该如何在接下来的技术变革中扮演重要的角色。最终,我希望大家都能对这个领域的潜力感到兴奋,并一起加入到沉浸式体验设计师的行列当中。</p> <ul> <li> 英文原文:<a href="https://bruno-everling.medium.com/designing-immersive-experiences-e3d220c878b5">https://bruno-everling.medium.com/designing-immersive-experiences-e3d220c878b5</a></li> <li> 原文作者:Bruno Everling</li> <li> 译者:C7210</li> </ul> <p><img alt="" src="/sites/default/files/images/s/Banner-PS-BFW-3x.png" style="width: 450px; height: 116px;" /></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/355" typeof="skos:Concept" property="rdfs:label skos:prefLabel">3D设计</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/230" typeof="skos:Concept" property="rdfs:label skos:prefLabel">AR</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/231" typeof="skos:Concept" property="rdfs:label skos:prefLabel">增强现实</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/356" typeof="skos:Concept" property="rdfs:label skos:prefLabel">沉浸式体验</a></li></ul> Wed, 16 Mar 2022 14:32:27 +0000 C7210 1116 at http://www.beforweb.com http://www.beforweb.com/node/1116#comments XR 往事 - 第一章 - 游戏规则 http://www.beforweb.com/node/1037 <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-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"><div class="entry-intro"> <p>编者按:近来陆陆续续知道一些朋友、同事在出现健康问题,或大或小;自己之前的状况直到现在也仍然不敢大意;四处又在飘逸着或正面或负面的关于996的资讯;所有这些都让这个春天感觉动荡不安,尤其想祝愿所有朋友都安好。</p> <p>假期结束,开始正经的。合作作者 K.D. 同学的原创系列&ldquo;XR 往事&rdquo;有做更新,我在读和编辑时很兴奋,像是闻到了三年前探索学习 VR 的那段日子里的气息,而 K.D. 同学的文章显然更具理论与实践底蕴;在本文文末,我们甚至能看到 Google Daydream 的项目实境。K.D. 同学,旅居纽约的交互设计师,帕森斯设计学院设计与科技系研究生二年级在读,曾在 Google Daydream 沉浸式穿戴设备组担任用户体验设计师。- 编者人格的 C7210</p> </div> <!--break--><h3> XR 往事 - 第一章 - 游戏规则</h3> <p>在我们进一步讨论如何为 XR 设计前,我想提出一个关于沉浸式体验设计的三定律:</p> <ul> <li> 第一法则:沉浸式体验设计的形式,取决于其所使用的追踪系统(tracking system)。</li> <li> 第二法则:追踪系统的发展,势必从低自由度(degree of freedom)演化为高自由度,由数字化的输入演化为更加模拟化的或抽象化的输入。</li> <li> 第三法则:使用一致的视觉线索,设计师可以通过影响使用者的本体知觉,来在传统界面上增加一个新的维度,以便更加直观的在沉浸式环境里组织与消费内容。</li> </ul> <p>当然最重要的法则是『不要与人提起<strike>搏击俱乐部</strike>沉浸式体验设计』&mdash;&mdash;因为它归根结底,仍然是用户体验设计的范畴。</p> <p>在这一章我们先聊聊法则一,『沉浸式体验设计的形式,取决于其所使用的追踪系统 』,也就是我们在着手设计前,需要知道的一些游戏规则。这一章会讲解一些基本概念,VR 头盔的流派,以及3.3系统。</p> <p>一些关键词:</p> <p><strong>DoF - Degree of Freedom - 自由度</strong></p> <p>当前追踪系统的可追踪维度。三自由度意味着只可追踪输入时候的旋转数据,六自由度表示可追踪输入时的旋转与位移数据。</p> <p><strong>3.3</strong></p> <p>即3x3自由度,意味着头盔与输入设备都是三自由度。同理6.6表示头盔与输入设备都是六自由度。</p> <p><strong>HMD - Head Mounted Display - 头戴式显示器</strong></p> <p>即市面上各种各样的头盔与盒子。</p> <p><strong>AIO - All in One</strong></p> <p>即一体机(Standalone HDM)。</p> <p><strong>VR - 虚拟现实</strong></p> <p>指当前大部分运行在 HMD 中,渲染覆盖整个视觉区域的内容。</p> <p><strong>AR - 增强现实</strong></p> <p>指当前大部分运行在移动设备中,以现实世界为环境,只渲染特定物件的内容。</p> <p><strong>MR - 混合现实</strong></p> <p>指当前大部分运行在 HMD 中,以现实世界为环境,只渲染特定物件的内容。</p> <p><strong>XR</strong></p> <p>以上三种的代称。</p> <p>截止2019年3月,当触及沉浸式体验设计时,会遇到尤其多的问题与陷阱。一方面,我们有浩如烟海的硬件与技术可供选择使用;另一方面,大部分的沉浸式内容设计,难以配得上我们在使用它时付出的成本&mdash;&mdash;有时是学习上的,更多时候是经济上的。</p> <p>问题的一大方面,实际上来自于硬件本身。数量众多的头盔,盒子,控制器,以及一些全息设备,它们并不是基于一套追踪系统的标准设计的。<strong>而追踪系统,恰恰是在 XR 中构建各种交互元素的核心基础</strong>。追踪系统提供了在 XR 中交互的基本解决方案,同时设置了 XR 交互的上限。当一套交互模式确定之后,又进而影响了用户界面的设计,因为形式追随功能&mdash;&mdash;不管是什么平台上的界面,都必须适应当前平台的可用的交互。</p> <p>以 Virtual Reality 为例子,如果我们给所有的头戴式显示器(HMD)做一个分类,会有以下三种:</p> <ul> <li> 桌面级 VR 头盔</li> <li> 移动端 VR 设备</li> <li> 一体机</li> </ul> <p><img alt="" src="/sites/default/files/images/201904/01.png" style="width: 600px;" /></p> <p class="figure-caption">桌面级 VR 头盔:HTC Vive 与 Oculus Rift</p> <p>桌面级 VR 设备包括游戏玩家们最常提及的 HTC Vive, Oculus Rift 以及一干Windows Mixed Reality 头盔(是的,他们叫 Mixed Reality,即使他们只是普通的 VR 头盔:)。桌面级 VR 设备正如其名,需要一台台式机来进行大部分的运算。所有桌面级的VR设备都具备6.6的自由度。桌面级 VR 有自己统一的设计规格,各种控制器也有近似的可互换的按键布局。同时它有强制的硬件配置要求,正因为有高规格的配置支援,桌面级 VR 往往具有最好的沉浸式体验,毕竟计算力摆在那里。6.6的追踪系统可以实现基本上所有类型的交互。</p> <p>桌面级 VR 糟糕的地方也很多,首当其冲的是它格外昂贵,作为三大类头盔中成本最高的体验,它需要有一台最低配置为 NVIDIA 970的台式机作为计算设备(这个标准仍在不断提高)。再者,它的使用体验成本很高,用户必须提前架设好各种各样的外部追踪器(Vive 的 Lighthouse, Rift 的 IR Cam),使用过程中还得和连接所用的的缆线斗智斗勇,一不留神就会被绊倒。</p> <p><img alt="" src="/sites/default/files/images/201904/02.png" style="width: 600px;" /></p> <p class="figure-caption">移动端 VR 设备:Google Cardboard</p> <p>移动端 VR 设备通常由两部分组成:手机与一个带法奈尔透镜的头盔。最经典的例子比如谷歌的 Cardboard,其他的移动端 VR 设备仅仅是对 Cardboard 的基本概念的一个更高成本的变种。手机上的内容会被渲染成有一定补偿的双画面,再通过透镜来欺骗我们的眼睛,构造出一个不存在的深度感。由于机能所限,大部分的移动端 VR 设备的追踪系统只有三自由度,而且很多没有控制器。即使一些带控制器的版本,因为头盔不具备更高自由度,控制器本身也停留在了三自由度。</p> <p>移动端 VR 的长板和短板都很明显:它是最便宜的入门级沉浸式体验,每个人都有手机,而 Cardboard 不过数美元;入门的体验意味着它同时极其简陋,导致许多人尝试 Cardboard 及其变种后,对 VR 有着较为负面的印象。</p> <p><img alt="" src="/sites/default/files/images/201904/03.png" style="width: 600px;" /></p> <p class="figure-caption">一体机:HTC Focus,Oculus Go,Mirage Solo</p> <p>一体机的现状更为复杂一些,它本质上更像是移动端 VR 设备的威力加强版,你可以理解为开发者直接在这个透镜头盔中『内置』了一个手机。而集成的设计好处多多,一来使用时的成本降低了,用户掏出来就能用,再者很重要的一点是,制造方可以在此基础上根据产品定位,使用甚至迭代各种各样的追踪系统。比如 Oculus Go(也是小米 VR 一体机)可以为了压缩成本完全只使用3.3的追踪系统。而谷歌与联想联合开发的 Mirage Solo 具备6.3的追踪系统。一体机同时也是消费级 VR 头盔的一个大方向。一体机的弊端在于它有比移动端 VR 更高的成本,但基于机能,提供的仍旧是接近入门的体验,但这一点可以被时间所克服。</p> <p>即便我们忽略各个类型的头盔在计算力上的差距,仅仅是追踪系统的不同,会让在此条件之下承载的沉浸式内容的表现天差地别。最直观的体现就是,当用户坐在椅子上使用 Cardboard 的时候,体验是一致的,而当用户尝试站起来的时候,整个 VR 的世界会感觉『卡』在了用户的脖子上,进而造成一系列的不适。更重要的限制是,在控制器无法追踪位移数据的三自由度下,用户是没有办法做出『伸手触摸』这个动作的。所以在3.3以及6.3的环境下的沉浸式交互的尝试,多是在控制器的顶部生成一条激光,让用户与数米外的一个虚拟的屏幕在交互。这种类似于 Powerpoint 演讲一般的操作一般被称为 Ray-based Interaction(基于射线的交互)。</p> <p>但仅追踪旋转会造成视觉知觉与本体知觉不一致的矛盾(我移动了手,但是看到的控制器会停留在原地),一些解决方案是计算一个『Arm Model』,即通过旋转的状态来『猜测』用户手臂的动作,因为虽然一个理论上的旋转是无限制的,而人类的手臂动作因为身体结构有诸多局限。Arm Model 一定程度上弥补了本体知觉上的上的不协调,但是它还是无法实现真正的体积交互,因为它不精确。</p> <p><img alt="" src="/sites/default/files/images/201904/04.gif" style="width: 600px;" /></p> <p>而基于射线交互的界面,与传统的2D界面差距并不大。而利用 VR 提供的深度,我们可以在界面中做一些&nbsp; Z轴上的动效。同时为了适应射线这种并不非常精确的输入方式,需要做一些用户体验上的优化:更大的按钮,更多的 Hover-over 的反馈。这样的设计受到了诸多2D界面迁徙过来的用户体验设计师的青睐,包括一些涉足沉浸式体验的大科技公司。因为这样的界面基本上无痛的复制了我们在2D界面中的实践与经验。用户体验设计师们可以使用现有的像 Sketch 这样的工具,启动一个基于射线交互的 VR 项目的界面设计。 Google 甚至有一套专门为这种类型项目准备的 Sketch 组件 Daydream Stickersheet。根据 Daydream 的设计师 Adam Glazier 的原话:</p> <blockquote><p>&ldquo;它可以继承已有的 Material Design,保持了经典的 Google 的质感从而避免构建一套全新的设计语言。&rdquo;</p> </blockquote> <p>听起来很酷,对不对?</p> <p>这套系统最核心的矛盾在于,<strong>我们为何需要沉浸式环境里里重构2D的界面呢</strong>?亦或是说,如果我们仍旧在使用2D的界面,除了学习成本上的考虑,我们何苦引入 XR 这一个介质呢?</p> <p>现有的2D界面,是根据已有的输入媒介(我们甚至可以把鼠标理解为现实世界中的『追踪设备』)而设计的,而不是将『过去』的一套界面应用到现在的新介质里。比如我们拥有了带滚轮的鼠标,以及鼠标的一系列点击/拖拽的操作,同时我们有了阅读长页面的需求,那么在浏览器中使用 Scroll Bar 滚动条来表示页面位置信息以及控制页面滚动,就是一个很直观的设计</p> <p><img alt="" src="/sites/default/files/images/201904/05.png" style="width: 600px; height: 327px;" /></p> <p>而滚动条在基于射线的 XR 交互中,从前实现精确操作的鼠标,或者直观操作的手指,被替换成了一条经过平滑处理过的激光,即便我们有大量使用2D界面的经验,利用激光作为控制器来使用这样的交互时是极其不方便的,至少它远远比不上在传统设备中的用户体验。而在适应性的问题上,纯粹基于射线设计的界面有着本末倒置的问题:我们为了鼠标(输入设备)设计了滚动条(用户界面),而今天却为了2D界面设计了射线输入,这种问题如果深究,会引起更多关于 XR 的存在主义的疑问&mdash;&mdash;既然都是2D界面,我们何苦要在学习成本更高,效率更低的沉浸式环境里使用一项服务,而不是直接在传统的,更加精心打磨过的设备上使用呢?</p> <p><img alt="" src="/sites/default/files/images/201904/06.png" style="width: 600px;" /></p> <p class="figure-caption">在 Windows Mixed Reality 中的桌面控件,图中 Steam 窗口中的进度条在 VR 中几乎看不见了,同时用户需要用控制器上的细细的激光去&ldquo;瞄准&rdquo;进度条才能使用。</p> <p>对于基于射线的用户界面的广泛使用,除开成本限制以外,还有一个原因是,根据诸多的用户体验研究的报告,用户在使用 VR 的场景大部分是在沙发上与床上,消费的内容大多是在拿类似 Netflix 的流媒体服务看视频。所以几个大厂再设计消费级别头盔时,预设了一个躺在沙发上看电视的宅男的用户画像,从而无所顾忌的选择基于3.3的环境来配置硬件的追踪系统,因为『反正用户也不愿意站起来』。Oculus Go 更是基于这个画像将电源配置设计到2600mAh, 他们认为『反正用户不会停留在沉浸式体验里超过两个小时』。</p> <p><img alt="" src="/sites/default/files/images/201904/07.png" style="width: 600px;" /></p> <p class="figure-caption">Daydream 基于射线交互的主界面</p> <p>这样的预设有道理吗?有。而我们应该适应这样的现状吗?不。因为这个『躺在沙发上看电视的宅男』并不应该成为我们长期设计的对象,他更像是一个受制于当下沉浸式设计局面的一个结果&mdash;&mdash;除了3.3的入门级头盔,他也没有别的更多的选择了(他当然不会为了看 Netflix 花数千美金配置一套 HTC Vive)。我们如果继续做更多的关于使用场景的用户体验调查,只会得到更多类似的结论。这个局面就像是二十一世纪初,诺基亚统治着移动市场的局面一样,假如基于现状与用户需求去设计一套用户界面,设计师会发现大家最爱的还是按键,翻盖,以及长达半个月的待机时间。有时候,现状只是『缺乏选择』的一个表象。</p> <p>意识到这一点的大厂们,逐渐在一体机上更新6.6的追踪系统,Mirage Solo 在推出半年后发布了了六自由度开发者套件,将追踪系统的规格从6.3提升到了6.6,而在未来会推出的 Oculus Quest 则具有原生的6.6追踪系统。基于射线的交互也不是一无是处,它实际上在解决与远处物件的交互上非常有效率,它本质上只是在3.3环境下一个保守的无奈的解决方案,在6.6的环境下我们依旧可以使用射线,而低自由度的交互却无法兼容更高自由度的交互。 而这套完全基于射线的用户界面,也许很快将成为过去式。</p> <div> <video controls="controls" height="300" id="video20193923138" poster="" width="400"><br /> <source src="/sites/default/files/files/Videos/JediTrainer.mp4" type="video/mp4" />Your browser doesn&#39;t support video.<br /> Please download the file: <a href="/sites/default/files/files/Videos/JediTrainer.mp4">video/mp4</a></video> </div> <p>笔者当时在参与 Daydream 六自由度套件制作的星战 Demo,视频里是 Mike Alger 与 Alex Chu 两位大佬</p> <p>更多关于合作作者 K.D.:</p> <ul> <li> K.D.的设计:<a href="http://kedingdesign.com">http://kedingdesign.com</a></li> <li> K.D.的音乐:<a href="https://music.163.com/#/artist?id=12094679">https://music.163.com/#/artist?id=12094679</a></li> </ul> <p><img alt="" src="/sites/default/files/images/s/Banner-PS-BFW-3x.png" style="width: 600px; height: 154px;border:none;" /></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/205" typeof="skos:Concept" property="rdfs:label skos:prefLabel">VR</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/230" typeof="skos:Concept" property="rdfs:label skos:prefLabel">AR</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/276" typeof="skos:Concept" property="rdfs:label skos:prefLabel">XR</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/200" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li></ul> Tue, 09 Apr 2019 15:19:42 +0000 C7210 1037 at http://www.beforweb.com http://www.beforweb.com/node/1037#comments ⌈深度⌋ XR 往事 - 序章 http://www.beforweb.com/node/1032 <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-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"><div class="entry-intro"> <p>编者按:问各位周一午安。本周我即将&ldquo;增长&rdquo;一岁;拦不住,索性套一个时髦又专业的说法。回头看更年轻的年月里,衣着观感似乎比现在更加老朽无趣,事实上当你年近三旬...反而会花更多心思在这样一些方面,除了如何尽早实现财务自由而退休,更多是怎样让身心尽可能保持年轻而非像多数近40岁的人那样油腻下去。</p> <p>&ldquo;XR 往事&rdquo;,来自合作作者 K.D. 的原创系列,深度而有质感的知识;是我个人的兴趣方向自不必说,在如今的&ldquo;市场&rdquo;中也值得珍惜。K.D.,旅居纽约的交互设计师,帕森斯设计学院设计与科技系研究生二年级在读,曾在 Google Daydream 沉浸式穿戴设备组担任用户体验设计师。我仅代表个人期待他的更多相关领域内容。- 编者人格的 C7210</p> </div> <!--break--><h3> XR 往事 - 序</h3> <p><img alt="" src="/sites/default/files/images/201903/0_%20Bison%20Herd.jpg" style="width: 600px;" /></p> <p>在我研究生一年级的时候,有幸在帕森斯设计学院上过 Anthony Deen 的一门课。这门课叫做 VR for the Real World &mdash;&mdash;『为真实世界设计虚拟现实』。我印象很深刻:第一堂课的时候 Deen 忘记了这门课是在早上九点,他迟到了两个多小时才到。</p> <p>Deen 在三十年前他自己的研究生的毕业项目中,就专注过早期 VR 技术的设计。三十年后 Deen 作为一名建筑背景/交叉领域的老设计师已经功成名就,不再在一线做技术方面的东西了。我原先已经做好了心理准备,认为这门课会偏向文理学院那样的风格,讲讲理念,聊聊技术,也许他会从任天堂那台 Virtual Boy 开始讲讲关于 VR 的历史。</p> <p>但是 Deen 出乎我的意料,他匆匆从门口进来,打开了讲义,说:</p> <blockquote><p><strong>VR 起源于群落(Herds)</strong>。</p> </blockquote> <p>第一张幻灯片就是题头的这张北美野牛群。</p> <p>四十万年前,我们的祖先依赖捕猎一群又一群的野生偶蹄目动物为生。草原哺乳动物按照季节有规律的迁徙,早期的人类们没有办法一年四季都看到这些动物。</p> <p>于是我们有了壁画。</p> <p><img alt="" src="/sites/default/files/images/201903/1_%20Lascaux%20cave%2017%2C500%20BP.jpg" style="width: 600px;" /></p> <p class="figure-caption">1.Lascaux cave 17,500 BP</p> <p>类似 Lascaux Cave(图1)这样无数的岩洞中,留下了人类最早期的插画作品。这些岩洞里并没有发现食物的残渣(说明这些岩洞不是厨房),也没有发现因为日常生活留下的焚烧的痕迹(说明也不是日常居所)。这些岩洞的唯一用处,似乎就是展示这些壁画。</p> <p>在没有电子屏幕、印刷术、纸张,甚至成文的语言体系的蛮荒年代,人类用自己的手与最原始的涂料,做了一件直到今天,我们还在反复做的事情:<strong>模拟</strong>。</p> <p>&mdash;&mdash;壁画模拟了现实世界才有的动物。</p> <p>作为一名原始人,在兽群迁徙的时节里,我要如何完成教育这件事情,我要如何告诉我的孩子,哪些动物需要学着打猎,哪些动物需要远远避开?唯一的办法,就是带着孩子们走进这些岩洞,举起火把&mdash;&mdash;通常这些壁画被绘制在难以触摸到的高度&mdash;&mdash;照亮这些插画,绘声绘色和他们来一场动物世界的演说。</p> <p><strong>这是人类最早的虚拟现实体验</strong>。</p> <p>在某几位浪漫主义的原始人眼里,岩洞里的壁画还不足以完成关于兽群的叙事。一位原始人劳累一天之后,躺在草原上享受一个平和的夜晚,他突然有了一个惊人的发现。</p> <p><img alt="" src="/sites/default/files/images/201903/2_%20%E6%98%9F%E5%A4%9C.jpg" style="width: 600px;" /></p> <p class="figure-caption">2.星夜</p> <p>在某些动物因为迁徙消失的季节里,某些星星却出现了。而这些星星拟合起来,恰好有点类似这些动物岩洞上壁画的样子。</p> <p><img alt="" src="/sites/default/files/images/201903/3_%20%E9%87%8E%E7%89%9B%E4%B8%8E%E6%98%9F%E7%A9%BA.PNG" style="width: 600px;" /></p> <p class="figure-caption">3.野牛与星空</p> <p>在手艺不精,或者没有岩洞作为领地的情况下,这几个浪漫的原始人可以仰望星空,通过给星星连线想象出动物的样子。沉浸在这样诡谲的想象中的我们的祖先,又完成了另外一件重要的任务:抽象。</p> <p>&mdash;&mdash;动物的形象被抽象成了星星的排列。</p> <p><strong>抽象与模拟,作为人类认知功能的基本方式,一直被我们运用,传承,贯穿了漫长的历史</strong>。</p> <p>画壁画的习惯,被我们从岩洞里带出,作为装饰绘制在建筑的墙壁上。有趣的是,在很长的一段时间里,壁画的内容常常都与群落动物的符号有关。</p> <p><img alt="" src="/sites/default/files/images/201903/4_%20Maiherpri%20Payprus%2C%20the%207%20hathors%20and%20the%20bull%20(the%207th%20heaven).jpg" style="width: 600px;" /></p> <p class="figure-caption">4.Maiherpri Payprus, the 7 hathors and the bull (the 7th heaven)</p> <p><img alt="" src="/sites/default/files/images/201903/5_%20Hunefer%20Judgement%20in%20the%20presence%20of%20Osiris%2C%20Book%20of%20the%20Dead%2C%2019th%20Dynasty%2C%20New%20Kingdom%2C%20c_%201275%20B_C_E_%2C%20papyrus%2C%20Thebes%2C%20Egypt.jpg" style="width: 600px;" /></p> <p class="figure-caption">5.Hunefer Judgement in the presence of Osiris, Book of the Dead, 19th Dynasty, New Kingdom, c. 1275 B.C.E., papyrus, Thebes, Egypt</p> <p>在透视法出现前,我们意识到了壁画的诸多限制,开始尝试在二维的墙壁上将物件的体积感模拟出来,以更加还原它们在现实世界中原本的样子。</p> <p><img alt="" src="/sites/default/files/images/201903/6_%20Nereid%20riding%20a%20sea-bull%2C%20Greek%20relief%20(marble)%2C%202nd%20century%20BC%2C%20(Glyptothek%2C%20Munich).jpg" style="width: 600px;" /></p> <p class="figure-caption">6.Nereid riding a sea-bull, Greek relief (marble), 2nd century BC, (Glyptothek, Munich)</p> <p><img alt="" src="/sites/default/files/images/201903/7_%20War%20of%20the%20Giants%20(GIGANTOMACHIA)%2C%20C2nd%20BC.jpg" style="width: 600px;" /></p> <p class="figure-caption">7.War of the Giants (GIGANTOMACHIA), C2nd B.C.</p> <p><img alt="" src="/sites/default/files/images/201903/8_%20Sistine%20Chapel%2C%20by%20Michelangelo.jpg" style="width: 600px;" /></p> <p class="figure-caption">8.Sistine Chapel, by Michelangelo</p> <p>在1509年的梵蒂冈,米开朗基罗用在当时全新的透视技法,绘制了西斯廷教堂的穹顶壁画(图8)。传说米开朗基罗在这个作品花费上的时间过久,导致他患上了严重的颈椎病。在当时的人们眼里,这幅画似乎将建筑的天花板打开了一扇魔法的窗口,在目光所及之处创造了一个不存在的空间,信徒们可以透过它一窥神界的景象,感受一种&mdash;&mdash;虽然是虚构的&mdash;&mdash;被神明俯瞰的宗教体验。</p> <p>建筑+装饰+透视法,形成了最古早的一套构建沉浸式体验 (Immersive Experience) 的管线。</p> <p>这套管线逐渐成熟,建筑本身作为长期以来最能体现人们设计力与工匠力顶峰的媒介,在沉浸式体验中的玩法得到了长足的发展。作为建筑的『用户』,只要置身于这个巨大的结构,就会被压倒性的<strong>体积感</strong>淹没。</p> <p>沉浸式体验最早只在宗教建筑与皇家建筑中出现&mdash;&mdash;一大原因也是因为只有这两种团体才能支付其巨额的建造成本。教宗与皇室成员们需要沉浸式体验的主要功能之一,就是用于震慑所有的来访者,在感官上就割裂开他们与平民各自隶属的社会阶层。</p> <p><img alt="" src="/sites/default/files/images/201903/9_%20Gardens%20and%20palace%20of%20Versailles%20in%201746%2C%20by%20the%20abbot%20Delagrive.jpg" style="width: 600px;" /></p> <p class="figure-caption">9.Gardens and palace of Versailles in 1746, by the abbot Delagrive</p> <p><img alt="" src="/sites/default/files/images/201903/10_%20Hall%20of%20Mirrors%2C%20Palace%20of%20Versailles.jpg" style="width: 600px;" /></p> <p class="figure-caption">10.Hall of Mirrors, Palace of Versailles</p> <p><img alt="" src="/sites/default/files/images/201903/11_%20The%20School%20of%20Athens%20at%20Apostolic%20Palace%20in%20the%20Vatican%2C%20Fresco%20by%20Raphael%2C%201509-1511.jpg" style="width: 600px;" /></p> <p class="figure-caption">11.The School of Athens at Apostolic Palace in the Vatican, Fresco by Raphael, 1509-1511</p> <p>一个有趣的现象是,这样的管线有时反哺了建筑设计本身。宗座宫的《雅典学堂》壁画前,地板的图案设计(图11)传闻其实际上标记了欣赏该画的最佳角度。</p> <p>而在现代建筑与绘图颜料普及的今天,普罗大众也有了利用建筑与壁画一起构建沉浸式体验的权利。</p> <p><img alt="" src="/sites/default/files/images/201903/12_%20Fresque%20du%20Petit-Champlain%2C%20Quebec%20City.jpg" style="width: 600px;" /></p> <p class="figure-caption">12.Fresque du Petit-Champlain, Quebec City.</p> <p><img alt="" src="/sites/default/files/images/201903/13_%20Fresque%20des%20Que%CC%81be%CC%81cois%2C%20Quebec%20City.jpg" style="width: 600px;" /></p> <p class="figure-caption">13.Fresque des Qu&eacute;b&eacute;cois, Quebec City</p> <p>我们当然不满足于凝固的,静态的建筑与壁画。在『欺骗人的眼睛』这件事情上,人类自古以来都有着一股执着的热情。在1826-1827年之间,Joseph Nic&eacute;phore Ni&eacute;pce 留下了也许是最早的一张照片(图14),这是 Ni&eacute;pce 在勃艮第老家阁楼上的一个外景。虽然极其粗糙,但我们终于有了新的一种构建图像的媒介&mdash;&mdash;胶片。</p> <p><img alt="" src="/sites/default/files/images/201903/14_%20Retouched%20version%20of%20the%20earliest%20surviving%20camera%20photograph%2C%201826%20or%201827%2C%20known%20as%20View%20from%20the%20Window%20at%20Le%20Gras.jpg" style="width: 600px;" /></p> <p class="figure-caption">14.Retouched version of the earliest surviving camera photograph, 1826 or 1827, known as View from the Window at Le Gras</p> <p><img alt="" src="/sites/default/files/images/201903/15_%20The%20Arrival%20of%20a%20Train%201896.gif" style="width: 600px;" /></p> <p class="figure-caption">15.The Arrival of a Train 1896 ‧ Black and white/Indie film Louis Lumi&egrave;re, Auguste Lumi&egrave;re</p> <p>1895年12月28日,卢米埃尔兄弟的《火车进站》在巴黎第一次公映(图15)。传闻在座的观众被向他们缓缓驶来的火车吓得惊慌失措,四散而逃。在后来德国《明镜》周刊的 Hellmuth Karasek 撰文指出,这部电影『有着特别持久的影响,没错,它引发恐慌、恐惧甚至是惊悚。』</p> <p>将近六十年后的1952年,好莱坞的观众们静静地在座位上看完了 Arch Oboler 执导的《Bwana Devil》。这是一部基于真实事件改编的,关于野兽袭击非洲铁路工人的电影,内容上说实在是乏善可陈,在IMDB上只有5分不到。与众不同的是,这是第一部彩色3D电影,观众们为了获得完整的的观影体验,每个人都戴上了一副红绿眼镜。</p> <p><img alt="" src="/sites/default/files/images/201903/16_%20Bwana%20Devil%E7%9A%84%E5%AE%9A%E5%88%B63D%E7%9C%BC%E9%95%9C.jpg" style="width: 600px;" /></p> <p class="figure-caption">16.Bwana Devil 的定制3D眼镜</p> <p><img alt="" src="/sites/default/files/images/201903/17_%20%E8%A7%82%E7%9C%8B%E3%80%8ABwana%20Devil%E3%80%8B%E7%9A%84%E8%A7%82%E4%BC%97.jpg" style="width: 600px;" /></p> <p class="figure-caption">17.观看《Bwana Devil》的观众</p> <p><img alt="" src="/sites/default/files/images/201903/18_%20%E5%8D%8A%E4%B8%AA%E4%B8%96%E7%BA%AA%E5%90%8E%EF%BC%8C%E6%9F%90%E4%B8%AAOculus%20Rift%E7%9A%84%E8%AF%95%E7%8E%A9%E5%B1%95%E5%8F%B0.jpg" style="width: 600px;" /></p> <p class="figure-caption">18.半个世纪后,某个 Oculus Rift 的试玩展台</p> <p>直至电影出现之后,VR 诞生所需要的,在『欺骗人的眼睛』这个技巧上所需要的技能树,基本上都点亮了。我们有了『绘画』这样构建平面图形的经验,『建筑』设计具有体积物件的经验,『电影』使用动态图像的经验。而更重要的是,为了更好的沉浸式效果,人类开始主动带上特殊的眼镜,甚至头盔,心甘情愿的接受『自己的眼睛被欺骗』这件事。</p> <p>利用这些条件,我们终于把抽象与模拟的探索推动到了今天,于是才有了VR。</p> <p>&mdash;&mdash;说到这,Deen 摘下眼镜,说时间差不多了,他会把今天课上的资料回头发给我们。<br /> &mdash;&mdash;『非常抱歉,我今天迟到了。』</p> <p>Reference:</p> <ul> <li> Anthony Deen, Virtual Reality from The Great Herd to 3D Widescreen Cinema</li> <li> Lisa&#39;s World: The Murals of Quebec City http://lisaandherworld-lisah.blogspot.com/2017/07/the-murals-of-quebec-city.html</li> <li> David Konow, Making and Editing The First 3D Color Film Making and Editing The First 3D Color Film - Tested</li> <li> Wikipedia, Palace of Versaille Palace of Versailles | Wikiwand</li> </ul> <p>更多关于合作作者 K.D.:</p> <p>看K.D.的设计:<a href="http://kedingdesign.com">http://kedingdesign.com</a><br /> 听K.D.的音乐:<a href="https://music.163.com/#/artist?id=12094679">https://music.163.com/#/artist?id=12094679</a></p> <p><img alt="" src="/sites/default/files/images/s/Banner-PS-BFW-3x.png" style="width: 600px; height: 154px;border:none;" /></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/205" typeof="skos:Concept" property="rdfs:label skos:prefLabel">VR</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/230" typeof="skos:Concept" property="rdfs:label skos:prefLabel">AR</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/276" typeof="skos:Concept" property="rdfs:label skos:prefLabel">XR</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/200" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li></ul> Thu, 07 Mar 2019 15:22:04 +0000 C7210 1032 at http://www.beforweb.com http://www.beforweb.com/node/1032#comments ⌈随笔⌋ AR 的矛盾与探索走向? http://www.beforweb.com/node/1030 <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-s-ux-sketching-pencil-wireframe-prototype-user-experience-ll.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> <blockquote><p>&ldquo;基于移动设备的 AR 更多是设计开发人员的新兵训练营。这里有个矛盾:不去训练就难以推动真正有意思的事情变为现实,去训练又缺乏目标航向与短期利益回报。所以开启新时代新范式的人都是值得崇敬的,不仅在于技术层面,更在于眼光毅力与心境。&rdquo;</p> </blockquote> <p>支离破碎的想法仍然没有彻底消散,午餐后对着草坪两根烟的功夫脑子会乱糟糟。稍作扩写。胡言乱语不知所言先做抱歉。</p> <!--break--><p>2017年曾关注并产出过一系列关于 AR 的话题,却也因为感到难以落地而慢慢作罢;但随着行业发展,以及一些朋友在实际进行这个领域的实践,心里始终没有彻底放下。</p> <p><img alt="" src="/sites/default/files/images/201903/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202019-03-03%2000_24_54.png" style="width: 600px; height: 365px;border:none;" /></p> <p>不放下又如何;在真正有意思的事情发生之前你该如何投入;在有意思的事情开始发生时再做投入又已迟晚。</p> <p>实际体验过的移动 AR 在体验方面大体寥寥,不谈逢年过节的红包相关,印象最为深刻的在2017年底上海星巴克烘培工坊开业时的 AR 参观体验,在混乱拥挤吵闹的实际场景里即便抱着学习体验的心态去使用,也很快失去兴趣或是力气。</p> <p>终归蹩脚,必须占用单手甚至双手来透过一块屏幕获取一些信息,且这些信息在脱离实境的状况下未必不能获取。新鲜感可以维系多久。即便官方提供的若干小工具类 AR 产品又有多大的不可替代性。</p> <p>如何产生实际跨越式的,范式变革式的进步?我们当前能够看到怎样的方向及落地方式?有哪些产品正在进行尝试?</p> <h4> 介质</h4> <ul> <li> 虽然 Google Glass 以失败告终,但不代表可穿戴设备的路是错的。眼镜,轻量头盔必须是未来一个发展路径。真正的玩家是 Hololens。</li> <li> 车载。自有显示属性。</li> <li> 任何可能的不需自发握持的,带有显示属性的,固定于特定场所或可随身移动的介质。</li> </ul> <h4> 互动</h4> <ul> <li> 自然的符合直觉的手势识别操作。真正的玩家是 Magic Leap。</li> <li> 语音。</li> <li> 眼动。</li> </ul> <h4> 领域</h4> <ul> <li> 实操式的培训教育。工程,医疗。</li> <li> 时间空间叠加的体验加持。历史,故地,博物馆,艺展,影音娱乐环境。</li> <li> 设计。与实境实物关联度更强的设计。无论设计师还是受众都更需要与设计对象进行直接的三维化互动的设计。</li> </ul> <p>有朋友提到做 Side Project,我不确定。或许正在相关领域进行探索甚至是产品落地的朋友们进行洞见分享也是开阔眼界的方式。Beforweb 的一位合作作者也在产出相关话题。都不坏。</p> <p>我们还能做些什么?</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="/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/230" typeof="skos:Concept" property="rdfs:label skos:prefLabel">AR</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/231" typeof="skos:Concept" property="rdfs:label skos:prefLabel">增强现实</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/200" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品设计</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/253" typeof="skos:Concept" property="rdfs:label skos:prefLabel">随笔</a></li></ul> Sat, 02 Mar 2019 16:27:54 +0000 C7210 1030 at http://www.beforweb.com http://www.beforweb.com/node/1030#comments 移动AR体验设计的特质与挑战 http://www.beforweb.com/node/944 <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-arkit-apple-ar-ux-interface-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>&ldquo;人到了某个年纪会突然懂得一首歌。其实生活就是不断&lsquo;送别&rsquo;的过程。&rdquo; 看到那篇关于朴树在演唱《送别》时失控落泪的文章,想到这两年里一首接一首的突然懂了一些往日看来不那么起眼的、难以有所共鸣的歌曲,大约可以断定人生是在向前走着。</p> <p>正在染发。上一次还是在夏天。黑发看久了会觉得像冬日办公区的空气一样浑浊。漂到第二轮,被保鲜膜包裹着放在烤灯下加热,活脱脱像一只被涂满酱料的烤火鸡。</p> <p>过去的一周里,世界上凭空冒出了&ldquo;佛系&rdquo;这么个词。有多少人看着新世相的那篇文章会感到无一不被命中?无论80s还是90s。佛系基督徒,没毛病,《圣哥传》比心。过去的一周里,Em的新专辑上架网易云音乐,一小时销量破20万?从&ldquo;Rap God&rdquo;到&ldquo;I ain&rsquo;t no Jesus&rdquo;,有多少Stan被《Walk On Water》丧到哭。如果还会有下一张专辑,佛系说唱没跑了。</p> <p>要漂第三轮喽。尽快发出更新才好。之前连续做了一些关于Design System的内容,本周回到AR方面(&ldquo;哈你丫还有点别的么&rdquo;一类),关于Mobile AR(ARKit/ARCore)在UX设计方面的一些挑战与原则。</p> <!--break--><p>下面进入译文。</p> <p>我个人相信,AR(增强现实)将逐渐成为计算设备的未来发展方向。沉浸式技术可以打破人机之间的认知壁垒,帮助人们以更自然的方式与数字化世界进行互动。</p> <p>AR体验当中包含四个关键要素:</p> <ol> <li> <strong>可视化</strong>:譬如以可视化的方式预览新款沙发放置在自家客厅当中的实际样式。</li> <li> <strong>实境化信息</strong>:譬如将墨盒更换说明直接呈现在打印机相关部件之上,便于用户认知与操作。</li> <li> <strong>沉浸式体验</strong>:观察恐龙徜徉在大街上的奇妙景象,仿佛置身于侏罗纪时代。</li> <li> <strong>自然化界面</strong>:直接在工作台甚至是施工现场操作虚拟的建筑模型。</li> </ol> <p>但这些实现方式当中隐隐约约存在一些问题。到目前为止,我们所关注的几乎都是AR技术较为成熟的存在形式。实际上,我发现很多设计师和开发者总会不自觉地幻想出一个人人都佩戴着轻量时尚的AR眼镜的世界,而忽略掉了其他形式的计算设备。</p> <p>现实则稍显骨感。纵使Hololens、Meta和MagicLeap这样的设备都在不断地取得进步,AR眼镜在消费市场当中实现大规模普及却仍需时日。</p> <p>在这样的过渡时期,最佳替代方案就在我们的口袋中。Apple和Google近来都推出了相应的技术框架(Apple的ARKit与Google的ARCore),帮助开发者轻松地打造移动AR app,以手机摄像头为现实视窗,实现增强化的运用。</p> <p>移动平台确实是AR技术的有效落地方式,但同时也在UX方面带来了一些独特的挑战。本文将针对移动AR体验设计当中的一些问题进行探讨。</p> <h3> 交互成本与非持续性的体验</h3> <p>与眼镜不同,移动设备并非始终处于使用状态 - 手机通常被人们放在口袋当中。移动AR需要在一定程度上改变人们的心智模型与使用方式,譬如人们还不习惯于将手机举到平视视线高度进行使用,除非在拍照。试着一只手这样举着手机,同时在心中默数,你会发现如此持续30秒左右便会产生疲劳与不适。此外,要保持这样的姿态进行单手触屏操作也不是一件很容易的事。</p> <p>设备规格也是重要的影响要素。iPhone 7/8相比于同代Plus机型显然更易于单手操作,而后者的难度系数在iPad Pro面前又低了一个档次。实际上,对于iPad Pro来说,用户只有双手握持才有可能进行持续使用,因此在触屏操作方面的局限性就变得更强。</p> <p>此外,既然AR技术涉及到与现实世界的互动,那么实际场景中的更多局限性也是你必须关注的。设想你的产品可以帮助用户在实体卖场中以AR的方式查看商品信息;在这个场景中,用户通常需要使用至少一只手来推购物车 - 这对app的使用率而言是巨大的挑战,用户很可能仅仅因为较高的肢体动作成本而放弃使用app。</p> <h4> 怎样解决?</h4> <p>我们的团队在探索移动AR的过程中遇到了很多问题,同时也学到了很多东西。譬如我们曾为博物馆打造了一款游览指南类型的AR app,这款app基于特定的Google Tango平板电脑机型;游客在博物馆前台领取设备后开始参观。我们原本预期游客至少会带着这块平板参观15分钟以上,但实际情况是,人们并不喜欢额外携带这样一款沉重的设备,其中一些人甚至将平板留在了博物馆的地上。为此,我们不得不设计了挂带和把手,以便游客携带使用。</p> <p>只有了解和面对这些问题,才能进一步寻求解决方案。试着提供简短、快速的AR体验,允许用户在浏览AR内容的同时可以便捷的执行其他与场景相关的任务,例如拍摄视频 - 你需要基于实际使用场景来平衡传统功能、2D交互及3D体验之间的权重关系,而不是一味地滥用AR模式。</p> <p><img alt="" src="/sites/default/files/images/201712-1/01-Mobile-AR-Design-Guidelines.png" style="width: 600px;" /></p> <p class="figure-caption">Pok&eacute;mon Go在2D UI与3D AR互动之间的平衡性上做的很好。</p> <h3> 并非完全沉浸式</h3> <p>要记住,通过移动设备进行AR体验时,你看到的内容全部来自于手中的那块小屏幕。&ldquo;将整个世界作为画布&rdquo;的想法固然是好的,但实际实现起来却很可能使你的用户感到挫败。设想你希望用户通过手机观察一只巨大的恐龙,而一屏的空间仅够展示恐龙身上的一小部分,用户不得不举着手机四处观望 - 这样的体验会令人非常不适。</p> <p>用户通常需要将手机举到平视高度来体验AR。在设计虚拟内容的呈现角度与距离时要考虑到这一点,不要让内容难以获取或是成为干扰。</p> <h4> 怎样解决?</h4> <p>充分考虑3D内容的呈现角度与距离,进行足够的测试,确保其呈现在最为舒适的视野范围当中。不要将3D元素放置的过高或过低,不要让用户必须举着手机抬头或低头才能看到内容;同样,不要将3D元素放置的过远或过近。</p> <h3> 并非自然化界面</h3> <p>在传统2D app当中,触屏界面本身的目标不会引发歧义 - 界面由一系列承载着内容与行为的元素组成,人们通过各类触屏手势与界面进行互动 - 过去的十多年里,情况一直如此。</p> <p>新的维度带来了新的设计范式,以及新的乐趣与挑战。我们在面向移动AR进行设计时,需要理解&ldquo;触屏&rdquo;在整个交互范式当中所扮演的三个重要角色:</p> <ul> <li> 2D交互行为的载体。</li> <li> 3D世界的视窗。</li> <li> 3D世界的光标指针。</li> </ul> <p>譬如在一款家居app中,你可以通过传统2D UI选择某款沙发(作为2D交互行为载体),将屏幕指向房间中的某个地方,放下虚拟沙发(作为3D世界的光标指针),然后四处走动,从不同的角度查看沙发是否适合这片区域(作为3D世界的视窗)。这意味着你要针对每一个细节场景采用不同的设计模式,以正确体现其特定的功能状态。</p> <h4> 怎样解决?</h4> <p>在可能的情况下,有意识地弱化屏幕介质自身的功能性。尽可能移除那些非必要的2D交互元素,例如文本输入框一类;尝试避免上述三种功能状态的同时出现。</p> <p>如果你确实需要两种或两种以上的触屏功能状态同时存在,则务必考虑周全。iOS上的&ldquo;World Brush&rdquo;是个不错的例子,他们很好地整合了触屏的&ldquo;视窗&rdquo;与&ldquo;互动&rdquo;特性。此外,他们还提供了一个专用模式,仅通过手机的运动便能实现虚拟喷绘,好像在现实中使用漆罐那样。</p> <h3> 技术尚未成熟</h3> <p>移动AR本质上依赖于手机提供的精密技术为人们构建视觉上的幻象。粗略来讲,摄像头与运动传感器互相配合,一方面对手机的运动进行追踪,一方面对周围的环境产生感知。摄像头会观察环境当中的某些特征,例如物体的轮廓和边角,以便追踪其运动;同时还会对水平面进行探测,从而将虚拟对象&ldquo;放置&rdquo;在物体表面。</p> <p>这些技术着实让人惊叹,但目前仍有其局限性。在某些情况下,运动追踪会被破坏,虚拟对象的位置也会产生错乱。会导致这些问题的原因通常包括运动速度过快、光照不足,或是手机近距离指向过于光滑的墙面,等等。</p> <h4> 怎样解决?</h4> <p>不要使app的互动模式依赖于手机的快速移动。譬如你想要设计一款类似水果忍者的AR游戏,设想中可以通过挥舞手机来切水果;想法固然有趣,但在实际当中,这样剧烈而快速的运动方式很可能导致追踪失败。如果你希望用户通过app将虚拟画作挂到墙上,那么需要提醒用户不要距离墙面过近,否则摄像头将因缺乏参照物而无法识别墙面。</p> <h3> 另请谨记</h3> <p>除了以上提到的这些挑战以外,另有两点重要的因素是我们在面向移动AR进行设计时必须考虑到的。</p> <h4> 虚拟样式难以精准掌控</h4> <p>与以往不同,在设计AR体验时,你无法精准地了解信息在不同的状况下会以怎样的方式呈现,因为实体环境成为了UI的一部分。设想你的app可能在哪些典型场景当中被使用到 - 较为繁杂或缺少平坦区域的环境可能会带来不少问题,譬如信息本该垂直呈现在某个物体前方,却由于不理想的环境因素的影响而穿透了目标物体。这种状况看起来会很糟糕,并会彻底破坏沉浸体验。</p> <p>实际环境固然是难以把控的,但我们在设计过程中仍要尽可能的考虑周全。</p> <h4> 你的app确实需要AR模式吗?</h4> <p>如前所述,相比于传统app,移动AR将UX设计的优秀标准提升到了新的档次。回顾AR技术的四项价值主张:</p> <ol> <li> 可视化</li> <li> 实境化信息</li> <li> 沉浸式体验</li> <li> 自然化界面</li> </ol> <p>我个人认为,对于移动AR来说,后两点很难完美实现,毕竟硬件载体,即移动设备本身的局限性是客观的。因此,我们更需要重点挖掘前两点价值的实现方式。</p> <p>希望借助移动AR为用户带来惊艳体验的想法是诱人的,但离开了上述2、3两点,想法很难得以完美实现。试着在设计AR体验之前首先评估:对于你的产品来说,哪些对象需要通过&ldquo;增强&rdquo;的方式呈现出来?这样做的根本目标是什么?是否能够通过传统2D方式更好地实现目标?来看些不同的情况:</p> <ul> <li> <strong>无增强化</strong>:例如纯粹为了营造沉浸感的桌面虚拟3D游戏。</li> <li> <strong>通过虚拟信息增强实体对象</strong>:例如为面部增加滤镜效果,扫描商品标签呈现相关信息,Nike运动鞋AR广告等。</li> <li> <strong>通过虚拟对象增强实体环境</strong>:例如游戏Pok&eacute;mon GO,博物馆游览指南,可视化家具预览等。</li> </ul> <p>无增强化,换句话说,你向用户呈现出的虚拟信息/对象与其所处的实际环境在逻辑上无关。这类体验可能更适于通过VR方式来实现;市面上现有的最为廉价的VR设备所能提供的沉浸式体验也比移动AR来的更好些。</p> <p>如果你希望通过AR的方式来可视化地呈现信息,那么问问自己,你确实需要像家具预览app那样将信息呈现在逻辑上高度相关的实体环境当中,还是仅仅希望以3D形式&ldquo;创新&rdquo;地显示信息?很多情况下,3D模型并不会比一张普通的2D照片更具传达力。</p> <p>即便你确实需要通过增强现实的方式呈现信息,也必须了解目标用户会在哪些典型情境当中使用你的产品。譬如Yelp曾经提供过名为&ldquo;Yelp Monocle&rdquo;的AR模式,你可以通过手机摄像头查看周边的餐厅信息,相关POI会以图钉的形式标注在视野当中。这个模式听上去非常棒,但用户很快便失去了兴趣。原因在于,在实际场景当中,你通常只想了解附近有哪些餐厅,你更在意它们的点评与菜品信息;在产生到店决策之前,它们的地理位置信息对你来说并没那么重要,很多时候你会愿意为了美食而多走些路程。这种情况下,传统的2D地图模式反而能提供更优的体验。</p> <h3> 小结</h3> <p>增强现实将逐渐发展成为我们与计算设备进行互动的重要方式。但在当前,我们仍处于过渡阶段,移动设备依然是最为普及的平台形式。充分了解移动AR的特性,提供最优的UX设计方案,你势必能够在现阶段赢得更多的目标用户。</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/200" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/230" typeof="skos:Concept" property="rdfs:label skos:prefLabel">AR</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/232" typeof="skos:Concept" property="rdfs:label skos:prefLabel">ARKit</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/231" typeof="skos:Concept" property="rdfs:label skos:prefLabel">增强现实</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> Mon, 18 Dec 2017 05:26:30 +0000 C7210 944 at http://www.beforweb.com http://www.beforweb.com/node/944#comments iOS ARKit人机界面设计规范 http://www.beforweb.com/node/940 <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-arkit-apple-ar-ux-interface-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>你的app可以利用Apple提供的增强现实技术,即ARKit,为用户带来引人入胜的、能够与现实世界无缝融合的虚拟互动体验。在AR app当中,设备的摄像头用于在屏幕上呈现现实世界的即时图景,而虚拟的3D物体则会叠映其中,构成虚实交融共存的幻象。用户可以透过设备从不同的角度来观察虚拟物体;如果app提供了恰当的体验模式,用户还可以通过手势或其他运动方式与虚拟物体进行互动。</p> <!--break--><h3> 设计引人入胜的AR体验</h3> <p><strong>利用全屏提升参与感</strong>。将尽可能多的屏幕空间用于现实图景与虚拟物体的呈现,不要让沉浸式体验由于繁杂的界面控件和信息而遭到破坏。</p> <p><strong>创造生动逼真的虚拟物体</strong>。并不是所有的AR app都需要栩栩如生的虚拟体验;但对于那些需要的来说,必须将虚拟物体打造得尽可能生动逼真,以融入周围的真实环境。要获取最佳的视觉体验,你需要设计出精细拟真的3D素材,利用ARKit提供的数据信息将虚拟物体放置在真实环境的表面,同时确保虚拟物体拥有恰当的比例,可以表现出真实环境光线的反射效果,并能在环境表面形成投影,而且要随着摄像头位置的变化而动态更新视觉效果。</p> <p><strong>考虑物理局限性</strong>。要记住,人们很可能会在不利于构造AR体验的环境当中试图使用你的app,譬如那些较难四处移动的狭小空间,或是缺少平面区域的地方。预先考虑到这些可能带来潜在问题的场景,并事先向用户阐明产品运行方式对于环境的需求,同时考虑针对不同的使用环境提供差异化的功能。</p> <p><strong>考虑用户的舒适度</strong>。手持设备保持着特定的距离和角度进行使用,超过一段时间便会使人感到疲劳。谨记,人们在使用你的app时必须保持特定的姿态,因此,要在提供愉悦体验的同时避免引发人们的不适感。例如,你可以将虚拟物体默认放置在恰当的位置,减少人们将其手动移近的必要性;对于游戏来说,要尽可能保持关卡的简短,并在进程当中穿插提供短暂的休息时间。</p> <p><strong>如果你的app鼓励人们通过肢体动作完成互动,那么要以渐进的方式进行引导</strong>。以游戏为例,不要让用户在刚刚上手时就必须通过复杂的肢体动作与虚拟物体互动;应该首先给人们一些时间去熟悉AR的体验模式,再逐渐提升互动机制的复杂性。</p> <p><strong>注意用户的人身安全</strong>。人们在使用AR app时,如果附近有其他人或物体,那么过多的肢体动作可能会带来潜在的危险。要充分考虑如何确保操作的安全性。例如对于一款游戏来说,要避免将范围较大或突然性较高的肢体动作作为互动方式。</p> <p><strong>通过音效与触感反馈来增强沉浸体验</strong>。当虚拟物体与实体平面或其他虚拟元素产生触碰时,通过音效与震动触感提供交互反馈是非常有效的方式。在沉浸式的游戏当中,背景音乐也有助于塑造身临其境的虚拟体验。</p> <p><strong>提供情境化的操作提示</strong>。通过环绕在虚拟物体周围的3D旋转指示符来提示其操作方式,会比传统的文字说明形式更加符合直觉。不过在某些特定的情况下,譬如当系统正在探测实体平面,或是用户没有对情境化的操作提示给予响应的时候,文字浮层形式的提示可能更加有效。</p> <p><img alt="" src="/sites/default/files/images/201710-2/01.png" style="width: 300px; height: 258px;" />&nbsp;&nbsp;<img alt="" src="/sites/default/files/images/201710-2/02.png" style="width: 300px; height: 258px;" /></p> <p><strong>如果必须使用文字提示,要确保其通俗易懂</strong>。一部分用户可能会对AR这样的高级技术概念感到恐惧。为了使文字内容更加通俗易懂,要避免使用技术术语,例如&ldquo;ARKit&rdquo;、&ldquo;环境探测&rdquo;、&ldquo;追踪&rdquo;一类,取而代之的是通过更友好、更具对话性的文案使多数用户理解概念含义。下面是一些话术风格对比:</p> <ul> <li> 恰当:&ldquo;无法找到合适的平面,请试着向侧面移动,或调整手机的位置。&rdquo;</li> <li> 不恰当:&ldquo;无法探测到水平表面。调整追踪。&rdquo;</li> </ul> <ul> <li> 恰当:&ldquo;轻点某处,将[物体名]放在上面。&rdquo;</li> <li> 不恰当:&ldquo;轻点水平表面,锚定对象。&rdquo;</li> </ul> <ul> <li> 恰当:&ldquo;尝试调亮灯光,并稍作移动。&rdquo;</li> <li> 不恰当:&ldquo;特征不足。&rdquo;</li> </ul> <ul> <li> 恰当:&ldquo;尝试慢慢移动你的手机。&rdquo;</li> <li> 不恰当:&ldquo;探测到过快的运动速度。&rdquo;</li> </ul> <p><strong>避免不必要的体验中断</strong>。用户每次退出并再次进入AR模式,环境分析与水平面探测都会被重新执行一次,而且手机与摄像头的位置通常会发生改变,致使之前已经被放置好的虚拟物体被重新定位;有时它们看上去甚至会脱离现实世界的表面。避免这种中断的方式之一,就是尽可能让人们在不必离开AR模式的情况下完成相关操作。譬如在家居类的AR app当中,用户已经将一把心怡的椅子放置在客厅里,接下来他们很可能希望继续添加其他家具进行预览;要确保相关操作都可以在当前界面环境当中完成。</p> <h3> 进入AR环境</h3> <p><strong>明确提示初始化状态,引导用户参与完成</strong>。每当你的app进入AR模式,初始化流程都会执行一次,完成对环境的探测和评估。整个过程可能会花费数秒的时间。为了减少用户的困惑,加速流程的进行,你可以通过文字明确地向用户提示当前的系统状态,并鼓励他们通过摄像头探索周边环境,主动寻找能够提供水平表面的地方。</p> <p><img alt="" src="/sites/default/files/images/201710-2/03.png" style="width: 600px; height: 297px;" /></p> <h3> 放置虚拟物体</h3> <p><strong>帮助用户了解何时需要定位水平面,何时可以放置虚拟物体</strong>。可视化的指示标识可以有效地使用户了解到水平面定位正在进行。例如,当用户看到位于屏幕中央的梯形准星,就会明白现在应该去寻找一片平面区域;水平面测定完成之后,准星的样式发生变化,暗示用户可以放置虚拟物体。指示标识的外观样式需要与app的整体风格保持一致。</p> <p><img alt="" src="/sites/default/files/images/201710-2/04.png" style="width: 300px; height: 197px;" /></p> <p class="figure-caption">水平面探测指示符</p> <p><img alt="" src="/sites/default/files/images/201710-2/05.png" style="width: 300px; height: 197px;" /></p> <p class="figure-caption">物体放置指示符</p> <p><img alt="" src="/sites/default/files/images/201710-2/06.png" style="width: 300px; height: 197px;" /></p> <p class="figure-caption">特定app当中的定制化指示符</p> <p><strong>以恰当的方式响应用户放置虚拟物体的行为</strong>。水平面的精准定位过程需要耗费一定的时间(虽然极为短暂)。如果用户在这个过程中试图放置虚拟物体,你应该利用现有数据信息将物体立刻呈现在屏幕当中。水平面测定完成之后,再利用最终的数据对物体的位置进行微调。如果用户一开始将物体放在了已测定的水平面范围之外,那么要以平缓的方式将其拉回到平面当中。</p> <p><strong>避免将物体预置在水平面边缘</strong>。在AR当中,水平面的边缘范围可能会随着用户所在位置的变化而产生调整。</p> <h3> 用户与虚拟物体的交互行为</h3> <p><strong>通过直接操作取代控件交互</strong>。相比于通过与虚拟物体互相分离的界面控件进行操作,让用户直接与物体本身进行互动可以带来更具沉浸感的AR体验。不过要记住,如果用户需要频繁的移动身体位置,那么直接操作的方式也可能提升交互难度,甚至使用户感到受挫。</p> <p><img alt="" src="/sites/default/files/images/201710-2/07.png" style="width: 300px; height: 448px;" />&nbsp; &nbsp; &nbsp;<img alt="" src="/sites/default/files/images/201710-2/08.png" style="width: 250px; height: 445px;" />&nbsp;&nbsp;</p> <p><strong>通过标准的、为人熟知的手势实现直接操作</strong>。例如,你可以允许用户通过单指拖拽手势来移动物体,通过双指扭转手势使物体旋转。</p> <p><strong>保持交互的简单易行</strong>。触屏手势本质上是2D交互方式,而AR体验则涉及到与3D真实世界的互动。可以考虑简化用户与虚拟物体的交互方式,弥补维度的差异,例如将物体的移动范围限定在2D平面当中,或是只允许物体围绕单一轴线旋转。</p> <p><img alt="" src="/sites/default/files/images/201710-2/09.png" style="width: 600px; height: 292px;" /></p> <p class="figure-caption">将物体的移动范围限定在2D平面当中</p> <p><img alt="" src="/sites/default/files/images/201710-2/10.png" style="width: 600px; height: 293px;" /></p> <p class="figure-caption">将物体的旋转方式限定在单一轴线上</p> <p><strong>扩大手势操作的响应区域</strong>。在触屏上,人们很难精准地点击到微小物体上的特定位置,要将物体准确地放置在某个点上也不是一件容易的事。如果在可交互的物体附近监测到手势动作,通常可以假设用户此时有着操作该物体的意图。</p> <p><strong>考虑是否有必要为用户添加的物体提供缩放能力</strong>。对于那些在尺寸上不具备特定参考系的虚拟物体,譬如玩具或游戏角色,用户很可能需要根据自身所处的环境来调整它们的大小;这种情况下,为物体提供手动缩放功能是一种恰当的做法。另一方面,对于那些与现实环境有着特定比例关系的物体,例如家具,如果能够提供精准的预设尺寸,那么手动缩放功能便不是必需的。此外,缩放功能并不能用于调整物体与用户之间的距离 - 例如对物体进行放大操作,其结果只会改变物体自身的尺寸,而不会因为&ldquo;近大远小&rdquo;效应使实际距离被拉近。</p> <p><strong>警惕潜在的手势冲突</strong>。例如双手捏合手势会与双手扭转手势过于相似。如果你需要整合运用这些手势,那么要通过测试来验证其合理性,并且一定要向用户进行解释说明。</p> <p><strong>确保虚拟物体的运动方式足够平滑</strong>。当用户对物体进行缩放、旋转或移动操作时,其运动方式应该足够平滑和连贯,不会产生跳跃感。</p> <p><strong>探索更多更有趣的交互方式</strong>。手势操作并非人们与虚拟对象进行互动的唯一方式。你可以充分运用位置与运动方面的要素来打造更加生动有趣的交互体验,例如一个游戏角色可以在用户走近他的时候转过头来看着用户。</p> <h3> 处理问题</h3> <p>如果体验未达预期,应该允许用户重置场景。不要强迫用户等待体验环境的改善,或是受困于不佳的物体摆放方式。随时为用户提供重置场景的方式,帮助他们获取最佳体验。</p> <p><img alt="" src="/sites/default/files/images/201710-2/11.png" style="width: 600px; height: 387px;" /></p> <p><img alt="" src="/sites/default/files/images/201710-2/12.png" style="width: 600px; height: 385px;" /></p> <p><strong>在出现异常时为用户提供处理建议</strong>。分析环境和探测水平面的过程可能会由于诸多原因而出现失败的状况,例如环境不够明亮,水平面过于粗糙或反光度过高,摄像头位置不够稳定,等等。如果你的app监测到这些状况,或是水平面探测过程过于冗长,那么要及时向用户提供处理建议。</p> <ul> <li> 问题:特征不足。</li> <li> 建议:&ldquo;尝试调亮灯光,并稍作移动。&rdquo;</li> </ul> <ul> <li> 问题:探测到过快的运动速度。</li> <li> 建议:&ldquo;尝试慢慢移动你的手机。&rdquo;</li> </ul> <ul> <li> 问题:水平面探测过久。</li> <li> 建议:&ldquo;请稍作移动,调亮灯光,并确保手机摄像头瞄向足够细滑的水平面。&rdquo;</li> </ul> <p><strong>仅为具备兼容性的设备提供AR功能</strong>。如果你的app以AR为功能核心,那么在设置设备兼容范围时,应该将不支持ARKit的设备排除在外。如果AR只是app当中的次要功能,例如某家居类app以图册名录展示为主,同时会为一些家具提供AR演示,那么当用户通过不支持ARKit的设备使用该app时,要隐藏AR相关功能,而不是允许用户进行访问然后收到出错提示。</p> <h3> AR图标</h3> <p>你可以在app中使用标准的AR符号图标来触发基于ARKit的功能。访问<a href="https://developer.apple.com/design/resources/#ios-apps">Resources</a>部分,下载相关图形资源。</p> <p><img alt="" src="/sites/default/files/images/201710-2/13.png" style="width: 80px; height: 93px;" />&nbsp; &nbsp; &nbsp; &nbsp;<img alt="" src="/sites/default/files/images/201710-2/14.png" style="width: 400px; height: 103px;" /></p> <p><strong>意图明确地使用AR图标</strong>。该图标仅可被用于启动(基于ARKit的)AR模式。不要改动该图标的样式(除了尺寸和配色)或是将其用作其他目的,也不要在非ARKit打造的AR app当中使用该图标。</p> <p><strong>确保最基本的留白区域</strong>。你需要在AR图标四周保留最基本的留白区域,具体比例是图标高度的10%。其他界面元素不得占用这片区域,也不能以任何形式将这片区域环绕封闭起来。</p> <p><img alt="" src="/sites/default/files/images/201710-2/15.png" style="width: 100px; height: 109px;" /></p> <h3> AR徽标</h3> <p>对于提供了产品名录或类似形式内容的app,可以使用AR徽标来表示特定的内容对象能够通过AR模式进行查看。譬如一款家居类app可以使用AR徽标引导用户预览家具在自己家里的摆放样式,便于其制定购买决策。</p> <p><img alt="" src="/sites/default/files/images/201710-2/16.png" style="width: 600px; height: 370px;" /></p> <p><strong>意图明确地使用AR徽标</strong>。你可以访问<a href="https://developer.apple.com/design/resources/#ios-apps">Resources</a>部分,下载相关图形资源。AR徽标包含&ldquo;标准&rdquo;和&ldquo;简化&rdquo;两种样式,仅可被用于表示某产品或特定的内容对象可以通过(基于ARKit的)AR模式进行查看。不要改动该徽标的样式和配色,或是将其用作其他目的,也不要在非ARKit打造的AR app当中使用该徽标。</p> <p><img alt="" src="/sites/default/files/images/201710-2/17.png" style="width: 300px; height: 195px;" /></p> <p class="figure-caption">标准AR徽标</p> <p><img alt="" src="/sites/default/files/images/201710-2/18.png" style="width: 300px; height: 195px;" /></p> <p class="figure-caption">仅保留图标的简化AR徽标</p> <p>推荐使用标准AR徽标。通常,只在界面空间较为局促,难以容纳标准AR徽标的情况下考虑使用简化徽标。两种徽标的默认尺寸都可以确保他们的可辨识性。</p> <p><strong>仅在一部分内容支持AR模式、另一部分不支持的情况下使用AR徽标</strong>。如果全部内容均可以在AR模式下查看,那么徽标就是多余的了。</p> <p><strong>保持徽标的布局一致、清晰可见</strong>。通常,将徽标放置在内容缩略图的一角可以达到最佳呈现效果。保持全局范围内徽标位置的统一,确保其尺寸可以达到清晰辨识的程度(但不要过大,以防徽标遮挡住缩略图的细节内容)。</p> <p><strong>确保最基本的留白区域</strong>。你需要在AR徽标四周保留最基本的留白区域,具体比例是徽标高度的10%。其他界面元素不得占用这片区域,也不能以任何形式将这片区域环绕封闭起来。</p> <p><img alt="" src="/sites/default/files/images/201710-2/19.png" style="width: 300px; height: 195px;" /><img alt="" src="/sites/default/files/images/201710-2/20.png" style="width: 300px; height: 195px;" /></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/200" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/230" typeof="skos:Concept" property="rdfs:label skos:prefLabel">AR</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/232" typeof="skos:Concept" property="rdfs:label skos:prefLabel">ARKit</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> Tue, 17 Oct 2017 16:30:07 +0000 C7210 940 at http://www.beforweb.com http://www.beforweb.com/node/940#comments AR技术的需求类型及用例探索 http://www.beforweb.com/node/939 <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-arkit-apple-ar-ux-interface-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;八&rdquo;的样子。心可以说是很大了。</p> <p>错置,Displace,外滩美术馆,若干场实验性艺术表演。Contact Gonzo的暗室互殴让人沉迷。&ldquo;错置&rdquo;这个词实际上也很有些AR的味道在里面不是么。</p> <!--break--><p><img alt="" src="/sites/default/files/images/201710-1/2017-10-03_15-06-19.jpg" style="width: 600px;" /></p> <p>手边摆着两大杯热热的美式,心中笃定的一塌糊涂。虽是假期但事情还是要做的。之前译了iOS人机界面设计规范当中新增的ARKit相关内容,近期会在DPUX团队公众号发出;今天的话题在于对AR技术需求类型及用例的探索。有些类似于之前一篇关于典型运用领域方面的文章;但会更加细化;作为参考或有启发。</p> <p>下面进入译文。</p> <p>我们应该以怎样的方式运用AR技术?关于这一问题,全世界范围内的产品设计师与开发者们都在热切地关注并探索着。</p> <p>我曾经写过一篇这方面的文章,将当时的一些概念想法进行了分类汇总。在那之后,我开始思考:要实现这些想法,AR技术真的是必需的吗?诚然,你可以通过AR将一些概念落实到实际产品当中,但相比于传统技术模式,<strong>AR真的是更好的解决方案吗?还是只是噱头而已?</strong></p> <p>于是,相比于之前一次的尝试,<strong>本文更加侧重于对AR产品概念的可行性及实际价值进行评估,并就相应的设计原则进行讨论</strong>。</p> <h3> AR技术的优势是什么?</h3> <p>要打造出色的AR app或服务,我们首先需要回答一些最根本的问题,包括:</p> <ul> <li> AR技术可以提供哪些独特的功用及价值?</li> <li> 相比于其他解决方案,AR技术更擅长于实现哪些类型的需求?</li> <li> 哪些类型的用户可以在最大程度上受惠于AR技术方案?</li> </ul> <p>为了探寻这些问题的答案,我和朋友专门进行了一次思考交流,并产出如下结论;需要强调的是,下文内容主要针对我们的思考与对话进行梳理沉淀,我无意将这些内容宣称为&ldquo;正确答案&rdquo;。</p> <h3> AR技术的需求类型及用例分析</h3> <h4> 呈现仅在特定的情境当中有价值的信息</h4> <p><strong>室外导航</strong></p> <ul> <li> 类似传统的GPS功能,包括寻路、车道保持、距离测算等等。</li> <li> 对于没有特定地址的对象,提供方向指引,例如停车位、快餐车等等。</li> <li> 标记特定的位置,譬如帮你在巨大的停车库当中找到自己的车。</li> </ul> <p><strong>室内导航</strong></p> <ul> <li> 机场内信息亭的位置。</li> <li> 商场内特定商户的位置。</li> <li> 商场内服务设施的位置。</li> <li> 地铁入口的位置。</li> </ul> <p><strong>特定类型的元数据</strong></p> <ul> <li> 设备的安装和使用说明。</li> <li> 为维修工作提供操作指引。</li> </ul> <p><strong>效果预览</strong></p> <ul> <li> 在实际环境中预览墙纸样式。</li> <li> 预览房屋扩建后的样式。</li> <li> 预览某款家具摆放在客厅里的效果。</li> <li> 预览台灯的样式与实际环境是否搭配。</li> </ul> <p><strong>游戏</strong></p> <ul> <li> 捕获物体,例如Pokemon Go。</li> <li> 遍历检查点(checkpoints),例如按照预先规划的路程竞速。</li> <li> 完成与实际地点相关的任务。</li> </ul> <h4> 辅助用户在多个同类对象之间进行比较与选择</h4> <p><strong>提供产品元数据</strong></p> <ul> <li> 价格。</li> <li> 用户评价。</li> <li> 购买信息。</li> </ul> <p><strong>提供特定的物品信息</strong></p> <ul> <li> 雕塑。</li> <li> 绘画。</li> <li> 其他艺术品。</li> </ul> <h4> 从环境当中收集信息</h4> <p>AR技术在很大程度上需要涉及图像、面部和物体识别,大量数据因此而生成。这些数据的上传与共享可以推动其他基于当前环境信息的需求得到实现,类似Goolge Maps收集和运用交通信息那样。</p> <ul> <li> 收集汽车牌照信息。</li> <li> 收集商品价格信息。</li> <li> 收集正在搞促销的商户信息。</li> <li> 身份识别。</li> </ul> <h4> 仅对用户个人呈现的信息</h4> <ul> <li> 为舞台表演者呈现台词。</li> <li> 根据用户的个人偏好提供字幕。</li> <li> 对字幕进行即时翻译。</li> <li> 为演示文档提供备注。</li> <li> 演讲提词。</li> <li> 对话建议与备忘。</li> <li> 时间与日程</p> <ul> <li> 提醒会议安排。</li> <li> 烘焙计时。</li> <li> 演示时长提醒。</li> </ul> </li> <li> 隐私性较强的信息获取或内容消费。</li> </ul> <h4> 医疗与健康辅助</h4> <ul> <li> 色盲辅助与矫正。</li> <li> 为自闭症患者创造能够引发相关意识的场景。</li> <li> 通过图像、面部和物体识别,为眼疾患者提供环境信息。</li> </ul> <p><img alt="" src="/sites/default/files/images/201710-1/1_aVjs959h4HU1jJ3UrnTQZg.png" style="width: 600px;" /></p> <h3> 设计原则</h3> <p>基于上述需求类型分析,提炼以下设计原则供参考:</p> <ul> <li> AR适于呈现仅对用户个人可见的信息:针对各种隐私化的需求或他人无需获取相关信息的场景。</li> <li> AR适于呈现与情境或特定对象高度相关的信息:例如在组装电脑时,将说明信息呈现在主板上方,指导操作人员正确地安装部件;或将虚拟家居放置在房间当中便于预览样式等等。</li> <li> AR适于即时处理频繁更新的、与情境高度相关的信息:例如即时翻译字幕,或识别和处理环境信息。</li> </ul> </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/200" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/230" typeof="skos:Concept" property="rdfs:label skos:prefLabel">AR</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/231" typeof="skos:Concept" property="rdfs:label skos:prefLabel">增强现实</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> Tue, 03 Oct 2017 08:30:49 +0000 C7210 939 at http://www.beforweb.com http://www.beforweb.com/node/939#comments 更有趣的现实 - ARKit的典型运用领域 http://www.beforweb.com/node/910 <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-arkit-apple-ar-ux-interface-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>据说虹桥路红坊园区即将迁移/改建。消息也有些时日了,时不时再过来会见到一些店家/展馆正在搬迁,想必也是不假了。Musee Cafe,俊美的虎斑阿喵正盘踞在门口的大花盆中,略警惕又很温和的看着我。店里播放着Clapton不插电版本的Layla;时至午间,客人渐渐多了起来。</p> <p>日子就这样时而摧枯拉朽的疲劳,时而不那么真实的突然一切都宁静下来,张力十足,像近来入伏之后的天气,日晒与雨水轮番登场。隐约感到有一些还不坏的事情即将发生。这种感觉在酷热的夏天还是蛮少见的。</p> <p>是的仍是一篇AR方面的译文。最近有连续做这样几篇,留在不同的时间发布而已。短时间沉浸式的专注在一个特定的点上进行了解和学习,会比较高效。但这件事做起来也有些像是自说自话;仍是希望能够为同样有兴趣关注AR领域的同学带来一些启发,大家共同学习。</p> <p>之前的两篇文章分别是&ldquo;<a href="http://beforweb.com/node/908" target="_blank">更有趣的现实 - 五分钟带你了解AR</a>&rdquo;以及&ldquo;<a href="http://beforweb.com/node/909" target="_blank">ARKit与移动AR的未来</a>&rdquo;,今天则侧重于讨论新技术在一些典型领域当中有可能的运用方式。</p> <!--break--><p>下面进入译文。</p> <p>苹果新近发布了ARKit,这将会对AR(增强现实)的发展起到巨大的推动作用 - iPhone与iPad的庞大用户群体几乎是无可匹敌的基础,相比之下其他VR/AR平台在设备生态上的鸿沟就显得难以逾越了。</p> <p>目前的AR市场已经呈现出明显的增长势态,而苹果的入局更是会极大激发开发者的热情,移动AR产品在普通消费者当中的普及程度亦会随之提升。</p> <p>说起AR或VR的运用,我们总会首先想到游戏。我个人对于该领域的探索之一,就是与Candy Lab及Quicksilver Software合作的一款基于地理位置的AR游戏。的确,游戏仍然是很多人最为关注的领域,苹果在WWDC上演示ARKit时用的便是基于Unreal引擎打造的游戏demo,但另一方面,相比于AR技术在各个方面的巨大应用潜力而言,游戏只是其中一个小小的局部而已。</p> <p>对于AR这类整合了文字、图形识别以及地理位置相关的综合性技术而言,还有哪些最为适用的领域等待着我们放飞想象力去探索和尝试呢?</p> <h3> 服务与维修行业</h3> <p>在实地工作的技术人员可以预先通过可互动的AR技术来评估和演练维修流程,提前验证方案,降低实际过程中的出错几率。</p> <p>对于DIY爱好者,移动AR可以提供触手可及的专家级操作指导。制造商们可以为消费者提供AR形式的售后服务,使产品的价值与服务体验得到额外的提升;当消费者遇到使用上的问题时,甚至可以拿起手机通过移动AR的方式直接自助解决。</p> <p><img alt="" src="/sites/default/files/images/201707-1/01-five-ways-ar-arkit-product.jpg" style="width: 600px; height: 398px;" /></p> <h3> 教育</h3> <p>基于文字与图像识别技术的运用,我们可以使课本当中的内容以实际可见的图形样式跃然纸上,为学生们创造更加生动直观、易于记忆的学习体验。</p> <p><img alt="" src="/sites/default/files/images/201707-1/02-five-ways-ar-arkit-product.jpg" style="width: 600px; height: 400px;" /></p> <p>具备强烈情境感的历史课程将更加引人入胜,设想诸如AR历史地图、可视化的历史事件时间轴等一系列互动式的内容呈现方式 - AR技术可以为传统教学模式带来极大的体验提升。</p> <p>对于博物馆与历史古迹,我们也可以通过AR技术将动态影像投射在静态展品或环境当中,将参观者与历史更紧密的连接起来。虚拟人物可以与实境共存于同一个三维空间,这样参观者甚至可以漫步于历史场景当中。</p> <p><img alt="" src="/sites/default/files/images/201707-1/03-five-ways-ar-arkit-product.png" style="width: 600px; height: 422px;" /></p> <p>与封闭式的头戴VR设备不同,人们在使用移动AR时不仅不会与现实脱离连接,相反还会与其更全面、深入进行融合。</p> <p>虽然前面有说到&ldquo;相比于AR技术在各个方面的巨大应用潜力而言,游戏只是其中一个小小的局部而已&rdquo;,但作为游戏化学习方式的簇拥者,我仍相信AR技术将极大推动着协作式教学环境的打造,帮助学习者们在虚实结合的互动当中直观高效的掌握知识与技能。</p> <h3> 房产与装修</h3> <p>房产中介可以通过AR技术向客户展示房屋在布置完备或改造之后的完美样式。</p> <p>类似的,筹资者也可以更加生动直观的向潜在投资者们演示资金最终所能转化出的成果。</p> <p>景观规划也无需再像过去一样在餐桌上铺满草图,直接到你的庭院当中以实景的方式进行便好 - 果树还是绿叶树更加适合?柴火坑会不会显得多余?到庭院里边观察边调整,在你的触屏设备上尽情规划吧,</p> <p>记得不要真的坐到那虚拟摇椅上就好。</p> <p><img alt="" src="/sites/default/files/images/201707-1/04-five-ways-ar-arkit-product.jpg" style="width: 600px; height: 398px;" /></p> <h3> 店内购物向导</h3> <p>不知你是否和我一样 - 在Costco和Walmart这样的超市,或Lowe&rsquo;s、Home Depot一样的大型家居市场里寻找特定的商品时,感觉不能更糟。</p> <p>我很清楚自己需要什么,但我未必了解它的包装是怎样的,以及我能在哪里找到它。</p> <p><img alt="" src="/sites/default/files/images/201707-1/05-five-ways-ar-arkit-product.jpg" style="width: 600px; height: 400px;" /></p> <p>设想你的手机里有这样一款AR app,你在店内购物时,屏幕上会显示出你需要的商品所在的楼层,以及通往货架位置的导航线;当你在商品附近时,app还会通过图片识别技术将商品标识出来。</p> <h3> 医疗与军事</h3> <p>AR在医疗与军事等领域当中同样大有可为,而且职业医疗人员与军事人员同样是iOS设备的重要使用群体。最近,美国军方发布了一段在军事领域运用AR技术的概念视频,我个人也向相关组织提出过在AR在无人机操作方面的用途。</p> <h3> 小结</h3> <p>在所有这些领域当中,AR都处于早期起步阶段,但随着苹果的入局以及ARKit的发布,竞争与创新势必得到有力的推动。想想看,可以便捷运行AR产品的设备如今就在这世界上数亿人的口袋之中,其实我们距离AR大规模普及运用的日子比想象当中要更近。</p> <p>也许我们的未来真的会如同下面这个概念视频当中所展现出的样子吧:</p> <p><embed align="middle" allowfullscreen="true" allowscriptaccess="always" height="400" quality="high" src="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&amp;v=20161117&amp;vid=k0020d78r57&amp;auto=0" type="application/x-shockwave-flash" width="480"></embed></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/200" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/230" typeof="skos:Concept" property="rdfs:label skos:prefLabel">AR</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/231" typeof="skos:Concept" property="rdfs:label skos:prefLabel">增强现实</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/232" typeof="skos:Concept" property="rdfs:label skos:prefLabel">ARKit</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, 12 Jul 2017 10:35:05 +0000 C7210 910 at http://www.beforweb.com http://www.beforweb.com/node/910#comments