設計總結：騰訊光子《和平精英》全新UI 2.0如何升級至效果拉滿？

本文首發“光子設計中心”公眾號，GameRes獲授權釋出

在《和平精英》兩週年到來之際，光子設計中心《和平精英》設計團隊對遊戲介面及互動體驗進行了全面升級，這次視效煥新將為使用者帶來更簡潔高效且具有沉浸感的遊戲體驗，向使用者傳達“冒險與未來"的品牌概念，並融入和平大世界的自然觀感。

我們在“全球玩家的競技冒險世界”這一品牌概念中，重新定義了品牌的核心風格：屬於勇者的冒險精神、屬於科技的時尚與活力。因此，在這一大背景下，遊戲的版本和故事擁有了科幻氣質的加持，而遊戲介面與互動體驗，也圍繞著這個帶有未來感的體驗目標，為大家呈現出富於沉浸感的互動設計和極具品質感的視覺創意。


1、打造屬於當代青年共同 文化符號與時代記憶

經過兩年的積累，《和平精英》成為了一個立體的超級數字場景，使用者數量也在不斷攀升。根據最新的使用者畫像，我們瞭解到，《和平精英》的使用者群體是年輕時尚、心態樂觀的年輕人，他們積極向上並且對遊戲視效品質有著很高的要求。而我們只有不斷進步，不斷革新才能跟上玩家的腳步，成為當代青年共同的文化符號與時代記憶。

2、用匠心與熱愛打造全新視效藝術

01.視效梳理與調研分析

關於如何做好新的視效方案，和平精英設計團隊做了大量的前期工作，為了能讓設計方案更清晰更有說服力，我們重新審視了現有的視效美術，深度解讀“全球玩家的競技冒險世界”的品牌概念，並對同品類遊戲和新上線遊戲進行了視效分析和趨勢研究。同時，還對和平精英使用者做了畫像和視覺核心的重新梳理。

02.以打造藝術品的專注度完成視效設計

隨著遊戲行業的發展，手機遊戲的精品也越來越多，國內外的精品遊戲也無形中影響了絕大部分玩家的審美上限。遊戲作為“第九藝術”也起到了引導作用。在我們看來，《和平精英》的遊戲動效是一項藝術，能為使用者帶來美好的視效體驗，也將在這個時代留下獨一無二的痕跡。

03.聯合品牌概念煥新，視效DNA無限延展

通過與品牌概念的融合，遊戲設計將擁有更廣闊的舞臺，獨特的視效元素不僅應用於遊戲介面，視效的DNA將成為IP的一部分，締造全新的視覺語言和體驗，也能更好地跟上時代步伐，更好的為使用者服務。

3、全新視效風格品質呈現

01.視覺創意策略


為了讓設計更有著力點，我們通過使用者群體分析、遊戲自身特性、視效流行趨勢等多維度資料收集，並結合的立體設計法進行分析，尋找設計的突破口。

與此同時，我們還深入分析了《和平精英》的美術風格、世界觀設定、使用者群體。通過分析，我們得知和平精英擁有著大量的年輕使用者，我們在前期探索的時候也將側重點往符合現代年輕人審美的方向傾斜。而且現代越來越多的遊戲和影視也都強調沉浸感，而我們也希望能給使用者帶來更深層次的遊戲視效體驗。

在找到，年輕、沉浸感、時尚、軍事冒險等關鍵詞之後，我們開始不斷挖掘設計靈感，從扁平簡約到寫實重度硬核，從輕鬆娛樂到軍事戰爭，從輕科幻到硬核科技。全方位的探索能帶給我們不同的設計靈感，也能為我們接下來的設計提供基礎依據。

未來態-寫實競技-多元娛樂


在這個階段我們對比了和平精英遊戲層和我們使用者層的特點，發現雙方的需求是具備高重合性的。這個也跟我們“和平精英競技冒險世界”的新理念不謀而合。


有了上面的方法、理論基礎，我們拉起多次高效會議進行分析總結。


通過抽離、提煉、融合，由點及面的多維度思考，總結優秀的設計方法、理清相關設計體系脈絡。在整理分析的時候，我們發現現代遊戲的視覺趨勢-逐漸的明亮、扁平、高效、娛樂化，同時有有著炫酷擬真的動效場景配合。

這種視覺趨勢也跟我們心目中的和平精英2.0愈發接近。我們也迫不急的待想進行設計驗證，所以我們進行了方案的前瞻設計。

2.前瞻設計

在進行了一系列調研和大量的討論之後，設計團隊開始了前瞻設計工作。此時，設計思路已經非常明確：“簡潔直觀”、“硬朗氣質和冒險衝擊力”、“扁平輕薄”是我們希望體現的設計原則；多元時尚、競技冒險、潮流科幻作是我們的核心概念，而“競技冒險世界”則是我們希望傳遞的故事體驗。

