電商游戲?qū)n}03:交互設(shè)計(jì)篇

1 評(píng)論 10394 瀏覽 61 收藏 12 分鐘

編輯導(dǎo)語(yǔ):如今很多軟件都有游戲頁(yè)面,主要存在于電商軟件,運(yùn)用游戲的機(jī)制進(jìn)行用戶留存以及點(diǎn)擊率提高等;前兩篇作者介紹了電商游戲理論以及玩法設(shè)計(jì),本文作者分享了關(guān)于電商游戲?qū)n}的交互設(shè)計(jì),我們一起來(lái)看一下。

之前的兩篇文章分別介紹了電商游戲的設(shè)計(jì)理論和玩法設(shè)計(jì),感興趣的同學(xué)可以關(guān)注下。

電商游戲?qū)n}(1):游戲理論篇

電商游戲?qū)n}(2):玩法設(shè)計(jì)篇

今天我們一起來(lái)分析下電商游戲交互設(shè)計(jì)的細(xì)節(jié),本文包含3個(gè)方面內(nèi)容:

  • 游戲布局方式
  • 游戲視角設(shè)定
  • 游戲交互操作

一、游戲布局

1. 沉浸式體驗(yàn)

對(duì)于更加強(qiáng)調(diào)“心流”體驗(yàn)的游戲類產(chǎn)品,沉浸式通常是必備的設(shè)計(jì)方式;一方面可以構(gòu)建游戲的整體性,營(yíng)造游戲氛圍,有利于用戶沉浸其中;另一方面可以增加頁(yè)面內(nèi)容的承載空間,傳遞給用戶更多信息。

2. 布局結(jié)構(gòu)

電商游戲沒(méi)有復(fù)雜的玩法,內(nèi)容也比較明確,可以分為游戲操作、功能擴(kuò)展、營(yíng)銷活動(dòng)三大內(nèi)容模塊。

電商游戲?qū)n}03-交互設(shè)計(jì)篇

通常運(yùn)營(yíng)活動(dòng)優(yōu)先展示在游戲左上方,有利于增強(qiáng)用戶感知;右側(cè)為游戲輔助區(qū)包括攻略、動(dòng)態(tài)、裝扮等信息;底部為核心游戲操作區(qū),功能項(xiàng)一般比較固定,可以減少用戶記憶成本,按鈕橫向排布的方式,方便用戶瀏覽和高頻操作。

頁(yè)面結(jié)構(gòu)和內(nèi)容布局會(huì)影響到用戶對(duì)產(chǎn)品價(jià)值的認(rèn)知。游戲的價(jià)值點(diǎn)不同,采用的布局方式也不同。

電商游戲?qū)n}03-交互設(shè)計(jì)篇

免費(fèi)領(lǐng)實(shí)物類的游戲,與購(gòu)物行為沒(méi)有直接的關(guān)系,并且養(yǎng)成周期比較長(zhǎng),需要拆解出一個(gè)個(gè)小目標(biāo)吸引用戶持續(xù)投入,因此頁(yè)面中嵌入的玩法比較多。

但是用戶精力畢竟是有限的,玩法過(guò)多會(huì)造成用戶沒(méi)有精力瀏覽商品,所以需要借助任務(wù)玩法來(lái)驅(qū)動(dòng)用戶瀏覽商品和下單轉(zhuǎn)化。

因此從業(yè)務(wù)和用戶需求的角度,免費(fèi)領(lǐng)實(shí)物游戲方式更適合采用全屏化布局,比較典型的就是“多多果園”。

電商游戲?qū)n}03-交互設(shè)計(jì)篇

代金幣是虛擬價(jià)值,用于購(gòu)物結(jié)算時(shí)的抵扣或者優(yōu)惠券的兌換,單純的數(shù)字增長(zhǎng)很難帶給用戶持續(xù)投入游戲的動(dòng)力,需要通過(guò)商品曝光增強(qiáng)用戶的價(jià)值感知。

因此游戲布局主要采用“游戲+商品”的方式,另外商品、購(gòu)物券等內(nèi)容展示,可以縮短用戶瀏覽商品的路徑,提升轉(zhuǎn)化率,例如淘寶的“金幣小鎮(zhèn)”。

電商游戲?qū)n}03-交互設(shè)計(jì)篇

當(dāng)然布局形式并不是絕對(duì)的,需要綜合考慮多個(gè)因素選擇游戲布局;芭芭農(nóng)場(chǎng)集成了兩款游戲,為了游戲操作體驗(yàn)一致性,“免費(fèi)領(lǐng)水果”下方也增加了商品曝光,也是對(duì)玩法不足的一種補(bǔ)充。

