編者按：AR 是即將到來的熱門領(lǐng)域，而QQ 從AR傳遞火炬、AR紅包、到AR送祝福到本次的AR穿越賽場，每一次都給人驚喜。本次的設(shè)計(jì)過程更是吸引了3000多萬人參加，口碑極高，設(shè)計(jì)細(xì)節(jié)也非常值得學(xué)習(xí)，看完忍不住下載了QQ，為設(shè)計(jì)師的巧思點(diǎn)贊！

2018年的夏天，俄羅斯舉辦了為期1個月的世界杯比賽，在比賽期間，QQ推出了「QQ-AR穿越賽場」 主題活動，整體設(shè)計(jì)利用前沿的 AR技術(shù)，打造了業(yè)界首創(chuàng)的「畫圈開啟任意門」創(chuàng)新玩法，整體活動吸引了全國373個城市3015萬用戶成功穿越活動賽場，收獲了業(yè)界與用戶的良好口碑，同時(shí)90后參與用戶占比83%，充分體現(xiàn)出QQ科技化、年輕化、娛樂化的魅力。那么，本次活動是如何從眾多活動中脫穎而出的呢？在新技術(shù)面前設(shè)計(jì)師又該具備哪些能力呢？未來 QQ-AR 還會做哪些規(guī)劃呢？

一、如何在世界杯活動中脫穎而出

1. QQ為什么要參與世界杯活動

2016里約奧運(yùn)會期間QQ舉辦了「奧運(yùn)傳火炬」活動，并在當(dāng)年贏得了QQ網(wǎng)友極大的關(guān)注度。而來自2014巴西世界杯官方與2016里約奧運(yùn)會官方數(shù)據(jù)顯示，世界杯全球民眾的網(wǎng)絡(luò)關(guān)注量要高于奧運(yùn)會，也是全球四年一度的超級熱點(diǎn)。所以，對于QQ來說這是一個提升QQ品牌口碑，刺激用戶社交活躍的絕佳時(shí)機(jī)，與用戶一起狂歡。

2. 讓用戶有參與感

世界杯作為2018年的超級熱點(diǎn)，在比賽期間想必會有各種各樣的活動出現(xiàn)，那么QQ要想在眾多活動中脫引而出，設(shè)計(jì)的核心目標(biāo)是什么呢？

我們從過往的大型活動設(shè)計(jì)經(jīng)驗(yàn)來看，好的創(chuàng)意可以激發(fā)用戶的好奇心，但要想在全流程中營造一個愉悅的用戶體驗(yàn)，僅僅是有一個好的概念是遠(yuǎn)遠(yuǎn)不夠的，用戶體驗(yàn)的核心應(yīng)該是讓「用戶有參與感」。所謂的參與感不是給出各式各樣的方案讓用戶按照流程去使用，而是給予用戶創(chuàng)造從思想上、情緒上、行為上的可能性，并通過自身的主動操作與整體的設(shè)計(jì)流程相互影響，使用戶感知更加立體，更加個性，從而加強(qiáng)用戶在體驗(yàn)中的參與感，讓用戶印象深刻。

用戶有共鳴是「參與感」的基礎(chǔ)

很多設(shè)計(jì)師在接到一個新需求時(shí)，往往會通過「我覺得」「我認(rèn)為」「我喜歡」描繪出一套高效率的設(shè)計(jì)方案。但對于創(chuàng)新型的活動設(shè)計(jì)，單從設(shè)計(jì)師經(jīng)驗(yàn)之談出發(fā)，容易局限設(shè)計(jì)的思維空間，忽略了用戶認(rèn)知的重要性，用戶無法從活動中體會真正的樂趣，導(dǎo)致設(shè)計(jì)后期不得不進(jìn)行大量方案修改，拖延了設(shè)計(jì)周期，反而大大降低了效率。所以，在創(chuàng)新型的活動設(shè)計(jì)的首要任務(wù)就是想用戶所想，與用戶認(rèn)知產(chǎn)生共鳴，降低用戶理解成本，更加投入的參與到活動中來。

那我們的目標(biāo)用戶是足球球迷嗎？

答案：不是。

對于QQ這樣億萬級的產(chǎn)品，要想帶動全民參與，目標(biāo)用戶就一定不能局限。觀看世界杯的球迷可分為三類鐵桿球迷、偽球迷、蹭熱點(diǎn)的小白用戶，而這三類用戶也包含了能參與活動的絕大多數(shù)，所以在第一輪方案策劃我們找了三類不同的用戶進(jìn)行訪談，提煉符合目標(biāo)用戶認(rèn)知的設(shè)計(jì)元素。

創(chuàng)意有火花是「參與感」的升華

與用戶共鳴的設(shè)計(jì)元素算是給創(chuàng)意帶來了好的靈感，但提煉這些元素，打造吸引用戶創(chuàng)意玩法，就需要設(shè)計(jì)師運(yùn)用掌握的設(shè)計(jì)方法，將元素碰撞出火花。 在本次世界杯活動中我們采用了「組合式創(chuàng)意思考」方法。將三類用戶認(rèn)知元素進(jìn)行打散，并與當(dāng)下大熱的互動玩法、技術(shù)手段進(jìn)行創(chuàng)意連線，碰撞出最有火花的創(chuàng)意亮點(diǎn)。

