zoukankan      html  css  js  c++  java
  • 全套 AR 应用设计攻略都在这里!

    版权声明:本文为博主原创文章。未经博主同意不得转载。 https://blog.csdn.net/jILRvRTrc/article/details/79823908

    640?wx_fmt=png&wxfrom=5&wx_lazy=1

    通过将虚拟内容与现实世界融合,增强现实技术 (AR) 以身临其境的互动式体验,增强了我们与周围世界的交流与互动。ARCore 正是为了让大家能在 Android 上轻松构建增强现实应用而诞生。利用动作跟踪、环境理解和光估測这三项关键技术,将虚拟内容与用户通过手机摄像头看到的真实世界整合在一起。

     

    从根本上说,ARCore 做了两件事:在移动设备移动时跟踪它的位置,并构建自己对现实世界的理解。

     

    本文是基于对教育、购物、艺术及游戏等案例的基础研究及早期 AR 应用设计经验,对 AR 应用设计提供的一些设计指南,我们相信本指南的内容也会随着大家的探索而进一步演进。我们整理出这篇长文,希望帮助您建立一套 AR 体验设计的基础性和框架性的认识。并能对您的应用设计有所启示。

     

     

    环境

    1. 现实世界的环境

    AR 设计意味着须要针对很多不同的环境场景进行设计。

    您须要帮助用户理解使用您的应用的理想环境条件。

    从屋内的私密空间到广阔开放的外部环境,您须要考虑到用户使用您的应用的可能场景,并预測当中存在的潜在障碍。并确保和用户做出有效的沟通和提示。

     

    640?wx_fmt=gif

     

    2. 增强环境

    增强环境是设备摄像头捕获的现实世界图像与虚拟内容 (如数字物体或信息) 的结合。

    当您的手机在现实世界中移动时,ARCore 会通过一个名为并行測距与映射 (Concurrent Odometry and Mapping, COM) 的过程来理解手机相对于周围世界的位置。

    ARCore 会检測捕获的摄像头图像中的视觉差异特征 (称为特征点)。并使用这些点来计算其位置变化。这些视觉信息将与设备传感器測量结果结合,一起用于估測摄像头随着时间推移而相对于周围世界的姿态 (位置和朝向)。

    通过将渲染 3D 内容的虚拟摄像头的姿态与 ARCore 提供的设备摄像头的姿态对齐。开发人员能够从正确的透视角度渲染虚拟内容。渲染的虚拟图像能够叠加到从设备摄像头获取的图像上,让虚拟内容看起来就像现实世界的一部分一样。

    而通过检測特征点和平面,ARCore 将不断改进其对现实环境的理解。ARCore 能够查找看起来位于常见水平或倾斜表面上的成簇特征点,并让这些表面能够在您的应用用作承载内容的平面。

    请注意。假设用户移动到了预设的交互区域的边界,请做出明白的提示,并引导用户回到正确的位置。

    640?wx_fmt=gif

     

     

    用户差异

    1. 用户的移动

    用户才刚開始尝试着熟悉 360 度实时环境交互,所以在他们最初进行 AR 体验时,因为习惯了 2D 交互,往往都倾向于保持精巧。

    假设应用体验须要探索环境才干实现,或者用户沉浸在体验中不愿移动。则须要您来推动用户。比如,将虚拟角色略微放在视野之外,迫使用户移动并探索它。

     

    通常来说,依据每一个用户的环境和舒适度,他的移动可能会经历四个阶段 —— 坐着且双手固定。坐着但双手移动,站定且双手固定,自由移动。

    每一个阶段都有重要的注意事项,如需注意保持用户的舒适度等。

    此外,尽管移动可能会提高用户的參与度,但除非必要。否则不要强制用户移动。

     

    另外也须要考虑用户因为身体条件等原因确实无法移动的可能 (如疲劳,或者其它主客观原因) 。

    假设用户无法移动,则须要提供替代的体验方式。

    譬如说。不再鼓舞用户靠近。而是强调其它活动,比方说物体交互及变换。

    但这个时候,确保文字及注解在各个角度都清晰可见则十分重要。

    640?</p><p>wx_fmt=gif

    △ 确保文字在各个角度都清晰可见

     

    2. 用户舒适度

    考虑到长时间拿着移动设备可能会非常累,您须要时刻注意用户的身体舒适度:在您应用体验的全部阶段都考虑到用户的身体舒适度;注意控制应用体验的时长,考虑用户何时须要歇息;让用户能够暂停或保存进度,以使他们随时随地都能够继续体验。

     

    3. 降低用户的挫折感

    您还须要预測用户所处空间的局限性 —— 室内或室外。空间的实体大小。以及包含家具、物体或人在内的障碍物。

    尽管无法准确预知用户在使用应用时的位置,但能够尽量提供建议或反馈以降低用户的沮丧感。

    640?wx_fmt=gif△ 注意用户空间状况

     

     

    初始化并加入虚拟内容

    1. 平面发现

    平面发现包含查找与检測两个阶段。

     

    首先,ARCore 通过识别视觉上不同的特征点来检測平面。您须要为用户提供有关怎样扫描其环境的明白说明。

    此外。请使用清晰的视觉线索来引导用户正确地移动手机,以便准确捕捉他们的环境。

     

    当用户扫描他们的环境时,依据平面检測结果,您须要提供关于用户下一步应该做什么的指导性提示 (比如放置物体或改动手机动作)。

     

    在多重平面上,您能够利用平面可视化来帮助用户放置物体。

    譬如说,突出显示已检測到且能够放置物体的平面;创建不同平面之间的视觉差异,以免之后放置 3D 物体时出现混淆;突出显示用户正在查看或指向的平面,而不要一次性突出多个平面。

    640?wx_fmt=gif△ 创造不同平面之间的视觉差异

     

    2. 最佳放置范围

    最佳放置范围有助于确保用户将物体放置在舒适的观看距离上。为了确定最佳放置位置,您须要将场景进行分段、设置最大放置距离并确立目标点。

     

    透过移动屏幕上的有限视野观察世界时,可能会妨碍用户感知深度、比例和距离,并影响用户的应用体验以及与物体进行交互的能力。尤其是深度感知。全然基于物体放置位置而改变。为帮助用户更好地了解其环境中的深度,您能够通过标记屏幕的三个不同区域 —— 离用户近期的前台、离用户最远的后台以及用户最佳观看范围的中央舞台 —— 来考量舒适的观看范围。但请注意。三个区域的划分与手机的视角有关。

     

    而后。您须要引导用户在场景中放置对象,帮助他们避免将物体置于场景内不舒适的距离。

    而设置最大放置距离的默认值有助于确保将物体放置在舒适的观看距离内,也确保了用户在继续拖动该物体时可保持真实的比例。

     

    此外,您能够使用视觉提示来指导用户放置物体,比方阴影能够帮助指示目标点 (终于放置物体的位置),而且使用户更easy理解应该将物体放置在检測到的平面上的哪个位置。

    640?wx_fmt=gif

    △ 利用阴影来指明目标点

     

    3. 放置

    物体放置是指将虚拟内容置于现实世界的环境中。分为自己主动放置及手动放置两种方式,您能够依据实际情况选择适合您的应用体验的方式。

     

    自己主动放置是由应用控制的。一旦检測到平面,虚拟物体就会被自己主动置于场景之中。

    640?wx_fmt=gif

    △ 虚拟物体自己主动置于场景之中

     

    手动放置是由用户控制的。用户可自行在场景内放置并移动物体。比如通过锚定一个游戏空间或设置位置来启动 AR 体验。

     

     

    与虚拟物体进行交互

     

    1. 选取

    物体选取意味着用户能够识别、操控虚拟物体并与其进行交互。

    您能够通过创建视觉提示来突出用户能够互动的物体。

    640?</p><p>wx_fmt=gif

    △ 突出用户能够互动的物体

     

    2. 平移

    平移同意用户沿着平面移动虚拟物体。或者将其从一个平面移动到还有一个平面。用户在选中物体之后,能够使用手指进行拖拽或实际移动手机设备。

    640?wx_fmt=gif

    △ 选中物体并拖拽移动

     

    3. 旋转

    旋转是指使物体定向转动到预定方向,包含自己主动及手动两种方式。

    除非是有益设计的体验。否则应尽量避免自己主动旋转。以免让用户困惑。

     

    4. 缩放

    缩放指的是放大或缩小物体尺寸的能力,通常通过张合手势 (Pinch Gesture) 来实现。

     

    640?wx_fmt=gif△ 手指张合来进行缩放

     

    5. 接近度和手势

    重叠在一起的物体可能会导致用户难以选取,尺寸过小的交互对象也难以进行互动。

     

    为了实现最佳的交互效果,您须要细致考量触摸目标的尺寸。对于用户来说。对非常小或距离非常远的物体进行精确操作是一个挑战。当应用在物体附近检測到手势动作时,都会假定实用户正在尝试与其交互。您须要为其提供尺寸合理的触摸目标 (比方暂时提供大一圈的 “交互用轮廓” )。即使物体本身尺寸较小。

    640?</p><p>wx_fmt=gif

    △ 提供尺寸合理的触摸目标

     

    此外,您还须要为手势和交互创建一套统一的系统。每一个手势相应到特定的交互或任务。避免使用相似的手势来完毕不同类型的任务。

     

     

    设计应用体验

    1. UI 组件

    设计 UI 组件来打造身临其境的用户体验,力求在视觉上将现实空间和虚拟空间无缝整合:

    • 画廊 / 道具库:拥有非常多道具可供选择是好事。但要尽量避免让用户在场景和屏幕之间来回切换,因为这可能会分散注意力并降低 AR 本身的沉浸感。试着降低屏幕上 UI 元素的数量,或将这些控件放置在场景中。

    • 删除:利用用户熟悉的方式,如将物体拖到垃圾桶图标上以删除它。

    • 重置:当系统无响应或者应用体验是基于任务完毕度推进 (比如游戏) 时。同意用户放弃当前的体验并又一次開始。

    • 权限:仅在用户须要推进相关体验时才显现权限,否则用户会犹豫是否授权。此外。还需明白告知每一个权限的用处和相关性。比如,告诉用户为什么须要訪问他们设备的摄像头或位置。

    • 错误:在设计时,须要让用户轻松地从错误中回复状态。您能够使用可视化提示、动画和文本的组合来为问题 (不论是系统相关还是用户造成的问题) 提供清晰的解决方式。

      但需注意,指明错误的时候不可责备用户,仅仅需引导用户採取正确的行动就可以。

    640?wx_fmt=gif

    △ 上图左: 正确。

    简单的停靠菜单来避免注意力分散。上图右: 错误。不要让用户在 3D 场景和 2D 屏幕之间来回切换。

     

    2. 体验

    • 界面:体验有足够的代入感。但相同要让用户感觉可控。

    • 初始化:需明白从 2D 到 AR 的转换过程,能够使用视觉技术来清晰地指示系统状态。

      比如,当转换即将发生时,调暗手机或使用特效模糊屏幕。

    • 新手流程和说明:同意用户高速启动 AR 体验,并在首次执行体验中教导用户怎样执行关键任务。有助于将说明和任务结合,并积累留存率。此外。需尽量不单纯依靠文本。而是综合使用视觉化提示、动效和动画来指导用户。

    • 熟悉:使用不会打破沉浸式体验的标准 UX 互动模型和模式。有助于降低提供指示或具体新手流程的需求。

    • 横向和纵向模式:提供对纵向和横向双模式的支持。假设不可行,请选择适合您的体验的模式。支持这两种模式可创造更加身临其境的体验,并添加用户的舒适度。

    • 音频探索:利用音频来鼓舞使用应用并 360 度探索周围环境。但需确保声音是在增强用户体验,而不是在分散注意力。

    • 视觉探索:使用视觉化提示推动用户脱离 2D 屏幕的束缚。去探索更广阔的 AR 世界。

      比如,让一仅仅鸟飞离屏幕。直到用户将其带回场景中,帮助引导用户达成预期的目标。

    • 深度碰撞:为了避免深度冲突 (即虚拟物体与现实世界相互交错) 。请注意设置合理的空间大小以及用户使用应用的各种可能环境。通过清晰地表明实现您的应用体验须要多少空间 —— 是桌面还是整个房间,或者是世界级的空间 —— 提前为用户设置期望值。

    640?wx_fmt=gif

    △ 向用户表明应用体验所需的空间

     

     

    真实性

    • 深度:用户在 AR 体验中非常难感知深度和距离。而利用阴影、遮挡、透视、纹理、常见物体的比例尺和參照物的放置可直观传达深度。

    • 照明:当实际不存在照明时,虚光 (false ambient lighting) 能够为场景中的物体创造深度和真实感。

    • 降低违和感:在 AR 体验中的虚拟物体也须要考虑和周围物体的一致性,不论是从视觉上还是物理特征上。人类已经非常熟悉真实环境了,所以假设出现违和感的话会非常 “出戏”。

      当 AR 中的虚拟内容与现实世界环境做出互动时,须要统筹考虑通过阴影、光线、遮挡、反射和碰撞来降低违和感。

    640?</p><p>wx_fmt=gif

    △ 利用阴影、光线及反射来让虚拟与现实很多其它地融合

     

    相信看到这里。您对于 AR 应用设计已经有了一定理解。但因为篇幅有限,本次我们仅仅是总结性地为您介绍了大体要点。若您对 AR 应用设计有其它的困惑,也欢迎随时与我们沟通,期待您的 AR 应用作品的出炉!

     

     

    640?wx_fmt=gif 点击文末 | 阅读原文 | 或訪问 ARCore 开发人员站点 ( https://developers.google.cn/ar/ ),了解很多其它相关的信息及实操建议。

     

  • 相关阅读:
    vuex2.0 基本使用(4) --- modules
    vuex2.0 基本使用(3) --- getter
    vuex2.0 基本使用(2) --- mutation 和 action
    vuex2.0 基本使用(1) --- state
    git bash 下操作文件及文件夹命令
    SOFA 源码分析 — 负载均衡和一致性 Hash
    SOFA 源码分析 — 预热权重
    SOFA 源码分析— 事件总线
    SOFA 源码分析 — 自定义线程池原理
    SOFA 源码分析 — 链路数据透传
  • 原文地址:https://www.cnblogs.com/ldxsuanfa/p/9920520.html
Copyright © 2011-2022 走看看