游戲ui設(shè)計(jì)風(fēng)格的統(tǒng)一（快速搭建指定美術(shù)風(fēng)格的ui）

2025-3-10 資深UI設(shè)計(jì)者設(shè)計(jì)管理與成長(zhǎng)

游戲ui設(shè)計(jì)風(fēng)格的統(tǒng)一（快速搭建指定美術(shù)風(fēng)格的ui）

在游戲設(shè)計(jì)的過程中，美術(shù)團(tuán)隊(duì)首先做的是根據(jù)游戲的類型和世界觀，討論和制定合適的美術(shù)風(fēng)格。當(dāng)確定好大致的方向后，如何保證在游戲設(shè)計(jì)過程中，將整個(gè)項(xiàng)目的風(fēng)格都統(tǒng)一在一個(gè)框架內(nèi)，是在游戲制作過程中常遇到的難題。這次主要探討的是游戲UI設(shè)計(jì)過程中，如何把握美術(shù)風(fēng)格統(tǒng)一的問題。如何統(tǒng)一UI界面風(fēng)格。統(tǒng)一風(fēng)格，最行之有效的就是制定設(shè)計(jì)規(guī)范。設(shè)定好設(shè)計(jì)規(guī)范，并且嚴(yán)格按照規(guī)范執(zhí)行，就能讓UI界面風(fēng)格統(tǒng)一。

UI視覺規(guī)包括

游戲ui設(shè)計(jì)風(fēng)格的統(tǒng)一（快速搭建指定美術(shù)風(fēng)格的ui）

在游戲界面的設(shè)計(jì)過程中，一般會(huì)將色彩控制在3到4個(gè)，如果超過3個(gè)顏色，則盡量在現(xiàn)有色彩中加入黑白灰創(chuàng)造同色系色彩
顏色的分配一般為60%的主色調(diào)，30%的輔助色，10%的強(qiáng)調(diào)色（如果需要引入第四種色彩

最好從輔助色當(dāng)中分出一-部分來）

所以在前期設(shè)定中，可以固定一個(gè)色版，把色相、純度、明度都確定下來。

在規(guī)定界面排版的時(shí)候，一般用偶數(shù)單位，如4或者8的倍數(shù)，能適應(yīng)大部分的手機(jī)屏幕分辨率，便于適配。

很多人可能會(huì)覺得游戲中畫面最重要，字體則是信息傳遞的輔助，這就錯(cuò)了，其實(shí)

內(nèi)容的可讀性永遠(yuǎn)是排在首位的

比如我們?cè)诳磮D標(biāo)的時(shí)候，會(huì)發(fā)現(xiàn)很多圖標(biāo)的辨識(shí)度并不高，但是一旦添加了文字，立馬就能很好的理解功能。

文字還承載著

傳遞信息

的功能，如任務(wù)提示、角色名稱、技能描述等。（好的字體設(shè)計(jì)，形狀和大小都會(huì)直接影響到玩家接收信息的速度，所以我們可以通過合理使用不同字色，字號(hào)和字重以及不同透明度來強(qiáng)調(diào)界面中的重要信息層級(jí)。

界面中文字占比在屏幕中最大，選擇合適的字體對(duì)信息的可讀和易讀有很大的提升(并且也影響視覺風(fēng)格傾向)。
因?yàn)橛螒蛑械淖煮w不僅是文字的呈現(xiàn)，更是游戲畫面和氛圍的重要組成部分，所以在選擇游戲字體時(shí)也要考慮風(fēng)格傾向、用戶畫像等。

在實(shí)際游戲設(shè)計(jì)過程中，需要設(shè)定好字體的色號(hào)，（常規(guī)色，輔助色，突出色），和字體的大小（加粗，不加粗，一般使用4px為單位調(diào)節(jié)）

游戲內(nèi)的字體除了有字色和字體的區(qū)分，在功能上通常有

游戲內(nèi)嵌字體

