基于手機(jī)游戲UI中的視覺設(shè)計(jì)研究

程今藝

（長(zhǎng)春建筑學(xué)院，吉林 長(zhǎng)春 130000）

智能手機(jī)的出現(xiàn)讓人們的生活變得更加便利，以往只能夠用電腦處理的事務(wù)，如今大部分都能夠在手機(jī)上得到實(shí)現(xiàn)。而我國(guó)智能手機(jī)用戶就多達(dá)7億，約占全球手機(jī)用戶的20%。智能手機(jī)的出現(xiàn)帶動(dòng)了我國(guó)許多電子行業(yè)的發(fā)展，其中手游行業(yè)發(fā)展勢(shì)頭火爆。而玩家在出玩游戲時(shí)對(duì)游戲的第一印象必然是游戲的UI界面設(shè)計(jì)，這也直接決定著游戲是否能夠吸引玩家。因此如何做好UI視覺設(shè)計(jì)，擴(kuò)大玩家留存率，就顯得尤為重要。

1 UI視覺設(shè)計(jì)對(duì)手游的重要性

UI手機(jī)界面使玩家能夠與手游進(jìn)行信息傳遞的橋梁，除了聽覺與觸覺外，視覺是人對(duì)于外界事物最直觀的感受，他它能夠使人準(zhǔn)確地捕捉到外界信息，因此UI的視覺表現(xiàn)有著非常重要的作用，這也影響著手游用戶的留存率。對(duì)手游中UI的視覺設(shè)計(jì)進(jìn)行研究能夠讓手游開發(fā)者真正站在玩家的游戲體驗(yàn)感上開發(fā)游戲，使手游兼具實(shí)用性與美觀性。由于手游在我國(guó)的火爆發(fā)展，許多企業(yè)都想涉足這塊領(lǐng)域，但由于其美術(shù)設(shè)計(jì)質(zhì)量參差不齊，導(dǎo)致手游UI的視覺設(shè)計(jì)缺乏理論基礎(chǔ)。有些設(shè)計(jì)師只是盲目地按照自己的想法設(shè)計(jì)，并不依據(jù)游戲的設(shè)計(jì)理念和用戶的體驗(yàn)感來(lái)進(jìn)行設(shè)計(jì)，甚至還有一些設(shè)計(jì)師仍然按照設(shè)計(jì)電腦端的UI來(lái)進(jìn)行手游UI的設(shè)計(jì)[1]?；诖?，研究手游UI中的視覺設(shè)計(jì)，能夠促進(jìn)手游行業(yè)域外視覺設(shè)計(jì)更好的發(fā)展。

2 UI視覺設(shè)計(jì)的構(gòu)成要素

1）色彩元素。這是視覺感受中的第一感受，在UI的視覺設(shè)計(jì)中有著重要地位。根據(jù)色彩心理學(xué)，不同的色彩能夠給人不同的心理暗示，帶給人不同的感受。在圖形中添加色彩，能夠帶給圖形不同的表現(xiàn)力[2]。例如：《保衛(wèi)蘿卜》中的彩色帶給人歡快的感受，《暗黑血統(tǒng)》中的暗色系又給人沉悶的感受。

2）圖形元素。圖形也是手游視覺設(shè)計(jì)中的重要元素之一。圖形元素是以讀為主的元素，所以在手游的UI設(shè)計(jì)中，需要根據(jù)游戲進(jìn)行合理的裝飾與排版，這樣能夠使游戲的主題與環(huán)境更加生動(dòng)地傳遞給玩家。并且不同的圖形形狀也能夠帶給人不同的感受，例如，三角形有一種尖銳的感覺，而四方形給人一種平穩(wěn)的感覺。在進(jìn)行設(shè)計(jì)時(shí)結(jié)合游戲的設(shè)計(jì)，合理運(yùn)用圖形能夠給玩家很好的視覺體驗(yàn)，也能夠更加直觀的表達(dá)出游戲的內(nèi)容。

3）文字元素。文字是所有設(shè)計(jì)的基礎(chǔ)，在設(shè)計(jì)中得到了廣泛應(yīng)用。文字的增加除了能夠帶給玩家很好的視覺體驗(yàn)外，玩家也可以更好地操作游戲。在游戲的標(biāo)志或標(biāo)題中使用文字可以產(chǎn)生文本和統(tǒng)一游戲風(fēng)格的效果。不同的字體可以對(duì)應(yīng)不同的游戲風(fēng)格。例如，圓潤(rùn)的文字給人可愛的感覺，纖細(xì)的文字就會(huì)帶給人簡(jiǎn)潔的感覺。

3 不同視覺設(shè)計(jì)風(fēng)格的手游案例分析

UI的視覺設(shè)計(jì)和繪畫有著異曲同工之妙，都有著多種的表現(xiàn)形式。目前市場(chǎng)上的手機(jī)游戲風(fēng)格變化很大。從宏觀角度來(lái)看，許多UI設(shè)計(jì)風(fēng)格可以分為準(zhǔn)物化風(fēng)格和平面風(fēng)格。目前市場(chǎng)上大多數(shù)移動(dòng)游戲的視覺UI設(shè)計(jì)都是平面的，但也有著少量的擬物化設(shè)計(jì)。這些設(shè)計(jì)風(fēng)格并沒有好壞之分，只是針對(duì)游戲的風(fēng)格來(lái)制定視覺設(shè)計(jì)才是需要首要考慮的。

