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