這么多火花如何進(jìn)行篩選呢？

答案：具體項(xiàng)目具體分析的原則，首先應(yīng)該設(shè)定列出關(guān)鍵性問題。

從世界杯項(xiàng)目來說：

• 問題一：項(xiàng)目周期較短，可否在一個月內(nèi)完成？
• 問題二：沒有像紅包、禮券等獎勵，方案對于用戶參與的動力是不是充足？

從用戶的角度來說：

• 問題三：三類目標(biāo)用戶是否都會買單，滿足全民參與的目標(biāo)？
• 問題四：創(chuàng)意是否具備獨(dú)特性，與世界杯結(jié)合的自然性、視覺表現(xiàn)是否有沖擊性？

讓用戶化身活動主角是「參與感」的精髓

從小我們就喜歡聽故事，一個好的故事關(guān)鍵在于場景的打造，讓聆聽者充滿聯(lián)想猶如身臨其境，仿佛自身是故事中的一角，而這種感受便是故事帶來的「參與感」。

那對于世界杯活動我們應(yīng)該如何講故事，讓用戶化身為活動主角呢？

第一，要有代入感的故事氛圍。

一個好的故事文字能夠調(diào)動讀者內(nèi)心的情緒，而一個好的視覺場景用戶會因?yàn)楹诎蹈惺艿娇植溃瑫驗(yàn)轼B語花香感知到一股清香，會因?yàn)橐黄领o的大海而觸景傷情，而這種視覺場景所帶來情緒就是代入感，也是吸引用戶參與活動的關(guān)鍵。而 AR技術(shù)的特點(diǎn)是讓虛擬與現(xiàn)實(shí)結(jié)合，這一特點(diǎn)，也在活動氛圍的搭建上拓展了設(shè)計(jì)想象空間，所以我們在虛擬世界中搭建了一個穿越任意門，當(dāng)用戶在真實(shí)世界中向前走，會穿越進(jìn)入一個360度的全景的3D球場，用戶可以從視覺、聽覺中感受球場氛圍，并在環(huán)境中融入于用戶相關(guān)的信息，讓用戶更加快速的融入活動中來。通過模擬足球場景的方式，用戶一定會給予自己對足球的認(rèn)知經(jīng)歷展開聯(lián)想，從而觸達(dá)用戶內(nèi)心的感受，加強(qiáng)了用戶故事的代入感。

第二，要有使命感的故事環(huán)節(jié)。

烘托氛圍的代入感可以說是從思維上讓用戶參與到活動中來，而使命感是想讓用戶從行為意識上融入活動中去，將用戶自身的交互行為，反饋在活動的流程中，感覺自身賦予某種使命掌控活動。世界杯活動中我們設(shè)定用戶需自身畫圈的方式解鎖任意門，在真實(shí)世界中走動，穿越賽場化身為1名足球運(yùn)動員，并接受關(guān)鍵罰球挑戰(zhàn)。通過一系列的用戶參與行為，更容易讓用戶信以為真，體會穿越帶來的樂趣。

第三，要有成就感的故事收獲。

故事中主角之所以是主角，是因?yàn)樗凶约邯?dú)特的光環(huán)讓眾人印象深刻。前面我們從代入感、使命感給予了用戶更加立體的參與感受，那么，如何讓用戶將自己所參與的情緒表達(dá)出來，這就需要最后的成就感所達(dá)成。世界杯活動中我們將用戶化身為賽場上的一員，而這個過程我們希望后臺進(jìn)行了全程記錄，就像現(xiàn)實(shí)生活中的記者一樣，將這個令人興奮的過程記錄下來，并通過報(bào)紙的形式鋪天蓋地的告訴大家。讓主角不是自娛自樂，而是可以面向全員炫耀的一場故事講解，獲得自我的成就感，從而也帶動了用戶的參與感。

3. 設(shè)計(jì)方案的框架

前期通過訪談、腦爆、創(chuàng)意提取等方式，提煉了世界杯活動加強(qiáng)用戶「參與感」的關(guān)鍵因素，最終確定了活動的整體故事框架。

二、穿越?jīng)]有想象中簡單

經(jīng)過前期的方案分析、交互框架的搭建，給予項(xiàng)目后續(xù)實(shí)現(xiàn)奠定了基礎(chǔ)。但對于「QQ-AR穿越賽場」這種創(chuàng)新型活動，由于是業(yè)界首創(chuàng)，利用技術(shù)也相對復(fù)雜，所以在實(shí)現(xiàn)過程中一定會遇到各種挑戰(zhàn)，而這些挑戰(zhàn)對于設(shè)計(jì)師的綜合能力要求也更高。

1. 活動入口深，如何告知用戶

在過往舉行大型活動時(shí)，一般會在消息列表給予高曝光入口，比如QQ紅包春節(jié)活動、QQ奧運(yùn)活動。而對于世界杯來說，我們希望高曝光讓用戶感知強(qiáng)烈，參與活動中來。另一方面又擔(dān)心，每次大型活動高曝光都是在挑戰(zhàn)用戶的耐心，久而久之引起用戶反感，影響QQ大盤的用戶口碑。

那么這一次世界杯活動入口應(yīng)該在哪？