電商游戲?qū)n}03-交互設(shè)計(jì)篇

二、游戲視角

電商游戲比較簡(jiǎn)單,更多是靜態(tài)場(chǎng)景,沒(méi)有畫(huà)面切換和視角轉(zhuǎn)換,游戲畫(huà)面展現(xiàn)主要包含45度俯視和正視兩種視角。

電商游戲?qū)n}03-交互設(shè)計(jì)篇

45度俯視角是較為常見(jiàn)的游戲視角,適合展示更多的畫(huà)面內(nèi)容;例如包含了多幅地塊的農(nóng)場(chǎng)類游戲,通常將核心的操作融入在游戲畫(huà)面中,為了提高用戶的識(shí)別和操作效率,需要通過(guò)一定的交互形式引導(dǎo)用戶操作。

正視角通常只有一個(gè)核心游戲主元素,可以通過(guò)細(xì)節(jié)的變化帶給用戶一定的成就感,例如果樹(shù)的生長(zhǎng)過(guò)程變化;但是正視角也有一定的局限性,可能會(huì)造成畫(huà)面過(guò)于單調(diào),需要搭配一定的場(chǎng)景元素豐富游戲畫(huà)面。

三、游戲交互

用戶行為過(guò)程會(huì)激發(fā)體驗(yàn)感知,這其中包含了引導(dǎo)、行動(dòng)、反饋3個(gè)大的交互節(jié)點(diǎn)。

電商游戲?qū)n}03-交互設(shè)計(jì)篇

1. 引導(dǎo)

1)新人引導(dǎo)

雖然電商游戲大都比較簡(jiǎn)單,但是為了讓用戶盡快熟悉游戲,或者避免用戶未體驗(yàn)就退出游戲,一般游戲都會(huì)增加操作指向性更強(qiáng)的新手引導(dǎo)。

不過(guò)新手引導(dǎo)不宜過(guò)長(zhǎng),聚焦游戲主玩法以及核心價(jià)值的呈現(xiàn),目的是建立用戶對(duì)游戲的第一印象,激發(fā)用戶更強(qiáng)的游戲興趣。

2)操作引導(dǎo)

日常引導(dǎo)主要包括“動(dòng)效弱引導(dǎo)”和“彈窗強(qiáng)引導(dǎo)”。

電商游戲?qū)n}03-交互設(shè)計(jì)篇

金幣小鎮(zhèn)主要采用的是動(dòng)效引導(dǎo),旋轉(zhuǎn)的風(fēng)車、金幣,抖動(dòng)的賺金幣按鈕,形成了單獨(dú)的視覺(jué)層級(jí),保證了關(guān)鍵信息與紛繁的游戲畫(huà)面分離開(kāi)來(lái),更好的引導(dǎo)用戶操作。

電商游戲?qū)n}03-交互設(shè)計(jì)篇

多多果園在微動(dòng)效的基礎(chǔ)上,采用了“強(qiáng)運(yùn)營(yíng)”的策略,在用戶行為過(guò)程中添加了各種彈窗引導(dǎo)用戶領(lǐng)券轉(zhuǎn)化;游戲初期確實(shí)帶給用戶很大的干擾。但是對(duì)于特定的用戶群體,“免費(fèi)”具有極強(qiáng)的號(hào)召力,一旦用戶上癮,這種交互方式便不再是行為阻礙點(diǎn)。

電商游戲?qū)n}03-交互設(shè)計(jì)篇

2. 行動(dòng)

1)體驗(yàn)感知

我們?cè)诮换ピO(shè)計(jì)時(shí)都會(huì)優(yōu)先考慮用戶的操作成本,但游戲設(shè)計(jì)中,在關(guān)鍵節(jié)點(diǎn)需要充分考慮體驗(yàn)感知,帶給用戶更強(qiáng)的“爽點(diǎn)”刺激。

螞蟻森林、芭芭農(nóng)場(chǎng)等游戲中,能量或果實(shí)需要多次點(diǎn)擊逐個(gè)收取,目的是增強(qiáng)用戶游戲中的獲得感;輔助收取動(dòng)效,強(qiáng)化果實(shí)收集入賬的“爽感”。

芭芭農(nóng)場(chǎng)甚至將升級(jí)獲得的15個(gè)陽(yáng)光,拆分成5個(gè)收集點(diǎn),讓用戶逐個(gè)點(diǎn)擊收集;目的也是為了增強(qiáng)用戶對(duì)游戲等級(jí)成長(zhǎng)的認(rèn)知和記憶,激發(fā)用戶更強(qiáng)的游戲動(dòng)力。

