對(duì)于設(shè)計(jì)改版大家并不陌生，每個(gè)項(xiàng)目的改版中都會(huì)有不同的方法或者流程，本文重點(diǎn)在于分析我們?cè)凇甘謾C(jī)QQ游戲中心」改版中使用到的流程或者設(shè)計(jì)方法，并且通過本文總結(jié)出一些經(jīng)驗(yàn)、方法或內(nèi)容，希望可以在后續(xù)其他的項(xiàng)目設(shè)計(jì)中得以應(yīng)用。

本次手機(jī)QQ游戲中心作為較大型的設(shè)計(jì)改版項(xiàng)目，我們需要從整體去看每個(gè)階段中的設(shè)計(jì)需要輸出的內(nèi)容，更加系統(tǒng)性地思考整體的設(shè)計(jì)，而且也需要較為完善的流程。因此針對(duì)本次的改版設(shè)計(jì)，總結(jié)了一個(gè)較為完整的設(shè)計(jì)流程導(dǎo)航，主要分為 「前期—中期—中后期—后續(xù)展望」 ，并根據(jù)設(shè)計(jì)導(dǎo)航在設(shè)計(jì)中對(duì)各個(gè)關(guān)鍵點(diǎn)的產(chǎn)出內(nèi)容進(jìn)行梳理總結(jié)，并從中進(jìn)行復(fù)盤學(xué)習(xí)。

基于以上完整的流程導(dǎo)航，下面對(duì)每個(gè)階段進(jìn)行細(xì)化深入的分析，以及在每個(gè)階段中對(duì)于設(shè)計(jì)輸出的把控程度及設(shè)計(jì)的思考。

前期

設(shè)計(jì)前期屬于分析的階段，需要盡可能大范圍地去收集對(duì)我們后續(xù)設(shè)計(jì)中起到輔助作用的內(nèi)容，并且需要對(duì)各個(gè)內(nèi)容進(jìn)行具體分析和得出結(jié)論。本次 「手機(jī)QQ游戲中心」 改版中主要著重在 「項(xiàng)目背景、用戶分析、競(jìng)品分析、頭腦風(fēng)暴」 四個(gè)部分

1. 項(xiàng)目背景

為什么要改版？

在改版之前我們需要了解到真正的改版目的是什么，而不是純粹地追求變化而進(jìn)行設(shè)計(jì)優(yōu)化。并且希望通過改版后給用戶傳達(dá)一個(gè)怎樣的感受？這些都是需要去深入了解的內(nèi)容。

產(chǎn)品側(cè)

重新思考 「手機(jī)QQ游戲中心」 的策略及定位，整體的大方向相比之前有所改變。因此產(chǎn)品側(cè)同學(xué)希望通過改版優(yōu)化升級(jí)，來滿足新的產(chǎn)品策略和方向。當(dāng)然除了底層平臺(tái)的基礎(chǔ)架構(gòu)優(yōu)化之外，更需要一個(gè)全新的 「交互體驗(yàn)」 和 「視覺UI風(fēng)格」 來刷新用戶對(duì)于舊版游戲中心的感知及感受。

設(shè)計(jì)側(cè)

• 基于用戶，通過用戶調(diào)研分析得到的反饋：舊版游戲中心無論在 「內(nèi)容的展示」 或 「功能的引導(dǎo)」 上都是處于混亂的狀態(tài)下，用戶進(jìn)入游戲中心后無法定位界面的第一視覺焦點(diǎn)，關(guān)鍵信息及內(nèi)容獲取較難。
• 基于設(shè)計(jì)，在產(chǎn)品大方向調(diào)整的情況下，舊版的游戲中心的設(shè)計(jì)很難滿足產(chǎn)品側(cè)的功能需要。除此之外 「手機(jī)QQ游戲中心」 從上線至今較少有大的設(shè)計(jì)改版優(yōu)化，長(zhǎng)期的固化印象并不能滿足現(xiàn)在日新月異的用戶變化。

基于以上內(nèi)容，對(duì)整體的品牌印象和設(shè)計(jì)語言進(jìn)行重新設(shè)計(jì)，刷新用戶對(duì)手機(jī)QQ游戲中心的固有印象，提升用戶的信任感，給用戶傳遞我們一直求變的精神。主要從以下兩點(diǎn)著手：

• 重新搭建游戲中心的世界觀，讓整體的設(shè)計(jì)更加符合年輕用戶（特別是男性用戶）的審美；
• 進(jìn)行模塊重組，提升視覺焦點(diǎn)，從整體到模塊再到細(xì)節(jié)的設(shè)計(jì)，突出重點(diǎn)信息內(nèi)容，弱化輔助內(nèi)容。

2. 用戶分析

了解用戶

