前言

本文會介紹一些關(guān)于UI適配的基礎(chǔ)概念，并且統(tǒng)計了市面上常見的設(shè)備的分辨率的情況。同時通過拆解目前市面上較為成功的兩款休閑游戲Royal Match和Monopoly GO(兩款均為近期游戲付費榜前幾的游戲)，大致推斷出他們的適配策略，以供學(xué)習(xí)和參考。

基礎(chǔ)概念

設(shè)計分辨率：設(shè)計分辨率是指在游戲開發(fā)中用來制作游戲資源（如圖形、UI元素等）的基準(zhǔn)分辨率。設(shè)計分辨率通常是一個固定值，游戲的所有資源都是基于這個分辨率進行創(chuàng)建和設(shè)計的。設(shè)計分辨率的選擇對游戲的視覺效果和用戶體驗至關(guān)重要。

參考分辨率：參考分辨率是指在Canvas Scaler組件中設(shè)置的用于設(shè)計UI的目標(biāo)分辨率。它代表了游戲UI在這個分辨率下的理想顯示效果。Canvas Scaler會根據(jù)實際運行時的屏幕分辨率和參考分辨率的比例來縮放UI元素，以便在不同分辨率下盡可能保持一致的UI布局和外觀。

高度適配：在高度適配時，游戲的UI元素和場景內(nèi)容會根據(jù)屏幕的垂直高度進行調(diào)整。這意味著無論屏幕的寬高比如何，游戲的內(nèi)容始終會填充整個屏幕的垂直空間，而水平方向可能會存在一些留白或被裁剪。

寬度適配：在寬度適配時，游戲的UI元素和場景內(nèi)容會根據(jù)屏幕的水平寬度進行調(diào)整。這意味著無論屏幕的寬高比如何，游戲的內(nèi)容始終會填充整個屏幕的水平空間，而垂直方向可能會存在一些留白或被裁剪。

Unity中相關(guān)設(shè)置

Canvas下的Canvas Scaler可以修改Reference Resolution（參考分辨率）。另外可以將Screen Match Mode設(shè)置為Match Width Or Height。代表可以進行寬度適配或者高度適配。寬度適配的話，將Match值設(shè)置為0，高度適配則是設(shè)置為1.

在Game欄可以設(shè)置實際顯示的分辨率大小，可以通過該設(shè)置模擬各種分辨率的設(shè)備。

常見屏幕尺寸

下面是收集了市面上一些常見的設(shè)備以及極端長寬比設(shè)備的屏幕大小

iphoneX及以后的劉海屏設(shè)備，長寬比均為19.5比9(適配換算后為1560：720)。最長的設(shè)備是目前主流的安卓設(shè)備,長寬比是20:9(1600：720)。平板方面最寬的設(shè)備為4:3（1280：960）。

各種分辨率下的顯示區(qū)域?qū)Ρ?/h2>

下圖繪制了常見機型的分辨率顯示的區(qū)域。白色區(qū)域的分辨率為720*1280。紅色的分辨率為720*1600，灰色區(qū)域的分辨率為720*1560，綠色區(qū)域的分辨率為960*1280。同時為了方便起見后文中均以720*1280(720P)為設(shè)計分辨率進行討論和拆解。實際在開發(fā)過程中，可以根據(jù)項目的要求，選擇更高或者更低的設(shè)計分辨率進行設(shè)計。比如畫面要求高，并且面對高端設(shè)備的用戶，可以采用1080*1920（1080P）的設(shè)計分辨率出圖。

熱門游戲的適配策略拆解

本次拆解，主要是參考了Royal Match和Monopoly GO!兩款游戲，兩款游戲分別在2024年1月全球熱門移動游戲收入榜的2,3名。Royal Match的首次上線時間為2021年，Monopoly Go則為2023年，并且兩款游戲均保持著較高的更新頻率。通過拆解這兩款游戲，可以大致了解當(dāng)前歐美休閑廠商在UI適配上的策略，值得學(xué)習(xí)和借鑒。

RoyalMatch

UI部分

下面是對局部分的UI，左側(cè)為720*1280右側(cè)為720*1600。roy match的ui元素，都是在720*1280的分辨率下設(shè)計的。并且盡可能地充滿整個屏幕。然后在屏幕高于1280的情況下，寬度適配，直接拉長背景。頂部和底部的UI都會貼邊擺放。同時頂部UI會為劉海（挖孔）預(yù)留部分空間。

下圖中左側(cè)為720*1280,右側(cè)為720*1560（iphonexs）。

UI元素同樣是寬度適配。底部專門為iphone的Home Indicator保留了35個像素。

頂部UI則是保留了52個像素。