答案：QQ掃一掃。由于本次世界杯活動利用了 AR技術(shù)，而在QQ上，已經(jīng)教育了用戶來掃一掃參加AR賀卡、蜘蛛俠、百事可樂小黃臉等AR活動，不會對用戶有騷擾又符合情理。但從活動入口曝光來說：掃一掃入口過深，每一步的點(diǎn)擊都會導(dǎo)致用戶流失。掃描這種操作方式過于隱蔽難以讓用戶感知活動，導(dǎo)致用戶參與率低。

設(shè)計(jì)難點(diǎn)：在有限的條件下引導(dǎo)用戶參與活動。

方案一：一種場景化的引導(dǎo)方式

當(dāng)用戶進(jìn)入QQ時(shí)，我們利用世界杯強(qiáng)關(guān)聯(lián)的足球元素，讓用戶可以直觀的在界面頂部發(fā)現(xiàn)足球運(yùn)動動畫，并通過用戶的主動操作促使足球動畫也按照流程一步步的進(jìn)行運(yùn)動，增強(qiáng)了點(diǎn)擊過程中的趣味性。這種方式區(qū)別于傳統(tǒng)的紅點(diǎn)提示，與活動本身的劇情結(jié)合更加密切，用戶的代入感更加強(qiáng)烈，也通過設(shè)計(jì)元素更加明確了活動的內(nèi)容，變相提高了活動的曝光率。

方案二：一種與用戶界面關(guān)聯(lián)的引導(dǎo)方式

在大型活動中QQ閃屏一定是曝光最強(qiáng)，用戶參與度最高的，但過去大多數(shù)閃屏都僅僅是停留在告知的層面上，很難與用戶有共鳴。而這一次我們將閃屏與用戶消息列表界面相結(jié)合，當(dāng)用戶進(jìn)入QQ時(shí)，營造一場球員從用戶消息列表穿越的動畫假象，給用戶更多與世界杯相關(guān)聯(lián)的想象空間，快速將用戶帶入活動氛圍中來。既做到了用戶引導(dǎo)，又做了活動新手教育的效果。

2. 讓用戶畫個圈圈并不是件小事

在擬定方案的初期，開啟任意門的方式我們有過激烈的討論，一方觀點(diǎn)認(rèn)為要「簡單直觀」，當(dāng)用戶進(jìn)入活動空間中就應(yīng)該憑空出現(xiàn)任意門，這樣設(shè)計(jì)既降低了用戶參與的門檻，又提升了活動的曝光率。另一方觀點(diǎn)認(rèn)為要「遵循習(xí)慣」，QQ-AR 過往的活動大多數(shù)是教育用戶掃描靜態(tài)的手勢、物體或圖片解鎖活動，那世界杯活動是不是也可以讓用戶掃描真實(shí)的門，或者一個固定手勢開啟穿越門呢？

設(shè)計(jì)難點(diǎn)：要與用戶認(rèn)知相同，減少用戶對新型互動的教育成本。

從產(chǎn)品設(shè)計(jì)的角度來說兩個觀點(diǎn)都是可行的，但想讓用戶有意愿參與活動，卻缺少打動用戶的認(rèn)同感、新鮮感、驚喜感，與現(xiàn)有的競品體驗(yàn)都差不多，很難留住用戶，建立較好的業(yè)界口碑。就像現(xiàn)在有鑰匙鎖、指紋鎖、密碼鎖，你覺得它有問題嗎？影響使用嗎？其實(shí)沒有，但是如果有一把鎖使用了聲紋控制技術(shù)，可以像《一千零一夜》故事中那樣喊一聲「芝麻開門」就能解鎖的門，那種感覺一定是會加強(qiáng)用戶的認(rèn)同感、新鮮感、驚喜感。唐納德諾曼大師曾經(jīng)說過：「用戶依念的不是物品本身，而是與物品的關(guān)系以及物品給人們傳達(dá)的意義和情感」。所以，當(dāng)我們有了任意門這個好的概念時(shí)，并不應(yīng)該迫切的給用戶灌輸理念，而是要拉近活動本質(zhì)與用戶的距離，樹立良好的口碑。

所以，我們認(rèn)為開啟任意門的方式需要從以下三個方面進(jìn)行考慮。

第一，用記憶打破僵局。

首先，要找到與用戶相同的記憶點(diǎn)。回想我們記憶中的任意門，有哆啦A夢中穿越時(shí)空的粉紅任意門，有神筆馬良中畫筆成真的神話任意門，有奇異博士中凌空手勢的魔法任意門。這三個任意門都是大家熟悉的，具備讓用戶產(chǎn)生共鳴的基礎(chǔ)。

其次，找到放大用戶記憶的關(guān)鍵特征。比如「哆啦A夢」的粉紅門，「神筆馬良」的神筆，「奇藝博士」的火光之門都是可綁定記憶的故事元素。基于用戶熟悉的記憶內(nèi)容和操作形式設(shè)計(jì)，有利于減少記憶負(fù)擔(dān)，賦予用戶空間想象，打破產(chǎn)品自身與用戶認(rèn)知的隔閡。

第二，讓差異化去滿足用戶好奇心。

市面上常見的手機(jī)端AR互動都是以掃描靜態(tài)的圖像或物體為目標(biāo)，識別觸發(fā)展示相應(yīng)圖像、視頻、3D模型等，這種體驗(yàn)雖然滿足了信息的拓展性，但卻缺少互動性，讓用戶難以享受AR體驗(yàn)帶來的參與樂趣，更多用戶反饋感覺是用另外一種方式看了一段普通視頻。