我們希望通過前期的用戶分析，更加深入的了解我的用戶是一個(gè)怎樣的結(jié)構(gòu)狀態(tài)，并且可以在其中找到可以通過設(shè)計(jì)發(fā)力而幫助到用戶的點(diǎn)。

明確用戶主體及性格

從用戶調(diào)研得出，手機(jī)QQ游戲中心的主要用戶為初高中的男性玩家，熱玩類型主要以競(jìng)技、體育、益智類游戲?yàn)橹鳎脩舻闹饕愿衲贻p、好奇、探索、個(gè)性。

分析用戶訴求

• 用戶對(duì)于游戲中心的依托主要在于拓展虛擬關(guān)系鏈，希望通過游戲來擴(kuò)展自我的社交圈子。
• 希望通過游戲中心可以提升自己的游戲技術(shù)，讓自己取得進(jìn)步。
• 增強(qiáng)游戲中心與游戲直接的關(guān)聯(lián)，例如在游戲中心可以看到一些游戲角色I(xiàn)P，提升代入感。
• 對(duì)于平臺(tái)的依賴性主要在于禮包福利和玩法攻略。

用戶對(duì)于手機(jī)QQ游戲中心的看法

用戶對(duì)于舊版游戲中心的主要關(guān)注點(diǎn)在于：

• 信息呈現(xiàn)的方式過于雜亂，找不到自己關(guān)注的內(nèi)容或者禮包；
• 希望在操作上更加簡(jiǎn)單智能，提升操作的效率。

3. 競(jìng)品分析及設(shè)計(jì)趨勢(shì)

從別人的身上學(xué)習(xí)優(yōu)點(diǎn)

競(jìng)品及趨勢(shì)的分析也是非常重要的一環(huán)，通過這些分析和收集，可以幫助我們更加準(zhǔn)確地判斷后續(xù)設(shè)計(jì)中應(yīng)用的一些設(shè)計(jì)方式及手法，起到取長(zhǎng)補(bǔ)短的作用。本次的競(jìng)品并不只局限于同類型的游戲平臺(tái)，還包括趣味類APP、動(dòng)漫類、視頻類等等。更多的尋找不同方向的思考點(diǎn)，并結(jié)合2019年的設(shè)計(jì)趨勢(shì)總結(jié)。最終得出以下幾點(diǎn)結(jié)論：

• 卡片式的設(shè)計(jì)有利于每個(gè)模塊劃分；
• 統(tǒng)一的圖形設(shè)計(jì)語言貫穿整個(gè)APP，更具品牌性；
• 豐富的動(dòng)效，讓設(shè)計(jì)表達(dá)更加年輕化；
• 淺色背景+漸變色的運(yùn)用，在扁平化的基礎(chǔ)提升頁面的細(xì)節(jié)。

4. 頭腦風(fēng)暴

激發(fā)更多的想法

腦暴的主要目的是在于激發(fā)更多的思考可能性，并且通過多方的腦暴進(jìn)行可行性的的內(nèi)容梳理，最終幫助設(shè)計(jì)與產(chǎn)品同學(xué)達(dá)成一致的結(jié)論。

由設(shè)計(jì)側(cè)主導(dǎo)發(fā)起，與產(chǎn)品同學(xué)及UI開發(fā)同學(xué)一起進(jìn)行了腦暴?？傮w腦暴時(shí)長(zhǎng)大約為2.5小時(shí)，腦暴圍繞關(guān)鍵點(diǎn)：

• 「手機(jī)QQ游戲中心」 對(duì)于用戶來說是一個(gè)怎么樣的感知？
• 「手機(jī)QQ游戲中心」 可以幫助用戶得到什么樣的提升？

從這次腦暴中，我們得出了不少關(guān)鍵的信息及可發(fā)力的方向，整體劃分為四個(gè)關(guān)鍵的路徑： 「專業(yè)的內(nèi)容」 「幫助變強(qiáng)」 「游戲社交」 「消費(fèi)娛樂」 ，并且從中選出與之前的用戶分析報(bào)告相匹配的關(guān)鍵詞，進(jìn)行下一步的梳理。

5. 內(nèi)容梳理及關(guān)鍵點(diǎn)標(biāo)記

結(jié)合上面分析及腦暴的內(nèi)容，我們進(jìn)一步梳理整體的 「設(shè)計(jì)目標(biāo)」及 「品牌性格」 ，并對(duì)目標(biāo)和性格做具體的定義，設(shè)計(jì)目標(biāo)從 「代入感、社交化、成就感」 方面打造；品牌性格從 「年輕、個(gè)性、探索、好奇」四個(gè)維度進(jìn)行詳細(xì)的設(shè)計(jì)承載。

6. 階段小結(jié)

