本文由騰訊光子設(shè)計(jì)中心的交互設(shè)計(jì)師和視覺設(shè)計(jì)師分別講述如何實(shí)現(xiàn)《Apex 英雄》手游的體驗(yàn)突破與UI創(chuàng)新。

更多光子設(shè)計(jì)中心的好文：

大家好，我是楊澤鋒，大家都叫我阿澤，我來自騰訊 IEG 光子設(shè)計(jì)中心，我是一名游戲交互設(shè)計(jì)師。很榮幸能夠參加這次行業(yè)交流盛會(huì)，本次我和另一位同事 Sandy 一起給大家?guī)矸窒恚@次我們分享的內(nèi)容是：方寸見巔峰——ApexM的設(shè)計(jì)體驗(yàn)突破。

本次分享的內(nèi)容會(huì)分為兩部分：

1. 端游功能如何在手游布局 HUD？
2. 手游如何在復(fù)雜功能中做簡(jiǎn)化？

在此拋出一個(gè)發(fā)散問題：端游移植到手游，體驗(yàn)上會(huì)遇到哪些問題？

首先從體驗(yàn)的角度，端轉(zhuǎn)手經(jīng)常會(huì)遇到許多難點(diǎn)，如：這么多功能如何布局 HUD 界面？端游功能這么復(fù)雜，照搬還是簡(jiǎn)化？上圖提到的問題都是在端轉(zhuǎn)手中會(huì)遇到的重點(diǎn)難點(diǎn)。

由于時(shí)間有限，選擇兩個(gè)問題和大家分享一下，也是我認(rèn)為在研發(fā)期間遇到的比較有挑戰(zhàn)性的問題。第一個(gè)難點(diǎn)，端游這么多功能，如何布局 HUD？

傳統(tǒng) PC，鍵盤主要是負(fù)責(zé)移動(dòng)的操控，比如跑跳蹲等基礎(chǔ)行為，鼠標(biāo)則負(fù)責(zé)開火射擊、轉(zhuǎn)視角等操控，大腦對(duì)左右手有更清晰的指令。在手游上只能通過搓屏幕，并且雙手手指的遮擋會(huì)導(dǎo)致屏幕僅剩三分之二區(qū)域，在手游上優(yōu)化操作體驗(yàn)是射擊類手游必須重點(diǎn)解決的問題。

作為游戲交互設(shè)計(jì)師，基于端轉(zhuǎn)手的背景下，可以從幾個(gè)點(diǎn)去進(jìn)行思考：

1. 操作習(xí)慣，不同玩家類型的操作習(xí)慣不一樣；
2. 繼承和改變，因?yàn)榛诙宿D(zhuǎn)手，很多端游的功能很復(fù)雜，我們要基于手游的操作布局進(jìn)行改變；
3. 學(xué)習(xí)成本，要考慮不同的 IP 玩家和 Apex 手游玩家的不同操作習(xí)慣。

如何打造更好的操作體驗(yàn)？ApexM 秉承的交互理念是：簡(jiǎn)單上手、快捷流暢、爽快炫技，這些理念會(huì)在后續(xù)的方案中體現(xiàn)。

首先來看一下我們局內(nèi)戰(zhàn)斗的一個(gè)框架，因?yàn)槠邢逕o法全部羅列，大概有 12 個(gè)模塊，80+功能，36 個(gè)一級(jí)操作按鈕。

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

首先我認(rèn)為需要確定一個(gè)評(píng)估維度。先要確定操作熱區(qū)，然后是羅列功能優(yōu)先級(jí)，最后綜合考慮放置各類按鈕的位置，這樣才能讓我們的按鈕布局做到設(shè)計(jì)有理有據(jù)。

大家可以先看上圖左側(cè)，操作熱區(qū)可以分為三級(jí)，根據(jù)手指的操作范圍和難易度來劃分。

一級(jí)熱區(qū)：操作頻率最高，也是交互成本最低，通常都是移動(dòng)、開火這類基礎(chǔ)體驗(yàn)，直接影響玩家完成基礎(chǔ)的射擊操控體驗(yàn)；

