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