整合創新,體驗升級 | vivo游戲中心福利頁改版

0 評論 3011 瀏覽 3 收藏 29 分鐘

vivo游戲中心中的福利頁改版,有什么值得借鑒和學習的地方?如何給用戶打造一個更具吸引力,體驗更好的游戲平臺福利聚合頁呢?本文對此進行拆解,一起來看看吧。

vivo游戲中心作為給用戶提供游戲全生命周期服務的官方平臺,“福利”是其三大核心服務能力。在整個vivo游戲生態內,我們通過多場景、多觸點為用戶提供福利內容與服務,其中福利tab作為聚合平臺重要福利的一級tab頁,是用戶來查找、獲取福利的最核心場景。

整合創新,體驗升級 | vivo游戲中心福利頁改版

作為UX和UI設計師,我們該怎么利用各自專業優勢,通過科學與美學的系統化設計方法,為用戶打造一個更具吸引力,體驗更好的游戲平臺福利聚合頁呢?

1. 項目背景

從20年開始,我們把“福利”單拎出來聚合成一級tab頁總共經歷了2個版本——1.0版本的領取游戲福利的工具型頁面、2.0版本的聚合平臺福利的運營態頁面。但是福利tab的業務訴求始終沒有變,就是希望通過福利把用戶吸引過來,之后培養用戶的使用習慣,進而產生對整個游戲中心的后向行為和平臺依賴。

22年我們進行了福利tab3.0改版,通過收納更多福利內容,豐富用戶來找福利的場景,打造一個兼容游戲福利和平臺福利的平衡型福利聚合頁,并把用戶活躍規模和高價值用戶占比定為本次改版的業務指標。

整合創新,體驗升級 | vivo游戲中心福利頁改版

2. 設計目標

我們從游戲平臺福利聚合的頁面定位和用戶需求場景出發,制定了本次改版的設計目標:

  • 感知維度-清晰傳遞游戲屬性下的福利聚合心智,同時提升福利tab的整體吸引力
  • 使用維度-提高用戶對各福利信息的獲取效率,促進用戶行為轉化

整合創新,體驗升級 | vivo游戲中心福利頁改版

圍繞設計目標,接下來我們將從不同設計維度發力,推導并產出最終方案。用戶對福利聚合場景的感知并喚起了解的興趣,既離不開內在的「框架布局與內容組織」,也和外在的「頁面調性設定與視覺呈現」有關;當用戶進入到某個功能或場景時,我們希望從「信息設計和行為設計」的層面,讓每個福利模塊都清晰好用。

整合創新,體驗升級 | vivo游戲中心福利頁改版

一、框架布局&福利內容組織

1.?分析要收納什么福利

既然要在一個頁面呈現vivo游戲平臺重要的福利,那首先要了解有哪些福利供給可供選擇,以及去梳理對應福利的目標人群是誰;有什么特征屬性;誰來提供(通常提供方有各自的業務訴求和目標);用戶通過什么方式來獲得等等。

比方說,“禮券”這種福利主要針對的是付費用戶;用戶在游戲付費時可抵扣現金使用,所以深受我們的高付費價值(中高V)用戶青睞;通常它由我們的會員業務或用戶運營業務投入成本來提供;用戶可以通過VIP等級提升來免費領取,或開通大會員和參與游戲的運營活動來獲得。

2. 生產福利功能模塊

有了福利供給,接下來需要將每種「福利內容」和「產品能力」進行打包重組,生產對應的功能模塊。每個模塊還要充分考慮用戶使用場景和業務訴求,采用“動詞+名詞”的形式作為我們構建單個模塊用戶心智的原則。

比方說用戶的訴求是獲得積分福利;而“簽到”和“做平臺任務”都可以幫助用戶得到更多積分,同時也可為平臺帶來更多的有效活躍行為;用戶有了積分之后,查看積分的收支情況便成了他的附帶需求,因此我們將相關的福利內容和功能包裝成“賺積分”模塊。

按照這個思路,我們構建出了整個福利tab的6大福利模塊——“領禮券”、“賺積分”、“抽現金”、“推活動”、“查看游戲福利”和“逛商城兌禮品”。