二級(jí)熱區(qū)：二級(jí)操作熱區(qū)可以定位為更好地完成核心操作體驗(yàn)，可以定義為輔助玩家更好地完成射擊操作，比如說瞄準(zhǔn)、轉(zhuǎn)視角；

三級(jí)熱區(qū)：這個(gè)區(qū)域可以明顯地感受到對(duì)于二指操作的玩家而言已經(jīng)是比較困難，這些區(qū)域的位置通常放置玩法、溝通、與隊(duì)伍互動(dòng)相關(guān)的按鈕。

右側(cè)是我們把 HUD 的核心功能都羅列出來，然后進(jìn)行優(yōu)先級(jí)排序，這就是我們當(dāng)前的 HUD 方案。最后會(huì)統(tǒng)籌放置各類信息的位置，并且根據(jù)實(shí)際戰(zhàn)斗體驗(yàn)再進(jìn)行微調(diào)。這個(gè)方案也適用于大部分玩家，面對(duì)新手也較為友好，上手門檻低，信息的呈現(xiàn)更加直接。

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

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

首先是體驗(yàn)上的差異，不同玩家群體的操作習(xí)慣都會(huì)不同，比如新手和 IP/進(jìn)階玩家的操作體驗(yàn)會(huì)帶來布局差異。

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

衡量的維度是什么？哪些應(yīng)該變，哪些又不能變？需要有一個(gè)衡量標(biāo)準(zhǔn)，我們與戰(zhàn)斗組的策劃進(jìn)行多次內(nèi)部測(cè)試，最終達(dá)成兩個(gè)協(xié)議。

不變的是基礎(chǔ)操作，比如跑跳蹲、開火這類操作不會(huì)發(fā)生改變，因?yàn)橥婕矣胁僮髁?xí)慣，會(huì)形成一定的肌肉記憶。

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

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

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

我們的目標(biāo)玩家是進(jìn)階和 IP 玩家，他對(duì)端游是有一定的熟悉度，在 BR 類型的游戲有一定的熟練度。

由于我們是基于 EA 的 Apex 這個(gè) IP 來開發(fā)，所以需求都會(huì)和 EA 團(tuán)隊(duì)合作討論，我們把這個(gè)想法同步給了 EA 團(tuán)隊(duì)，很高興這樣的想法也符合 EA 團(tuán)隊(duì)的預(yù)期，最后雙方達(dá)成一致，在保留原有方案的基礎(chǔ)上，為玩家新增一套新的方案。

左右兩套方案的對(duì)比，右側(cè)是我們的 HUD2 方案，大家可以看到這個(gè)的功能色塊都發(fā)生了改變，位置的改變也導(dǎo)致握持的手勢(shì)也發(fā)生了變化。

大家看一下實(shí)際演示視頻，這是國(guó)外主播的一個(gè)操作視頻：

大家可以看到，玩家對(duì)界面進(jìn)行了自定義，基于原有的信息進(jìn)行了整合，玩家有更多的操作空間，內(nèi)容呈現(xiàn)也更加簡(jiǎn)潔。
???????????????????????????

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

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

第二個(gè)難點(diǎn)，面對(duì)復(fù)雜的功能如何簡(jiǎn)化手游體驗(yàn)?zāi)兀?/p>

這是 Apex 的一個(gè)特色局內(nèi)系統(tǒng)，據(jù)說是 EA 研發(fā)團(tuán)隊(duì)在戰(zhàn)斗中關(guān)閉麥克風(fēng)狀態(tài)下設(shè)計(jì)出來的，玩家可以利用這 8 個(gè)內(nèi)容進(jìn)行各類標(biāo)記，也獲得了許多玩家很高的認(rèn)可度，甚至有玩家因此寫感謝信。

面對(duì)這么優(yōu)秀的戰(zhàn)斗溝通系統(tǒng)，我們想的肯定就是先還原，一方面我們是根據(jù) IP 還原端游體驗(yàn)，另一方面以固有的思維去設(shè)計(jì)。

因此第一版最終采用 6 個(gè)標(biāo)記作為默認(rèn)功能，玩家可以通過長(zhǎng)按標(biāo)記按鈕，呼出輪盤進(jìn)行標(biāo)記。我們高興地進(jìn)行第一輪測(cè)試，但結(jié)果并不符合我們預(yù)期。

