协众信息UI设计尺寸单位

随着信息的呈现方式越来越多元，UI/Web设计师面对的工作也变得更加复杂。在这种情况下，许多基本功就容易被忽略掉，分辨率和设计的尺寸单位就是其中一个。iOS的pt、CSS的pt、Android的dp、ppi、px这些单位和名词到底是什么？该如何使用？  
举例来说，「pt（point，点）」这个单位，就同时出现在iOS、CSS、还有传统的平面设计里，但他们三者的意义却是不同的；而Android设计使用的单位则是「dp」，这些单位都不像px那样单纯好懂，也是我观察到现在，最多人学习UI设计时会卡关的地方。有些人没有学好，就干脆当作没这回事，继续使用px打天下，而这样子就会制造出一些问题，例如：  
从设计稿汇出的图文件素材不是工程师要的正确尺寸，要不是一直被要求重出，要不就是放上画面变成模糊的。  
设计师以小屏幕机种的尺寸来画稿子，工程师拿着大支手机来问：「那这要怎么办？」  
明明工程师照着设计来做，但一放到手机上，字就变得太小或太大。  
各种屏幕的分别  
在我们开始解释细节前，我们必须先定义讨论的范畴。  
本篇文章主要专注在探讨UI设计师如何处理各式各样的屏幕种类；屏幕的大小多变，就算大小一样，其细致度也有差，有的屏幕颗粒很粗，有的则细到眼睛看不到个别像素点，专业的设计师如何让自己的设计在各种屏幕上达到近似的体验呢？我们要先从「分辨率」看起。  
分辨率、像素密度  
分辨率一词在各种领域的定义有细微的差别，在UI设计中，我们可以理解成「显示器呈现影像细节的能力」。也就是说，成像单位越细小、越密集的屏幕，分辨率就越高。  
而大多数屏幕的成像单位是像素（Pixel），因此描述密度/分辨率的方法就是抓一段固定长度（通常是英吋），看看里面塞进了几颗像素点，固定长度能塞越多颗，就代表这个屏幕的点越细。