整合創新,體驗升級 | vivo游戲中心福利頁改版

3. 推導頁面框架

在布局整個頁面時,我們從「用戶」與「游戲」的相關性出發,將游戲平臺最和玩家息息相關的福利放到用戶一進來就能看到的位置,之后再放置其他的福利拓展內容。制定好模塊順序后,還要根據本次改版的側重點,進行視覺比重的調整。

整合創新,體驗升級 | vivo游戲中心福利頁改版

1、頁面頭部

作為用戶進入福利tab的第一視覺重心,我們提供了2種功能形式:常態氛圍下傳遞游戲中心福利聚合的定位與心智;同時在特定時間節點承接平臺重磅福利活動的推廣。

2、我的游戲福利

我們基于用戶最近的游戲行為排序,將每款游戲的禮包數量和活動內容作為吸引點,用戶點擊直接定位到該游戲詳情頁的“福利子tab”,完成從「游戲福利聚合」到「單游戲福利查找與獲取」的連貫操作。

3、會員專屬禮券模塊

此模塊收納「VIP」和「大會員」兩種會員業務所提供的禮券,讓擁有相應身份的高價值用戶可以快速感知、獲取對應禮券,同時也能強化用戶對平臺禮券的認知。

4、玩游戲抽現金

它是游戲中心長期運營的平臺福彩活動,我們將其固化成具體的功能模塊,適當弱化之前的活動氛圍、精簡信息,從而達到提升整體運營感的目的。

5、積分兌好禮

作為頁面尾部的福利內容拓展,我們將用戶賺取積分的相關功能和禮品商城整合成一個模塊,不僅實現了“積分”入口和出口的閉環,也能促進用戶通過做各種平臺任務和游戲付費來獲得自己偏好的禮品福利,體驗流暢便捷。

4.?行為牽引與動線設計

在一個頁面收納上述這么多的福利,一屏空間是無法完全展示的,因此我們希望從「用戶行為牽引」的角度引導用戶在有限的空間內去發現更多福利。我們總結了3個方法:

1、提供提醒與快速直達的能力,激發用戶下探可能

針對沉在頁面底部的“積分”和“禮品”福利,當用戶有可領的積分或商城上架了新的禮品,我們通過snackbar的形式完成場景化觸達,用戶如果感興趣即可點擊直達對應的功能模塊完成下一步操作。

2、聚合同類內容,拓展橫向空間

針對不同的游戲福利,我們統一結構化信息和展示規則,讓用戶通過橫滑的形式在模塊內完成查閱操作。

3、提前透傳信息,引導用戶切tab曝光不同內容

在會員專屬禮券模塊我們有2個維度(VIP、大會員)的身份禮券,針對不同用戶默認展示其中一個tab,并且用氣泡的形式將另外tab的隱藏內容做提醒和曝光,引導用戶切tab查看詳細內容。

整合創新,體驗升級 | vivo游戲中心福利頁改版

最終通過以上四個步驟,在新版福利tab的框架結構和行為動線設計下,我們合理的引導了用戶對頁面整體的認知節奏,提升流量分配效率。

二、頁面調性設定&視覺呈現

為什么要做調性?

頁面調性是業務特征的外化表現,「福利」作為區別于游戲「分發」和「內容」的差異業務,我們希望在兼容游戲中心整體風格的前提下,通過差異化的調性設計,去做游戲福利「心智」的放大器,以更顯性的表達方式強化用戶的福利感知,這是調性設計的主觀因素。

整合創新,體驗升級 | vivo游戲中心福利頁改版

客觀因素,在開始設計前,我們分別對VIP、大會員、積分、周周樂幾類核心福利供給業務的頁面進行視覺風格摸底。不難發現,不同業務模塊有著明顯獨立的視覺風格體系。新版福利頁要將這幾類福利聚合在一個頁面上,我們需要通過調性來統一頁面的風格,并兼顧各個模塊的認知識別。

整合創新,體驗升級 | vivo游戲中心福利頁改版

福利頁差異化調性定義

設計師和與業務同學結合業務特性與vivo游戲中心的品牌理念,明確了「豐富超值」「年輕活力」的游戲中心專屬福利頁調性。

