苹果切图换算android,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 换算

149fbb800380bd6cf961483250f1220c.png

iOS 开发

1. pt = (ppi / dpi) px

在 iOS 开发中,不同机型的 iPhone 设备需要用到不同倍率的切图,下表格为各 iPhone 机型显示屏参数对比:

5027a3c81e3b4005ef49ee9ad4ca8865.png

这里再简单了解下两个概念,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 切图要求

1dfd32c9fd26d5a642c64082ae09cc15.png

在 iOS 开发中,目前只需要 @2x 和 @3x 两种切图,所以导出 2 倍和 3 倍的 png

图片即可。导出前注意检查切图是否存在半像素、毛边等情况,保证对齐像素,这样才能有效避免上线后页面上的 icon 出现虚边的问题,提高细节质量。

另外补充一点:从整体开发尺寸看,iPhone 8 是 375 × 667 pt (@2x),而 iPhone X 是 375 × 812 pt

(@3x),同样的宽度,一个用 @2x 图,一个用 @3x 图,iPhone X 表现出了更高的清晰度。

三、dp 与 px 换算

c980ba1af7a0be7013ecd287aff67f88.png

Android 开发

1. dp = (dpi / 160) px

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

cf69e22f06380c91489faab1eb85e791.png

注意,这里的 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 切图要求

4239aef2d57fb45a5453e586a78529bf.png

在设计图标时,对于 5 种主流的屏幕像素密度 (mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi) 应按照 2:3:4:6:8

的比例进行缩放,如上图所示。

例如,一个启动图标的尺寸为 48 × 48 dp,这表示在 mdpi 的屏幕上其实际尺寸应为 48 × 48 px;在 hdpi 的屏幕上其实际大小是

mdpi 的 1.5 倍 (72 × 72 px);在 xhdpi 的屏幕上其实际大小是 mdpi 的 2 倍 (96 × 96 px),依此类推。

81baed86781a96e418404dbedcb8be95.png

点九图

在某些况行下,还需要提供一种特殊的切图:点九图 (上图所示)。点九图是 Android 开发中用到的一种特殊格式的图片,文件名以 “.9.png”

结尾。

这种图片能告诉程序,图像哪一部分可以被拉升,哪一部分不能被拉升需要保持原有比列。运用点九图可以保证图片在不模糊变形的前提下做到自适应,比如对话框背景图片就会用到点九图。

本文内容转载自网络,本着分享与传播的原则,版权归原作者所有,如有侵权请联系我们进行删除!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值