從零到一， 打造全新的遊戲次元空間

對於設計改版大家並不陌生，每個專案的改版中都會有不同的方法或者流程，本文重點在於分析我們在“手機QQ遊戲中心”改版中使用到的流程或者設計方法，並且通過本文總結出一些經驗、方法或內容，希望可以在後續其他的專案設計中得以應用。

本次手機QQ遊戲中心作為較大型的設計改版專案，我們需要從整體去看每個階段中的設計需要輸出的內容，更加系統性地思考整體的設計，而且也需要較為完善的流程。因此針對本次的改版設計，總結了一個較為完整的設計流程導航，主要分為“前期—中期—中後期—後續展望”,並根據設計導航在設計中對各個關鍵點的產出內容進行梳理總結，並從中進行復盤學習。


基於以上完整的流程導航，下面對每個階段進行細化深入的分析，以及在每個階段中對於設計輸出的把控程度及設計的思考。

I前期

設計前期屬於分析的階段，需要儘可能大範圍地去收集對我們後續設計中起到輔助作用的內容，並且需要對各個內容進行具體分析和得出結論。本次“手機QQ遊戲中心”改版主要著重在“專案背景、使用者分析、競品分析、頭腦風暴”四個部分。


1.專案背景

為什麼要改版？

在改版之前我們需要了解真正的改版目的是什麼，而不是純粹地追求變化而進行設計優化。並且希望通過改版後給使用者傳達一個怎樣的感受？這些都是需要去深入瞭解的內容。

產品側

重新思考“手機QQ遊戲中心”的策略及定位，整體的大方向相比之前有所改變。因此產品側同學希望通過改版優化升級，來滿足新的產品策略和方向。當然除了底層平臺的基礎架構優化之外，更需要一個全新的“互動體驗”和“視覺UI風格”來重新整理使用者對於舊版遊戲中心的感知及感受。

設計側

1.基於使用者，通過使用者調研分析得到的反饋：舊版遊戲中心無論在“內容的展示”或“功能的引導”上都是處於混亂的狀態，使用者進入遊戲中心後無法定位介面的第一視覺焦點，關鍵資訊及內容獲取較難。2.基於設計，在產品大方向調整的情況下，舊版遊戲中心的設計很難滿足產品側的功能需要。除此之外“手機QQ遊戲中心”從上線至今較少有大的設計改版優化，長期的固化印象並不能滿足現在日新月異的使用者變化。

基於以上內容，對整體的品牌印象和設計語言進行重新設計，重新整理使用者對手機QQ遊戲中心的固有印象，提升使用者的信任感，給使用者傳遞我們一直求變的精神。主要從以下兩點著手：1.重新搭建遊戲中心的世界觀，讓整體的設計更加符合年輕使用者（特別是男性使用者）的審美；2.進行模組重組，提升視覺焦點，從整體到模組再到細節的設計，突出重點資訊內容，弱化輔助內容。

2.使用者分析

瞭解使用者

我們希望通過前期的使用者分析，更加深入地瞭解我的使用者是一個怎樣的結構狀態，並且能在其中找到可以通過設計發力而幫助到使用者的點。

明確使用者主體及性格

從使用者調研得出，手機QQ遊戲中心的主要使用者為初高中的男性玩家，熱玩型別主要以競技、體育、益智類遊戲為主，使用者的主要性格是年輕、好奇、探索、個性。


分析使用者訴求

1.使用者對於遊戲中心的依託主要在於擴充虛擬關係鏈，希望通過遊戲來擴充套件自我的社交圈子。2.希望通過遊戲中心可以提升自己的遊戲技術，讓自己取得進步。3.增強遊戲中心與遊戲直接的關聯，例如在遊戲中心可以看到一些遊戲角色IP，提升代入感。4.對於平臺的依賴性主要在於禮包福利和玩法攻略。


使用者對於手機QQ遊戲中心的看法

使用者對於舊版遊戲中心的主要關注點在於：1.資訊呈現的方式過於雜亂，找不到自己關注的內容或者禮包；2.希望在操作上更加簡單智慧，提升操作的效率。


