《QQ飛車手遊》UI設計升級回顧

【Q+升級】源起於暑期大版本中飛車世界觀新加入的IP與劇情，基於四大車廠的世界觀背景，從Q-SPEED神祕能量方塊提煉出“輕科技”這一設計元素，通過該元素在UI表現和使用者體驗層面的應用和包裝，來升級和強化玩家對遊戲世界觀的感知。



我們將從以下模組來回顧這次的設計過程：

• 大廳的視覺重新整理——去繁就簡，優化展示空間
• 主流程優化——優化玩家的核心操作流程
• 世界觀在UI層面的表達
• 娛樂視聽給UI設計帶來的啟發
  

一、大廳的視覺重新整理

設計目標

通過大廳視覺的重新整理，直觀、快速地改變玩家感受。

現狀分析

1. 介面UI方面

原有大廳的介面UI分割感較重（頂欄UI、底部UI和右側UI較為分散），加之運營按鈕質感太過厚重，使得玩家的視覺注意力無法聚焦。


2.資訊佈局方面

原有的大廳玩法入口的佈局和層級過於平均，未體現出【使用頻率】和【重要程度】的差異（對戰房間>賽事比賽>個人生涯>休閒區）。

設計實施

首先，我們從Q-SPEED中提煉出了【輕科技】這一基本設計要素，並基於這一要素對玩法入口的UI進行設計優化和調整。同時，我們希望將【輕科技】的設計要素延展到整個大廳的UI設計中，所以對原有大廳圖示進行了【輕質化】方向的調整和優化。




其次，在資訊佈局的優化方面，通過對玩法入口進行傾斜設計和透視處理，一方面給左側人物創造更多展示空間，以此來強化人物的個性展示；另一方面，希望通過加強角色與空間場景的關聯性，來提升玩家代入感和沉浸感。UI設計應該服務並提升產品整體的娛樂性，而不是單純為了“好看”。


除此之外，大廳還承載了另一個重要的展示功能——魔法套裝，而優化後的大廳設計在魔法套裝的展示效果方面會更加突出。


設計小結

大廳設計的重新整理，在融合了輕科技要素的基礎上，有利於凸顯玩家個性化的展示，一定程度上提升了玩家的沉浸感，在功能性和視覺表現層面都有所提升。

二、主流程的優化

設計目標

優化遊戲的主流程介面，提升核心體驗的流暢性。

設計實踐

1. 模式選擇

通過延用【輕科技】設計元素，來強化科技感在UI設計中的傳達。另外在不影響體驗的情況下增加了少量動畫，以此來提升模式選擇的趣味性。



2. 房間

房間是主流程中很關鍵的一環，在不同模式下分3人和6人兩種房間。在房間中，玩家既有交流的需求又有展示的需求。在原有的6人房間的設計中，為了使展示空間最大化採用了模組化設計，但這樣的設計應用到3人房間卻使得房間整體的空間利用率不夠高，且展示的效果也不理想。因此，在此次的Q+設計改版中，設計師為了提升房間整體的空間感、突出人物的展示效果，通過改版為後續房間內的互動創造更多空間。


3.Loading

Loading是玩家進入單局前的第一印象。原有loading介面中多層級、分隔式的展示形式，在延展空間方面有侷限性，排版上也顯得非常拘謹。而新的Loading設計成橫向的展示模組，通透輕薄的質感上延用了Q-SPEED【輕科技】設計元素，同時也考慮到了後續圖示展示的延展性。此外，更加整體的排版和全屏展示的地圖有助於加深玩家對於地圖的印象。


4.單局

在原有的單局設計中，左側襯底缺少細節和質感，右側圖示質感不夠統一。而優化後，人物名稱的襯底通過一些紋理和細節的應用來提升UI科技感的傳達，右側圖示在視覺效果上也更加輕薄和統一。


5.個人空間+商城

除了以上主流程，我們在個人空間、商城UI上也做了優化。原有個人空間資訊堆疊感重，玩家不能第一時間讀取重要資訊。新的個人空間採用了卡片式設計結合UI處理（比如電子線、發光外框、半透質感等），除了可以增加形式感，也有利於【輕科技】設計元素的統一傳達。


優化前的商城介面，商品名稱襯底的顏色飽和度過高，物品的展示相對較弱、不夠突出，另外商城售賣缺少主推的商品展示，玩家不能在第一時間關注到主推的商品。優化後的商城介面，通過弱化物品名稱的層級來突出物品本身，同時增設了推薦位，使得主推產品在商城推廣中的展示效果更加突出。此外，在UI細節表現上也延用了輕科技元素比如按鈕的電子線、背景的蜂窩紋理等。


設計小結

主流程以及商城等介面的優化是為了給玩家帶來更好的遊戲體驗。我們希望通過【輕科技】元素在設計中的融合和應用來強化世界觀在UI表現中的傳達，之後隨著世界觀不斷完善還有很大的優化和調整的空間。

三、世界觀在UI層面的表達