電商游戲?qū)n}03-交互設(shè)計(jì)篇

2)效率提升

在輔助功能或者行為路徑設(shè)計(jì)上,需要提高用戶的操作效率,避免用戶因?yàn)椴僮鞣爆嵍艞墶?/p>

為了提升用戶的操作效率,最近螞蟻森林在右下角增加了“逛一逛”功能,可以直接定位可偷取的好友,減少了用戶的操作成本,更好的讓用戶參與社交互動(dòng)。

游戲中的任務(wù)系統(tǒng)作為輔助功能存在的,主要目標(biāo)是完成流量分發(fā)和提高轉(zhuǎn)化;當(dāng)任務(wù)數(shù)量較多時(shí),逐個(gè)領(lǐng)取確實(shí)會(huì)降低用戶操作效率。

在“金幣小鎮(zhèn)”中,增加了“一鍵領(lǐng)取”功能,可以增強(qiáng)用戶效率,同時(shí)配合任務(wù)界面上方收益提升的動(dòng)效變化,帶給用戶更加強(qiáng)烈的游戲爽感。

電商游戲?qū)n}03-交互設(shè)計(jì)篇

3. 反饋

為了豐富游戲的趣味性,增強(qiáng)用戶的行為感知,電商游戲在用戶行為反饋上會(huì)進(jìn)行適當(dāng)?shù)目鋸執(zhí)幚?,?dòng)效就成為了重要的表現(xiàn)形式。

例如澆水或許施肥后,果樹(shù)會(huì)有成長(zhǎng)動(dòng)效;果實(shí)收集也增加了快速落袋的動(dòng)效,營(yíng)造游戲的爽點(diǎn)。

電商游戲?qū)n}03-交互設(shè)計(jì)篇

而螞蟻莊園則通過(guò)動(dòng)效,構(gòu)建出完整的故事情節(jié),增加游戲的趣味性;例如小雞去好友家蹭食時(shí),采用了快速飛奔、急不可耐的動(dòng)效。從別人家召回時(shí),一副吃飽了慢吞吞挪步的樣子;讓整個(gè)游戲的設(shè)定非常自然合理,又給用戶帶來(lái)趣味性。

電商游戲?qū)n}03-交互設(shè)計(jì)篇

四、總結(jié)

游戲化產(chǎn)品在電商領(lǐng)域已經(jīng)全面普及開(kāi)來(lái),各個(gè)平臺(tái)都推出了3-5款游戲產(chǎn)品,游戲之間相互串聯(lián)形成游戲集群,力求帶給用戶一站式的游戲體驗(yàn);核心目標(biāo)是希望借助低門檻的游戲,降低獲客成本,形成穩(wěn)定的用戶流量。

游戲產(chǎn)品的定位,要求交互設(shè)計(jì)簡(jiǎn)單、有趣,帶給用戶爽感和趣味性;因此在設(shè)計(jì)中加入了更多的動(dòng)態(tài)效果,讓單調(diào)的游戲畫(huà)面更加生動(dòng),同時(shí)更好地激勵(lì)用戶行為。

相信電商平臺(tái)都已經(jīng)嘗到了游戲化產(chǎn)品帶來(lái)的甜頭,未來(lái)會(huì)有更多的玩法和設(shè)計(jì)出現(xiàn)。

電商游戲?qū)n}就到此結(jié)束了,歡迎大家留言交流~

文章鏈接:

電商游戲?qū)n}(1):游戲理論篇

電商游戲?qū)n}(2):玩法設(shè)計(jì)篇

#專欄作家#

子牧先生。公眾號(hào):子牧UXD(HelloDesign),人人都是產(chǎn)品經(jīng)理專欄作家。產(chǎn)品體驗(yàn)設(shè)計(jì)師。8年互聯(lián)網(wǎng)行業(yè)經(jīng)驗(yàn),擅長(zhǎng)體驗(yàn)設(shè)計(jì)思維、設(shè)計(jì)方法論、交互設(shè)計(jì)研究。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自 unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 左上顯示活動(dòng)信息,右上顯示輔助信息,底部固定操作區(qū)域,這個(gè)原則在23年是否還合適?運(yùn)營(yíng)游戲的界面感覺(jué)越堆越多東西,如果要做減法的話,有沒(méi)哪些信息是可以刪減掉或隱藏得更深呢?

    來(lái)自廣東 回復(fù)