方寸見巔峰！騰訊高手如何做好《Apex 英雄》的手游設計？

本文由騰訊光子設計中心的交互設計師和視覺設計師分別講述如何實現《Apex 英雄》手游的體驗突破與UI創新。

更多光子設計中心的好文：

大家好，我是楊澤鋒，大家都叫我阿澤，我來自騰訊 IEG 光子設計中心，我是一名游戲交互設計師。很榮幸能夠參加這次行業交流盛會，本次我和另一位同事 Sandy 一起給大家帶來分享，這次我們分享的內容是：方寸見巔峰——ApexM的設計體驗突破。

本次分享的內容會分為兩部分：

1. 端游功能如何在手游布局 HUD？
2. 手游如何在復雜功能中做簡化？

在此拋出一個發散問題：端游移植到手游，體驗上會遇到哪些問題？

首先從體驗的角度，端轉手經常會遇到許多難點，如：這么多功能如何布局 HUD 界面？端游功能這么復雜，照搬還是簡化？上圖提到的問題都是在端轉手中會遇到的重點難點。

由于時間有限，選擇兩個問題和大家分享一下，也是我認為在研發期間遇到的比較有挑戰性的問題。第一個難點，端游這么多功能，如何布局 HUD？

傳統 PC，鍵盤主要是負責移動的操控，比如跑跳蹲等基礎行為，鼠標則負責開火射擊、轉視角等操控，大腦對左右手有更清晰的指令。在手游上只能通過搓屏幕，并且雙手手指的遮擋會導致屏幕僅剩三分之二區域，在手游上優化操作體驗是射擊類手游必須重點解決的問題。

作為游戲交互設計師，基于端轉手的背景下，可以從幾個點去進行思考：

1. 操作習慣，不同玩家類型的操作習慣不一樣；
2. 繼承和改變，因為基于端轉手，很多端游的功能很復雜，我們要基于手游的操作布局進行改變；
3. 學習成本，要考慮不同的 IP 玩家和 Apex 手游玩家的不同操作習慣。

如何打造更好的操作體驗？ApexM 秉承的交互理念是：簡單上手、快捷流暢、爽快炫技，這些理念會在后續的方案中體現。

首先來看一下我們局內戰斗的一個框架，因為篇幅有限無法全部羅列，大概有 12 個模塊，80+功能，36 個一級操作按鈕。

那么問題來了，大家看到這么多的功能和按鈕，我們是如何確定在手機上的屏幕位置呢？

首先我認為需要確定一個評估維度。先要確定操作熱區，然后是羅列功能優先級，最后綜合考慮放置各類按鈕的位置，這樣才能讓我們的按鈕布局做到設計有理有據。

大家可以先看上圖左側，操作熱區可以分為三級，根據手指的操作范圍和難易度來劃分。

一級熱區：操作頻率最高，也是交互成本最低，通常都是移動、開火這類基礎體驗，直接影響玩家完成基礎的射擊操控體驗；

二級熱區：二級操作熱區可以定位為更好地完成核心操作體驗，可以定義為輔助玩家更好地完成射擊操作，比如說瞄準、轉視角；

三級熱區：這個區域可以明顯地感受到對于二指操作的玩家而言已經是比較困難，這些區域的位置通常放置玩法、溝通、與隊伍互動相關的按鈕。

右側是我們把 HUD 的核心功能都羅列出來，然后進行優先級排序，這就是我們當前的 HUD 方案。最后會統籌放置各類信息的位置，并且根據實際戰斗體驗再進行微調。這個方案也適用于大部分玩家，面對新手也較為友好，上手門檻低，信息的呈現更加直接。

當我們很開心地對外測試時，我們的主美 Nono 拋來一個靈魂拷問：這不夠 Apex 啊？我們就瞬間心里一緊，想想確實，按照目前的方案，能滿足大部分玩家的操控體驗，但和目前市面上的 FPS 手游的體驗大同小異，如何更加“Apex”？成為一個我們的新的命題。

制作一個更有 Apex 特色化的 HUD 界面，那么什么是 Apex 特色化？通過提煉這句話的內容，我們從體驗和視覺的兩個差異維度來進行探索。

首先是體驗上的差異，不同玩家群體的操作習慣都會不同，比如新手和 IP/進階玩家的操作體驗會帶來布局差異。

