2016-04-11
“生活不止眼前的苟且，还有诗和远方的田野”。且不去想眼前的苟且，静下心来跟大家分享分享我在最近工作中的收获与总结。
1.基础概念：
相信大多数刚接触移动端UI或者UX的设计师都会面临一个让人头疼的问题：尺寸，先给大家列举一些我们平时经常会用到的一些词：“屏幕尺寸、分辨率、像素密度（ppi）、dp（dip）……”怎么样，面对各种各样的专业术语有没有老虎、老鼠、傻傻分不清楚。这个问题同样也曾让我纠结好一阵子。作为一个勤奋且乐于分享的孩子，这里就给大家扒一扒他们到底是什么鬼。
屏幕尺寸：
屏幕尺寸是手机对角线的物理尺寸，这里的寸指的就是以英寸（inch）为单位。比如某手机为“5寸屏手机”，就是指对角线的尺寸，5寸×2.54厘米/寸=12 .7厘米。
分辨率：
屏幕是由很多像素点组成的，分辨率就是手机屏幕的像素点数，一般描述成屏幕的“宽×高”，例如480×800的屏幕，就是由800行、480列的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。
像素密度（ppi）：
之前提到分辨率是手机屏幕的实际像素尺寸，而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320×480，iPhone 4s的屏幕像素是640×960。刚好两倍，然而两款手机都是3.5英寸的。所以，这里我们引入最重要的一个概念：像素密度，也就是ppi（pixels per inch），这项指标是连接数字世界与物理世界的桥梁。
Pixels per inch，准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度，等于2.54厘米，大约是食指最末端那根指节的长度。ppi（像素密度）越高，代表屏幕显示效果越精细。Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。
再用iPhone 3gs和4s来举例。如上图，3gs上显示该图标需用5×4个像素渲染，而4s显示同样图标却用了10×8个像素渲染，而体现在实际屏幕中，这两者尺寸却是一样的。这是因为Retina屏幕把2×2个像素当1个像素使用，画质却更清晰。我们就可以说，iPhone4s的ppi大于iPhone3gs。
dp：
dp/dip（Density Independent Pixels），是android开发里一种基于屏幕密度的抽象特有的单位。 你可以想象dp更类似一个物理尺寸，比如一张宽和高均为100dp的图片在320×480和480×800的手机上“看起来”一样大 。而实际 上，它们的像素值并不一样。dp正是这样一个尺寸，不管这个屏幕的密度是多少，屏幕上相同dp大小的元素看起来始终差不多大 。 设计师在做UI设计的时候通常最初是建立320*480这个尺寸的画布开始的，在这个尺寸下，ps里的1px就等于android中的1dp。注意，这里我们说的是“通常”
2.实际应用：
好了，铺垫了这么多概念性的专业术语，我们来点实际的。先来看看在真实的设计开发中我们最先考虑的UI适配问题。
iOS：
过去只属于Android阵营的头疼事儿，只是很多设计师选择性地忽视android适配问题，只出一套iOS平台设计稿。随着苹果发布两种新尺寸的大屏iPhone 6/6plus，iOS平台尺寸适配问题终于还是来了，移动设计全面进入“杂屏”时代。看看下面三款iPhone尺寸和分辨率数据就知道屏幕有多杂了。
详细信息见下表：
那么问题来了， 现在APP设计开发必须考虑适配大、中、小三种屏幕。所以如何做到交付一套设计稿解决适配大中小三屏的问题？设计和开发之间采用什么协作模式？从上图我们可以得知4/4s与5/5c/5s/se一致，只是高度不同，所以两个尺寸之间没有什么不同，只要从剩下的5/6/6p三种尺寸中选择其一即可。
基本思路是：
1、选择一种尺寸作为设计和开发基准；
2、定义一套适配规则，自动适配剩下两种尺寸；
3、特殊适配效果给出设计效果。
这里我们来说一说如果一iPhone6/6s为基准
1st，视觉设计阶段，设计师按宽度750px（iPhone 6）做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。
2nd，输出两个交付物给开发工程师：一个是程序用到的@2x切图资源，另一个是宽度750px的设计标注图。
3rd，开发工程师拿到750px标注图和@2x切图资源，完成iPhone 6（375pt）的界面开发。此阶段不能用固定宽度的方式开发界面，得用自动布局（auto layout），方便后续适配到其它尺寸。
4th，适配调试阶段，基于iPhone 6的界面效果，分别向上向下调试iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大中小三屏适配。所以，iPhone6的750×1334是最适合基准尺寸。
只交付一套设计稿，默认用什么规则来适配？
前文提到适配策略是先选择iPhone 6作为基准设计尺寸，然后通过一套适配规则自动适配到另外两种尺寸。这套适配规则总结起来就一句话：文字流式，控件弹性，图片等比缩放。
控件弹性指的是navigation、cell、bar等适配过程中垂直方向上高度不变；水平方向宽度变化时，通过调整元素间距或元素对齐的方式实现自适应。这样屏幕越大，在垂直方向上可以显示更多内容，发挥大屏幕的优势。
Android：
了解了iOS的基本逻辑，我们来看看Android的，解决方法类似，但更复杂一些。因为Android屏幕尺寸实在太多，分辨率高低跨度非常大，不像苹果只有那么几款固定设备、固定尺寸。所以Android把各种设备的像素密度划成了好几个范围区间，给不同范围的设备定义了不同的倍率，来保证显示效果相近。像素密度概念虽然重要，但用不着我们自己算，iOS与Android都帮我们算好了。
如图所示，像素密度在120左右的屏幕归为ldpi，160左右的归为mdpi，以此类推。这样，所有的Android屏幕都找到了自己的位置，并赋予了相应的倍率：
- ldpi 0.75-倍 ，mdpi -1倍，hdpi -1.5倍，xhdpi-2倍，xxhdpi-3倍，xxxhdpi-4倍
那么Android手机那么多，具体怎么分？哪些手机是几倍的倍率呢？我们先看一张表，这是友盟2015年10月到2016年03月的数据：
就目前市场状况而言，各种手机的分辨率可以这样粗略判断。虽然不全面，但至少在1年内都还有一定的参考意义：
- ldpi 如今已绝迹，不用考虑
- mdpi [320×480] 新手机不会有这种倍率，屏幕通常都特别小
- hdpi [480×800、480×854、540×960] 早年的低端机，屏幕在3.5英寸档位
- xhdpi [720×1280] 早年的中端机，屏幕在5.0-5.5英寸档位
- xxhdpi [1080×1920] 早年的高端机，如今的中高端机，屏幕通常都在5.0英寸以上
- xxxhdpi [1440×2560] 少数2K屏手机
- 4K……
不难发现，真正决定显示效果的，是逻辑像素尺寸。为此，iOS和Android平台都定义了各自的逻辑像素单位。iOS的尺寸单位为pt，Android的尺寸单位为dp。说实话，两者其实是一回事。
单位之间的换算关系随倍率变化：
- 1倍：1pt=1dp=1px（mdpi、iPhone 3gs）
- 1.5倍：1pt=1dp=1.5px（hdpi）
- 2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6）
- 3倍：1pt=1dp=3px（xxhdpi、iPhone 6 plus）
- 4倍：1pt=1dp=4px（xxxhdpi）
安卓手机有这么多屏幕，我到底依据哪种屏幕作图呢？没有必要为不同密度的手机都提供一套素材，大部分情况下，一套就够了 。
现在手机比较高的分辨率是1080×1920，你可以选择这个尺寸作图，但是图片素材将会增大应用安装包的大小。并且尺寸越大的图片占用的内存也就 越高 。如果你不是设计ROM，而是做一款应用，我建议大家用PS在720×1280的画布中作图。这个尺寸兼顾了美观性 、经济性和计算的简单。美观性是 指，以这个尺寸做出来的应用，在720×1280中显示完美，在1080×1920中看起来也比较清晰；经济性是指，这个分辨率下导出的图片尺寸适中，内 存消耗不会过高，并且图片文件大小适中，安装包也不会过大；计算的简单，就是1dp=2px啊，多好计算啊！ 并且比如文字大小在720×1280的PS画布中是24px，那么告诉工程师，这个文字大小是12sp。 安卓系统字号设为“普通”时，sp与px的尺寸换算和dp与px是一样的 。
在720×1280中作图，要考虑向下兼容不同的屏幕。通过计算我们可以知道，320×480和480×800的屏幕宽度都是320dp，而720×1280和1080×1920的屏幕宽度都是360dp 。它们之间有40dp的差距，这40dp在设计中影响还是很大的。如下图蝴蝶图片距离屏幕的左右边距在320dp宽的屏幕和360dp宽的屏幕中就不一样。不仅宽度上有差异，高度上的差异更加明显，要考虑屏幕之间的比例差异。
3.最后：
洋洋洒洒写了这么多其实都是在实战中搜索相关资料得来的经验。感谢互联网分享精神推动行业发展，这里只是汇总在一起，给自己做个笔记也给有需要的小伙伴做个总结。
文字与图片整理自：
《Android尺寸标注设计大全和Android切图规范》
《Android APPUI设计师必知：pt sp dp之间的关系》
《iPhone6 & 6 Plus 视觉设计适配说明》
《iOS APP设计一稿支持iPhone5/iPhone6/Plus》
《iPhone / iPad UI 界面设计与图标设计的尺寸设计规范》
《UI设计师不可不知的安卓屏幕知识》