1）擬物化風(fēng)格——以《陰陽(yáng)師》為例?！蛾庩?yáng)師》這款手機(jī)游戲是網(wǎng)易于2016年推出的一款RPG游戲。該款游戲因其唯美的畫風(fēng)在公測(cè)之后就快速受到了我國(guó)手游玩家的喜愛，并在社會(huì)范圍內(nèi)引起了廣泛的討論。在此之前，我國(guó)也有過此類玩法的手游，但是陰陽(yáng)師唯美的美術(shù)風(fēng)格和游戲自身的藝術(shù)文化特色讓玩家在玩游戲的同時(shí)擁有了視覺與交互的雙重體驗(yàn)[3]。以游戲的登錄界面為例，該游戲的登錄界面是一幅浮世繪風(fēng)格的動(dòng)態(tài)場(chǎng)景這個(gè)，這就帶給人一種清新的感覺。而游戲的logo則以書法字體居中，在“開始游戲”設(shè)置的按鈕當(dāng)中，有兩只小魚圍繞在中央。

在游戲的主界面中，設(shè)計(jì)師將界面完全集成到環(huán)境中。玩家可以通過點(diǎn)擊場(chǎng)景中的手電筒與游戲進(jìn)行互動(dòng)。手電筒周圍裝飾著粉紅色的蝴蝶，這也起到了刺激玩家的作用。功能菜單圖標(biāo)也非常生動(dòng)有趣。對(duì)象圖標(biāo)。

通過對(duì)《陰陽(yáng)師》的案例分析，可以看出《陰陽(yáng)師》擬物化的視覺設(shè)計(jì)受到了玩家的歡迎。在扁平化風(fēng)格風(fēng)靡的今天，陰陽(yáng)師的設(shè)計(jì)界面能夠如此受到玩家的喜愛，離不開設(shè)計(jì)者對(duì)信息傳達(dá)的權(quán)衡以及對(duì)擬物化風(fēng)格的揚(yáng)長(zhǎng)避短，值得借鑒。

2）扁平化風(fēng)格——以《刺激戰(zhàn)場(chǎng)》為例?！洞碳?zhàn)場(chǎng)》是一款由海外藍(lán)洞公司制作的射擊游戲，2017年開始公測(cè)，如果玩家大約有一千兩百萬(wàn)之多，直到目前為止，仍然是我國(guó)最具影響力的游戲之一。《刺激戰(zhàn)場(chǎng)》講述的是在和平時(shí)代，出于戰(zhàn)略考慮，各國(guó)繼續(xù)保留士兵的職業(yè)，并通過計(jì)算機(jī)進(jìn)行軍事演習(xí)。而游戲中“大吉大利，今晚吃雞”的標(biāo)語(yǔ)也存在網(wǎng)絡(luò)中紅極一時(shí)?！洞碳?zhàn)場(chǎng)》是一款典型的扁平化設(shè)計(jì)風(fēng)格游戲。整個(gè)游戲頁(yè)面沒有太多的裝飾，非常簡(jiǎn)單和大方。從著陸界面開始，游戲使用對(duì)稱的原始繪制作為背景、平面和正方形，登錄端口底部的按鈕位于中間位置，使整個(gè)圖像充滿協(xié)調(diào)，并且更具有氣勢(shì)，符合射擊游戲的風(fēng)格。

在游戲的主界面，人物角色在畫面的最中心主體采用黃色和灰色為主的色調(diào)。給人的感覺是略顯單調(diào)，沒有太過豐富和華麗的顏色。而底部的信息框則采用了低飽和度的矩形來(lái)進(jìn)行版面的切割，關(guān)鍵性的按鈕采用了純度較高的黃色與白色，非常醒目，能夠很好的指導(dǎo)玩家與游戲進(jìn)行交互。

游戲的分界面中，界面的底板可以變?yōu)槿?，是使整個(gè)界面的色彩與風(fēng)格由于該款游戲?qū)儆谏鋼纛愑螒颍臃从惩婕业目旖菪院挽`敏度，因此在按鈕空間的布局上也考慮到了這一點(diǎn)，玩家可以根據(jù)自身的喜好來(lái)對(duì)按鈕的布局進(jìn)行合理的調(diào)控。

通過對(duì)《刺激戰(zhàn)場(chǎng)》的分析可以發(fā)現(xiàn)，扁平化的視覺設(shè)計(jì)風(fēng)格再手機(jī)的屏幕上更加突出，極簡(jiǎn)的設(shè)計(jì)拋棄了多余的裝飾，能夠使玩家更加專注于友誼。兩種游戲的不同風(fēng)格都收到了玩家的歡迎與喜愛，由此可以得出結(jié)論，手游的UI視覺設(shè)計(jì)一定要站在玩家的角度，結(jié)合游戲的風(fēng)格與立意來(lái)進(jìn)行設(shè)計(jì)，重視玩家與游戲的交互，只有這樣，才能夠設(shè)計(jì)出一款成功的UI界面設(shè)計(jì)作品。

4 結(jié)語(yǔ)

綜上所述，盡管我國(guó)在所有UI視覺設(shè)計(jì)中存在著許多問題，但仍然不乏好的手游UI界面設(shè)計(jì)。無(wú)論是扁平化設(shè)計(jì)還是擬物化設(shè)計(jì)，只要設(shè)計(jì)者能夠站在玩家的角度來(lái)設(shè)計(jì)UI界面，就是好界面設(shè)計(jì)。