一鏡到底——手遊互動中的情景化設計

文 | Enrico
騰訊互動娛樂 互動設計師

導語

近些年，越來越多爆款手遊摒棄了純介面的設計而選擇用情景為載體將世界觀元素和故事性融入到了整個的遊戲體驗當中，將玩家引入遊戲世界，塑造了一種全新的深度體驗。世界觀、代入感、場景化設計、3DUI成為了行業內的高頻詞彙。如何去認識這一設計現象背後的原則，又如何在具體的設計中運用做出高品質的手遊呢？這是這篇文章想和大家探討的話題。

一鏡到底是一種影視藝術的表現手法，旨在表達更豐富的內容、更流暢的畫面、更強的臨場感。在手遊中實現一鏡到底，會遇到伺服器延遲和載入等等硬核打斷因素，所以這裡指的一鏡到底，並不是真正意義上的電影長鏡頭，而是通過世界觀包裝+鏡頭動畫的情景化設計來保持沉浸、連續、強代入感的遊戲體驗。

一、世界觀導向的情景化設計

（一） 情景化設計的概念


要研究世界觀包裝的設計現象，首先需要界定相關的概念，業界對於這一現象的不同方面有諸多稱呼，如世界觀帶入、場景化、3D UI、沉浸感等等。我們不難發現，這些描述似乎是在對同一設計現象不同方向上的解讀，它們都是一些熱門遊戲的成功標籤。


當我們將世界觀帶入、場景化、3D UI、沉浸感這四個方面串聯在一起時，它們對遊戲世界觀和故事情節起到了直觀的塑造作用，並最終觸發玩家的情感共鳴。根據上圖金字塔框架，本文將這一設計現象界定為情景化設計。

為什麼用情景化這個詞呢？我們從情景化的學術定義來看，它是基於人類自身的情感觸發，運用設想、運籌、計劃創造出能使人產生情形、景象的物品而進行的創造性活動，這與本文提及的設計現象是同源的。


因此可以界定世界觀導向的情景化設計：即通過找到遊戲抽象行為與世界觀元素、場景、情節之間的關聯性，而將介面的設計進行世界觀包裝，並使玩家產生情感共鳴的設計方法。這裡說的情感共鳴並不一定侷限於感動玩家，即使微弱地觸及到情懷層面產生共鳴也會得到非常好的效果，比如讓玩家會心一笑的圈內梗。

這樣闡述概念可能過於抽象，我們先舉個2016年上線的經典手遊《火影忍者》作為“栗子”，大家應該都很熟悉。


整個大廳是經典角色俯覽木葉村的情景，多數的系統入口都作為木葉村中的建築，並大量使用了刃具、忍法貼等世界觀元素，塑造出玩家熟悉的忍者世界，使IP受眾產生了共鳴。

（二） 情景化設計的特點

那麼情景化設計的有哪些特點呢，即為什麼要做這樣的設計？

1.強代入感-世界觀帶入，引人入勝


新遊《陰陽師：百聞牌》所有的系統和入口都有機地結合在“蜃氣樓”這一概念內，可愛妖怪與和風的建築塑造出光怪陸離的妖怪世界，使用遊戲的不同系統猶如在蜃氣樓內遊玩一般，有非常強的代入感。

2.使用者更易學習&認知-空間記憶，符合生活經驗


《輻射：避難所ONLINE》的大廳，可以觀察到避難所裡每個建築都會對應一個系統。所以玩家在尋找的時候，即使沒有快捷入口，也可以通過空間記憶找到對應的建築入口。

3.強表現力和故事性-突出IP風格，視覺美術更易發揮


在《永珍物語》中，整個遊戲系統被設計成一本童話書的情景，無論是副本或者成長系統等都是在這一概念基礎上進行的擴充，童話和紙藝的結合不但能突出IP世界觀，更有自己獨特的設計和美術風格作為遊戲的關鍵記憶點。

（三） 情景化設計的原則

在我們涉及創作方法之前，首先要探討一件事情，那就什麼樣才是好的情景化設計？即好的情景化設計應該滿足哪些原則？

1.世界觀合理性原則：


在情景化設計的過程中，假如情景脫離了世界觀的合理性，便會讓玩家潛意識中感到違和。業內其樂融融，因此還是舉一個虛擬的例子，如果想設計一個生存遊戲的匹配系統的情景，左圖篝火其實是一個比較合適的情景，因為篝火即代表了聚集，也符合生存條件簡陋且環境依然凶險的生存遊戲世界觀。而右圖雖然是簡易破舊的壁爐，也代表聚集，但是仍然是有一種定居感和安全感，相對不太符合生存遊戲的世界觀。