3.競品分析及設計趨勢

從別人的身上學習優點

競品及趨勢的分析也是非常重要的一環，通過這些分析和收集，可以幫助我們更加準確地判斷後續設計中應用的一些設計方式及手法，起到取長補短的作用。

本次的競品並不只侷限於同型別的遊戲平臺，還包括趣味類APP、動漫類、視訊類等等。更多地尋找不同方向的思考點，並結合2019年的設計趨勢總結。最終得出以下幾點結論：1.卡片式的設計有利於每個模組劃分；2.統一的圖形設計語言貫穿整個APP，更具品牌性；3.豐富的動效，讓設計表達更加年輕化；4.淺色背景+漸變色的運用，在扁平化的基礎提升頁面的細節。


4.頭腦風暴

激發更多的想法

腦暴的主要目的是在於激發更多的思考可能性，並且通過多方的腦暴進行可行性的內容梳理，最終幫助設計與產品同學達成一致的結論。

由設計側主導發起，與產品同學及UI開發同學一起進行了腦暴。總體腦暴時長大約為2.5小時，腦暴圍繞關鍵點：1.“手機QQ遊戲中心”對於使用者來說是一個怎麼樣的感知？2.“手機QQ遊戲中心”可以幫助使用者得到什麼樣的提升？

從這次腦暴中，我們得出了不少關鍵的資訊及可發力的方向，整體劃分為四個關鍵的路徑：“專業的內容”“幫助變強”“遊戲社交”“消費娛樂”，並且從中選出與之前的使用者分析報告相匹配的關鍵詞，進行下一步的梳理。


內容梳理及關鍵點標記


結合上面分析及腦暴的內容，我們進一步梳理整體的“設計目標”及“品牌性格”，並對目標和性格做具體的定義，設計目標從“代入感、社交化、成就感”方面打造；品牌性格從"年輕、個性、探索、好奇"四個維度進行詳細地設計承載。


5.階段小結

在前期的通過“專案背景、使用者調研、競品分析、頭腦風暴”等方式幫助我們清晰瞭解整體的專案結構，從中我們得到了一些比較關鍵的內容結論。除了對於設計方面的幫助之外，更多的是與產品同學達成一致的想法，方便後續的設計落地起到指導性的意義。

II中期

中期屬於初步設計內容輸出及確定大方向階段，明確產品世界觀、情緒版輸出及基於情緒版的設計初稿。



1.世界觀搭建

思考設計大方向

除了重新整理使用者的視覺感知之外，通過世界觀的搭建指導後續整體改版設計中運用的“設計語言”，讓整體的設計更加“系統性”並且具有較強的延展性。

搭建世界觀主軸

基於遊戲的底層概念，根據“代入感、社交化、成就感”三個大方向，圍繞“年輕、個性、好奇、熱血”四大性格進行了二次腦暴。


小組快速腦暴並且梳理關鍵詞，最後一起確定“次元空間““遊戲廣場”“寶典祕籍”三個不同的世界觀進行情緒版輸出。


2.情緒版輸出

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

情緒版的作用在於探索設計方向和達成共識，因此在後續的設計中可根據實際情況調整變化。情緒版主要從幾個內容展現：視覺影像、色彩、字型、介面效果、圖示圖形、插圖風格、背景、動畫效果等。考慮到受眾是產品側同學，因此需要儘量地具體化細節，讓產品側同學得到真實的視覺感受。


方案A-次元空間

基於遊戲的虛擬場景出發，手機QQ遊戲中心主要起到了連線真實（使用者）和虛擬（遊戲）的作用，我們把手機QQ遊戲中心想象成第三空間中轉站——次元空間，玩家通過這裡進入遊戲的虛擬世界。

基於次元空間的腦暴及關鍵詞探索，確定關鍵詞的表現：炫光感、空間感、速度感、未來感。


方案B-遊戲廣場，來源於豐富多彩的遊戲主城概念，關鍵詞：豐富、霓虹、熱鬧

