小记一次用 ARKit 设计和开发 Mobile AR 篮球小项目

【9 月 22 日更新】AR Solo Basketball 终于上线 App Store 了。

最近利用 ARkit 和 Unity 开发的一个小项目 AR 篮球 Solo Shooting App，而且很荣幸，经过筛选，这个小demo被 ARKitweekly官方Twitter 和 ProductHunt 推荐了！

现在给大家分享几点小感悟。由于作者是设计师不是专业开发者，所以内容偏设计多一点。

先预览一下项目视频。

ARKit 能够实时识别和跟踪三维空间中镜头的位置，能够感受光线的位置和强度，并附加在虚拟模型上。在 Unity 插件中也提供了能接受阴影的透明地板材质让模型看起来更加融入场景，以及附带粒子系统用来作为检测平面过程的视觉反馈。局限的地方在于 ARKit 本身是利用手持智能设备为载体，交互操作的输入非常的有限，同样输出设备为手持设备的屏幕，屏幕的大小直接决定了观察范围的大小。还特别烧电，Xcode 的分析中接近一半电量都被 GPU 所占去。

首次引导系统设计壹

我身边的人在利用 ARkit 设计时最头疼就是首次引导系统的设计，因为要得到一个贴合环境的效果，ARkit 需要用户首先主动去拍摄和寻找平面，然后等待系统寻找镜头内的平面。因为系统尚未成熟，不能瞬间辨别平面，所以就需要用户完成额外一系列操作去辅助系统。

另外由于能显示的范围只有手持设备的屏幕那么大，如果使用的模型很大，就得经历“低头找平面”到“抬头看模型”的过程。在 AR 世界里，360度全是可被利用的环境，而且运用第一人称视角进行设计，就要让用户不迷失在“找模型”和“找信息”的困境里，就得最好用户的注意力引导工作。

到底什么样的平面能够被快速识别呢？开发者们给的建议是环境光源充足，纹理越复杂越好检测。（算法上有个名词叫特征点，纹理越复杂，特征点越多。此外图案越不规则，重复纹理越少，也越好定位。）相反，干干净净的素色平面，会大大地降低识别速度。

所以在设计首次引导系统时，新手用户在 AR 镜头里，默认是没有任何指引，不知道要怎么做。第一关难题就需要让用户快速找到平面作为篮球场的基面。那么引导信息就要考虑用“屏幕型信息”还是“环境型信息”。屏幕型信息是指不随环境改变，一直在屏幕某个地方显示的信息；环境型信息是指以环境中的物体为载体显示的信息。在 ARkit 中，想要得到环境型信息，首先你得让系统“看到”环境，所以第一步打开 app 后，就得使用屏幕型信息来告知用户现在需要找一个平面。我的首版设计非常的简单，在屏幕顶有指引文字“当你看到蓝色圆圈，点击它。如果还看不见，靠近一点地面。”。

当检测一段时间，就会出现了蓝色圆圈。

我在蓝色圆圈上加了Tap target的引导，这个使用的是环境型信息了，因为此时用户注意力完全在突然出现的蓝色圆圈上，此时需要用户点击蓝色圆圈作为地板基面，所以直接在蓝色圆圈上显示引导信息是最有效的。

不过首次可用性测试中得到的反馈基本都是“为什么我什么都没看见”和“那些光色的小点是什么，蓝色的圈又是什么”。原因是使用者不具备以上所说的识别技术知识，连第一步的需要“拍什么”都没有被成功引导到，更何谈看到小光点和蓝色圆圈和理解他们。

于是我在第二版中在打开 app 后添加了一个引导页，通过图文告诉用户应该把镜头对着哪里，看到的小光点和蓝色圆圈又是什么。

第二次可用性测试中得到的反馈是用户在看到引导后，稍微粗略扫了一眼就关掉，他们得知的是需要像图中的角度那样拍摄一个带明显纹理的平面，也知道看到蓝色圆圈就点击。但同样的问题是检测成功率很低，因为像图示中的角度根本无法快速让系统检测到平面，很多用户会360度转身周围拍，寻找图示中的小光点。