2.概念統一性原則：


《AC Rebellion》作為刺客信條IP的手遊，從主場景到各個系統的介面都是圍繞著刺客祕密基地的概念來進行擴充套件，每個系統都是基地內的一個特殊功用的房間。其目的是保持各個系統之間的聯絡性以及與世界觀的統一性，使玩家保持在一個連續統一的浸入式體驗中。

3.故事性原則：

情景化設計作為一個很好的載體，當設計師在搭建一個完整概念後，它是需要傳達世界觀設定或者故事情節的，而非簡單地將遊戲世界觀中所提煉的元素進行堆砌，甚至一個輕度巧妙的設計就可以傳達相當多的內涵。《非人學園》舉報系統設計成一個校園向風紀委舉報的概念，點選舉報項，會風趣地用磚頭敲打角落認錯的傢伙，風紀委的裁決給舉報懲罰的遊戲行為注入靈魂。


4.適度性原則：

最後一個是適度性原則，也是最為重要的一個。這裡提出這一原則也是鑑於個人多年的工作實踐，也是區分老司機和萌新的關鍵所在。許多萌新同學在實踐情景化設計時，往往因為對取捨與輕重的判斷力不足，最後整個設計顯得用力過猛，反而適得其反。


如上圖，適度性原則落地到實際的設計過程中需要注意的地方，並且它們共同決定了情景塑造真實程度的引數：真實度 ，我們按照上圖所列的關鍵詞逐一進行講解：

a.易用性：學過體驗設計的同學都應該清楚這個概念，這裡提到它的原因是在進行情景化設計的過程，我們可能會對介面的易用性造成干擾，所以要將這種DEBUFF控制合理的範圍內，不要影響玩家的操作體驗。


如上圖《明日方舟》和《戰雙帕彌什》中的大廳都運用了3DUI的設計來將介面和場景進行融合並模仿AR情景，符合其世界觀的科技設定。可以看到介面上這麼多的入口採用透視手法後，互動面積在接近於透視滅點的地方有顯著減少；而在遠離滅點的時的尺度會被放的很大，導致右上角部分是有進行裁切的，適配平板和寬屏時也會遇到相應的困擾，這種設計需要精確地控制以避免對易用性造成較大影響，這兩款遊戲就處理的很好。

b.審美疲勞：設計師有時做了一個很有趣的情景化設計，但是當這個情景在遊戲中的使用頻率較高時，真實度越高，設計越複雜越容易厭倦。


在《輻射：避難所ONLINE》手遊中，因為是核戰過後的廢土世界觀，同樣保留了輻射IP的經典元素：齒輪狀的避難所大門。從上圖可以看到，整個登入到進入避難所內部的過程是開啟避難所大門的情景，是一個非常好的情景化設計。美中不足的是登入介面使用頻率非常高，玩家在初期登入時會感到驚豔，而當每次登入都要播放這段“漫長”的動畫時，可能會出現玩家的新鮮感和耐心逐漸消失，即使右下角有動畫跳過按鈕，但仍需要玩家每次進行點選，所以可能更理想的做法是加入播放動畫與否的單選框，來優化老玩家的登入體驗。

c.學習成本：這個詞相信大家都不陌生，中國遊戲市場發展到今天，許多同品類的遊戲行為都有固定正規化，而當你想要用新穎的方式打破玩家固有思維，又希望降低學習成本，就需要用到記憶對映的方式。


比如《陰陽師：百聞牌》繪製法陣解封密卷的抽卡方式，熟悉二次元傳統抽卡套路的人在進到抽卡環節時，需要研究了一下說明文字試著劃一下才知道如何操作。但是《陰陽師：百聞牌》的畫符抽卡設計顯然是比較成功的，雖然玩家需要第一次使用的習得過程，但是繪製法陣本身與影視作品中的記憶是類似的，因此玩家很快可以將這一記憶和繪製法陣的抽卡方式對應上，這種在玩家腦海裡尋求記憶印射的方式可以有效降低情景化設計學習成本方面的負面影響。

d.開發時間、技術和效能的平衡：

這也是許多設計同學所頭疼的地方，當一個精彩方案擺在面前，說不清楚需要哪些資源，如何推進落地，風險有哪些，預期成果是怎樣，現有資源下如何取捨，各種不確定，顯得底氣不足，無法獲得認可，最終被迫改成市面上千篇一律的保守方案。


