游戲UI設(shè)計(jì)項(xiàng)目分析–狼人殺

2021-11-16    seo達(dá)人



圖片

狼人殺作為聚會(huì)必備推理類桌游非?;鸨耙蝗肜强由钏坪?,從此節(jié)操是路人”。

一局APP自研時(shí)下最火的線上桌游【一夜狼人殺】,這款桌游不同于以往邏輯推理版狼人殺,沒(méi)有夜里死亡,適合休閑娛樂(lè),滿足每個(gè)人的參與感,更像是真相探索游戲。

本文以制造積極情緒、打造體驗(yàn)峰值為設(shè)計(jì)目標(biāo),設(shè)定游戲世界觀,構(gòu)建游戲故事背景,繪制精美插畫(huà),賦能魔力特效,打造標(biāo)桿小游戲。解密小游戲設(shè)計(jì)秘籍,接下來(lái)讓我們揭開(kāi)小游戲設(shè)計(jì)的神秘面紗吧。

圖片

1

故事背景-設(shè)定世界觀 代入故事情境

歡迎來(lái)到一夜狼的世界,夜幕降臨,一群身懷絕技的冒險(xiǎn)者們準(zhǔn)備在幽暗的森林里度過(guò)一夜,明天即可到達(dá)森林中心,那里的古堡中有古老家族遺留下的寶藏和數(shù)不盡的財(cái)富。但隊(duì)伍中一直隱藏著狼人和他的同伴,他們準(zhǔn)備在今晚發(fā)動(dòng)襲擊,伺機(jī)奪取寶藏。幸存的幾位冒險(xiǎn)者在夜里暗中施展絕技,要在到達(dá)古堡的前一天,揪出隱藏許久的狼人,以保證能夠順利取得寶藏……

 

游戲設(shè)計(jì)-情景化設(shè)計(jì) 體驗(yàn)游戲樂(lè)趣

結(jié)合故事背景設(shè)定,以易用性原則為基礎(chǔ),加入情景化設(shè)計(jì),在【觸發(fā)期】制造驚喜感,合理布局,明晰操作,快速上手游戲;【興奮期】代入沉浸感,黑白場(chǎng)景切換,沉浸游戲;【結(jié)束期】凸顯成就感,高光時(shí)刻,強(qiáng)視效感知,勝負(fù)判定。

圖片

 

美式輕寫(xiě)實(shí)風(fēng)格,以游戲背景與角色設(shè)定為依托,提取古堡、巖石、沙漏等關(guān)鍵元素貫穿整個(gè)游戲界面設(shè)計(jì)。

圖片

 

卡牌設(shè)計(jì)-精進(jìn)主美視覺(jué) 刺激感官神經(jīng)

卡牌作為整個(gè)游戲的靈魂,代表玩家的身份,同時(shí)也會(huì)做成實(shí)物卡牌周邊,作為獎(jiǎng)品發(fā)放給玩家。身份角色設(shè)定:共計(jì)9個(gè)角色,分為三大陣營(yíng)。好人陣營(yíng):預(yù)言家、守夜人、搗蛋鬼、強(qiáng)盜、失眠者、酒鬼;狼人陣營(yíng):狼人、爪牙;第三陣營(yíng):皮匠。

人物形象根據(jù)角色職業(yè)技能進(jìn)行設(shè)定;設(shè)計(jì)風(fēng)格為強(qiáng)氛圍感的美式魔幻風(fēng)格,突出卡牌氛圍感并保證人物清晰度,角色比例選擇展示腰部以上,角色以正面和四分之三面為主,角色的姿態(tài)和樣貌根據(jù)角色設(shè)定具體設(shè)計(jì);三大陣營(yíng)以邊框和氛圍顏色做區(qū)分,同陣營(yíng)邊框(除道具外)不變;卡牌設(shè)計(jì)包含底框、邊框、角色,道具設(shè)計(jì)在邊框頂端兩側(cè),根據(jù)角色替換。

圖片

圖片

卡片設(shè)計(jì)拆解

 

圖片

三大陣營(yíng)設(shè)計(jì)

 

圖片

圖片

圖片

圖片

卡背設(shè)計(jì)

 

動(dòng)效設(shè)計(jì)-制造積極情緒 打造峰值體驗(yàn)

運(yùn)用動(dòng)效手段在游戲的關(guān)鍵節(jié)點(diǎn)打造峰值體驗(yàn),刺激用戶游戲情緒,快速帶入游戲人物和情節(jié)。