那么完全復(fù)刻端游功能，這條路就走不通了嗎？我們?cè)谟醚袌F(tuán)隊(duì)的幫助下，梳理了 2 個(gè)核心痛點(diǎn)：

1. 圖標(biāo)數(shù)量多且難識(shí)別；
2. 戰(zhàn)斗節(jié)奏快難以高精準(zhǔn)標(biāo)記。

還原的路走不通，我們就換條路走：優(yōu)化。作為游戲交互設(shè)計(jì)師，可以運(yùn)用交互設(shè)計(jì)中四策略的方式：刪除、組織、隱藏、轉(zhuǎn)移。

根據(jù)總結(jié)的問題，整理了 2 個(gè)對(duì)應(yīng)的設(shè)計(jì)策略：第一是減少數(shù)量，第二是使用場(chǎng)景精細(xì)化，提升操作效率。接下來我會(huì)對(duì)這 2 個(gè)問題進(jìn)行解決方案的分享。

問題 1：圖標(biāo)多且難識(shí)別

我們從玩家的使用場(chǎng)景中發(fā)現(xiàn)，圖標(biāo)數(shù)量太多且造型相似，會(huì)造成新手認(rèn)知門檻高，所以要梳理一下玩家的標(biāo)記行為，這里可以分為兩大類：

第一類是戰(zhàn)術(shù)性預(yù)判，這一類是使用比較低頻的，可以考慮隱藏，兼顧高手玩家；

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

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

問題 2：戰(zhàn)斗節(jié)奏快難以高精準(zhǔn)標(biāo)記

這時(shí)候我們就想，從規(guī)則上入手，是否可以把一些簡(jiǎn)單規(guī)則交給系統(tǒng)來判斷。

于是我們將一些有品級(jí)劃分的物資（里面會(huì)有一些通用規(guī)則判斷），并把這些東西交給了系統(tǒng)，實(shí)現(xiàn)自動(dòng)化，玩家再也不用瞄準(zhǔn)了。這樣就能給他們減負(fù)，而復(fù)雜的狀況還是交由人腦來判斷，保留玩家的手動(dòng)操作。

解決方案是，在自動(dòng)化方面，將一些通用規(guī)則判斷的信息交給系統(tǒng)，減少玩家操作負(fù)擔(dān)；同時(shí)在玩家標(biāo)記后，會(huì)及時(shí)反饋給隊(duì)友提示，隊(duì)友也可以預(yù)訂物品。玩家的行為和隊(duì)友的反饋形成閉環(huán)，避免信息的遺漏。

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

當(dāng)我們將端游的標(biāo)記系統(tǒng)，部分標(biāo)記內(nèi)容簡(jiǎn)化成自動(dòng)化就沒有問題了嗎？顯然不是，因?yàn)樽詣?dòng)化也會(huì)帶來其他的問題。

比如頻繁的標(biāo)記提醒，還有標(biāo)記內(nèi)容不是隊(duì)友需要的等等，我們又對(duì)這些細(xì)節(jié)進(jìn)行更多的打磨，在其他環(huán)節(jié)完善，目的是為了玩家更好的團(tuán)隊(duì)協(xié)作。

最后的測(cè)試結(jié)果也符合我們的預(yù)期，玩家每局平均操作的次數(shù)，從 8 次下降為 2 次，簡(jiǎn)化的策略極大減少了玩家的操作負(fù)擔(dān)。

簡(jiǎn)單總結(jié)一下設(shè)計(jì)切入角度：基于功能，從使用場(chǎng)景出發(fā)，可以從頻率和規(guī)則兩個(gè)角度可以切入。頻率角度，高頻可以顯示，低頻操作隱藏；在規(guī)則角度，需要精細(xì)化的保留手動(dòng)，通用規(guī)則可以考慮自動(dòng)化。

最后總結(jié)本次分享的思路，針對(duì)第一個(gè)難點(diǎn)我總結(jié)了兩個(gè)內(nèi)容：

第一個(gè)是確立評(píng)估維度，快速確定操作布局；

