金沙澳门官网jin5888:八一八那些px,切图要求

2. pt (磅)

pt 即
point,有两个含义:一是印刷行业常用单位,是一个标准长度单位,绝对大小,1pt
= 1/72 英寸 = 0.35mm;二是 iOS 开发用的基本单位,当设计师以 1
倍尺寸进行设计 (375pt × 667pt) 并给出标注稿时,开发人员无需除以 2
便可直接使用。

公式二:dpi=ppi

三、ppi计算方法

一、常用单位

公式五:当文字尺寸是“正常”时1sp=1dp,而当文字尺寸是“大”或“超大”时,1sp>1dp。

金沙澳门官网jin5888:八一八那些px,切图要求。以小米2s为例,该屏幕分辨率为720px*1280px,4.3英寸。则点密度为 √ (720^2
+1280^2) /4.3 = 342ppi。

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 所示。


金沙澳门官网jin5888:八一八那些px,切图要求。dp和sp都是安卓的开发单位,dp是长度单位,sp是字体单位。sp与dp类似,但是可以根据用户的字体大小首选项进行缩放。Android系统允许用户自定义文字尺寸大小(小、正常、大、超大等等),

金沙澳门官网jin5888:八一八那些px,切图要求。总结:由于做设计时以xhdpi为模板,xhdpi条件下,1dp=2px。若新建画布时,将画布分辨率设为144ppi,则1pt=2px=1dp。此时,即可将pt等同于dp。标注长度的时候,将长度像素除以2即为dp值。

1. dp = (dpi / 160) px

金沙澳门官网jin5888:八一八那些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)
是开发像素密度,而 金沙澳门官网jin5888:八一八那些px,切图要求。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

dpi最初用于衡量打印物上每英寸的点数密度。DPI值越小图片越不精细。当DPI的概念用在计算机屏幕上时,就应称之为ppi。同理:
PPI就是计算机屏幕上每英寸可以显示的像素点的数量。因此,在电子屏幕显示中提到的ppi和dpi是一样的,可认为

dp: dip,Density-independent pixel,
是安卓开发用的长度单位,1dp表示在屏幕像素点密度为160ppi时1px长度

常用单位

ppi: pixel per inch,每英寸像素数,该值越高,则屏幕越细腻

一般情况下可认为sp=dp。

1. px (像素)

px 即
pixel,像素点,电子屏幕上组成图像的最基本单位,在描述屏幕分辨率时也会使用该单位。1px
表示一个像素,例如 iPhone 8 的尺寸为 750px ×
1334px,表示在该手机屏幕上,水平方向每行有 750 个像素点,垂直方向每列有
1334 个像素点。

先介绍下各自的定义:

dpi最初用于衡量打印物上每英寸的点数密度。DPI值越小图片越不精细。当DPI的概念用在计算机屏幕上时,就应称之为ppi。同理:
PPI就是计算机屏幕上每英寸可以显示的像素点的数量。因此,在电子屏幕显示中提到的ppi和dpi是一样的,可认为

在移动端 UI 设计中,经常会用到的单位有 4 种:px、pt、dp 和
sp,很多人分辨不清这几种单位及其换算关系,以及 iOS 和 Android
的切图要求,我在这里做下简单的介绍,希望大家读完后能有所收获(如有错误,欢迎纠正)。

五、dp和sp

公式三: ppi= 屏幕对角线上的像素点数/对角线长度 = √ (屏幕横向像素点^2 +
屏幕纵向像素点^2)/对角线长度

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

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


公式一: 1pt=  (DPI / 72) px

公式二:dpi=ppi


pt: point,点,印刷行业常用单位,等于1/72英寸

以下是换算关系:

3. dp (也称 dip)

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

三、ppi计算方法

以WVGA屏为例,该屏幕为480px*800px,按3.8寸屏算,点密度 √ (480^2 +
800^2) / 3.8 = 245,约等于240,对应于hdpi屏幕,所以该屏幕1dp=1.5px

三、dp 与 px 换算

Android 开发

dp为安卓开发时的长度单位,根据不同的屏幕分辨率,与px有不同的对应关系。

公式一: 1pt= (DPI / 72) px

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

若有小数,四舍五入即可。

PS:在photoshop cc中切图时,可直接在.png
图片图层名称前加上200%获得2倍大小的图,其他比例的切图以此类推。输出的两倍图不模糊的前提是,该图是photoshop中用形状工具画出来的未被栅格化的图形,而不是已被栅格化的图层或外部导入的图片。

五、dp和sp

相关文章