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

2025-3-10    資深UI設(shè)計者 設(shè)計管理與成長

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

 
  • 在游戲設(shè)計的過程中，美術(shù)團(tuán)隊(duì)首先做的是根據(jù)游戲的類型和世界觀，討論和制定合適的美術(shù)風(fēng)格。當(dāng)確定好大致的方向后，如何保證在游戲設(shè)計過程中，將整個項(xiàng)目的風(fēng)格都統(tǒng)一在一個框架內(nèi)，是在游戲制作過程中常遇到的難題。這次主要探討的是游戲UI設(shè)計過程中，如何把握美術(shù)風(fēng)格統(tǒng)一的問題。如何統(tǒng)一UI界面風(fēng)格。統(tǒng)一風(fēng)格，最行之有效的就是 制定設(shè)計規(guī)范。設(shè)定好設(shè)計規(guī)范，并且嚴(yán)格按照規(guī)范執(zhí)行，就能讓UI界面風(fēng)格統(tǒng)一。
 
 UI視覺規(guī)包括
游戲ui設(shè)計風(fēng)格的統(tǒng)一（快速搭建指定美術(shù)風(fēng)格的ui）
 
 
游戲ui設(shè)計風(fēng)格的統(tǒng)一（快速搭建指定美術(shù)風(fēng)格的ui）
 
 
  •  
    在游戲界面的設(shè)計過程中，一般會將色彩控制在3到4個，如果超過3個顏色，則盡量在現(xiàn)有色彩中加入黑白灰創(chuàng)造同色系色彩
  •  
    顏色的分配一般為60%的主色調(diào)，30%的輔助色，10%的強(qiáng)調(diào)色（如果需要引入第四種色彩
最好從輔助色當(dāng)中分出一-部分來）
  •  
    所以在前期設(shè)定中，可以固定一個色版，把色相、純度、明度都確定下來。
游戲ui設(shè)計風(fēng)格的統(tǒng)一（快速搭建指定美術(shù)風(fēng)格的ui）
 
 
游戲ui設(shè)計風(fēng)格的統(tǒng)一（快速搭建指定美術(shù)風(fēng)格的ui）
 
 
  •  
    在規(guī)定界面排版的時候，一般用偶數(shù)單位，如4或者8的倍數(shù)，能適應(yīng)大部分的手機(jī)屏幕分辨率，便于適配。
游戲ui設(shè)計風(fēng)格的統(tǒng)一（快速搭建指定美術(shù)風(fēng)格的ui）
 
 
游戲ui設(shè)計風(fēng)格的統(tǒng)一（快速搭建指定美術(shù)風(fēng)格的ui）
 
 
  •  
    很多人可能會覺得游戲中畫面最重要，字體則是信息傳遞的輔助，這就錯了，其實(shí)
    內(nèi)容的可讀性永遠(yuǎn)是排在首位的
    比如我們在看圖標(biāo)的時候，會發(fā)現(xiàn)很多圖標(biāo)的辨識度并不高，但是一旦添加了文字，立馬就能很好的理解功能。
  •  
    文字還承載著
    傳遞信息
    的功能，如任務(wù)提示、角色名稱、技能描述等。（好的字體設(shè)計，形狀和大小都會直接影響到玩家接收信息的速度，所以我們可以通過合理使用不同字色，字號和字重以及不同透明度來強(qiáng)調(diào)界面中的重要信息層級。
  1.  
    界面中文字占比在屏幕中最大，選擇合適的字體對信息的可讀和易讀有很大的提升(并且也影響視覺風(fēng)格傾向)。
  2.  
    因?yàn)橛螒蛑械淖煮w不僅是文字的呈現(xiàn)，更是游戲畫面和氛圍的重要組成部分，所以在選擇游戲字體時也要考慮風(fēng)格傾向、用戶畫像等。
在實(shí)際游戲設(shè)計過程中，需要設(shè)定好字體的色號，（常規(guī)色，輔助色，突出色），和字體的大?。哟郑患哟?，一般使用4px為單位調(diào)節(jié)）
游戲內(nèi)的字體除了有字色和字體的區(qū)分，在功能上通常有
  •  
    游戲內(nèi)嵌字體
    （指被嵌入到電子游戲中的字體，用于顯示游戲內(nèi)的文本信息，如對話、提示、菜單等，是塑造游戲世界和提升游戲體驗(yàn)的重要組成部分。游戲名稱、技能名稱、菜單欄等標(biāo)題字，通常選用美術(shù)字，更注重藝術(shù)樣式。而對于正文字來說，其需要傳達(dá)的信息更多，無需過于強(qiáng)烈的藝術(shù)表現(xiàn)，因此常使用一些經(jīng)典常規(guī)字體，優(yōu)先保證頁面的辨識度。
  •  
    游戲宣傳字體
    游戲宣傳字體（通常被用于游戲的標(biāo)題、標(biāo)語、海報、廣告等各種宣傳材料上）
 
