iPhone11的适配

北京时间2019年9月11日凌晨1点，苹果2019秋季发布会在总部的史蒂夫·乔布斯剧院举行。发布了iPhone11、iPhone11 Pro和iPhone11 Pro Max三款手机，担心适配的小伙伴看过来吧！

iPhone11并没有出现新的设计尺寸，设计师作图时可以跟往常一样不变，依然只需要提供@2x、@3x两套切图就可以。

1、iPhone11是6.1英寸，与现有的iPhoneXR一致；

2、iPhone11 Pro、iPhone11 Pro Max分别是5.8英寸和6.5英寸，与现有的iPhoneX、iPhone XS Max一致

下面我们来回忆下iPhone的发展历史，不同版本的设计尺寸是设计及开发都不得不关心的硬知识。

自从2007年史蒂夫·乔布斯为全世界带来第一代革命性的iPhone，距今已有12个年头。苹果的每一代产品都会有很多的更新变化，但不变的是流畅的体验和人性化的设计，这也让iPhone每一年都成为我们关注的焦点。

【2007～2009】 iPhone、iPhone 3G、iPhone 3GS

初代iPhone被很多人认为是真正开启智能手机时代的代表，为什么与众不同呢？是因为它让人耳目一新的外观设计、流畅的交互体验，不再是那些臃肿的按键，只有触摸屏和一个圆形Home键，并且支持多点触控，这种丝滑的新颖交互方式，当时乔布斯在发布会上可是好好地吹了一波～

初代iPhone搭载的系统也是iOS系统的开端，即便那时的系统命名是iPhone OS。从iPhone 3G开始搭载的iPhone OS 2.0支持了APP Store，这让开发者们能够为iPhone提供更多的APP，对整个苹果的移动生态建设有了里程碑式的意义。最开始iPhone的UI图标和界面设计都是写实拟物化风格，这是为了让用户在最开始接触的时候就能有一个代入感，并且能够快速投入使用。同时为了规范化图标，苹果将所有的图标都放在了圆角矩形里，看起来非常规整统一，在那个用户体验意识还没有成熟的时代，苹果就很重视使用者的体验感受了，也许在那时iPhone就已经和其它厂商慢慢地拉开差距了。

这三款手机，屏幕尺寸均是3.5英寸，分辨率为320*480，那时设计师在做设计的时候，使用的切图是@1x。在这里我们需要明白几个概念：
物理像素（px）：是位图图像中的最小单位，也是设计师在PS作图使用的单位；
逻辑像素（pt）：开发使用的单位；
倍率：物理像素/逻辑像素，也就是我们常说的切图@1x、@2x、@3x；

【2010～2011】 iPhone 4、iPhone 4s

2010年，苹果发布了这款果粉心目中最经典的机型iPhone 4，也正是从这代手机开始，系统正式更名为iOS，iPhone逐渐走到大众的面前。iPhone 4是首款配备了Retina视网膜显示屏的iPhone，虽然屏幕尺寸依然是3.5英寸，但是分辨率达到了640*960，是之前手机的2倍分辨率大小。早些年我们将手机放在离眼睛很近的地方，肉眼是能看到屏幕上的像素格的，因为普通的屏幕，显示效果不细腻。“Retina”是一种显示技术，可以把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度，这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的像素格。

由于iPhone 4像素密度是之前的2倍，考虑到不同手机视觉显示正常，设计师除了@1x的切图之外，还需要提供@2x的切图，这个时期，设计师的设计稿尺寸变成了640*960。

【2012～2013】iPhone 5、iPhone 5c、iPhone 5s

在乔布斯逝世之后，苹果进入了“库克时代”。iPhone 5系列与之前手机相比高度增加了，屏幕尺寸由3.5英寸变成了4英寸。除了外观上的变化，更被人熟知的是iPhone 5s加入了“杀手级”的功能——Touch ID，这是苹果公司的一种指纹识别技术。在UI上最直接的变化，就是iOS7开始采用扁平化的UI风格，与原来的系统风格相比，简直是天翻地覆的变化，这种风格慢慢席卷了整个UI设计行业。

出现了新的手机尺寸，UI设计师又要开始忙活了，设计稿尺寸变成了640*1136。不过还好，只是高度增加了，垂直方向上显示的内容比4系列多了一些，5系列提供的切图还是同样的@2x。只不过在制作全屏界面如启动页之类的，需要考虑单独设计。

【2014～2017】iPhone 6/7/8、iPhone 6/7/8 Plus、iPhone SE