在前期的通過 「項(xiàng)目背景、用戶調(diào)研、競(jìng)品分析、頭腦風(fēng)暴」 等方式幫助我們清晰了解整體的項(xiàng)目結(jié)構(gòu)，從中我們得到了一些比較關(guān)鍵的內(nèi)容結(jié)論。除了對(duì)于設(shè)計(jì)方面的幫助之外，更多的是與產(chǎn)品同學(xué)達(dá)成一致的想法，方便后續(xù)的設(shè)計(jì)落地起到指導(dǎo)性的意義。

中期

中期屬于初步設(shè)計(jì)內(nèi)容輸出及確定大方向階段，明確產(chǎn)品世界觀、情緒版輸出及基于情緒版的設(shè)計(jì)初稿。

1. 世界觀搭建

思考設(shè)計(jì)大方向

世界觀除了刷新用戶的視覺感知之外，通過世界觀的搭建，指導(dǎo)后續(xù)整體的改版設(shè)計(jì)中運(yùn)用的 「設(shè)計(jì)語言」，讓整體的設(shè)計(jì)更加的 「系統(tǒng)性」 并且具有較強(qiáng)的延展性。

搭建世界觀主軸

基于游戲的底層概念，根據(jù) 「代入感、社交化、成就感」 三個(gè)大方向，圍繞 「年輕、個(gè)性、好奇、熱血」 四大性格進(jìn)行了二次腦暴。

小組快速腦暴并且梳理關(guān)鍵詞，最后一起確定 「次元空間」 「游戲廣場(chǎng)」 「寶典秘籍」 三個(gè)不同的世界觀進(jìn)行情緒版輸出。

2. 情緒版輸出

深化世界觀概念及情緒版輸出

情緒版的作用在于探索設(shè)計(jì)方向和達(dá)成共識(shí)，因此在后續(xù)的設(shè)計(jì)中可根據(jù)實(shí)際情況調(diào)整變化。情緒版主要從幾個(gè)內(nèi)容展現(xiàn)：視覺影像、色彩、字體、界面效果、圖標(biāo)圖形、插圖風(fēng)格、背景、動(dòng)畫效果等?？紤]到受眾是產(chǎn)品側(cè)同學(xué)，因此需要盡量地具體化細(xì)節(jié)，讓產(chǎn)品側(cè)同學(xué)得到真實(shí)的視覺感受。

方案A-次元空間

基于游戲的虛擬場(chǎng)景出發(fā)，手機(jī)QQ游戲中心主要起到了連接真實(shí)（用戶）和虛擬（游戲）的作用，我們把手機(jī)QQ游戲中心想象成第三空間中轉(zhuǎn)站——次元空間，玩家通過這里進(jìn)入游戲的虛擬世界。

基于次元空間的腦暴及關(guān)鍵詞探索，確定關(guān)鍵詞的表現(xiàn)：炫光感、空間感、速度感、未來感

方案B-游戲廣場(chǎng)

來源于豐富多彩的游戲主城概念，關(guān)鍵詞：豐富、霓虹、熱鬧

方案C-寶典秘籍

結(jié)合攻略內(nèi)容打造成玩家的晉級(jí)秘籍的概念，關(guān)鍵詞：神秘、探索、增強(qiáng)

基于情緒版，與產(chǎn)品同學(xué)（有產(chǎn)品老大參與）當(dāng)面確認(rèn)初稿的輸出方向：基于 「次元空間」 及 「游戲廣場(chǎng)」 的概念進(jìn)行初稿設(shè)計(jì)。其中還得到的具體反饋：

• 不建議深色調(diào)：游戲的展示內(nèi)容本身較為豐富，擔(dān)心深色調(diào)容易造成視覺疲勞。
• 不需要過度專業(yè)：希望視覺表達(dá)上有特色，但不需要過度的強(qiáng)調(diào)個(gè)性，可以滿足不同的游戲類型展現(xiàn)。

3. 初稿輸出

確認(rèn)設(shè)計(jì)落地方案

方案A：次元空間整體設(shè)計(jì)比較偏男性向（基于QQ用戶的數(shù)據(jù)分析）硬朗風(fēng)格，圖標(biāo)搭配多彩的漸變疊色設(shè)計(jì)突出年輕化，整體結(jié)構(gòu)使用小圓角的卡片；

方案B：游戲廣場(chǎng)整體偏向可愛風(fēng)格，在顏色的使用上也會(huì)比較偏粉嫩，整體結(jié)構(gòu)大圓角的卡片。

最終與產(chǎn)品側(cè)一起確定方案A的方向繼續(xù)深化延展設(shè)計(jì)。主要考慮點(diǎn)：