所以，要想讓用戶感受到活動的差異化，我們需要了解AR技術(shù)的特定屬性，從設(shè)計(jì)的角度破除固有的模式化操作，設(shè)計(jì)讓用戶眼前一亮的AR新型體驗(yàn)。根據(jù)過往的AR設(shè)計(jì)經(jīng)驗(yàn)，AR操作設(shè)計(jì)需要注意以下三個用戶體驗(yàn)：

• 體驗(yàn)中減少用戶接觸性的物理感知；
• 避免道具成為用戶體驗(yàn)的門檻；
• 不要停留在手機(jī)界面設(shè)計(jì)，要有與真實(shí)空間的互動。

再回到我們記憶中的三款任意門，從操作上還原「多啦A夢」、「神筆馬良」都需要很明確的推、拉、拿等物理感知操作，「神筆馬良」還需要提供操作的神筆道具，如果采用這種方式，用戶參與感的體驗(yàn)門檻會大大提升。而「奇異博士」的操作方式是最符合移動端AR體驗(yàn)的，用戶無需接觸任何物體和道具，通過手勢憑空畫圈，就能出現(xiàn)穿越門，這樣的方式操作門檻低，操作行為非常自然，也利于后期方案的拓展。

第三，讓簡潔自然帶來愉悅操作體驗(yàn)。

一個創(chuàng)新的交互方式，教育用戶如何操作一定是設(shè)計(jì)的重中之重，而在 QQ-AR世界杯活動初期確立，我們第一個預(yù)估的設(shè)計(jì)難點(diǎn)就是讓用戶在后置攝像頭前畫圈的教育。既然是讓用戶使用，那用戶必須全過程參與到設(shè)計(jì)中來。整個過程我分為了三個階段：

第一階段：設(shè)計(jì)師設(shè)計(jì)，按照信息結(jié)構(gòu)搭建教育引導(dǎo)。

我們將畫圈引導(dǎo)分為了抬手機(jī)引導(dǎo)、手勢引導(dǎo)、掃描引導(dǎo)、畫圈引導(dǎo)四個階段。根據(jù)這四個過程我們輸出了兩個方向：一步搞定所有，讓用戶自己理解。讓用戶一步一步來，更貼心的用戶服務(wù)。

用戶反饋：一步搞定所有方式，用戶完全不知道要干什么，訪談的用戶全部無法繼續(xù)，也無法通過文字理解自己需要做什么。一步一步來的方式，用戶覺得整個過程很復(fù)雜，流程很長，覺得操作起來有難度，不愿意參與。

第二階段：用戶疑惑解答，按照用戶意愿反饋搭建。

在第一次訪談中，我們發(fā)現(xiàn)用戶的問題集中在「復(fù)雜」上，不理解上，所以我們優(yōu)化了信息結(jié)構(gòu)，設(shè)計(jì)了兩個方向：用圖文配合來解答「簡」；讓動畫來做來解答「易」。

用戶反饋：用戶理解為要在手機(jī)屏幕上畫圈。來訪的2位用戶理解為手機(jī)屏幕畫圈，1位理解為掃描畫圈，但影響他的并不是動畫而是文字。

第三階段：設(shè)計(jì)師提煉，抓用戶理解點(diǎn)設(shè)計(jì)教育目標(biāo)。

在第二個階段的我們解決了對于抬手機(jī)、手勢識別、畫圈這個動作理解，但對于后置攝像頭畫圈教育，還需要重點(diǎn)突破。回想過去的 AR教育引導(dǎo)設(shè)計(jì)，用戶為什么一直在屏幕上畫圈，對比下發(fā)現(xiàn)這一次我們界面中缺少了一個最基礎(chǔ)的元素那就是「掃描」，用戶難以與現(xiàn)有的界面引導(dǎo)進(jìn)行區(qū)分，依舊停留在屏幕內(nèi)設(shè)計(jì)。而「掃描」操作對用戶的教育，是在真實(shí)的空間中找到可識別的目標(biāo)（如二維碼、條形碼、書籍等），所以我們需要讓界面「掃描」感知更強(qiáng)烈。

在訪談過程中我們還發(fā)現(xiàn)動畫引導(dǎo)，比圖文引導(dǎo)在新型互動的場景下，用戶更愿意去理解、去模仿，而之前的動畫為何無法理解后置攝像頭畫圈呢？用戶反饋動畫一直在教育畫圈，沒有教育用戶伸手畫圈，更不知道在手機(jī)后置攝像頭畫圈。所以我們需要讓動畫更接近我們的真實(shí)行為。

用戶反饋：大多數(shù)用戶能夠通過自己的理解成功在后置攝像頭畫圈，并獲得從未有過的驚喜感。而還有一部分用戶依舊選擇屏幕上畫圈，也覺得屏幕畫圈更符合他們的認(rèn)知操作習(xí)慣。最終，在畫圈操作方式上，在界面教育我們依舊以引導(dǎo)后置攝像頭畫圈為目標(biāo)，希望給用戶帶來我們預(yù)設(shè)的驚喜感，同時(shí)我們也保留了在屏幕畫圈的用戶認(rèn)知習(xí)慣，希望畫圈這個操作既能讓用戶體會到其中的樂趣，也不要讓用戶因?yàn)樽陨淼牧?xí)慣而被拒之門外。

