如何打造沉浸式游戲化首頁？來看大廠的實(shí)戰(zhàn)案例！

推薦閱讀

一、引言

隨著互聯(lián)網(wǎng)及游戲業(yè)務(wù)飛速發(fā)展，游戲推薦賽道百舸爭(zhēng)流、群雄逐鹿，但也不免卷入同質(zhì)化漩渦中。vivo 游戲中心（以下簡(jiǎn)稱中心）一直以“年輕、有趣”為宗旨幫助用戶發(fā)現(xiàn)更好玩的游戲，想要突破重圍，需要求變，走出一條游戲特色化道路，打造更專業(yè)更具游戲特色的游戲分發(fā)產(chǎn)品。而首頁是打造特色化最核心陣地。

二、背景

前些年，我們完成 1.0 首頁改版：通過大卡形態(tài)的每日一薦打造品質(zhì)，突出游戲吸引力；并調(diào)整頁面層級(jí)，通過金剛位和頁簽為不同訴求用戶分流；以及將列表更新為瀑布流卡片等，改版效果也不錯(cuò)。

首頁 1.0 改版

歷經(jīng)一年，我們也一直思考更多可能性，結(jié)合項(xiàng)目的戰(zhàn)略方向、數(shù)據(jù)反饋及用戶聲音，對(duì)首頁再次升級(jí)。

三、問題及優(yōu)化目標(biāo)

1. 每日一薦大卡片壓縮了其他內(nèi)容的曝光，分發(fā)效率受影響，同時(shí)隨著各平臺(tái)同質(zhì)化，用戶新鮮感減弱；因此我們要解決曝光問題、并將游戲特點(diǎn)生動(dòng)呈現(xiàn)，提升品質(zhì)和吸引力；
2. 腰部 tab 無法在第一時(shí)間輔助用戶查找游戲，點(diǎn)擊率不高，需要調(diào)整頁面結(jié)構(gòu)找到更優(yōu)的流量分流路徑；
3. 瀑布流相對(duì)列表在分發(fā)效率上處于弱勢(shì)，要給用戶更多決策信息，提升單游戲轉(zhuǎn)化；

提升游戲有效激活率、平臺(tái)有效活躍率，是改版的兩大核心指標(biāo)。做特色化，則被提到了更高的位置，貫穿整個(gè)改版的各個(gè)模塊中，也是本次設(shè)計(jì)側(cè)需要考慮的重心。

1.0 版本問題及優(yōu)化目標(biāo)、策略

從設(shè)計(jì)角度思考，打特色化就兩個(gè)點(diǎn)，即游戲化、吸引性。

1. 游戲化：通過設(shè)計(jì)的展現(xiàn)形式帶給用戶更極致的游戲感知；
2. 吸引性：通過設(shè)計(jì)形式等給用戶帶來較強(qiáng)的氛圍感、品質(zhì)感，以及經(jīng)過精細(xì)運(yùn)營(yíng)的編輯感。

兩者也是相輔相成，互為從動(dòng)的關(guān)系，是中心打差異化的組合拳。

我們結(jié)合最新的數(shù)據(jù)及用戶反饋，重新對(duì)頁面信息功能進(jìn)行了梳理整合：

結(jié)構(gòu)上，將腰部頁簽移至頭部搜索框下方，更好滿足用戶找游戲的訴求；每日一薦同整個(gè)頭部背景做成沉浸式，將游戲氛圍感知展現(xiàn)到極致，同時(shí)解決了頁簽提至頭部后的冗高問題，下方瀑布流也有了更多曝光；瀑布流卡片容器重構(gòu)，靈活適配更豐富的決策信息，并通過不同視覺層次凸顯游戲特色，提升吸引性。

根據(jù)以上思路，推導(dǎo)打磨得到了最終效果。

首頁(圖文效果僅供參考)

首頁新版瀑布流

Part1：容器

作為首頁展示精品游戲的資源位（每日一薦），我們希望承載的容器能夠最大化展現(xiàn)游戲本身的吸引力。

相較于舊版，新版的頭部更效率、更沉浸、更兼容。一方面，頭部容器壓縮了高度，露出首個(gè)瀑布流卡片的安裝按鈕，且沒有折損整個(gè)模塊視覺沖擊力；另一方面，內(nèi)容展示主體區(qū)域的比例對(duì)常規(guī)的物料素材有更好的兼容性，通過我們的設(shè)計(jì)處理，無需 cp 特殊定制就可在頭部使用視頻物料。

