2022-10-26 純純
今天給大家?guī)淼姆窒硎恰禔R，我們從設(shè)計說起》，希望大家通過這個分享能夠快速了解AR的實現(xiàn)原理，AR的設(shè)計流程，以及在設(shè)計過程中遇到的問題，在最后會分享我這些年做AR設(shè)計的一些心得和技巧。
關(guān)于AR
AR這個詞對大眾而言并不是一個陌生的詞，但是AR的實現(xiàn)原理是怎樣的？
AR的中文名字是增強現(xiàn)實技術(shù)，它是一種實時地計算攝影機影像的位置及角度，并且加上相應(yīng)的圖像、視頻、3D模型的技術(shù)。
簡單來講就是在現(xiàn)實世界上疊加一些虛擬信息，然后再實時計算它在設(shè)備上的位置以及角度的變化。
AR的目標(biāo)是將屏幕上的虛擬內(nèi)容放在現(xiàn)實的世界中與之互動，幫助大眾更快捷更直觀的去獲取信息，并且AR自帶強大的商業(yè)價值。身邊的小伙伴經(jīng)常會把AR跟VR搞混，其實AR是增強現(xiàn)實技術(shù)，而VR是虛擬現(xiàn)實技術(shù)。
AR是將虛擬的物體放在我們周邊的現(xiàn)實環(huán)境，增強現(xiàn)實世界的感官體驗；VR則是將我們放在虛擬的環(huán)境中，打造一個以假亂真的沉浸式體驗。
它們在設(shè)備上進行劃分，AR對大眾用戶來說參與的門檻低，操作的門檻更低，因為AR只需要擁有一部帶攝像頭的智能手機，便可以成為一個載體，在增強現(xiàn)實世界的同時，重塑用戶的交互體驗，而VR的設(shè)備對于大眾用戶來講日常比較難接觸到，需要較為專業(yè)的設(shè)備和場地。
AR技術(shù)的核心是識別與跟蹤，它的實現(xiàn)方式分為兩種：
● 圖像檢測法；
● 全球衛(wèi)星定位系統(tǒng)法。
圖像檢測法
圖像檢測法其實是AR最常見的一種定位方式，經(jīng)常用在圖片識別和人臉的識別。它的技術(shù)實現(xiàn)流程主要分為三步：
Step 1：需要捕捉特征圖像，算法會對圖像進行規(guī)劃處理，計算有效特征點進行匹配，可以看下圖一，這些綠色的小點點就是有效特征點；
Step 2：從偏離的矩形算出一個三維坐標(biāo)系，建立一個空間；
Step 3：實時跟蹤數(shù)據(jù)內(nèi)容的位置和角度的變化；
剛才講到綠色的小點點設(shè)計師應(yīng)該怎么去檢測呢？這里推薦一個網(wǎng)站給大家 —— Vuforia，注冊賬號后上傳設(shè)計圖就可以直接將圖稿的特征點標(biāo)記出來，并且對其進行打分，特征點越多，識別的準(zhǔn)確率越高。（鏈接在文末)
觀察第一張圖的上下兩幅作品，可以發(fā)現(xiàn)它僅僅只是背景和深淺不同，形成的有效特征點也有所不同，因為算法在灰度對比度高的情況下會形成更多的有效特征點。
我們再觀察第二張圖，可以發(fā)現(xiàn)第二張圖在太陽的圓形部分沒有形成任何有效特征點，因為算法會排除掉一些比較平滑的曲線或元素，視為無效特征點，這種點一般出現(xiàn)在夾角處，所以為了使特征點分?jǐn)?shù)更高，我們在設(shè)計的時候需要：
● 避免畫一些比較平滑或帶弧度的元素；
● 特征點需要平均分布在每一個角落。
最后看第三張圖，幾何云的部分重復(fù)出現(xiàn)在不同的位置上，它形成的有效特征點的數(shù)量和位置也一樣。因為重復(fù)出現(xiàn)的規(guī)則圖形會被算法判定為無效特征點并排除掉，所以在做設(shè)計的時候需要：
●避免用一些規(guī)則的圖形和一些重復(fù)出現(xiàn)的元素。
圖像檢測的優(yōu)點是簡單、高效和多樣性，缺點是容易受環(huán)境、光線、距離、遮擋、聚焦這些因素產(chǎn)生變化，會使虛擬內(nèi)容產(chǎn)生抖動、卡頓、誤判、識別慢、無法識別的情況出現(xiàn)。
環(huán)境光線距離就不需要多講了，遮擋就是取決于取景的角度和范圍。聚焦指的是設(shè)備，也就是我們的攝像機，我們的手機對于深色還有漸變顏色進行對焦時會較慢顯現(xiàn)。
所以在做視覺稿的時候，其實需要滿足很多條件，并且要與開發(fā)進行多環(huán)境測試、一起研討，才能得出一張比較合格的識別圖，優(yōu)秀的識別圖必須確保它的穩(wěn)定性，還有它的識別速度。
我們來看看實際項目中是如何應(yīng)用的。
在2016年的時候，團隊策劃了《QQ奧運火炬手》AR活動，基本上是在一個毫無經(jīng)驗的情況之下，不斷地試錯，不斷地修正，在兩個月內(nèi)從風(fēng)格到終稿花了將近3000稿，才完成六個奧運城市28張識別圖的設(shè)計，可以看到DEMO呈現(xiàn)出來的效果相對比較穩(wěn)定，而且識別速度非?？斓模驹谝幻胫畠?nèi)完成。
這里強調(diào)優(yōu)秀這個詞，因為我們不希望用戶第一次接觸AR時就造成一些挫敗感，導(dǎo)致對新技術(shù)的體驗產(chǎn)生抗拒心理，所以對識別率的速度還有穩(wěn)定性做了相當(dāng)多的調(diào)試，當(dāng)時也獲得了世界吉尼斯紀(jì)錄的證書。
這是以前的一個小DEMO，通過手機的掃一掃識別一層一層傳遞的過程。剛才說到圖片檢測法的圖像場景，現(xiàn)在再看一下紋理識別的場景，人臉識別其實就是圖像檢測法的邊緣檢測，它可以檢測出人臉的部位，同時跟蹤這些部位進行運動，把虛擬的內(nèi)容跟肢體做無縫的貼合。
比如說經(jīng)常用到的特效掛件，大家看到市面上的一些美顏APP都有些什么樣的能力呢？
● 實時美顏
● 臉部貼合
● 動作觸發(fā)
● 臉部變形
● 換臉、扣臉
● 氛圍濾鏡
● 3D模型
其它便不一一闡述了，相信大家也有所了解。
針對QQ的一些社交場景，我們團隊也做了QQ特有的一些特效掛件，例如可以在QQ的聊天界面中的拍攝功能，還有聊天，都可以在視頻聊天看到，玩到。還有利用AI還有AR的結(jié)合，在兩人通話中做了一個小游戲，通過做表情贏取對方的紅包。
全球衛(wèi)星定位系統(tǒng)法
全球衛(wèi)星定位系統(tǒng)法是是利用GPS去定位我們所處的位置，在真實的空間里尋找一個平面，可以現(xiàn)實世界中跟虛擬物體進行互動和觀賞。
優(yōu)點是適合于室外的跟蹤，可以克服在室外場景中光照，還有聚焦等不確定因素，而缺點是很考驗設(shè)備的性能，包括當(dāng)前網(wǎng)絡(luò)的環(huán)境。
可以看到這上面有兩個比較陌生的詞，一個是LBS(Location Based Service)，一個是POI(Point of Interest)。LBS其實是基于移動位置服務(wù)，配置服務(wù)GPS獲取位置的一個方式。有些AR的游戲是基于LBS去實現(xiàn)的，它們所用到的實現(xiàn)方式也就是全球衛(wèi)星定位系統(tǒng)法。而POI就是一個興趣點，它在地圖上可代表是一棟大廈，一個商鋪或者一處景點等等，它包含四方面的信息，就是名稱、類別、坐標(biāo)和分類。
這個是16年日本做的一個AR游戲，相信大家都有玩過。
這個游戲是利用全球衛(wèi)星定位系統(tǒng)法去實現(xiàn)的一個游戲，為什么給大家看剛才的短片，是因為騰訊2017年新年QQ的一個運營活動跟它的玩法特別像，都是基于一個地圖上去尋找一個紅包或者一個寶藏，然后找到這個位置，再通過完成一些任務(wù)去獲得這些紅包或者禮品。
做這個運營活動的時候，需要去考慮如何體現(xiàn)AR的空間概念，譬如說要合理利用一個真實的空間，因為設(shè)計師出的設(shè)計稿再也不是750×1334的尺寸了，它是一個真實的空間，需要把這空間進行拓展，去引導(dǎo)用戶移動手機鏡頭，跟蹤這些虛擬物體進行移動和互動。
我們可以通過物體的走向去體現(xiàn)一個空間感，譬如說從遠(yuǎn)到近，從左到右，從上到下等方式讓用戶移動起來。
在地圖的引導(dǎo)上，可以從遠(yuǎn)近這個層次去打造一個三維空間，譬如說離我們比較近的AR點的時候，需要強化我們的信息，做一些差異化的動畫引導(dǎo)，再遠(yuǎn)一點的地方就只需要給一個簡單的貼圖或者簡單的元素告知用戶，遠(yuǎn)處也有一個紅包，或者禮品。
IP的力量是非常強大的，當(dāng)時使用了QQfamily的baby Q作為財神形象給用戶發(fā)紅包，它的作用是可以跟用戶產(chǎn)生一個平等的對話，陪伴用戶一起完成一些任務(wù)，建立一個平等親密的關(guān)系。
在2016年的時候，通過《QQ奧運火炬手》活動，一推出QQ就被稱為是國內(nèi)首個AR用戶超過1億的社交應(yīng)用，整個活動吸引了全球一百四十三個國家的用戶，跟AR的互動超過將近兩億次。
在2017年的時候《QQ天降紅包》運營活動用戶量超過3億，半年間就收獲業(yè)界還有一些用戶的良好口碑，QQ是一個很年輕的產(chǎn)品，它的用戶大部分都是學(xué)生。通過這樣的活動跟新的技術(shù)做結(jié)合，我們成功將QQ的品牌升級為年輕化，娛樂化，還有科技化。
過去的設(shè)計手法就是從圖形，動畫還有色彩上做一些創(chuàng)新?，F(xiàn)在我們加入一些新的技術(shù)，比如說AI、AR、音效和物理震動之后，可以升級用戶的一些感官體驗，使設(shè)計更加沉浸式，更加娛樂化。
把AI跟AR做一個很好的結(jié)合，是因為更好的AI需要更好的AR去體現(xiàn)。
那么大家都說AI就是AI，AR就是AR，其實這個說法是錯的，因為它們的關(guān)系非常密切。如果我來作比喻的話，
「AI就是人的大腦，AR就是人的一些感官體驗」
跟這些新的技術(shù)做結(jié)合，會使得設(shè)計和活動會有四個優(yōu)點，那就是話題性，串聯(lián)性，沉浸式和娛樂化。
通過一些新的技術(shù)給用戶帶來的新鮮感和話題性，再把一些時間音效還有振動影像這些元素有效地串聯(lián)在一起，讓用戶身臨其境，更加專注在操作當(dāng)中，更加強化整個設(shè)計，整個產(chǎn)品的趣味性，也提高整個產(chǎn)品的娛樂價值。
去年世界杯的時候，我們推出了《QQAR穿越賽場》。
相對奧運而言，世界杯并不是全民都會關(guān)注的一個賽事，所以當(dāng)時用了很大部分的時間來做用研，想方設(shè)法去提升用戶的參與感。我們對用戶的行為和心理進行分析，希望能通過新的交互形式和新的技術(shù)讓用戶更好的參與進來。
在做運營設(shè)計的時候，需要從三個部份去策劃：
● 如何去吸引用戶；
● 在用戶體驗的過程中如何制造一些驚喜；
● 希望用戶在最后有一個想要抒發(fā)自己的欲望的出口，將活動分享出去。
那如何去吸引用戶參與活動呢？可以利一些視覺線索，突出一些重點信息，通過差異化的設(shè)計去滿足用戶的好奇心。譬如說，利用一個足球的運動軌跡引起用戶的注意力，讓用戶產(chǎn)生好奇心，去點擊入口，到第二個頁面的時候，需要告訴用戶具體的活動內(nèi)容，這是比較輕的設(shè)計手法，比較直接的方式是在登錄QQ之后，直接給用戶一個活動預(yù)告。
這個需要結(jié)合QQ掃一掃的界面，并且跟活動里面的場景結(jié)合起來，打造一個新的UI風(fēng)格。我們可以透過一些色彩質(zhì)感和執(zhí)行動畫告訴用戶，這是一個充滿科技感的運營活動，一個新的UI活動風(fēng)格，一個新的科技感風(fēng)格。
沉浸式體驗，往往也包含人的感官體驗和認(rèn)知體驗。
我們需要從大眾的一些記憶里面提取一些設(shè)計元素，基于現(xiàn)在的場景、應(yīng)用做結(jié)合。那么我們?nèi)绾稳ヌ崛∮脩舻囊恍┯洃浽?？可以通過我們記憶中一些片段去提取它的色彩、質(zhì)感，還有聲音、圖形、運動方式、光學(xué)和力學(xué)這樣的特征去和設(shè)計做融合。
說起穿越這個話題，大家也會想到哆啦A夢的穿越門或者哆啦A夢的時光機，還有些用戶就會想到我們近年來比較火的奇異博士其中的一個片段，我們抽取奇異博士打開穿越門的片段提取一些設(shè)計元素，譬如說它的運動方式，力學(xué)和光學(xué)特征。
首先我們需要去教育用戶“空中畫圈”，“空中畫圈”這個詞大家應(yīng)該都不難理解，當(dāng)時請了很多深大學(xué)生去公司做用研，當(dāng)時試玩這個活動的時候，發(fā)現(xiàn)很多同學(xué)都不會玩，不是說大家沒有看過奇異博士，也不是說大家對AR沒有接觸，是因為這種新的互動形式會讓用戶的心理造成一個不確定因素，并且懷疑自己的判斷，大家更多的習(xí)慣直接在屏幕上畫圈，而不是舉起自己的手，在空中畫一個圈，開啟穿越門，甚至有一些同學(xué)直接手反過來一直在扣攝像頭，都會有這種情況出現(xiàn)。
因此才會讓我們的設(shè)計更加客觀，我們自認(rèn)為很好理解的事情，其實對于一些大眾用戶來說，并不容易去實現(xiàn)。
在此次研究的基礎(chǔ)上我們做了圖文的結(jié)合，到最后不斷優(yōu)化了十幾個方案，不斷地去找學(xué)生做用研，最后得出了一個解決方案——模擬一個真實的畫圈場景。做了一個動畫，并且加上簡潔的文字和操作的反饋來引導(dǎo)用戶操作，同時也支持用戶屏幕畫圈，可是扣攝像頭還是做不到的，這是為了避免用戶在試玩的過程中會發(fā)生一些中斷。
關(guān)于AR畫圈在設(shè)計師的工作來說，設(shè)計這個點的動畫好像很簡單，其實它特別困難。開發(fā)同學(xué)需要考慮手機性能以及QQ引擎等問題，為了確保用戶的流暢體驗，設(shè)計可能需要做一些犧牲。
當(dāng)時我們有一個限制，動畫必須保證在5到8幀之內(nèi)。但是它會出現(xiàn)卡頓，色差，模糊，生硬這些情況，并且我們用AE的粒子效果去做一個動畫的時候，跟開發(fā)實現(xiàn)的原理其實不太一致，所以我們要不斷去跟開發(fā)做調(diào)試跟還原效果。再者比如說AE里面的粒子效果導(dǎo)出PNG之后會有很大的色差，這些都是需要不斷去修正和想辦法解決的。
我們在多方面調(diào)試下，修正方案，尋找解決的方法，最后做出了一個相對比較滿意的效果。
在空中畫圈之后，它會立馬形成一個3D立體的穿越門，這個穿越門可以讓我們360度地觀看，并且可以在現(xiàn)實還有虛擬場景中來回穿梭，這需要很多的面片去做一些貼圖處理，但是會遇到技術(shù)上的問題，所以只能用最精簡的方式去達(dá)到我們理想中的效果。
對于一些引擎還有技術(shù)的限制，需要想很多的方法去將資源整合。譬如說從AR畫圈到AR穿越門，再到一個虛擬的AR賽場，其實是有四段不同的資源合成的，需要嚴(yán)格去把控整個時間的進場和退場。
第一步：需要想方設(shè)法去用一些巧妙的手法讓它過度自然；
第二步：如何讓用戶感覺到身臨其境，可以從視覺、聽覺、觸覺這三方面去提升用戶的感觀體驗；以第一人稱的視角能夠360度去觀看整個AR賽場，然后再配合現(xiàn)場真實的一些音效，像是解說員的旁白，還原一個真實感；
第三部：觸感。觸感的設(shè)計我們知道自從IOS升級之后，手機有強、中、弱三擋的振動，我們利用設(shè)計這些振動的頻率，還有長短還原踢球，球擊龍門還有球在草地上來回滾動的觸感，主要目的就是提升用戶的真實感；
第四步：如何去增強用戶的分享欲望。除了從質(zhì)感上去打造真實的報紙質(zhì)感之外，我們根據(jù)用戶的一些閱讀習(xí)慣去把內(nèi)容排版起來，分布在每一個角落。再來我們根據(jù)整個國家的球服配色，不同的贊揚文案，還有用戶畫圈的過程，會有視頻錄屏把這些元素整合在一起，打造一個魔法報紙，以這些個性化的設(shè)計去提升用戶的參與感，讓用戶有一個分享的欲望。
設(shè)計心得
關(guān)于AR的設(shè)計流程的建議：
● 在定義玩法的時候，交互和操作要盡量的簡單，降低用戶的參與門檻與操作門檻，不要讓用戶形成挫敗的心理；
● 在交互階段的時候，我們通過用研定出最佳的新手引導(dǎo)方案，確保用用戶懂得玩這個活動；
● 在視覺階段的時候，需要預(yù)留時間給開發(fā)做測試，反復(fù)去調(diào)試還原視覺效果，AR的設(shè)計原則其實跟大部分設(shè)計原則都是一樣的，它是一個金字塔的三角形關(guān)系，首先要確保應(yīng)用性，應(yīng)用性就是要有一些簡單明了的操作，還有一些引導(dǎo)暗示用戶是會使用AP或是會玩這個活動的，避免用戶的心理造成一些挫敗感；
● 穩(wěn)定性。需要確保整個體驗流程是通暢的，要多維度的給到一些操作反饋，避免用戶在體驗過程中發(fā)生意外或者中斷；
● 最后才是愉悅感，通過設(shè)計的手法讓用戶得到一些娛樂感和滿足感，沉浸其中，忘記真實世界的場景。
關(guān)于AR沉浸式體驗的建議：
● 情景：需要設(shè)計背景或劇情去吸引用戶，讓用戶產(chǎn)生一個探索的欲望；
● 空間：需要合理的去利用真實的空間；
● 情節(jié)：需要明確一些比較細(xì)節(jié)的目標(biāo)，讓用戶的行為有一些特別的反饋，讓用戶對整個體驗有著絕對的主控感；
● 角色：可以通過創(chuàng)建一些角色關(guān)系，情景化的設(shè)計，去提升用戶的參與感；
● 氛圍：可以從視覺，聽覺，觸覺三方面去提升整個體驗的愉悅感；
● 節(jié)奏：從簡單到挑戰(zhàn)，需要慢慢循序漸進的使得用戶集中精神。
結(jié)語
最后就是我在做AR項目的一些反思。
之前我經(jīng)常就會覺得設(shè)計師的工作只是考慮怎么包裝這個APP，怎么包裝這個品牌，怎么做好看就可以了。其實并不是的，我們需要考慮用戶的一些體驗問題，還有我們要具備一些產(chǎn)品思維，所有跟新技術(shù)去做融合的設(shè)計是有很高的風(fēng)險，一個好的設(shè)計其實是選擇眾多條件下的最佳方案。
我們在設(shè)計過程中會遇到很多困難、很多限制，而且需要用設(shè)計去解決一些技術(shù)問題，我們會把這些限制設(shè)為思考問題的出發(fā)點，提供一個更完善的方案，同時我也相信科技是跟技術(shù)在不斷的進步，所以有一天我們可以做到我們理想中的設(shè)計。
來源：站酷 作者：騰訊ISUX團隊
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.88yangsc.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍(lán)藍(lán)設(shè)計的小編 http://www.88yangsc.com