全套 AR 应用设计攻略都在这里!
通过将虚拟内容与现实世界融合,增强现实技术 (AR) 以身临其境的互动式体验,增强了我们与周围世界的交流与互动。ARCore 正是为了让大家能在 Android 上轻松构建增强现实应用而诞生。利用动作跟踪、环境理解和光估測这三项关键技术,将虚拟内容与用户通过手机摄像头看到的真实世界整合在一起。
从根本上说,ARCore 做了两件事:在移动设备移动时跟踪它的位置,并构建自己对现实世界的理解。
本文是基于对教育、购物、艺术及游戏等案例的基础研究及早期 AR 应用设计经验,对 AR 应用设计提供的一些设计指南,我们相信本指南的内容也会随着大家的探索而进一步演进。我们整理出这篇长文,希望帮助您建立一套 AR 体验设计的基础性和框架性的认识。并能对您的应用设计有所启示。
环境
1. 现实世界的环境
AR 设计意味着须要针对很多不同的环境场景进行设计。
您须要帮助用户理解使用您的应用的理想环境条件。
从屋内的私密空间到广阔开放的外部环境,您须要考虑到用户使用您的应用的可能场景,并预測当中存在的潜在障碍。并确保和用户做出有效的沟通和提示。
2. 增强环境
增强环境是设备摄像头捕获的现实世界图像与虚拟内容 (如数字物体或信息) 的结合。
当您的手机在现实世界中移动时,ARCore 会通过一个名为并行測距与映射 (Concurrent Odometry and Mapping, COM) 的过程来理解手机相对于周围世界的位置。
ARCore 会检測捕获的摄像头图像中的视觉差异特征 (称为特征点)。并使用这些点来计算其位置变化。这些视觉信息将与设备传感器測量结果结合,一起用于估測摄像头随着时间推移而相对于周围世界的姿态 (位置和朝向)。
通过将渲染 3D 内容的虚拟摄像头的姿态与 ARCore 提供的设备摄像头的姿态对齐。开发人员能够从正确的透视角度渲染虚拟内容。渲染的虚拟图像能够叠加到从设备摄像头获取的图像上,让虚拟内容看起来就像现实世界的一部分一样。
而通过检測特征点和平面,ARCore 将不断改进其对现实环境的理解。ARCore 能够查找看起来位于常见水平或倾斜表面上的成簇特征点,并让这些表面能够在您的应用用作承载内容的平面。
请注意。假设用户移动到了预设的交互区域的边界,请做出明白的提示,并引导用户回到正确的位置。
用户差异
1. 用户的移动
用户才刚開始尝试着熟悉 360 度实时环境交互,所以在他们最初进行 AR 体验时,因为习惯了 2D 交互,往往都倾向于保持精巧。
假设应用体验须要探索环境才干实现,或者用户沉浸在体验中不愿移动。则须要您来推动用户。比如,将虚拟角色略微放在视野之外,迫使用户移动并探索它。
通常来说,依据每一个用户的环境和舒适度,他的移动可能会经历四个阶段 —— 坐着且双手固定。坐着但双手移动,站定且双手固定,自由移动。
每一个阶段都有重要的注意事项,如需注意保持用户的舒适度等。
此外,尽管移动可能会提高用户的參与度,但除非必要。否则不要强制用户移动。
另外也须要考虑用户因为身体条件等原因确实无法移动的可能 (如疲劳,或者其它主客观原因) 。
假设用户无法移动,则须要提供替代的体验方式。
譬如说。不再鼓舞用户靠近。而是强调其它活动,比方说物体交互及变换。
但这个时候,确保文字及注解在各个角度都清晰可见则十分重要。
△ 确保文字在各个角度都清晰可见
2. 用户舒适度
考虑到长时间拿着移动设备可能会非常累,您须要时刻注意用户的身体舒适度:在您应用体验的全部阶段都考虑到用户的身体舒适度;注意控制应用体验的时长,考虑用户何时须要歇息;让用户能够暂停或保存进度,以使他们随时随地都能够继续体验。
3. 降低用户的挫折感
您还须要预測用户所处空间的局限性 —— 室内或室外。空间的实体大小。以及包含家具、物体或人在内的障碍物。
尽管无法准确预知用户在使用应用时的位置,但能够尽量提供建议或反馈以降低用户的沮丧感。
△ 注意用户空间状况
初始化并加入虚拟内容
1. 平面发现
平面发现包含查找与检測两个阶段。
首先,ARCore 通过识别视觉上不同的特征点来检測平面。您须要为用户提供有关怎样扫描其环境的明白说明。
此外。请使用清晰的视觉线索来引导用户正确地移动手机,以便准确捕捉他们的环境。
当用户扫描他们的环境时,依据平面检測结果,您须要提供关于用户下一步应该做什么的指导性提示 (比如放置物体或改动手机动作)。
在多重平面上,您能够利用平面可视化来帮助用户放置物体。
譬如说,突出显示已检測到且能够放置物体的平面;创建不同平面之间的视觉差异,以免之后放置 3D 物体时出现混淆;突出显示用户正在查看或指向的平面,而不要一次性突出多个平面。
△ 创造不同平面之间的视觉差异
2. 最佳放置范围
最佳放置范围有助于确保用户将物体放置在舒适的观看距离上。为了确定最佳放置位置,您须要将场景进行分段、设置最大放置距离并确立目标点。
透过移动屏幕上的有限视野观察世界时,可能会妨碍用户感知深度、比例和距离,并影响用户的应用体验以及与物体进行交互的能力。尤其是深度感知。全然基于物体放置位置而改变。为帮助用户更好地了解其环境中的深度,您能够通过标记屏幕的三个不同区域 —— 离用户近期的前台、离用户最远的后台以及用户最佳观看范围的中央舞台 —— 来考量舒适的观看范围。但请注意。三个区域的划分与手机的视角有关。
而后。您须要引导用户在场景中放置对象,帮助他们避免将物体置于场景内不舒适的距离。
而设置最大放置距离的默认值有助于确保将物体放置在舒适的观看距离内,也确保了用户在继续拖动该物体时可保持真实的比例。
此外,您能够使用视觉提示来指导用户放置物体,比方阴影能够帮助指示目标点 (终于放置物体的位置),而且使用户更easy理解应该将物体放置在检測到的平面上的哪个位置。
△ 利用阴影来指明目标点
3. 放置
物体放置是指将虚拟内容置于现实世界的环境中。分为自己主动放置及手动放置两种方式,您能够依据实际情况选择适合您的应用体验的方式。
自己主动放置是由应用控制的。一旦检測到平面,虚拟物体就会被自己主动置于场景之中。
△ 虚拟物体自己主动置于场景之中
手动放置是由用户控制的。用户可自行在场景内放置并移动物体。比如通过锚定一个游戏空间或设置位置来启动 AR 体验。
与虚拟物体进行交互
1. 选取
物体选取意味着用户能够识别、操控虚拟物体并与其进行交互。
您能够通过创建视觉提示来突出用户能够互动的物体。
△ 突出用户能够互动的物体
2. 平移
平移同意用户沿着平面移动虚拟物体。或者将其从一个平面移动到还有一个平面。用户在选中物体之后,能够使用手指进行拖拽或实际移动手机设备。
△ 选中物体并拖拽移动
3. 旋转
旋转是指使物体定向转动到预定方向,包含自己主动及手动两种方式。
除非是有益设计的体验。否则应尽量避免自己主动旋转。以免让用户困惑。
4. 缩放
缩放指的是放大或缩小物体尺寸的能力,通常通过张合手势 (Pinch Gesture) 来实现。
△ 手指张合来进行缩放
5. 接近度和手势
重叠在一起的物体可能会导致用户难以选取,尺寸过小的交互对象也难以进行互动。
为了实现最佳的交互效果,您须要细致考量触摸目标的尺寸。对于用户来说。对非常小或距离非常远的物体进行精确操作是一个挑战。当应用在物体附近检測到手势动作时,都会假定实用户正在尝试与其交互。您须要为其提供尺寸合理的触摸目标 (比方暂时提供大一圈的 “交互用轮廓” )。即使物体本身尺寸较小。
△ 提供尺寸合理的触摸目标
此外,您还须要为手势和交互创建一套统一的系统。每一个手势相应到特定的交互或任务。避免使用相似的手势来完毕不同类型的任务。
设计应用体验
1. UI 组件
设计 UI 组件来打造身临其境的用户体验,力求在视觉上将现实空间和虚拟空间无缝整合:
画廊 / 道具库:拥有非常多道具可供选择是好事。但要尽量避免让用户在场景和屏幕之间来回切换,因为这可能会分散注意力并降低 AR 本身的沉浸感。试着降低屏幕上 UI 元素的数量,或将这些控件放置在场景中。
删除:利用用户熟悉的方式,如将物体拖到垃圾桶图标上以删除它。
重置:当系统无响应或者应用体验是基于任务完毕度推进 (比如游戏) 时。同意用户放弃当前的体验并又一次開始。
权限:仅在用户须要推进相关体验时才显现权限,否则用户会犹豫是否授权。此外。还需明白告知每一个权限的用处和相关性。比如,告诉用户为什么须要訪问他们设备的摄像头或位置。
错误:在设计时,须要让用户轻松地从错误中回复状态。您能够使用可视化提示、动画和文本的组合来为问题 (不论是系统相关还是用户造成的问题) 提供清晰的解决方式。
但需注意,指明错误的时候不可责备用户,仅仅需引导用户採取正确的行动就可以。
△ 上图左: 正确。
简单的停靠菜单来避免注意力分散。上图右: 错误。不要让用户在 3D 场景和 2D 屏幕之间来回切换。
2. 体验
界面:体验有足够的代入感。但相同要让用户感觉可控。
初始化:需明白从 2D 到 AR 的转换过程,能够使用视觉技术来清晰地指示系统状态。
比如,当转换即将发生时,调暗手机或使用特效模糊屏幕。
新手流程和说明:同意用户高速启动 AR 体验,并在首次执行体验中教导用户怎样执行关键任务。有助于将说明和任务结合,并积累留存率。此外。需尽量不单纯依靠文本。而是综合使用视觉化提示、动效和动画来指导用户。
熟悉:使用不会打破沉浸式体验的标准 UX 互动模型和模式。有助于降低提供指示或具体新手流程的需求。
横向和纵向模式:提供对纵向和横向双模式的支持。假设不可行,请选择适合您的体验的模式。支持这两种模式可创造更加身临其境的体验,并添加用户的舒适度。
音频探索:利用音频来鼓舞使用应用并 360 度探索周围环境。但需确保声音是在增强用户体验,而不是在分散注意力。
视觉探索:使用视觉化提示推动用户脱离 2D 屏幕的束缚。去探索更广阔的 AR 世界。
比如,让一仅仅鸟飞离屏幕。直到用户将其带回场景中,帮助引导用户达成预期的目标。
深度碰撞:为了避免深度冲突 (即虚拟物体与现实世界相互交错) 。请注意设置合理的空间大小以及用户使用应用的各种可能环境。通过清晰地表明实现您的应用体验须要多少空间 —— 是桌面还是整个房间,或者是世界级的空间 —— 提前为用户设置期望值。
△ 向用户表明应用体验所需的空间
真实性
深度:用户在 AR 体验中非常难感知深度和距离。而利用阴影、遮挡、透视、纹理、常见物体的比例尺和參照物的放置可直观传达深度。
照明:当实际不存在照明时,虚光 (false ambient lighting) 能够为场景中的物体创造深度和真实感。
降低违和感:在 AR 体验中的虚拟物体也须要考虑和周围物体的一致性,不论是从视觉上还是物理特征上。人类已经非常熟悉真实环境了,所以假设出现违和感的话会非常 “出戏”。
当 AR 中的虚拟内容与现实世界环境做出互动时,须要统筹考虑通过阴影、光线、遮挡、反射和碰撞来降低违和感。
△ 利用阴影、光线及反射来让虚拟与现实很多其它地融合
相信看到这里。您对于 AR 应用设计已经有了一定理解。但因为篇幅有限,本次我们仅仅是总结性地为您介绍了大体要点。若您对 AR 应用设计有其它的困惑,也欢迎随时与我们沟通,期待您的 AR 应用作品的出炉!
点击文末 | 阅读原文 | 或訪问 ARCore 开发人员站点 ( https://developers.google.cn/ar/ ),了解很多其它相关的信息及实操建议。
全套 AR 应用设计攻略都在这里!的更多相关文章
- 申请Office 365一年免费的开发者账号攻略(2018年10月份版本)
要进行Office 365开发,当然需要有完整的Office 365环境才可以.为了便于广大开发人员快速地启动这项工作,微软官方给所有开发人员提供了免费的一年开发者账号 那么如何申请Office ...
- UI设计行业中的“延禧攻略”,教你从青铜变王者
最近一直在追<延禧攻略>,女主魏璎珞敢爱敢恨,有仇必报的性格吸引不少人,她从低贱的秀坊小宫女步步为营,最终成为皇帝最宠爱的令妃呼风唤雨.尔虞我诈的后宫,想要打怪升级光有颜值是万万不够的,更 ...
- 主程的晋升攻略(4):TCP、消息分包和协议设计
在<主程的晋升攻略(3):IP.DNS和CDN>中,一次网络请求经过DNS解析知道了目的IP,如今就要发出网络包,这里我们说一说TCP的相关话题. TCP是一种流式协议 讲网络编程的教科书 ...
- 极客时间-左耳听风-程序员攻略-UI/UX设计
程序员练级攻略:UI/UX设计 学习设计新手, 7 steps to become a UI/UX designer 学习设计的一些原则和套路,如配色.平衡.排版.一致性等. 用户体验的 4D 步骤- ...
- 【C#代码实战】群蚁算法理论与实践全攻略——旅行商等路径优化问题的新方法
若干年前读研的时候,学院有一个教授,专门做群蚁算法的,很厉害,偶尔了解了一点点.感觉也是生物智能的一个体现,和遗传算法.神经网络有异曲同工之妙.只不过当时没有实际需求学习,所以没去研究.最近有一个这样 ...
- linux内核升级图文攻略(转)
一.Linux内核概览Linux是一个一体化内核(monolithic kernel)系统.设备驱动程序可以完全访问硬件.Linux内的设备驱动程序可以方便地以模块化(modularize)的形式设置 ...
- Moon.Orm3.8技术全攻略
Moon.ORM技术全攻略 一.绪论 本文主要是针对Moon.ORM的技术的讨论及其使用使用指导.如有其它疑问,请留言.本文主要针对Moon.ORM3.9版本,同时将会对4.0做一个技术预览.本文从 ...
- 30天,O2O速成攻略【8.16武汉站】
活动概况 时间:2015年08月16日13:30-16:30 地点:光谷创业咖啡(光谷广场资本大厦一楼停车场内) 主办:APICloud.爱立示.MBA移动业务助理 网址:www.apicloud.c ...
- 30天,O2O速成攻略【8.15长沙站】
活动概况 时间:2015年08月15日13:30-16:30 地点:库可咖啡(长沙市岳麓区阜埠河路139号天马都乐街,湖南大学天马学生公寓东侧) 主办:APICloud.爱立示.兰软 网址:www.a ...
随机推荐
- Englis - 英文字母和音标
英语学习基础基础是一切的根本 学习是一个长期积累知识的过程,正确掌握各科学习方法显得尤其重要!很多孩子学习成绩不好.记忆力不佳都是因为没有掌握正确的学习方法而造成的. 最基本的是:26个英文字母 48 ...
- 详解SQL中的GROUP BY语句
下面为您介绍SQL语句中GROUP BY 语句,GROUP BY 语句用于结合合计函数,根据一个或多个列对结果集进行分组. 希望对您学习SQL语句有所帮助. SQL GROUP BY 语法 SELEC ...
- POJ2356 Find a multiple 抽屉原理(鸽巢原理)
题意:给你N个数,从中取出任意个数的数 使得他们的和 是 N的倍数: 在鸽巢原理的介绍里面,有例题介绍:设a1,a2,a3,……am是正整数的序列,试证明至少存在正数k和l,1<=k<=l ...
- C++中的异常安全性【转】
原文写的非常好,来自这里 一个函数如果说是“异常安全”的,必须同时满足以下两个条件:1.不泄漏任何资源:2.不允许破坏数据. 我们先通过两个反面的例子开始. 第一个是造成资源泄漏的例子.一个类Type ...
- vue经验 - 那些自己给自己挖的深坑
深坑场景:vue-异步请求数据,数据还没回来,页面却如饥似渴的准备好了的尴尬场景:问题原因和解决如下: 1.先说vuex中的store,一开始我为了偷懒是这么设置的,如下图: 然后我到了组件中直接这么 ...
- CSS学习之盒子模型
1. 前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张图片里并不能放东西,它自己就是自 ...
- [原]Linux下清空文件内容的三种方法
========问题======== 有些文件需要清空内容而不改变属性 =======解决方案====== 1.直接删除,创建同名文件.(这种方法的弊端是有可能这个文件带着权限或者是属性,那么你新建这 ...
- WinDbg基于管道的虚拟机Kernel Debugging
Windows Server 2012 + Hyper-V调试Windows XP SP3 32-bit虚拟机. 1.Hyper-V选中虚拟机,设置COM port,Named pipe定义一个名字. ...
- C# DataView操作DataTable
1.DataView筛选数据 //假设有一个DataTable数据 DataTable dt = new DataTable(); //DataTable转成DefaultView DataView ...
- 【CF633H】Fibonacci-ish II 莫队+线段树
[CF633H]Fibonacci-ish II 题意:给你一个长度为n的序列$a_i$.m个询问,每个询问形如l,r:将[l,r]中的所有$a_i$排序并去重,设得到的新数列为$b_i$,求$b_1 ...