「豐富超值」是福利的業務本質,它表明了我們為用戶帶來的價值,多樣的福利類型、豐厚的福利內容。而「年輕活力」則是我們區別于其它競品平臺的差異,以更有趣、好玩的方式將福利與用戶進行互動連接。

整合創新,體驗升級 | vivo游戲中心福利頁改版

明確了心智調性,遵循“基礎平臺控件保持游戲中心OriginOS規范,福利特色模塊承接平臺專屬福利調性氛圍”的設計原則,設計師通過色彩、圖形、動效及頁面氛圍幾個維度,為用戶打造一個「豐富超值、年輕活力」的游戲福利聚合頁。

整合創新,體驗升級 | vivo游戲中心福利頁改版

1. 色彩

模塊色彩提煉

我們將不同業務模塊的色彩抽煉出來,通過不同的色彩來幫助用戶快速識別福利類型。

整合創新,體驗升級 | vivo游戲中心福利頁改版

頁面色彩比例

將主色與模塊色以7:3的色彩比例進行劃分,保證不同福利模塊認知延續的同時,最大程度去平衡整體頁面調性的和諧與統一。

整合創新,體驗升級 | vivo游戲中心福利頁改版

色彩細分

將不同模塊按照「氛圍」和「信息」兩個維度劃分為「重氛圍模塊」和「重信息模塊」。在「重氛圍的模塊」,應用高純度的色彩,進一步放大氛圍的渲染;而在「重信息模塊」則使用低純度色彩,保證信息的有效識別和閱讀的舒適性。

整合創新,體驗升級 | vivo游戲中心福利頁改版

信息識別校驗

信息的識別是用戶福利領取和使用的前置環節,為了確?!钢匦畔⒛K」氛圍下信息的可識別性,我們通過《WCAG 內容無障礙指南測試》對氛圍底色和文字顏色進行測試和校準,保證信息識別萬無一失。

整合創新,體驗升級 | vivo游戲中心福利頁改版

2. 圖形

Banner

頭部Banner是用戶進到福利頁的第一視覺焦點,我們要將頁面的業務定位和福利感知第一時間傳遞給用戶。圍繞「玩游戲領福利」的主題把游戲機與噴錢槍通過動效進行組合,向用戶傳遞「玩游戲,福利源源不斷」的心智。同時,細看會發現,我們把福利類型與游戲機進行結合,游戲機噴涌出的元素巧妙對應平臺福利類型,如會員禮券、游戲禮包、積分金幣、周周樂現金紅包以及游戲中心的品牌icon。

整合創新,體驗升級 | vivo游戲中心福利頁改版

整合創新,體驗升級 | vivo游戲中心福利頁改版

彩蛋

除了凸顯福利心智,我們還希望在頭部對游戲中心的品牌有一定的體現。改變以往直接貼牌logo的方式,這一次我們做了更軟性和有趣的傳達。在游戲機屏幕的畫面里我們隱藏了一個品牌的彩蛋,將小V和游戲中心品牌元素經過像素風格的轉譯處理,與超級馬里奧這款經典游戲進行聯動,調動用戶的記憶共鳴,同時促進品牌感知。

整合創新,體驗升級 | vivo游戲中心福利頁改版

標題—口語化標題傳達頁面定位

文案的表達是一種很容易被我們忽略的設計手段。一個人的說話方式或語氣,是其內在性格的外化表現,我們希望給用戶建立「年輕」的游戲福利心智,因此改用「今天領福利了嗎?」這樣口語話的標題來傳達頁面的定位,另外采用問句的形式在語意上與用戶形成交流互動,讓用戶潛意識形成每天來福利tab領福利的心智。

另一方面,我們把福利tab頁面底tab的 名稱由原先的「福利」改為「領福利」通過「領」這個動作加強對用戶的行為召喚。

整合創新,體驗升級 | vivo游戲中心福利頁改版

3. 動效

頁面不同場景的動效融入,提升視覺吸引與活力感知

