移动APP切图术语解读:什么是@1x @2x和@3x

现在很多APP设计师小白都会稀里糊涂的在解读这些缩放1倍,扩大2倍或者说扩大1.5倍 等等之类的言论。大家谈论的却是也没有错。如果你搭配上@1x @2x和@3x的话,你

现在很多APP设计师小白都会稀里糊涂的在解读这些缩放1倍,扩大2倍或者说扩大1.5倍 等等之类的言论。

大家谈论的却是也没有错。如果你搭配上@1x @2x和@3x的话,你的理解就有问题啦!

首先我们看下我们切图的命名方式:

假设有两张图片名为:正确的命名方式应该是这样test_t@2x.png 、test_t@3x.png

这是对于ios 切图来说的。

iphone 4 5 6是采用test_t@2x.png 这个图,iphone 6 plus就采用test_t@3x.png

但是对于iphone加载的顺序是

在ipone4 ipone5 s、iphone6和iphone6 plus都是不需要带上@2x/@3x的图片后缀名,程序会优先加载@2x的图片 ,但如果需要加载@3x的图片,你需要写上@3x; 这个是IOS客户端做的,但是作为APP设计师必须了解。

 

第一个:为解决ios分辨率而生

 

之所以有@1x @2x和@3x的出现,也是苹果为了便于程序员的开发,不同分辨率的设备开发时统一为一个尺寸。例如iPad2 是768 x 1024,iPad Retina 是1536 x 2048,开发时都按 768 * 1024 操作。但实际上两者有一倍差异。为了达到最佳效果,使用的图片大小不一样。这时候就用同一个名称,但 Retina 的图加上 @2x 后缀。系统加载图片时,在 iPad2 上会加载 @1x 的图在 1536 * 2048 的设备上,会加载 @2x 的。@3x 现在用于 iPhone 6/6+ 上。

 

第二个:@1x @2x和@3x也是xcode软件所需要的UI资源。你命好名称以后,ios会根据设备型号自动挑选合适的@1x,@2x或@3x尺寸来使用。

 

第三个:mac电脑上的APP设计软件Sketch,他切图之后保存的图片格式也是带有@1x @2x和@3x。 在这里 可以解毒@1x @2x和@3x为图片格式,成为图片后缀名。跟我们安卓上的.9.png 类似的。

 

第四个:苹果IOS程序开发不同分辨率的设备统一为一个尺寸而标记的。@3X就是@1X分辨率的3倍。@3x也是倍数的解读。

 

所以,在这里 安卓到底有没有这样的@1x @2x和@3x的格式呢。网站模版网(www.genban.org)的小编认为,肯定没有,@1x @2x和@3x严格来说是苹果公司的专利。

适合安卓的切图命名规范最好的是.9.png图,当然目前.9.png应用在ios上也很多。

附带一提:iOS8渲染操作中使用前缀带有@1x、@2x 和@3x 的测试图像,代码会优先载入3x 图像。@2x图像不被加载。

 

 

 

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

25学堂今天跟大家分享12张精美的移动模型素材分享,这12张素材你可以应用在你的移动APP项目当中或者是APP官网设计当中,顿时让你的作品高大上!下面的这12张移
如今再来看扁平化APP设计,还是那么的简洁漂亮!最重要的是扁平化的移动APPUI界面简单实用,对移动设计师来说,...最近,25学堂将会推出很多漂亮的移动APP应用模板(框
有创造性的APPUI设计往往可以大幅度提升用户体验的。那么好的移动APP设计干货和APP设计规范也是新手们的渴求的干粮。25学堂秉着分享和共同学习的原则,收集了
移动APP项目名称:易配货APP 2.0移动APP项目背景:易配货是传化物流产业集团为货主与司机打造的物流信息交易平台,基于诚信会员体系和移动互联技术,为会员
iOS切图神器,我想大家都不会很陌生啦,Cutterman也是目前移动端设计人员用的比较多的一款切图工具。还有25学堂之前推荐的在线切图工具和PS切图插件推荐等。
今天25学堂的小编跟大家分享一个国外优秀的图标字体酷站,也是一个在线编辑的SVG图标素材的酷站-SmartIcons.coSmartIcons 网站是一个提供了1500+个顶级图标和内建多种