第二個(gè)從玩家群體特性出發(fā)，結(jié)合 IP 的特色做差異化。

針對(duì)第二個(gè)難點(diǎn)：

第一，善用交互設(shè)計(jì)的四策略：刪除、組織、轉(zhuǎn)移、隱藏；

第二，基于使用場(chǎng)景去簡(jiǎn)化功能，從頻率和規(guī)則入手。

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

王珊：大家好，我是騰訊互娛光子設(shè)計(jì)中心《ApexM》項(xiàng)目主設(shè)王珊。很榮幸今天可以參加 TGDC 這個(gè)大分享盛會(huì)。今天視覺部分想和大家分享：ApexM 端轉(zhuǎn)手過程中視覺 UI 的繼承與創(chuàng)新。

今天的內(nèi)容分為兩部分。第一：局內(nèi)系統(tǒng)，淺談一下我們的柵格化系統(tǒng)。

前面我的同事阿澤分享了局內(nèi)的 HUD 交互內(nèi)容，對(duì)于一款 FPS 來說，游戲圖形的識(shí)別性與秩序感的建立至關(guān)重要。我們?cè)谇捌诰謨?nèi)的圖形設(shè)計(jì)中，也一度有設(shè)計(jì)不統(tǒng)一的情況，那后續(xù)是做哪些調(diào)整，保持這種統(tǒng)一性呢？

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

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

怎么使用？簡(jiǎn)單概括為四步驟：

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

第二步，制定柵格數(shù)量；

第三步，確定布局和結(jié)構(gòu)之后；

第四步，利用黃金分割比例對(duì)界面和元素進(jìn)行定位。

中間有幾個(gè)需要注意的關(guān)鍵點(diǎn)分別是：整體的比例、節(jié)奏感、空白、層次。

ApexM 在游戲圖形圖標(biāo)的設(shè)計(jì)上，會(huì)更加要求外輪廓造型是簡(jiǎn)潔和概括的，我們會(huì)避免很多細(xì)碎的細(xì)節(jié)塑造，更加注重體塊感傳達(dá)出來的直接感受。

局內(nèi)外所有圖形都是基于大家現(xiàn)在看到的規(guī)范元素組件去設(shè)計(jì)，看到這個(gè)方塊會(huì)不會(huì)覺得有點(diǎn)像小時(shí)候練字用到的田字格，其實(shí)它們的道理是相通的。

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

最后這兩幅也是最后的 HUD 效果圖，柵格化為 HUD 布局進(jìn)行了更合理的區(qū)域劃分，HUD 所有功能模塊采用統(tǒng)一繪制尺寸和統(tǒng)一的間距規(guī)范，所有的圖標(biāo)、文本、間距都是基于柵格化計(jì)算之后再設(shè)計(jì)的。

柵格化的意義，除了保證清晰度和一致性，也是有利于視覺引導(dǎo)。通過規(guī)則以加強(qiáng)視覺層次結(jié)構(gòu)，提升設(shè)計(jì)理解力；更符合多設(shè)備環(huán)境的動(dòng)態(tài)響應(yīng)式設(shè)計(jì)要求；一致性的 UI 元素規(guī)范有益于加快設(shè)計(jì)進(jìn)程，避免重復(fù)勞動(dòng)；使設(shè)計(jì)易于修改和重復(fù)使用；更有利于各模塊崗位的設(shè)計(jì)協(xié)作，比如發(fā)給 CP 方制作也是有規(guī)范可循的。

ApexM 手游的目標(biāo)是，全球化面對(duì)更廣的玩家群體，去煥發(fā) IP 新的活力，成長(zhǎng)為一款長(zhǎng)線運(yùn)營(yíng)的經(jīng)典產(chǎn)品。

基于剛才的目標(biāo)，端轉(zhuǎn)手有許多困難擺在視覺設(shè)計(jì)師的面前，比如如何找到與端游的設(shè)計(jì)共性，又能創(chuàng)新凸顯出手游獨(dú)特的視覺調(diào)性。

我認(rèn)為，不論是還原還是創(chuàng)新，設(shè)計(jì)前都需要先去了解世界觀，并且深挖。

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

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

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

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

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

