和賽車(chē)游戲 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)為是留住用戶(hù)的核心功能之一。

首先要考慮的是用戶(hù)在填寫(xiě)字母的過(guò)程中進(jìn)行交互的過(guò)程。屏幕的上半部分顯示了用戶(hù)游戲的關(guān)鍵參數(shù)，包括里程碑、成就、硬幣和評(píng)級(jí)。

游戲界面的背景使用漂亮的漸變，亮度不高，不會(huì)分散用戶(hù)的注意力。用戶(hù)需要填寫(xiě)的拼寫(xiě)網(wǎng)格位于屏幕上方，尚未填寫(xiě)的字母使用白色背景;提供給用戶(hù)填寫(xiě)的字母在底部，字母為黃色。

這種顏色的差異對(duì)用戶(hù)來(lái)說(shuō)是很有區(qū)別的，底部的圖標(biāo)為用戶(hù)提供了不同的選擇，而相反的燈泡圖標(biāo)是提示系統(tǒng)。在整個(gè)布局中，所有元素都有平滑的曲線或圓角。這種設(shè)計(jì)使得整個(gè)界面不那么嚴(yán)肅。

這個(gè)界面是一個(gè)教程，向用戶(hù)展示游戲如何交互，為了達(dá)到這個(gè)目的，設(shè)計(jì)師需要盡可能向用戶(hù)用戶(hù)展示清晰的導(dǎo)航和交互。為了增加趣味性，字母設(shè)計(jì)成吉祥物，添加動(dòng)畫(huà)可以避免不必要的操作，讓用戶(hù)無(wú)需點(diǎn)擊就能理解如何操作。

在UI設(shè)計(jì)過(guò)程中，設(shè)計(jì)師提供了多種漸變顏色，確保鮮艷多彩的配色方案足以營(yíng)造出一種有趣的氛圍。

值得一提的是，提示按鈕的動(dòng)畫(huà)，它模擬光影波動(dòng)的效果，吸引用戶(hù)的注意。左下角的金幣數(shù)量告訴用戶(hù)，可以使用多少金幣來(lái)獲得提示。

此外，游戲界面中有很多界面以彈出窗口的形式呈現(xiàn)，告知用戶(hù)相關(guān)信息和更新內(nèi)容，甚至提供一些優(yōu)惠。

你可以看到如下的相關(guān)例子:第一個(gè)屏彈出顯示用戶(hù)的成就，當(dāng)前級(jí)別的總分、獎(jiǎng)勵(lì)、排行榜，以及Facebook分享和繼續(xù)游戲的選項(xiàng)。

在隨后的彈出界面中，設(shè)計(jì)師使用了相同的圓形按鈕和類(lèi)似的樣式元素來(lái)保持整體的視覺(jué)一致性。第二個(gè)屏提供金幣獲取途徑，第三個(gè)屏是設(shè)置。

關(guān)卡地圖是手機(jī)游戲的重要組成部分。在Letter Bounce中，設(shè)計(jì)師將各種有趣的景觀和游戲關(guān)卡結(jié)合在一起，從雪山到火山，制作了各種有趣的圖形插圖，生動(dòng)活潑。