以iPhoneInch为例，让你明白UI和WEB的尺寸单位概

　　你会发现，当你有耐心从头开始理解一件事情的时候，它就会变得很简单了。
　　随着信息的呈现方式越来越多元，UIWeb设计师面对的工作也变得更加复杂。在这种情况下，许多基本功就容易被忽略掉，分辨率和设计的尺寸单位就是其中一个。iOS的pt、CSS的pt、Android的dp、ppi、px这些单位和名词到底是什么？该如何使用？
　　举例来说，pt（point，点）这个单位，就同时出现在iOS、CSS、还有传统的平面设计里，但他们三者的意义却是不同的；而Android设计使用的单位则是dp，这些单位都不像px那样单纯好懂，也是我观察到现在，最多人学习UI设计时会卡关的地方。有些人没有学好，就干脆当作没这回事，继续使用px打天下，而这样子就会制造出一些问题，例如：
　　从设计稿汇出的图文件素材不是工程师要的正确尺寸，要不是一直被要求重出，要不就是放上画面变成模糊的。
　　设计师以小屏幕机种的尺寸来画稿子，工程师拿着大支手机来问：那这要怎么办？
　　明明工程师照着设计来做，但一放到手机上，字就变得太小或太大。
　　我认为要能把观念熟练地应用在工作上，就不能只是死背单位之间的转换公式，不过很可惜的是，我看网络上大部分的文章都是直接把公式写出来，缺乏一个对读者友善的解释方式；但这也有部分原因是我们的教育方法养成了多数人拿到课本就开始找公式的习惯，我希望能够多多少少修正这种情况，所以有了写这篇文章的念头。
　　你会发现，当你有耐心从头开始理解一件事情的时候，它就会变得很简单了。
　　各种屏幕的分别
　　在我们开始解释细节前，我们必须先定义讨论的范畴。
　　本篇文章主要专注在探讨UI设计师如何处理各式各样的屏幕种类；屏幕的大小多变，就算大小一样，其细致度也有差，有的屏幕颗粒很粗，有的则细到眼睛看不到个别像素点，专业的设计师如何让自己的设计在各种屏幕上达到近似的体验呢？我们要先从分辨率看起。
　　分辨率、像素密度
　　分辨率一词在各种领域的定义有细微的差别，在UI设计中，我们可以理解成显示器呈现影像细节的能力。也就是说，成像单位越细小、越密集的屏幕，分辨率就越高。
　　而大多数屏幕的成像单位是像素（Pixel），因此描述密度分辨率的方法就是抓一段固定长度（通常是英吋），看看里面塞进了几颗像素点，固定长度能塞越多颗，就代表这个屏幕的点越细。
　　这就像我们计算人口密度时，会抓出一平方公里的地区，然后看看里面塞了多少人，就能描述人口密度了。
　　举个例子，现在苹果发表了一支很奇葩的方形手机，屏幕长宽都只有一英吋，画面大小是1010pixel，名称叫做iPhoneInch：
　　库克：为了进一步与任天堂加深合作关系，苹果再一次重新发明了手机。
　　豪口爱哟～呜～～～！全场起立鼓掌。
　　好的，这支手机的屏幕长宽都是1英吋、长宽各排列了10颗像素，显然我们如果想描述屏幕有多细致的话，可以说：屏幕的像素密度是每英吋10pixel，或者换句话说，iPhoneInch的分辨率是10ppi。
　　等一下，ppi这单位是什么？意思就是PixelsPerInch，每英吋塞进了几颗像素点（像素密度）。
　　由于市场反应良好，反正苹果做什么大家买就对了；来年苹果老调重弹，又推出了s升级版iPhoneInchs：
　　这是我们有史以来最好的手机，Amazing～库克语毕，全场欢呼不断。
　　接着播放产品介绍影片。
　　在上一轮斗争失势遭到明升暗贬，沦为影片配音员的CDOJonyIve操着一口迷人的英国腔开始介绍产品：我们经过了彻底地重新设计，现在有金色版，让每个人的个性能充分表达
　　看来钱宁兄redesign的定义可能和大多数人不太一样。
　　接着库克把保险业务Phil叫上台，解释硬件配置。
　　这是我们史上最好的屏幕，像素点的密度提升到先前的两倍，只要你目洨，它就是视网膜屏幕，让你分辨不出像素点，售价只要9999。
　　好，既然长宽的像素点都提升为两倍来到了2020pixel，那我们依照前面的说法，这块屏幕分辨率就是20ppi。
　　OK，现在我们都会作运算了，让我们暂且搁下上面的方块手机，回到昔日荣光iPhone7，拿尺来测量看看：
　　这支iPhone7的屏幕宽度是2。3吋，横向总共排列了750颗pixel，也就是说，每英吋塞进了7502。3326颗pixel，所以我们会说iPhone7的分辨率是326ppi。
　　关系式如下：
　　分辨率关系式
　　清楚了解何谓分辨率以后，现在来看看绘图时的状况吧。
　　iOS的pt单位
　　让我们继续稍早的故事，由于苹果又再一次重新发明手机，公司里的设计师和工程师可苦了，又要做新的App来上架，PM立刻准备好了两代机种给工程师测试：
　　好，美工，你要在画面上放什么东西？工程师一脸不耐烦地说。
　　那个我不是美设计师还没说完，就被大吼一声：
　　啊？你连分辨率都要人教，还说自己是设计师！
　　呵呵，这工程师一定南部来的。
　　好啦我要在画面上放一条分隔线，灰色的。
　　粗细呢？
　　1px。
　　呵呵！就说你是美工，说要1px？来，你自己看看这是什么
　　怎么会两台手机的画面不一样呢？
　　原来是因为，当一个屏幕分辨率（像素密度）越高的时候，像素点就会越密集、越小颗，因此我们使用px当单位来做UI的话，就会发生不同分辨率的屏幕呈现不同的状况，那这要怎么解决呢？我们继续看下去。
　　工程师：来，美工，我跟你说，我现在跟你讲好一件事，你看一下这两支手机的画面。
　　看到左边银色机子的小红点没？
　　有喔～
　　现在开始，以银色机子的1颗px为基准，这颗红点的大小，就当成新的标准尺寸单位，你就叫它1pt（point，点），这个点点不管搬到哪里就是那么大，我现在把它搬到金色的机子上
　　你看，在金色机子上，红点为了维持一样的大小，他的长宽就会各涵盖到2颗px，所以原本银色机子上1pt等于1px，但到了屏幕密度两倍的地方，1pt的大小就会代表2px，我们从今以后就不要用px当单位了，这样好不好？
　　好喔～但是我弄懂以后你不能再叫我美工了！
　　好啦！那刚刚的分隔线可以帮我弄粗一点吗？
　　你要多粗？
　　就粗一点啊！
　　所以啊，一个新单位：pt（point）的诞生，就是为了解决不同的屏幕上，px大小会变来变去的问题，现在先让工程师和设计师领个便当休息一下，我们来看看应用题：
　　由左至右，分别为iPhone第一代、iPhone4，与iPhone6Plus
　　苹果推出第一代iPhone一直到现在的iPhone7，屏幕的像素密度有两次大变化（注意是密度变化喔！我们在这里不管屏幕的大小），第一次是在iPhone4的时候，屏幕尺寸不变，但像素密度变成两倍，来到了326ppi，贾伯斯称呼其为视网膜屏幕（RetinaDisplay）。
　　而第二次是iPhone6推出时，也一并出现了大尺寸的iPhone6Plus，Plus不只是大，而且像素密度还变成了三倍，目前苹果所有的产品里，只有iPhone67Plus拥有三倍密度的屏幕。
　　细心的你可能发现Plus401ppi明明就不是初代iPhone163ppi的三倍，那怎么会说是三倍密呢？这个为了避免你吸收来不及，先保留待下次解释，总之你先记住，iPhone67Plus是目前拥有三倍密度屏幕的机种。
　　好，我们回忆一下刚刚的小剧场：
　　工程师在第一个屏幕上放了一颗1px的小红点，说那个大小叫做1pt，这个点拿到右边的新机上，大小不变，但长宽变成了2px，所以如果以后用pt来当大小单位的话，就不用再管那个变来变去的px了。
　　在iOS的世界也是这么运作的，我们在初代iPhone上标出一颗红色的pixel，然后说它的长度（或宽度）叫做1pt，这颗红色的点拿到有视网膜屏幕、密度两倍的iPhone4上，它的长度就会涵盖了视网膜屏幕上的2若拿到三倍密度的Plus上面，猜猜这个小红点的长度会涵盖几px？
　　如果你知道为什么会是3px，那恭喜你真的完全弄懂了背后的机制，就是这样子而已，现在我们来看看Android。
　　Android的dp单位
　　在Android的世界里，手机厂牌型号好多好多，屏幕大小和密度也是一团乱；Google身为教主，当然要制订一套规则来一统天下，方法呢，就是制定好几个密度等级：
　　如果你的屏幕分辨率落在160ppi左右的话（注），我们就称之为MDPI（中等分辨率）；那如果你的屏幕分辨率落在320ppi左右呢，就叫做XHDPI，ExtraHigh（超高分辨率）其余按图类推。
　　注：Android用的单位叫dpi，但为了沟通方便，我们都还是用ppi
　　接着就跟苹果一样。学人精Google说，我们把MDPI的屏幕定为基准点，它是一倍像素密度（上头写的1x），我们在这颗屏幕上挑一颗pixel，把它弄成红色，接着把这个小红点移到XHDPI的2x屏幕上的时候，它就会变成涵盖2px了，所以以后就把这颗小红点的尺寸变成新单位，iOS叫做pt是吧？好，那这个新单位我叫它dp（DensityIndependentPixels）！
　　所以，iOS的pt和Android的dp其实是相同的运作原理，使用它当单位来做图、沟通，就可以避免使用px造成的偏差了。
　　网页设计里的pt单位
　　除了iOS和Android外，如果也有接触网页设计的朋友，可能知道CSS里也有pt这个单位可以使用，但在这里先给结论：CSS的pt单位和我们前面所提的iOSpt其实是没有关系的，其运作方式也不相同，所以硬要放在一起想就会永远搞不清楚啦！
　　pt这个单位词，其实最早源自于传统的铅字印刷，是用来表示铅字块的尺寸，在印刷和平面设计的世界里，1pt172英吋；而CSS之所以有pt这个单位，其实是要把网页印刷打印出来的时候用到的。
　　在网页设计里，屏幕显示和实体印刷，可以拥有两份不同的CSS来决定样式；习惯良好的网页设计师，会特别写一份CSS，在印刷的时候给计算机使用（例如拿掉背景图、字体颜色改成灰阶，比较省墨水），而实体世界的字级单位：pt就会在这时派上用场，所以其实CSS里的pt单位，不是让你拿来在屏幕上使用的喔！
　　适合屏幕显示的CSS单位有em、rem、px等等，有兴趣的朋友可以再自行研究。
　　结论
　　OK，今天这篇文章已经完成单位的观念解释，而在做图时的单位应用、出图时的注意事项，我们下篇文章再来研究。如果这篇文对你有帮助，也分享出去给更多人一起精进吧！