• 游戲中心的用戶以男性為主，方案A相比的設(shè)計(jì)整體感受上會(huì)更加貼近男性用戶審美；
• 從產(chǎn)品側(cè)考慮方案A的設(shè)計(jì)相對(duì)更加中性，可以更好地滿足不同游戲的融入。

4. 階段小結(jié)

初稿不只是純粹地方向探索，作為設(shè)計(jì)師應(yīng)該做更多的內(nèi)容去輔助說明設(shè)計(jì)的意圖及想法，本次設(shè)計(jì)在設(shè)計(jì)次元空間的初稿時(shí)，考慮到產(chǎn)品側(cè)對(duì)于整體設(shè)計(jì)的腦補(bǔ)理解及代入感，從系統(tǒng)化的角度進(jìn)行輸出（包括：圖形、顏色、動(dòng)效、轉(zhuǎn)場(chǎng)）等幾個(gè)維度進(jìn)行了初步探索，力求幫助設(shè)計(jì)方案更加有效地傳達(dá)以及產(chǎn)品側(cè)同學(xué)進(jìn)行決策。

中后期

1. 設(shè)計(jì)方法

基于核心思考的設(shè)計(jì)方法論

方法論可以是一套流程或是設(shè)計(jì)執(zhí)行的方法，除了表面的論述表達(dá)之外，關(guān)鍵在于幫助我們更加系統(tǒng)性、全局性地思考整體的設(shè)計(jì)規(guī)則，并且具有較高的可應(yīng)用性和復(fù)制性。

思考邏輯

以 「核心」 作為起始點(diǎn)，通過 「核心定調(diào)—性格拓展—表現(xiàn)延伸」 三層內(nèi)容的邏輯思考，從抽象向具象進(jìn)行轉(zhuǎn)化，最終通過設(shè)計(jì)語言表達(dá)出來的設(shè)計(jì)方式?！负诵摹?定義為整體設(shè)計(jì)的內(nèi)核或世界觀——抽象的概念；「性格」 是基于核心概念關(guān)聯(lián)拓展出來的次具象的設(shè)計(jì)形態(tài)；「表現(xiàn)」是實(shí)際執(zhí)行時(shí)的設(shè)計(jì)語言表達(dá)。

設(shè)計(jì)模型（思考菱形圖）

基于設(shè)計(jì)核心，由內(nèi)向外一層層的擴(kuò)散聯(lián)想，并推導(dǎo)出每一層的內(nèi)容。每一層的內(nèi)容都互相具有關(guān)聯(lián)性，從內(nèi)向外越來越具象地表達(dá)出設(shè)計(jì)最終落地的形態(tài)。最終得到的一個(gè)結(jié)論應(yīng)該是一個(gè)具體可執(zhí)行的設(shè)計(jì)方法。

結(jié)合項(xiàng)目

基于世界觀 「次元空間」為設(shè)計(jì)核心，結(jié)合設(shè)計(jì)核心以及情緒版輸出的關(guān)鍵詞，最終確定設(shè)計(jì)的性格為 「炫光感」 「空間感」 「速度感」 「未來感」 ，通過這四個(gè)方面來呈現(xiàn) 「次元空間」 的視覺感知。結(jié)合性格進(jìn)行二度延伸思考，推導(dǎo)出表現(xiàn)層的內(nèi)容，從而定調(diào) 「手機(jī)QQ游戲中心」 整體的設(shè)計(jì)語言。

整理表現(xiàn)層

定調(diào)細(xì)節(jié)圍繞核心及性格，表現(xiàn)層整體分為 「圖形、顏色、形式、氛圍」 四個(gè)基礎(chǔ)形態(tài)來執(zhí)行整體的設(shè)計(jì)，制定初步的設(shè)計(jì)規(guī)則，幫助后續(xù)更加深入和準(zhǔn)確地把控整體對(duì)設(shè)計(jì)調(diào)性。

2. 設(shè)計(jì)執(zhí)行

如何落地到最終輸出？

推導(dǎo)出具體的設(shè)計(jì)細(xì)項(xiàng)之后，最終以 「圖形、顏色、形式、氛圍」 四個(gè)維度去思考實(shí)際的設(shè)計(jì)，通過這些方面的設(shè)計(jì)串聯(lián)形成最終完整的設(shè)計(jì)語言。

圖形設(shè)計(jì)

基于游戲中心的用戶形態(tài)及設(shè)計(jì)性格的表現(xiàn)，在整體的圖形設(shè)計(jì)上會(huì)更加偏向硬朗，使用 「斜線、多邊形之類的形體結(jié)構(gòu)，來表現(xiàn)整體的視覺感知。

視覺物化提取

基于性格四感的物化映射，從中提取關(guān)鍵元素來表達(dá)「次元空間」的概念，并且符合現(xiàn)實(shí)生活中的視覺感知。從而提升用戶對(duì)于「手機(jī)QQ游戲中心」的圖形設(shè)計(jì)代入感。