經(jīng)過前期大量的提煉和分析，我們也逐步地總結(jié)出了更適合手游視覺語言，而扁平化的設(shè)計(jì)需要依賴嚴(yán)謹(jǐn)?shù)囊曈X平衡與克制的色彩運(yùn)用。端游圖形基本構(gòu)成有：斜切、切割、矩形、菱形、點(diǎn)陣排列；質(zhì)感有：毛玻璃，戰(zhàn)損等等。

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

第二步進(jìn)行模塊化的 UI 規(guī)范輸出。在項(xiàng)目開發(fā)周期時(shí)限短且需求量巨大的前提下，我們建立了一個(gè)建立完善的組件庫(kù)與規(guī)范庫(kù)，這是保證設(shè)計(jì)的統(tǒng)一性和延展性的必要前提。

持續(xù)做規(guī)范化設(shè)計(jì)能有效地減少試錯(cuò)成本，也可以避免一些不必要的爭(zhēng)議。搭建完整的組件庫(kù)可方便各模塊同學(xué)后續(xù)快速查找和響應(yīng)。除了保證輸出的統(tǒng)一性，也為后續(xù)鋪量打下堅(jiān)實(shí)基礎(chǔ)。

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

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

端游的賽季主題多變，在游戲大廳的設(shè)計(jì)上也是有很好的延展。手游視覺設(shè)計(jì)，如何保持視覺平衡能兼具功能性與運(yùn)營(yíng)要求，還能傳達(dá) ApexM 獨(dú)有的調(diào)性？

初版的大廳設(shè)計(jì)在內(nèi)部公布時(shí)雖然有認(rèn)可的聲音，但并未能讓大家覺得眼前一亮，所以在項(xiàng)目主美的支持下，我們又開始尋找新的方向，尋找更鮮明的記憶點(diǎn)。

就在我們苦于沒有靈感的時(shí)候，端游 S3 賽季有一段預(yù)告片展示的是英雄跳傘前，在船艙內(nèi)部活動(dòng)的一些橋段，每個(gè)英雄都有屬于自己的一塊休息區(qū)域，跳傘前也會(huì)有升降倉(cāng)和頭頂 LED 屏幕顯示小隊(duì)傳奇的照片，整體儀式感非常強(qiáng)。

所以看過這個(gè)視頻之后，引發(fā)了大家很多思考，經(jīng)過很多輪的腦暴，我們決定試著將從新手引導(dǎo)到最后的游戲結(jié)算，整合成一條游戲備賽的概念，貫穿進(jìn)入游戲各個(gè)關(guān)鍵環(huán)節(jié)，希望利用鏡頭做流暢過渡，強(qiáng)化視覺表現(xiàn)力。

大廳的背景設(shè)定，也就鎖定在船艙內(nèi)部，成為核心體驗(yàn)中的很重要的核心環(huán)節(jié)。船艙這個(gè)概念確定，僅是一個(gè)大的前提，落地在具體 UI 設(shè)計(jì)時(shí)，我們同樣經(jīng)歷了長(zhǎng)時(shí)間的推敲和打磨。

期間目標(biāo)是很明確，比如角色的展示就是 Demo 期就確定會(huì)用到半身像。這是和端游不同的一點(diǎn)，但后續(xù)切換到組隊(duì)的時(shí)候就會(huì)變成全身，目的就是為了讓玩家在小畫幅手機(jī)上看到更好的展示模型品質(zhì)效果。

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

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

綜上所述，我們?cè)?IP 視覺繼承上可以總結(jié)出幾個(gè)方面：

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

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

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

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

賽季作為競(jìng)技類型游戲核心商業(yè)化最重要的組成部分，整合了新的賣點(diǎn)、新的角色和皮膚，以及 BattlePass 和其他的特別獎(jiǎng)勵(lì)。它的重要任務(wù)是通過快速和強(qiáng)烈的視覺沖擊來吸引玩家，反復(fù)強(qiáng)化玩家對(duì)賽季的印象，引導(dǎo)玩家去接觸賽季相關(guān)的內(nèi)容。

這里總結(jié)了幾個(gè)設(shè)計(jì)重點(diǎn)，分別是：主題定位，傳奇畫像，風(fēng)格氣氛定調(diào)，鏡頭情境感的代入。

