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