工作期間，我負責過多款AR項目的設計。AR產品和其他產品的最大區別，就是引入了“空間”這個概念，這一點對于用慣二維APP的用戶而言可能是略顯陌生的。那我們要如何通過設計，為用戶構建空間的概念呢？

我認為可以從以下四個方面入手：

1. 表現設計元素的空間特性；
2. 賦予虛擬物品空間特性；
3. 引導用戶在空間內的行為；
4. 保持界面簡潔，專注于空間內的操作。

一、表現設計元素的空間特性

1. 區分基礎設計元素和空間設計元素

AR APP的交互內容分為兩部分，基礎界面交互和空間元素交互。

為了使用戶能更好地理解并掌握如何使用產品，我們需要在設計空間元素交互時，表現出Z軸的概念，讓設計元素根據空間的特征進行變換。

例如下圖這個定位點，會始終和它鎖定的平面保持平行貼合的關系。移動手機時，它的大小、角度變化，都在暗示用戶這個定位點在空間內是于電腦這個平面相貼合的。

就像上圖所示，雖然空間交互元素可能還是最平凡的點線面組合，但也可以通過精心設計的交互效果來表現出空間上的特征。

2. 加入3D的表現形式

以蘋果的測量工具為例，下圖截取自初始的SLAM掃描提示動畫。細看的話可以發現這個動畫做得非常細膩，通過以下幾點來表現產品的空間特性。：

• 手機角度的變化
• 屏幕反光區域的變化
• 平面的透視

AR設計并不是要把所有內容3D化，但對于引導類的信息而言，相對立體的設計能幫助用戶更好地理解。

二、賦予虛擬物品空間特性

1. 基礎物理特征

如果AR APP要達到的目的是效果真實（例如IKEA Place），那么賦予虛擬物品一些基礎物理特性就非常重要。

舉一個最簡單的例子：陰影。

再舉個例子：環境光線反射。

不同的空間環境，也會對AR 虛擬物體的物理特性有許多影響。例如在昏暗的光線環境下，放一把日常光線渲染出的椅子就會很突兀。

除了這兩點外，還有材質、貼合程度等多種影響AR真實性的物理特征。找到這些物理特征后，我們應該向算法大哥提出各種優化需求，從不同的層面為虛擬物體增加真實性，提升用戶的整體感受。

2. 動態關系

以快手發布的新年特效為例，就通過向遠方空間發射的設計元素，為虛擬空間增加了代入感。

除了虛擬物體自身和空間內的關系外，還要考慮虛擬物體與空間內其他真實物體互動時是什么關系，是遮擋、疊加、容納，還是動態的躲避、穿越。

3. 定義物體在空間內的大小與位置

我在一款AR 家具類APP內隨便打開了一件商品，就遇到了下圖這樣的情況。物體又大又近，完全超出了我的可視范圍，還非常有壓迫感。如果是仿真的虛擬物體，那就最好能賦予它真實尺寸。如果尺寸大到在當前環境內不適合展示，可以予以說明。

除了尺寸外，還應注意物體顯示的位置。Google在設計指南中也指出，要為虛擬物體設置一個最近和最遠的移動區間：

三、引導用戶在空間內的行為

首先，能在設計中做到前兩點的話，就已經能夠在一定程度上，通過設計語言，幫助用戶理解這個產品的空間性。

但是根據日常使用APP形成的心智模型，用戶很可能并沒有意識到，自己在使用AR APP時可能需要在空間內移動。例如在尋找平面時，用戶可能需要四處旋轉以確定平面位置；在測量大型物體時，用戶需要舉著手機移動，直到把大型物體的兩個頂點全部掃入。因此，需要通過設計提示信息，引導用戶在空間內的行為。

以我設計過一款3D掃描APP為例，受限于我們握著手機的視角，用戶在空間內更多只有左右的概念，并不容易想到上面和下面。在掃描過程中，用戶容易在操作中忽略了頭頂面和地面的存在。為了解決這個問題，當用戶進行相關操作時，我使用了多個層級的提示，對用戶行為進行引導。

四、界面簡潔，專注于空間內的操作

借用About Face中的這句“不論你的界面多酷，越少越好?！?/p>

在進行AR產品設計時，更應該讓界面內的元素盡量簡潔。因為AR是一種融合式的設計場景，將現實空間和虛擬物體相融合。而現實空間內可能有許多干擾物，本身就比較雜亂。這種情況下再放上密密麻麻的操作按鈕和入口，容易讓本來就不熟悉AR交互的用戶，更加不知所措。

在宜家、蘋果和谷歌推出的這些先導性的AR產品中，簡潔的AR界面與突出的核心操作是共通特征。其中，宜家的IKEA PLACE產品邏輯相對復雜一些，但也在AR交互的模塊中，保持了最大的克制，讓用戶專注于當前和現實空間交互的操作。

截圖分別來自Google AR Doodle、IKEA Place和iPhone自帶的測量工具

此外，蘋果的測量工具有識別正方形的功能。但是這個功能并沒有展示在頁面中，而是在用戶對準特定形狀后，才會自動顯示。在次要功能的可發現性和AR界面的簡潔性中，大多數公司選擇了后者。用戶本身就對這些新工具的操作不夠了解，支線功能太多容易使人困惑。此外，在界面上開放太多的功能入口，可能會打斷用戶在AR環境中的沉浸式體驗。

參考：

蘋果AR設計指南：

https://developer.apple.com/design/human-interface-guidelines/ios/system-capabilities/augmented-reality/

谷歌AR設計指南：

https://designguidelines.withgoogle.com/ar-design/environment/definition.html#definition-physical-environments

作者：迷思特圓；作者公眾號：迷思特圓（ID:mryuan55）

本文由 @迷思特圓 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash ，基于 CC0 協議