为何预置画布尺寸比真实分辨率小

　　为什么Sketch中预置的画板尺寸比真实分辨率小？这个问题被成百上千的初学者问起过，每次都要费劲口舌来解释，可是静电实在架不住每天两三遍甚至更多人问起同样的问题。那么，就在这篇文章中，让我们好好来解释一下，为什么预置画板会这么小。
　　事出有因，Sketch错了吗？
　　有太多太多刚刚上手sketch的小伙伴们都有这样的问题，为什么我在Sketch中建立画板，软件预置的Artboard尺寸总是那么小呢？比如iphone6的真实分辨率是7501334像素，但是sketch中的Artboard尺寸居然是375667像素。同样其他机型的预置尺寸也有问题，是sketch出错了吗？
　　PX和PT，别傻傻地分不清
　　我们必须了解最最基本的原理，才能在设计中以不变应万变。首先我们来普及两个度量单位PX和PT。PX大家可能比较熟悉，就是像素，英文pixel的简称。静电做最最通俗的解释，请找一个放大镜（不是电脑中的放大镜，是真实的放大镜），然后对准自己面前的显示器或者手机屏幕观看，大部分显示器会在放大镜下出现一个一个的点。这就是我们平时所说的像素的概念。在一台物理分辨率为10801920的显示器中，横向分布1920个点，纵向则有1080个点。这些点通过显示器的光学特性，为我们组成不同的图像。
　　请注意，在不同尺寸的显示器上，这些点的单位面积并不是一样的。比如一台22英寸的1080p液晶显示器与一台同样分辨率的27英寸的液晶显示器，我们通过仔细观察，可以发现这两台显示器的像素分布。直观感受就是，27英寸1080p分辨率的显示器的显示效果明显逊于22英寸1080p显示器的效果，比如颗粒感严重等等。一个重要的原因就是，两台液晶面板中的像素颗粒大小不一。
　　由此可见，像素这个单位是一个相对单位，我们不能用厘米，毫米等等这些绝对度量单位来衡量他的长度或者宽度，因为，1像素只代表一个单位的点。
　　另一个重要单位是PT，这个单位也是iOS开发过程中使用的单位，与px这样的相对单位不同，PT（Point）是一个绝对单位，中文名字是磅因（或者磅），1PT等于172英寸。我们同样用简单直观的例子来演示。
　　如果你手头有两部不同型号的iPhone，比如iphone6，iphone5，或者iphne4。静电的推荐是用一部ip6和一部ip5或者ip6plus，打开同样一款应用。同时准备好一把尺子。
　　比如我们使用最多的QQ音乐，打开它，使用尺子分别测量最上方title音乐馆文字的尺寸。经测量，音乐馆文字的宽度为8mm，此时打开iphone6plus或者不同尺寸的ios手机，同样测量它的尺寸，我们发现，音乐馆文字的尺寸也约为8mm左右。如果大家觉得此方法并不合适，可以请iOS开发人员分别写两个针对不同尺寸机型适配的同一个文件，并在两部手机安装，确保这个文件中的字体使用一个字号，比如30PT。在两个手机中运行并用尺子测量，我们发现他们的物理尺寸完全一样。
　　请大家记住一点，px是相对单位，pt为绝对单位（类似单位为厘米，毫米等等）。在不确定屏幕密度的情况下，px与pt没有任何可比性。
　　为什么使用3XX像素作为sketch设计稿的基准宽度？
　　原因一：
　　对于px与pt如何转换，涉及原理已经超出本文范围，这里简单的告诉大家，当dpi160的时候，1dp1px1pt（作者经验结论）。那么在这里我们要引出为什么使用375667这样的尺寸来做设计了，因为在这种情况下，也就是mdpi的分辨率（约320480）时，1dp1px1pt。
　　简单来计算下，当分辨率增大，比如增大到640960px时，在密度不变的情况下，2px1pt，因为像素点密集了，所以需要更多的点才能充满单位物理尺寸。这也就是为什么我们会觉得iphone4的画面比3GS的画面要细腻的原因，因为dpi（ppi）升高了。（dpi或者ppi为每英寸的点或者像素，代表密度。）
　　所以，320这个宽度（3XX）就作为基准宽度，也叫做一倍尺寸沿袭下来。因为使用1作为基数，换算确实方便。
　　下图是设计稿输出尺寸与分辨率对照表。
　　原因二：
　　对于iOS来说，同样沿袭了这样的概念，与安卓不同，320宽的基准分辨率下导出的素材为1x，也叫做一倍图。那么在iphone4，iphone5或者iphone6上使用的图则是2x，也叫做二倍图，同理，iphone6plus为3x三倍图。大家应该都知道对应分辨率与导出图片的对应关系。如果使用640宽或者750宽为基准作图，当然不是不可以，只不过我们在输出3x图的时候，是不是要乘以1。5呢？如果你一定要用3x三倍图的分辨率作图，那么最终要生成二倍图的时候，是不是要把输出尺寸乘以三分之二呢？
　　如果是1。5还好，那么三分之二到底是什么鬼的倍数，0。6666666？有强迫的设计师真的看的过去么？
　　但是，如果我们使用一倍图设计，那么1X22x，1X33x，多么的简单方便又容易理解不是么？
　　再加上sketch是全矢量绘图软件，不管你怎么放大缩小，导出的位图也是不会虚的。
　　原因三：
　　在开发工程师眼中，你如果使用640的分辨率作图，那么按原大小标注设计稿中的尺寸的话，他们同样在开发环境中是要换算为一倍尺寸的，比如你标注了字号为40px，那么最终开发工程师写在代码里的就是20pt，除以2的关系。
　　但是呢，如果使用一倍基准分辨率作图，那么就不用除以2啦，所有尺寸开发工程师直接拿过去随取随用，多么方便简单。相信之前跟随静电的xcode教程做过demo的小伙伴，一定对xcode中的尺寸设定印象深刻对吧。
　　要了解原理，建议大家用一用xcode，亲自体验一下开发工程师工作的原理，相信你的这些问题都可以迎刃而解。
　　使用一倍基准分辨率作图你的明智之选
　　sketch作为一款纯矢量的移动端UI设计软件，不管是从设计还是到后期与开发工程师的配合方面，都严格遵从开发原理，这种设计方法可以最大限度保证设计稿的复现，同时也可以减小文件体积和系统资源消耗，不管是从哪个方面看，都是设计师制作UI界面的明智之选。不过，基于位图输出的photoshop就没这方面的福利了，虽然photoshopCC2015加入了多画板功能，不过然并卵。一个文件中放置五六张画板对于sketch来说无比轻松，且输出文件只有几M，但反观photoshop，动辄几个G的文件体积和巨大的系统资源消耗，恩哼，你懂。