新手玩家以基礎操作為主，更注重信息的平鋪直敘，雙手緊貼左右布局位置。IP/進階玩家有 IP 認知基礎，在信息和操作上可以嘗試一些更加整合性的方案，更符合這類玩家的需求。

衡量的維度是什么？哪些應該變，哪些又不能變？需要有一個衡量標準，我們與戰斗組的策劃進行多次內部測試，最終達成兩個協議。

不變的是基礎操作，比如跑跳蹲、開火這類操作不會發生改變，因為玩家有操作習慣，會形成一定的肌肉記憶。

變的是武器欄、技能的操作，這些相對個性化的操作，還可以整合信息：隊友信息、輔助功能等，比如說投擲物，可以采用圓盤的投擲物方式，從根本上去符合 I 玩家的操作體驗。

另一個差異是視覺維度的差異化。我們從端游提煉了一些視覺特征，比如終極技能居中，武器欄是一個整體，投擲輪盤、斜切元素等等。

在過程中我們做了很多方案選擇，最后關于方向我們有三個選擇。還原端游的布局，帶來的問題是不符合移動設備的操作體驗，比如信息會被拇指擋住；完全創新對我們來說，玩家認知成本太高；最后我們決定還是基于現有的方案基礎上，往特色化的方向去靠近。

我們的目標玩家是進階和 IP 玩家，他對端游是有一定的熟悉度，在 BR 類型的游戲有一定的熟練度。

由于我們是基于 EA 的 Apex 這個 IP 來開發，所以需求都會和 EA 團隊合作討論，我們把這個想法同步給了 EA 團隊，很高興這樣的想法也符合 EA 團隊的預期，最后雙方達成一致，在保留原有方案的基礎上，為玩家新增一套新的方案。

左右兩套方案的對比，右側是我們的 HUD2 方案，大家可以看到這個的功能色塊都發生了改變，位置的改變也導致握持的手勢也發生了變化。

大家看一下實際演示視頻，這是國外主播的一個操作視頻：

大家可以看到，玩家對界面進行了自定義，基于原有的信息進行了整合，玩家有更多的操作空間，內容呈現也更加簡潔。
???????????????????????????

有句話想和大家分享：不是看到了結果才做，而是做了才有結果。

在做這個方案的過程中，我們也有很多挫折，比如說這不符合操作習慣、這個和市面上的操作布局不一樣，種種的自我懷疑。在主美的步步緊逼和摧殘下，最后才把這套方案呈現給玩家。我們也倡導更多的游戲設計師能夠去探索更多的設計可能性。

第二個難點，面對復雜的功能如何簡化手游體驗呢？

這是 Apex 的一個特色局內系統，據說是 EA 研發團隊在戰斗中關閉麥克風狀態下設計出來的，玩家可以利用這 8 個內容進行各類標記，也獲得了許多玩家很高的認可度，甚至有玩家因此寫感謝信。

面對這么優秀的戰斗溝通系統，我們想的肯定就是先還原，一方面我們是根據 IP 還原端游體驗，另一方面以固有的思維去設計。

因此第一版最終采用 6 個標記作為默認功能，玩家可以通過長按標記按鈕，呼出輪盤進行標記。我們高興地進行第一輪測試，但結果并不符合我們預期。

那么完全復刻端游功能，這條路就走不通了嗎？我們在用研團隊的幫助下，梳理了 2 個核心痛點：

1. 圖標數量多且難識別；
2. 戰斗節奏快難以高精準標記。

還原的路走不通，我們就換條路走：優化。作為游戲交互設計師，可以運用交互設計中四策略的方式：刪除、組織、隱藏、轉移。

根據總結的問題，整理了 2 個對應的設計策略：第一是減少數量，第二是使用場景精細化，提升操作效率。接下來我會對這 2 個問題進行解決方案的分享。

問題 1：圖標多且難識別

我們從玩家的使用場景中發現，圖標數量太多且造型相似，會造成新手認知門檻高，所以要梳理一下玩家的標記行為，這里可以分為兩大類：

第一類是戰術性預判，這一類是使用比較低頻的，可以考慮隱藏，兼顧高手玩家；

第二類是需要自主判斷的，比如像前往、遇敵、物資，要考慮大盤玩家，可以默認保留。