定義元素

基于以上物化的圖樣，并結(jié)合表現(xiàn)層的定義，確定整體的圖形風(fēng)格為 「線性+半透明填充」 的科技感風(fēng)格，最終確定圖形的設(shè)計(jì)語言為 「斜線、多邊形、異形卡片、信息圖譜」 等表達(dá) 「?jìng)€(gè)性」 的性格，具象化的圖形感知為 「火箭、太空人、游戲手柄、探索器」 等元素來表達(dá)年輕用戶好奇、探索的一面。

圖標(biāo)設(shè)計(jì)

圖標(biāo)作為整體UI的點(diǎn)睛之筆，是除了 「顏色」 之外串聯(lián)整個(gè)UI風(fēng)格的品牌元素體現(xiàn)，因此在設(shè)計(jì)執(zhí)行中必須緊扣整體的風(fēng)格大方向。

設(shè)定圖標(biāo)規(guī)則

• 結(jié)合游戲中心的用戶主要以男性為主，因此整體的圖標(biāo)造型偏向硬朗，收角處使用小圓角進(jìn)行中和，避免過于生硬。
• 圖標(biāo)視角統(tǒng)一規(guī)范為正面和正側(cè)面的設(shè)計(jì)規(guī)則，從規(guī)則上保證圖標(biāo)的基礎(chǔ)識(shí)別性。
• 結(jié)構(gòu)上采用組合疊加的方式，提升圖標(biāo)的空間層次感，避免過于單調(diào)。
• 使用多彩的大跨度漸變滿足炫光感的表現(xiàn)，且符合用戶年輕化的特性。

二次優(yōu)化打磨

多方案嘗試，通過不同的角度找出更加適合游戲中心的圖標(biāo)設(shè)計(jì)。第一版的圖標(biāo)設(shè)計(jì)單獨(dú)來看的大感覺是基本上還是可以的，但當(dāng)我們深入去研究的時(shí)候就會(huì)發(fā)現(xiàn)無論從形體或風(fēng)格一致性上其實(shí)還存在著很大的優(yōu)化空間。

二次優(yōu)化主要從2個(gè)方向思考：

• 圖標(biāo)的形體優(yōu)化；
• 圖標(biāo)細(xì)節(jié)的整體風(fēng)格一致性優(yōu)化。

形體優(yōu)化，簡(jiǎn)化圖標(biāo)的細(xì)節(jié)，增強(qiáng)圖標(biāo)的辨識(shí)度，優(yōu)化圖標(biāo)的外輪廓讓圖標(biāo)更加流暢，增強(qiáng)圖標(biāo)的表意及普適性。

風(fēng)格一致性優(yōu)化，從兩個(gè)方面考慮圖標(biāo)的一致性問題：

• 圖形統(tǒng)一：游戲中心整體的圖形風(fēng)格都是以線面為主，但初稿的風(fēng)格主要使用了面形設(shè)計(jì)，在整體風(fēng)格的吻合度上也值得優(yōu)化。
• 顏色降噪：多彩的圖標(biāo)單獨(dú)來說具有不錯(cuò)的視覺表現(xiàn)，但整體上缺乏關(guān)聯(lián)性，且作為 「基礎(chǔ)圖標(biāo)」 以及從 「品牌性」 「一致性」方面考慮 也存在著挑戰(zhàn)，對(duì)于品牌色的透出不夠完善，因此需要進(jìn)行整體的 「顏色降噪」，增強(qiáng)品牌色調(diào)的感知。

顏色運(yùn)用

顏色作為另外一個(gè)維度的視覺感知，相比于圖形更能提升用戶對(duì)于品牌的感受。合理明確的品牌色調(diào)可以幫助用戶加深對(duì)于產(chǎn)品的認(rèn)知。

色調(diào)延續(xù)

主色調(diào)的設(shè)計(jì)主要考慮兩個(gè)方面：

• 游戲中心本身存在于手機(jī)QQ，用戶對(duì)于手機(jī)QQ具有強(qiáng)烈的品牌色調(diào)感知，因此對(duì)于游戲中心本身，希望可以起到一個(gè)延伸和承接；
• 基于次元空間-科技感本身的顏色的感知，然后再拓展應(yīng)用。最終確定游戲中心的主色調(diào)為藍(lán)色調(diào)，并且使用大跨度的漸變效果，讓顏色更具有炫光的感覺。

顏色拓展及分類

