發(fā)布時(shí)間:2022-03-09 11:14:29來(lái)源:魔方格
和賽車游戲 ui界面設(shè)計(jì)不同,這次要設(shè)計(jì)的游戲 ui,需要在娛樂(lè)性和教育性之間,找到平衡點(diǎn),今天小編主要給大家分享如何設(shè)計(jì)ui游戲界面,希望對(duì)你們有幫助!
一、項(xiàng)目
為移動(dòng)端填字游戲設(shè)計(jì)UI和相應(yīng)的圖形元素。
二、設(shè)計(jì)過(guò)程
這次我們團(tuán)隊(duì)的任務(wù)是為這款移動(dòng)端游戲創(chuàng)造一個(gè)有趣的游戲界面。考慮到它是一款教育性游戲,它需要趣味性和協(xié)調(diào)性,教育性和游戲性。在確保游戲簡(jiǎn)單和有趣的同時(shí),也不能完全喪失游戲本身應(yīng)有的緊迫感。
在功能方面,玩家需要根據(jù)所提供的信息填寫(xiě)單詞中缺失的字母來(lái)解決謎題。這款游戲是傳統(tǒng)填字游戲的數(shù)字版本。每一關(guān)都有一組需要填寫(xiě)的單詞,以及相應(yīng)的謎題線索。
這款游戲也有社交屬性:玩家可以鏈接到Facebook,分享分?jǐn)?shù),和朋友競(jìng)爭(zhēng),美麗的設(shè)計(jì)和動(dòng)畫(huà)被認(rèn)為是留住用戶的核心功能之一。
首先要考慮的是用戶在填寫(xiě)字母的過(guò)程中進(jìn)行交互的過(guò)程。屏幕的上半部分顯示了用戶游戲的關(guān)鍵參數(shù),包括里程碑、成就、硬幣和評(píng)級(jí)。
游戲界面的背景使用漂亮的漸變,亮度不高,不會(huì)分散用戶的注意力。用戶需要填寫(xiě)的拼寫(xiě)網(wǎng)格位于屏幕上方,尚未填寫(xiě)的字母使用白色背景;提供給用戶填寫(xiě)的字母在底部,字母為黃色。
這種顏色的差異對(duì)用戶來(lái)說(shuō)是很有區(qū)別的,底部的圖標(biāo)為用戶提供了不同的選擇,而相反的燈泡圖標(biāo)是提示系統(tǒng)。在整個(gè)布局中,所有元素都有平滑的曲線或圓角。這種設(shè)計(jì)使得整個(gè)界面不那么嚴(yán)肅。
這個(gè)界面是一個(gè)教程,向用戶展示游戲如何交互,為了達(dá)到這個(gè)目的,設(shè)計(jì)師需要盡可能向用戶用戶展示清晰的導(dǎo)航和交互。為了增加趣味性,字母設(shè)計(jì)成吉祥物,添加動(dòng)畫(huà)可以避免不必要的操作,讓用戶無(wú)需點(diǎn)擊就能理解如何操作。
在UI設(shè)計(jì)過(guò)程中,設(shè)計(jì)師提供了多種漸變顏色,確保鮮艷多彩的配色方案足以營(yíng)造出一種有趣的氛圍。
值得一提的是,提示按鈕的動(dòng)畫(huà),它模擬光影波動(dòng)的效果,吸引用戶的注意。左下角的金幣數(shù)量告訴用戶,可以使用多少金幣來(lái)獲得提示。
此外,游戲界面中有很多界面以彈出窗口的形式呈現(xiàn),告知用戶相關(guān)信息和更新內(nèi)容,甚至提供一些優(yōu)惠。
你可以看到如下的相關(guān)例子:第一個(gè)屏彈出顯示用戶的成就,當(dāng)前級(jí)別的總分、獎(jiǎng)勵(lì)、排行榜,以及Facebook分享和繼續(xù)游戲的選項(xiàng)。
在隨后的彈出界面中,設(shè)計(jì)師使用了相同的圓形按鈕和類似的樣式元素來(lái)保持整體的視覺(jué)一致性。第二個(gè)屏提供金幣獲取途徑,第三個(gè)屏是設(shè)置。
關(guān)卡地圖是手機(jī)游戲的重要組成部分。在Letter Bounce中,設(shè)計(jì)師將各種有趣的景觀和游戲關(guān)卡結(jié)合在一起,從雪山到火山,制作了各種有趣的圖形插圖,生動(dòng)活潑。