方案C-寶典祕籍，結合攻略內容打造成玩家的晉級祕籍的概念，關鍵詞：神祕、探索、增強


基於情緒版，與產品同學（有產品老大參與）當面確認初稿的輸出方向：基於“次元空間”及“遊戲廣場”的概念進行初稿設計。其中還得到的具體反饋：1.不建議深色調：遊戲的展示內容本身較為豐富，擔心深色調容易造成視覺疲勞。2.不需要過度專業：希望視覺表達上有特色，但不需要過度的強調個性，可以滿足不同的遊戲型別展現。

3.初稿輸出

確認設計落地方案

方案A：次元空間整體設計比較偏男性向（基於QQ使用者的資料分析）硬朗風格，圖示搭配多彩的漸變疊色設計突出年輕化，整體結構使用小圓角的卡片；方案B：遊戲廣場整體偏向可愛風格，在顏色的使用上也會比較偏粉嫩，整體結構大圓角的卡片。


最終與產品側一起確定方案A的方向繼續深化延展設計。主要考慮點：1.遊戲中心的使用者以男性為主，方案A相比的設計整體感受上會更加貼近男性使用者審美；2.從產品側考慮，方案A的設計相對更加中性，可以更好地滿足不同遊戲的融入。

4.階段小結

初稿不只是純粹的方向探索，作為設計師應該做更多的內容去輔助說明設計的意圖及想法，本次設計在設計次元空間的初稿時，考慮到產品側對於整體設計的腦補理解及代入感，從系統化的角度進行輸出（包括：圖形、顏色、動效、轉場）等幾個維度進行了初步探索，力求幫助設計方案更加有效地傳達以及產品側同學進行決策。


III中後期

1.設計方法

基於核心思考的設計方法論

方法論可以是一套流程或是設計執行的方法，除了表面的論述表達之外，關鍵在於幫助我們更加系統性、全域性性地思考整體的設計規則，並且具有較高的可應用性和複製性。

思考邏輯

以“核心”作為起始點，通過“核心定調—性格擴充—表現延伸”三層內容的邏輯思考，從抽象向具象進行轉化，最終通過設計語言表達出來的設計方式。“核心”定義為整體設計的核心或世界觀——抽象的概念；“性格”是基於核心概念關聯擴充出來的次具象的設計形態；“表現”是實際執行時的設計語言表達。


設計模型（思考菱形圖）

基於設計核心，由內向外一層層地擴散聯想，並推匯出每一層的內容。每一層的內容都互相具有關聯性，從內向外越來越具象地表達出設計最終落地的形態。最終得到的一個結論應該是一個具體可執行的設計方法。


結合專案

基於世界觀“次元空間”為設計核心，結合設計核心以及情緒版輸出的關鍵詞，最終確定設計的性格為“炫光感”“空間感”“速度感”“未來感”，通過這四個方面來呈現“次元空間”的視覺感知。結合性格進行二度延伸思考，推匯出表現層的內容，從而定調“手機QQ遊戲中心”整體的設計語言。


整理表現層

定調細節圍繞核心及性格，表現層整體分為“圖形、顏色、形式、氛圍”四個基礎形態來執行整體的設計，制定初步的設計規則，幫助後續更加深入和準確地把控整體對設計調性。


2.設計執行

如何落地到最終輸出？

推匯出具體的設計細項之後，最終以“圖形、顏色、形式、氛圍”四個維度去思考實際的設計，通過這些方面的設計串聯形成最終完整的設計語言。


A.圖形設計

基於遊戲中心的使用者形態及設計性格的表現，在整體的圖形設計上會更加偏向硬朗，使用“斜線、多邊形之類的形體結構，來表現整體的視覺感知。

視覺物化提取

基於性格四感的物化對映，從中提取關鍵元素來表達“次元空間”的概念，並且符合現實生活中的視覺感知。從而提升使用者對於“手機QQ遊戲中心”的圖形設計代入感。


定義元素

