超全面總結！移動端的AR交互設計探索

一、CONCEPT

近幾年，AR/VR 的概念非常火熱，許許多多的科技公司投入到這股浪潮之中。

2017年上半年我參與了「小白墻」產(chǎn)品項目，這是一款通過 Mobile Phone 攝像頭識別品牌 logo，以 AR模型承載內(nèi)容，為用戶展現(xiàn)該品牌展示的商品內(nèi)容。

我們希望展示品牌的內(nèi)容分為很多層級：品牌卡片、品牌內(nèi)容展示頁、單品的買家秀等等。

根據(jù)這一流程中在每個步驟所需要展現(xiàn)的內(nèi)容以及各步驟之間的關系，我們開始定義 AR 內(nèi)容的承載方式。相較于直接只用貼圖，我們選擇了簡潔的有厚度的矩形模型來承載文本與圖片內(nèi)容，并命名它為「瓷磚」，我們可以通過瓷磚的組合形成一面充滿內(nèi)容的「墻」。這種形式映射了一個由規(guī)則卡片布局而成的頁面，能夠在真實空間內(nèi)便于閱讀并能夠保持整體性和統(tǒng)一性。

二、BASE

在相機鏡頭的世界中，平鋪的面較為生硬，曲面內(nèi)容更為生動真實，但以鏡頭為圓心的曲面又過于彎曲，因此我們定義了一個折中的且利于計算的曲面半徑，鏡頭位于該半徑的1/2。

手機相機的前置鏡頭較多使用35mm鏡頭，因此鏡頭張角約為60°，主流屏幕尺寸為16:9，我們通過簡單幾何運算計算出 Xfov 為36°

為了展現(xiàn)較為舒適的瓷磚墻區(qū)域，我們希望能夠在屏幕中橫向承載3塊左右的瓷磚，因此將36°等分為3個12°的位置，以12°的區(qū)域來展現(xiàn)墻上的一塊瓷磚。

我們設計了1:1的方塊瓷磚作為基準瓷磚，并可以根據(jù)內(nèi)容需要組合為1x2、2x2、2x3、3x3的大型瓷磚，為了避免瓷磚的最大尺寸超過屏幕承載范圍，盡量使用戶在閱讀單個瓷磚內(nèi)容時避免做出移動手機來查看完整內(nèi)容的額外行為，我們將其限制在3，并且墻最大構成為5x12。

并且對于瓷磚定義了功能瓷磚和內(nèi)容瓷磚，功能瓷磚相當于一個功能 button，而內(nèi)容瓷磚承載各種類型的信息。

三、INTERACTION

我們定義了返回和關閉兩個按鈕作為 AR 內(nèi)容的最高層級控制按鈕，并置于屏幕底部便于操作。概念接近于網(wǎng)頁瀏覽器的頁面基本操作。

交互動作：Left Draw、Tap、Hover、Hold Still

Left Draw - 左劃：

品牌卡片進入品牌內(nèi)容墻的交互方式，較為特殊，為了體現(xiàn)翻轉(zhuǎn)卡片得到豐富內(nèi)容時的視覺感受。

Tap - 點擊：

基本交互方式，手指點擊操作。

Hover - 懸停：

AR 使用場景中，用戶需要較多地舉起手機查看正前方或者正斜上方的內(nèi)容，保持這一動作已經(jīng)造成了一定的疲勞成本，并且當需要交互位于單手大拇指可操作范圍之外的內(nèi)容時，需要舉起另一只手進行點擊操作，會加重用戶的使用負擔。

AR 場景中的內(nèi)容位置是固定的，用戶可以通過移動手機來查看鏡頭中的內(nèi)容，那么我們將這一交互環(huán)境映射為在電腦屏幕中瀏覽網(wǎng)頁的交互操作，將手機屏幕中心定義為鼠標光標所在位置，用戶移動手機即移動鼠標光標來查看現(xiàn)實中的 AR 內(nèi)容，被「光標」觸碰的內(nèi)容將會給予一定的反饋。

這一方式除了將手機屏幕作為瀏覽內(nèi)容的窗口，同時附帶了選擇工具，為后續(xù)的「Hold Still」提供了基礎。

Hold Still：

上面提出了 Hover 的交互方式，繼而我們將被屏幕中心（光標）所對的目標增加了 Hold Still，即 Hover 目標停留0.5s就可以達到「點擊」效果。

Hover 與 Hold Still 的結合即可實現(xiàn)單手操作手機瀏覽 AR 內(nèi)容并進行一系列交互操作。

