作者：Kenlex，騰訊互動娛樂設計師

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

從“Q-SPEED”核心能量衍生出的輕科技要素

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

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

大廳的視覺刷新

• 設計目标

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

• 現狀分析

1. 界面UI方面

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

原有大廳UI 分割感較重

大廳修改前質感偏厚重

2.信息布局方面

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

• 設計實施

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

【輕科技】設計要素提取

玩法入口的設計優化

圖标及質感修改對比

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

信息布局優化交互稿

傾斜後對比

應用到設計中的效果

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

改版前的魔法套裝效果

改版後的魔法套裝效果

• 設計小結

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

主流程的優化

• 設計目标

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

• 設計實踐

1. 模式選擇

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

模式選擇界面修改前後對比

模式選擇增加動畫後的效果

2. 房間

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

改版前的3人房間

改版後的3人房間

3.Loading

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

改版前的loading界面

改版後的loading界面

4.單局

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

單局修改前

單局修改後

5.個人空間 商城

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

改版前的個人空間

改版前的個人空間

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

改版前的商城

改版後的商城

商城修改細節

• 設計小結

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

世界觀在UI層面的表達

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

四大車廠宣傳海報

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

鏡的出場動畫

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

雷因的出場動畫

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

西澤爾的出場動畫

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

穆尼克拉的出場動畫

運營活動-QS音樂節

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

QS音樂節

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

彼岸花的圖形化設計

圖形在界面中的應用

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

三人房中的四大車廠元素

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

新的四大車廠車庫

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

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

• 設計目标

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

• 設計實踐

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

創造營的舞台

改版前的3人房間

改版後的3人房間

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

設計修改後（取消3D地台設計，增加了車廠元素，強調世界觀）

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

101元素參考

圖鑒系統結合101的設計

• 設計小結

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

寫在最後

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

最後感謝項目組其他同學的鼎力支持和協作！

來源：騰訊遊戲學院

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!