編者按 越來越多爆款手遊摒棄了純界面的設計，而選擇通過世界觀包裝+鏡頭動畫的情景化設計來保持沉浸、連續、強代入感的遊戲體驗。本期真經閣，想和大家聊聊手遊交互中的情景化設計。
文 | Enrico
騰訊互動娛樂 交互設計師
近些年，越來越多爆款手遊摒棄了純界面的設計而選擇用情景爲載體將世界觀元素和故事性融入到了整個的遊戲體驗當中，將玩家引入遊戲世界，塑造了一種全新的深度體驗。世界觀、代入感、場景化設計、3DUI成爲了行業內的高頻詞彙。如何去認識這一設計現象背後的原則，又如何在具體的設計中運用做出高品質的手遊呢？這是這篇文章想和大家探討的話題。
一鏡到底是一種影視藝術的表現手法，旨在表達更豐富的內容、更流暢的畫面、更強的臨場感。在手遊中實現一鏡到底，會遇到服務器延遲和加載等等硬核打斷因素，所以這裏指的一鏡到底，並不是真正意義上的電影長鏡頭，而是通過世界觀包裝+鏡頭動畫的情景化設計來保持沉浸、連續、強代入感的遊戲體驗。
（一） 情景化設計的概念
[ 關于世界觀包裝的行業熱詞 ]
要研究世界觀包裝的設計現象，首先需要界定相關的概念，業界對于這一現象的不同方面有諸多稱呼，如世界觀帶入、場景化、3D UI、沉浸感等等。我們不難發現，這些描述似乎是在對同一設計現象不同方向上的解讀，它們都是一些熱門遊戲的成功標簽。
[ 情景化設計金字塔 ]
當我們將世界觀帶入、場景化、3D UI、沉浸感這四個方面串聯在一起時，它們對遊戲世界觀和故事情節起到了直觀的塑造作用，並最終觸發玩家的情感共鳴。根據上圖金字塔框架，本文將這一設計現象界定爲情景化設計。
爲什麽用情景化這個詞呢？我們從情景化的學術定義來看，它是基于人類自身的情感觸發，運用設想、運籌、計劃創造出能使人産生情形、景象的物品而進行的創造性活動，這與本文提及的設計現象是同源的。
[ 情景化設計的關鍵詞 ]
因此可以界定世界觀導向的情景化設計：即通過找到遊戲抽象行爲與世界觀元素、場景、情節之間的關聯性，而將界面的設計進行世界觀包裝，並使玩家産生情感共鳴的設計方法。這裏說的情感共鳴並不一定局限于感動玩家，即使微弱地觸及到情懷層面産生共鳴也會得到非常好的效果，比如讓玩家會心一笑的圈內梗。
這樣闡述概念可能過于抽象，我們先舉個2016年上線的經典手遊《火影忍者》作爲“栗子”，大家應該都很熟悉。
[ 《火影忍者》遊戲截圖 ]
整個大廳是經典角色俯覽木葉村的情景，多數的系統入口都作爲木葉村中的建築，並大量使用了刃具、忍法貼等世界觀元素，塑造出玩家熟悉的忍者世界，使IP受衆産生了共鳴。
（二） 情景化設計的特點
那麽情景化設計的有哪些特點呢，即爲什麽要做這樣的設計？
1.強代入感-世界觀帶入，引人入勝
[ 《陰陽師：百聞牌》遊戲截圖 ]
新遊《陰陽師：百聞牌》所有的系統和入口都有機地結合在“蜃氣樓”這一概念內，可愛妖怪與和風的建築塑造出光怪陸離的妖怪世界，使用遊戲的不同系統猶如在蜃氣樓內遊玩一般，有非常強的代入感。
2.用戶更易學習&認知-空間記憶，符合生活經驗
[ 《輻射：避難所ONLINE》遊戲截圖 ]
《輻射：避難所ONLINE》的大廳，可以觀察到避難所裏每個建築都會對應一個系統。所以玩家在尋找的時候，即使沒有快捷入口，也可以通過空間記憶找到對應的建築入口。
3.強表現力和故事性-突出IP風格，視覺美術更易發揮
[ 《萬象物語》遊戲截圖 ]
在《萬象物語》中，整個遊戲系統被設計成一本童話書的情景，無論是副本或者成長系統等都是在這一概念基礎上進行的拓展，童話和紙藝的結合不但能突出IP世界觀，更有自己獨特的設計和美術風格作爲遊戲的關鍵記憶點。
（三） 情景化設計的原則
在我們涉及創作方法之前，首先要探討一件事情，那就什麽樣才是好的情景化設計？即好的情景化設計應該滿足哪些原則？
1.世界觀合理性原則：
[ 篝火和壁爐意向圖（源自網絡） ]
在情景化設計的過程中，假如情景脫離了世界觀的合理性，便會讓玩家潛意識中感到違和。業內其樂融融，因此還是舉一個虛擬的例子，如果想設計一個生存遊戲的匹配系統的情景，左圖篝火其實是一個比較合適的情景，因爲篝火即代表了聚集，也符合生存條件簡陋且環境依然凶險的生存遊戲世界觀。而右圖雖然是簡易破舊的壁爐，也代表聚集，但是仍然是有一種定居感和安全感，相對不太符合生存遊戲的世界觀。
2.概念統一性原則：
[ 《AC Rebellion》遊戲截圖 ]
《AC Rebellion》作爲刺客信條IP的手遊，從主場景到各個系統的界面都是圍繞著刺客秘密基地的概念來進行擴展，每個系統都是基地內的一個特殊功用的房間。其目的是保持各個系統之間的聯系性以及與世界觀的統一性，使玩家保持在一個連續統一的浸入式體驗中。
3.故事性原則：
情景化設計作爲一個很好的載體，當設計師在搭建一個完整概念後，它是需要傳達世界觀設定或者故事情節的，而非簡單地將遊戲世界觀中所提煉的元素進行堆砌，甚至一個輕度巧妙的設計就可以傳達相當多的內涵。《非人學園》舉報系統設計成一個校園向風紀委舉報的概念，點擊舉報項，會風趣地用磚頭敲打角落認錯的家夥，風紀委的裁決給舉報懲罰的遊戲行爲注入靈魂。
[ 《非人學園》舉報系統 ]
4.適度性原則：
最後一個是適度性原則，也是最爲重要的一個。這裏提出這一原則也是鑒于個人多年的工作實踐，也是區分老司機和萌新的關鍵所在。許多萌新同學在實踐情景化設計時，往往因爲對取舍與輕重的判斷力不足，最後整個設計顯得用力過猛，反而適得其反。
[ 適度性原則的關鍵維度 ]
如上圖，適度性原則落地到實際的設計過程中需要注意的地方，並且它們共同決定了情景塑造真實程度的參數：真實度 ，我們按照上圖所列的關鍵詞逐一進行講解：
a.易用性：學過體驗設計的同學都應該清楚這個概念，這裏提到它的原因是在進行情景化設計的過程，我們可能會對界面的易用性造成幹擾，所以要將這種DEBUFF控制合理的範圍內，不要影響玩家的操作體驗。
[ 《明日方舟》和《戰雙帕彌什》遊戲截圖 ]
如上圖《明日方舟》和《戰雙帕彌什》中的大廳都運用了3DUI的設計來將界面和場景進行融合並模仿AR情景，符合其世界觀的科技設定。可以看到界面上這麽多的入口采用透視手法後，交互面積在接近于透視滅點的地方有顯著減少；而在遠離滅點的時的尺度會被放的很大，導致右上角部分是有進行裁切的，適配平板和寬屏時也會遇到相應的困擾，這種設計需要精確地控制以避免對易用性造成較大影響，這兩款遊戲就處理的很好。
b.審美疲勞：設計師有時做了一個很有趣的情景化設計，但是當這個情景在遊戲中的使用頻率較高時，真實度越高，設計越複雜越容易厭倦。
[ 《輻射：避難所ONLINE》登陸過程 ]
在《輻射：避難所ONLINE》手遊中，因爲是核戰過後的廢土世界觀，同樣保留了輻射IP的經典元素：齒輪狀的避難所大門。從上圖可以看到，整個登錄到進入避難所內部的過程是打開避難所大門的情景，是一個非常好的情景化設計。美中不足的是登錄界面使用頻率非常高，玩家在初期登錄時會感到驚豔，而當每次登錄都要播放這段“漫長”的動畫時，可能會出現玩家的新鮮感和耐心逐漸消失，即使右下角有動畫跳過按鈕，但仍需要玩家每次進行點擊，所以可能更理想的做法是加入播放動畫與否的單選框，來優化老玩家的登錄體驗。
c.學習成本：這個詞相信大家都不陌生，中國遊戲市場發展到今天，許多同品類的遊戲行爲都有固定範式，而當你想要用新穎的方式打破玩家固有思維，又希望降低學習成本，就需要用到記憶映射的方式。
[ 《陰陽師：百聞牌》&《明日方舟》抽卡界面截圖 ]
比如《陰陽師：百聞牌》繪制法陣解封密卷的抽卡方式，熟悉二次元傳統抽卡套路的人在進到抽卡環節時，需要研究了一下說明文字試著劃一下才知道如何操作。但是《陰陽師：百聞牌》的畫符抽卡設計顯然是比較成功的，雖然玩家需要第一次使用的習得過程，但是繪制法陣本身與影視作品中的記憶是類似的，因此玩家很快可以將這一記憶和繪制法陣的抽卡方式對應上，這種在玩家腦海裏尋求記憶印射的方式可以有效降低情景化設計學習成本方面的負面影響。
d.開發時間、技術和性能的平衡：
這也是許多設計同學所頭疼的地方，當一個精彩方案擺在面前，說不清楚需要哪些資源，如何推進落地，風險有哪些，預期成果是怎樣，現有資源下如何取舍，各種不確定，顯得底氣不足，無法獲得認可，最終被迫改成市面上千篇一律的保守方案。
[ 高真實度的情景化設計所需的資源 ]
如上圖，顯然高真實度的情景化設計需要的資源很多，但是我們追求的是整體情景概念的表達，而表達方式是多種多樣的，依據現有的資源而定，並非只有高真實度的表達方式才是好的設計。對于資源多的項目，每個系統都可能非常直觀地表達，可以根據風格選用3D或2D表現形式；支持少的項目，可以著重表達重要的系統，比如匹配流程、抽卡等等，如果沒有足夠的3D支持，你也可以選擇2D+動畫的方式模擬出場景+鏡頭的表現方式；甚至一個簡單的視覺元素+動畫也能有效傳達設計師的情景概念設定，讓玩家感受到誠意，例如在《非人學園》匹配成功後，選擇低真實度的飛天小火車動畫作爲loading UI就足以表達乘坐列車登上貓島競技場進行戰鬥的情景概念，而沒有盲目使用3D的表達方式。
[ 《非人學園》匹配LOADING ]
講了這麽多世界觀導向情景化設計的原則，是要提醒大家情景化設計雖好，但有很多方面要注意，不要盲目堆砌，敢取舍，知輕重，套路千萬條，務實第一條。
（四） 情景化設計的模型
梳理完情景化設計的概念，特點以及原則，接下來我們來講述情景化設計的方法模型。如果想實現之前提過的金字塔結構的逐層目標，那麽就需要的用到情景化設計的模型。這個模型分爲三個部分：情景的整體概念規劃，系統情景的概念設計和情景的連接，該模型是從實踐的角度對情景化設計金子塔進行的解析。
1. 情景的整體概念規劃：
[ 情景的整體概念規劃模型 ]
情景概念的構思是一個從宏觀到微觀的過程，通過逐層塑造達到情景化設計的目標。那麽首先要對情景概念進行整體的規劃，這是爲全盤布局的一步，爲後續情景概念界定範圍，從梳理過後的世界觀元素出發，找到具有世界觀特色的概念，並且對預計包含的系統進行歸類和分組，預估現有概念是否可以容納規劃的系統，是否具有延展性，便于後續具體情景概念的設計。這個階段要敲定主情景和概念方向，各系統的情景可以只是一個模糊的草稿。
[ 《AC Rebellion》遊戲截圖 ]
以《AC Rebellion》手遊爲例，試用模型進行分析。作爲一個刺客信條IP的手遊，玩家對其世界觀中ANIMUS系統，刺客和聖殿騎士，伊甸碎片應該都不陌生。根據手遊的主線故事內容，將整個遊戲情景規劃爲刺客組織的一個秘密基地，將遊戲的玩法系統都一一對應基地中的不同房間布置和角色行爲，進行了非常細致的情景化設計，與此同時關卡系統，個人信息與郵箱等基礎系統和商業系統由于展示信息較多，因此使用了世界觀中ANIMUS系統模擬出的數字虛擬空間作爲通用的情景，輕重取舍得當，是一個比較好的整體概念規劃案例。
2.系統情景的概念設計：
[ 系統情景的概念設計模型 ]
系統情景的概念設計已經切分到獨立的系統需求，可以參照上圖的模型進行構思和設計。比如需求是要做一個公會系統，首先我們要將這個遊戲行爲做一個定義，公會是玩家的弱社交系統，是玩家聚集並贏得榮譽及獎勵的弱共同體，再往下拆分，公會的招聘、組織、活動等行爲都是要進行本質的诠釋。完成這一需求本質溯源後，需要你努力地在世界觀的符號，行爲和劇情中尋找與之同步的契合點，如果你有幸找到了那個關鍵點，你便找到了與世界觀相符的行爲和符號，並以此構思情境概念，在此基礎上你也可以進一步融入傳達情感共鳴的情感觸媒。
[ 《陰陽師：百聞牌》抽卡系統 ]
[ 《陰陽師：百聞牌》抽卡系統試用模型進行分析 ]
以《陰陽師：百聞牌》的抽卡系統爲例，試用模型進行分析。原始需求是抽卡系統，遊戲行爲是抽取式神卡牌，而在日本陰陽師文化的元素中有密卷的元素和解封的行爲，也就是說找到了世界觀對應的行爲和元素，所以整個抽卡系統可以包裝成密卷解封法陣的情景，而玩家自由繪制法陣的交互方式就是我們方才所提到的的情感觸媒，使玩家的抽卡行爲和記憶中IP元素與行爲産生共鳴。
3.情景的連接：
[ 玩家在情景中遊覽 ]
這個部分主要講述當你有一個個獨立的主情景和分情景，如何保證玩家在其中遊覽和交互的流暢體驗？那就要使用到鏡頭動畫了，不但可以保證體驗的連續性，更可以利用空間方位提升可用性，甚至帶來更強的氛圍和故事性。
a.自由移動 & 非自由移動
從玩家體驗的角度來說，與情景的交互方式可以分爲自由移動和非自由移動兩個類別。
[ 《SHADOWGUN LEGENDS》遊戲截圖 ]
先講自由移動，無論是傳統RPG還是開放世界遊戲，玩家通過自由的移動在不同情景之間穿梭，這種情況一般是沒有大廳的，取而代之的是主城，所以從玩家的角度來說，看似不需要鏡頭動畫，但實際上仍然存在于細節處，例如當玩家與NPC發生對話時會有鏡頭拉近的過程，打開NPC商店的頁面也會出現鏡頭動畫。對于這種類型的情景的交互方式，鏡頭&轉場動畫用于將自由移動狀態和互動狀態進行連接。
[ 《火影忍者手遊》遊戲截圖 ]
與之對應，非自由移動一般是有大廳的，也是多數手遊采用的形式，如之前介紹的經典手遊《火影忍者》，它的主場景就是一個橫軸的木葉村，而其中有許多玩法和系統的入口，在玩家在各個系統之間切換時會有連接情景的動畫。
b.組織界面的常用鏡頭動畫
講完自由移動 & 非自由移動的兩種情景交互方式的不同，我們來看下遊戲設計的實際過程中，我們會常用到哪些基礎鏡頭動畫用以連接情景。
- 鏡頭平移-並列關系，常表達線性流程
一般來說鏡頭平移多用于表達並列關系，延續性的線性流程。這裏我所列舉的例子就是《噴射戰士2》中的角色創建界面，整個建角都是在一個虛化情景內進行平移的，給到玩家一個順暢的體驗。
- 鏡頭推拉-層次關系的切換
推拉的手法通常用于表達空間或者層次的關系，例如《命運2》遊戲中的星球具體地圖，以及各個星球之間的太空地圖切換，在用推拉的鏡頭來表達出星球地表地圖和太空地圖之間的層級關系，同時也符合物理空間的關系。
- 鏡頭環繞-包含關系，用于詳細內容的解釋
第三個較爲常見的手法便是鏡頭環繞，它基本用于在一個特定情景中，對組合體的不同子對象來進行詳細的解釋。最常見的便是裝備界面，如在《全境封鎖2》中，玩家在編輯不同裝備欄時，鏡頭會配合玩家與UI的交互進行環繞展示。
- 鏡頭跟隨-情景與信息的延伸
最後一種常用鏡頭就是跟隨，當全部信息超過手機屏幕的承載範圍時，就需要通過鏡頭來對情景進行延伸，這就和許多電影中主角穿越整個鬧市追擊反派是同樣的道理，即使屏幕的範圍有限，也能將巨幅鬧市進行了充分的展示。在這裏我所舉的例子是《PERSONA5》的戰鬥結算界面。我們可以看到，由于遊戲本身UI的風格所限，單一場景沒辦法將所有信息量進行展示，所以整個結算獎勵的過程是通過角色奔跑+鏡頭跟隨來呈現的，既將信息都進行了完整呈現，並且主角會從在奔跑的最後回到原先大地圖的位置，可以說做到情景之間的無縫連接。
我們已經了解了基礎的鏡頭動畫，在具體應用的時候要注意鏡頭動畫的組合運用，輔助表達邏輯層級以提高可用性，同時也要注重鏡頭本身的美感，由于篇幅關系這裏就不贅述了，讀者可以通過下面的例子體會一下。
[《合金裝備V 幻痛》]：https://v.qq.com/x/page/u30362kcoei.html?ptag=qqbrowser
這一部分我們通過具體的項目案例，介紹情景化設計的流程和前面所述內容的綜合運用。
關于情景化設計的流程，首先要對IP的世界觀進行分析提取元素，接著要梳理好預計的系統結構，在此基礎上在進行整體概念的設計，敲定方向之後進行每個系統的概念設計和實現，最後調優測試上線。
[ 情景化設計的流程 ]
[ 項目案例 -《CALL OF DUTY MOBILE》 ]
《CALL OF DUTY MOBILE》使命召喚手遊，作爲一款騰訊與動視聯合研發的手遊，海外上線之後獲得了非常好的成績，超140個國家與地區App Store手遊下載榜首，超90個國家與地區App Store跨平台暢銷榜TOP10，榮獲2019 TGA：BEST MOBILE GAME，GOOGLE PLAY 2019年度最佳遊戲。作者作爲該項目的交互設計師，就以此爲例簡述情景化設計的過程。
STEP1.世界觀分析&提取元素
[ 《CALL OF DUTY MOBILE》 各個系列作品 ]
首先，因爲《使命召喚》手遊屬于IP移植，所以設計師要做的就是從原作的內容中提煉出比較有代表性的元素來形成IP的世界觀元素庫。這裏我們所碰到的第一個挑戰就是《使命召喚》的曆代作品背景是以時間線來延伸的，從二戰，現代，近現代到未來有非常多的系列，世界觀各不相同。而從曆代的銷量來看，除了起家的二戰系列，現代時間線的遊戲系列是玩家最爲認可的，因此FPS品類的玩家會有更大概率玩過這兩個系列的作品，所以以現代時間線爲基准進行世界觀元素的提煉更容易觸動玩家。
[ 世界觀元素提煉首頁 ]
STEP2.梳理系統結構
[ 系統結構梳理 ]
在這一步要做的是將規劃好的系統玩法進行預先梳理和分類，並預留一定的空間（策劃改需求），方便我們下一步情景的設計。
STEP3.情景的整體概念設計
根據世界觀元素和上面所梳理的系統和玩法，與策劃、美術經過探討達成一致，將系統情景分爲了室外（戰場）與室內（基地）兩個方向。Multiplayer，Zombie，Battle Royale三大模式的匹配大廳，大廳，背包等主戰鬥流程上的系統，都歸類到了戰場方向，而其他系統歸類到基地方向，並在情景的光照、元素布置上進行了差異化設計。
[ 主戰鬥流程系統與其他系統 ]
如圖所示，在大廳、組隊、背包界面所呈現的都是戰場情景的不同部分，這一部分非常值得重點刻畫，所以采用了真實度較高的3D表達方式；其它系統則是基地內的不同情景進行串聯，由于非戰鬥系統呈現的信息一般比較多，以突出信息爲主，所以整體處理相對戰場是一個較弱的情景設計，以基地內不同房間作爲情景，而這部分采用2D爲主的表達方式。
STEP4.系統情景的概念設計
這裏我們拿背包(LOADOUT)系統來舉例。原始需求是不同模式裝備的裝配，遊戲行爲是戰鬥前的裝備調整，在世界觀元素庫中進行檢索後，會發現這與特種部隊的戰前檢查是相吻合的，檢查武器是否正常然後才會介入戰鬥。
[ 背包系統使用系統情景的概念設計模型 ]
[ 背包系統概念意向圖（圖片源于網絡） ]
根據如上分析這裏設計爲戰前修整的情景，Multiplayer模式的背包系統選取了地圖城鎮外圍的情景，Zombie模式選取了營地篝火，Battle Royale選取機場周邊。在具體的裝備更換界面，爲了避免出現更換武器時憑空掏出一把M4的世界觀合理性“BUG”，將更換裝備的子情景設定成戰前修整情景中的武器箱，通過鏡頭縮放進行連接，並且每個模式的武器箱都有自己模式的特色。
[ 《CALL OF DUTY MOBILE》背包系統視覺稿 ]
爲了給程序和美術提供實現參考，同時也設計了鏡頭動畫的DEMO用于連接大廳-系統和系統內部的不同情境。
[ 背包系統鏡頭動畫DEMO ]（請前往公衆號【騰訊GWB遊戲無界】搜索同名文章查看）
[ 背包系統上線版本效果 ]：https://v.qq.com/x/page/t3043alt3km.html?ptag=qqbrowser
文章的最後，解答一下設計、美術和策劃同學在同名內部課多次提出的問題：
1.情景化設計需要具備什麽樣的能力？
首先，你需要對遊戲整體的系統、設計、美術有足夠深入的認知；第二，你要非常熟悉項目的世界觀，並且能夠依據現有系統提出具備整體性且嚴謹適度的概念設計，同時夠提取關鍵元素符號；第三，你需要具備一定的全局觀，站在産品的高度上對整體的設計進行權衡和取舍；第四，當然需要具備紮實的美學素養；第五，熟悉引擎實現效果的邊界。第六，有能力橫向或向上溝通並獲取所需開發資源。
2.情景化我很想做，也嘗試過，怎麽才能推進實現？
a.自上而下地逐步推進: 情景化設計是需要較多開發資源的，那麽需要先拿出初期的嘗試，證明這個方向的價值，並提供市場研究和數據，確保獲得有效的支持。從具體研發上講，要先進行整體的概念設計，並通過高保真動態DEMO或者單個系統的精致開發進行有效驗證，獲得認可並拿到資源。之後就是按照整體概念設計按部就班的鋪量和階段性測試，逐步優化直到上線。
b.創造良好的合作氛圍：情景化需要策劃、設計、美術、程序通力合作的，每個人對本專業的部分負責並且對彼此的專業深度有足夠信任，不跨界“指導”，創造良好的合作氛圍，才有機會推進實現情景化，雖然想法誰都可能有，但只有同時契合各專業維度規則的想法才是可實現的設計。
c.情景化設計是未來趨勢？是，而且是正在進行時！它的源頭可以追溯到2000年初，大量的PC和主機遊戲項目就已經在進行情景化設計了，直至近些年才在我國手遊行業中成爲主要設計趨勢，並持續對行業産生深遠的影響。
希望讀完這篇文章的你不要“閱畢即焚”，而是能夠學以致用，在遊戲中用你的靈魂設計觸及玩家，Spark More！