iOS、Android 开发单位换算及 UI 切图要求

常用单位

在走端 UI 设计被,经常会用到的单位发出 4 种:px、pt、dp 和
sp,很多人口识别不根本这几乎栽单位会同换算关系,以及 iOS 和 Android
的切图要求,我当此处开下简单的牵线,希望大家诵读毕后能够拥有收获(如产生错,欢迎纠正)。


如出一辙、常用单位

1. px (像素)

px 即
pixel,像素点,电子屏幕上结缘图像的极端核心单位,在描述屏幕分辨率时为会见使该单位。1px
代表一个像素,例如 iPhone 8 之尺码为 750px ×
1334px,表示以拖欠手机屏幕及,水平方向每行有 750 单如素点,垂直方向每列有
1334 只像素点。

2. pt (磅)

pt 即
point,有星星点点独意思:一凡是印刷行业常用单位,是一个业内尺寸单位,绝对大小,1pt
= 1/72 英寸 = 0.35mm;二凡是 iOS 开发用之中坚单位,当设计师为 1
倍尺寸进行设计 (375pt × 667pt) 并被出标注稿时,开发人员无需除以 2
便可径直以。

3. dp (也称 dip)

dp 是安卓开发用底尺度单位,在 dpi (屏幕像从密度,即每英寸包含的比如素点)
为 160 的屏幕为达,1dp = 1px。为了简单起见,Android 把屏幕密度分为了 5
种:mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi,下文会详细介绍该换算关系。

4. sp (可缩放独立像素)

当安卓系统里,sp 与 dp 类似,不同的凡 sp
可以因用户之字体大小首选项进行缩放,而 dp 则不会见。 尽量使用 dp
作为空间尺寸单位,sp
作为文字相关大小单位,例如:新闻类和短信类等十分篇幅文本,推荐下 sp
为单位。


二、pt 与 px 换算

iOS 开发

1. pt = (ppi / dpi) px

于 iOS 开发被,不同机型的 iPhone 设备亟需利用不同倍率的切图,下表为各国
iPhone 机型显示屏参数对比:

机型 X 8+/7+/6+ 8/7/6/6s 5/5s 4/4s
屏幕尺寸(inch) 5.8 5.5 4.7 4 3.5
物理尺寸(px) 1125 × 2436 1080 × 1920 750 × 1334 640 × 1136 640 × 960
设计尺寸(px) 1125 × 2436 1242 × 2208 750 × 1334 640 × 1136 640 × 960
开发尺寸(pt) 375 × 812 414 × 736 375 × 667 320 × 568 320 × 480
ppi 458 401 326 326 326
dpi 163 154 163 163 163
倍率 @3x @3x @2x @2x @2x

此处又简单了解下两只概念,ppi 和 dpi。

ppi (iOS):即 pixel per
inch,屏幕像从密度,表示每英寸所蕴涵的如素点,该值越强,屏幕越来越细致。

dpi (iOS) :开发像从密度,表示每英寸所涵盖的开销像素点。

在 iOS 开发中,规定为 ppi = 163,dpi = 163 作为支付极,

当 ppi = 163,dpi = 163 时,则 1pt = 1px;
当 ppi = 326,dpi = 163 时,则 1pt = 2px;
当 ppi = 401,dpi = 154 时,则 1pt = 2.6px ≈ 3px。
(为什么 iPhone 8+/7+/6+ 的付出条件是154?可能只要咨询问苹果了…)

举一反三,得出换算公式一样:

pt = (ppi / dpi) px

万一有小数,四放弃五适合即可。

2. iOS 切图要求

图 2-1

当 iOS 开发被,目前单独待 @2x 和 @3x 两种切图,所以导出 2 倍和 3 倍之
png
图片即可。导出前注意检查切图是否在半像素、毛边齐名景象,保证对齐像素,这样才能够行避免上线后页面及之
icon 出现虚边的题材,提高细节质量。

另外上某些:从整体支出尺寸看,iPhone 8 是 375 × 667 pt (@2x),而
iPhone X 是 375 × 812 pt (@3x),同样的幅度,一个因此 @2x 图,一个因此 @3x
图,iPhone X 表现有了还胜似之清晰度,如图 2-1 所示。


三、dp 与 px 换算

Android 开发

1. dp = (dpi / 160) px

在 Android 开发中,因为机型参差不齐,需要用屏幕密度来分别设计。

屏幕密度 mdpi hdpi xhdpi xxhpdi xxxhdpi
代表设计像素 320 × 480 px 480 × 800 px 720 × 1280 px 1080 × 1920 px 1440 × 2256 px
dpi 160 240 320 480 640
基准dpi 160 160 160 160 160
倍率 @1x @1.5x @2x @3x @4x

专注,这里的 dpi (Android) 和上文的 dpi (iOS) 是不同之定义,dpi (iOS)
是付出像从密度,而 dpi (Android) 即 dot per
inch,表示屏幕像从密度
,类似 iOS 开发里的 ppi。

Android 中,规定为 dpi = 160 为开发极,

当 dpi = 160,基准dpi = 160,1dp = 1px;
当 dpi = 240,基准dpi = 160,1dp = 1.5px;
当 dpi = 320,基准dpi = 160,1dp = 2px。

举一反三,得出换算公式二:

dp = (dpi / 160) px

2. Android 切图要求

图 3-1

在筹划图标时,对于 5 种植主流的屏幕像素密度
(mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi) 应遵循 2:3:4:6:8
的比重进行缩放,如图 3-1 所示。

诸如,一个起先图标的尺码为 48 × 48 dp,这意味在 mdpi
的屏幕上其实际尺寸应为 48 × 48 px;在 hdpi 的屏幕上那个实际尺寸是 mdpi 的
1.5 倍 (72 × 72 px);在 xhdpi 的屏幕上其实际尺寸是 mdpi 的 2 倍 (96 × 96
px),依此类推。

点九图

以一些况行下,还索要提供相同种植新鲜的切图:点九图 (上图所示)。点九图是
Android 开发中因故到之如出一辙种特别格式的图片,文件称以 “.9.png” 结尾。

这种图片能告诉程序,图像哪部分方可为拉升,哪有不克吃拉升需要保障原有比列。运用点九图可以保证图片在非模糊变形的前提下就打适应,比如对话框背景图片就会因此到点九图。


以上是全部内容,感谢你的开卷!
End

相关文章