iOS、Android 开发单位换算及 UI 切图要求
一、常用单位
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 为单位。
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
若有小数,四舍五入即可。
在 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 所示。
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
发表回复