当口袋里的手机屏幕分辨率超过了电视，难免会有疑问：分辨率究竟多高才够用？

本文最初是2015年所写，现在再看发现数据已经更新很多了，但是确实如最初推测的一样，设计方法可以事半功倍，下面一起来看看吧～

【思考】全世界有多少款手机？多少尺寸？多少个分辨率？……

据不完全统计，仅Android手机就有18000多款！其中三星就已经有上百款手机，其他厂商华为、HTC、vivo、中兴等，几乎以每季度推出一款手机的进度持续增加，还有一些大家听都没听说过的厂商和品牌，在悄悄的为这庞大的数据添砖加瓦。目前在售的iPhone一共有9款，相应尺寸有3.5”~5.5”四种，至于Android手机，从2.9”~6.0”其中包含的尺寸我们就不具体罗列了，对应的分辨率难以统计，好在Android系统常见的常规分辨率就只有3套。虽然IOS系统比Android系统要规整些，但9款iPhone中也包含的6套分辨率。下面我们来说，常见的IOS和Android系统中，那些常见的分辨率。

Android手机使用量最多的分辨率是像素，其次是像素，再具体的观察会发现像素的大屏手机的占比也在逐月增加。

iPhone手机使用量最多的分辨率是像素，逐月减少，像素（即iPhone 6 plus）的占比也在逐月增加，而iPhone 6 plus的官方物理像素就是像素，是不是有点眼熟？没错，这与Android手机像素一致。

大胆猜想，小心求证，从上文发现的三点，我们不妨大胆的假设一下：

首先，了解并区别这些概念

2.DPI（ dot per inch，每英寸多少喷墨点）表示印刷品点密度。

PPI是每英寸含有的像素数量，我们来做个简单的数学题~

根据勾股定理解答，得出400.529约等于401，与官方给出的PPI一致。恭喜答对了~

然后，了解iPhone的这些尺寸对应的分辨率

看懂这张图了吗？没关系，听我娓娓道来~

早期的iPhone手机是320x480，对应3.5英寸屏幕，即163PPI，根据科学验证PPI≥160，人眼不会察觉到像马赛克一样的像素颗粒，但这样的1:1渲染，也仅仅是察觉不到明显的马赛克，但依然不够清晰，能更高清一些吧？答案当然是肯定的，当年苹果率先提出了Retina display（视网膜屏幕）的概念，也使得 iPhone 4 的推出具有了划时代的意义，按照1:2 渲染，使用@2x资源，展现的细节更多更精致。但这样够了吗？不，960px高的一整屏显示信息不够多，能不能加高呢？必须可以，满足用户一切需求，于是有了iPhone 5的1136px的高度，屏幕比例也更接近16:9宽屏效果，看视频更爽有没有~

此时，所有的iPhone都没有超过4寸屏幕，这也是乔布斯认为的最佳手机尺寸，哪怕当时周围都是三星大屏“虎视眈眈”，他也坚持着。但是，乔布斯逝世后，Apple终于还是“随波逐流”了，推出了更大屏幕iPhone 6，甚至超大屏幕iPhone 6 plus。

让我们一起来看看，iPhone 是怎么逐步变的更big（逼格），从iPhone分辨率分布图可以看出来，在iPhone 6出现之前，Points（点）的宽度都是320，iPhone 6出现之后，宽度增加到了375pt，如果不增加Points会怎样呢？详见iPhone 6 （Display Zoom）这一竖列，依然使用@2x资源，但手机尺寸增加到了4.7英寸，要保证326 PPI不变，物理像素显然要750x1334才行，为什么显然？用勾股定理算算去，16:9的屏幕，自然就能得出长宽是750x1334了，也就是说，640x1136要放大1.17倍才能符合要求，但这样显然是不匹配的。为了确保iPhone 6 的精细度不降低，增加Points来匹配4.7英寸的屏幕是更好的选择，并且这样显示的内容也会更多，何乐而不为。所以，市面上出现了750x1334

iPhone 6 plus也同样由于屏幕尺寸的增加，市场上高PPI的流行趋势——“当PPI达到400以上时，屏幕的显示效果会细腻很多。”5.5英寸屏幕上要达到400以上的PPI，那显然物理像素要达到像素。那iPhone 6 plus是怎么适配的呢？

如果沿用iPhone 6的点不变，仅仅采用@3x资源，那就是上图中iPhone 6 plus （Display Zoom）这一竖列了，会得到像素，压缩0.96就是了，可行吗？当然可以，PPI并没有降低，这就是iPhone 6 plus的放大模式（像素）。

但这样下来，4.7英寸的iPhone 6 和5.5英寸的6 Plus，就只是图标等比放大了，内容依然显示那么多，并没有什么用。为什么不继续加大Points（点），显示更多的内容？于是414x376应运而生，iPhone 6 plus有了标准模式（像素）。

