2026-6-3 麗潔 移動(dòng)端UI設(shè)計(jì)文章及欣賞
vivo小游戲的改版揭示了輕量化產(chǎn)品的設(shè)計(jì)本質(zhì)——從點(diǎn)擊量到用戶時(shí)長的指標(biāo)躍遷。本文深度拆解其首頁分發(fā)邏輯重構(gòu)與去低幼化視覺升級(jí),揭秘如何通過動(dòng)態(tài)專題矩陣、情感化設(shè)計(jì)和品牌色系統(tǒng),同時(shí)實(shí)現(xiàn)商業(yè)價(jià)值提升與品牌心智進(jìn)化。
小游戲業(yè)務(wù)的核心特點(diǎn)是“輕量化啟動(dòng),依賴時(shí)長變現(xiàn)”。
在產(chǎn)品形態(tài)方面,“點(diǎn)擊即玩”是重要特征,其試錯(cuò)成本極低,用戶可快速、反復(fù)嘗試多款游戲,使用時(shí)長比點(diǎn)擊更能代表深入程度。在營收方面,對(duì)于依賴廣告變現(xiàn)的游戲,時(shí)長直接影響廣告曝光次數(shù);對(duì)于內(nèi)購游戲,時(shí)長則意味著付費(fèi)窗口期的延長。“停留”比“點(diǎn)擊”更能創(chuàng)造商業(yè)價(jià)值。
依據(jù)以上兩個(gè)原因,小游戲業(yè)務(wù)成功的關(guān)鍵指標(biāo)并非傳統(tǒng)的分發(fā)效率(點(diǎn)擊量),而是用戶游戲總時(shí)長。這是小游戲設(shè)計(jì)改版的第一個(gè)核心目標(biāo)。

<圖:業(yè)務(wù)目標(biāo)>
除此之外,在存量競爭時(shí)代,設(shè)計(jì)不僅僅是“做得好用”,更需要“做得準(zhǔn)確”——準(zhǔn)確理解業(yè)務(wù),準(zhǔn)確洞察用戶,準(zhǔn)確傳遞品牌心智。
“小游戲”,在很多用戶的印象中,往往是“休閑、輕松、可愛,甚至樣式上帶點(diǎn)低幼感”的存在,這造就了其固有的用戶心智。
實(shí)際上,【vivo小游戲】希望服務(wù)的用戶是豐富、全面的,所以矛盾便浮出水面——亟待扭轉(zhuǎn)“低幼感知”,這就是小游戲設(shè)計(jì)改版的第二個(gè)主要目標(biāo)。
在以上兩個(gè)背景之下,本次改版目標(biāo)如下:
目標(biāo)一(來自業(yè)務(wù)目標(biāo)):提升游戲時(shí)長,讓分發(fā)更精準(zhǔn),幫助用戶“玩進(jìn)去,愿意留下”。
目標(biāo)二(來自用戶心智):去除低幼感知,重塑“年輕、放松、品質(zhì)”的產(chǎn)品形象。

<圖:本次設(shè)計(jì)改版的兩個(gè)目標(biāo)>
這不僅僅是一次界面優(yōu)化,更是一次以設(shè)計(jì)驅(qū)動(dòng)產(chǎn)品品牌升級(jí)的系統(tǒng)性設(shè)計(jì)。下文將從三個(gè)維度,分享我們的設(shè)計(jì)推導(dǎo)與落地過程。
重構(gòu)首頁分發(fā)邏輯,使其服務(wù)于“提升時(shí)長”的目標(biāo)。對(duì)首頁三大核心模塊——“用戶愛玩”、“平臺(tái)推薦”、“隨機(jī)游戲”——進(jìn)行了數(shù)據(jù)洞察和體驗(yàn)重塑。

<圖:首頁改版的三個(gè)重要模塊>
數(shù)據(jù)顯示,“最近愛玩”模塊貢獻(xiàn)了極高的總游戲時(shí)長。這證明,用戶主動(dòng)沉淀的偏好列表,是游戲啟動(dòng)的最強(qiáng)驅(qū)動(dòng)力。
新的洞察隨之而來:絕大多數(shù)的用戶,其“最近愛玩”的游戲只有1-2款。舊版首頁將4款游戲“平鋪”外顯,反而稀釋了用戶的注意力,導(dǎo)致分發(fā)的目標(biāo)不清晰。
針對(duì)這一現(xiàn)象,我們的A/B Test結(jié)論是:滿足需求,比增加曝光更重要。新版設(shè)計(jì)強(qiáng)化了“用戶愛玩”的模塊心智,使其成為用戶返回時(shí)的“第一眼”核心,讓用戶能最快回到那個(gè)“TA真正想玩的游戲”,而不是在多個(gè)似是而非的選擇中猶豫,從而直接鎖定并延長核心游戲時(shí)長。