（指被嵌入到電子游戲中的字體，用于顯示游戲內(nèi)的文本信息，如對(duì)話、提示、菜單等，是塑造游戲世界和提升游戲體驗(yàn)的重要組成部分。游戲名稱、技能名稱、菜單欄等標(biāo)題字，通常選用美術(shù)字，更注重藝術(shù)樣式。而對(duì)于正文字來說，其需要傳達(dá)的信息更多，無需過于強(qiáng)烈的藝術(shù)表現(xiàn)，因此常使用一些經(jīng)典常規(guī)字體，優(yōu)先保證頁(yè)面的辨識(shí)度。
游戲宣傳字體

游戲宣傳字體（通常被用于游戲的標(biāo)題、標(biāo)語、海報(bào)、廣告等各種宣傳材料上）

游戲中主的圖標(biāo)可以根據(jù)風(fēng)格分為擬物化圖標(biāo)和扁平化圖標(biāo)，在功能上可以分為功能性圖標(biāo)（系統(tǒng)入口圖標(biāo)），道具圖標(biāo)（裝備圖標(biāo)，物品圖標(biāo)，貨幣圖標(biāo)），技能圖標(biāo)等

在設(shè)計(jì)過程中，為了確保同一套圖標(biāo)的整體完整性，需要規(guī)定統(tǒng)一的用色規(guī)范，圓角角度，朝向，形狀，線條粗細(xì)，和整體視覺大小等。

游戲中的控件一般包括

按鈕，頁(yè)簽，列表，篩選框，進(jìn)度條，品質(zhì)框

等。

對(duì)于游戲UI而言，好不好用（交互）以及好不好看（視覺）都是需要考慮周全的一件事情，游戲界面有別于一般的UI界面，整個(gè)畫面比較絢麗，而在這些絢麗的畫面上還要讓用戶在第一時(shí)間能夠找到操作按鈕，其實(shí)也是一件很值得研究及學(xué)習(xí)的事情。

總結(jié)來說，

1、當(dāng)界面背景比較絢麗復(fù)雜時(shí)，我們可以通過將按鈕做的有別于背景（但得保證視覺協(xié)調(diào)），來突出按鈕；
2、將功能類似的按鈕放在一起，便于用戶查找和使用，同時(shí)增加強(qiáng)提醒來提示用戶操作；
3、界面占比小的按鈕，就通過對(duì)比色或者純度比較好的按鈕來突出，給界面增加亮點(diǎn)的同時(shí)，提高用戶識(shí)別。

計(jì)切圖輸出的目的是跟下游的程序協(xié)同工作，在工作中對(duì)于圖標(biāo)的命名規(guī)范有良好習(xí)慣非常重要的，規(guī)范的命名方式可以提高設(shè)計(jì)與開發(fā)人員的的效率，既方便美術(shù)人員，又方便開發(fā)人員。

其次切圖輸出應(yīng)該盡可能的降低程序的工作量，避免因切圖輸出而導(dǎo)致的不必要的工作量。

最后輸出的切圖應(yīng)當(dāng)盡可能的壓縮大小，以降低游戲的總大小，提升玩家使用時(shí)的加載速度。
所以切圖輸出應(yīng)當(dāng)做到切圖精準(zhǔn)、便與協(xié)同和壓縮大小。

切圖命名規(guī)范一般使用英文，下劃線,數(shù)字，每個(gè)單詞首寫字母為大寫(禁止使用空格,

中文，括號(hào)等其他命名，且不能重復(fù))，命名方式一般分兩類, 一種是公用資源，另外一

種是系統(tǒng)模塊獨(dú)有的資源。

最后，推動(dòng)規(guī)范落地，才是制作規(guī)范的目的。在推行過程中，需要先和團(tuán)隊(duì)內(nèi)進(jìn)行好溝通，維護(hù)好規(guī)范的落地，后期也需要不斷對(duì)規(guī)范進(jìn)行迭代和完善。制定規(guī)范的主要還是為了產(chǎn)品更加統(tǒng)一，提高開發(fā)效率，更好地為游戲服務(wù)。

作者：布加蔥
鏈接：https://www.zcool.com.cn/article/ZMTYxMzIxNg==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.sdgs6788.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

« UI設(shè)計(jì)死摳的細(xì)節(jié) 色盲不迷茫：股票UI設(shè)計(jì)突圍之路 »

日歷

鏈接

個(gè)人資料

藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.sdgs6788.com

存檔