3. 任意門：制造驚喜，讓用戶愿意深入探索

「穿越」是世界杯運(yùn)營項(xiàng)目的核心概念，而任意門作為連接真實(shí)世界與虛擬球場的時(shí)空信道，必須制造穿越時(shí)空的驚喜感，激發(fā)用戶深入探索的興趣，后續(xù)的體驗(yàn)流程才能順利開展。

我們搜集了許多任意門的設(shè)計(jì)參考，希望創(chuàng)造極具科技感的視覺特效。為了達(dá)到理想的任意門粒子效果，最終采用了3D建模和動態(tài)貼圖的方式，搭配手Q的3D引擎進(jìn)行開發(fā)。

基本上，任意門的設(shè)計(jì)主要包含兩部分。

任意門模型

任意門包含時(shí)空通道出入口、游離粒子面片、以及火焰粒子動態(tài)貼圖層等。

受限于手Q引擎所能支持的運(yùn)算能力，同時(shí)要考慮整體CPU和GPU的資源占比，建造模型時(shí)需考慮許多限制條件，例如模型面數(shù)不能過多，避免影響效能，或是動態(tài)貼圖僅支持矩形面片等，這些限制成為還原設(shè)計(jì)的困難與挑戰(zhàn)。因此，唯有在理想設(shè)計(jì)和技術(shù)實(shí)現(xiàn)之間找到平衡點(diǎn)，才能在符合技術(shù)規(guī)范的條件下，達(dá)到理想的設(shè)計(jì)效果。

為了突破技術(shù)上的限制，我們試著去了解3D引擎的運(yùn)作原理，與工程師討論技術(shù)可行性，并由設(shè)計(jì)師快速制作3D模型供其測試效能，歷經(jīng)多次的嘗試與溝通，最終設(shè)計(jì)出符合技術(shù)規(guī)范的任意門模型。

第一版模型：粒子效果不如預(yù)期，而且沒有時(shí)空通道的感覺。

第二版模型：門洞與外圍的火焰粒子效果像是兩個獨(dú)立個體，效果不好。

最終版模型：調(diào)整門洞形狀，并擴(kuò)大外圍粒子效果的范圍，達(dá)到理想的效果。

粒子效果

粒子效果是任意門最吸睛的部分，也是形塑空間感不可或缺的要素。接續(xù)前述的模型設(shè)計(jì)，粒子效果便是透過模型面片的動態(tài)貼圖，實(shí)現(xiàn)絢麗的視覺特效。粒子效果分為兩個層次，一是主視覺的火焰粒子效果，由內(nèi)圈到外圈呈現(xiàn)白－藍(lán)－紫的顏色過渡，產(chǎn)生向外發(fā)散、流動的動態(tài)效果；二是營造氛圍、塑造體積感的游離粒子。

動態(tài)貼圖的每秒幀數(shù)（FPS）、圖片分辨率、文件大小等，皆會影響最終呈現(xiàn)的視覺效果。由于手Q引擎3D渲染的能力有限，導(dǎo)致每秒幀數(shù)和圖片分辨率兩者必須有所取舍，亦即每秒幀數(shù)提高，圖片分辨率必須降低。因此，為了呈現(xiàn)最佳的粒子效果，必須找出最合適的參數(shù)設(shè)置，讓粒子的清晰度與動態(tài)效果，不至于受限于運(yùn)算能力而大打折扣。

小結(jié)

除此之外，本次采用了 ARKit技術(shù)，允許用戶透過走動的方式，穿越任意門走進(jìn)360°全景球場。為了讓用戶感興趣，愿意走進(jìn)球場中，任意門的設(shè)計(jì)，能讓用戶透過門洞窺視球場的狀況，并且隱約地聽見觀眾的歡呼聲，借此吸引用戶向前一探究竟；而當(dāng)用戶進(jìn)入球場后，也能從門洞看到原本的真實(shí)世界，仿佛真的穿越至另一個空間，置身在真實(shí)的球場中。

4. 360°全景球場：創(chuàng)造身臨其境的沉浸感

給用戶第一人稱視角

為了增益用戶的參與感，使其有著身臨其境的感受，我們采用第一人稱視角的設(shè)計(jì)。當(dāng)用戶穿越至球場時(shí)，可以任意旋轉(zhuǎn)手機(jī)角度，360°環(huán)景觀看球場全貌，感受加油聲此起彼落的氛圍，也能從大屏幕看見歡迎自己入場的信息。與此同時(shí)，用戶身處的位置也刻意安排在球門前，雙方正在等待角球踢出的時(shí)刻，球員正在身旁走動、卡位，由此更增添了臨場感，仿佛置身在真實(shí)球場一般。

考慮到手機(jī)屏幕的視角局限性，360°全景中關(guān)鍵的角色與對象，盡可能在單一屏幕呈現(xiàn)，無須用戶旋轉(zhuǎn)過多的角度，即可掌握劇情內(nèi)容與信息全貌。除了考慮對象之間的位置關(guān)系，攝像機(jī)與角色之間的距離，也是影響屏幕可視范圍的關(guān)鍵因素。最終皆需在手機(jī)中觀看效果，調(diào)整至最佳的觀景視角。

