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
作者 彭彭设计笔记
饿了么UED 高级视觉设计师
关键字：产品设计, 单位, ios, android
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！