如何將世界觀與UI表現有效結合？需要我們在充分理解世界觀背景的基礎上進行設計元素的提取和轉化。飛車世界觀是以四大車廠圍繞“Q-SPEED”（傳說中車神的遺留物）這個核心展開的一系列故事，而每個車廠都有一位車神代言人，美術需要針對不同車廠的風格差異對車神形象進行設計，再結合劇情模式讓四位車神首次登場的視覺形象能夠給玩家留下直觀而深刻的初始印象。

首先登場的是極星動力車廠的車神——【鏡】，該車廠崇尚自然與藝術，【鏡】在劇情中的設定是多重人格，而其中一個人格的身份是一位歌姬，因此在【鏡】出場時設計了比較多的音符元素，同時採用了她所在車廠（極星動力）的主色系紫色為主基調。

然後出場的是雷諾重工的車神——【雷因】，該車廠崇尚的是厚重與沉穩，所以在【雷因】出場時運用了齒輪的設計元素來體現工業硬朗的感覺，同時搭配了他所在車廠（雷諾重工）的主色系綠色為主基調。


接著出場的是【西澤爾】——特洛伊工業的車神，該車廠崇尚的是進攻與尖銳，因此在【西澤爾】出場時，設計了三角紋理的元素凸顯攻擊感和尖銳感，同時搭配他所在車廠（特洛伊工業）的主色系紅色為主基調。

最後出場的是阿爾法科技的車神——【穆尼克拉】，該車廠崇尚平衡，因此在【穆尼克拉】出場時，使用了代表穩定結構的蜂窩圖形來設計，同時搭配他所在車廠（阿爾法科技）的主色系藍色為主基調。


運營活動-QS音樂節

四大車廠暑假版本中首次亮相，同期上線的還有QQ飛車暑假運營活動——《QS音樂節》。


我們希望藉助運營活動的推廣最大限度地傳遞四大車廠的概念，因此需要設計一個有識別性的符號，貫穿於整個系統的UI介面，以此來強化玩家對此次世界觀更新的整體感知。《QS音樂節》設定的主角是【鏡】，她也是四大車神中首發登場的車神。我們提取了【鏡】的代表裝飾——彼岸花，它的花語是：一面天堂，一面地獄，契合了【鏡】多重身份的特徵，柔美的歌姬身份代表天堂，高傲的車手身份代表地獄。



除了劇情模式，我們在其他場景中也融入了四大車廠的元素。比如在三人房間中，我們使用了四大車廠的LOGO元素，與四大車廠的世界觀相呼應。



另外，美術通過對原有車庫進行改造，為每輛車增加了專屬車廠標識和展示背景，使得車輛本身的故事屬性與劇情聯動形成記憶點，以此來強化世界觀的有效傳達。


四、娛樂視聽給UI設計帶來的啟發

生活中我們常常會關注一些熱門綜藝並被它們的整體視覺包裝所吸引，比如之前熱播的《奇葩說》、《樂隊的夏天》等等。其實很多娛樂視聽類節目的視覺包裝對於遊戲UI表現也是有參考價值的，因為我們遊戲的目標使用者和這些綜藝的主要受眾有一定的重合（多為年輕群體），所以在視覺風格的取向上也是有共通之處的。

設計目標

設計師主動推進3人房間的改造，將熱門視覺包裝元素與遊戲內UI表現相結合。

設計實踐

此次3人房間的改造，部分設計靈感是來自於當時熱播的《創造營2019》的舞臺展示設計，這種比較年輕化、團結協作、積極向上的精神風貌與飛車手遊想要傳達的精神核心是一致的，而遊戲中的“舞臺”就是房間，房間中游戲人物的展示需要舞臺化的包裝，那麼“舞臺”這個元素就是設計的契合點。


3人房間的改造目的是最大程度地滿足玩家個性化展示的需求，而舞臺化的包裝可以提升整體的形式感。但考慮到後續人物互動過程中的動作展示，目前的舞臺設計不易相容，因此改成了較為平面化的設計。

結合綜藝的熱點去設計，也是開拓設計思路的一種方式，在去年的版本設計中，圖鑑模式的舞臺展示、服裝PK模式和當時火熱的101battle模式契合度比較高，所以在設計時借鑑了《創造101》的配色和舞臺效果去做整體的包裝設計。


設計小結

如何合理借鑑熱門綜藝的包裝效果？一方面可以參考其色彩搭配，另一方面也需要根據設計內容尋找契合點。另外，娛樂視聽類的熱門節目，宣傳力度強、覆蓋面廣，在設計中合理運用既可以減少玩家理解成本，還可以與熱度效應相結合，何樂而不為呢？所以，平時多觀察跨行業的一些設計趨勢和風格效果，合理運用到遊戲中可能會有意想不到的效果。


寫在最後

QQ飛車手遊繼承了10年端遊的基因，手遊之於端遊，有傳承也有創新，在這個過程中，需要不斷摸索和調整。我們作為設計師還需要繼續保持敏銳度，加強對遊戲包裝合理性和整體性的思考，為玩家創造更有沉浸感的遊戲體驗。

最後感謝專案組其他同學的鼎力支援和協作！

作者：Kenlex 騰訊互動娛樂 設計師
來源：騰訊遊戲學院
原地址：https://mp.weixin.qq.com/s/Qq0fOQ2YbKLtAxMlv-8Dvg