用最直观的案例，帮你彻底搞懂 UI 和 Web 的尺寸单位

2016-12-30 10:15:00

随着信息的呈现方式越来越多元，UI/Web 设计师面对的工作也变得更加复杂。在这种情况下，许多基本功就容易被忽略掉，分辨率和设计的尺寸单位就是其中一个。iOS 的 pt、CSS 的 pt、Android 的 dp、ppi、px⋯⋯这些单位和名词到底是什么？该如何使用？

举例来说，「pt （point，点）」这个单位，就同时出现在 iOS、CSS、还有传统的平面设计里，但他们三者的意义却是不同的；而 Android 设计使用的单位则是「dp」，这些单位都不像 px 那样单纯好懂，也是我观察到现在，最多人学习 UI 设计时会卡关的地方。有些人没有学好，就干脆当作没这回事，继续使用 px 打天下，而这样子就会制造出一些问题，例如：

从设计稿汇出的图文件素材不是工程师要的正确尺寸，要不是一直被要求重出，要不就是放上画面变成模糊的。
设计师以小屏幕机种的尺寸来画稿子，工程师拿着大支手机来问：「那这要怎么办？」
明明工程师照着设计来做，但一放到手机上，字就变得太小或太大。

我认为要能把观念熟练地应用在工作上，就不能只是死背单位之间的转换公式，不过很可惜的是，我看网络上大部分的文章都是直接把公式写出来，缺乏一个对读者友善的解释方式；但这也有部分原因是我们的教育方法养成了多数人拿到课本就开始找公式的习惯，我希望能够多多少少修正这种情况，所以有了写这篇文章的念头。

你会发现，当你有耐心从头开始「理解」一件事情的时候，它就会变得很简单了。

各种屏幕的分别

在我们开始解释细节前，我们必须先定义讨论的范畴。

本篇文章主要专注在探讨 UI 设计师如何处理各式各样的屏幕种类；屏幕的大小多变，就算大小一样，其细致度也有差，有的屏幕颗粒很粗，有的则细到眼睛看不到个别像素点，专业的设计师如何让自己的设计在各种屏幕上达到近似的体验呢？我们要先从「分辨率」看起。

分辨率、像素密度

分辨率一词在各种领域的定义有细微的差别，在 UI 设计中，我们可以理解成「显示器呈现影像细节的能力」。也就是说，成像单位越细小、越密集的屏幕，分辨率就越高。

而大多数屏幕的成像单位是像素（Pixel），因此描述密度/分辨率的方法就是抓一段固定长度（通常是英吋），看看里面塞进了几颗像素点，固定长度能塞越多颗，就代表这个屏幕的点越细。

这就像我们计算人口密度时，会抓出一平方公里的地区，然后看看里面塞了多少人，就能描述人口密度了。

举个例子，现在苹果发表了一支很奇葩的方形手机，屏幕长宽都只有一英吋，画面大小是 10×10 pixel，名称叫做「iPhone Inch」：

库克：「为了进一步与任天堂加深合作关系，苹果再一次重新发明了手机。」

「豪口爱哟～呜～～～！」全场起立鼓掌。

好的，这支手机的屏幕长宽都是 1 英吋、长宽各排列了 10 颗像素，显然我们如果想描述屏幕有多细致的话，可以说：「屏幕的像素密度是每英吋 10 pixel」，或者换句话说，「iPhone Inch 的分辨率是 10 ppi」。

等一下，ppi 这单位是什么？意思就是「Pixels Per Inch，每英吋塞进了几颗像素点（像素密度）」。

由于市场反应良好，反正苹果做什么大家买就对了；来年苹果老调重弹，又推出了 s 升级版—— iPhone Inch s：

「这是我们有史以来最好的手机，Amazing～」库克语毕，全场欢呼不断。

接着播放产品介绍影片。

