UI技术干货:APP切图规范和换算标准

很多初学者总是搞不清楚,在设计APP界面的时候,到底要出几套图?今天我就给大家讲解一下切图原理,保证以后你再也不会迷失方向。

我们知道IOS系统的设计界面尺寸基于:750px*1334px,而Andriod系统是基于:720px*1280px,那为什么往往我们在实际应用中只做IOS的界面,程序就可以实现两种系统的适配呢,细心的同学在用cuttman切图的时候明显可以发现:

对比之下,原来他们有一个共同的参数:750,程序就是通过这个共同的参数进行相应的换算从而完美适配两种系统。

在这里为了让大家看得明白,我把他们之间的关系给大家理一下:

在Android系统中,XXXHDPI是XHDPI的2倍;XXHDPI是XHDPI的1.5倍;HDPI是XHDPI的0.75倍;MDPI是XHDPI的0.5倍;

接下来我们来看一下iOS系统,@2X是@1X的2倍;@3X是@2X的1.5倍;即3/2=1.5,2/1=2;

由此可见:iOS与Android的关系就是,iOS的@1X=Android的MDPI;iOS的@2X=Android的XMDPI;iOS的@3X=Android的XXMDPI;

现在看来,大家已经想明白了,实际上,我们只需要把iOS的切出来后,Android的也切出来了,不过在这里大家需要特别注意的就是,由于iOS里导出的图带有@2X等,所以将这个图给Android时需要去掉@2X;

当然这仅仅只是解决了图标大小适配的问题,在间距上还是会存在一定的误差,毕竟两种系统的标准尺寸大小不一样(iOS:750px*1334px,Android:720px*1280px),比例上或多或少都有些出入,所以,如果想做到完全规范的话,建议老老实实出两套图,一套iOS,一套Android。

大家都知道点九切图吧,它是Android平台的应用软件开发里的一种特殊的图片形式,可以将图片横向和纵向同时进行拉伸,以实现在多分辨率下的完美显示效果,但是,点九切图的局限性很大,一般只适用于button、对话框、按钮等规则的图标里,不规则的icon在应用的时候,还是需要我们进行切图。

发表评论
留言与评论(共有 0 条评论)
   
验证码:

相关文章

推荐文章

'); })();