例如「底tab新版本引導動效」,提升視覺吸引力和強化福利多的感知;積分領取的動效,既是用戶領取積分后的操作反饋,也能夠幫助用戶理解目前所獲積分的總額;VIP模塊增加的掃光動效,提升VIP福利的尊貴感知,以及前面介紹過的頂部banner的動效。這些活躍在頁面各個模塊的動效,一方面輔助功能引導,提升視覺吸引力,同時也無形中豐富了整體福利tab體驗的層次感。

整合創新,體驗升級 | vivo游戲中心福利頁改版

整合創新,體驗升級 | vivo游戲中心福利頁改版

4. 節日氛圍

節日是營銷活動的重要節點,增加節日氛圍功能,運營能夠根據平臺活動節點和熱點事件的需要,對福利tab進行個性化的氛圍配置,為用戶帶來??闯P碌囊曈X驚喜。

整合創新,體驗升級 | vivo游戲中心福利頁改版

裸眼3D視覺呈現

整合創新,體驗升級 | vivo游戲中心福利頁改版

本次在頭部氛圍上,我們嘗試通過物料分層結合陀螺儀技術,做了裸眼3D的體驗嘗試,我們把banner圖層按照前景、中景、后景進行拆分,讓「前景」與「后景」根據用戶手持手機的角度呈相反方向進行一定區間內的運動,而「中景」則作為前后景的視覺參照物,位置始終保持不變。然而就在這動與不動之間,圖像在我們的視網膜上產生了神奇的視覺反應,也就是我們常說的視覺裸眼3D。

整合創新,體驗升級 | vivo游戲中心福利頁改版

以上就是調性部分的內容,我們通過色彩渲染、圖形烘托、動效點綴、及氛圍驚喜為用戶打造了一個豐富超值、年輕活力的福利聚合頁。

整合創新,體驗升級 | vivo游戲中心福利頁改版

三、功能模塊的信息和行為設計

前面,從「整體宏觀」的角度介紹了福利tab的框架和調性,但想要更深層次的串聯用戶和福利,需要聚焦到每個模塊的使用維度。

接下來,我們會借助「會員專屬禮券」和「福利商城」兩個模塊來講述:如何通過「信息設計」和「行為設計」給用戶創造更好的福利使用體驗!

1. 會員專屬禮券

會員專屬禮券是為vivo游戲平臺會員發放的禮券福利,不同身份等級所享受的福利不同。

整合創新,體驗升級 | vivo游戲中心福利頁改版

1、溝通更清晰-禮券差異化展示

首先,我們將用戶從「是否能夠領取平臺福利」進行劃分:

對于無法享有平臺福利的用戶去告知最低解鎖等級及破冰引導,為其了解VIP和大會員的價值做好認知鋪墊;

整合創新,體驗升級 | vivo游戲中心福利頁改版

對于V4以上的用戶-遵循“等級越高、福利越多”的原則,外顯其享有的禮券資產,并支持模塊內直接領用。

整合創新,體驗升級 | vivo游戲中心福利頁改版

2、印象更深刻:提升禮券的獲取效率

VIP的禮券樣式繁多,但在福利聚合場景需要建立統一的禮券結構,提升用戶對禮券認知的一致性。

整合創新,體驗升級 | vivo游戲中心福利頁改版

我們將禮券內的信息按照優先級「行動按鈕和面額」>「使用場景、數量」從高到低排列,幫助用戶快速識別禮券價值及類型,讓用戶看一眼就有印象!

3、使用更便捷:讓功能主動觸達

最后,對應用戶行為制定按鈕的展示策略:「能領的先領」——「領完后引導去使用」——「用完了提示下次何時領、怎么領」,使禮券的核心任務更加直觀明確,讓功能主動觸達用戶!

整合創新,體驗升級 | vivo游戲中心福利頁改版

簡單回顧一下會員禮券模塊的設計過程:

  • 溝通更清晰-貼合會員不同階段,分人群進行權益差異化展示
  • 印象更深刻-從用戶視角做信息減負,突出禮券價值
  • 使用更便捷-精準識別禮券狀態,輔助決策

通過這三步,完成了禮券模塊價值感的塑造,用戶對禮券的感知也更加穩固!

整合創新,體驗升級 | vivo游戲中心福利頁改版

2. 福利商城

