騰訊高手出品！AR 遊戲設計實戰案例覆盤總結

從2013年開始加入騰訊這個大家庭，加入這個大家庭後一直負責QQ相關的設計工作。從2015年開始參與研發短視訊APP的設計工作，即是將QQ的社交內容娛樂化，同一些新的技術做結合。

關於AR

AR這個詞對大眾而言並不是一個陌生的詞，但是AR的實現原理是怎樣的？

AR的中文名字是擴增實境技術，它是一種實時地計算攝影機影像的位置及角度，並且加上相應的影象、視訊、3D模型的技術。

簡單來講就是在現實世界上疊加一些虛擬資訊，然後再實時計算它在裝置上的位置以及角度的變化。

AR的目標是將螢幕上的虛擬內容放在現實的世界中與之互動，幫助大眾更快捷更直觀的去獲取資訊，並且AR自帶強大的商業價值。身邊的小夥伴經常會把AR跟VR搞混，其實AR是擴增實境技術，而VR是虛擬現實技術。


AR是將虛擬的物體放在我們周邊的現實環境，擴增實境世界的感官體驗；VR則是將我們放在虛擬的環境中，打造一個以假亂真的沉浸式體驗。

它們在裝置上進行劃分，AR對大眾使用者來說參與的門檻低，操作的門檻更低，因為AR只需要擁有一部帶攝像頭的智慧手機，便可以成為一個載體，在擴增實境世界的同時，重塑使用者的互動體驗，而VR的裝置對於大眾使用者來講日常比較難接觸到，需要較為專業的裝置和場地。

AR技術的核心是識別與跟蹤，它的實現方式分為兩種：

• 影象檢測法；
• 全球衛星定位系統法。
  

影象檢測法

影象檢測法其實是AR最常見的一種定位方式，經常用在圖片識別和人臉的識別。它的技術實現流程主要分為三步：

Step 1：需要捕捉特徵影象，演算法會對影象進行規劃處理，計算有效特徵點進行匹配，可以看下圖一，這些綠色的小點點就是有效特徵點；


Step 2：從偏離的矩形算出一個三維座標系，建立一個空間；

Step 3：實時跟蹤資料內容的位置和角度的變化；

剛才講到綠色的小點點設計師應該怎麼去檢測呢？這裡推薦一個網站給大家——Vuforia，註冊賬號後上傳設計圖就可以直接將圖稿的特徵點標記出來，並且對其進行打分，特徵點越多，識別的準確率越高。（連結在文末)


觀察第一張圖的上下兩幅作品，可以發現它僅僅只是背景和深淺不同，形成的有效特徵點也有所不同，因為演算法在灰度對比度高的情況下會形成更多的有效特徵點。

我們再觀察第二張圖，可以發現第二張圖在太陽的圓形部分沒有形成任何有效特徵點，因為演算法會排除掉一些比較平滑的曲線或元素，視為無效特徵點，這種點一般出現在夾角處，所以為了使特徵點分數更高，我們在設計的時候需要：

• 避免畫一些比較平滑或帶弧度的元素；
• 特徵點需要平均分佈在每一個角落。
  

最後看第三張圖，幾何雲的部分重複出現在不同的位置上，它形成的有效特徵點的數量和位置也一樣。因為重複出現的規則圖形會被演算法判定為無效特徵點並排除掉，所以在做設計的時候需要：

• 避免用一些規則的圖形和一些重複出現的元素。
  

影象檢測的優點是簡單、高效和多樣性，缺點是容易受環境、光線、距離、遮擋、聚焦這些因素產生變化，會使虛擬內容產生抖動、卡頓、誤判、識別慢、無法識別的情況出現。


環境光線距離就不需要多講了，遮擋就是取決於取景的角度和範圍。聚焦指的是裝置，也就是我們的攝像機，我們的手機對於深色還有漸變顏色進行對焦時會較慢顯現。

所以在做視覺稿的時候，其實需要滿足很多條件，並且要與開發進行多環境測試、一起研討，才能得出一張比較合格的識別圖，優秀的識別圖必須確保它的穩定性，還有它的識別速度。

我們來看看實際專案中是如何應用的。

在2016年的時候，團隊策劃了《QQ奧運火炬手》AR活動，基本上是在一個毫無經驗的情況之下，不斷地試錯，不斷地修正，在兩個月內從風格到終稿花了將近3000稿，才完成六個奧運城市28張識別圖的設計，可以看到DEMO呈現出來的效果相對比較穩定，而且識別速度非常快的，基本在一秒之內完成。