如上圖，顯然高真實度的情景化設計需要的資源很多，但是我們追求的是整體情景概念的表達，而表達方式是多種多樣的，依據現有的資源而定，並非只有高真實度的表達方式才是好的設計。對於資源多的專案，每個系統都可能非常直觀地表達，可以根據風格選用3D或2D表現形式；支援少的專案，可以著重表達重要的系統，比如匹配流程、抽卡等等，如果沒有足夠的3D支援，你也可以選擇2D+動畫的方式模擬出場景+鏡頭的表現方式；甚至一個簡單的視覺元素+動畫也能有效傳達設計師的情景概念設定，讓玩家感受到誠意，例如在《非人學園》匹配成功後，選擇低真實度的飛天小火車動畫作為loading UI就足以表達乘坐列車登上貓島競技場進行戰鬥的情景概念，而沒有盲目使用3D的表達方式。


講了這麼多世界觀導向情景化設計的原則，是要提醒大家情景化設計雖好，但有很多方面要注意，不要盲目堆砌，敢取捨，知輕重，套路千萬條，務實第一條。


（四） 情景化設計的模型

梳理完情景化設計的概念，特點以及原則，接下來我們來講述情景化設計的方法模型。如果想實現之前提過的金字塔結構的逐層目標，那麼就需要的用到情景化設計的模型。這個模型分為三個部分：情景的整體概念規劃，系統情景的概念設計和情景的連線，該模型是從實踐的角度對情景化設計金子塔進行的解析。


1. 情景的整體概念規劃：


情景概念的構思是一個從巨集觀到微觀的過程，通過逐層塑造達到情景化設計的目標。那麼首先要對情景概念進行整體的規劃，這是為全盤佈局的一步，為後續情景概念界定範圍，從梳理過後的世界觀元素出發，找到具有世界觀特色的概念，並且對預計包含的系統進行歸類和分組，預估現有概念是否可以容納規劃的系統，是否具有延展性，便於後續具體情景概念的設計。這個階段要敲定主情景和概念方向，各系統的情景可以只是一個模糊的草稿。


以《AC Rebellion》手遊為例，試用模型進行分析。作為一個刺客信條IP的手遊，玩家對其世界觀中ANIMUS系統，刺客和聖殿騎士，伊甸碎片應該都不陌生。根據手遊的主線故事內容，將整個遊戲情景規劃為刺客組織的一個祕密基地，將遊戲的玩法系統都一一對應基地中的不同房間佈置和角色行為，進行了非常細緻的情景化設計，與此同時關卡系統，個人資訊與郵箱等基礎系統和商業系統由於展示資訊較多，因此使用了世界觀中ANIMUS系統模擬出的數字虛擬空間作為通用的情景，輕重取捨得當，是一個比較好的整體概念規劃案例。

2.系統情景的概念設計：


系統情景的概念設計已經切分到獨立的系統需求，可以參照上圖的模型進行構思和設計。比如需求是要做一個公會系統，首先我們要將這個遊戲行為做一個定義，公會是玩家的弱社交系統，是玩家聚集並贏得榮譽及獎勵的弱共同體，再往下拆分，公會的招聘、組織、活動等行為都是要進行本質的詮釋。完成這一需求本質溯源後，需要你努力地在世界觀的符號，行為和劇情中尋找與之同步的契合點，如果你有幸找到了那個關鍵點，你便找到了與世界觀相符的行為和符號，並以此構思情境概念，在此基礎上你也可以進一步融入傳達情感共鳴的情感觸媒。


以《陰陽師：百聞牌》的抽卡系統為例，試用模型進行分析。原始需求是抽卡系統，遊戲行為是抽取式神卡牌，而在日本陰陽師文化的元素中有密卷的元素和解封的行為，也就是說找到了世界觀對應的行為和元素，所以整個抽卡系統可以包裝成密卷解封法陣的情景，而玩家自由繪製法陣的互動方式就是我們方才所提到的的情感觸媒，使玩家的抽卡行為和記憶中IP元素與行為產生共鳴。

3.情景的連線：


這個部分主要講述當你有一個個獨立的主情景和分情景，如何保證玩家在其中游覽和互動的流暢體驗？那就要使用到鏡頭動畫了，不但可以保證體驗的連續性，更可以利用空間方位提升可用性，甚至帶來更強的氛圍和故事性。

