UI設(shè)計不得不知的移動端UI尺寸適配指南 (更新至iPhone15)

2024/1/19 18:07:29來源：互聯(lián)網(wǎng)熱度：

眾所周知，移動端APP UI設(shè)計都會以蘋果的某個機(jī)型作為基準(zhǔn)尺寸。但蘋果每年都在發(fā)布新品，最近幾年機(jī)型尺寸又較以往不同，而你是否還在用375作為基準(zhǔn)尺寸呢？

375 雖然已經(jīng)陪伴我們很多年，但在 iPhone 12 推出后，375 被正式下放為最小尺寸，之前的 320 正式下線。所以如今的移動端設(shè)計基準(zhǔn)尺寸應(yīng)該從現(xiàn)有的 390 和 393 之間進(jìn)行選擇，推薦 390 的原因是他可以被偶數(shù)整除，同時可以利用 Figma 把設(shè)計稿做成彈性布局，從而隨時“無痛”的在 390 和 393 之間做切換。

下面簡單講述下UI設(shè)計師要知道的移動端UI尺寸適配指南 (已更新至iPhone 15)以及不同屏幕尺寸之間的關(guān)系。

1、屏幕尺寸
屏幕尺寸是指屏幕的對角線長度。

2、邏輯分辨率和物理分辨率
在移動設(shè)備上，不同設(shè)備具有不同的屏幕密度（即每英寸的像素數(shù)目），這導(dǎo)致相同的圖形在不同設(shè)備上可能顯得過大或過小。為了解決這個問題，引入了邏輯分辨率的概念。以密度無關(guān)像素（Density Independent Pixels，dp或dip）為單位來表示在不同屏幕密度下顯示的實際像素數(shù)。
在設(shè)計應(yīng)用程序時使用邏輯分辨率，應(yīng)用程序會根據(jù)設(shè)備的實際分辨率和密度進(jìn)行自適應(yīng)調(diào)整，以確保元素在視覺上具有相似的大小，而不受設(shè)備物理分辨率的影響。