<圖:左圖為老方案,右圖為新方案>
“平臺(tái)推薦”是發(fā)現(xiàn)新游戲的主陣地。我們放棄了“一招鮮”的模式,轉(zhuǎn)而構(gòu)建了一套專題矩陣,針對(duì)不同游戲和用戶意圖,設(shè)計(jì)差異化的推薦理由:小編推薦專題:從“系統(tǒng)”到“有溫度的個(gè)體”建立了“安利官”角色,把真實(shí)的小編推向用戶。用真人頭像、親切口吻和官方認(rèn)證,打造“有溫度、有信任感”的真人推薦。情感化與專業(yè)性的結(jié)合,極大地拉近了與用戶的距離。

<圖:小編推薦>

<圖:小編推薦>
場景化專題:從“游戲是什么”到“我此刻需要什么”將游戲分發(fā)融入用戶生活場景。例如,“早上好:提神醒腦”、“下午好:堅(jiān)強(qiáng)摸魚人”、“晚上好:放松一下”。通過時(shí)間、情緒、狀態(tài)的匹配,讓游戲推薦更具說服力和即時(shí)價(jià)值。

<圖:場景化推薦>
高品質(zhì)專題:從“文字說”到“視覺證明”針對(duì)精品或內(nèi)購游戲,我們用更大尺寸的卡片、更具沉浸感的圖文或視頻預(yù)覽,來直觀呈現(xiàn)游戲的“品質(zhì)感”,將“高質(zhì)量”這一抽象概念具體化。

<圖:左圖為老方案,右圖為新方案>
玩法專題:用IP強(qiáng)化“類別識(shí)別”在“男生愛玩”、“掛機(jī)輕松玩”等玩法標(biāo)簽下,將專題內(nèi)最具代表性的頭部游戲IP(如“太空行動(dòng)”、“一波超人”)進(jìn)行視覺放大,強(qiáng)化用戶對(duì)專題游戲類型的“一眼識(shí)別”。

<圖:玩法專題>
魅力信息前置:從“默默無名”到“熱度可見”將“XX萬人在玩”這類強(qiáng)吸引力信息,從傳統(tǒng)的文字區(qū)剝離,設(shè)計(jì)為高識(shí)別度的半透明標(biāo)簽,與游戲Icon強(qiáng)綁定。通過調(diào)整色彩、字重,使其在不遮擋Icon主視覺的同時(shí),成為輔助用戶決策的“魅力因子”,有效提升了點(diǎn)擊意愿。
我們注意到,有相當(dāng)一部分用戶是在首頁“逛了好幾屏”后仍未找到目標(biāo),此時(shí)我們猜想“隨機(jī)一下”可能是他們留下的最后機(jī)會(huì)。
強(qiáng)化了其“提供一次驚喜、一種可能性”的心智,為探索型用戶保留了一個(gè)“輕量級(jí)出口”,這背后是對(duì)用戶分層和場景的細(xì)致體察。

<圖:隨機(jī)玩>
設(shè)計(jì)思考:分發(fā)設(shè)計(jì)的精髓在于“對(duì)癥下藥”。我們不再追求統(tǒng)一的曝光策略,而是將首頁視為一個(gè)動(dòng)態(tài)的、有層次的決策場。“用戶愛玩”是確定性滿足,“平臺(tái)推薦”是引導(dǎo)性探索,“隨機(jī)游戲”是可能性兜底。
設(shè)計(jì)的價(jià)值在于,為每一種用戶路徑,都鋪就了最合適的體驗(yàn)軌道,最終合力指向“停留與探索”的核心目標(biāo)。
“去低幼化”不僅是風(fēng)格的轉(zhuǎn)換,更是品牌心智的重塑。為此,我們建立了一套完整的研究與執(zhí)行方法。
“低幼”是一個(gè)感性評(píng)價(jià)。為了找到解法,我們首先要將其“可視化”。
對(duì)比了市面上的兒童教育產(chǎn)品,并結(jié)合對(duì)自身舊版設(shè)計(jì)的審視,提煉出三個(gè)維度的“低幼”視覺特征:
這三點(diǎn),共同構(gòu)成了我們需要打破的舊有特征。

