iOS 多尺寸屏幕适配背景知识

iDevice设备屏幕大小,在iPhone 6和iPhone Plus出现后,iPhone界面设计和开发面临了新的任务,即对不同设备屏幕进行适配。
苹果官方也推出来新的技术更新,来帮助我们进行设计和开发:

  • Auto Layout
  • Trait Collections, Size Class
  • Storyboards
  • Xcode6中使用矢量图

我们需要理解和运用苹果提供给我们的技术、并制定自己的适配方案。
这篇文档暂时并没有去讲如何运用苹果的这些技术进行适配,只是对背景知识一个大概的讲解。
稍后的更新会有详尽的补充。

相关术语

  • Point
    Point可以理解为iOS程序员眼中的大小单位。它是iOS操作系统中的抽象的概念。

At the beginning, coordinates of all drawings are specified in points.
Points are abstract units, they only make sense in this mathematical coordinate space.

  • Rendered Pixels
    Rendered Pixels可以理解为UI设计师眼中的大小单位。

Point-based drawings are rendered into pixels. This process is known as rasterization.
Point coordinates are multiplied by scale factor to get pixel coordinates. Higher scale factors result in higher level of detail.

  • Physical Pixels
    设备屏幕硬件像素。

The device screen may have lower pixel resolution than the image rendered in previous step.
Before the image can be displayed, it must be downsampled (resized) to lower pixel resolution.

  • Physical Device
    设备名称

Finally, computed pixels are displayed on the physical screen.
The PPI number tells you how many pixels fit into one inch and thus how large the pixels appear in the real world.

  • 切图倍数:1x、2x和3x
    这些表示Rendered Pixels到Point的倍数关系。
    iPhone4之前,是1倍;在iPhone6到iPhone4,都是2倍;iPhone 6Plus往后,是3倍。

Point和Rendered Pixels是我们需要关心的,Point是开发人员在Coding时,屏幕的逻辑大小单位,Rendered Pixels是设计师出图的大小单位。

目前需要支持的所有尺寸

Point Rendered Pixels iDevice Ratio
320 * 480 320 * 480 (1x) iPhone3和3gs 1.5
320 * 480 640 * 960 (2x) iPhone4和4s 1.5
320 * 568 640 * 1136(2x) iPhone5和5s 1.775
375 * 667 750 * 1334(2x) iPhone6 1.77866667
414 * 736 1242 * 2208(3x) iPhone6Plus 1.77777778

这个只是iPhone方面,iPad方面还没有考虑,这个是因为一些App在iOS和iPhone上面的UI设计有很大的不同,需要两套设计和代码。

我们开发一个iPhone的App,需要适配后四种尺寸,第一种由于太古老,不需要考虑。

Note: 如果你不进行适配,iOS也会自动帮你适配,但它只是简单的缩放,会导致UIKit控件模糊(如果提供了适配的图片,图不会模糊)。

适配需要做的工作

本来对于不同的屏幕大小,我们应该分别进行设计和开发,比如在Auto layout出现之前,经常会用代码判断设备类型,然后将控件设置成不同的大小或位置。

由于iPhone屏幕尺寸变化不是很大,运用一些适配原则,可以在保证较高的UI效果前提下,减少适配的工作量。Auto laytou可以帮助我们制定适配原则。

也就是:

一套UI设计方案 + 一些适配原则 = 适配所有的机型

那么有哪些设配原则,我们需要怎么样的适配原则?这个需要针对不同的界面,或者一个界面的不同部分,采用不同的适配原则。

我们举个例子,说说什么样的适配原则是好的。
Bad sample:

Good sample:

Good sample相比Bad sample,将上部分的空间都等比例放大了。

对于Point大小不变的控件,比如例子中左上角的按钮,它的point都是44*44,设计师只是需要提供2x和3x的切图即可。

Point Rendered Pixels iDevice
44 * 44 88 * 88(2x) iPhone5和5s
44 * 44 88 * 88(2x) iPhone6
44 * 44 132 * 132(3x) iPhone6Plus

对于Point大小有改变的控件,比如例子中的任务头像,它在三个设备中的Point大小都不一样,设计师需要分别出三张图。

Point Rendered Pixels iDevice
80 * 80 88 * 88(2x) iPhone5和5s
100 * 100 200 * 200(2x) iPhone6
120 * 120 360 * 360(3x) iPhone6Plus

上面的情况中,320 Point宽度的设备和375 Point款度的设备,他们都是2x,如果在两种设备上需要使用不同的图,该怎么命名图片呢?这个帖子,还有这个里有说明该怎么做:

<pre><code>
image-320@2x//iPhone 5
image-375@2x//iPhone 6

NSNumber *screenWidth = @([UIScreen mainScreen].bounds.size.width);
NSString *imageName = [NSString stringWithFormat:@"image-%@", screenWidth];
UIImage *image = [UIImage imageNamed:imageName];
</code></pre>

参考

Adaptive your user interface
poster_iphones
iPhone 6/6 Plus 出现后,如何改进工作流以实现一份设计稿支持多个尺寸?
Beginning Auto Layout Tutorial in iOS 7: Part 1
Beginning Auto Layout Tutorial in iOS 7: Part 2
iPhone 6/6 Plus 出现后,如何改进工作流以实现一份设计稿支持多个尺寸?
新特性Size Class介绍
在xcode6中使用矢量图(iPhone6置配UI)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容