那么設(shè)計(jì)怎么做呢？先看每日一薦模塊的信息：

除頭部的功能區(qū)外，還有日期心智、游戲信息和安裝按鈕等信息類型復(fù)雜且密集。因此，需要讓信息有序。

我們通過信息歸類、色彩降噪、層級(jí)簡(jiǎn)化的手法，突出游戲素材特色，強(qiáng)化每日一薦模塊在首頁的品質(zhì)。

首先是信息歸類，通過排布方案的嘗試，我們將游戲信息統(tǒng)一整合在模塊下方，一方面更符合視覺動(dòng)線，一方面將素材主體在視覺中心集中突出。

另外，沉浸式頁面上的頂部信息由于物料的不確定性，會(huì)有識(shí)別性問題。我們對(duì)頭部功能區(qū)和頁簽進(jìn)行色彩降噪，將彩色的品牌 icon、特殊 tab 和選中態(tài)統(tǒng)一為白色，減少色彩干擾，并通過透明度的調(diào)整統(tǒng)一頭部功能區(qū)的視覺層級(jí)。

此外，我們發(fā)現(xiàn)多余的卡片層級(jí)雖然能對(duì)文字信息或交互手勢(shì)進(jìn)行一些強(qiáng)化，但在小小的模塊內(nèi)卻分散了用戶注意力。類似于前兩種方案的毛玻璃方案與卡片分割方案，有種形式大于內(nèi)容的感受。

因此，我們做減法，去除模塊內(nèi)卡片化的邊界，將視線集中到物料本身，簡(jiǎn)單更純粹。

整體頁面關(guān)系，我們做了多方案的探索，包括常見的卡片疊層和平切，以及改變圓角包容方向的反套卡等。

我們?cè)诜刺卓ǖ幕A(chǔ)上進(jìn)行升級(jí)，以一抹淺淺的弧度去切割每日一薦與下方頁面空間，就像是用戶進(jìn)入首頁后，向 ta 展示的一抹微笑，更情感化，更有溫度。對(duì)應(yīng)的，金剛位也貼合每日一薦的弧度做了相應(yīng)的形狀調(diào)整，并進(jìn)行了 3d 化的 icon 設(shè)計(jì)，更游戲化的同時(shí)提升金剛位點(diǎn)擊感。

我們希望用戶在查看過往的每日一薦時(shí)跳轉(zhuǎn)合集二級(jí)頁，因此在每日一薦的合集入口做了映射現(xiàn)實(shí)的翻頁新手引導(dǎo)和常駐微動(dòng)效，引導(dǎo)用戶點(diǎn)擊。

Part2：內(nèi)容

圖文僅效果示意

① 靜態(tài)內(nèi)容怎么做？

在新版容器下，畫面內(nèi)容能展示更多細(xì)節(jié)、呈現(xiàn)更宏大的場(chǎng)景，給予用戶更沉浸的視覺體驗(yàn)，不管是游戲推薦、游戲活動(dòng)、還是游戲?qū)ｎ}與合集，都能很好呈現(xiàn)。

圖文僅效果示意

② 大屏如何適配？

若直接放大普通手機(jī)素材來適配大屏手機(jī)（比如折疊屏或者 pad），會(huì)導(dǎo)致畫面內(nèi)容被裁剪、畫面模糊，品質(zhì)變低，我們讓 CP 提供原畫幅更大的素材，以適配折疊屏，裁剪后保留核心元素適配小屏手機(jī)上，讓適配更簡(jiǎn)單，品質(zhì)更高。

圖文僅效果示意

③ 動(dòng)態(tài)內(nèi)容怎么做？

優(yōu)質(zhì)的游戲廠商都會(huì)制作高品質(zhì)的宣傳片，這是因?yàn)橛耙晞?dòng)畫對(duì)比其他傳媒手段來說最吸睛，信息傳遞效果最好。每日一薦，作為游戲中心最重要的資源位，需要將游戲品質(zhì)呈現(xiàn)好，給予用戶最好的視覺體驗(yàn)，第一時(shí)間吸引用戶。

競(jìng)品在展示游戲宣傳片的時(shí)候，都比較保守，原因主要有三：

1）頭部是搜索區(qū)，視頻會(huì)影響搜索框功能區(qū)，搜索框又影響視頻內(nèi)容；