運(yùn)用鏡頭走位，讓用戶跟隨劇情安排

在劇情安排上，可分為兩部分。第一部分，用戶作為參與者，隨著比賽的進(jìn)展和隊(duì)友在場上奔跑。用戶加入球賽后，會成為QQ全明星隊(duì)的1員，為了增加比賽的可看性和沖擊性，我們模擬了一個足球故事橋段：隊(duì)友攔截?cái)撤竭M(jìn)攻時(shí)的傳球，接著快速帶球推進(jìn)至球場另一端，但遭遇敵方鏟球犯規(guī)，我方球員倒地，最后裁判吹罰任意球。

配合這段劇情的鏡頭走位（用戶視角），在設(shè)計(jì)上也做了巧妙的安排，用戶會跟著截球隊(duì)友一起移動，目睹截球瞬間并參與反擊。為了避免用戶因旋轉(zhuǎn)手機(jī)而錯過劇情，若用戶視角離開球時(shí)，手機(jī)屏幕會出現(xiàn)向左看/向右看的文字提示，讓用戶能立即掌握球的位置，以及球場上正在發(fā)生的劇情故事。

第二部分劇情，用戶擔(dān)任主罰的角色，親自罰踢任意球。此處的劇情皆為固定視角鏡頭，主要是為了讓用戶聚焦在這段劇情轉(zhuǎn)折：我方獲得任意球機(jī)會，而這個重責(zé)大任將交給用戶來執(zhí)行。劇情提示也會呼喚用戶名，「xxx，關(guān)鍵的罰球靠你了」，以此增加用戶與比賽的聯(lián)結(jié)性。

第一部分：360全景劇情

第二部分：固定視角劇情

任意球交互設(shè)計(jì)

到了罰射任意球的階段，用戶可依據(jù)滑動屏幕的軌跡和角度，射出左中右三種不同的球路。考慮項(xiàng)目的開發(fā)時(shí)間和成本，我們不以開發(fā)游戲?yàn)槟康娜ブ谱魃淝蚪换ィ瑳Q定采納視頻銜接的方式，根據(jù)用戶手指碰觸屏幕的起點(diǎn)和終點(diǎn)之間向量關(guān)系，播放不同球路的射門視頻。

然而，視頻銜接的方案存在缺點(diǎn)，由于球無法跟隨滑動軌跡去移動，缺少實(shí)時(shí)的回饋。為了改善這個問題，我們添加了滑動軌跡的視覺反饋，增強(qiáng)用戶的操控感知，同時(shí)，踢球的瞬間，手機(jī)也會隨之震動，以此豐富用戶的感官體驗(yàn)。

進(jìn)球后會播放精彩回放，從不同角度觀看進(jìn)球的過程，最后一幕是隊(duì)友興高采烈地向前奔來，接著畫面轉(zhuǎn)場過渡，生成QQ足球快訊的個性化報(bào)紙。

配音與音效

除了劇情和鏡頭語言，配合故事線發(fā)展的配音與音效亦十分重要，聲音對于形塑球場的真實(shí)體驗(yàn)，扮演了舉足輕重的角色。

為了營造實(shí)況轉(zhuǎn)播般的臨場感，每個劇情環(huán)節(jié)都搭配了專業(yè)的播報(bào)員，針對賽況進(jìn)行解說，例如用戶穿越至球場時(shí)，立即播報(bào)歡迎用戶上場的信息，或是隊(duì)友截球，以及隨即發(fā)起進(jìn)攻的轉(zhuǎn)折點(diǎn)，透過語調(diào)和聲量的抑揚(yáng)變化，傳達(dá)緊張刺激的比賽氛圍。

另外，球場上不可缺少的，便是觀眾的加油、吶喊和鼓噪聲，加上球員奔跑、踢球和喘氣的聲音，這些音效彼此之間的堆棧與錯落，除了要配合劇情演進(jìn)與場上變化，體現(xiàn)球場當(dāng)下的狀況，也需反映球場觀眾的情緒起伏，比方說屏氣凝神等待射球的那一刻，轉(zhuǎn)瞬間球破網(wǎng)而入，全場歡聲雷動，或是球員盤球殺入禁區(qū)，即將射入致勝一球，卻被敵方犯規(guī)功虧一簣，這些情緒的轉(zhuǎn)折點(diǎn)，透過聲音的操弄，有時(shí)比起視覺更具感染力，更容易讓用戶沉浸在比賽氛圍中。

整體而言，呼應(yīng)本次項(xiàng)目要傳遞給用戶的價(jià)值，希望讓用戶在世界杯這個體育盛事有參與感。因此，我們運(yùn)用虛擬現(xiàn)實(shí)的技術(shù)，打造一個高度仿真的球場，透過第一視角的運(yùn)用，配合劇情的走向，讓用戶從在場上奔跑的觀者，轉(zhuǎn)換為關(guān)鍵的任意球主罰者，像是親身參與了一場足球比賽。

5. 個性化內(nèi)容，讓用戶愿意分享

魔法報(bào)紙將用戶推向榮耀的巔峰

