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