好了，终于分析完上面复杂的分辨率了，可以大概推测出iPhone近几年的变化趋势，有兴趣可以猜猜下一款iPhone是什么样。关于各款iPhone之间的换算关系，下面也做了一个对比。

如图，截取了iPhone 现有机型（停产的除外）的桌面图标效果，分别标注了图标尺寸。iPhone 4 、5、6的图标都是120x120像素，用的都是@2x资源；iPhone 6 plus在放大模式和标准模式下，图标都是180x180像素，即@3x资源，标准模式下压缩至像素呈现到手机上，实际显示的物理像素就是157x157像素；以为出发点，向各个尺寸发散，x1.15倍得到iPhone 6 plus（标准模式），x1.15x2/3得到iPhone 4,5,6的图标尺寸，可见，以的屏幕做的图标或者元素是可以换算到其他尺寸的。

iPhone4、5、6都用过的人应该会发现，无论屏幕变的多大，真实呈现的图标都是一样大的，手指点击区域的体验也是一样，为什么呢？IBM的设计语言就讲到过，手指适宜的点击大小至少是7mm，在326PPI中，90px就相当于7mm。

Plus的图标（9.9mm）才会“看上去”一样大。

大家都知道iPhone 6 plus有两种显示模式，（还不知道？打开设置-显示与亮度-显示模式，就可以看到了），标准和放大模式有什么差别呢？

1.放大模式的分辨率是像素，标准模式的分辨率是像素，标准模式的分辨率尺寸更大；

2.同样使用@3x资源图，标准模式的较高分辨率尺寸中，可以放入更多的内容；

3.放大模式压缩到96%适应到手机，标准模式压缩到87%适应到手机，由于依然还是401ppi，使用的资源相同，所以图标在放大模式下显得更大，在标准模式下更小看起来就更精致。

上图可知，随着屏幕变大，显示的内容越来越多。

iPhone 6在iPhone 5的基础上多了一行，且文字一行可以显示更多了；

iPhone 6 plus的放大模式与iPhone 6显示的内容一样，只是整体变大了；

iPhone 6 plus的标准模式比iPhone 6显示的内容更多了一行，大多数文字标题一行显示完整。

从app store的常规列表布局可知，各个屏幕尺寸的常规列表可按2/3 换算。

使用@2x的机型与使用@3x的机型的图标、左边距和右边距的像素都是2：3的比例，从文字标题的长度可以直观的看出，相同资源下，iPhone 6的一行所显示的字数比iPhone 5更多，甚至，iPhone 6 plus标准模式一行可以显示iPhone 5 的两行文字。若继续以原来iPhone 5的尺寸（640x1134）做设计稿，局限就太大，反而iPhone

我们来简单设计一下3个图标的布局，假如以的屏幕来做设计稿，标准模式下的设计稿可以直接放大到得到。

标注方式A：标注了左右边距，按比例适配到其他屏幕，iPhone 4、iPhone5等相对小尺寸的屏幕图片出现了重叠；

标注方式B：标注了间距然后整体居中，按比例适配到其他屏幕，左右间距减少了，效果依然ok。当然这种标注方式也有风险，如果图标更大或者间距更大，则图标也有可能在小屏幕中出框。

如果有经验的设计师就知道，这种标注方式在的屏幕中，整体宽度（图标+间距）不大于835px就可以避免出框的情况了。

假如以750x1334的屏幕来做设计，同理换算到其他分辨率。

总之，只有理解了换算方式、多多尝试、积累设计经验，才能做出更好更恰当的设计与标注。

举例大图的适配方式，从最大的屏幕压缩到，大图直接压缩，边距按照2/3换算；从压缩到，大图再压缩到85.3%，边距不变；继续到960x640的屏幕，显示高度减少176px，边距依然不变。

综上所述，呈现大图时，可以一张资源适配到所有尺寸，例如，闪屏就可以共用一张最大尺寸资源，最后注意小屏幕会裁剪176px就行了。

总结，iPhone的特点……

实际呈现的图标和文字基本一样大

屏幕内显示的内容越来越多

呼~~终于说完了iPhone的特点，欲知更多精彩请听下回分解……

多么想就这样结束啊，但是，不行，说好的iPhone和aphone之间分辨率 “亲密接触”，现在只有iPhone，没有aphone怎么行！继续！

文章的开头已经说过，android有1800+W种手机，我不可能全部说到，在此我们只说主流的尺寸。图中的密度是对密度值的一个等级划分，例如FHD的全高清屏幕，对应的密度是xxhdpi，密度值480ppi左右，例如441ppi的小米手机4C也可被称为（FHD）全高清屏幕，对应的分辨率，DP的倍率关系是3倍。DP（ dip） 是安卓开发用的单位，1dp表示在屏幕点密度为160ppi时1px长度（1倍关系的情况下）。