基於以上物化的圖樣，並結合表現層的定義，確定整體的圖形風格為“線性+半透明填充”的科技感風格，最終確定圖形的設計語言為“斜線、多邊形、異形卡片、資訊圖譜”等表達“個性”的性格，具象化的圖形感知為“火箭、太空人、遊戲手柄、探索器”等元素來表達年輕使用者好奇、探索的一面。


B.圖示設計

圖示作為整體UI的點睛之筆，是除了“顏色”之外串聯整個UI風格的品牌元素體現，因此在設計執行中必須緊扣整體的風格大方向。

設定圖示規則

1.結合遊戲中心的使用者主要以男性為主，因此整體的圖示造型偏向硬朗，收角處使用小圓角進行中和，避免過於生硬。2.圖示視角統一規範為正面和正側面的設計規則，從規則上保證圖示的基礎識別性。3.結構上採用組合疊加的方式，提升圖示的空間層次感，避免過於單調。4.使用多彩的大跨度漸變滿足炫光感的表現，且符合使用者年輕化的特性。


二次優化打磨

多方案嘗試，通過不同的角度找出更加適合遊戲中心的圖示設計。第一版的圖示設計單獨來看的大感覺基本上還是可以的，但當我們深入去研究的時候就會發現無論從形體或風格一致性上，其實還存在著很大的優化空間。


二次優化主要從2個方向思考：1.圖示的形體優化；2.圖示細節的整體風格一致性優化。

1.形體優化，簡化圖示的細節，增強圖示的辨識度，優化圖示的外輪廓讓圖示更加流暢，增強圖示的表意及普適性。


2.風格一致性優化，從兩個方面考慮圖示的一致性問題：（1）圖形統一：遊戲中心整體的圖形風格都是以線面為主，但初稿的風格主要使用了面形設計，在整體風格的吻合度上也值得優化。（2）顏色降噪：多彩的圖示單獨來說具有不錯的視覺表現，但整體上缺乏關聯性，且作為“基礎圖示”以及從“品牌性”“一致性”方面考慮也存在著挑戰，對於品牌色的透出不夠完善，因此需要進行整體的“顏色降噪”，增強品牌色調的感知。


C.顏色運用

顏色作為另外一個維度的視覺感知，相比於圖形更能提升使用者對於品牌的感受。合理明確的品牌色調可以幫助使用者加深對於產品的認知。

色調延續

主色調的設計主要考慮兩個方面：1.遊戲中心本身存在於手機QQ，使用者對於手機QQ具有強烈的品牌色調感知，因此對於遊戲中心本身，希望可以起到一個延伸和承接；2.基於次元空間-科技感本身的顏色的感知，然後再擴充應用。最終確定遊戲中心的主色調為藍色調，並且使用大跨度的漸變效果，讓顏色更具有炫光的感覺。


顏色擴充及分類

手機QQ遊戲中心作為一個多元化的遊戲平臺，很難使用單一的顏色來表達完整的內容層次。因此基於不同的顏色性格，以藍色為主調，擴充出“紅黃綠”三種顏色作為輔助使用的顏色，用來表達不同的內容感知。依據功能調性、冷暖、以及使用者的常規普識性感知，結合以上四種色調的調性劃分，對不同型別的功能進行賦予不同的點綴色彩。


D.形式結構

一套完整的UI介面都需有一個具體的形式感知，並且可以通過形式的設計給使用者傳達具體的視覺設計模式。

在使用者調研的時候，我們獲得一個比較關鍵的資訊：目前的資訊流閱讀較為混亂，找不到想要的內容。因此在新版的設計時，我們需要深入打造兩個關鍵點：1.優化內容的形體感知，提升使用者對於遊戲中心的視覺記憶點；2.優化內容模組化設計，提升不同內容的歸屬感。


形體感知

基於內容，設計統一的形體感知，提升使用者的視覺記憶點。1.從內容呈現角度考慮，卡片式的設計更有利於差異性較大的內容的獨立呈現；2.基於設計形式，卡片式的設計更有利於內容與背景的空間、層次表現。最終選擇了卡片式的設計方式。


加強形式感

在部分頁面的首個卡片使用異形的設計，增強頁面的形式感，提升介面設計的表現層次。並且延續到對話方塊、上滑浮層等模組的設計，增強多方位的透出。