这段时期苹果发布了两款新的大尺寸iPhone，4.7英寸的iPhone 6/7/8（分辨率750*1334，@2x）和5.5英寸的iPhone 6/7/8 Plus（分辨率1242*2208，@3x）。从iPhone 6s开始，屏幕上加入了Z轴深度的交互方式3D Touch，带来了立体感的操作感受。而在2016年3月份亮相的iPhone SE，与iPhone 5系列屏幕尺寸完全相同，分辨率也是640*1136，只不过用户的反响平平。

在这个用户越来越喜欢大屏手机的背景下，我们在适配的时候已经不再考虑@1x的手机了，提供的切图变成了@2x和@3x两种。设计师的作图尺寸再次发生了变化，主流设计稿尺寸为iPhone 6/7/8的750*1334。

【2017～2018】iPhone X/XS、iPhone XS Max、iPhone XR

2017年9月发布的iPhone X是苹果首款全面屏设计的产品，标志性的特征就是它的“齐刘海”。从这一代iPhone开始取消了Touch ID指纹识别，取而代之的是Face ID面部识别系统。
iPhone X/XS的屏幕尺寸为5.8英寸，分辨率是1125*2436，切图为@3x。
iPhone XS Max的屏幕尺寸为6.5英寸，分辨率是1242*2688，切图为@3x。
iPhone XR的屏幕尺寸为6.1英寸，分辨率是828*1792，切图为@2x。

虽然又是三个新尺寸，但是别慌！我们通过Sketch作图会发现，iPhone X/XS的设计尺寸是375*812pt，仅仅是比iPhone 6/7/8（375*667pt）高了一些而已，如果要做X的设计稿，只需要在Sketch中将界面的头部和尾部替换成X的控件就可以了。同理，iPhone XS Max和iPhone XR设计尺寸是414*896pt，仅比iPhone 6/7/8 Plus（414*736pt）高了一些。当然了，目前设计师作图的基准尺寸还是iPhone 6/7/8，适配的时候，提供的切图为@2x和@3x两种。

【2019】iPhone 11、iPhone 11 Pro、iPhone 11 Pro Max

今年新发布了三款手机，分别是6.1英寸的iPhone11、5.8英寸的iPhone11 Pro和6.5英寸的iPhone11 Pro Max。新品iPhone全系搭载A13处理器，后置摄像头变成了“浴霸”造型，这次发布会也花了很多篇幅讲解了新摄像头的强大，emm，肯定会有很多人吐槽外观很丑，但是骂完直接掏钱买去了。

相信设计师朋友们看到这三款手机的屏幕尺寸之后，心中暗暗松了口气，这次不用考虑新的尺寸适配工作了。
iPhone 11与iPhone XR一样，分辨率为828*1792，切图为@2x。
iPhone 11 Pro与iPhone X一样，分辨率为1125*2436，切图为@3x。
iPhone 11 Pro Max与iPhone XS Max一样，分辨率为1242*2688，切图为@3x。
当前设计师做效果图主流尺寸依然是750*1334，适配时提供的切图为@2x和@3x两种。

【尺寸汇总】如下

以下图表位当前iOS主流适配所用到的切图及对应机型，不过目前我们在作图的时候仍然以iPhone 6/7/8（750*1334px）为基准进行设计。

【iOS 13的深色模式】

iOS 13一经亮相就成为设计师关注的焦点，苹果首次在iPhone推出深色模式（Dark Mode），带来了全新的视觉风格。

说到深色模式就能想到去年发布的macOS Mojave，当时着实惊艳了一把。深色模式对OLED的屏幕来说更省电，有人认为深色模式很酷，也有人认为浏览屏幕的时候能保护眼睛，因为深色模式降低了屏幕发光的亮度，同时将色彩对比度降低，能帮助改善人的视觉感受，减少眼睛的疲劳感。

深色模式使用颜色的原则：深色模式并不是只把当前的界面背景色简单地变成深色，背景之外的其它色彩元素也需要进行调整以适应深色版本。我们在设计时背景要使用深灰色，避免使用纯黑，其它色彩元素也应该降低饱和度，这是为了增加深色模式下的可读性，同时有效减少视觉疲劳。

深色模式下的文字颜色也需要进行简单的处理，若直接使用纯白#FFF太亮了，与背景的对比度过于强烈容易造成视觉不适感。我们通常会在深色模式将文字颜色进行半透明弱化处理，比如Material Design中的重要级文字采用了87%纯白。