简化成3个常用分辨率就是540x960，720x1280，。三者的换算比例分别是1.5，2和3倍关系。例如，设计20dp的长度，在540x960的QHD屏幕中是30px，在720x1280的HD屏幕中是40px，在的FHD屏幕中是60px。FHD也可以直接换算到QHD，即除以2。

同样以3个图标的布局来举例，以的屏幕来设计，无论是以方式A来标注，还是以方式B来标注，换算到HD和QHD的屏幕都是没有出现任何图标重叠的情况，因为，他们是完完全全按照1.5：2：3的比例换算的，就是屏幕尺寸也是0就等于1.5：2：3。所有不会出现iPhone的图标重叠情况，iPhone的各个屏幕尺寸比例并不是2：3，所以导致与资源比例不一致。

实际呈现的图标和文字各不一样

屏幕内显示的内容越来越大

哦吼吼~ 既然两个主角已经上场，特点也已经了解，开始他们的“亲密接触”吧~

对比IOS和Android可以看出，他们共有的尺寸，假如都以来做设计稿，标注和资源可以通用吗？

如图，IOS和Android都在上标注，图标都是228px，但iPhone的@3x需要还原到相应的标准模式才可得出，即262px，而Android直接切图即可得到3倍资源，即228px，可见iPhone和Android的资源并不一致。

iPhone上直接切的@3x放到IOS上是缩小了13%，常规设计不能共用资源，若特殊设计单独元素时，稍稍偏大或者偏小的尺寸误差并不会影响到用户体验。

从上文中的对比与说明，我们之前的猜想也可以有结论了。

猜想1：能不能以尺寸占比最高(iPhone ;aPhone)的来做呢？

回答：不能，因为屏幕越来越大，显示的内容越来越多，小尺寸屏幕会局限设计；

猜想2：同一套的设计稿是否可以共用Android和iPhone？

回答：H5页面可以共用，由于不同机型有规律可循，设计独立元素时，可直接共用一套资源，iPhone上偏小（13%）并不会影响到用户体验；但设计系统层级的控件时，则建议分开设计

设定字号和左右边距后，按比例换算到其他屏幕，大屏幕自动延长每一行显示的字数；

设定大图的边距，边距按比例换算，大图自适应压缩尺寸。

设定列表中的图标、文字和按钮的尺寸，以及间距和边距，按比例换算到其他屏幕后，中间区域可以拉伸。

设定图标尺寸，按比例换算到其他屏幕后，均等排列，也可以按百分比分配排列。

设计稿750x1334最佳，标注图也是，可以直接输出@2x切图资源，再另存切图PSD，放大到@3x资源。如果用sketch做的设计稿，此工具就可以直接输出@3x、@2x资源，当然也可以输出一份pdf矢量资源。然后就交给开发哥哥们去实现啦~

可以调整已经做好的iPhone设计稿，如果想共用一套切图资源的话，建议令外新建一个720x1280的屏幕，把iPhone750x1334的图标和文字等元素拖动到Android的设计稿上，再做细微调整，标注layout

新闻信息流视频广告的设计，输出iPhone的设计稿和标注都是750x1334像素，输出APhone的设计稿和标注都是720x1280像素，由于Android和iPhone的设计风格不一致，所以不能共用一套，需要分别输出切图资源xxhdpi（@3x）和xhdpi（@2x）资源。

没错，特殊的简化版，就是这么简单，Android和iPhone可以共用同一套设计稿和资源：

以的屏幕来设计，直接标注layout和输出切图，然后交给开发哥哥，他们用H5开发，view point即可解决各个尺寸之间的问题，神奇吧~

摇一摇福利贴的广告形式设计，输出设计稿和标注都是的屏幕，横竖屏资源共用，切图资源@3x。

移动自动化表单的广告形式设计，输出设计稿和标注都是的屏幕，横竖屏资源共用，间距等比拉伸调整，切图资源@3x。

前前后后磨磨蹭蹭历时两周，终于写完了，都被戏称“这是写小说呢，要这么久”哈哈哈，好吧，是的，就当小说来写也不错，希望读者能更容易理解。

意犹未尽？想了解更多，点击相关链接：

iPhone 6 / 6 Plus 出现后，如何改进工作流以实现一份设计稿支持多个尺寸？

移动开发需要知道的像素知识『多图』

非官方的iOS设计指南

Android  9.png格式的图片是安卓平台上新创的一种被拉伸却不失真的东西，他可以保证图片被拉伸之后不失真、不变形

UI设计师不可不知的安卓屏幕知识(原创文章)