下圖中左側(cè)為iphone8p的截圖，右側(cè)為ipad mini6的截圖，Ipad的適配則比較特別，經(jīng)過縮放對比后發(fā)現(xiàn)，UI所在區(qū)域的大小為720*1496。底部為Home 導(dǎo)航額外預(yù)留了一塊空間。底部UI的背景通過九宮格拉伸，寬度和高度均進行了縮放。但是按鈕部分，還是按照720的寬度進行排布。并沒有等間距擺放充滿整個屏幕的寬度。由于ipad沒有劉海，頂部UI直接貼頂邊，同樣也是在720的寬度內(nèi)擺放.

背景圖部分

下面左側(cè)是720*1280（iphone 8p）的游戲內(nèi)截圖，右側(cè)為720*1600的截圖。通過縮放對比發(fā)現(xiàn)，右側(cè)圖片是左側(cè)圖直接等比縮放得到

下面的圖則是ipad的背景縮放后與iphone 8p的圖縮放后的對比?？梢钥吹絠pad的背景是要比720要更寬一些

最后通過解包royal match的資源后，找到圖集中的實際背景圖

實際的大小為1736*2894，換算后的比例為768*1280

monopoly go!

UI部分

下圖中左側(cè)為720*1280，右側(cè)為720*1560（iphonexs）,同樣是采用了寬度適配的方式。頂部欄在布局的時候為劉海屏留出了47個像素

底部為Home Indicator保留了52個像素。同樣是采用UI拉九宮格的方式填充空白部分

下面第一張圖中左側(cè)是840*1280（ipad mini）右側(cè)是720*1280（iphone 8p）。pad使用了高度適配，寬度拉伸的方式。

頂部和底部UI貼邊擺放。同時底部也為home導(dǎo)航額外預(yù)留了一塊區(qū)域，整體UI有所上移。頂部欄使用了九宮的方式左右拉伸了。底部背景縮放后填充整個空白區(qū)域。不同于RoyalMatch只在720的寬度內(nèi)擺放按鈕。大富翁go的頂部和底部的按鈕，都按照縮放后的寬度，在840的區(qū)域內(nèi)擺放。底部UI元素均勻擺放，頂部UI貼邊擺放。

背景圖部分

?從左到右的分辨率分別是840*1280(ipad mini6),720*1280(iphone8),720*1560(iphonexs),720*1600(iqoo neo 8pro)

對比之后，發(fā)現(xiàn)大富翁go應(yīng)該是只用了一張720*1560的背景圖。在pad上直接等比縮放。高度大于1560的設(shè)備，在劉海部分放置了一個黑條。Monopoly Go的標(biāo)題則是單獨切圖，按照上面的UI適配規(guī)則放置在背景圖上。

實際拆包后發(fā)現(xiàn)，使用的圖片大小為487*1024.換算后為720*1513。通過底部UI填充的方式覆蓋住1560的高度

總結(jié)

對比RoyalMatch和大富翁go?？偨Y(jié)出以下幾個共同點和不同的地方。在后續(xù)的UI設(shè)計中，可以參考他們的共同的部分進行資源的制作。不同部分的處理方式，需要與美術(shù)和產(chǎn)品溝通后，確定最后采用的策略。

共同點：

1.會根據(jù)設(shè)備的不同額外為劉海屏和Home導(dǎo)航預(yù)留部分空白區(qū)域，不會在該區(qū)域內(nèi)擺放可以操作的UI。

2.頂部和底部的UI背景都會設(shè)計成可以進行九宮拉伸的背景。并且根據(jù)設(shè)備的不同填充空白區(qū)域。

3.UI的安全區(qū)域均為720*1280，確保了目前市面上最小設(shè)備能夠完整展示UI。

4.在手機上，均采用寬度適配，高度拉伸的方式進行UI的擺放

不同點：

1.兩個游戲為劉海屏和Home導(dǎo)航預(yù)留空白部分的像素不同。

2.在遇到比1560還要更長的設(shè)備時，royal match采用的是縮放背景圖，填充空白區(qū)域的策略。大富翁go則是在頂部放置一個黑條覆蓋空白區(qū)域

3.在ipad上大富翁go依舊是按照720*1280的分辨率，通過高度適配寬度拉伸的方式擺放UI。Royal match的設(shè)計分辨率則產(chǎn)生了改變，猜測是在720*1496的分辨率下進行高度適配。

4.大富翁go的全屏背景只使用了一張720*1560的圖，然后根據(jù)設(shè)別不同進行等比例縮放。Royal match則是使用768*1280的背景，然后再進行等比縮放。

5.Royal Match在橫向擺放UI時，僅在720的寬度內(nèi)進行擺放，并不考慮寬度大于720的情況。大富翁go在寬度大于720時，則是會根據(jù)設(shè)備的寬度均勻（或者貼邊）擺放UI。

創(chuàng)作不易，如果覺得這篇文章對你有所幫助，可以動動小手，點個贊哈，?( ′???` )比心文章來源地址http://www.zghlxwxcb.cn/news/detail-839704.html

到了這里，關(guān)于Unity UI適配規(guī)則和對熱門游戲適配策略的拆解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！