UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適配指南 (更新至iPhone15)
眾所周知,移動(dòng)端APP UI設(shè)計(jì)都會(huì)以蘋果的某個(gè)機(jī)型作為基準(zhǔn)尺寸。但蘋果每年都在發(fā)布新品,最近幾年機(jī)型尺寸又較以往不同,而你是否還在用375作為基準(zhǔn)尺寸呢?
375 雖然已經(jīng)陪伴我們很多年,但在 iPhone 12 推出后,375 被正式下放為最小尺寸,之前的 320 正式下線。所以如今的移動(dòng)端設(shè)計(jì)基準(zhǔn)尺寸應(yīng)該從現(xiàn)有的 390 和 393 之間進(jìn)行選擇,推薦 390 的原因是他可以被偶數(shù)整除,同時(shí)可以利用 Figma 把設(shè)計(jì)稿做成彈性布局,從而隨時(shí)“無痛”的在 390 和 393 之間做切換。
下面簡(jiǎn)單講述下UI設(shè)計(jì)師要知道的移動(dòng)端UI尺寸適配指南 (已更新至iPhone 15)以及不同屏幕尺寸之間的關(guān)系。
1、屏幕尺寸
屏幕尺寸是指屏幕的對(duì)角線長(zhǎng)度。
2、邏輯分辨率和物理分辨率
在移動(dòng)設(shè)備上,不同設(shè)備具有不同的屏幕密度(即每英寸的像素?cái)?shù)目),這導(dǎo)致相同的圖形在不同設(shè)備上可能顯得過大或過小。為了解決這個(gè)問題,引入了邏輯分辨率的概念。以密度無關(guān)像素(Density Independent Pixels,dp或dip)為單位來表示在不同屏幕密度下顯示的實(shí)際像素?cái)?shù)。
在設(shè)計(jì)應(yīng)用程序時(shí)使用邏輯分辨率,應(yīng)用程序會(huì)根據(jù)設(shè)備的實(shí)際分辨率和密度進(jìn)行自適應(yīng)調(diào)整,以確保元素在視覺上具有相似的大小,而不受設(shè)備物理分辨率的影響。
3、縮放因子
因?yàn)檫壿嫹直媛屎臀锢矸直媛蚀嬖谥欢ǖ谋壤P(guān)系,這種比例的關(guān)系稱為縮放因子。其對(duì)應(yīng)關(guān)系為:1pt = scale * px
3、像素密度PPI
像素密度PPI(Pixel Per Inch)是指每英寸上容納的像素?cái)?shù)量。
以上就是今天要分享的內(nèi)容。本篇文章是因?yàn)榍岸螘r(shí)間看了草帽老師講iPhone分辨率的視頻,正好iPhone15也發(fā)布了,所以就想整理了也分享給大家,希望大家喜歡!
本文地址:http://pkvc.cn/tutorial/wd4214.html
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