一、CONCEPT
近幾年，AR/VR 的概念非常火熱，許許多多的科技公司投入到這股浪潮之中。
2017年上半年我參與了「小白牆」產品項目，這是一款通過 Mobile Phone 攝像頭識別品牌 logo，以 AR模型承載內容，為用戶展現該品牌展示的商品內容。
我們希望展示品牌的內容分為很多層級：品牌卡片、品牌內容展示頁、單品的買家秀等等。
根據這一流程中在每個步驟所需要展現的內容以及各步驟之間的關係，我們開始定義 AR 內容的承載方式。相較於直接只用貼圖，我們選擇了簡潔的有厚度的矩形模型來承載文本與圖片內容，並命名它為「瓷磚」，我們可以通過瓷磚的組合形成一面充滿內容的「牆」。這種形式映射了一個由規則卡片佈局而成的頁面，能夠在真實空間內便於閱讀並能夠保持整體性和統一性。
二、BASE
在相機鏡頭的世界中，平鋪的面較為生硬，曲面內容更為生動真實，但以鏡頭為圓心的曲面又過於彎曲，因此我們定義了一個折中的且利於計算的曲面半徑，鏡頭位於該半徑的1/2。
手機相機的前置鏡頭較多使用35mm鏡頭，因此鏡頭張角約為60°，主流屏幕尺寸為16:9，我們通過簡單幾何運算計算出 Xfov 為36°
為了展現較為舒適的瓷磚牆區域，我們希望能夠在屏幕中橫向承載3塊左右的瓷磚，因此將36°等分為3個12°的位置，以12°的區域來展現牆上的一塊瓷磚。
我們設計了1:1的方塊瓷磚作為基準瓷磚，並可以根據內容需要組合為1×2、2×2、2×3、3×3的大型瓷磚，為了避免瓷磚的最大尺寸超過屏幕承載範圍，儘量使用戶在閱讀單個瓷磚內容時避免做出移動手機來查看完整內容的額外行為，我們將其限制在3，並且牆最大構成為5×12。
並且對於瓷磚定義了功能瓷磚和內容瓷磚，功能瓷磚相當於一個功能 button，而內容瓷磚承載各種類型的信息。
三、INTERACTION
我們定義了返回和關閉兩個按鈕作為 AR 內容的最高層級控制按鈕，並置於屏幕底部便於操作。概念接近於網頁瀏覽器的頁面基本操作。
交互動作：Left Draw、Tap、Hover、Hold Still
Left Draw – 左劃：
品牌卡片進入品牌內容牆的交互方式，較為特殊，為了體現翻轉卡片得到豐富內容時的視覺感受。
Tap – 點擊：
基本交互方式，手指點擊操作。
Hover – 懸停：
AR 使用場景中，用戶需要較多地舉起手機查看正前方或者正斜上方的內容，保持這一動作已經造成了一定的疲勞成本，並且當需要交互位於單手大拇指可操作範圍之外的內容時，需要舉起另一隻手進行點擊操作，會加重用戶的使用負擔。
AR 場景中的內容位置是固定的，用戶可以通過移動手機來查看鏡頭中的內容，那麼我們將這一交互環境映射為在電腦屏幕中瀏覽網頁的交互操作，將手機屏幕中心定義為鼠標光標所在位置，用戶移動手機即移動鼠標光標來查看現實中的 AR 內容，被「光標」觸碰的內容將會給予一定的反饋。
這一方式除了將手機屏幕作為瀏覽內容的窗口，同時附帶了選擇工具，為後續的「Hold Still」提供了基礎。
Hold Still：
上面提出了 Hover 的交互方式，繼而我們將被屏幕中心（光標）所對的目標增加了 Hold Still，即 Hover 目標停留0.5s就可以達到「點擊」效果。
Hover 與 Hold Still 的結合即可實現單手操作手機瀏覽 AR 內容並進行一系列交互操作。
四、MOTION
通過 AR 內容整體的交互流程，我們為其各類切換添加一系列的動效，來將整個「瀏覽器」頁面銜接的更加順暢。
Card Emerge：
AR 內容出現是通過攝像頭掃描品牌logo 實現的，掃描成功後，首先出現的是品牌卡片。
Card to Wall：
之前提到從品牌卡片進入品牌內容牆的交互方式是通過左劃翻轉卡片，我們將這一過程使用翻轉的動效來銜接這一過程，在翻轉卡片後，增加牆出現的視覺衝擊。
Wall to Wall：
內容牆是由瓷磚組成，可以通過點擊可跳轉的瓷磚進入新的內容牆，我們將其定義為二級頁面、三級頁面。
起初，Wall to Wall 的切換動效同樣是通過旋轉整面牆來表達，但是無論是交互行為的發生（點擊/Hold Still）還是大型牆旋轉效果，都不夠合理與舒適。因此 Wall to Wall 的切換動效設計為下方效果圖的效果來表達下一級頁面的進入。
Flip：
在一個內容牆（頁面）中，內容過多的情況下，我們將其定義為可翻頁，這些內容層級都處於同級，所以翻頁的動效設計為左右的滑動切換。
Open：
內容牆中的內容瓷磚可以被打開，顯示更多信息。
Close：
這裡的關閉概念是整個 AR 內容的關閉，相當於將整個網頁關閉。與 Card Emerge 相對，以相反的方式關閉消失。
△ 產品於2017年8月上線，由於應用場景等等各種原因，現在已經下架了
這次在 AR 領域的產品嚐試和瀏覽器概念的交互方式創新，讓我看到了 AR 的許多可能性。
去年年底看到一款名為 TweetReality 的產品，可以瀏覽 Twitter 的信息流，形態概念與小白牆較為接近，但交互方式僅依賴點擊實現。
目前在全球範圍內的AR技術創新百花齊放，比如：
Vyking – 人體掃描技術
洛天依 – 全息投影虛擬人物演唱會
Zappar – 基於 Mobile Phone，用純 marker 的標誌做成手柄，用手柄來與3D內容交互。
Hololens – 手勢交互，但不能判斷手與物體的景深。
Meta – 通過手和物體的距離和景深做虛擬物體的自然抓取。
Vuzix – 眼鏡框的前後滑動交互形式
小結
AR 的本意是增強現實，使人們在現實世界中，獲取一些額外的信息來使現實世界更加豐富。
手機移動端的相機通過屏幕能展現的內容是侷限的。手機 Native 本身已經是內容的展現載體，使用戶能夠通過這一載體高效地閱讀內容，如果想要將文本、圖片、視頻等內容通過手機相機屏幕中的模型等載體來展現反而增加了閱讀難度。Apple 的 ARKit 和 Google 的 ARCore 為移動端設備實現 AR 提供了技術支持，移動端結合 AR 技術的產品發展方向，個人覺得更偏向於展現視覺表達的3D模型。
我所理解的增強現實，是能夠將增強現實內容以最舒適形式展現給人們，讓人們能夠直接置身於 AR 世界中看到這些額外的信息內容，不管是 AR眼鏡還是全息投影設備等等。許多電影中所呈現的 AR 世界是我們為之努力的未來，這樣的未來，還有很長的路要走。
閱讀更多 河北華信智原 的文章