a.自由移動 & 非自由移動

從玩家體驗的角度來說，與情景的互動方式可以分為自由移動和非自由移動兩個類別。


先講自由移動，無論是傳統RPG還是開放世界遊戲，玩家通過自由的移動在不同情景之間穿梭，這種情況一般是沒有大廳的，取而代之的是主城，所以從玩家的角度來說，看似不需要鏡頭動畫，但實際上仍然存在於細節處，例如當玩家與NPC發生對話時會有鏡頭拉近的過程，開啟NPC商店的頁面也會出現鏡頭動畫。對於這種型別的情景的互動方式，鏡頭&轉場動畫用於將自由移動狀態和互動狀態進行連線。


與之對應，非自由移動一般是有大廳的，也是多數手遊採用的形式，如之前介紹的經典手遊《火影忍者》，它的主場景就是一個橫軸的木葉村，而其中有許多玩法和系統的入口，在玩家在各個系統之間切換時會有連線情景的動畫。

b.組織介面的常用鏡頭動畫

講完自由移動 & 非自由移動的兩種情景互動方式的不同，我們來看下游戲設計的實際過程中，我們會常用到哪些基礎鏡頭動畫用以連線情景。

鏡頭平移-並列關係，常表達線性流程


一般來說鏡頭平移多用於表達並列關係，延續性的線性流程。這裡我所列舉的例子就是《噴射戰士2》中的角色建立介面，整個建角都是在一個虛化情景內進行平移的，給到玩家一個順暢的體驗。

鏡頭推拉-層次關係的切換


推拉的手法通常用於表達空間或者層次的關係，例如《命運2》遊戲中的星球具體地圖，以及各個星球之間的太空地圖切換，在用推拉的鏡頭來表達出星球地表地圖和太空地圖之間的層級關係，同時也符合物理空間的關係。

鏡頭環繞-包含關係，用於詳細內容的解釋


第三個較為常見的手法便是鏡頭環繞，它基本用於在一個特定情景中，對組合體的不同子物件來進行詳細的解釋。最常見的便是裝備介面，如在《全境封鎖2》中，玩家在編輯不同裝備欄時，鏡頭會配合玩家與UI的互動進行環繞展示。

鏡頭跟隨-情景與資訊的延伸


最後一種常用鏡頭就是跟隨，當全部資訊超過手機螢幕的承載範圍時，就需要通過鏡頭來對情景進行延伸，這就和許多電影中主角穿越整個鬧市追擊反派是同樣的道理，即使螢幕的範圍有限，也能將巨幅鬧市進行了充分的展示。在這裡我所舉的例子是《PERSONA5》的戰鬥結算介面。我們可以看到，由於遊戲本身UI的風格所限，單一場景沒辦法將所有資訊量進行展示，所以整個結算獎勵的過程是通過角色奔跑+鏡頭跟隨來呈現的，既將資訊都進行了完整呈現，並且主角會從在奔跑的最後回到原先大地圖的位置，可以說做到情景之間的無縫連線。

我們已經瞭解了基礎的鏡頭動畫，在具體應用的時候要注意鏡頭動畫的組合運用，輔助表達邏輯層級以提高可用性，同時也要注重鏡頭本身的美感，由於篇幅關係這裡就不贅述了，讀者可以通過下面的例子體會一下。

二、情景化設計在專案中的應用

這一部分我們通過具體的專案案例，介紹情景化設計的流程和前面所述內容的綜合運用。

關於情景化設計的流程，首先要對IP的世界觀進行分析提取元素，接著要梳理好預計的系統結構，在此基礎上在進行整體概念的設計，敲定方向之後進行每個系統的概念設計和實現，最後調優測試上線。


《CALL OF DUTY MOBILE》使命召喚手遊，作為一款騰訊與動視聯合研發的手遊，海外上線之後獲得了非常好的成績，超140個國家與地區App Store手游下載榜首，超90個國家與地區App Store跨平臺暢銷榜TOP10，榮獲2019 TGA：BEST MOBILE GAME，GOOGLE PLAY 2019年度最佳遊戲。作者作為該專案的互動設計師，就以此為例簡述情景化設計的過程。

STEP1.世界觀分析&提取元素