這裡強調優秀這個詞，因為我們不希望使用者第一次接觸AR時就造成一些挫敗感，導致對新技術的體驗產生抗拒心理，所以對識別率的速度還有穩定性做了相當多的除錯，當時也獲得了世界吉尼斯紀錄的證書。


這是以前的一個小DEMO，通過手機的掃一掃識別一層一層傳遞的過程。剛才說到圖片檢測法的影象場景，現在再看一下紋理識別的場景，人臉識別其實就是影象檢測法的邊緣檢測，它可以檢測出人臉的部位，同時跟蹤這些部位進行運動，把虛擬的內容跟肢體做無縫的貼合。


比如說經常用到的特效掛件，大家看到市面上的一些美顏APP都有些什麼樣的能力呢？

• 實時美顏
• 臉部貼合
• 動作觸發
• 臉部變形
• 換臉、扣臉
• 氛圍濾鏡
• 3D模型
  

其它便不一一闡述了，相信大家也有所瞭解。


針對QQ的一些社交場景，我們團隊也做了QQ特有的一些特效掛件，例如可以在QQ的聊天介面中的拍攝功能，還有聊天，都可以在視訊聊天看到，玩到。還有利用AI還有AR的結合，在兩人通話中做了一個小遊戲，通過做表情贏取對方的紅包。



全球衛星定位系統法

全球衛星定位系統法是是利用GPS去定位我們所處的位置，在真實的空間裡尋找一個平面，可以現實世界中跟虛擬物體進行互動和觀賞。

優點是適合於室外的跟蹤，可以克服在室外場景中光照，還有聚焦等不確定因素，而缺點是很考驗裝置的效能，包括當前網路的環境。


可以看到這上面有兩個比較陌生的詞，一個是LBS(Location Based Service)，一個是POI(Point of Interest)。LBS其實是基於移動位置服務，配置服務GPS獲取位置的一個方式。有些AR的遊戲是基於LBS去實現的，它們所用到的實現方式也就是全球衛星定位系統法。而POI就是一個興趣點，它在地圖上可代表是一棟大廈，一個商鋪或者一處景點等等，它包含四方面的資訊，就是名稱、類別、座標和分類。

這個是16年日本做的一個AR遊戲，相信大家都有玩過。


這個遊戲是利用全球衛星定位系統法去實現的一個遊戲，為什麼給大家看剛才的短片，是因為騰訊2017年新年QQ的一個運營活動跟它的玩法特別像，都是基於一個地圖上去尋找一個紅包或者一個寶藏，然後找到這個位置，再通過完成一些任務去獲得這些紅包或者禮品。


做這個運營活動的時候，需要去考慮如何體現AR的空間概念，譬如說要合理利用一個真實的空間，因為設計師出的設計稿再也不是750×1334的尺寸了，它是一個真實的空間，需要把這空間進行擴充，去引導使用者移動手機鏡頭，跟蹤這些虛擬物體進行移動和互動。

我們可以通過物體的走向去體現一個空間感，譬如說從遠到近，從左到右，從上到下等方式讓使用者移動起來。


在地圖的引導上，可以從遠近這個層次去打造一個三維空間，譬如說離我們比較近的AR點的時候，需要強化我們的資訊，做一些差異化的動畫引導，再遠一點的地方就只需要給一個簡單的貼圖或者簡單的元素告知使用者，遠處也有一個紅包，或者禮品。



IP的力量是非常強大的，當時使用了QQfamily的baby Q作為財神形象給使用者發紅包，它的作用是可以跟使用者產生一個平等的對話，陪伴使用者一起完成一些任務，建立一個平等親密的關係。


在2016年的時候，通過《QQ奧運火炬手》活動，一推出QQ就被稱為是國內首個AR使用者超過1億的社交應用，整個活動吸引了全球一百四十三個國家的使用者，跟AR的互動超過將近兩億次。

在2017年的時候《QQ天降紅包》運營活動使用者量超過3億，半年間就收穫業界還有一些使用者的良好口碑，QQ是一個很年輕的產品，它的使用者大部分都是學生。通過這樣的活動跟新的技術做結合，我們成功將QQ的品牌升級為年輕化，娛樂化，還有科技化。

過去的設計手法就是從圖形，動畫還有色彩上做一些創新。現在我們加入一些新的技術，比如說AI、AR、音效和物理震動之後，可以升級使用者的一些感官體驗，使設計更加沉浸式，更加娛樂化。