我們的解決方案是，保留最核心、高頻的操作，即前往和遇敵的標記，其余則默認隱藏，玩家通過設置可以自行開啟，來兼顧高階玩家的操作需求。

問題 2：戰斗節奏快難以高精準標記

這時候我們就想，從規則上入手，是否可以把一些簡單規則交給系統來判斷。

于是我們將一些有品級劃分的物資（里面會有一些通用規則判斷），并把這些東西交給了系統，實現自動化，玩家再也不用瞄準了。這樣就能給他們減負，而復雜的狀況還是交由人腦來判斷，保留玩家的手動操作。

解決方案是，在自動化方面，將一些通用規則判斷的信息交給系統，減少玩家操作負擔；同時在玩家標記后，會及時反饋給隊友提示，隊友也可以預訂物品。玩家的行為和隊友的反饋形成閉環，避免信息的遺漏。

手動方面，前往和遇敵需要根據戰況判斷的信息，要充分確保玩家的操控感，因此我們還是交給玩家自主判斷。

當我們將端游的標記系統，部分標記內容簡化成自動化就沒有問題了嗎？顯然不是，因為自動化也會帶來其他的問題。

比如頻繁的標記提醒，還有標記內容不是隊友需要的等等，我們又對這些細節進行更多的打磨，在其他環節完善，目的是為了玩家更好的團隊協作。

最后的測試結果也符合我們的預期，玩家每局平均操作的次數，從 8 次下降為 2 次，簡化的策略極大減少了玩家的操作負擔。

簡單總結一下設計切入角度：基于功能，從使用場景出發，可以從頻率和規則兩個角度可以切入。頻率角度，高頻可以顯示，低頻操作隱藏；在規則角度，需要精細化的保留手動，通用規則可以考慮自動化。

最后總結本次分享的思路，針對第一個難點我總結了兩個內容：

第一個是確立評估維度，快速確定操作布局；

第二個從玩家群體特性出發，結合 IP 的特色做差異化。

針對第二個難點：

第一，善用交互設計的四策略：刪除、組織、轉移、隱藏；

第二，基于使用場景去簡化功能，從頻率和規則入手。

以上是我的分享，謝謝大家！

王珊：大家好，我是騰訊互娛光子設計中心《ApexM》項目主設王珊。很榮幸今天可以參加 TGDC 這個大分享盛會。今天視覺部分想和大家分享：ApexM 端轉手過程中視覺 UI 的繼承與創新。

今天的內容分為兩部分。第一：局內系統，淺談一下我們的柵格化系統。

前面我的同事阿澤分享了局內的 HUD 交互內容，對于一款 FPS 來說，游戲圖形的識別性與秩序感的建立至關重要。我們在前期局內的圖形設計中，也一度有設計不統一的情況，那后續是做哪些調整，保持這種統一性呢？

在這里不得不提到柵格化系統的建立和使用。柵格化系統在網頁設計中應用很廣泛，但是在游戲 UI 界面中的使用還未被普及，這里由于敏感原因，我們的設計稿無法投放，但是會有一些示范圖例。

柵格化的作用核心就是在版式布局上建立輔助參考系統再設計，所有的圖形元素尺寸有專屬的度量單位，會讓界面和圖形產生一種隱形的信息秩序感。

怎么使用？簡單概括為四步驟：

第一步，定義版面和畫布尺寸；

第二步，制定柵格數量；

第三步，確定布局和結構之后；

第四步，利用黃金分割比例對界面和元素進行定位。

中間有幾個需要注意的關鍵點分別是：整體的比例、節奏感、空白、層次。

ApexM 在游戲圖形圖標的設計上，會更加要求外輪廓造型是簡潔和概括的，我們會避免很多細碎的細節塑造，更加注重體塊感傳達出來的直接感受。

局內外所有圖形都是基于大家現在看到的規范元素組件去設計，看到這個方塊會不會覺得有點像小時候練字用到的田字格，其實它們的道理是相通的。

怎么使用？有一個基本理解，假設我們圖標尺寸定義為 48x48 pt，這里是以 pt 為單位，可以把它放大到 400%尺寸進行編輯，再使用 4dp 的網格單位進?切分，最后使用關鍵分割線來作為視覺比例的設計基準。

