近幾年，AR/VR的概念非?；馃幔S許多多的科技公司投入到這股浪潮之中。

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

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

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

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

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

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

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

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

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

交互動(dòng)作：Left Draw、Tap、Hover、Hold Still

Left Draw - 左劃：

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

Tap - 點(diǎn)擊：

基本交互方式，手指點(diǎn)擊操作。

Hover - 懸停：

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

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

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

Hold Still：

上面提出了Hover的交互方式，繼而我們將被屏幕中心（“光標(biāo)”）所對(duì)的目標(biāo)增加了Hold Still，即Hover目標(biāo)停留0.5s就可以達(dá)到“點(diǎn)擊”效果。

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

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

Card Emerge：

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

Card to Wall：

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

Wall to Wall：

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

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

Flip：

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

 

Open：

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

Close：

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

--------------

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

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

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

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

Vyking - 人體掃描技術(shù)

洛天依 - 全息投影虛擬人物演唱會(huì)

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

Hololens - 手勢(shì)交互，但不能判斷手與物體的景深

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

Vuzix - 眼鏡框的前后滑動(dòng)交互形式

小結(jié)：

AR的本意是增強(qiáng)現(xiàn)實(shí)，使人們?cè)诂F(xiàn)實(shí)世界中，獲取一些額外的信息來使現(xiàn)實(shí)世界更加豐富。

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

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

— 感謝技術(shù)支持：

陳力維, 劉妍, 韓清揚(yáng)