把AI跟AR做一個很好的結合，是因為更好的AI需要更好的AR去體現。

那麼大家都說AI就是AI，AR就是AR，其實這個說法是錯的，因為它們的關係非常密切。如果我來作比喻的話，

「AI就是人的大腦，AR就是人的一些感官體驗」

跟這些新的技術做結合，會使得設計和活動會有四個優點，那就是話題性，串聯性，沉浸式和娛樂化。

通過一些新的技術給使用者帶來的新鮮感和話題性，再把一些時間音效還有振動影像這些元素有效地串聯在一起，讓使用者身臨其境，更加專注在操作當中，更加強化整個設計，整個產品的趣味性，也提高整個產品的娛樂價值。

去年世界盃的時候，我們推出了《QQAR穿越賽場》。


相對奧運而言，世界盃並不是全民都會關注的一個賽事，所以當時用了很大部分的時間來做用研，想方設法去提升使用者的參與感。我們對使用者的行為和心理進行分析，希望能通過新的互動形式和新的技術讓使用者更好的參與進來。

在做運營設計的時候，需要從三個部份去策劃：

• 如何去吸引使用者；
• 在使用者體驗的過程中如何製造一些驚喜；
• 希望使用者在最後有一個想要抒發自己的慾望的出口，將活動分享出去。
  

那如何去吸引使用者參與活動呢？可以利一些視覺線索，突出一些重點資訊，通過差異化的設計去滿足使用者的好奇心。譬如說，利用一個足球的運動軌跡引起使用者的注意力，讓使用者產生好奇心，去點選入口，到第二個頁面的時候，需要告訴使用者具體的活動內容，這是比較輕的設計手法，比較直接的方式是在登入QQ之後，直接給使用者一個活動預告。


這個需要結合QQ掃一掃的介面，並且跟活動裡面的場景結合起來，打造一個新的UI風格。我們可以透過一些色彩質感和執行動畫告訴使用者，這是一個充滿科技感的運營活動，一個新的UI活動風格，一個新的科技感風格。


沉浸式體驗，往往也包含人的感官體驗和認知體驗。

我們需要從大眾的一些記憶裡面提取一些設計元素，基於現在的場景、應用做結合。那麼我們如何去提取使用者的一些記憶元素？可以通過我們記憶中一些片段去提取它的色彩、質感，還有聲音、圖形、運動方式、光學和力學這樣的特徵去和設計做融合。

說起穿越這個話題，大家也會想到哆啦A夢的穿越門或者哆啦A夢的時光機，還有些使用者就會想到我們近年來比較火的奇異博士其中的一個片段，我們抽取奇異博士開啟穿越門的片段提取一些設計元素，譬如說它的運動方式，力學和光學特徵。


首先我們需要去教育使用者“空中畫圈”，“空中畫圈”這個詞大家應該都不難理解，當時請了很多深大學生去公司做用研，當時試玩這個活動的時候，發現很多同學都不會玩，不是說大家沒有看過奇異博士，也不是說大家對AR沒有接觸，是因為這種新的互動形式會讓使用者的心理造成一個不確定因素，並且懷疑自己的判斷，大家更多的習慣直接在螢幕上畫圈，而不是舉起自己的手，在空中畫一個圈，開啟穿越門，甚至有一些同學直接手反過來一直在扣攝像頭，都會有這種情況出現。

因此才會讓我們的設計更加客觀，我們自認為很好理解的事情，其實對於一些大眾使用者來說，並不容易去實現。


在此次研究的基礎上我們做了圖文的結合，到最後不斷優化了十幾個方案，不斷地去找學生做用研，最後得出了一個解決方案——模擬一個真實的畫圈場景。做了一個動畫，並且加上簡潔的文字和操作的反饋來引導使用者操作，同時也支援使用者螢幕畫圈，可是扣攝像頭還是做不到的，這是為了避免使用者在試玩的過程中會發生一些中斷。

關於AR畫圈在設計師的工作來說，設計這個點的動畫好像很簡單，其實它特別困難。開發同學需要考慮手機效能以及QQ引擎等問題，為了確保使用者的流暢體驗，設計可能需要做一些犧牲。

當時我們有一個限制，動畫必須保證在5到8幀之內。但是它會出現卡頓，色差，模糊，生硬這些情況，並且我們用AE的粒子效果去做一個動畫的時候，跟開發實現的原理其實不太一致，所以我們要不斷去跟開發做除錯跟還原效果。再者比如說AE裡面的粒子效果匯出PNG之後會有很大的色差，這些都是需要不斷去修正和想辦法解決的。