我們將QQ-AR世界杯活動的整個體驗(yàn)流程閉環(huán)理解成一則故事。故事的主角就是用戶，用戶從畫圈、穿越來到世界杯球場，化身成為征戰(zhàn)賽場的1名球員，在賽事正值膠著時(shí)，用戶一腳飛起，射進(jìn)決勝的一球。這一刻，所有的榮耀與光輝都集中在用戶身上，這一刻，就是用戶的主角時(shí)間、巔峰時(shí)刻！

那么，設(shè)計(jì)如何才能將這一刻的榮耀記錄下來，促成用戶主動分享，推動活動更廣泛的傳播，讓更多的用戶愿意參與到活動中來呢？

我們采用了「報(bào)紙頭條」這一形式來加強(qiáng)、放大用戶的榮耀感：用戶在綠茵場上以關(guān)鍵一球逆轉(zhuǎn)賽局時(shí)，就迅速登上了各大媒體的頭條。報(bào)紙頭條這一形式，不僅能記錄下這一傳奇瞬間，還能放大用戶的主角光環(huán)，使之得到極大的心理滿足。我們把用戶從手勢畫圈，進(jìn)入賽場到射出關(guān)鍵一球的精彩瞬間錄制了下來，呈現(xiàn)在報(bào)紙上，就像哈利波特里的魔法報(bào)紙一樣神奇。

為了塑造置身其中的真實(shí)感，報(bào)紙的設(shè)計(jì)完全遵循現(xiàn)實(shí)世界中報(bào)紙的規(guī)則：設(shè)計(jì)運(yùn)用了紙張的質(zhì)感，看起來像一份真正的報(bào)紙擺在了桌面；采用報(bào)紙常用的柵格排版，也就是常說的「豆腐塊」設(shè)計(jì)；大字號的標(biāo)題，具備足夠的視覺沖擊力，并第一時(shí)間將用戶的名字暴露出來，抓住人們的眼球；而在非核心區(qū)域，為了讓信息不脫離用戶，則將用戶與好友（按照親密度篩選）放置于同一事件中，挑起PK，通過這種方法來制造話題，碰撞火花，提高分享意愿。

多樣報(bào)紙給用戶個性化的表現(xiàn)

用戶對于千篇一律，千人一面的事物，難以提起對事物的好奇心，而我們的活動也是如此，如果用戶參與的結(jié)果相差無幾，分享意愿也會大打折扣，特別是95后、00后用戶，更加期望獨(dú)特性。

在賽場上，為了彰顯自家球隊(duì)精神，每支球隊(duì)都指定了代表色，將其運(yùn)用在徽章、球衣等地方。眾所周知，巴西國家隊(duì)的傳統(tǒng)球衣是熱情洋溢的黃綠色搭配，猶如狂野的熱帶雨林；阿根廷是其國旗的配色：淺藍(lán)和白色作為主色，搭配精致的金色；另一支赫赫有名的球隊(duì)曼聯(lián)因其俱樂部徽章是一只手持三叉戟的紅色魔鬼而被稱為「紅魔」：每次曼聯(lián)出場，球場都會變成紅色的海洋。

因此，我們選擇了巴西、阿根廷、法國、中國等15支球隊(duì)，搜集其徽章、球衣等標(biāo)志物，從中整理出這15支球隊(duì)的顏色組。但問題隨之而來，當(dāng)我們把這15支球隊(duì)的顏色組放在一起時(shí)，五花八門，非常混亂，而且普遍非常鮮亮，塑料感過強(qiáng)。因此，我們給明度和純度設(shè)置了一個范圍，一邊對每個顏色組進(jìn)行逐一調(diào)整，一邊進(jìn)行整體觀察把握，最后達(dá)到和諧統(tǒng)一的視覺效果。此外，還整體調(diào)節(jié)了圖片、顏色塊的亮度，以表現(xiàn)紙張?zhí)赜械碾s質(zhì)感和啞光感。這樣，我們就獲得了15組顏色組，配置到報(bào)紙的名稱、頭版標(biāo)題、日期等地，設(shè)計(jì)出了15種不同的報(bào)紙，與15支球隊(duì)一一呼應(yīng)。

在球員和球迷心中，一件有著獨(dú)特?cái)?shù)字的球衣，不僅僅是簡單的一件衣服，而是一個象征，它隨著球員征戰(zhàn)南北，承載著賽場上的所有的歡喜與悲愁，光榮與失落。譬如梅西的10號球衣，已經(jīng)是綠茵場上獨(dú)特的標(biāo)志了，受到了球迷們的熱烈追捧。我們在報(bào)紙上設(shè)計(jì)了不同數(shù)字的球衣，希望賦予用戶一個屬于他自己的獨(dú)特?cái)?shù)字，延續(xù)穿越賽場上的沉浸感。當(dāng)用戶看到他喜歡的球隊(duì)顏色和獨(dú)特?cái)?shù)字時(shí)，能會心一笑，即達(dá)到了我們的設(shè)計(jì)目標(biāo)。

三、反思：好的設(shè)計(jì)是權(quán)衡眾多條件下的最佳方案

綜上所述，本項(xiàng)目的幾個關(guān)鍵環(huán)節(jié)中，設(shè)計(jì)側(cè)會面臨多方面的挑戰(zhàn)，用戶的學(xué)習(xí)成本、手機(jī)系統(tǒng)的差異、3D計(jì)算的性能要求、網(wǎng)絡(luò)流量限制、體驗(yàn)的場景、活動的時(shí)長等。

