從零到壹 ,打造全新的游戲次元空間
對于設(shè)計改版大家并不陌生,每個項(xiàng)目的改版中都會有不同的方法或者流程,本文重點(diǎn)在于分析我們在“手機(jī)QQ游戲中心”改版中使用到的流程或者設(shè)計方法,并且通過本文總結(jié)出一些經(jīng)驗(yàn)、方法或內(nèi)容,希望可以在后續(xù)其他的項(xiàng)目設(shè)計中得以應(yīng)用。
本次手機(jī)QQ游戲中心作為較大型的設(shè)計改版項(xiàng)目,我們需要從整體去看每個階段中的設(shè)計需要輸出的內(nèi)容,更加系統(tǒng)性地思考整體的設(shè)計,而且也需要較為完善的流程。
因此針對本次的改版設(shè)計,總結(jié)了一個較為完整的設(shè)計流程導(dǎo)航,主要分為 “前期—中期—中后期—后續(xù)展望” ,并根據(jù)設(shè)計導(dǎo)航在設(shè)計中對各個關(guān)鍵點(diǎn)的產(chǎn)出內(nèi)容進(jìn)行梳理總結(jié),并從中進(jìn)行復(fù)盤學(xué)習(xí)。
基于以上完整的流程導(dǎo)航,下面對每個階段進(jìn)行細(xì)化深入的分析,以及在每個階段中對于設(shè)計輸出的把控程度及設(shè)計的思考。
一、前期
設(shè)計前期屬于分析的階段,需要盡可能大范圍地去收集對我們后續(xù)設(shè)計中起到輔助作用的內(nèi)容,并且需要對各個內(nèi)容進(jìn)行具體分析和得出結(jié)論。本次 “手機(jī)QQ游戲中心”改版主要著重在“項(xiàng)目背景、用戶分析、競品分析、頭腦風(fēng)暴” 四個部分。
1. 項(xiàng)目背景
為什么要改版?
在改版之前我們需要了解真正的改版目的是什么,而不是純粹地追求變化而進(jìn)行設(shè)計優(yōu)化。并且希望通過改版后給用戶傳達(dá)一個怎樣的感受?這些都是需要去深入了解的內(nèi)容。
(1)產(chǎn)品側(cè)
重新思考“手機(jī)QQ游戲中心”的策略及定位,整體的大方向相比之前有所改變。因此產(chǎn)品側(cè)同學(xué)希望通過改版優(yōu)化升級,來滿足新的產(chǎn)品策略和方向。當(dāng)然除了底層平臺的基礎(chǔ)架構(gòu)優(yōu)化之外,更需要一個全新的“交互體驗(yàn)”和 “視覺UI風(fēng)格”來刷新用戶對于舊版游戲中心的感知及感受。
(2)設(shè)計側(cè)
- 基于用戶,通過用戶調(diào)研分析得到的反饋:舊版游戲中心無論在“內(nèi)容的展示” 或“功能的引導(dǎo)”上都是處于混亂的狀態(tài),用戶進(jìn)入游戲中心后無法定位界面的第一視覺焦點(diǎn),關(guān)鍵信息及內(nèi)容獲取較難。
- 基于設(shè)計,在產(chǎn)品大方向調(diào)整的情況下,舊版游戲中心的設(shè)計很難滿足產(chǎn)品側(cè)的功能需要。除此之外 “手機(jī)QQ游戲中心”從上線至今較少有大的設(shè)計改版優(yōu)化,長期的固化印象并不能滿足現(xiàn)在日新月異的用戶變化。
基于以上內(nèi)容,對整體的品牌印象和設(shè)計語言進(jìn)行重新設(shè)計,刷新用戶對手機(jī)QQ游戲中心的固有印象,提升用戶的信任感,給用戶傳遞我們一直求變的精神。
主要從以下兩點(diǎn)著手:
- 重新搭建游戲中心的世界觀,讓整體的設(shè)計更加符合年輕用戶(特別是男性用戶)的審美;
- 進(jìn)行模塊重組,提升視覺焦點(diǎn),從整體到模塊再到細(xì)節(jié)的設(shè)計,突出重點(diǎn)信息內(nèi)容,弱化輔助內(nèi)容。
2. 用戶分析
(1)了解用戶
我們希望通過前期的用戶分析,更加深入地了解我的用戶是一個怎樣的結(jié)構(gòu)狀態(tài),并且能在其中找到可以通過設(shè)計發(fā)力而幫助到用戶的點(diǎn)。
(2)明確用戶主體及性格
從用戶調(diào)研得出,手機(jī)QQ游戲中心的主要用戶為初高中的男性玩家,熱玩類型主要以競技、體育、益智類游戲?yàn)橹?,用戶的主要性格是年輕、好奇、探索、個性。
(2)分析用戶訴求
- 用戶對于游戲中心的依托主要在于拓展虛擬關(guān)系鏈,希望通過游戲來擴(kuò)展自我的社交圈子。
- 希望通過游戲中心可以提升自己的游戲技術(shù),讓自己取得進(jìn)步。
- 增強(qiáng)游戲中心與游戲直接的關(guān)聯(lián),例如在游戲中心可以看到一些游戲角色I(xiàn)P,提升代入感。
- 對于平臺的依賴性主要在于禮包福利和玩法攻略。
(3)用戶對于手機(jī)QQ游戲中心的看法
用戶對于舊版游戲中心的主要關(guān)注點(diǎn)在于:
- 信息呈現(xiàn)的方式過于雜亂,找不到自己關(guān)注的內(nèi)容或者禮包;
- 希望在操作上更加簡單智能,提升操作的效率。
3. 競品分析及設(shè)計趨勢
(1)從別人的身上學(xué)習(xí)優(yōu)點(diǎn)
競品及趨勢的分析也是非常重要的一環(huán),通過這些分析和收集,可以幫助我們更加準(zhǔn)確地判斷后續(xù)設(shè)計中應(yīng)用的一些設(shè)計方式及手法,起到取長補(bǔ)短的作用。
本次的競品并不只局限于同類型的游戲平臺,還包括趣味類APP、動漫類、視頻類等等。更多地尋找不同方向的思考點(diǎn),并結(jié)合2019年的設(shè)計趨勢總結(jié)。
最終得出以下幾點(diǎn)結(jié)論:
- 卡片式的設(shè)計有利于每個模塊劃分;
- 統(tǒng)一的圖形設(shè)計語言貫穿整個APP,更具品牌性;
- 豐富的動效,讓設(shè)計表達(dá)更加年輕化;
- 淺色背景+漸變色的運(yùn)用,在扁平化的基礎(chǔ)提升頁面的細(xì)節(jié)。
4. 頭腦風(fēng)暴
(1)激發(fā)更多的想法
腦暴的主要目的是在于激發(fā)更多的思考可能性,并且通過多方的腦暴進(jìn)行可行性的內(nèi)容梳理,最終幫助設(shè)計與產(chǎn)品同學(xué)達(dá)成一致的結(jié)論。
由設(shè)計側(cè)主導(dǎo)發(fā)起,與產(chǎn)品同學(xué)及UI開發(fā)同學(xué)一起進(jìn)行了腦暴??傮w腦暴時長大約為2.5小時,腦暴圍繞關(guān)鍵點(diǎn):
- “手機(jī)QQ游戲中心”對于用戶來說是一個怎么樣的感知?
- “手機(jī)QQ游戲中心”可以幫助用戶得到什么樣的提升?
從這次腦暴中,我們得出了不少關(guān)鍵的信息及可發(fā)力的方向,整體劃分為四個關(guān)鍵的路徑:“專業(yè)的內(nèi)容” “幫助變強(qiáng)” “游戲社交” “消費(fèi)娛樂” ,并且從中選出與之前的用戶分析報告相匹配的關(guān)鍵詞,進(jìn)行下一步的梳理。
內(nèi)容梳理及關(guān)鍵點(diǎn)標(biāo)記
結(jié)合上面分析及腦暴的內(nèi)容,我們進(jìn)一步梳理整體的 “設(shè)計目標(biāo)”及 “品牌性格” ,并對目標(biāo)和性格做具體的定義,設(shè)計目標(biāo)從“代入感、社交化、成就感” 方面打造;品牌性格從 “年輕、個性、探索、好奇” 四個維度進(jìn)行詳細(xì)地設(shè)計承載。
5. 階段小結(jié)
在前期的通過 “項(xiàng)目背景、用戶調(diào)研、競品分析、頭腦風(fēng)暴” 等方式幫助我們清晰了解整體的項(xiàng)目結(jié)構(gòu),從中我們得到了一些比較關(guān)鍵的內(nèi)容結(jié)論。除了對于設(shè)計方面的幫助之外,更多的是與產(chǎn)品同學(xué)達(dá)成一致的想法,方便后續(xù)的設(shè)計落地起到指導(dǎo)性的意義。
二、中期
中期屬于初步設(shè)計內(nèi)容輸出及確定大方向階段,明確產(chǎn)品世界觀、情緒版輸出及基于情緒版的設(shè)計初稿。
1. 世界觀搭建
(1)思考設(shè)計大方向
除了刷新用戶的視覺感知之外,通過世界觀的搭建指導(dǎo)后續(xù)整體改版設(shè)計中運(yùn)用的“設(shè)計語言”,讓整體的設(shè)計更加“系統(tǒng)性”并且具有較強(qiáng)的延展性。
(2)搭建世界觀主軸
基于游戲的底層概念,根據(jù)“代入感、社交化、成就感”三個大方向,圍繞“年輕、個性、好奇、熱血”四大性格進(jìn)行了二次腦暴。
小組快速腦暴并且梳理關(guān)鍵詞,最后一起確定“次元空間““游戲廣場”“寶典秘籍”三個不同的世界觀進(jìn)行情緒版輸出。
2. 情緒版輸出
(1)深化世界觀概念及情緒版輸出
情緒版的作用在于探索設(shè)計方向和達(dá)成共識,因此在后續(xù)的設(shè)計中可根據(jù)實(shí)際情況調(diào)整變化。情緒版主要從幾個內(nèi)容展現(xiàn):視覺影像、色彩、字體、界面效果、圖標(biāo)圖形、插圖風(fēng)格、背景、動畫效果等。考慮到受眾是產(chǎn)品側(cè)同學(xué),因此需要盡量地具體化細(xì)節(jié),讓產(chǎn)品側(cè)同學(xué)得到真實(shí)的視覺感受。
方案A-次元空間
基于游戲的虛擬場景出發(fā),手機(jī)QQ游戲中心主要起到了連接真實(shí)(用戶)和虛擬(游戲)的作用,我們把手機(jī)QQ游戲中心想象成第三空間中轉(zhuǎn)站——次元空間,玩家通過這里進(jìn)入游戲的虛擬世界。
基于次元空間的腦暴及關(guān)鍵詞探索,確定關(guān)鍵詞的表現(xiàn):炫光感、空間感、速度感、未來感。
方案B-游戲廣場,來源于豐富多彩的游戲主城概念,關(guān)鍵詞:豐富、霓虹、熱鬧。
方案C-寶典秘籍,結(jié)合攻略內(nèi)容打造成玩家的晉級秘籍的概念,關(guān)鍵詞:神秘、探索、增強(qiáng)。
基于情緒版,與產(chǎn)品同學(xué)(有產(chǎn)品老大參與)當(dāng)面確認(rèn)初稿的輸出方向:基于“次元空間”及“游戲廣場”的概念進(jìn)行初稿設(shè)計。
其中還得到的具體反饋:
- 不建議深色調(diào):游戲的展示內(nèi)容本身較為豐富,擔(dān)心深色調(diào)容易造成視覺疲勞。
- 不需要過度專業(yè):希望視覺表達(dá)上有特色,但不需要過度的強(qiáng)調(diào)個性,可以滿足不同的游戲類型展現(xiàn)。
3. 初稿輸出
(1)確認(rèn)設(shè)計落地方案
- 方案A:次元空間整體設(shè)計比較偏男性向(基于QQ用戶的數(shù)據(jù)分析)硬朗風(fēng)格,圖標(biāo)搭配多彩的漸變疊色設(shè)計突出年輕化,整體結(jié)構(gòu)使用小圓角的卡片;
- 方案B:游戲廣場整體偏向可愛風(fēng)格,在顏色的使用上也會比較偏粉嫩,整體結(jié)構(gòu)大圓角的卡片。
最終與產(chǎn)品側(cè)一起確定方案A的方向繼續(xù)深化延展設(shè)計。主要考慮點(diǎn):1.游戲中心的用戶以男性為主,方案A相比的設(shè)計整體感受上會更加貼近男性用戶審美;2.從產(chǎn)品側(cè)考慮,方案A的設(shè)計相對更加中性,可以更好地滿足不同游戲的融入。
4. 階段小結(jié)
初稿不只是純粹的方向探索,作為設(shè)計師應(yīng)該做更多的內(nèi)容去輔助說明設(shè)計的意圖及想法,本次設(shè)計在設(shè)計次元空間的初稿時,考慮到產(chǎn)品側(cè)對于整體設(shè)計的腦補(bǔ)理解及代入感,從系統(tǒng)化的角度進(jìn)行輸出(包括:圖形、顏色、動效、轉(zhuǎn)場)等幾個維度進(jìn)行了初步探索,力求幫助設(shè)計方案更加有效地傳達(dá)以及產(chǎn)品側(cè)同學(xué)進(jìn)行決策。
三、中后期
1. 設(shè)計方法
(1)基于核心思考的設(shè)計方法論
方法論可以是一套流程或是設(shè)計執(zhí)行的方法,除了表面的論述表達(dá)之外,關(guān)鍵在于幫助我們更加系統(tǒng)性、全局性地思考整體的設(shè)計規(guī)則,并且具有較高的可應(yīng)用性和復(fù)制性。
(2)思考邏輯
以“核心”作為起始點(diǎn),通過“核心定調(diào)—性格拓展—表現(xiàn)延伸”三層內(nèi)容的邏輯思考,從抽象向具象進(jìn)行轉(zhuǎn)化,最終通過設(shè)計語言表達(dá)出來的設(shè)計方式?!昂诵摹倍x為整體設(shè)計的內(nèi)核或世界觀——抽象的概念;“性格”是基于核心概念關(guān)聯(lián)拓展出來的次具象的設(shè)計形態(tài);“表現(xiàn)”是實(shí)際執(zhí)行時的設(shè)計語言表達(dá)。
(3)設(shè)計模型(思考菱形圖)
基于設(shè)計核心,由內(nèi)向外一層層地擴(kuò)散聯(lián)想,并推導(dǎo)出每一層的內(nèi)容。每一層的內(nèi)容都互相具有關(guān)聯(lián)性,從內(nèi)向外越來越具象地表達(dá)出設(shè)計最終落地的形態(tài)。最終得到的一個結(jié)論應(yīng)該是一個具體可執(zhí)行的設(shè)計方法。
(4)結(jié)合項(xiàng)目
基于世界觀“次元空間”為設(shè)計核心,結(jié)合設(shè)計核心以及情緒版輸出的關(guān)鍵詞,最終確定設(shè)計的性格為“炫光感”“空間感”“速度感”“未來感”,通過這四個方面來呈現(xiàn)“次元空間”的視覺感知。結(jié)合性格進(jìn)行二度延伸思考,推導(dǎo)出表現(xiàn)層的內(nèi)容,從而定調(diào)“手機(jī)QQ游戲中心”整體的設(shè)計語言。
(5)整理表現(xiàn)層
定調(diào)細(xì)節(jié)圍繞核心及性格,表現(xiàn)層整體分為 “圖形、顏色、形式、氛圍” 四個基礎(chǔ)形態(tài)來執(zhí)行整體的設(shè)計,制定初步的設(shè)計規(guī)則,幫助后續(xù)更加深入和準(zhǔn)確地把控整體對設(shè)計調(diào)性。
2. 設(shè)計執(zhí)行
如何落地到最終輸出?
推導(dǎo)出具體的設(shè)計細(xì)項(xiàng)之后,最終以“圖形、顏色、形式、氛圍”四個維度去思考實(shí)際的設(shè)計,通過這些方面的設(shè)計串聯(lián)形成最終完整的設(shè)計語言。
(1)圖形設(shè)計
基于游戲中心的用戶形態(tài)及設(shè)計性格的表現(xiàn),在整體的圖形設(shè)計上會更加偏向硬朗,使用 “斜線、多邊形之類的形體結(jié)構(gòu),來表現(xiàn)整體的視覺感知。
視覺物化提取
基于性格四感的物化映射,從中提取關(guān)鍵元素來表達(dá)“次元空間”的概念,并且符合現(xiàn)實(shí)生活中的視覺感知。從而提升用戶對于“手機(jī)QQ游戲中心”的圖形設(shè)計代入感。
定義元素
基于以上物化的圖樣,并結(jié)合表現(xiàn)層的定義,確定整體的圖形風(fēng)格為 “線性+半透明填充” 的科技感風(fēng)格,最終確定圖形的設(shè)計語言為 “斜線、多邊形、異形卡片、信息圖譜” 等表達(dá) “個性” 的性格,具象化的圖形感知為 “火箭、太空人、游戲手柄、探索器” 等元素來表達(dá)年輕用戶好奇、探索的一面。
(2)圖標(biāo)設(shè)計
圖標(biāo)作為整體UI的點(diǎn)睛之筆,是除了 “顏色” 之外串聯(lián)整個UI風(fēng)格的品牌元素體現(xiàn),因此在設(shè)計執(zhí)行中必須緊扣整體的風(fēng)格大方向。
設(shè)定圖標(biāo)規(guī)則
- 結(jié)合游戲中心的用戶主要以男性為主,因此整體的圖標(biāo)造型偏向硬朗,收角處使用小圓角進(jìn)行中和,避免過于生硬。
- 圖標(biāo)視角統(tǒng)一規(guī)范為正面和正側(cè)面的設(shè)計規(guī)則,從規(guī)則上保證圖標(biāo)的基礎(chǔ)識別性。
- 結(jié)構(gòu)上采用組合疊加的方式,提升圖標(biāo)的空間層次感,避免過于單調(diào)。
- 使用多彩的大跨度漸變滿足炫光感的表現(xiàn),且符合用戶年輕化的特性。
二次優(yōu)化打磨
多方案嘗試,通過不同的角度找出更加適合游戲中心的圖標(biāo)設(shè)計。第一版的圖標(biāo)設(shè)計單獨(dú)來看的大感覺基本上還是可以的,但當(dāng)我們深入去研究的時候就會發(fā)現(xiàn)無論從形體或風(fēng)格一致性上,其實(shí)還存在著很大的優(yōu)化空間。
二次優(yōu)化主要從2個方向思考:
- 圖標(biāo)的形體優(yōu)化;
- 圖標(biāo)細(xì)節(jié)的整體風(fēng)格一致性優(yōu)化。
形體優(yōu)化,簡化圖標(biāo)的細(xì)節(jié),增強(qiáng)圖標(biāo)的辨識度,優(yōu)化圖標(biāo)的外輪廓讓圖標(biāo)更加流暢,增強(qiáng)圖標(biāo)的表意及普適性。
風(fēng)格一致性優(yōu)化,從兩個方面考慮圖標(biāo)的一致性問題:
- 圖形統(tǒng)一:游戲中心整體的圖形風(fēng)格都是以線面為主,但初稿的風(fēng)格主要使用了面形設(shè)計,在整體風(fēng)格的吻合度上也值得優(yōu)化。
- 顏色降噪:多彩的圖標(biāo)單獨(dú)來說具有不錯的視覺表現(xiàn),但整體上缺乏關(guān)聯(lián)性,且作為“基礎(chǔ)圖標(biāo)”以及從“品牌性”“一致性”方面考慮也存在著挑戰(zhàn),對于品牌色的透出不夠完善,因此需要進(jìn)行整體的“顏色降噪”,增強(qiáng)品牌色調(diào)的感知。
(3)顏色運(yùn)用
顏色作為另外一個維度的視覺感知,相比于圖形更能提升用戶對于品牌的感受。合理明確的品牌色調(diào)可以幫助用戶加深對于產(chǎn)品的認(rèn)知。
色調(diào)延續(xù)
主色調(diào)的設(shè)計主要考慮兩個方面:
- 游戲中心本身存在于手機(jī)QQ,用戶對于手機(jī)QQ具有強(qiáng)烈的品牌色調(diào)感知,因此對于游戲中心本身,希望可以起到一個延伸和承接;
- 基于次元空間-科技感本身的顏色的感知,然后再拓展應(yīng)用。最終確定游戲中心的主色調(diào)為藍(lán)色調(diào),并且使用大跨度的漸變效果,讓顏色更具有炫光的感覺。
顏色拓展及分類
手機(jī)QQ游戲中心作為一個多元化的游戲平臺,很難使用單一的顏色來表達(dá)完整的內(nèi)容層次。因此基于不同的顏色性格,以藍(lán)色為主調(diào),拓展出“紅黃綠”三種顏色作為輔助使用的顏色,用來表達(dá)不同的內(nèi)容感知。依據(jù)功能調(diào)性、冷暖、以及用戶的常規(guī)普識性感知,結(jié)合以上四種色調(diào)的調(diào)性劃分,對不同類型的功能進(jìn)行賦予不同的點(diǎn)綴色彩。
(4)形式結(jié)構(gòu)
一套完整的UI界面都需有一個具體的形式感知,并且可以通過形式的設(shè)計給用戶傳達(dá)具體的視覺設(shè)計模式。
在用戶調(diào)研的時候,我們獲得一個比較關(guān)鍵的信息:目前的信息流閱讀較為混亂,找不到想要的內(nèi)容。因此在新版的設(shè)計時,我們需要深入打造兩個關(guān)鍵點(diǎn):
- 優(yōu)化內(nèi)容的形體感知,提升用戶對于游戲中心的視覺記憶點(diǎn);
- 優(yōu)化內(nèi)容模塊化設(shè)計,提升不同內(nèi)容的歸屬感。
形體感知
基于內(nèi)容,設(shè)計統(tǒng)一的形體感知,提升用戶的視覺記憶點(diǎn)。
- 從內(nèi)容呈現(xiàn)角度考慮,卡片式的設(shè)計更有利于差異性較大的內(nèi)容的獨(dú)立呈現(xiàn);
- 基于設(shè)計形式,卡片式的設(shè)計更有利于內(nèi)容與背景的空間、層次表現(xiàn)。最終選擇了卡片式的設(shè)計方式。
加強(qiáng)形式感
在部分頁面的首個卡片使用異形的設(shè)計,增強(qiáng)頁面的形式感,提升界面設(shè)計的表現(xiàn)層次。并且延續(xù)到對話框、上滑浮層等模塊的設(shè)計,增強(qiáng)多方位的透出。
內(nèi)容差異化的視覺表現(xiàn)
游戲中心首頁整體會承載三種類型的大卡片,分別是:最近在玩、新游單款推薦、新游榜單推薦。
主要設(shè)計目標(biāo):
- 讓用戶感知到三塊內(nèi)容的差異化;
- 打造視覺的差異化,讓用戶在長內(nèi)容滑動的時候不會感覺過于單調(diào)。
最近在玩模塊的設(shè)計上更多的是考慮用戶的代入感,在視覺表現(xiàn)上融入游戲的IP及游戲相關(guān)的背景;新游推薦主要以內(nèi)容展現(xiàn)為主,因此整體設(shè)計偏向簡潔的白色卡片+一點(diǎn)異形裝飾;新游榜單主要體現(xiàn)榜單的序列感,在配色上制定三個維度“金銀銅、熱到冷、深到淺”來表現(xiàn)。
內(nèi)容歸屬感
內(nèi)容歸屬感提升能夠幫助用戶快速地篩選并獲取關(guān)鍵信息。除了交互邏輯上的內(nèi)容歸類之外,還需要處理好內(nèi)容與內(nèi)容之間的劃分、區(qū)隔,通過視覺化的處理手法(排版),讓內(nèi)容的分配更加合理。
游戲中心首頁整體主要分為三塊內(nèi)容:“最近在玩、新游推薦、游戲榜單” ?!白罱谕妗眲t會承載更多的其他內(nèi)容,例如 “視頻、直播、攻略、活動、禮包、社區(qū)、組隊(duì)” 等等。
模塊化設(shè)計
模塊化的設(shè)計具有較強(qiáng)的 “模塊相對獨(dú)立性、內(nèi)容互換性、樣式通用性”,而游戲中心作為一個平臺,需要承載眾多且具有差異化的游戲和游戲內(nèi)容,因此在內(nèi)容多變的情況下,更需要一個簡潔的設(shè)計模式來承載完整的內(nèi)容設(shè)計,而模塊化的設(shè)計則更契合這種多內(nèi)容的設(shè)計。
從以下兩個方向進(jìn)行優(yōu)化:
1)優(yōu)化視覺動線,增強(qiáng)視覺引導(dǎo)和進(jìn)行視覺降噪。重新設(shè)計出兩種方案,從內(nèi)容的展現(xiàn)、設(shè)計變化及整體的模塊在首屏中的占比,最終確認(rèn)方案B,作為繼續(xù)優(yōu)化的方向。
2)優(yōu)化模塊展現(xiàn),小模塊的設(shè)計存在幾個問題:
- 一行展現(xiàn)時內(nèi)容透出不夠,兩行又顯得擁擠;
- 圖形裝飾干擾內(nèi)容展示,且設(shè)計質(zhì)感較差;
- 在一致性上更加深入打磨,刪減不必要的內(nèi)容,統(tǒng)一展示區(qū)域。
(5)氛圍營造
恰當(dāng)氛圍的營造可以幫助提升視覺代入感、沉浸感,既需要滿足平臺的品牌展現(xiàn),也需要合適的透出游戲向的內(nèi)容。
從整體上明確劃分為 “平臺向氛圍” 和 “游戲向氛圍” 。平臺向氛圍主要是滿足制定的世界觀——次元空間的表達(dá),通過圖形及色彩的設(shè)計產(chǎn)生關(guān)聯(lián)性;游戲向氛圍主要是對于IP形象的展現(xiàn)及游戲色調(diào)、背景、顏色等內(nèi)容的透出。氛圍營造關(guān)鍵位置:版本刷新啟動畫面、最近在玩默認(rèn)狀態(tài)、首頁及個人主頁默認(rèn)背景、游戲?qū)^(qū)默認(rèn)狀態(tài)、榜單模塊等。
動畫儀式感
版本刷新動畫強(qiáng)調(diào)版本前后的一種刷新儀式感。從進(jìn)入游戲中心給用戶展現(xiàn)探索的感受;接著提升用戶的參與感,讓用戶自己開啟新版游戲中心;最后通過動畫的銜接讓用戶直觀地感受到版本的變化。
最近在玩切換動畫
“最近在玩”作為游戲中心較為重要的模塊,希望除了與競品具有視覺上的差異之外,還希望可以通過切換動效的設(shè)計更進(jìn)一步打造差異化。我們嘗試了幾種不同的動畫方案。這些方案雖然滿足了模塊及功能的表現(xiàn),但仍然存在著不同的問題。
以上的方案始終不夠有特色和具有記憶點(diǎn),因此繼續(xù)從“游戲及趣味性以及契合度”上進(jìn)行思考。不難發(fā)現(xiàn)掌機(jī)玩家在玩游戲時都會有更換游戲卡的場景(例如Switch),因此我們開始設(shè)想是否“最近在玩”的切換游戲也可以被設(shè)計成更換游戲卡的形式?
最終設(shè)計出新的游戲切換動畫既滿足功能,同時又具有游戲的趣味性。
結(jié)合與拓展
主元素使用游戲手柄的元素,結(jié)合科技化的圖形表達(dá)。融入探索及未來的概念拓展出火箭和太空人的元素,完善整體的內(nèi)容表達(dá)。通過三個角度的表現(xiàn),讓用戶對于游戲中心的風(fēng)格產(chǎn)生關(guān)聯(lián)度和代入感。
基于“最近在玩”模塊的特性,設(shè)計了三種不同色調(diào)以滿足不同的狀態(tài)下展示。
深化感知
基于太空的概念結(jié)合圖形物化映射的內(nèi)容,繼續(xù)深化游戲中心的視覺感知,主要體現(xiàn)在首頁及個人主頁的頂部背景上。
基于氛圍的打造,強(qiáng)化首頁及個人主頁的氛圍營造。
代入感與沉浸感
根據(jù)用研報告,用戶除了關(guān)注游戲禮包之外,另一個更關(guān)注的點(diǎn)是游戲的 “代入感”。因此游戲代入感方面的視覺表現(xiàn)也是這次改版優(yōu)化的一個關(guān)鍵點(diǎn)。而游戲中最能讓玩家產(chǎn)生視覺 “代入感” 及共鳴的內(nèi)容無疑就是 “游戲角色I(xiàn)P(英雄)、游戲場景、游戲玩法、游戲色調(diào)/質(zhì)感、UI美術(shù)風(fēng)格”等等,結(jié)合這些內(nèi)容可以打造出更加貼近用戶玩游戲時的視覺沉浸感。
在手機(jī)QQ游戲中心改版的過程中,“最近在玩”和“游戲?qū)^(qū)” 作為用戶玩過游戲的主要觸達(dá)點(diǎn),因此這兩個模塊的視覺呈現(xiàn)能夠最直觀讓用戶產(chǎn)生游戲的代入感和沉浸感。
從實(shí)際設(shè)計的角度思考2個方面:
- “最近在玩” 最終會在首頁呈現(xiàn),因此我們的設(shè)計必須符合整體UI的大框架;
- “最近在玩”與專區(qū)的關(guān)聯(lián)性。
結(jié)合以上信息,最終篩選出以“游戲角色I(xiàn)P(英雄)+游戲場景(背景)” 的方式來營造 “最近在玩”模塊的氛圍。專區(qū)作為“最近在玩”的入口承載,除了單純的代入感、沉浸感之外,更多的是需要考慮前后的關(guān)聯(lián)度,通過關(guān)聯(lián)才能形成更加深入的代入感。
除了普通的專區(qū),我們還針對王者等頭部游戲設(shè)計了高級定制的游戲?qū)^(qū)。無論從角色I(xiàn)P、游戲色調(diào)/質(zhì)感、UI美術(shù)風(fēng)格等視覺表現(xiàn)上或是游戲內(nèi)容、戰(zhàn)績數(shù)據(jù)等方面都更加深度地打造強(qiáng)代入感和沉浸感的氛圍。
3. 階段小結(jié)
中后期的設(shè)計執(zhí)行是一個具體的輸出內(nèi)容的流程。為了避免設(shè)計過程中出現(xiàn)偏差,因此嘗試引用設(shè)計方法來把控整體設(shè)計的系統(tǒng)性,結(jié)合“菱形圖”的應(yīng)用,幫助從內(nèi)向外一步步剖析更加具體清晰的執(zhí)行內(nèi)容。
三、后續(xù)展望
一個階段性的改版,往往不能覆蓋到所有的方面,因此在改版完成了基本的內(nèi)容之后,我們進(jìn)行了設(shè)計復(fù)盤,找出一些設(shè)計可發(fā)力但未得到落地的點(diǎn)。
- 動效設(shè)計有待優(yōu)化,目前的動效設(shè)計不多,而且在整體的系統(tǒng)性上也較為缺乏,后續(xù)仍然需要在這一方面進(jìn)行更加深入的探索并推動優(yōu)化。
- 轉(zhuǎn)場設(shè)計有待優(yōu)化,包括彈框、上滑浮層、底部復(fù)層、頂部浮層等等,由設(shè)計先出demo,再結(jié)合產(chǎn)品側(cè)的計劃及優(yōu)先級進(jìn)行推動優(yōu)化。
- 品牌系統(tǒng)性有待優(yōu)化,初期主要以內(nèi)容和UI設(shè)計輸出為主,但游戲中心整體的品牌內(nèi)容仍需要進(jìn)行系統(tǒng)性的梳理,包括品牌圖形、字體應(yīng)用、品牌色彩、延展使用等。
最后總結(jié)
- 在設(shè)計前期,設(shè)計側(cè)做了大量的用戶分析和競品分析,主要是為了滿足兩個重要關(guān)鍵點(diǎn):了解用戶和打造差異點(diǎn),希望從全新的角度去呈現(xiàn)不一樣的設(shè)計審美。
- 設(shè)計中期,在于世界觀的打造,通過情緒版的構(gòu)建,最大程度的提升產(chǎn)品側(cè)對于設(shè)計概念的感知,幫助快速確定設(shè)計方向。
- 初稿的設(shè)計輸出,盡量地保證輸出的完整度,在圖形/圖標(biāo)/顏色/界面幾個維度盡可能地讓產(chǎn)品側(cè)同學(xué)感知到設(shè)計對于整體設(shè)計的把控,從而提升產(chǎn)品側(cè)同學(xué)對于設(shè)計思考的接受程度。
- 從初期-中期-后期,整體的設(shè)計輸出流程上是較為順暢的,除了依賴產(chǎn)品側(cè)及項(xiàng)目側(cè)同學(xué)的項(xiàng)目計劃把控之外,設(shè)計側(cè)也保證了高效高質(zhì)的設(shè)計輸出。
作者:DD,公眾號:騰訊ISUX
來源:https://mp.weixin.qq.com/s/fGWibKPPTo4X6yeymWF7lQ
題圖來自騰訊ISUX官網(wǎng)
確實(shí)不錯,最近app準(zhǔn)備大改一版,有學(xué)到一些思路
嗯嗯,互相學(xué)習(xí)一下
贊
“我贊我自己”可還行?