為了達成設計目標，我們建立了一個“視效座標體系”，以軍事硬核至多元娛樂為X軸，軍事冒險（和平精英的核心理念）為Y軸.這個座標體系能幫助我們很好確立自身風格。


基於“視效座標體系”，設計團隊產出了大量的概念設計草圖，這些圖雖然不夠精緻，但正是這些圖結合視效座標體系以及我們遊戲自身和使用者特性，讓我們快速確認應該嘗試的方向。


隨後，經過一系列調研討論和內部研究，我們終於完成了前瞻設計。

3.升級互動體驗

隨著功能的逐漸豐富，如何將資訊更加高效且清晰的傳達給玩家，以及結合產品策略對功能的可持續性的承載，是大廳迭代面臨的挑戰。

為了使大廳介面更加簡潔易用，我們將玩法、社交、活動和功能劃分為四大功能模組，以保證玩家能夠迅速找到自己的目標。而排行榜、軍團、設定、郵件等功能則被收入二級介面，讓大廳內容更加簡潔清晰，所有的設計都是為了讓介面資訊更“輕”的呈現。


光子雞盔仔——訊息整合


其次，光子雞——盔仔將會一直在大廳中陪伴著玩家，它不僅能夠協助玩家處理遊戲資訊、領取獎勵，另外，玩家還可以通過手勢互動可以和盔仔進行互動，增強情感聯結。

資訊大廳——遊戲大事件


原來的遊戲資訊是點狀傳達給玩家，希望通過整合資訊資源，將遊戲大事件按時序性的傳遞，玩家在這裡可以瞭解到現在的和平精英在發生什麼，當前事件有什麼好玩的內容，有幫助的攻略等。有效的幫助玩家建立目標，增強玩家粘性。

4.視創策略

結合交相體驗的升級，我們又開始了最終的設計嘗試。在這個設計過程中，我們也不斷地在研究和發掘更適合我們的獨特設計語言。我們發現了一個非常適合我們的新的設計語言-擬態設計，就如同擬態章魚這種聰明的海洋生物會任意改變自身的顏色和形狀，模擬海洋中的多種環境和生物，我們希望我們的視效也是這種擬態的、多變的設計。

擁有可變化的外表，就如同遊戲中的服裝載具千變萬化。唯一不變的是我們競技冒險核心，能不斷地帶給使用者新鮮感。同時為了加強遊戲的沉浸感，我們還將電影化大場景的理念帶入到設計中。這種全場景式的背景結合扁平化的現代設計手法得到意想不到的效果。


在新一輪的風格設計中，我們又發現了兩種新的設計方式：擬態迷彩和全景化動態背景。

擬態迷彩的設計語言，設計既符合遊戲核心——軍事冒險，又具有現代潮流的年輕感。我們希望把擬態迷彩做成我們遊戲的視覺核心,作為遊戲的視覺核心基因在遊戲的每個介面設計裡進行傳承。


全景化動態背景的發現也是一個意外收穫，在我們設計團隊內部對設計風格進行動態預演的時候，發現我們遊戲內的通用背景動起來的時候會極大程度的提高遊戲的沉浸感，彷彿每個介面都活起來了。

擬態是一個介於真實和虛擬之間的設計方式，這裡也融入了擬態的理念，模擬現實世界的環境：四季、天氣、場景等進行簡化拆分和融合。通過遊戲的版本賽季切換來切換不同符合賽季風格的動態背景，讓使用者每一次更新賽季都能體會到全面的視效革新，不再是一成不變。


5.全景新擬態視效

我們發掘和平精英需要更亮的色彩、簡潔的造型、輕度質感、沉浸式感受讓遊戲看起來更加現代潮流，同時《和平精英》作為一款現在流行的多元融合的手遊，需要承載更多元的風格和方向。

我們設計團隊共同給這個設計方向起了一個全新的名稱-全景新擬態視效。這也是我們設計團隊比較驕傲的設計結果，是經過了每個人夜以繼日的不斷努力找尋、嘗試、失敗、創新、打磨得到的果實。

設計核心展示

核心色彩



設計DNA


輔助圖形


現代簡約風


此次品牌視效升級承載了《和平精英》整個專案和設計團隊的心血，期望能讓和平精英變得更好看、更好玩、更好用。2週年僅僅只是一個開始，真正的冒險還在後面。

起飛！和平精英。


設計指導：Jessia、蟲子
品牌設計：Jas、宋宋、曉哲、少恆、偉哥、強總
品牌協助：麥客士、木木三、Alphonse、
互動設計：甜的蔥、布拿拿、大磚頭、Marble
視覺設計：麥客士、Chokwan、老喵、大象、阿磊、薛小北、奧特漫、Asura、柴柴、十一
動效設計：Super、綠鯉魚、糖喵喵、小劍、包子、老仙女、皮皮
專案管理：霍格、星星