我們在多方面除錯下，修正方案，尋找解決的方法，最後做出了一個相對比較滿意的效果。

在空中畫圈之後，它會立馬形成一個3D立體的穿越門，這個穿越門可以讓我們360度地觀看，並且可以在現實還有虛擬場景中來回穿梭，這需要很多的面片去做一些貼圖處理，但是會遇到技術上的問題，所以只能用最精簡的方式去達到我們理想中的效果。


對於一些引擎還有技術的限制，需要想很多的方法去將資源整合。譬如說從AR畫圈到AR穿越門，再到一個虛擬的AR賽場，其實是有四段不同的資源合成的，需要嚴格去把控整個時間的進場和退場。


第一步：需要想方設法去用一些巧妙的手法讓它過度自然；


第二步：如何讓使用者感覺到身臨其境，可以從視覺、聽覺、觸覺這三方面去提升使用者的感觀體驗；以第一人稱的視角能夠360度去觀看整個AR賽場，然後再配合現場真實的一些音效，像是解說員的旁白，還原一個真實感；


第三部：觸感。觸感的設計我們知道自從IOS升級之後，手機有強、中、弱三擋的振動，我們利用設計這些振動的頻率，還有長短還原踢球，球擊龍門還有球在草地上來回滾動的觸感，主要目的就是提升使用者的真實感；


第四步：如何去增強使用者的分享慾望。除了從質感上去打造真實的報紙質感之外，我們根據使用者的一些閱讀習慣去把內容排版起來，分佈在每一個角落。再來我們根據整個國家的球服配色，不同的讚揚文案，還有使用者畫圈的過程，會有視訊錄屏把這些元素整合在一起，打造一個魔法報紙，以這些個性化的設計去提升使用者的參與感，讓使用者有一個分享的慾望。


設計心得

關於AR的設計流程的建議：

• 在定義玩法的時候，互動和操作要儘量的簡單，降低使用者的參與門檻與操作門檻，不要讓使用者形成挫敗的心理；
• 在互動階段的時候，我們通過用研定出最佳的新手引導方案，確保用使用者懂得玩這個活動；
• 在視覺階段的時候，需要預留時間給開發做測試，反覆去除錯還原視覺效果，AR的設計原則其實跟大部分設計原則都是一樣的，它是一個金字塔的三角形關係，首先要確保應用性，應用性就是要有一些簡單明瞭的操作，還有一些引導暗示使用者是會使用AP或是會玩這個活動的，避免使用者的心理造成一些挫敗感；
  

• 穩定性。需要確保整個體驗流程是通暢的，要多維度的給到一些操作反饋，避免使用者在體驗過程中發生意外或者中斷；
• 最後才是愉悅感，通過設計的手法讓使用者得到一些娛樂感和滿足感，沉浸其中，忘記真實世界的場景。
  

關於AR沉浸式體驗的建議：

• 情景：需要設計背景或劇情去吸引使用者，讓使用者產生一個探索的慾望；
• 空間：需要合理的去利用真實的空間；
• 情節：需要明確一些比較細節的目標，讓使用者的行為有一些特別的反饋，讓使用者對整個體驗有著絕對的主控感；
• 角色：可以通過建立一些角色關係，情景化的設計，去提升使用者的參與感；
• 氛圍：可以從視覺，聽覺，觸覺三方面去提升整個體驗的愉悅感；
• 節奏：從簡單到挑戰，需要慢慢循序漸進的使得使用者集中精神。
  

結語

最後就是我在做AR專案的一些反思。

之前我經常就會覺得設計師的工作只是考慮怎麼包裝這個APP，怎麼包裝這個品牌，怎麼做好看就可以了。其實並不是的，我們需要考慮使用者的一些體驗問題，還有我們要具備一些產品思維，所有跟新技術去做融合的設計是有很高的風險，一個好的設計其實是選擇眾多條件下的最佳方案。

我們在設計過程中會遇到很多困難、很多限制，而且需要用設計去解決一些技術問題，我們會把這些限制設為思考問題的出發點，提供一個更完善的方案，同時我也相信科技是跟技術在不斷的進步，所以有一天我們可以做到我們理想中的設計。


相關連結：


Vuforia(影象檢測)：
http://www.vuforia.com/devices.html


作者：芝麻
來源：騰訊ISUX
原地址：https://isux.tencent.com/articles/ar-design.html