App开发之px象素与pt点

产品开发的分工是一件挑战团队合作技巧的事情，以网页开发来说，由于网页的特性，单纯的网页视觉设计师很少能够直接掌握产品最终的外观，往往是在绘图软件里面将视觉部分定稿，再由前端工程师根据设计来将产品的视觉部分实现出来。举凡图片的尺寸、位置，组件的效果、色彩的RGB值、文字的尺寸等等，都必须清楚的传达才能够完整的重现原本的设计。

而在开发APP的时候，这些问题一样存在。在大部分的时候，我们都使用像素来做绘制以及开发App的单位，这没什么问题，尤其是iOS系统目前的屏幕尺寸还算单纯，使用像素作为沟通的单位基本上不会有什么太大的误会产生。需要的时候顶多是视觉设计师准备一台手持装置，透过xScope、Screenshots之类的工具实时在手机上检视设计稿，增加工作的效率。

但是文字的尺寸则会出现问题，实际上遇到的状况就是设计师提供的字体尺寸不对，开发人员如果按照设计师的数值，则制作出来的文字会比设计稿来得变小：

有经验的开发人员通常就直接把设计师给的数值直接乘以2使用，藉以得到原本设计的结果，但这其中当然是有些误会在其中。在这里我们发现设计师标示文字尺寸时是使用了pt这个单位，很容易让人把它跟像素搞混在一起，但它们却是完全不同的东西。

pt是常见的标示文字尺寸的单位，在绘图以及文书软件等几乎都是使用pt作为字体尺寸的单位，故一般称呼「字级」时，通常即是指pt，许多平面排版设计师都喜欢在手边准备一张字级对照表，方便与客户沟通时使用。

px与pt的区别

px ( pixel、又称为像素)与pt ( point、有时被称为点)是两个看起来很像、却完全不一样的单位(在某些场合他们是1：1的)，在很多时候却常常被搞混，或是制作过程根本没有分清楚、导致结果没有很精确。在绘图软件里面可以看到基本单位设定里面就有这两个选择：

px，即是pixel、像素。是屏幕上所显示的最小单位，当制作的版面是供屏幕浏览时，使用px可以精确的控制画面上显示效果。但也因为每个屏幕分辨率不同，像素的大小也不固定。在分辨率高的屏幕上，一个像素可能会小到肉眼无法辨识的大小。

pt，即是point，是一个标准的长度单位。定义上1pt=1/72英吋。因此它跟我们所熟悉的公分、公尺一样，可以明确的指出1pt的长度是多少。

也因此，像word这种以打印输出为需求的软件，字体大小使用pt就显得相当方便实用，只要软件设定是对的，使用多少pt的字级，透过打印后永远都会得到一样大小的字体。

但是在屏幕显示的时候，则需要透过一定的转换公式，但这边会遇到的另外一个问题就是各家操作系统的dpi并不一致。Windows系统一般都是设定96dpi，Mac的OSX系统则大多是72dpi。由于pt在定义上是1/72英吋的关系，因此在72dpi的系统上时1pt= 1px，这没什么问题，但在96dpi时则明显不适用，像素密度明显变细了，所以需要一个转换的公式，在这边，1px=0.75pt。（72 / 96 = 0.75 )

也因为这样，在许多时候都建议屏幕显示用的设计可以选择px作为字体的单位，例如网页的css样式表单就有pt、px以及百分比的em等方式来定义字体大小可供设计师选择。

开发iOS app的时候，虽然没有这么多样的单位可选，但设计师只需要简单的利用一些小技巧即可让文字尺寸与最后的结果相符：由于Photoshop使用1 inch = 72 pt的标准，因此当文件档案的分辨率设定为72的时候（这是默认值），1 pt = 1 px，而设定为144的时候1 pt = 2 px。

所以，在以Retina APP为主流的现在，开新文件时请记得将档案的分辨率设定为144，如此就能保证你的pt数值是开发人员需要的数值了。

pt与px理解起来其实不难，在应用的时候其实也相当单纯，在大部分的情况下适用的一个理论是：当设计的目的是用于供屏幕浏览，则趋向于使用px以方便掌握细节；而如果是为了做输出打印的需求,使用pt则是较好的选择。