APP的切图原理

APP的切图原理

因为:

Ui设计师用单位px和pt作图,

Android开发人员用dp和sp开发,

于是,经常发生很多沟通上的麻烦。

☞为了让日常切图尺寸的沟通更加和谐,我整理了安卓切图的相关信息。

举例:banner的切图尺寸:iOS和Android的换算举例:

已知:在640x1136px,iPhone@2x的banner尺寸是W640xH160px,

问题:在720x1280px,Android@xhdpi时,banner切图尺寸是多少?

解:

因为app首页banner是占满横屏的,所以banner宽度为720px, 高度的计算公式如下,

640px             160px

一一一一  =  一一一一

720px               B

解得:B=180px,

所以:在720x1280px,Android@xhdpi时,banner切图尺寸等于W720xH180px。

安卓的相关尺寸信息统计:【符号表示对应关系】

@Ldpi(安卓手机)240x320px 120ppi

@mdpi(安卓手机)320x480px 160ppi

@hdpi(安卓手机)480x800px 240ppi

@xhdpi(安卓手机)720x1280px 320ppi

@xxhdpi(安卓手机)1080x1920px 480ppi

常见app的banner切图,需要切6张不同尺寸的图:

640x160@2x(苹果手机)

960x240@3x(苹果手机)

320x80@mdpi(安卓手机)

480x120@hdpi(安卓手机)

720x180@xhdpi(安卓手机)

1080x270@xxhdpi(安卓手机)

其中安卓屏幕分辨率的倍数关系如下,

320x1=320,对应屏幕@mdpi(安卓手机)320x480px 160ppi

320x1.5=480,对应屏幕@hdpi(安卓手机)480x800px 240ppi

320x2.25=720,对应屏幕@xhdpi(安卓手机)720x1280px 320ppi

320x3.375=1080,对应屏幕@xxhdpi(安卓手机)1080x1920px 480ppi

安卓屏幕密度的倍数关系如下,

160x1=160,对应屏幕@mdpi(安卓手机)320x480px 160ppi

160x1.5=240,对应屏幕@hdpi(安卓手机)480x800px 240ppi

160x2=320,对应屏幕@xhdpi(安卓手机)720x1280px 320ppi

160x3=480,对应屏幕@xxhdpi(安卓手机)1080x1920px 480ppi

因此,安卓的2倍图,实际上是2.25倍。安卓的3倍图,实际上是3.375倍。

dp是虚拟像素,在不同的像素密度的设备上会自动适配,

比如:

在320x480分辨率,像素密度为160,1dp=1px

在480x800分辨率,像素密度为240,1dp=1.5px

计算公式:1dp*像素密度/160 = 实际像素数

dp和px的换算公式 :

dp*ppi/160 = px。比如1dp x160ppi/160 = 1px。

1dp        160ppi

一一一=一一一

1 px          160

sp是安卓的字体单位,

英文名称:Scale-independent pixels,以160PPI屏幕为标准,当字体大小为 100%时, 1sp=1px。

sp 与 px 的换算公式:1sp*ppi/160 = 1px

1sp            160ppi

一一一 = 一一一一

1pt               160


Sketch切图倍数如下:

切图切6套,文件夹显示如下:

切图文件夹

本文作者:张云钱。微信号;944352559

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容