四、MOTION

通過 AR 內(nèi)容整體的交互流程，我們?yōu)槠涓黝惽袚Q添加一系列的動效，來將整個「瀏覽器」頁面銜接的更加順暢。

Card Emerge：

AR 內(nèi)容出現(xiàn)是通過攝像頭掃描品牌logo 實現(xiàn)的，掃描成功后，首先出現(xiàn)的是品牌卡片。

Card to Wall：

之前提到從品牌卡片進入品牌內(nèi)容墻的交互方式是通過左劃翻轉(zhuǎn)卡片，我們將這一過程使用翻轉(zhuǎn)的動效來銜接這一過程，在翻轉(zhuǎn)卡片后，增加墻出現(xiàn)的視覺沖擊。

Wall to Wall：

內(nèi)容墻是由瓷磚組成，可以通過點擊可跳轉(zhuǎn)的瓷磚進入新的內(nèi)容墻，我們將其定義為二級頁面、三級頁面。

起初，Wall to Wall 的切換動效同樣是通過旋轉(zhuǎn)整面墻來表達，但是無論是交互行為的發(fā)生（點擊/Hold Still）還是大型墻旋轉(zhuǎn)效果，都不夠合理與舒適。因此 Wall to Wall 的切換動效設計為下方效果圖的效果來表達下一級頁面的進入。

Flip：

在一個內(nèi)容墻（頁面）中，內(nèi)容過多的情況下，我們將其定義為可翻頁，這些內(nèi)容層級都處于同級，所以翻頁的動效設計為左右的滑動切換。

Open：

內(nèi)容墻中的內(nèi)容瓷磚可以被打開，顯示更多信息。

Close：

這里的關閉概念是整個 AR 內(nèi)容的關閉，相當于將整個網(wǎng)頁關閉。與 Card Emerge 相對，以相反的方式關閉消失。

△ 產(chǎn)品于2017年8月上線，由于應用場景等等各種原因，現(xiàn)在已經(jīng)下架了

這次在 AR 領域的產(chǎn)品嘗試和瀏覽器概念的交互方式創(chuàng)新，讓我看到了 AR 的許多可能性。

去年年底看到一款名為 TweetReality 的產(chǎn)品，可以瀏覽 Twitter 的信息流，形態(tài)概念與小白墻較為接近，但交互方式僅依賴點擊實現(xiàn)。

目前在全球范圍內(nèi)的AR技術創(chuàng)新百花齊放，比如：

Vyking - 人體掃描技術

洛天依 - 全息投影虛擬人物演唱會

Zappar - 基于 Mobile Phone，用純 marker 的標志做成手柄，用手柄來與3D內(nèi)容交互。

Hololens - 手勢交互，但不能判斷手與物體的景深。

Meta - 通過手和物體的距離和景深做虛擬物體的自然抓取。

Vuzix - 眼鏡框的前后滑動交互形式

小結

AR 的本意是增強現(xiàn)實，使人們在現(xiàn)實世界中，獲取一些額外的信息來使現(xiàn)實世界更加豐富。

手機移動端的相機通過屏幕能展現(xiàn)的內(nèi)容是局限的。手機 Native 本身已經(jīng)是內(nèi)容的展現(xiàn)載體，使用戶能夠通過這一載體高效地閱讀內(nèi)容，如果想要將文本、圖片、視頻等內(nèi)容通過手機相機屏幕中的模型等載體來展現(xiàn)反而增加了閱讀難度。Apple 的 ARKit 和 Google 的 ARCore 為移動端設備實現(xiàn) AR 提供了技術支持，移動端結合 AR 技術的產(chǎn)品發(fā)展方向，個人覺得更偏向于展現(xiàn)視覺表達的3D模型。

我所理解的增強現(xiàn)實，是能夠?qū)⒃鰪姮F(xiàn)實內(nèi)容以最舒適形式展現(xiàn)給人們，讓人們能夠直接置身于 AR 世界中看到這些額外的信息內(nèi)容，不管是 AR眼鏡還是全息投影設備等等。許多電影中所呈現(xiàn)的 AR 世界是我們?yōu)橹Φ奈磥恚@樣的未來，還有很長的路要走。

圖片素材作者：Julia

「關于AR設計，這些文章不容錯過」

• 《超詳細！可能是最全面的AR設計科普文》
• 《設計AR類產(chǎn)品，你至少要考慮清楚下面的6個問題》
• 《通過這5個AR APP，幫你一窺現(xiàn)實增強技術的應用》