<圖:關(guān)于低幼感知來源的研究>
有了要規(guī)避的視覺特征,同時(shí),要確立新方向。結(jié)合產(chǎn)品特性和目標(biāo)用戶,我們定義了vivo秒玩小游戲應(yīng)有的產(chǎn)品調(diào)性:

<圖:從情緒板到色彩定義>
色彩體系重構(gòu)
定義品牌色:我們摒棄了“大雜燴”式的色彩,定義了“活力黃”與“輕松綠”作為品牌主色,分別承載“生命力、有趣”與“放松、自然”的情緒。并嚴(yán)格設(shè)定了60%背景色、30%白色卡片、10%品牌色的色彩使用比例,建立清晰的視覺層次。

<圖:品牌色>
分層處理原則:

<圖:分層處理原則>
注入“情緒價(jià)值”:

<圖:“海島”微動(dòng)效>

<圖:隨機(jī)玩>
傳承品牌基因:我們沒有割裂歷史,而是巧妙延續(xù)了品牌核心符號(hào)“閃電”。
新版設(shè)計(jì)中,“閃電”圖形以“斜切線”的形式,融入魅力信息標(biāo)簽、專題卡片頭圖等細(xì)節(jié),在去低幼的同時(shí),保留了用戶對(duì)品牌的核心認(rèn)知,完成了視覺語言的平滑演進(jìn)。

<圖:老版本頁面示例>

<圖:新版本頁面示例>
設(shè)計(jì)思考:去低幼化不等于“高冷化”或“同質(zhì)化”。我們的解法是建立系統(tǒng)性的設(shè)計(jì)語言。它不是對(duì)某個(gè)元素的修修補(bǔ)補(bǔ),而是從底層色彩邏輯、視覺層次、情感傳達(dá)、品牌符號(hào)多個(gè)維度進(jìn)行的一體化重構(gòu),最終在視覺上完成了從“兒童樂園”到“年輕人休閑客廳”的轉(zhuǎn)變。
回顧整個(gè)項(xiàng)目,這不僅僅是一次界面優(yōu)化。我們將其視作一個(gè)通過設(shè)計(jì)系統(tǒng)性地解決商業(yè)和品牌問題的范本。復(fù)盤整個(gè)過程,我們有幾點(diǎn)深刻的心得,這幾條心得從我們剛剛?cè)胄械侥壳岸歼m用,感受愈發(fā)深刻:
1、理解產(chǎn)品是在做什么:設(shè)計(jì)必須服務(wù)于商業(yè)本質(zhì)。深刻理解“小游戲靠時(shí)長盈利”這一核心,才讓我們敢于將“提升分發(fā)效率”的慣性思維,轉(zhuǎn)向“提升用戶停留與沉浸”的差異路徑,這是所有設(shè)計(jì)決策的“北極星”。
2、抓住重點(diǎn):資源永遠(yuǎn)是有限的。通過數(shù)據(jù)分析,我們精準(zhǔn)地識(shí)別出“最近愛玩”模塊是提升大盤時(shí)長的關(guān)鍵。集中優(yōu)勢資源,在關(guān)鍵模塊上做深做透,才能帶來數(shù)據(jù)層面的最大回報(bào)。
3、以用戶需求為導(dǎo)向:用戶的核心需求是“找到我想玩/可能愛玩的游戲”,而不是“看到更多游戲”。設(shè)計(jì)要做的,是提供“理由”和“路徑”,幫助用戶高效決策,而不是制造“信息過載”。對(duì)“最近愛玩”模塊的聚焦,正是這一思維的體現(xiàn)。
4、任何時(shí)候都不要忘記有趣。在追求“去低幼化”的過程中,我們并沒有走向另一個(gè)極端——“嚴(yán)肅與無趣”。相反,我們將“放松”、“驚喜”、“有趣”這些屬于游戲產(chǎn)品的核心情感價(jià)值,通過動(dòng)態(tài)效果、場景化文案、情感化設(shè)計(jì)重新注入體驗(yàn)。
我們交付的不僅是一個(gè)“更好看、更好用”的首頁,更是一個(gè)“更清晰、更高級(jí)、更具吸引力”的vivo小游戲品牌。
注:插圖中全部實(shí)例均為設(shè)計(jì)稿,非線上截圖。游戲icon、名稱、在玩人數(shù)等基礎(chǔ)信息非線上信息。
轉(zhuǎn)載:人人都是產(chǎn)品經(jīng)理
蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.aknz.cn 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.aknz.cn