內容差異化的視覺表現

遊戲中心首頁整體會承載三種型別的大卡片，分別是：最近在玩、新遊單款推薦、新遊榜單推薦。主要設計目標：1.讓使用者感知到三塊內容的差異化，2.打造視覺的差異化，讓使用者在長內容滑動的時候不會感覺過於單調。最近在玩模組的設計上更多的是考慮使用者的代入感，在視覺表現上融入遊戲的IP及遊戲相關的背景；新遊推薦主要以內容展現為主，因此整體設計偏向簡潔的白色卡片+一點異形裝飾；新遊榜單主要體現榜單的序列感，在配色上制定三個維度“金銀銅、熱到冷、深到淺”來表現。


內容歸屬感

內容歸屬感提升能夠幫助使用者快速地篩選並獲取關鍵資訊。除了互動邏輯上的內容歸類之外，還需要處理好內容與內容之間的劃分、區隔，通過視覺化的處理手法（排版），讓內容的分配更加合理。

遊戲中心首頁整體主要分為三塊內容：“最近在玩、新遊推薦、遊戲榜單”。“最近在玩”則會承載更多的其他內容，例如“視訊、直播、攻略、活動、禮包、社群、組隊”等等。

模組化設計

模組化的設計具有較強的“模組相對獨立性、內容互換性、樣式通用性”，而遊戲中心作為一個平臺，需要承載眾多且具有差異化的遊戲和遊戲內容，因此在內容多變的情況下，更需要一個簡潔的設計模式來承載完整的內容設計，而模組化的設計則更契合這種多內容的設計。

從以下兩個方向進行優化：

1.優化視覺動線，增強視覺引導和進行視覺降噪。重新設計出兩種方案，從內容的展現、設計變化及整體的模組在首屏中的佔比，最終確認方案B，作為繼續優化的方向。


2.優化模組展現，小模組的設計存在幾個問題：1.一行展現時內容透出不夠，兩行又顯得擁擠；2.圖形裝飾干擾內容展示，且設計質感較差；3.在一致性上更加深入打磨，刪減不必要的內容，統一展示區域。


E.氛圍營造

恰當氛圍的營造可以幫助提升視覺代入感、沉浸感，既需要滿足平臺的品牌展現，也需要合適的透出遊戲向的內容。

從整體上明確劃分為“平臺向氛圍”和“遊戲向氛圍”。平臺向氛圍主要是滿足制定的世界觀——次元空間的表達，通過圖形及色彩的設計產生關聯性；遊戲向氛圍主要是對於IP形象的展現及遊戲色調、背景、顏色等內容的透出。氛圍營造關鍵位置：版本重新整理啟動畫面、最近在玩預設狀態、首頁及個人主頁預設背景、遊戲專區預設狀態、榜單模組等。

動畫儀式感

版本重新整理動畫強調版本前後的一種重新整理儀式感。從進入遊戲中心給使用者展現探索的感受；接著提升使用者的參與感，讓使用者自己開啟新版遊戲中心；最後通過動畫的銜接讓使用者直觀地感受到版本的變化。


最近在玩切換動畫

“最近在玩”作為遊戲中心較為重要的模組，希望除了與競品具有視覺上的差異之外，還希望可以通過切換動效的設計更進一步打造差異化。我們嘗試了幾種不同的動畫方案。這些方案雖然滿足了模組及功能的表現，但仍然存在著不同的問題。


以上的方案始終不夠有特色和具有記憶點，因此繼續從“遊戲及趣味性以及契合度”上進行思考。不難發現掌機玩家在玩遊戲時都會有更換遊戲卡的場景（例如Switch），因此我們開始設想是否“最近在玩”的切換遊戲也可以被設計成更換遊戲卡的形式？


最終設計出新的遊戲切換動畫既滿足功能，同時又具有遊戲的趣味性。


結合與擴充