2）效率低，特殊容器需要定制特殊尺寸的視頻 成本太高，而 16:9 的通用尺寸視頻直接用效果不好；

3）適配難，有折疊屏和 pad，特別是 pad 橫屏，視頻按 16:9 通用尺寸強(qiáng)行放大適配，下方內(nèi)容便完全不可見了，縮小呈現(xiàn)又浪費(fèi)了巨大的屏幕空間，兩側(cè)留白效果也不好。

那么我們是如何解決的？先上整體效果

視頻效果

一方面，我們把視頻真正沉浸到各種大小的屏幕上，效果非常棒，同時(shí)也保證了下方內(nèi)容的曝光，且曝光內(nèi)容比老版本首頁更多，效率更高。

設(shè)計(jì)思路

1）關(guān)于沉浸：宏觀的沉浸體驗(yàn)概念很大，通過場(chǎng)景、聲音、觸感等讓用戶能全身心專注于當(dāng)下內(nèi)容，類似于影院巨幕、VR 等。

我們一般在界面下的狹義沉浸感，是讓用戶聚焦于某一內(nèi)容模塊，減少頁面其他信息的干擾，被吸引，專注對(duì)此，那對(duì)于每日一薦模塊，我們要很好得把視頻觀看體驗(yàn)?zāi)M出巨幕般的視覺效果，同時(shí)通過視覺虛位效應(yīng)融合好其他工具模塊、保證可見易用，但又不突兀：

1. 用戶看視頻的時(shí)候，能專注于視頻內(nèi)容，不會(huì)被工具欄的突兀所影響，
2. 用戶看完視頻焦點(diǎn)放開以后，又能快速識(shí)別到搜索與工具欄完成操作。

基于以上思路，我們和技術(shù)同學(xué)預(yù)研了兩套方案去做沉浸虛位畫面拓展，來完成 y 軸空間的拓展：

1. 一是「實(shí)時(shí)吸色技術(shù)」：基于靜態(tài)吸色技術(shù)基礎(chǔ)上，由靜轉(zhuǎn)動(dòng)實(shí)現(xiàn)動(dòng)態(tài)吸色。
2. 二是「頭部動(dòng)態(tài)虛化」：基于動(dòng)態(tài)化毛玻璃效果實(shí)現(xiàn)。

實(shí)時(shí)吸色存在一定的延遲問題，而毛玻璃則無延遲，且頂部畫面有少量?jī)?nèi)容露出，整體效果更通透。

為了保證最終效果，我們做了大量 demo 嘗試后，敲定頭部動(dòng)態(tài)虛化方案，至此，視頻 X 軸 y 軸便能夠自由拓展。

視頻通用尺寸是 16:9，cp 只需要提供通用素材，在服務(wù)端對(duì)通用視頻處理后，即可適配到各種異形的容器里面去。

另外關(guān)于大小屏幕適配也有一些細(xì)節(jié)上的優(yōu)化：

保證后臺(tái)只需處理一個(gè)視頻，即可同時(shí)適配到普通機(jī)型與折疊屏上去。大體如下：

1. 原始 16:9 的視頻 A 頂部通過虛化拓展了 y 軸高度，得到處理后的視頻 B，
2. 將視頻 B 直接適配折疊屏上，將視頻 B 等比縮小后，可直接適配普通手機(jī)，實(shí)現(xiàn)素材通用。

pad 同理，無非是在 x 軸上做拓展而已。

圖文僅效果示意

Part4：瀑布流

內(nèi)容層面，產(chǎn)品通過在瀑布流卡片中增加信息量來提升游戲的有效激活率。對(duì)應(yīng)到表現(xiàn)層面，主要從兩點(diǎn)著手：

1. 一是以卡片為單位，優(yōu)化信息之間的組織關(guān)系，使之呈現(xiàn)邏輯性；
2. 二是對(duì)卡片內(nèi)的信息內(nèi)容進(jìn)行歸類，既保證信息組合的簡(jiǎn)潔性，又能展現(xiàn)信息類型的差異性。

最終目的是使頁面兼顧邏輯與美觀，提升用戶的瀏覽決策體驗(yàn)。

① 卡片結(jié)構(gòu)

我們利用圖片優(yōu)勢(shì)效應(yīng) , 沿用 1.0 卡片中上圖下文的基礎(chǔ)布局 。并結(jié)合古騰堡原理，將安裝按鈕作為信息的終端，這可以保證在不干擾主體內(nèi)容的同時(shí)存在固化的操作區(qū)域，使用戶能輕松地進(jìn)行下載操作。

