▲點(diǎn)擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們

歡迎來到專業(yè)設(shè)計師學(xué)習(xí)交流社區(qū)

三分設(shè)｜連接知識，幫助全球 1 億設(shè)計師成長

轉(zhuǎn)自：百度MEUX

編輯：益達(dá)

共 3119 字 26 圖  預(yù)計閱讀 8 分鐘

一局 APP 是一款年輕化的游戲社交平臺。隨著產(chǎn)品的發(fā)展和用戶數(shù)量的增長，游戲數(shù)量也隨之?dāng)U張，舊版首頁的諸多問題就會逐漸暴露出來，為了給用戶帶來更好的瀏覽和使用體驗(yàn)，UE 團(tuán)隊推動了此次首頁的改版設(shè)計。

 

通過訪談和內(nèi)部討論，我們發(fā)現(xiàn)，舊版首頁的問題集中在以下三點(diǎn)：視覺重點(diǎn)多而雜，游戲入口難識別，社交信息展示較弱。

所以本次升級的主要設(shè)計手段為：簡化頁面視覺復(fù)雜度，提高游戲入口識別性，強(qiáng)化社交屬性，以提升游戲和房間入口點(diǎn)擊率和游戲滲透率。

 

01

簡化頁面視覺復(fù)雜度

1.提高游戲入口展示面積

游戲入口是一局首頁最為重要的模塊。改版前低頻操作區(qū)占頁面比例過大，不利于游戲入口展示，我們通過壓縮頭部區(qū)域，將游戲入口面積增加 20%，為游戲展示的動態(tài)化和多樣化提供更多空間，從而提高游戲的點(diǎn)擊欲望，促進(jìn)游戲轉(zhuǎn)化。

 

2.減少顏色種類，用色更克制

改版前首頁游戲入口為了展示更多一局獨(dú)特的設(shè)計語言，用色和風(fēng)格相對復(fù)雜，大面積多種顏色的應(yīng)用，再加上復(fù)雜的IP形象，很容易產(chǎn)生視覺焦慮，讓人抓不到重點(diǎn)。所以在在顏色方面，也從以前的5種顏色對應(yīng)游戲類型，優(yōu)化為3種顏色隨機(jī)選用，房間入口改為白色卡片，更突出游戲區(qū)內(nèi)容。

 

 

02

提高游戲入口識別性

1.增加入口類型，精煉視覺語言

改版前游戲入口，由 背景+游戲名+IP 構(gòu)成，用戶只能依靠名稱識別游戲內(nèi)容，很難對游戲內(nèi)容產(chǎn)生想象和認(rèn)知，背景顏色的飽和度也偏高，元素繁多。

所以對于游戲入口，我們做了以下優(yōu)化：

①增加游戲入口類型

從單一圖片入口，改為大+小兩種類型，重點(diǎn)運(yùn)營的游戲采用大卡容器承載，給予重點(diǎn)游戲更強(qiáng)的吸引力，增強(qiáng)內(nèi)容識別性。

 

②重新提煉設(shè)計語言

延續(xù)一局視覺語言，提取真實(shí)世界中游戲機(jī)的形狀和紋理，應(yīng)用在界面中，豐富游戲?qū)傩浴?/span>

 

2.尋找內(nèi)在驅(qū)動力，強(qiáng)化用戶使用動機(jī)

我們從游戲設(shè)計中吸取經(jīng)驗(yàn)，以游戲設(shè)計八角模型為指導(dǎo)，將游戲入口中能夠影響用戶內(nèi)在驅(qū)動力的信息提取并強(qiáng)化，在提高入口識別性的同時吸引用戶點(diǎn)擊。

 

3. 動機(jī)：好奇未知

① 游戲靜態(tài)入口變?yōu)閯討B(tài)入口。對于未知內(nèi)容，精美的動態(tài)視頻能表達(dá)更豐富的信息，遠(yuǎn)比靜態(tài)圖像更具吸引力，更易激發(fā)用戶對完整游戲的好奇心。

② 規(guī)范小入口圖標(biāo)。舊版游戲入口，僅使用游戲IP，識別性差，達(dá)不到展示內(nèi)容的目的，相反由于IP形象風(fēng)格和裝扮類似，容易引起用戶的疑惑。

③ “查看更多”拖拽延續(xù)。繼續(xù)滑動“查看更多”，區(qū)域隨手勢延伸，促進(jìn)用戶完成繼續(xù)滑動的動作。

03

強(qiáng)化房間社交屬性

1. 房間信息與社交信息重新排布

2.動機(jī)：社交建聯(lián)

① 房間信息與社交信息重新排布，上方小區(qū)域橫排展示該房間游戲相關(guān)的信息，下方區(qū)域外露更多玩家信息，增強(qiáng)社交屬性讓用戶更快get到人數(shù)、名稱、性別等社交信息。

② 新增房間玩家頭像展示，動態(tài)展示人數(shù)變化，強(qiáng)化社交屬性，激發(fā)社交動力。

最后

一局的進(jìn)化之路剛剛開啟，后續(xù)我們也將會基于從小眾游戲社區(qū)向游戲平臺轉(zhuǎn)型的方向繼續(xù)探索，持續(xù)迭代，打造更好玩更沉浸的游戲體驗(yàn)。閑暇之余，叫上好友來一局！

—  The end  —

以下三分設(shè)文章，你可能也感興趣

▽ 

?? 原創(chuàng)文章精選??

告別加班！使用設(shè)計系統(tǒng)方法更快地構(gòu)建產(chǎn)品

如何評估設(shè)計質(zhì)量，提升設(shè)計技能

你常常忽略的 7 個具有破壞性的體驗(yàn)鴻溝

一篇文章告訴你服務(wù)設(shè)計到底能做什么？

看 Apple CarPlay 如何提升駕駛安全和駕駛體驗(yàn)

一起看看《對馬島之魂》如何打造初次對抗體驗(yàn)

制定 “小目標(biāo)”，了解產(chǎn)品管理中的結(jié)構(gòu)化思維

35+ 的 Windows 系統(tǒng)到底有什么了不起？

導(dǎo)師與學(xué)員的高效交流 APP 設(shè)計 —— Lightship

?? 我們一起聊設(shè)計 ???♂?

高質(zhì)量，學(xué)設(shè)計行交流微信群

期待與更多優(yōu)秀用戶體驗(yàn)設(shè)計師一起成長

PS：歡迎大家關(guān)注三分設(shè)，每天早上9點(diǎn)，準(zhǔn)時充電。分享優(yōu)質(zhì)設(shè)計、創(chuàng)意靈感、新知新識，定期大咖老師直播分享，零距離連麥，答疑解惑。 添加小小蟲微信號【 Lil_Bug 】，備注【 三分設(shè) 】加入！（只面向星標(biāo)了公眾號三分設(shè)的粉絲）