随着産品的功能叠代,體驗的逐步更新,用戶對QQ遊戲中心有着更多更強的訴求。那麼該如何對用戶、産品、設計的訴求進行整合,在提升産品用戶體驗的基礎上,以品牌符号強化産品的記憶點?本文從三個方面進行了分析,希望對你有所幫助。
一、改版背景 QQ遊戲中心是手Q用戶觸達遊戲的重要場景,每天有海量用戶來此進行遊戲相關的互動操作,随着産品的功能叠代,體驗的逐步更新,用戶對QQ遊戲中心也有着更多更強的訴求。
在2022年的研究報告《遊戲中心核心價值及機會點定性研究》中發現用戶在遊戲中心内最為關心的是領取福利,通過在遊戲中心獲得遊戲相關的禮品道具幫助提升遊戲體驗。同時用戶對遊戲有着較強的社交感、成就感、沉浸感訴求。
随着産品目标的調整,遊戲中心的功能也逐漸豐富化,除開領福利和找遊戲,用戶可以在此消費遊戲内容、購買遊戲道具、以及使用遊戲相關功能等,用戶觸達遊戲的方式變得更加多元,用戶的粘黏性也進一步提升,産品依勢也需要打造更好的産品遊戲氛圍感和品牌印象來建立用戶口碑、提升轉化。
同時,以“生機”為設計理念的QQ,也進行了體驗上的版本叠代,遊戲中心作為QQ内的重要業務,也将跟随緊随其後完成體驗的更叠,提升用戶體驗、延續QQ品牌基因。
二、制定設計策略 對用戶、産品、設計的訴求進行整合後,梳理出本次改版的基本設計思路——在提升産品用戶體驗的基礎上,以品牌符号強化産品的記憶點,一方面從産品體驗上給用戶帶來更順暢體驗,同時以品牌圖形強化遊戲感和沉浸感,提升用戶心中的品牌印象。
優化基礎體驗:跟随手Q“生機”設計理念和界面風格,統一UI界面樣式 ;重構内容消費的信息容器,提升内容消費效率;提升設計效率,以及打造更高效團隊合作方式。打造品牌記憶點:通過品牌基因的植入、遊戲氛圍感的增強,讓産品更具辨識度,同時加強産品的遊戲屬性,強化用戶的沉浸感。
遊戲中心改版總覽圖
三、解決問題
遊戲中心本次改版在體驗上的優化聚焦在3方面:
(1)煥新界面
随着産品功能的擴充和叠代,遊戲中心的界面風格開始趨于參差,同時伴随QQ設計規範——Q語言的更新,遊戲中心的首要任務即完成界面風格的統一。
① 統一風格
以往的遊戲中心,采用更為豐富多彩的設計語言,導緻從手Q進到遊戲中心較為強烈的割裂感。而本次改版中延續手Q的簡約透氣的風格表現,通過色彩樣式、組件、圓角等設計要素将界面進行規範統一,保證體驗的一緻性。
② 求同存異
在首頁、遊戲、攻略這3個場景,界面的風格向手Q設計語言靠攏,色調以手Q藍為主,以相對簡潔的界面風格保證内容傳遞的高效性。
同時根據業務訴求,也保持了遊戲中心自有特色——在福利和商城tab兩個主場景下強化遊戲氛圍感:采用3D圖形和多彩圖标、界面主色調使用情緒更高的橙黃色,讓整體感知更符合産品的特質。
除開界面風格,圖标的設計也融入了遊戲中心的特色——保持基礎型與手Q圖标一緻外,同時将一些圖标通過遊戲化語義表達出來,使其更具趣味性和遊戲感。
(2)重構容器
① 優化内容消費體驗:内容卡片結構化
遊戲中心的消費内容來源豐富,包含問答站、小世界、頻道等多處内容源,給用戶帶來海量内容的同時,也導緻了信息容器的冗雜,增加用戶的認知負擔、降低浏覽效率。
在前期和産品的梳理中,發現遊戲中心的feed類型可以分為4大類,總計有21種樣式。為解決用戶的浏覽體驗問題,對feeds結構進行了結構化整理,以流式布局将所有樣式整合為6個部分,基于不同消費内容去排列組合feed類型,簡化産品邏輯,同時用戶更聚焦内容閱讀。
② 提升遊戲分發效率
遊戲tab作為遊戲分發的主要場景,改版前主要以橫向列表容器去承載遊戲信息,用戶探索新遊的效率較低,同時雷同化的結構,容易浏覽疲勞。
針對以上情況,在頁面設計上豐富了承載容器的樣式,采用高效率的遊戲圖标排列或者遊戲合集卡片,提高了浏覽效率,也讓用戶更容易命中自己鐘愛的遊戲類型,不同的容器類型組合也讓整個浏覽更有節奏,減少疲勞感。
(3)提升設計效率
遊戲中心在以往産品功能的快速叠代中,由于規範和組件的不完善以及和開發同學協作模式的不确定性,讓産品界面的實現往往不盡滿意,無論是開發效率還是還原程度都受到一定的影響,最終導緻用戶體驗的不完滿,所以本次的改版,提升設計的效率也是體驗提升的重要一環
① 統一設計規範
界面的基礎樣式和控件,和手Q基本規範保持一緻,包括顔色、圖标風格、基礎控件、圓角、栅格等。同時基于業務的訴求,我們在手Q基礎上拉出一條規範支線用于遊戲中心的設計——主要在基礎色、圖标等拓展了更多樣式。
② 提升協作效率
以往黑夜模式的适配,開發和設計需要同時輸出和還原兩次設計稿,導緻适配成本較高。在本次改版中,将新風格頁面的組件token化,搭建起設計和開發之間界面樣式的映射關系,開發和設計隻需還原一次設計稿,即可完成黑夜模式的适配,達到高效設計、快速上線叠代目的。
黑夜模式的上線,也提升了遊戲中心的浏覽感受,讓用戶的體驗更友好、更親近用戶,回歸Q語言親和自然的設計原則。
(1)打造品牌記憶符号
QQ圍繞社交有效性、社交廣度與深度、社交動力等維度,打造一個積極向上充滿生命力的社交生态體系。生機的理念承載樂觀活力與積極延續,具備有序和精緻的特點,也象征萬物發展所蘊含的生命力。——Q語言-設計理念
在遊戲的世界觀中,“能量”經常作為源動力元素以推動遊戲進展,QQ遊戲中心承接Q語言“生機”的設計理念,提煉衍生“能量”概念,以能量元素将生機理念具像化,賦予産品積極快樂充滿活力的品牌感知。
在确定能量作為核心關鍵詞後,對此發進行情緒版關鍵詞的發散,結合前文提到各方訴求,最終把關鍵詞鎖定到能量、遊戲感、氛圍上。
(2)品牌基因拓展
在對關鍵詞的發散階段,讨論和嘗試了多種能将“能量”概念視覺化的元素,考慮到UI界面的延展性和可用性,最終把可視化元素鎖定在寶石和光上——寶石造型上相對簡單,光在動畫塑造上能擁有多樣豐富的表現形式。
為契合概念的設定和後續的延展,我們把寶石定義為能量石。在能量石的設計上,特意營造出能量充盈、光感琉璃的視覺感受,造型上采用多面切割結構,色彩上兼容藍色和黃色兩種色調,以匹配遊戲中心的整體界面風格。
除開主體圖形,也從其他設計維度去落地能量的設計理念:
① 圖形
能量之石:除開前面的基礎寶石,也設計了多種能量石的造型,并兼容磨砂質感,以應對不同場景使用。
在UI界面的運用:
在産品的核心界面上,将能量石作為背景圖案使用,強化品牌和氛圍感;和業務也進行結合——以能量石将商城的幸運值圖形化,讓品牌和功能直接連接起來;把能量石材質和遊戲元素進行結合——王者皮膚牆功能内,将遊戲LOGO賦予能量石材質,讓遊戲和平台品牌之間産生品牌上的關聯。
能量之石圖形在界面内的運用
與3D圖形的結合:寶箱是遊戲中心一個重要道具,每日有大量活躍用戶來遊戲中心做任務開寶箱,開寶箱成為了産品觸達用戶的高頻場景。因此對寶箱進行了設計,希望在高觸發場景加強用戶的品牌感知,強化遊戲感。寶箱在造型上采用了和寶石一樣的切割造型,同時寶箱上加入了能量石,把3D圖形和能量石進行結合。
除開寶箱外,對業務内常用的圖标進行了3D化處理。
3D圖形在界面内的運用
② 動效
在動效的設計上,也承接能量的設計理念,以光為設計靈感,設計了遊戲感強烈,電光火石般的的動畫效果——能量光,用于界面内UI界面和3D圖形動畫,強化整個産品的遊戲氛圍感。
動效在界面中的運用
③ 顔色
在界面顔色的使用上,主界面延續手Q的标準藍色調,包括控件、字色也與手Q統一,保證界面整體色調的延續性。同時基于業務訴求,拓展了情緒感知更強烈的“遊戲橙”。
對于以内容體驗為主的頁面——比如遊戲中心的首頁、遊戲發現頁、攻略頁,使用手Q的标準藍;在需要強氛圍和遊戲感的頁面——遊戲福利頁和遊戲商城頁,采用遊戲橙。
④ 質感
由于遊戲中心内多處用到的3D元素,對3D的質感進行了規範統一。
材質:考慮到UI界面的通用性,避免3D材質的喧賓奪主,材質風格以簡單通用為主,顔色以界面主色調為基礎,漫射材質多營造輕黏土的通用質感;針對能量石的材質,則采用光感通透的玻璃材質。
燈光:燈光采用基本的三點布光,旨在表現物體的質感、立體感和空間透視感。整體布光氛圍積極,友好,明朗,透傳QQ活力生動的品牌氣質。
⑤ 字體
遊戲平台内,有着較多需要運營設計的場景,字體是信息展示的重要元素,選擇了造型感較強造字工房的逼格青春字體,作為界面内的強調字體,更好的營造遊戲氛圍感。
字體在運營活動和UI界面中的運用
四、總結 QQ遊戲中心作為QQ用戶觸達遊戲的重要途徑,用戶們在體驗鍊路上有着各式各樣的訴求。産品功能的多元化也讓用戶體驗必須追随功能持續叠代。擁有幾億用戶的QQ,各類産品的統一優質體驗,也是“一切以用戶為中心”原則的必要體現。
設計作為距離用戶最近的一方,在平衡各方訴求後呈現給用戶一個全新的遊戲氛圍感十足的産品,是本次改版的終極願望。希望能量滿滿、生機煥發的QQ遊戲中心改版能給大家帶來一些啟發。
來源公衆号: 騰訊ISUX(ID:tencent_isux),騰訊ISUX用戶體驗與設計部。
本文由人人都是産品經理合作媒體@騰訊ISUX 授權發布于人人都是産品經理,未經許可,禁止轉載。
題圖來自 Unsplash,基于CC0協議。
該文觀點僅代表作者本人,人人都是産品經理平台僅提供信息存儲空間服務。
,
更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!