為了在眾多條件的約束下取得最佳方案，我們也對最初設(shè)計(jì)方案進(jìn)行了特別的調(diào)整，例如對于沒有AR能力接口的機(jī)型，會有倒計(jì)時(shí)自動穿越的特性；為了提高畫圈的成功率，也支持在屏幕畫圈和自動糾正；根據(jù)不同性能的機(jī)型，對預(yù)加載時(shí)機(jī)、畫質(zhì)效果也做了多種配置。為了讓用戶更快參與進(jìn)劇情發(fā)展，靜態(tài)機(jī)位也調(diào)整為動態(tài)追蹤…...

我們想要傳達(dá)的，并非一味的堅(jiān)持最初的「完美」設(shè)計(jì)，而是身為設(shè)計(jì)師必須了解，設(shè)計(jì)方案在眾多條件耦合下的可行性，尤其是背后的技術(shù)風(fēng)險(xiǎn)與時(shí)間成本也是不可忽視的一環(huán)。

引述設(shè)計(jì)思維（Design Thinking）的觀點(diǎn)，一項(xiàng)產(chǎn)品或服務(wù)必須兼顧用戶需求（Desirability）、技術(shù)可行性（Feasibility）與商業(yè)可行性（Viability）。設(shè)計(jì)師必須運(yùn)用設(shè)計(jì)方法，在滿足科技和商業(yè)可行性的前提下，滿足人對產(chǎn)品或服務(wù)的需求。由此可見，一個好的設(shè)計(jì)是權(quán)衡眾多條件下的最佳方案，設(shè)計(jì)師面對條件限制在所難免，不如將限制視為思考問題的出發(fā)點(diǎn)，提供更完善的解決方案。

△ 點(diǎn)擊查看完整視頻

四、展望

「QQ-AR穿越賽場」除了為用戶帶來耳目一新的感官互動和印象深刻的體驗(yàn)，更重要的意義在于打破僅靠單項(xiàng)技術(shù)而難以持續(xù)商業(yè)化的格局。通過巧妙結(jié)合手勢識別、AR、360度全景視頻技術(shù)，在用戶的本能層面帶來了超出預(yù)期的驚喜，為連續(xù)的行為體驗(yàn)構(gòu)造了合理性，從而創(chuàng)造了更有吸引力和持續(xù)性的互動場景。

判斷一項(xiàng)技術(shù)可否持續(xù)商業(yè)化的基本要求在于是否可復(fù)用與拓展。「QQ-AR穿越賽場」 的本質(zhì)是在真實(shí)環(huán)境下創(chuàng)建可沉浸式互動場景的體驗(yàn)，拋開「足球」的元素，這種創(chuàng)新的體驗(yàn)還可以在「空間維度」、「時(shí)間維度」和「社交維度」發(fā)掘更多有效契合用戶訴求的互動場景。

空間維度：打破物理空間的隔閡，除了可以穿越到球場，也許還可以穿越到動物園，城市上空，甚至三次元…...

時(shí)間維度：回溯昔日是人類的本能，通過地理位置分析，可以讓用戶以最直觀的方式「瀏覽」所在位置的歷史。既可用來展示滄海桑田，也可以沉浸的方式體驗(yàn)分享者留下的快樂。

社交維度：跨入穿越門，迎接用戶的既可能是一次扣人心弦的組隊(duì)探險(xiǎn)，也可能是一場好友精心策劃的生日Party。以AR/VR作為賣點(diǎn)的產(chǎn)品所遇到挑戰(zhàn)在于新鮮內(nèi)容的有限性，隨著新鮮感的下降，持續(xù)沉浸其中的用戶也會隨之流失。讓用戶持續(xù)保持對產(chǎn)品新鮮感的手段之一就是引入社交元素，通過「任意門」拉近彼此的距離，伴隨著「穿越空間」的強(qiáng)烈儀式感和好奇心，以社交形式為渠道創(chuàng)造的互動更能超出用戶預(yù)期。

從AR傳遞火炬、AR紅包、到AR送祝福、AR穿越賽場，手機(jī)QQ持續(xù)試水前沿技術(shù)，探索用戶的應(yīng)用場景，不斷觸碰到體驗(yàn)場景與技術(shù)能力最佳結(jié)合的極限。伴隨著技術(shù)能力的迭代升級，手機(jī)QQ不僅為用戶帶來耳目一新的互動體驗(yàn)和社交玩法，連接用戶的方式也逐漸從量變進(jìn)化到質(zhì)變，基于圖像識別、空間探測與視頻互動的能力耦合，未來會發(fā)掘出更多創(chuàng)新的應(yīng)用場景。

「騰訊ISUX?實(shí)戰(zhàn)案例」

• 《火爆全網(wǎng)的天天P圖“前世青年照”是怎么設(shè)計(jì)出來的？》
• 《高手怎么做設(shè)計(jì)？來看騰訊文檔背后的品牌設(shè)計(jì)過程！》
• 《上億人使用的QQ iPad版「斗圖神器」原來是這么設(shè)計(jì)出來的！》
• 《揭秘完整過程！人氣過億的QQ主題是如何設(shè)計(jì)出來的？》