[觸發(fā)期]-[情緒帶入階段]

引發(fā)好奇心,極具儀式感的動(dòng)畫(huà)(發(fā)牌和確認(rèn)身份)推動(dòng)用戶快速進(jìn)入游戲氛圍,感知游戲。

[沉浸期]-[情緒沉浸階段]

流暢的操作體驗(yàn)和反饋、場(chǎng)景轉(zhuǎn)場(chǎng)動(dòng)畫(huà)提升游戲沉浸感與趣味性。

[結(jié)束期]-[情緒滿足階段]

通過(guò)整場(chǎng)的懸念鋪設(shè),在最終的結(jié)果公布緩解來(lái)到情緒的高峰時(shí)刻。

圖片

 

游戲體驗(yàn)情緒變化曲線

a.情緒代入階段

儀式感渲染-模擬牌桌發(fā)牌,卡牌掉落的過(guò)程,表現(xiàn)卡牌質(zhì)感和厚度在現(xiàn)實(shí)世界中的感受,身份確認(rèn)動(dòng)效添加強(qiáng)烈的反轉(zhuǎn)效果刺激用戶,不同陣營(yíng)不同的色彩傾向強(qiáng)化對(duì)抗感知。

圖片

[優(yōu)化輸出圖像]

圖2-2.gif

圖3-3.gif

圖 4-4.gif

 

b.情緒沉浸階段

游戲體驗(yàn)沉浸感-流暢簡(jiǎn)單的操作體驗(yàn)和環(huán)節(jié)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)明確游戲進(jìn)度,降低游戲難度給玩家?guī)?lái)的焦慮情緒,強(qiáng)烈的操控感與燒腦懸疑玩法結(jié)合,使游戲體驗(yàn)心流曲線趨于專注、樂(lè)趣、享受。動(dòng)效平緩削弱視覺(jué)刺激保證玩家的專注。

圖片

游戲體驗(yàn)心流區(qū)間

圖5-5.gif

 

場(chǎng)景切換

白天黑夜場(chǎng)景用日月升起和場(chǎng)景氛圍的變化提示玩家環(huán)節(jié)的轉(zhuǎn)換,在平緩的游戲感受中自然的進(jìn)入下一環(huán)節(jié),沉浸在游戲線索思考和角色代入中,仿佛一切變化都是理所當(dāng)然而不會(huì)因?yàn)橐饬现獾氖录l(fā)生導(dǎo)致分心。

圖 6-6.gif

圖 7-7.gif

 

c.情緒滿足階段

游戲體驗(yàn)情緒高峰時(shí)刻-經(jīng)過(guò)正常的懸念鋪設(shè),最終在結(jié)果展示環(huán)節(jié)用強(qiáng)烈的光感和卡片破壞動(dòng)效,引導(dǎo)用戶產(chǎn)生強(qiáng)烈的成就感和刺激感。并在此環(huán)節(jié)中游戲情緒達(dá)到了高峰時(shí)刻。

圖8-8.gif

圖 9-9.gif

 

動(dòng)效如何落地?

動(dòng)效設(shè)計(jì)過(guò)程中運(yùn)用了粒子插件、輝光插件,以及一些偽3D的技法。為了保證落地效果,技術(shù)使用游戲引擎開(kāi)發(fā),設(shè)計(jì)師采用拆解組合標(biāo)注的方式交付研發(fā)-動(dòng)效標(biāo)注(代碼實(shí)現(xiàn),如位移、簡(jiǎn)單粒子效果)+序列幀&MP4視頻。最終達(dá)到了80%還原度。

[優(yōu)化輸出圖像]

 

寫(xiě)在最后

作為第一款自研游戲,我們分為三條線:UI、主美、動(dòng)效,緊密協(xié)作,聯(lián)合研發(fā)同學(xué)還原設(shè)計(jì)效果。游戲上線后,取得了一定的熱度,大大提升了一局的日活躍量。后續(xù)我們會(huì)繼續(xù)將業(yè)務(wù)目標(biāo)與設(shè)計(jì)目標(biāo)相結(jié)合 ,逐步迭代,提高游戲體驗(yàn)。

 

原文地址:百度MEUX(公眾號(hào))

作者:文娛平臺(tái)用戶體驗(yàn)

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》游戲UI設(shè)計(jì)項(xiàng)目分析–狼人殺

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



分享本文至:

日歷

鏈接

個(gè)人資料

存檔