小記一次用 ARkit 設計和開發 Mobile AR 籃球小項目

簡評：ARkit 的出現讓大眾低成本地體驗現實增強技術帶來的新體驗，和之前寵物小精靈不一樣的是，ARkit 能夠實時識別和跟蹤三維空間中鏡頭的位置，能夠感受光線的位置和強度，並附加在虛擬模型上。讓虛擬更加「融入」你身邊的真實環境。

最近利用 ARkit 和 Unity 開發的一個小項目 AR 籃球 Solo Shooting App，而且很榮幸，經過篩選，這個小demo被 ARKitweekly官方Twitter 和 ProductHunt 推薦了！

現在給大家分享幾點小感悟。由於作者是設計師不是專業開發者，所以內容偏設計多一點。

先預覽一下項目視頻。

如果知乎視頻看不到就看外鏈接吧：ARkit Basketball Solo Shooting

ARkit 能夠實時識別和跟蹤三維空間中鏡頭的位置，能夠感受光線的位置和強度，並附加在虛擬模型上。在 Unity 插件中也提供了能接受陰影的透明地板材質讓模型看起來更加融入場景，以及附帶粒子系統用來作為檢測平面過程的視覺反饋。局限的地方在於 ARkit 本身是利用手持智能設備為載體，交互操作的輸入非常的有限，同樣輸出設備為手持設備的屏幕，屏幕的大小直接決定了觀察範圍的大小。還特別燒電，Xcode 的分析中接近一半電量都被 GPU 所佔去。

首次引導系統設計 壹

我身邊的人在利用 ARkit 設計時最頭疼就是首次引導系統的設計，因為要得到一個貼合環境的效果，ARkit 需要用戶首先主動去拍攝和尋找平面，然後等待系統尋找鏡頭內的平面。因為系統尚未成熟，不能瞬間辨別平面，所以就需要用戶完成額外一系列操作去輔助系統。

另外由於能顯示的範圍只有手持設備的屏幕那麼大，如果使用的模型很大，就得經歷「低頭找平面」到「抬頭看模型」的過程。在 AR 世界裡，360度全是可被利用的環境，而且運用第一人稱視角進行設計，就要讓用戶不迷失在「找模型」和「找信息」的困境里，就得最好用戶的注意力引導工作。

到底什麼樣的平面能夠被快速識別呢？開發者們給的建議是環境光源充足，紋理越複雜越好檢測。（演算法上有個名詞叫特徵點，紋理越複雜，特徵點越多。此外圖案越不規則，重複紋理越少，也越好定位。）相反，乾乾淨淨的素色平面，會大大地降低識別速度。

所以在設計首次引導系統時，新手用戶在 AR 鏡頭裡，默認是沒有任何指引，不知道要怎麼做。第一關難題就需要讓用戶快速找到平面作為籃球場的基面。那麼引導信息就要考慮用「屏幕型信息」還是「環境型信息」。屏幕型信息是指不隨環境改變，一直在屏幕某個地方顯示的信息；環境型信息是指以環境中的物體為載體顯示的信息。在 ARkit 中，想要得到環境型信息，首先你得讓系統「看到」環境，所以第一步打開 app 後，就得使用屏幕型信息來告知用戶現在需要找一個平面。我的首版設計非常的簡單，在屏幕頂有指引文字「當你看到藍色圓圈，點擊它。如果還看不見，靠近一點地面。」。

當檢測一段時間，就會出現了藍色圓圈。

我在藍色圓圈上加了Tap target的引導，這個使用的是環境型信息了，因為此時用戶注意力完全在突然出現的藍色圓圈上，此時需要用戶點擊藍色圓圈作為地板基面，所以直接在藍色圓圈上顯示引導信息是最有效的。

不過首次可用性測試中得到的反饋基本都是「為什麼我什麼都沒看見」和「那些光色的小點是什麼，藍色的圈又是什麼」。 原因是使用者不具備以上所說的識別技術知識，連第一步的需要「拍什麼」都沒有被成功引導到，更何談看到小光點和藍色圓圈和理解他們。

於是我在第二版中在打開 app 後添加了一個引導頁，通過圖文告訴用戶應該把鏡頭對著哪裡，看到的小光點和藍色圓圈又是什麼。

第二次可用性測試中得到的反饋是用戶在看到引導後，稍微粗略掃了一眼就關掉，他們得知的是需要像圖中的角度那樣拍攝一個帶明顯紋理的平面，也知道看到藍色圓圈就點擊。但同樣的問題是檢測成功率很低，因為像圖示中的角度根本無法快速讓系統檢測到平面，很多用戶會360度轉身周圍拍，尋找圖示中的小光點。

