dpi、ppi、dp、pt、sp这几个词语是不是看到就感觉脑子蒙圈了？

作为一名 UI/UX/PD/etc. 设计师，因为不了解这些知识而闹笑话的事情几乎每天都在发生，不知道这些甚至连自己的做设计的电脑屏幕都不了解你觉得真的好吗？

没关系，今天学霸小编整理了一套系统的解剖，教你正确区分！如果觉得这篇文章有用，请收藏，如果你是小白，更应该收藏啦，为了以后学习使用！对不对，将你的感悟写在评论区，大家一起成长！

DPI 和 PPI 是什么？

UI设计高端学习群：583915450，100G学习教程资料，备注：领取资料

简单举个例子吧，我们手头上的 iPhone(6~7) 宽为 2.3 英寸，高为 4.1 英寸，根据勾股定理得出这块屏幕的尺寸（屏幕对角线距离）是 4.7 英寸。同时，iPhone(6~7)屏幕宽（每行）有 750 个像素（发光点），高（每竖）有 1334 颗像素（发光点）。

分辨率、像素和屏幕尺寸

所以光看屏幕的分辨率对于设计师来说是不具备多少实际意义的，通过分辨率计算得出的像素密度（PPI）才是设计师要关心的问题，我们通过屏幕分辨率和屏幕尺寸就能计算出屏幕的像素密度的。

再次使用 iPhone（6~7）作为例子。我们知道该屏幕的横向物理尺寸为 2.3 英寸 ，且横向具有 750 颗像素，根据下面的公式，我们能够算出 iPhone（6~7）的屏幕是 326PPI，意为每寸存在 326 颗像素。

其实不论我们怎么除，计算得出来的像素密度（PPI）都会是这个数，宽存在像素除以宽物理长度，高存在像素除以高物理长度，得数都接近于 326。

对设计会造成什么样的影响

一块 326*326px 的正方形色块在一台 iPhone 7 上面展现出来的物理尺寸将会会是 1*1 英寸。这是因为该屏幕每英寸能容纳 326 颗像素，所以 326px 凑在一起刚好就是 1 英寸。假设我们能将 iPhone 7 手机屏幕 PPI 调低 50% 变为 163，色块还是 326*326px,这个色块的物理尺寸会变成 2*2 英寸，同样多的像素，看起来却大了一倍。

因为我们的色块是 326*326px 大小的，而这台 163PPI 的假 iPhone 7 每英寸上面只有 163 颗像素，为了要展示 326*326px 的色块，它就要多用 1 英寸的屏幕，所以这个色块在屏幕上面看起来就“长大了”一倍。

总结：

像素本身没有尺寸，你可以将 1920 *1080 颗像素放到一台 40 寸的小米电视机里面，也可以将同样多的像素全部塞到一台 5.5 寸的 iPhone7 Plus 手机里面去。

只有跟屏幕尺寸一起的时候，谈论像素才有意义，因为我们能够算出该屏幕的 PPI。

DPI 跟 PPI 虽然概念相近，但是我奉劝你还是不要拿着他们俩混用，虽然可能好多人告诉你这样没啥关系。

在设计过程中，我们并不见得真的要去计算各种东西的实际尺寸，但是对于原理的把握能让你心里有个底，或许就是我们常说的「意识」。别以为每个人的屏幕上显示的都会跟你屏幕上显示的是一样的。