最后這兩幅也是最后的 HUD 效果圖，柵格化為 HUD 布局進行了更合理的區域劃分，HUD 所有功能模塊采用統一繪制尺寸和統一的間距規范，所有的圖標、文本、間距都是基于柵格化計算之后再設計的。

柵格化的意義，除了保證清晰度和一致性，也是有利于視覺引導。通過規則以加強視覺層次結構，提升設計理解力；更符合多設備環境的動態響應式設計要求；一致性的 UI 元素規范有益于加快設計進程，避免重復勞動；使設計易于修改和重復使用；更有利于各模塊崗位的設計協作，比如發給 CP 方制作也是有規范可循的。

ApexM 手游的目標是，全球化面對更廣的玩家群體，去煥發 IP 新的活力，成長為一款長線運營的經典產品。

基于剛才的目標，端轉手有許多困難擺在視覺設計師的面前，比如如何找到與端游的設計共性，又能創新凸顯出手游獨特的視覺調性。

我認為，不論是還原還是創新，設計前都需要先去了解世界觀，并且深挖。

Apex 源于《泰坦隕落 2》中持續多年的邊境戰爭后期，發生在太空邊緣星球間的傳奇競賽故事。正是因為 Apex 有著和泰坦同源的強科幻故事背景，所以它依然始終保持著一種高科技和重工業的氣質，并且這個 IP 體現出非常多例如動感、熱烈、朋克、戲劇化等多元特征。

世界觀中的許多傳奇故事也是為后續做視覺包裝提供了非常多的靈感和素材。玩法是 BR、英雄技能、多人小隊，有復活機制，且地形多樣。

基于 Apex 這樣一個龐大的世界觀，為了保持與端游一致性，視覺又做了哪些工作？

首先肯定是要對 IP 界面進行梳理和分類。前期我們收到了監修方 Respawn 工作室提供的非常大體量的 UI 資源，首先肯定要進行梳理和分類，在我們不斷整理的過程中也開始逐步提煉視覺元素和圖形語言。

不僅僅是對局內外的系統，我們對外域傳奇故事 CG 中的元素也進行了分析提煉，例如“傳奇密客”的屏幕科技元素，“地平線”傳奇故事中的電子顯示元素等等。這些設定也成為了我們后續做運營類傳奇活動包裝時，提供了非常多的用來做延展設計的靈感來源。

經過前期大量的提煉和分析，我們也逐步地總結出了更適合手游視覺語言，而扁平化的設計需要依賴嚴謹的視覺平衡與克制的色彩運用。端游圖形基本構成有：斜切、切割、矩形、菱形、點陣排列；質感有：毛玻璃，戰損等等。

特別是貫穿在三人小隊的旗幟圖形，也是成為 SEED 核心視覺元素。界面的色彩使用上保留了端游經典的紅白灰的配色組合。

第二步進行模塊化的 UI 規范輸出。在項目開發周期時限短且需求量巨大的前提下，我們建立了一個建立完善的組件庫與規范庫，這是保證設計的統一性和延展性的必要前提。

持續做規范化設計能有效地減少試錯成本，也可以避免一些不必要的爭議。搭建完整的組件庫可方便各模塊同學后續快速查找和響應。除了保證輸出的統一性，也為后續鋪量打下堅實基礎。

經過前期端游資源梳理、視覺元素提煉與規范制作，又是如何應用？這里將以大廳設計為例為大家分享。

大廳是玩家接觸到的第一個界面，也是核心體驗中的重要展示部分，承載了各大核心功能與商業化入口。

端游的賽季主題多變，在游戲大廳的設計上也是有很好的延展。手游視覺設計，如何保持視覺平衡能兼具功能性與運營要求，還能傳達 ApexM 獨有的調性？

初版的大廳設計在內部公布時雖然有認可的聲音，但并未能讓大家覺得眼前一亮，所以在項目主美的支持下，我們又開始尋找新的方向，尋找更鮮明的記憶點。

就在我們苦于沒有靈感的時候，端游 S3 賽季有一段預告片展示的是英雄跳傘前，在船艙內部活動的一些橋段，每個英雄都有屬于自己的一塊休息區域，跳傘前也會有升降倉和頭頂 LED 屏幕顯示小隊傳奇的照片，整體儀式感非常強。