至此，我們確定了基礎(chǔ)的卡片框架。

注 1: 圖片優(yōu)勢(shì)效應(yīng)是指圖片和圖像比詞語更容易被注意與記住的現(xiàn)象。

注 2:古騰堡原理是指用戶的瀏覽習(xí)慣于從左上角開始，到右下角結(jié)束，設(shè)計(jì)可以

利用瀏覽習(xí)慣通過元素間的排列位置引導(dǎo)用戶的瀏覽順序。接著，以對(duì)比、對(duì)齊、親密、重復(fù)為設(shè)計(jì)手段，調(diào)整其余信息之間的組織方式，在過程中尋找一種可以平衡視覺與信息完整度的布局方案。我們希望卡片最終的結(jié)構(gòu)能滿足以下幾點(diǎn)要求：

1. 視覺體驗(yàn)無負(fù)擔(dān)、信息邏輯清晰；
2. 滿足不同類型的信息配置要求，可以最大程度展現(xiàn)信息內(nèi)容；
3. 具有一定的配置靈活度，使卡片具有延展能力；

基于這些要求，我們確定了此次改版的基礎(chǔ)卡片樣式。

② 信息設(shè)計(jì)

對(duì)比 1.0 卡片，2.0 基礎(chǔ)卡片看上去只是增加了一條內(nèi)容，但這個(gè)位置會(huì)展示 7 種類型的信息，并且樣式之間具有較大的差異性。當(dāng)進(jìn)一步對(duì) 2.0 卡片擴(kuò)展時(shí)，信息的數(shù)量和類型就更多了。

這些信息基于原來的觸點(diǎn)，樣式上會(huì)設(shè)計(jì)得比較復(fù)雜和突出，當(dāng)它們凝聚在一張張卡片中并組合成一個(gè)新的頁面時(shí)，會(huì)導(dǎo)致畫面里的噪音過大，降低用戶的信息獲取效率。

此處卡片中的信息樣式為線上樣式組合后

專注來看卡片的信息字段：icon、游戲名稱、玩法標(biāo)簽等信息幫助用戶了解游戲基礎(chǔ)情況。而其余信息用來輔助用戶決策、吸引用戶進(jìn)行下載行為，我們稱之為魅力信息。因此魅力信息的重要性、吸引度在視覺上需要高于基礎(chǔ)信息。

基于這個(gè)結(jié)論，我們進(jìn)一步明確不同信息之間的層級(jí)關(guān)系，經(jīng)過和產(chǎn)品的討論定義，全部信息分為四個(gè)層級(jí)：

1. 第一層為貫穿全局的游戲重點(diǎn)節(jié)點(diǎn)信息（擴(kuò)展項(xiàng)）；
2. 第二層級(jí)為具有平臺(tái)屬性的、可以穩(wěn)定用戶心智的重要標(biāo)簽；
3. 第三層級(jí)為讓用戶探索更多場(chǎng)景的可互動(dòng)行為信息（擴(kuò)展項(xiàng)）；
4. 第四層級(jí)為其他幫助用戶決策的相關(guān)信息。

我們從視覺語言出發(fā)，由面及線、由彩色到黑白去映射層級(jí)關(guān)系，做到“不同的信息但是統(tǒng)一的視覺語意。”

經(jīng)過設(shè)計(jì)處理后，不同信息層級(jí)的黑白灰表現(xiàn)程度具有明顯的差異，但同一信息層級(jí)的視覺感知無明顯差異。同時(shí)，我們?cè)诩?xì)節(jié)上統(tǒng)一了圓角、圖文結(jié)構(gòu)等構(gòu)成方式，保持頁面內(nèi)視覺元素的一致性感知。而針對(duì)平臺(tái)不同類型的特色信息，我們分別對(duì)應(yīng)增加了識(shí)別元素，保持同級(jí)信息間的差異性。

對(duì)比未調(diào)整的卡片，可以明顯感到經(jīng)過優(yōu)化的卡片提升了信息的閱讀性與頁面的瀏覽體驗(yàn)。

以上就是我們?cè)谄俨剂?2.0 中的設(shè)計(jì)思路。

最后，我們會(huì)繼續(xù)在特色化道路上做更多的深耕和探索，期待再次和大家分享交流。

歡迎關(guān)注作者微信公眾號(hào)：「VMIC UED」