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

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

作為UX和UI設(shè)計師，我們該怎么利用各自專業(yè)優(yōu)勢，通過科學與美學的系統(tǒng)化設(shè)計方法，為用戶打造一個更具吸引力，體驗更好的游戲平臺福利聚合頁呢？

1. 項目背景

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

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

2. 設(shè)計目標

我們從游戲平臺福利聚合的頁面定位和用戶需求場景出發(fā)，制定了本次改版的設(shè)計目標：

• 感知維度－清晰傳遞游戲?qū)傩韵碌母＠酆闲闹牵瑫r提升福利tab的整體吸引力
• 使用維度－提高用戶對各福利信息的獲取效率，促進用戶行為轉(zhuǎn)化

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

一、框架布局&福利內(nèi)容組織

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

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

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

2. 生產(chǎn)福利功能模塊

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

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

按照這個思路，我們構(gòu)建出了整個福利tab的6大福利模塊——“領(lǐng)禮券”、“賺積分”、“抽現(xiàn)金”、“推活動”、“查看游戲福利”和“逛商城兌禮品”。

3. 推導頁面框架

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

1、頁面頭部

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

2、我的游戲福利

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

3、會員專屬禮券模塊

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

4、玩游戲抽現(xiàn)金

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

5、積分兌好禮

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

4.?行為牽引與動線設(shè)計

在一個頁面收納上述這么多的福利，一屏空間是無法完全展示的，因此我們希望從「用戶行為牽引」的角度引導用戶在有限的空間內(nèi)去發(fā)現(xiàn)更多福利。我們總結(jié)了3個方法：

1、提供提醒與快速直達的能力，激發(fā)用戶下探可能

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

2、聚合同類內(nèi)容，拓展橫向空間

針對不同的游戲福利，我們統(tǒng)一結(jié)構(gòu)化信息和展示規(guī)則，讓用戶通過橫滑的形式在模塊內(nèi)完成查閱操作。

3、提前透傳信息，引導用戶切tab曝光不同內(nèi)容

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

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

二、頁面調(diào)性設(shè)定&視覺呈現(xiàn)

為什么要做調(diào)性？

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

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

福利頁差異化調(diào)性定義

設(shè)計師和與業(yè)務(wù)同學結(jié)合業(yè)務(wù)特性與vivo游戲中心的品牌理念，明確了「豐富超值」「年輕活力」的游戲中心專屬福利頁調(diào)性。

「豐富超值」是福利的業(yè)務(wù)本質(zhì)，它表明了我們?yōu)橛脩魩淼膬r值，多樣的福利類型、豐厚的福利內(nèi)容。而「年輕活力」則是我們區(qū)別于其它競品平臺的差異，以更有趣、好玩的方式將福利與用戶進行互動連接。

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

1. 色彩

模塊色彩提煉

我們將不同業(yè)務(wù)模塊的色彩抽煉出來，通過不同的色彩來幫助用戶快速識別福利類型。

頁面色彩比例

將主色與模塊色以7:3的色彩比例進行劃分，保證不同福利模塊認知延續(xù)的同時，最大程度去平衡整體頁面調(diào)性的和諧與統(tǒng)一。

色彩細分

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

信息識別校驗

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

2. 圖形

Banner

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

彩蛋

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

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

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

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

3. 動效

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

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

4. 節(jié)日氛圍

節(jié)日是營銷活動的重要節(jié)點，增加節(jié)日氛圍功能，運營能夠根據(jù)平臺活動節(jié)點和熱點事件的需要，對福利tab進行個性化的氛圍配置，為用戶帶來常看常新的視覺驚喜。

裸眼3D視覺呈現(xiàn)

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

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

三、功能模塊的信息和行為設(shè)計

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

接下來，我們會借助「會員專屬禮券」和「福利商城」兩個模塊來講述：如何通過「信息設(shè)計」和「行為設(shè)計」給用戶創(chuàng)造更好的福利使用體驗！

1. 會員專屬禮券

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

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

首先，我們將用戶從「是否能夠領(lǐng)取平臺福利」進行劃分：

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

對于V4以上的用戶－遵循“等級越高、福利越多”的原則，外顯其享有的禮券資產(chǎn)，并支持模塊內(nèi)直接領(lǐng)用。

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

VIP的禮券樣式繁多，但在福利聚合場景需要建立統(tǒng)一的禮券結(jié)構(gòu)，提升用戶對禮券認知的一致性。

我們將禮券內(nèi)的信息按照優(yōu)先級「行動按鈕和面額」＞「使用場景、數(shù)量」從高到低排列，幫助用戶快速識別禮券價值及類型，讓用戶看一眼就有印象！

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

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

簡單回顧一下會員禮券模塊的設(shè)計過程：

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

通過這三步，完成了禮券模塊價值感的塑造，用戶對禮券的感知也更加穩(wěn)固！

2. 福利商城

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

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

商城如何更好逛？

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

禮品如何更易識別？

用戶在禮品兌換時更關(guān)注：商品是什么？以及怎么獲得？我們通過視覺比重的合理分配和和信息層級對比，優(yōu)先劃分出禮品主圖、價格、行動按鈕等高優(yōu)先級信息的卡片結(jié)構(gòu)；同時，將已兌件數(shù)、禮品標簽、歷史已兌等次要信息按照F型的視覺動線排布，輔助用戶決策。

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

以會員卡和購物卡為例：

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

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

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

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

四、項目結(jié)果&驗證評估

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

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

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

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

寫在最后

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

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