所以看過這個視頻之后，引發了大家很多思考，經過很多輪的腦暴，我們決定試著將從新手引導到最后的游戲結算，整合成一條游戲備賽的概念，貫穿進入游戲各個關鍵環節，希望利用鏡頭做流暢過渡，強化視覺表現力。

大廳的背景設定，也就鎖定在船艙內部，成為核心體驗中的很重要的核心環節。船艙這個概念確定，僅是一個大的前提，落地在具體 UI 設計時，我們同樣經歷了長時間的推敲和打磨。

期間目標是很明確，比如角色的展示就是 Demo 期就確定會用到半身像。這是和端游不同的一點，但后續切換到組隊的時候就會變成全身，目的就是為了讓玩家在小畫幅手機上看到更好的展示模型品質效果。

與端游相同點在哪里？延續一貫扁平與斜切視覺語言，界面色調也是還原了端游的灰白紅的組合，并且保留底部 TAB 頁少部分毛玻璃的質感。

與端游不同的是，UI 整體框架會模擬機艙 HUD 操控臺，利用 45% 切角與斜切圖形元素提煉組合使用。最為重點是非常醒目的紅色 Play 按鈕，它在中心擺放的位置。前期其實我們也是有一些討論，最后經過多輪討論，我們也是覺得這樣的擺放位置可以讓玩家操作更具儀式感，也是可以區別于其他 FPS 游戲的設計，漸漸地也成為我們手游獨有的非常強的記憶點。

綜上所述，我們在 IP 視覺繼承上可以總結出幾個方面：

1. 對 IP 方的海量 UI 資源進行分類整合，便于后續視覺提煉與快速找查；
2. 對端游界面的圖形、色彩、質感提煉，并且最重要找到核心 SEED 圖形并延展設計，從而強化視覺認知；
3. 模塊化的 UI 規范輸出；
4. 深挖世界觀，例如大廳艙內場景的選擇，或者是商城哈蒙德，還有新手引導中的身份證，即便它們并未在端游游戲畫面出現過，玩家仍會認為這“還是那個 Apex”，我我們只是讓它更完整地呈現出來。

剛才聊了我們基于 IP 的繼承，那手游里需要找到自己特性的創新點又有哪些呢？

拿賽季舉例，端游是平均每 90 天更新一次大賽季，手游更新內容則更為豐富，分為大小雙賽季，并且更新時間更快。除了 BattlePass、運營化的主題包裝和賽季商店，賽季幣完成局外的兌換與購買，還有其他豐富的運營活動內容并行。

那么賽季視覺包裝怎么做？首先我簡單說一下賽季的主要作用是什么。

賽季作為競技類型游戲核心商業化最重要的組成部分，整合了新的賣點、新的角色和皮膚，以及 BattlePass 和其他的特別獎勵。它的重要任務是通過快速和強烈的視覺沖擊來吸引玩家，反復強化玩家對賽季的印象，引導玩家去接觸賽季相關的內容。

這里總結了幾個設計重點，分別是：主題定位，傳奇畫像，風格氣氛定調，鏡頭情境感的代入。

大家看到的這個 Apex 端游賽季主題所做的視覺風格拓展，已經很豐富了。ApexM 也會延續了這一設計方式，將更具整體性的主題感氛圍做到代入設計，結合新傳奇屬性，拓展豐富度和新鮮感。

現在大家看到的是端游賽季主體標識，主要色彩的提煉。

我現在介紹一下 S1 賽季的視覺設計。S1 賽季的主題是“Prime Time 鼎沸之刻”，它是 Apex Game 的一場盛大揭幕賽，整體設計力求最大還原端游的基礎上，突出這場頂級賽事的宏大和熱烈氛圍，地圖也是 Apex 的經典戰場，世界邊緣。

S1 賽季 LOGO，分別是扁平化、3D 和結合動效之后的效果。這個 S1 LOGO 圖形上方的 7 個星球，代表了辛迪加組織控制下的 7 個國家，概念是 Apex 在辛迪加世界中舉行的首場競賽。實體 LOGO 演繹也是視覺設計通過分鏡方式創意輸出，而最終得到的效果呈現。

