2022-12-13 濤濤
一、改版背景
QQ游戲中心是手Q用戶觸達游戲的重要場景，每天有海量用戶來此進行游戲相關的互動操作，隨著產品的功能迭代，體驗的逐步更新，用戶對QQ游戲中心也有著更多更強的訴求。
在2022年的研究報告《游戲中心核心價值及機會點定性研究》中發現用戶在游戲中心內最為關心的是領取福利，通過在游戲中心獲得游戲相關的禮品道具幫助提升游戲體驗。同時用戶對游戲有著較強的社交感、成就感、沉浸感訴求。
隨著產品目標的調整，游戲中心的功能也逐漸豐富化，除開領福利和找游戲，用戶可以在此消費游戲內容、購買游戲道具、以及使用游戲相關功能等，用戶觸達游戲的方式變得更加多元，用戶的粘黏性也進一步提升，產品依勢也需要打造更好的產品游戲氛圍感和品牌印象來建立用戶口碑、提升轉化。
同時，以“生機”為設計理念的QQ，也進行了體驗上的版本迭代，游戲中心作為QQ內的重要業務，也將跟隨緊隨其后完成體驗的更迭，提升用戶體驗、延續QQ品牌基因。
二、制定設計策略
對用戶、產品、設計的訴求進行整合后，梳理出本次改版的基本設計思路——在提升產品用戶體驗的基礎上，以品牌符號強化產品的記憶點，一方面從產品體驗上給用戶帶來更順暢體驗，同時以品牌圖形強化游戲感和沉浸感，提升用戶心中的品牌印象。
優化基礎體驗：跟隨手Q“生機”設計理念和界面風格，統一UI界面樣式 ；重構內容消費的信息容器，提升內容消費效率；提升設計效率，以及打造更高效團隊合作方式。
打造品牌記憶點：通過品牌基因的植入、游戲氛圍感的增強，讓產品更具辨識度，同時加強產品的游戲屬性，強化用戶的沉浸感。
游戲中心改版總覽圖
三、解決問題
3.1 基礎體驗優化
游戲中心本次改版在體驗上的優化聚焦在3方面：
① 煥新界面
隨著產品功能的擴充和迭代，游戲中心的界面風格開始趨于參差，同時伴隨QQ設計規范——Q語言的更新，游戲中心的首要任務即完成界面風格的統一。
· 統一風格
以往的游戲中心，采用更為豐富多彩的設計語言，導致從手Q進到游戲中心較為強烈的割裂感。而本次改版中延續手Q的簡約透氣的風格表現，通過色彩樣式、組件、圓角等設計要素將界面進行規范統一，保證體驗的一致性。
· 求同存異
在首頁、游戲、攻略這3個場景，界面的風格向手Q設計語言靠攏，色調以手Q藍為主，以相對簡潔的界面風格保證內容傳遞的高效性。
同時根據業務訴求，也保持了游戲中心自有特色——在福利和商城tab兩個主場景下強化游戲氛圍感：采用3D圖形和多彩圖標、界面主色調使用情緒更高的橙黃色，讓整體感知更符合產品的特質。
除開界面風格，圖標的設計也融入了游戲中心的特色——保持基礎型與手Q圖標一致外，同時將一些圖標通過游戲化語義表達出來，使其更具趣味性和游戲感。
②重構容器
· 優化內容消費體驗
內容卡片結構化
游戲中心的消費內容來源豐富，包含問答站、小世界、頻道等多處內容源，給用戶帶來海量內容的同時，也導致了信息容器的冗雜，增加用戶的認知負擔、降低瀏覽效率。
在前期和產品的梳理中，發現游戲中心的feed類型可以分為4大類，總計有21種樣式。為解決用戶的瀏覽體驗問題，對feeds結構進行了結構化整理，以流式布局將所有樣式整合為6個部分，基于不同消費內容去排列組合feed類型，簡化產品邏輯，同時用戶更聚焦內容閱讀。
· 提升游戲分發效率
游戲tab作為游戲分發的主要場景，改版前主要以橫向列表容器去承載游戲信息，用戶探索新游的效率較低，同時雷同化的結構，容易瀏覽疲勞。
針對以上情況，在頁面設計上豐富了承載容器的樣式，采用高效率的游戲圖標排列或者游戲合集卡片，提高了瀏覽效率，也讓用戶更容易命中自己鐘愛的游戲類型，不同的容器類型組合也讓整個瀏覽更有節奏，減少疲勞感。
③提升設計效率
游戲中心在以往產品功能的快速迭代中，由于規范和組件的不完善以及和開發同學協作模式的不確定性，讓產品界面的實現往往不盡滿意，無論是開發效率還是還原程度都受到一定的影響，最終導致用戶體驗的不完滿，所以本次的改版，提升設計的效率也是體驗提升的重要一環
· 統一設計規范
界面的基礎樣式和控件，和手Q基本規范保持一致，包括顏色、圖標風格、基礎控件、圓角、柵格等。同時基于業務的訴求，我們在手Q基礎上拉出一條規范支線用于游戲中心的設計——主要在基礎色、圖標等拓展了更多樣式。
· 提升協作效率
以往黑夜模式的適配，開發和設計需要同時輸出和還原兩次設計稿，導致適配成本較高。在本次改版中，將新風格頁面的組件token化，搭建起設計和開發之間界面樣式的映射關系，開發和設計只需還原一次設計稿，即可完成黑夜模式的適配，達到高效設計、快速上線迭代目的。
黑夜模式的上線，也提升了游戲中心的瀏覽感受，讓用戶的體驗更友好、更親近用戶，回歸Q語言親和自然的設計原則。
3.2 打造品牌記憶點
① 打造品牌記憶符號
QQ圍繞社交有效性、社交廣度與深度、社交動力等維度，打造一個積極向上充滿生命力的社交生態體系。生機的理念承載樂觀活力與積極延續，具備有序和精致的特點，也象征萬物發展所蘊含的生命力。——Q語言-設計理念
在游戲的世界觀中，“能量”經常作為源動力元素以推動游戲進展，QQ游戲中心承接Q語言“生機”的設計理念，提煉衍生“能量”概念，以能量元素將生機理念具像化，賦予產品積極快樂充滿活力的品牌感知。
在確定能量作為核心關鍵詞后，對此發進行情緒版關鍵詞的發散，結合前文提到各方訴求，最終把關鍵詞鎖定到能量、游戲感、氛圍上。
② 品牌基因拓展
在對關鍵詞的發散階段，討論和嘗試了多種能將“能量”概念視覺化的元素，考慮到UI界面的延展性和可用性，最終把可視化元素鎖定在寶石和光上——寶石造型上相對簡單，光在動畫塑造上能擁有多樣豐富的表現形式。
為契合概念的設定和后續的延展，我們把寶石定義為能量石。在能量石的設計上，特意營造出能量充盈、光感琉璃的視覺感受，造型上采用多面切割結構，色彩上兼容藍色和黃色兩種色調，以匹配游戲中心的整體界面風格。
除開主體圖形，也從其他設計維度去落地能量的設計理念：
能量之石
除開前面的基礎寶石，也設計了多種能量石的造型，并兼容磨砂質感，以應對不同場景使用。
在UI界面的運用
在產品的核心界面上，將能量石作為背景圖案使用，強化品牌和氛圍感；
和業務也進行結合——以能量石將商城的幸運值圖形化，讓品牌和功能直接連接起來；
把能量石材質和游戲元素進行結合——王者皮膚墻功能內，將游戲LOGO賦予能量石材質，讓游戲和平臺品牌之間產生品牌上的關聯。
能量之石圖形在界面內的運用
與3D圖形的結合
寶箱是游戲中心一個重要道具，每日有大量活躍用戶來游戲中心做任務開寶箱，開寶箱成為了產品觸達用戶的高頻場景。
因此對寶箱進行了設計，希望在高觸發場景加強用戶的品牌感知，強化游戲感。寶箱在造型上采用了和寶石一樣的切割造型，同時寶箱上加入了能量石，把3D圖形和能量石進行結合。
除開寶箱外，對業務內常用的圖標進行了3D化處理。
3D圖形在界面內的運用
· 動效
在動效的設計上，也承接能量的設計理念，以光為設計靈感，設計了游戲感強烈，電光火石般的的動畫效果——能量光，用于界面內UI界面和3D圖形動畫，強化整個產品的游戲氛圍感。
動效在界面中的運用
· 顏色
在界面顏色的使用上，主界面延續手Q的標準藍色調，包括控件、字色也與手Q統一，保證界面整體色調的延續性。同時基于業務訴求，拓展了情緒感知更強烈的“游戲橙”。
對于以內容體驗為主的頁面——比如游戲中心的首頁、游戲發現頁、攻略頁，使用手Q的標準藍；在需要強氛圍和游戲感的頁面——游戲福利頁和游戲商城頁，采用游戲橙。
· 質感
由于游戲中心內多處用到的3D元素，對3D的質感進行了規范統一。
材質
考慮到UI界面的通用性，避免3D材質的喧賓奪主，材質風格以簡單通用為主，顏色以界面主色調為基礎，漫射材質多營造輕黏土的通用質感；針對能量石的材質，則采用光感通透的玻璃材質。
燈光
燈光采用基本的三點布光，旨在表現物體的質感、立體感和空間透視感。整體布光氛圍積極，友好，明朗，透傳QQ活力生動的品牌氣質。
· 字體
游戲平臺內，有著較多需要運營設計的場景，字體是信息展示的重要元素，選擇了造型感較強造字工房的逼格青春字體，作為界面內的強調字體，更好的營造游戲氛圍感。
字體在運營活動和UI界面中的運用
四、總結
QQ游戲中心作為QQ用戶觸達游戲的重要途徑，用戶們在體驗鏈路上有著各式各樣的訴求。產品功能的多元化也讓用戶體驗必須追隨功能持續迭代。擁有幾億用戶的QQ，各類產品的統一優質體驗，也是“一切以用戶為中心”原則的必要體現。