手機(jī)QQ游戲中心作為一個(gè)多元化的游戲平臺(tái)，很難使用單一的顏色來表達(dá)完整的內(nèi)容層次。因此基于不同的顏色性格，以藍(lán)色為主調(diào)，拓展出 「紅黃綠」三種顏色作為輔助使用的顏色，用來表達(dá)不同的內(nèi)容感知。依據(jù)功能調(diào)性、冷暖、以及用戶的常規(guī)普識(shí)性感知，結(jié)合以上四種色調(diào)的調(diào)性劃分，對(duì)不同類型的功能進(jìn)行賦予不同的點(diǎn)綴色彩。

形式結(jié)構(gòu)

一套完整的UI界面都需有一個(gè)具體的形式感知，并且可以通過形式的設(shè)計(jì)給用戶傳達(dá)具體的視覺設(shè)計(jì)模式。

在用戶調(diào)研的時(shí)候，我們獲得一個(gè)比較關(guān)鍵的信息：目前的信息流閱讀較為混亂，找不到想要的內(nèi)容。因此在新版的設(shè)計(jì)時(shí)，我們需要深入打造兩個(gè)關(guān)鍵點(diǎn)：

• 優(yōu)化內(nèi)容的形體感知，提升用戶對(duì)于游戲中心的視覺記憶點(diǎn)；
• 優(yōu)化內(nèi)容模塊化設(shè)計(jì)，提升不同內(nèi)容的歸屬感。

形體感知

基于內(nèi)容，設(shè)計(jì)統(tǒng)一的形體感知，提升用戶的視覺記憶點(diǎn)。

• 從內(nèi)容呈現(xiàn)角度考慮，卡片式的設(shè)計(jì)更有利于差異性較大的內(nèi)容的獨(dú)立呈現(xiàn)；
• 基于設(shè)計(jì)形式，卡片式的設(shè)計(jì)更有利于內(nèi)容與背景的空間、層次表現(xiàn)。最終選擇了卡片式的設(shè)計(jì)方式。

加強(qiáng)形式感

在部分頁面的首個(gè)卡片使用異形的設(shè)計(jì)，增強(qiáng)頁面的形式感，提升界面設(shè)計(jì)的表現(xiàn)層次。并且延續(xù)到對(duì)話框、上滑浮層等模塊的設(shè)計(jì)，增強(qiáng)多方位的透出。

內(nèi)容差異化的視覺表現(xiàn)

游戲中心首頁整體會(huì)承載三種類型的大卡片，分別是：最近在玩、新游單款推薦、新游榜單推薦。主要設(shè)計(jì)目標(biāo)：

• 讓用戶感知到三塊內(nèi)容的差異化，
• 打造視覺的差異化讓用戶在長(zhǎng)內(nèi)容滑動(dòng)的是不會(huì)感覺過于單調(diào)。

「最近在玩」模塊的設(shè)計(jì)上更多的是考慮用戶的代入感，在視覺表現(xiàn)上融入游戲的IP及游戲相關(guān)的背景；新游推薦主要以內(nèi)容展現(xiàn)為主，因此整體設(shè)計(jì)偏向簡(jiǎn)潔的白色卡片+一點(diǎn)異形裝飾；新游榜單主要體現(xiàn)榜單的序列感，在配色上制定三個(gè)維度「金銀銅、熱到冷、深到淺」來表現(xiàn)。

內(nèi)容歸屬感

內(nèi)容歸屬感提升能夠幫助用戶快速的篩選并獲取關(guān)鍵信息。除了交互邏輯上的內(nèi)容歸類之外還需要處理好內(nèi)容與內(nèi)容之間的劃分、區(qū)隔，通過視覺化的處理手法（排版），讓內(nèi)容的分配更加合理。

游戲中心首頁整體主要分為三塊內(nèi)容：「最近在玩、新游推薦、游戲榜單」 。「最近在玩」則會(huì)承載更多的其他內(nèi)容，例如 「視頻、直播、攻略、活動(dòng)、禮包、社區(qū)、組隊(duì)」 等等。

模塊化設(shè)計(jì)

模塊化的設(shè)計(jì)具有較強(qiáng)的 「模塊相對(duì)獨(dú)立性、內(nèi)容互換性、樣式通用性」，而游戲中心作為一個(gè)平臺(tái)需要承載眾多且具有差異化的游戲和游戲內(nèi)容，因此在內(nèi)容多變的情況下更需要一個(gè)簡(jiǎn)潔的設(shè)計(jì)模式來承載完整的內(nèi)容設(shè)計(jì)，而模塊化的設(shè)計(jì)則更契合這種多內(nèi)容的設(shè)計(jì)。

從以下兩個(gè)方向進(jìn)行優(yōu)化：

優(yōu)化視覺動(dòng)線，增強(qiáng)視覺引導(dǎo)和進(jìn)行視覺降噪。重新設(shè)計(jì)出兩種方案，從內(nèi)容的展現(xiàn)、設(shè)計(jì)變化及整體的模塊在首屏中的占比，最終確認(rèn)方案B，作為繼續(xù)優(yōu)化的方向。