現在大家看到的 S1 賽季的色彩與視覺元素，也是與端游首賽季保持一致。用到紅色作為首賽季的主基調色彩，輔助色為黃黑金，選擇融入了熱烈氛圍的飄帶，端游代表性 LOGO 旗幟元素，結合世界邊緣有場景的巖漿地貌作為氛圍感的烘托，并且保留了端游最具有儀式感的旗幟轉場的效果。

現在展示的是賽季商店，賽季商店作為賽季包裝系列內容的一部分。前期概念設定受美國一檔體育頻道 ESPN 演播室啟發，最終鎖定在了該賽季主題下的商店展廳去延展做設計。

前期綜合主美意見，考慮到后續的制作成本，所以后續只需在原 3D 搭建的基礎上進行屏幕設計，結合動效與場景的燈光渲染，完成了一個可復制利用的場景模塊。

大家看到藍色的這塊就是 S1.5 賽季復用之后的效果。

在視覺元素上的運用，我們選擇了 LED 故障風與字母動態展示屏幕的效果結合展廳地面的折射，整體氛圍感是更酷炫的。

S1 整套賽季商店設計也成為了一個優秀設計案例，奠定了 ApexM 官網風格。

所以主題化的視覺包裝，只要一旦找到了世界觀作為切入主線，后面精彩內容的涌現也就順理成章，但是前期所花費的思考與決策準備時間需要更充分，對于促成好的設計結果尤為重要。

S1 賽季的視覺包裝也是確立了我們手游的基本視覺方向，同時也獲得了項目與監修方的認可。ApexM 的品牌設計從賽季商店的設計中獲得靈感并開始提煉，進行延伸和發展，于是形成了手游自身的品牌調性。某種層面說，游戲視覺和品牌設計形成了比較一致的表達。

圖上是 S1 賽季的拍臉圖，有電子感的故障元素在，我們就是將電子故障感元素替換了之前端游的彈道戰損元素。為什么要做替換呢？就是因為戰損風在大屏端游上會很容易被識別出來，但換到手機小畫幅的局限性，視覺上就會表現成臟色和一些不規則的點兒，替換之后這種電子故障肌理感在手機上看其實也像某種程度的戰損。

下面說一下品牌色，我們的手游品牌色也是傳承端游，但手游的紅會來得比端游更加熱烈，對比也更為強烈，而這恰恰就是我們手游想體現的味道：更大膽、更快、更有活力與能量。

現在看到的是 ApexM 商業運營圖，設計難度在于，如何做到吸引玩家還能保有強烈獨特的品牌感， 而且這個品牌感手游獨有的，是可以區別于端游的。

ApexM 每個賽季都有非常鮮明的主題，拿 S2 賽季來舉例子，主題是“失真”，它有幾個關鍵詞，分別是電音、律動、派對、霓虹燈， 構成了這個賽季的核心概念。

我們選擇了紫色代表這個賽季印象色彩，結合 ApexM 故障元素作為基本的構成形式。結合新傳奇女 DJ 自身屬性，既延續了賽季本身的包裝特點，又突出了品牌感，最終呈現的效果也是非常具有 ApexM 的辨識性和沖擊力。

基于 IP 創新做一個回答：首先，手游品牌色更加明快，手游與端游整體區分度更高；把原有圖形的某些設計細節改為更適合手游的新表達，不僅在平面結構中不斷把它強調出來，去廣泛應用于大型版面設計，提升圖形曝光量；手游也有更完整的賽季展示，更快的更新節奏，和更鮮明的商業化主題包裝內容。

綜上所述，手游延續 IP 視覺設計是為了讓玩家可以體驗到原汁原味的 Apex。Apex 手游視覺設計所做的一切繼承與創新，都是基于產品環境的改變。

手機平臺較之于 PC 平臺，有著受眾群體龐大、小屏幕高 DPI、在線時間更靈活、觀察與操作一體等天然區別，隨之產生諸如游戲時間碎片化、使用場景復雜、目標用戶范圍擴展等一系列需要解決的問題。

針對這些問題，所以 ApexM 在視覺調性上選擇更大膽、更快、更有活力與能量的新表達，希望將 ApexM 帶到了用戶規模更加龐大的新舞臺。

Apex 故事還在繼續，ApexM 設計之路也在繼續。我今天的分享到此結束，感謝各位，謝謝。

轉載自光子設計中心公眾號：「光子設計中心（GZDesigncenter）」