游戏UI设计干货:怎么让游戏界面更具科技感?
說(shuō)到科技風(fēng),大家都會(huì)想到或者感覺(jué)到的是未來(lái)感,高科技的產(chǎn)物風(fēng)格。那么大家可以一起想一下,在我們的身邊有哪些是讓你覺(jué)得有未來(lái)感、科技感的設(shè)計(jì)。
?
?
星球大戰(zhàn)系列、科幻大片、液晶儀表盤(pán)、多媒體、VR AR....
通過(guò)上面的這些實(shí)例進(jìn)一步去觀察細(xì)節(jié):太空中各種星球、極光之類(lèi)的光暈、計(jì)算機(jī)繪圖時(shí)出現(xiàn)的參考線、各種的圓環(huán)環(huán)繞(精密儀器如鏡頭的結(jié)構(gòu))、渦輪狀的光環(huán)(來(lái)自發(fā)動(dòng)機(jī)點(diǎn)火)、六邊形(蜂巢等復(fù)雜架構(gòu))、產(chǎn)品上的結(jié)構(gòu)線(電路板、飛機(jī)上的接合線)。這些細(xì)節(jié)在質(zhì)感、光感、形狀、紋理等,以炫酷、純粹、簡(jiǎn)潔的表現(xiàn)在整體上給我們呈現(xiàn)出未來(lái)感、科技感。
?
看了這么多感覺(jué)是有些思路,但又未成體系,那怎樣能讓游戲界面有科技感呢?
首先,結(jié)合游戲的內(nèi)容,對(duì)以上的元素進(jìn)行篩選,找到相關(guān)的參考素材確定主視覺(jué)風(fēng)格(簡(jiǎn)潔的表達(dá),細(xì)節(jié)追求,具有品質(zhì)感)。
然后,根據(jù)界面的構(gòu)成,可以從背景、圖形、配色、控件設(shè)計(jì)、字體、動(dòng)效、特效這幾個(gè)方面開(kāi)始分析:
?
背景制作一般是利用顏色或者游戲場(chǎng)景來(lái)表現(xiàn)。
顏色有用純色、漸變等來(lái)表現(xiàn),大多以深色為主,色相偏冷,比如科技代表色藍(lán)色、青色。大面積的冷色調(diào)和深色很容易營(yíng)造出科技氛圍感。還可以和文字形成對(duì)比來(lái)傳遞信息內(nèi)容(襯托作用)。
?
修飾性的圖形都會(huì)以點(diǎn) 、線、面、規(guī)則的、不規(guī)則的、抽象的各種樣式去設(shè)計(jì)。
修飾性的圖形(簡(jiǎn)單的幾何圖形,比如圓環(huán)、線、矩形等的復(fù)合)在點(diǎn)綴搭配時(shí),不要過(guò)于花哨,要讓玩家知道界面的重點(diǎn)內(nèi)容是什么,不要搶了內(nèi)容信息的風(fēng)頭。
?
顏色按照631的搭配比例進(jìn)行配色,最好不要使用過(guò)多的配色,控制在三種色相內(nèi)設(shè)計(jì)。過(guò)多的配色會(huì)干擾信息的傳達(dá),也會(huì)影響其他界面的延展統(tǒng)一性導(dǎo)致后期的失控。例如:冷暖對(duì)比、色相差異、顏色明度純度……來(lái)產(chǎn)生差異性使引導(dǎo)可以清晰明了。
下面介紹幾種常用的配色方法:
Ⅰ鄰近色(三種之和小于90度,選類(lèi)似色,吸取它們過(guò)渡的顏色作為第三種)
?
?
Ⅱ 互補(bǔ)色(選其兩種互補(bǔ)色,在其中一個(gè)顏色旁找到第三種顏色)
?
Ⅲ 對(duì)比色 (更多樣也最困難。三種顏色在色輪里呈現(xiàn)等邊三角形,互為60度。)
?
Ⅳ 相關(guān)的配色網(wǎng)站參考
?
https://reeoo.com/category/blue
?
http://paletton.com/
?
http://www.colorfavs.com/
下面是顏色在界面上的運(yùn)用:
?
控件在游戲中的種類(lèi)較多,這里重點(diǎn)列出三種進(jìn)行闡述:
1.圖標(biāo)是具有明確指代含義的圖形,它是功能標(biāo)識(shí)也是圖形符號(hào)。所以QQ號(hào)最好是以最簡(jiǎn)單的圖形,來(lái)表達(dá)最容易理解的含義,呈現(xiàn)最合理的設(shè)計(jì)。
2.按鈕是游戲UI中最重要的交互控件。玩家要第一眼就發(fā)現(xiàn)并知道這是一個(gè)可以點(diǎn)擊的按鈕,要讓按鈕看上去像一個(gè)按鈕;無(wú)歧義且圖標(biāo)表達(dá)易懂、文字表達(dá)到位,能清晰地讓玩家知道點(diǎn)擊后會(huì)發(fā)生的事情;按鈕也有主次之分,重要的按鈕要更突出顏色/更顯眼的位置/更強(qiáng)烈的提示...
?
3.框體可以幫助我們將界面內(nèi)容與其他元素在視覺(jué)上區(qū)別開(kāi),它作為一個(gè)元素來(lái)分解設(shè)計(jì)的不同部分。大多科技風(fēng)的框體多用簡(jiǎn)單的線條去設(shè)計(jì),不需要很多的效果。簡(jiǎn)潔的框體設(shè)計(jì)實(shí)際上可以幫助玩家將視線吸引到設(shè)計(jì)中心的主要內(nèi)容中。如果邊框設(shè)計(jì)過(guò)度,玩家可能非常不容易看到你希望他們看到的內(nèi)容。
?
字體多為線條硬朗的無(wú)襯線字體,該類(lèi)字體通常是機(jī)械的和統(tǒng)一線條的,它們往往擁有相同的曲率,筆直的線條,銳利的轉(zhuǎn)角 。這類(lèi)字體簡(jiǎn)單很符合科技風(fēng)的調(diào)性(與圖形線條很搭配,自身的簡(jiǎn)潔顯得很精致)。字體的種類(lèi)如果有特定的要求最好也不要超過(guò)三種,多利用文字大小、粗細(xì)、顏色、透明度等營(yíng)造信息層級(jí)關(guān)系。
?
重點(diǎn)信息要突出,簡(jiǎn)短干練,更多的說(shuō)明文字可以放到次層級(jí)或者彈窗等,盡可能壓縮文字個(gè)數(shù),不但能夠?yàn)槎嗾Z(yǔ)言問(wèn)題減輕調(diào)整負(fù)擔(dān);過(guò)多的文字也會(huì)讓玩家增加閱讀負(fù)擔(dān)產(chǎn)生負(fù)面情緒。
很多時(shí)候信息和元素越多就越難把握。多做減法避免無(wú)意義的視覺(jué)元素堆砌和雜亂無(wú)章,縮小或減少次要元素的存在感,利用合理的排版布局反而能讓你的設(shè)計(jì)更簡(jiǎn)潔更有高級(jí)的氣質(zhì)。
?
有了動(dòng)效,讓我們之前做的界面就鮮活的呈現(xiàn)了出來(lái)。它可以引導(dǎo),交互,讓玩家更好的去沉浸你的游戲中。所以它和界面的美觀、易用、滿(mǎn)足需求等息息相關(guān)(傳達(dá)狀態(tài)提供反饋,可視化操作的結(jié)果,增強(qiáng)交互的感覺(jué))。
切記要求動(dòng)效的準(zhǔn)確簡(jiǎn)潔。有些看起來(lái)很棒的動(dòng)效會(huì)顯得多余或演示時(shí)間過(guò)長(zhǎng),在玩家進(jìn)行反復(fù)性非常高的操作時(shí)會(huì)適得其反。好的動(dòng)效就是讓你感覺(jué)不到它的存在,但又讓你覺(jué)得很舒服。
?
特效在UI的視覺(jué)表現(xiàn)上也起到了推波助瀾的作用。提高整個(gè)界面的表現(xiàn),烘托氛圍;吸引玩家眼球,增加引導(dǎo)指向,拉進(jìn)玩家互動(dòng)。
表現(xiàn)在UI上的特效一般有控件、圖標(biāo)、升級(jí)、合成、獎(jiǎng)勵(lì)……
呈現(xiàn)的種類(lèi)也大多為光暈、光環(huán)、流線等。
簡(jiǎn)潔為主,不可過(guò)多的絢麗效果堆砌,強(qiáng)調(diào)重點(diǎn)表現(xiàn)。
?
整個(gè)的風(fēng)格流程都是找到與之匹配的風(fēng)格元素進(jìn)行篩選提煉,再以界面構(gòu)成的每個(gè)版塊進(jìn)行細(xì)節(jié)套用。界面設(shè)計(jì)以滿(mǎn)足功能和信息傳達(dá)為首要目標(biāo),避免過(guò)度炫技和渲染。以上是對(duì)科技風(fēng)的一些初步理解,算是拋磚引玉,希望對(duì)大家有所幫助,也歡迎大家一起交流進(jìn)步。
總結(jié)
以上是生活随笔為你收集整理的游戏UI设计干货:怎么让游戏界面更具科技感?的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 腾讯游戏主美:二次元卡通渲染有哪些黑科技
- 下一篇: 做过《战神》《死亡搁浅》的光子动捕专家,