優(yōu)化模塊展現(xiàn)，小模塊的設(shè)計(jì)存在幾個(gè)問題：

• 一行展現(xiàn)時(shí)內(nèi)容透出不夠，兩行又顯得擁擠；
• 圖形裝飾干擾內(nèi)容展示，且設(shè)計(jì)質(zhì)感較差；
• 在一致性上更加深入打磨，刪減不必要的內(nèi)容，統(tǒng)一展示區(qū)域。

氛圍營(yíng)造

恰當(dāng)氛圍的營(yíng)造可以幫助提升視覺代入感、沉浸感，既需要滿足平臺(tái)的品牌展現(xiàn)，也需要合適的透出游戲向的內(nèi)容。

從整體上明確劃分為 「平臺(tái)向氛圍」 和 「游戲向氛圍」 。平臺(tái)向氛圍主要是滿足制定的世界觀——次元空間的表達(dá)，通過圖形及色彩的設(shè)計(jì)產(chǎn)生關(guān)聯(lián)性；游戲向氛圍主要是對(duì)于IP形象的展現(xiàn)及游戲色調(diào)、背景、顏色等內(nèi)容的透出。氛圍營(yíng)造關(guān)鍵位置：版本刷新啟動(dòng)畫面、最近在玩默認(rèn)狀態(tài)、首頁及個(gè)人主頁默認(rèn)背景、游戲?qū)^(qū)默認(rèn)狀態(tài)、榜單模塊等。

動(dòng)畫儀式感

版本刷新動(dòng)畫強(qiáng)調(diào)版本前后的一種刷新儀式感。從進(jìn)入游戲中心給用戶展現(xiàn)探索的感受；接著提升用戶的參與感，讓用戶自己開啟新版游戲中心；最后通過動(dòng)畫的銜接讓用戶直觀的感受到版本的變化。

最近在玩切換動(dòng)畫

「最近在玩」作為游戲中心較為重要的模塊，因此希望除了與競(jìng)品具有視覺上的差異之外，還希望可以通過切換動(dòng)效的設(shè)計(jì)更進(jìn)一步打造差異化。我們嘗試了幾種不同的動(dòng)畫方案。從這些方案中，雖然都滿足了模塊及功能的表現(xiàn)，但卻仍然存在著不同的問題。

以上的方案始終不夠有特色和具有記憶點(diǎn)，因此繼續(xù)從「游戲及趣味性以及契合度」上進(jìn)行思考，不難發(fā)現(xiàn)掌機(jī)玩家在玩游戲時(shí)都會(huì)有更換游戲卡的場(chǎng)景（例如Switch），因此我們開始設(shè)想是否最近在玩的切換游戲也可以被設(shè)計(jì)成更換游戲卡的形式？

最終設(shè)計(jì)出新的游戲切換動(dòng)畫，既滿足功能同時(shí)具有游戲的趣味性。

結(jié)合與拓展

主元素使用游戲手柄的元素，結(jié)合科技化的圖形表表達(dá)。融入探索及未來的概念拓展出火箭和太空人的元素，完善整體的內(nèi)容表達(dá)。通過三個(gè)角度的表現(xiàn)，讓用戶對(duì)于游戲中心的風(fēng)格產(chǎn)生關(guān)聯(lián)度和代入感。

基于 「最近在玩」 模塊的特性，設(shè)計(jì)了三種不同色調(diào)以滿足不同的狀態(tài)下展示。

深化感知

基于太空的概念結(jié)合圖形物化映射的內(nèi)容，繼續(xù)深化游戲中心的視覺感知，主要體現(xiàn)在首頁及個(gè)人主頁的頂部背景上。

基于氛圍的打造，強(qiáng)化首頁及個(gè)人主頁的氛圍營(yíng)造。

代入感與沉浸感

根據(jù)用研報(bào)告，用戶除了關(guān)注游戲禮包之外，另一個(gè)更關(guān)注的點(diǎn)是游戲的 「代入感」。因此在游戲代入感方面的視覺表現(xiàn)也是這次改版優(yōu)化的一個(gè)關(guān)鍵點(diǎn)。而游戲中最能讓玩家產(chǎn)生視覺 「代入感」 及共鳴的內(nèi)容無疑就是 「游戲角色I(xiàn)P（英雄）、游戲場(chǎng)景、游戲玩法、游戲色調(diào)/質(zhì)感、UI美術(shù)風(fēng)格」等等 ，結(jié)合這些內(nèi)容可以打造出更加貼近用戶玩游戲時(shí)候的視覺沉浸感。

