iOS上的PPI处理

本文摘取至:DPI、PPI、Retina、分辨率、4K、DP、PT、SP详解

是时候钻研下特定平台的设计了。

让我们花点时间看看2014年年初时的iOS设备。 从屏幕大小和DPI的角度来看,iOS有两种类型的手机设备和两种类型的笔记本/台式电脑屏幕。

对于手机,有iPhone和iPad。 在手机分类中,有过去的3GS(iOS6依旧支持)和更高版本,其中只有iPhone 3GS是非Retina。iPhone 5以及后来的都用了和iPhone 4/4s有相同DPI的更好的屏幕。让我们来看看下面的列表:

dpi、ppi

 

2014年9月Apple宣布,现在又有2个新类别的iPhone:iPhone 6和iPhone 6 Plus。

iPhone 6比5要大一点(0.7英寸左右),但是PPI相同。iPhone 6 Plus由于它的尺寸,5.5英寸,产生了iOS上新的像素比,@3x。

dpi、ppi

 

相较于其他iPhone,iPhone 6 Plus控制展示比较特殊的是:视觉效果降频。

以为iPhone 6设计为例,设计的画布为1334750px,手机上就呈现1334750的物理像素。当为iPhone 6 Plus时,手机的分辨率小于渲染的图像,因此你设计的分辨率为22081242px,展示时降频为19201080px。如下图:

dpi、ppi

 

物理分辨率比渲染分辨率小15%,会造成一些细节问题,比如半像素使得精细的地方变模糊。分辨率如此高也是很微妙的,除非你近距离观察。因此,在2208*1242px的画布上设计,需要注意设计中真正精细的地方,像是分隔符。模拟如下:

dpi、ppi

 

 

在iPod touch分类中,iPod第四代出来的时候使用的是iOS6和非Retina。iPod第五代以及后面的都使用Retina屏幕并且兼容iOS7,它的屏幕大小与iPhone 5相同。

最后说说iPad。除了iPad 第一代,其余的都用的是iOS7,同时只有iPad2和iPad mini是非Retina屏幕。从设计的角度来看,iPad mini只是普通的iPad(一样的PPI屏幕),但是物理体积更小,也就是说它们拥有相同的分辨率,只是大小从9.7英寸减小到了7.9英寸。保持同样的比例,便会相应地增大像素点的密度,你的虚拟资源就会显得更小了。

dpi、ppi

 

dpi、ppi

至于台式机和笔记本,我们不会全面讨论Apple提供的各种尺寸的屏幕。在今天,Apple提供的几乎都是1x像素比的Retina屏幕(Macbook,Macbook Air,旧版Macbook Pros,台式机显示器),Retina只应用于13和15寸的Macbook Pro。iPad和iPhone像素比是2x。为台式机设计与手机设计不同的是,你需要以相同方式设计来覆盖这两种不同类别的屏幕。

当只使用一种像素比时,基于iOS和OSX的设计是非常简单的。我建议开始设计时先用基础的PPI(例如,100%/1x)然后增加到2x并在2x的屏幕上校验你的设计并且生成2x的资源。当你熟悉在1x和2x之间切换设计后,就能够直接在2x上进行设计了,低分辨率时资源更小。如果你正在为Retina屏幕设计的话(Macbook Pro),这就特别有用。

引入资源,chrome为例

dpi、ppi

如图所示,每次请求资源需要传送两张图片。非Retina下图片名为name.png,Retina的图片增加到@2x命名为@2x.png,这是iOS开发约定的命名规范。

如果你创建了一个图片只用在iPad上,我们在.@2x后面加上~iPad,这仅仅只是chrome的约定。对需要的资源都这样处理,不要只用一个版本的资源来覆盖所有DPI。

附加, iOS规则集:

  • @2x的资源必须始终是1x资源的两倍。
  • Retina资源加上@2x.
  • 始终创建100%和200%比例的图片。
  • 1x和2x的资源始终要保持名字相同。
  • 在100%比例下开始设计,然后做乘法。
  • 传递.png格式的图片。
  • 使用pt创建规范而不是px。

本文摘取至:DPI、PPI、Retina、分辨率、4K、DP、PT、SP详解