大家看到的這個(gè) Apex 端游賽季主題所做的視覺風(fēng)格拓展，已經(jīng)很豐富了。ApexM 也會(huì)延續(xù)了這一設(shè)計(jì)方式，將更具整體性的主題感氛圍做到代入設(shè)計(jì)，結(jié)合新傳奇屬性，拓展豐富度和新鮮感。

現(xiàn)在大家看到的是端游賽季主體標(biāo)識(shí)，主要色彩的提煉。

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

S1 賽季 LOGO，分別是扁平化、3D 和結(jié)合動(dòng)效之后的效果。這個(gè) S1 LOGO 圖形上方的 7 個(gè)星球，代表了辛迪加組織控制下的 7 個(gè)國(guó)家，概念是 Apex 在辛迪加世界中舉行的首場(chǎng)競(jìng)賽。實(shí)體 LOGO 演繹也是視覺設(shè)計(jì)通過分鏡方式創(chuàng)意輸出，而最終得到的效果呈現(xiàn)。

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

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

前期綜合主美意見，考慮到后續(xù)的制作成本，所以后續(xù)只需在原 3D 搭建的基礎(chǔ)上進(jìn)行屏幕設(shè)計(jì)，結(jié)合動(dòng)效與場(chǎng)景的燈光渲染，完成了一個(gè)可復(fù)制利用的場(chǎng)景模塊。

大家看到藍(lán)色的這塊就是 S1.5 賽季復(fù)用之后的效果。

在視覺元素上的運(yùn)用，我們選擇了 LED 故障風(fēng)與字母動(dòng)態(tài)展示屏幕的效果結(jié)合展廳地面的折射，整體氛圍感是更酷炫的。

S1 整套賽季商店設(shè)計(jì)也成為了一個(gè)優(yōu)秀設(shè)計(jì)案例，奠定了 ApexM 官網(wǎng)風(fēng)格。

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

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

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

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

現(xiàn)在看到的是 ApexM 商業(yè)運(yùn)營(yíng)圖，設(shè)計(jì)難度在于，如何做到吸引玩家還能保有強(qiáng)烈獨(dú)特的品牌感， 而且這個(gè)品牌感手游獨(dú)有的，是可以區(qū)別于端游的。

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

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

基于 IP 創(chuàng)新做一個(gè)回答：首先，手游品牌色更加明快，手游與端游整體區(qū)分度更高；把原有圖形的某些設(shè)計(jì)細(xì)節(jié)改為更適合手游的新表達(dá)，不僅在平面結(jié)構(gòu)中不斷把它強(qiáng)調(diào)出來，去廣泛應(yīng)用于大型版面設(shè)計(jì)，提升圖形曝光量；手游也有更完整的賽季展示，更快的更新節(jié)奏，和更鮮明的商業(yè)化主題包裝內(nèi)容。

綜上所述，手游延續(xù) IP 視覺設(shè)計(jì)是為了讓玩家可以體驗(yàn)到原汁原味的 Apex。Apex 手游視覺設(shè)計(jì)所做的一切繼承與創(chuàng)新，都是基于產(chǎn)品環(huán)境的改變。

手機(jī)平臺(tái)較之于 PC 平臺(tái)，有著受眾群體龐大、小屏幕高 DPI、在線時(shí)間更靈活、觀察與操作一體等天然區(qū)別，隨之產(chǎn)生諸如游戲時(shí)間碎片化、使用場(chǎng)景復(fù)雜、目標(biāo)用戶范圍擴(kuò)展等一系列需要解決的問題。

針對(duì)這些問題，所以 ApexM 在視覺調(diào)性上選擇更大膽、更快、更有活力與能量的新表達(dá)，希望將 ApexM 帶到了用戶規(guī)模更加龐大的新舞臺(tái)。

Apex 故事還在繼續(xù)，ApexM 設(shè)計(jì)之路也在繼續(xù)。我今天的分享到此結(jié)束，感謝各位，謝謝。

轉(zhuǎn)載自光子設(shè)計(jì)中心公眾號(hào)：「光子設(shè)計(jì)中心（GZDesigncenter）」