視覺設計 ? UI設計師要知道的:移動端UI尺寸適配指南 (已更新至iPhone 15)

UI設計師要知道的:移動端UI尺寸適配指南 (已更新至iPhone 15)

發表于: 視覺設計. 評論
Sponsor

眾所周知,移動端APP UI設計都會以蘋果的某個機型作為基準尺寸。但蘋果每年都在發布新品,最近幾年機型尺寸又較以往不同,而你是否還在用375作為基準尺寸呢?

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

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

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

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

3、縮放因子
因為邏輯分辨率和物理分辨率存在著一定的比例關系,這種比例的關系稱為縮放因子。其對應關系為:1pt = scale * px

3、像素密度PPI
像素密度PPI(Pixel Per Inch)是指每英寸上容納的像素數量。

以上就是今天要分享的內容。本篇文章是因為前段時間看了草帽老師講iPhone分辨率的視頻,正好iPhone15也發布了,所以就想整理了也分享給大家,希望大家喜歡!

來源:XUEMEI的設計分享站

推薦:查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流:為設計新人提供的設計交流群,請加入UI設計交流群,分享經驗、接單、求職、聊設計。
贊助商鏈接
贊助商鏈接
設計達人微信交流社區:shejidaren888
喜歡這篇文章嗎?歡迎分享到你的微博、QQ群,并關注我們的微博,謝謝支持。
版權:除非注明,本站文章均為原創文章,轉載請聯系我們授權,否則禁止轉載。

{ 發表評論 }