游戲ui設(shè)計風(fēng)格的統(tǒng)一（快速搭建指定美術(shù)風(fēng)格的ui）
 
 
 
游戲ui設(shè)計風(fēng)格的統(tǒng)一（快速搭建指定美術(shù)風(fēng)格的ui）
 
 
  •  
    游戲中主的圖標(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è)計過程中，為了確保同一套圖標(biāo)的整體完整性，需要規(guī)定統(tǒng)一的用色規(guī)范，圓角角度，朝向，形狀，線條粗細(xì)，和整體視覺大小等。
 
游戲ui設(shè)計風(fēng)格的統(tǒng)一（快速搭建指定美術(shù)風(fēng)格的ui）
 
 
 
 
游戲ui設(shè)計風(fēng)格的統(tǒng)一（快速搭建指定美術(shù)風(fēng)格的ui）
 
 
  •  
    游戲中的控件一般包括
    按鈕，頁簽，列表，篩選框，進(jìn)度條，品質(zhì)框
    等。
對于游戲UI而言，好不好用（交互）以及好不好看（視覺）都是需要考慮周全的一件事情，游戲界面有別于一般的UI界面，整個畫面比較絢麗，而在這些絢麗的畫面上還要讓用戶在第一時間能夠找到操作按鈕，其實(shí)也是一件很值得研究及學(xué)習(xí)的事情。
總結(jié)來說，
  •  
    1、當(dāng)界面背景比較絢麗復(fù)雜時，我們可以通過將按鈕做的有別于背景（但得保證視覺協(xié)調(diào)），來突出按鈕；
  •  
    2、將功能類似的按鈕放在一起，便于用戶查找和使用，同時增加強(qiáng)提醒來提示用戶操作；
  •  
    3、界面占比小的按鈕，就通過對比色或者純度比較好的按鈕來突出，給界面增加亮點(diǎn)的同時，提高用戶識別。
游戲ui設(shè)計風(fēng)格的統(tǒng)一（快速搭建指定美術(shù)風(fēng)格的ui）
 
 
游戲ui設(shè)計風(fēng)格的統(tǒng)一（快速搭建指定美術(shù)風(fēng)格的ui）
 
 
游戲ui設(shè)計風(fēng)格的統(tǒng)一（快速搭建指定美術(shù)風(fēng)格的ui）
 
 
游戲ui設(shè)計風(fēng)格的統(tǒng)一（快速搭建指定美術(shù)風(fēng)格的ui）
 
 
  •  
    計切圖輸出的目的是跟下游的程序協(xié)同工作，在工作中對于圖標(biāo)的命名規(guī)范有良好習(xí)慣非常重要的，規(guī)范的命名方式可以提高設(shè)計與開發(fā)人員的的效率，既方便美術(shù)人員，又方便開發(fā)人員。
  •  
    其次切圖輸出應(yīng)該盡可能的降低程序的工作量，避免因切圖輸出而導(dǎo)致的不必要的工作量。
  •  
    最后輸出的切圖應(yīng)當(dāng)盡可能的壓縮大小，以降低游戲的總大小，提升玩家使用時的加載速度。
  •  
    所以切圖輸出應(yīng)當(dāng)做到切圖精準(zhǔn)、便與協(xié)同和壓縮大小。
 
切圖命名規(guī)范一般使用英文，下劃線,數(shù)字，每個單詞首寫字母為大寫(禁止使用空格,
中文，括號等其他命名，且不能重復(fù))，命名方式一般分兩類, 一種是公用資源，另外一
種是系統(tǒng)模塊獨(dú)有的資源。
游戲ui設(shè)計風(fēng)格的統(tǒng)一（快速搭建指定美術(shù)風(fēng)格的ui）
 
 
游戲ui設(shè)計風(fēng)格的統(tǒng)一（快速搭建指定美術(shù)風(fēng)格的ui）
 
 
最后，推動規(guī)范落地，才是制作規(guī)范的目的。在推行過程中，需要先和團(tuán)隊(duì)內(nèi)進(jìn)行好溝通，維護(hù)好規(guī)范的落地，后期也需要不斷對規(guī)范進(jìn)行迭代和完善。制定規(guī)范的主要還是為了產(chǎn)品更加統(tǒng)一，提高開發(fā)效率，更好地為游戲服務(wù)。
 

 

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

 

 

 

日歷

鏈接

個人資料

存檔