說(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)容（襯托作用）。
?

景深可以帶來(lái)很好的空間感受。但也會(huì)對(duì)信息產(chǎn)生視覺(jué)干擾，一般會(huì)模糊處理。

修飾性的圖形都會(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ì)。

圖標(biāo)的類(lèi)型

2.按鈕是游戲UI中最重要的交互控件。玩家要第一眼就發(fā)現(xiàn)并知道這是一個(gè)可以點(diǎn)擊的按鈕，要讓按鈕看上去像一個(gè)按鈕；無(wú)歧義且圖標(biāo)表達(dá)易懂、文字表達(dá)到位，能清晰地讓玩家知道點(diǎn)擊后會(huì)發(fā)生的事情；按鈕也有主次之分，重要的按鈕要更突出顏色/更顯眼的位置/更強(qiáng)烈的提示...
?

按鈕在游戲中的不同表現(xiàn)形式

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)容。
?

框體在游戲中的不同表現(xiàn)形式

字體多為線條硬朗的無(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)系。
?

無(wú)襯線字體在生活中的運(yù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ì)。
?

字體運(yùn)用在命運(yùn)2中的規(guī)范

字體作為信息內(nèi)容在運(yùn)用中的排版、層級(jí)、顏色等規(guī)范

有了動(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)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。