那些难搞的手机分辨率

danayang

上海/UX设计师/8年前/1332浏览

版权

那些难搞的手机分辨率

danayang

这是一个关于iPhone和aphone之间分辨率 “亲密接触”的漫长故事，请携带智商和耐心观看……

本文最初是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

（数据来源：https://mta.qq.com/mta/data/device/resolution）

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

IOS

（数据来源：https://mta.qq.com/mta/data/device/resolution）

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

由此可发现以下三点：

假设

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

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

DPI、PPI、DP&PX

1.PPI（Pixel per inch每英寸像素数）表示显示设备的点密度，

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

3.DP（ dip）是安卓开发用的单位，1dp表示在屏幕点密度为160ppi时1px长度（@1x）。

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

现在已知iPhone 6 plus的屏幕是5.5英寸，长宽分别是1080px和1920px，求iPhone 6 plus的PPI是多少？

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

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

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

--iPhone 2、3、4 & iPhone 5

早期的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 6 / iPhone 6s

让我们一起来看看，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。

--iPhone 6 plus / iPhone 6s plus

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

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

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

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

--iPhone之间的换算关系

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

为了真实呈现一样

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

iPhone 4、5、6都是326PPI，图标120px相当于9mm，那么iPhone 6 plus的图标是多少毫米呢？

有兴趣的可以跟我一起计算一下，401PPI代表每1英寸有401px，1英寸=25.4mm，那7mm就约等于111px（401px / 25.4mm x 7mm≈111px），iPhone 6 plus的物理像素是1080x1920，图标157px就相当于9.9mm（157 /111x7≈9.9），所以，iPhone 4、5、6的图标（9mm）和iPhone 6 Plus的图标（9.9mm）才会“看上去”一样大。

iPhone 6 plus的两种显示模式

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

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

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

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

iPhone的适配方式

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

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 6（750x1334）和iPhone 6plus更有设计空间。

-常规图标的适配方式

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

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

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

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

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

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

-常规大图的适配方式

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

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

总结，iPhone的特点……

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

精度越来越高

屏幕越来越大

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

不同机型有规律可循

Android上是一样的吗？

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

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

Android的常见情况

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

简化成3个密度

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

Android Phone的适配方式

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

总结，Android Phone的特点……

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

精度越来越高

屏幕越来越大

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

不同机型有规律可循

IOS vs Android

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

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

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

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

结论

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

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

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

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

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

-文字延长排版

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

-大图等比缩放

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

-弹性拉伸空间

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

-图标均等排版

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

Android和iPhone需要两套设计稿和资源：

-iPhone设计流程

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

-APhone设计流程

可以调整已经做好的iPhone设计稿，如果想共用一套切图资源的话，建议令外新建一个720x1280的屏幕，把iPhone750x1334的图标和文字等元素拖动到Android的设计稿上，再做细微调整，标注layout 即可，资源就直接拿iPhone的@3x（对应Android的drawable-xxhdpi）和@2x（对应Android的drawable-xhdpi），至于1.5倍的资源，可以压缩@3x的PSD输出@1.5的切图，要求不高的话，也可以由开发直接压缩@3x资源。

举个栗子：

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