於是我在研究了一下如何最快最有把握地檢測到平面後，發現了只要出現了幾個小光點後，讓相機更加靠近平面表面，小光點數量會瞬間暴漲並且出現藍色框框。於是在第三版中，與其告知用戶小光點是什麼，藍色框框又是什麼，倒不如直切用戶最終目標：用最快最有把握的方法找到基面。我把圖示改成了如下。

效果大大改善。在第三次測試中，用戶看到簡練的的文字信息引導，就跟著圖示的角度去拍攝（這個就是測出來的最快最有把握的角度），這時候很快就能出現檢測成功的藍色圓圈。點擊就會看到球場的地板。這次雖然用戶不知道他們看到的小光點和藍框是什麼，但目標快速地達到了。這也是我自己首次作為獨立開發者陷入的典型困境，因為花了很長很長的時間去弄清楚原理，代碼等技術因素，就想把我理解的技術原理塞給用戶，卻忽略了用戶的最根本目標。

點擊檢測成功的藍色圓圈，這時候就會以這個為基面出現球場了。於是引出了接下來要說的第二個設計了。

首次引導系統設計 貳

這也是在用 ARkit 設計時的一個經典問題：由於整個周邊環境都是 AR 顯示範圍，但用戶在特定場景特定任務的特定環節的注意力卻只在一個很小的範圍。在這個時候，我選擇了使用從地底到地表浮出的動效方式引出球場地板。

原因一是因為此時用戶的角度完全是俯視地板，注意力也完全集中在地上，順勢利用此注意力範圍，提供一個生動的反饋：噢，球場出來了！

原因二是因為第一版我只是做了個球場突然出現，在測試中有用戶在看到球場，卻不知道要抬頭看，還在拚命地點擊藍色框，以為還有更多的東西出現。所以第二版我設計的是從下而上的一個動效，引導用戶的注意力往上走：抬頭看才能看見籃框和球架。

由於模型比較大，用戶低著頭是看不到籃框和架子的，所以這時候需要引導用戶去抬頭。

此時屏幕上的引導信息也變成了「抬頭看」。我在這裡選擇的是屏幕型信息，而非環境型信息，但我更希望的是使用後者，因為也是用戶注意力在出現的球場地板上，直接在地板上的鏡頭內顯示「抬頭看」更有效。但由於技術有限，在這隻暫且使用屏幕型信息。如果再退一步說，等 ARkit 改進到不用低頭也能快速檢測到地板，一切會更加簡單。

此時只要順勢抬頭看，就能看到球場的生成動畫。

首次引導系統設計 叄

此時屏幕型信息變成了接下來的動作提示「上劃投球」。由於投擲類遊戲的操作很多都是上劃，所以在測試中用戶本能反應就是上劃拋出去，這樣我就不用花過多精力教育用戶了。第一版的信息是在屏幕底部，在測試中幾乎沒有人看得到，原因是屏幕底部被手指擋住，再者用戶的注意力是在球和球的上方空間（因為目標籃框高於視線，底部容易被忽略）。於是第二版改成了屏幕上方，測試反饋是用戶能看到指引了。不過欠缺了考慮在室外時白色字體容易和天空融在一起導致信息被淹沒。下一版時會改進成更具可讀性的字體，並添加上劃手勢 icon 來增強直觀性。

首次引導系統設計 肆

當用戶投出去後，用戶的注意力一定會高度集中在球的飛行方向和落地後的方位，此時新接觸的用戶不知道是可以移動腳步去撿球的，站在原地拚命點屏幕上的球。這時候就需要最後一步的信息引導了。屏幕的文字變成了「請移腳步去撿球」。同樣的，最佳效果並不是只使用屏幕文字，而是同時在地板上顯示腳印連接鏡頭位置和籃球位置，隱喻可以走過去撿球。這也是 ARkit 的好玩之處，可以在空間里走動。

所以在新版本中就使用了腳步線引導用戶走過去撿球。

撿到球之後就是回到投球動作了，反覆循環。用戶只需帶一次即可上手。

還有最後一點想講的就是，利用Akit鏡頭感知自我位置的特色，可以打造出像NBA那樣的命中熱點圖。

紅點表示在該位置未命中，藍點表示命中。這就是為什麼我更願意去鼓勵用戶去走來走去體驗空間中互動的樂趣。

總體來說，ARkit 雖然很強大，但還比較局限。如果只是一個展示型的 AR 項目，那麼只要引導完成低頭找平面，找到就直接看模型就好了。如果是工具性 AR 項目，那麼找到平面之後的一系列交互操作和內容展示非常值得去思考。

延伸閱讀，這個是 Apple 定義的一份 ARkit Human Interface Guidelines。

原文地址：https://medium.com/inborn-experience/4-lessons-that-ive-learned-in-building-ar-basketball-project-94be1a066691

App store 搜AR solo basketball

推薦閱讀：