在手機(jī)QQ游戲中心改版的過程中，「最近在玩和游戲?qū)^(qū)」 作為用戶玩過游戲的主要觸達(dá)點(diǎn)，因此在這兩個(gè)模塊的視覺呈現(xiàn)能夠最直觀讓用戶產(chǎn)生游戲的代入感和沉浸感。從實(shí)際設(shè)計(jì)的角度思考2個(gè)方面：

• 「最近在玩」 最終會(huì)在首頁呈現(xiàn)，因此我們的設(shè)計(jì)必須符合整體UI的大框架；
• 最近在玩與專區(qū)的關(guān)聯(lián)性。

結(jié)合以上信息，最終篩選出以「游戲角色I(xiàn)P（英雄）+游戲場(chǎng)景（背景）」 的方式來營(yíng)造 「最近在玩」模塊的氛圍。專區(qū)作為「最近在玩」的入口承載，除了單純的代入感、沉浸感之外，更多的是需要考慮前后的關(guān)聯(lián)度，通過關(guān)聯(lián)才能形成更加深入的代入感。

除了普通的專區(qū)，我們還針對(duì)王者等頭部游戲設(shè)計(jì)了高級(jí)定制的游戲?qū)^(qū)。無論從角色I(xiàn)P、游戲色調(diào)/質(zhì)感、UI美術(shù)風(fēng)格等視覺表現(xiàn)上或是游戲內(nèi)容、戰(zhàn)績(jī)數(shù)據(jù)等方面都更加深度地打造強(qiáng)代入感和沉浸感的氛圍。

3. 階段小結(jié)

中后期的設(shè)計(jì)執(zhí)行是一個(gè)具體的輸出內(nèi)容的流程。為了避免設(shè)計(jì)過程中出現(xiàn)偏差，因此嘗試引用設(shè)計(jì)方法來把控整體設(shè)計(jì)的系統(tǒng)性，結(jié)合「菱形圖」的應(yīng)用，幫助從內(nèi)向外一步步剖析更加具體清晰地執(zhí)行內(nèi)容。

后續(xù)展望

一個(gè)階段性的改版，往往不能覆蓋到所有的方面，因此在改版完成了基本的內(nèi)容之后，我們進(jìn)行了設(shè)計(jì)復(fù)盤，找出一些設(shè)計(jì)可發(fā)力但未得到落地的點(diǎn)。

動(dòng)效設(shè)計(jì)有待優(yōu)化，目前的動(dòng)效設(shè)計(jì)不多，而且在整體的系統(tǒng)性上也較為缺乏，后續(xù)仍然需要在這一方面進(jìn)行更加深入地探索并推動(dòng)優(yōu)化。

轉(zhuǎn)場(chǎng)設(shè)計(jì)有待優(yōu)化，包括彈框、上滑浮層、底部復(fù)層、頂部浮層等等，由設(shè)計(jì)先出demo，再結(jié)合產(chǎn)品側(cè)的計(jì)劃及優(yōu)先級(jí)進(jìn)行推動(dòng)優(yōu)化。

品牌系統(tǒng)性有待優(yōu)化，初期主要以內(nèi)容和UI設(shè)計(jì)輸出為主，但游戲中心整體的品牌內(nèi)容仍需要進(jìn)行系統(tǒng)性地梳理，包括品牌圖形、字體應(yīng)用、品牌色彩、延展使用等。

總結(jié)

在設(shè)計(jì)前期，設(shè)計(jì)側(cè)做了大量的用戶分析和競(jìng)品分析，主要是為了滿足兩個(gè)重要關(guān)鍵點(diǎn)：了解用戶和打造差異點(diǎn)，希望從全新的角度去呈現(xiàn)不一樣的設(shè)計(jì)審美。

設(shè)計(jì)中期，在于世界觀的打造，通過情緒版的構(gòu)建，最大程度地提升產(chǎn)品側(cè)對(duì)于設(shè)計(jì)概念的感知，幫助快速確定設(shè)計(jì)方向。

初稿的設(shè)計(jì)輸出，盡量地保證輸出的完整度，在圖形/圖標(biāo)/顏色/界面幾個(gè)維度盡可能地讓產(chǎn)品側(cè)同學(xué)感知到設(shè)計(jì)對(duì)于整體設(shè)計(jì)的把控，從而提升產(chǎn)品側(cè)同學(xué)對(duì)于設(shè)計(jì)思考的接受程度。

從初期-中期-后期，整體的設(shè)計(jì)輸出流程上是較為順暢的，除了依賴產(chǎn)品側(cè)及項(xiàng)目側(cè)同學(xué)的項(xiàng)目計(jì)劃把控之外，設(shè)計(jì)側(cè)也保證了高效高質(zhì)的設(shè)計(jì)輸出