于是我在研究了一下如何最快最有把握地检测到平面后，发现了只要出现了几个小光点后，让相机更加靠近平面表面，小光点数量会瞬间暴涨并且出现蓝色框框。于是在第三版中，与其告知用户小光点是什么，蓝色框框又是什么，倒不如直切用户最终目标：用最快最有把握的方法找到基面。我把图示改成了如下。

效果大大改善。在第三次测试中，用户看到简练的的文字信息引导，就跟着图示的角度去拍摄（这个就是测出来的最快最有把握的角度），这时候很快就能出现检测成功的蓝色圆圈。点击就会看到球场的地板。这次虽然用户不知道他们看到的小光点和蓝框是什么，但目标快速地达到了。这也是我自己首次作为独立开发者陷入的典型困境，因为花了很长很长的时间去弄清楚原理，代码等技术因素，就想把我理解的技术原理塞给用户，却忽略了用户的最根本目标。

点击检测成功的蓝色圆圈，这时候就会以这个为基面出现球场了。于是引出了接下来要说的第二个设计了。

首次引导系统设计贰

这也是在用 ARKit 设计时的一个经典问题：由于整个周边环境都是 AR 显示范围，但用户在特定场景特定任务的特定环节的注意力却只在一个很小的范围。在这个时候，我选择了使用从地底到地表浮出的动效方式引出球场地板。

原因一是因为此时用户的角度完全是俯视地板，注意力也完全集中在地上，顺势利用此注意力范围，提供一个生动的反馈：噢，球场出来了！

原因二是因为第一版我只是做了个球场突然出现，在测试中有用户在看到球场，却不知道要抬头看，还在拼命地点击蓝色框，以为还有更多的东西出现。所以第二版我设计的是从下而上的一个动效，引导用户的注意力往上走：抬头看才能看见篮框和球架。

由于模型比较大，用户低着头是看不到篮框和架子的，所以这时候需要引导用户去抬头。

此时屏幕上的引导信息也变成了「抬头看」。我在这里选择的是屏幕型信息，而非环境型信息，但我更希望的是使用后者，因为也是用户注意力在出现的球场地板上，直接在地板上的镜头内显示「抬头看」更有效。但由于技术有限，在这只暂且使用屏幕型信息。如果再退一步说，等 ARKit 改进到不用低头也能快速检测到地板，一切会更加简单。

此时只要顺势抬头看，就能看到球场的生成动画。

首次引导系统设计叁

此时屏幕型信息变成了接下来的动作提示「上划投球」。由于投掷类游戏的操作很多都是上划，所以在测试中用户本能反应就是上划抛出去，这样我就不用花过多精力教育用户了。第一版的信息是在屏幕底部，在测试中几乎没有人看得到，原因是屏幕底部被手指挡住，再者用户的注意力是在球和球的上方空间（因为目标篮框高于视线，底部容易被忽略）。于是第二版改成了屏幕上方，测试反馈是用户能看到指引了。不过欠缺了考虑在室外时白色字体容易和天空融在一起导致信息被淹没。下一版时会改进成更具可读性的字体，并添加上划手势 icon 来增强直观性。

首次引导系统设计肆

当用户投出去后，用户的注意力一定会高度集中在球的飞行方向和落地后的方位，此时新接触的用户不知道是可以移动脚步去捡球的，站在原地拼命点屏幕上的球。这时候就需要最后一步的信息引导了。屏幕的文字变成了“请移脚步去捡球”。同样的，最佳效果并不是只使用屏幕文字，而是同时在地板上显示脚印连接镜头位置和篮球位置，隐喻可以走过去捡球。这也是 ARkit 的好玩之处，可以在空间里走动。

所以在新版本中就使用了脚步线引导用户走过去捡球。