在上一轮斗争失势遭到明升暗贬，沦为影片配音员的 CDO Jony Ive 操着一口迷人的英国腔开始介绍产品：「⋯⋯我们经过了彻底地重新设计，现在有金色版，让每个人的个性能充分表达⋯⋯」

看来钱宁兄「re-design」的定义可能和大多数人不太一样。

接着库克把保险业务 Phil 叫上台，解释硬件配置。

「这是我们史上最好的屏幕，像素点的密度提升到先前的两倍，只要你目洨，它就是视网膜屏幕，让你分辨不出像素点，售价只要 $9999。」

好，既然长宽的像素点都提升为两倍来到了 20×20 pixel，那我们依照前面的说法，这块屏幕分辨率就是 20 ppi。

OK，现在我们都会作运算了，让我们暂且搁下上面的方块手机，回到昔日荣光 iPhone 7，拿尺来测量看看：

这支 iPhone 7 的屏幕宽度是 2.3 吋，横向总共排列了 750 颗 pixel，也就是说，每英吋塞进了 750/2.3 ≈ 326 颗 pixel，所以我们会说「iPhone 7 的分辨率是 326 ppi」。

关系式如下：

△ 分辨率关系式

清楚了解何谓分辨率以后，现在来看看绘图时的状况吧。

iOS 的 pt 单位

让我们继续稍早的故事，由于苹果又再一次重新发明手机，公司里的设计师和工程师可苦了，又要做新的 App 来上架，PM 立刻准备好了两代机种给工程师测试：

「好，美工，你要在画面上放什么东西？」工程师一脸不耐烦地说。

「那个⋯⋯我不是美⋯⋯」设计师还没说完，就被大吼一声：

「啊？你连分辨率都要人教，还说自己是设计师！」

呵呵，这工程师一定南部来的。

「好啦⋯⋯我要在画面上放一条分隔线，灰色的。」

「粗细呢？」

「1 px。」

「呵呵！就说你是美工，说要 1px？来，你自己看看这是什么」

怎么会两台手机的画面不一样呢？

原来是因为，当一个屏幕分辨率（像素密度）越高的时候，像素点就会越密集、越小颗，因此我们使用 px 当单位来做 UI 的话，就会发生不同分辨率的屏幕呈现不同的状况，那这要怎么解决呢？我们继续看下去。

工程师：「来，美工，我跟你说，我现在跟你讲好一件事，你看一下这两支手机的画面。」

「看到左边银色机子的小红点没？」

「有喔～」

「现在开始，以银色机子的『1 颗 px』为基准，这颗红点的大小，就当成新的标准尺寸单位，你就叫它『1 pt (point, 点)』，这个点点不管搬到哪里就是那么大，我现在把它搬到金色的机子上⋯⋯」

「你看，在金色机子上，红点为了维持一样的大小，他的长/宽就会各涵盖到 2 颗 px，所以原本银色机子上『1 pt』等于『1 px』，但到了屏幕密度两倍的地方，『1 pt』的大小就会代表『2 px』，我们从今以后就不要用 px 当单位了，这样好不好？」

「好喔～但是我弄懂以后你不能再叫我美工了！」

「好啦！那刚刚的分隔线可以帮我弄粗一点吗？」

「你要多粗？」

「就粗『一点』啊！」

「⋯⋯」

所以啊，一个新单位：pt （point）的诞生，就是为了解决不同的屏幕上，px 大小会变来变去的问题，现在先让工程师和设计师领个便当休息一下，我们来看看应用题：

由左至右，分别为 iPhone 第一代、iPhone 4，与 iPhone 6 Plus

苹果推出第一代 iPhone 一直到现在的 iPhone 7，屏幕的「像素密度」有两次大变化（注意是密度变化喔！我们在这里不管屏幕的大小），第一次是在 iPhone 4 的时候，屏幕尺寸不变，但像素密度变成两倍，来到了 326 ppi，贾伯斯称呼其为「视网膜屏幕（Retina Display）」。

