頭條楓林網
文章摘要： Hover 與 Hold Still 的結合即可實現單手操作手機瀏覽 AR 內容並進行一系列互動操作品牌卡片進入品牌內容牆的互動方式
一、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 世界是我們為之努力的未來，這樣的未來，還有很長的路要走。
圖片素材作者：Julia