福利商城位于福利tab的尾部,是平臺福利供給的延伸,需滿足用戶的個性化福利偏好,因此高效的查找和信息識別是用戶在該場景的核心訴求,于是我們將商城的設計目標聚焦為:

  • 更好逛-提供良好的查找和瀏覽體驗
  • 更易識-精準識別商品信息,輔助決策

整合創新,體驗升級 | vivo游戲中心福利頁改版

商城如何更好逛?

用戶可在信息流中逛起來,快速篩選感興趣的禮品類型;通過「運營標簽」發現禮品的上新或折扣信息。尾部的「禮品心愿單」既幫助平臺收集了更多的用戶禮品偏好,也能作為用戶緩解情緒的出口。

整合創新,體驗升級 | vivo游戲中心福利頁改版

禮品如何更易識別?

用戶在禮品兌換時更關注:商品是什么?以及怎么獲得?我們通過視覺比重的合理分配和和信息層級對比,優先劃分出禮品主圖、價格、行動按鈕等高優先級信息的卡片結構;同時,將已兌件數、禮品標簽、歷史已兌等次要信息按照F型的視覺動線排布,輔助用戶決策。

整合創新,體驗升級 | vivo游戲中心福利頁改版

此外,就像大家日常購物中會注重商品的品牌、實用性、美觀度等等,線上禮品主圖對用戶吸引的點也是多方面的,那如何平衡不同禮品的統一性與差異性?

整合創新,體驗升級 | vivo游戲中心福利頁改版

以會員卡和購物卡為例:

「會員卡」選取高對比度的「黑金」作為為卡面背景,疊加高光來提升品質感和精致感。

「購物卡」提取「商超品牌色」作為卡面背景,簡潔的純色使卡面信息更易讀,并結合大眾熟知的IP形象,喚起用戶對商超購物卡的認知。

整合創新,體驗升級 | vivo游戲中心福利頁改版

「盲盒類禮品」外顯角色IP及場景圖,提升禮品吸引力。

整合創新,體驗升級 | vivo游戲中心福利頁改版

最終,我們完成了福利商城在「查找瀏覽」和「信息識別」上的蛻變升級;同時,不同類型的福利禮品既具有主圖的共性結構,也凸顯了各自禮品的特色賣點,完成了從混雜到統一、有序、且各有特色的變身。

整合創新,體驗升級 | vivo游戲中心福利頁改版

四、項目結果&驗證評估

項目上線后,我們怎么驗證新設計的方案是否達成了本次改版目標?怎么評判新版福利tab的體驗到底怎么樣呢?

早在設計之初,我們就建立了一套多維度、系統化的改版評估框架,并拉通了數據和用研同事幫我們做分析研究,同時也收集整理了對應的可優化問題放在后續版本中進行迭代,從而讓福利tab的用戶體驗越來越好。

整合創新,體驗升級 | vivo游戲中心福利頁改版

從整體上線數據來看,新版福利tab對游戲中心大盤的促活作用和頁面滲透率有所提升;福利tab用戶中大會員、VIP等高價值用戶占比增長明顯。

我們還針對改版前后兩個版本進行了體驗度量的前、后測分析,評估體驗概況方面的變化。從問卷結果來看,大盤用戶整體滿意度為86%,VIP8+用戶滿意度提升明顯;所有用戶NPS均高于35%。在體驗度量指標評價方面,“信息易理解”、“操作簡單”、“操作步驟短平快”這3個核心指標用戶評價較高,且各類用戶中分數均高于80%。

寫在最后

本次福利tab3.0改版,設計側基于游戲平臺福利聚合場景的特殊性和改版目標搭建了全新的頁面框架,建立“豐富超值、年輕活力”的視覺調性,并對每個功能模展進行信息和行為兩個維度的設計創新與表達,最后通過科學、系統的評估手段分析驗證我們的設計方案,最終取得了令人欣喜、滿意的結果。

希望本文中的設計思考和方法能給大家在工作中做類似場景的設計時,帶來不一樣的思路和啟發。

作者:亮熠 寶紅 欣怡

來源公眾號:VMIC UED(ID:gh_32761b1686b7),vivo互聯網UED——為美好而設計。

本文由人人都是產品經理合作媒體 @VMIC UED 授權發布,未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!