首先，因為《使命召喚》手遊屬於IP移植，所以設計師要做的就是從原作的內容中提煉出比較有代表性的元素來形成IP的世界觀元素庫。這裡我們所碰到的第一個挑戰就是《使命召喚》的歷代作品背景是以時間線來延伸的，從二戰，現代，近現代到未來有非常多的系列，世界觀各不相同。而從歷代的銷量來看，除了起家的二戰系列，現代時間線的遊戲系列是玩家最為認可的，因此FPS品類的玩家會有更大概率玩過這兩個系列的作品，所以以現代時間線為基準進行世界觀元素的提煉更容易觸動玩家。


STEP2.梳理系統結構


在這一步要做的是將規劃好的系統玩法進行預先梳理和分類，並預留一定的空間（策劃改需求），方便我們下一步情景的設計。

STEP3.情景的整體概念設計


根據世界觀元素和上面所梳理的系統和玩法，與策劃、美術經過探討達成一致，將系統情景分為了室外（戰場）與室內（基地）兩個方向。Multiplayer，Zombie，Battle Royale三大模式的匹配大廳，大廳，揹包等主戰鬥流程上的系統，都歸類到了戰場方向，而其他系統歸類到基地方向，並在情景的光照、元素佈置上進行了差異化設計。


如圖所示，在大廳、組隊、揹包介面所呈現的都是戰場情景的不同部分，這一部分非常值得重點刻畫，所以採用了真實度較高的3D表達方式；其它系統則是基地內的不同情景進行串聯，由於非戰鬥系統呈現的資訊一般比較多，以突出資訊為主，所以整體處理相對戰場是一個較弱的情景設計，以基地內不同房間作為情景，而這部分採用2D為主的表達方式。

STEP4.系統情景的概念設計

這裡我們拿揹包(LOADOUT)系統來舉例。原始需求是不同模式裝備的裝配，遊戲行為是戰鬥前的裝備調整，在世界觀元素庫中進行檢索後，會發現這與特種部隊的戰前檢查是相吻合的，檢查武器是否正常然後才會介入戰鬥。


根據如上分析這裡設計為戰前修整的情景，Multiplayer模式的揹包系統選取了地圖城鎮外圍的情景，Zombie模式選取了營地篝火，Battle Royale選取機場周邊。在具體的裝備更換介面，為了避免出現更換武器時憑空掏出一把M4的世界觀合理性“BUG”，將更換裝備的子情景設定成戰前修整情景中的武器箱，通過鏡頭縮放進行連線，並且每個模式的武器箱都有自己模式的特色。


為了給程式和美術提供實現參考，同時也設計了鏡頭動畫的DEMO用於連線大廳-系統和系統內部的不同情境。

三、結語

文章的最後，解答一下設計、美術和策劃同學在同名內部課多次提出的問題：

1.情景化設計需要具備什麼樣的能力？

首先，你需要對遊戲整體的系統、設計、美術有足夠深入的認知；第二，你要非常熟悉專案的世界觀，並且能夠依據現有系統提出具備整體性且嚴謹適度的概念設計，同時夠提取關鍵元素符號；第三，你需要具備一定的全域性觀，站在產品的高度上對整體的設計進行權衡和取捨；第四，當然需要具備紮實的美學素養；第五，熟悉引擎實現效果的邊界。第六，有能力橫向或向上溝通並獲取所需開發資源。

2.情景化我很想做，也嘗試過，怎麼才能推進實現？

a.自上而下地逐步推進: 情景化設計是需要較多開發資源的，那麼需要先拿出初期的嘗試，證明這個方向的價值，並提供市場研究和資料，確保獲得有效的支援。從具體研發上講，要先進行整體的概念設計，並通過高保真動態DEMO或者單個系統的精緻開發進行有效驗證，獲得認可並拿到資源。之後就是按照整體概念設計按部就班的鋪量和階段性測試，逐步優化直到上線。

b.創造良好的合作氛圍：情景化需要策劃、設計、美術、程式通力合作的，每個人對本專業的部分負責並且對彼此的專業深度有足夠信任，不跨界“指導”，創造良好的合作氛圍，才有機會推進實現情景化，雖然想法誰都可能有，但只有同時契合各專業維度規則的想法才是可實現的設計。

c.情景化設計是未來趨勢？是，而且是正在進行時！它的源頭可以追溯到2000年初，大量的PC和主機遊戲專案就已經在進行情景化設計了，直至近些年才在我國手遊行業中成為主要設計趨勢，並持續對行業產生深遠的影響。

希望讀完這篇文章的你不要“閱畢即焚”，而是能夠學以致用，在遊戲中用你的靈魂設計觸及玩家，Spark More！

來源：騰訊遊戲學院