主元素使用遊戲手柄的元素，結合科技化的圖形表達。融入探索及未來的概念擴充出火箭和太空人的元素，完善整體的內容表達。通過三個角度的表現，讓使用者對於遊戲中心的風格產生關聯度和代入感。


基於“最近在玩”模組的特性，設計了三種不同色調以滿足不同的狀態下展示。


深化感知

基於太空的概念結合圖形物化對映的內容，繼續深化遊戲中心的視覺感知，主要體現在首頁及個人主頁的頂部背景上。


基於氛圍的打造，強化首頁及個人主頁的氛圍營造。


代入感與沉浸感

根據用研報告，使用者除了關注遊戲禮包之外，另一個更關注的點是遊戲的“代入感”。因此遊戲代入感方面的視覺表現也是這次改版優化的一個關鍵點。而遊戲中最能讓玩家產生視覺“代入感”及共鳴的內容無疑就是“遊戲角色IP（英雄）、遊戲場景、遊戲玩法、遊戲色調/質感、UI美術風格”等等，結合這些內容可以打造出更加貼近使用者玩遊戲時的視覺沉浸感。


在手機QQ遊戲中心改版的過程中，“最近在玩”和“遊戲專區”作為使用者玩過遊戲的主要觸達點，因此這兩個模組的視覺呈現能夠最直觀讓使用者產生遊戲的代入感和沉浸感。從實際設計的角度思考2個方面：1.“最近在玩”最終會在首頁呈現，因此我們的設計必須符合整體UI的大框架；2.“最近在玩”與專區的關聯性。


結合以上資訊，最終篩選出以“遊戲角色IP（英雄）+遊戲場景（背景）”的方式來營造“最近在玩”模組的氛圍。專區作為“最近在玩”的入口承載，除了單純的代入感、沉浸感之外，更多的是需要考慮前後的關聯度，通過關聯才能形成更加深入的代入感。


除了普通的專區，我們還針對王者等頭部遊戲設計了高階定製的遊戲專區。無論從角色IP、遊戲色調/質感、UI美術風格等視覺表現上或是遊戲內容、戰績資料等方面都更加深度地打造強代入感和沉浸感的氛圍。


3.階段小結

中後期的設計執行是一個具體的輸出內容的流程。為了避免設計過程中出現偏差，因此嘗試引用設計方法來把控整體設計的系統性，結合“菱形圖”的應用，幫助從內向外一步步剖析更加具體清晰的執行內容。


IIII後續展望

一個階段性的改版，往往不能覆蓋到所有的方面，因此在改版完成了基本的內容之後，我們進行了設計覆盤，找出一些設計可發力但未得到落地的點。

1.動效設計有待優化，目前的動效設計不多，而且在整體的系統性上也較為缺乏，後續仍然需要在這一方面進行更加深入的探索並推動優化。

2.轉場設計有待優化，包括彈框、上滑浮層、底部復層、頂部浮層等等，由設計先出demo，再結合產品側的計劃及優先順序進行推動優化。

3.品牌系統性有待優化，初期主要以內容和UI設計輸出為主，但遊戲中心整體的品牌內容仍需要進行系統性的梳理，包括品牌圖形、字型應用、品牌色彩、延展使用等。

最後總結

1.在設計前期，設計側做了大量的使用者分析和競品分析，主要是為了滿足兩個重要關鍵點：瞭解使用者和打造差異點，希望從全新的角度去呈現不一樣的設計審美。

2.設計中期，在於世界觀的打造，通過情緒版的構建，最大程度的提升產品側對於設計概念的感知，幫助快速確定設計方向。

3.初稿的設計輸出，儘量地保證輸出的完整度，在圖形/圖示/顏色/介面幾個維度儘可能地讓產品側同學感知到設計對於整體設計的把控，從而提升產品側同學對於設計思考的接受程度。

4.從初期-中期-後期，整體的設計輸出流程上是較為順暢的，除了依賴產品側及專案側同學的專案計劃把控之外，設計側也保證了高效高質的設計輸出。

作者：DD
來源：騰訊ISUX
原地址：https://mp.weixin.qq.com/s/fGWibKPPTo4X6yeymWF7lQ