而第二次是 iPhone 6 推出时，也一并出现了大尺寸的 iPhone 6 Plus，Plus 不只是大，而且像素密度还变成了三倍，目前苹果所有的产品里，只有 iPhone 6/7 Plus 拥有三倍密度的屏幕。

细心的你可能发现 Plus 401 ppi 明明就不是初代 iPhone 163 ppi 的三倍，那怎么会说是三倍密呢？这个为了避免你吸收来不及，先保留待下次解释，总之你先记住，iPhone 6/7 Plus 是目前拥有三倍密度屏幕的机种。

好，我们回忆一下刚刚的小剧场：

工程师在第一个屏幕上放了一颗 1 px 的小红点，说那个大小叫做「1 pt」，这个点拿到右边的新机上，「大小不变」，但长宽变成了 2px，所以如果以后用「pt」来当大小单位的话，就不用再管那个变来变去的 px 了。

在 iOS 的世界也是这么运作的，我们在初代 iPhone 上标出一颗红色的 pixel，然后说它的长度（或宽度）叫做「1 pt」，这颗红色的点拿到有视网膜屏幕、密度两倍的 iPhone 4 上，它的长度就会涵盖了视网膜屏幕上的 2px；若拿到三倍密度的 Plus 上面，猜猜这个小红点的长度会涵盖几 px？

如果你知道为什么会是 3px，那恭喜你真的完全弄懂了背后的机制，就是这样子而已，现在我们来看看 Android。

Android 的 dp 单位

在 Android 的世界里，手机厂牌型号好多好多，屏幕大小和密度也是一团乱；Google 身为教主，当然要制订一套规则来一统天下，方法呢，就是制定好几个「密度等级」：

如果你的屏幕分辨率落在 160 ppi 左右的话(注)，我们就称之为「MDPI (中等分辨率)」；那如果你的屏幕分辨率落在 320 ppi 左右呢，就叫做「XHDPI，Extra-High (超高分辨率)」⋯⋯其余按图类推。

注：Android 用的单位叫 dpi，但为了沟通方便，我们都还是用 ppi

接着就跟苹果一样。学人精 Google 说，我们把 MDPI 的屏幕定为基准点，它是一倍像素密度（上头写的 1x），我们在这颗屏幕上挑一颗 pixel，把它弄成红色，接着把这个小红点移到 XHDPI 的 2x 屏幕上的时候，它就会变成涵盖 2px 了，所以以后就把这颗小红点的尺寸变成新单位，iOS 叫做「pt」是吧？好，那这个新单位我叫它「dp (Density-Independent Pixels)」！

所以，iOS 的 pt 和 Android 的 dp 其实是相同的运作原理，使用它当单位来做图、沟通，就可以避免使用 px 造成的偏差了。

网页设计里的 pt 单位

除了 iOS 和 Android 外，如果也有接触网页设计的朋友，可能知道 CSS 里也有 pt 这个单位可以使用，但在这里先给结论：CSS 的 pt 单位和我们前面所提的 iOS pt 其实是没有关系的，其运作方式也不相同，所以硬要放在一起想就会永远搞不清楚啦！

pt 这个单位词，其实最早源自于传统的铅字印刷，是用来表示铅字块的尺寸，在印刷和平面设计的世界里，1 pt = 1/72 英吋；而 CSS 之所以有 pt 这个单位，其实是要把网页印刷/打印出来的时候用到的。

在网页设计里，屏幕显示和实体印刷，可以拥有两份不同的 CSS 来决定样式；习惯良好的网页设计师，会特别写一份 CSS，在印刷的时候给计算机使用（例如拿掉背景图、字体颜色改成灰阶，比较省墨水），而实体世界的字级单位：pt 就会在这时派上用场，所以其实 CSS 里的 pt 单位，不是让你拿来在屏幕上使用的喔！

适合屏幕显示的 CSS 单位有 em、rem、px ⋯⋯等等，有兴趣的朋友可以再自行研究。