设计基础知识:快速理解PPI、PX 、PT、DP、SP

其它优秀文章推荐:

平面印刷避坑指南:工艺篇 中

如何制作美食海报? 手工感美食海报设计,原来这么简单!

设计师的职场沟通之道!

【P4D】是什么设计手法?写实空间合成海报训练法

商业设计中的创意思维与拓展训练

如何上下构图? 上下构图的秘密

设计中的形式感 :看透设计本质

你真的,会做高端海报吗?

 

什么是PPI,什么是PX?

PP全称是 Pixels Per Inch,指的是每英寸里包含的像素点即像素密度,每英寸包含的像素点越高,图像就越清晰。它常用来形容电子设备屏幕的分辨率。它受屏幕物理尺寸和屏幕像素尺寸的影响(例如常见的电脑屏幕像素尺寸是1920*1080p×)比如 iPhone 6 手机的分辨率是326PPI,说明在 iPhone6手机屏幕上,每英寸包含326个像素点。

顺带一提,DPI全称是 Dots per inch,指的是每英寸包含的颜色点,常用来表示印刷的精度,DPI的值越高,证眀每英寸包含的颜色点越多,图像就越清晰。

总体来讲,PPI跟DPI其实都是表示每英寸包含的点的数量,本质上是相同的。

我理解的PX( pixcel),是一个基础构成单位。用来描述电子设备屏幕上的点1个点的范围就是1px。

设计基础知识:快速理解PPI、PX 、PT、DP、SP

屏幕网格密度并不代表实际像素,仅作参考

如何计算PPI?

在《 Designer’ s guide to DPI》文章里,提岀的公式是这样的,觉得比较好理解。

设计基础知识:快速理解PPI、PX 、PT、DP、SP

 

设计基础知识:快速理解PPI、PX 、PT、DP、SP

 

设计基础知识:快速理解PPI、PX 、PT、DP、SP

 

举个例子, iPhone8 的屏幕物理尺寸是4.7英寸,像素尺寸是750*1334px,套用上方的公式,得出的结果如下。

 

设计基础知识:快速理解PPI、PX 、PT、DP、SP

 

什么是PT?

PT全称是 Point,是苹果设计和开发的专有单位,用来适配不同屏幕大小。它与屏幕的密度无关,个人理解的是,它描述的是比例关系,让元素在不同的屏幕大小下能保持不变的比例。大家都知道苹果是通过1x,2x,3x去适配不同大小的屏幕,在1x的环境下,1pt=1px,具体可以看下图理解。

 

 

设计基础知识:快速理解PPI、PX 、PT、DP、SP

 

完整的图示可以在https://www.paintcodeapp.com/news上查看,特别需要留意8Pus等机型,它的实际屏幕像素尺寸是1080*1920px,但是他的设计尺寸是1242*2208px,这会带来什么后果?答案是会变模糊。因为1242/1080=1.15,相当于设计图中的1.15p×等于实际屏幕的1个像素,两者不是整倍的关系,所以会变的模糊,可以参照下图理解。

 

设计基础知识:快速理解PPI、PX 、PT、DP、SP

 

下面说一下1pt在不同的倍数下对应的像素关系,假设放大到相同的像素大小。

 

设计基础知识:快速理解PPI、PX 、PT、DP、SP

 

假定在相同的尺寸下,会更直观的感受到我之前说的比例关系。假定下图是在相同的物理尺寸下,比如1*1英寸。虽然屏幕的密度不同,但是占的比例是大体相同的。

 

设计基础知识:快速理解PPI、PX 、PT、DP、SP

 

 

注意:

不要跟印刷使用的pt产生混淆,这两个PT是不一样的。印刷的pt=1/72inch,是1个固定值。而苹果PT在不同的屏幕分辨率下,等于不同的像素数。

什么是DP,什么是SP?

DP的全称是 Density – independent pixels,也会写成DP,读作’dips’是安卓设计和开发的专有单位,它定义除字体之外的所有元素的大小,也是与屏幕密度无关,可以理解成跟苹果的PT一样,只不过一个是苹果专有,一个是安卓专有。下图是相同DP在不同高低屏幕密度(PPI)中的表现。

 

 

设计基础知识:快速理解PPI、PX 、PT、DP、SP

图片来源于官方文档

 

SP的全称是 Scalable pixels,是安卓的字体单位。用来定义字体大小。它的功能与DP相似,只不过是字体的专用单位。

DP与PX之间如何转换?

由于市面上的安卓设备屏幕尺寸很多,所以安卓为了能够在不同的屏幕大小中有不错的表现形式,它跟苹果一样,对市面上的屏幕划分了5个标准尺寸。

 

 

设计基础知识:快速理解PPI、PX 、PT、DP、SP

 

随着时代的发展,安卓的屏幕尺寸也在不断的增加。

 

设计基础知识:快速理解PPI、PX 、PT、DP、SP

 

官方文档定义“ A dp is equal to one physical pixel on a screen with a density of160.”所以,安卓在160DPI的情况下,1DP=1PX。相当于苹果的1x。这里的DPI,你可以理解成PPI。

 

设计基础知识:快速理解PPI、PX 、PT、DP、SP

官方给出的DP计算公式

 

带入数值会好理解一些,我们来验证一下,在160DPI的情况下,是不是1DP=1PX?

将 width in pixels设为1px,然后设screen density(也就是DPI/PPI)为160,得出结果DP=1。

 

设计基础知识:快速理解PPI、PX 、PT、DP、SP

带入数值计算

 

如果想要知道DP在不同DP下对应的PX值呢?下边是我基于官方DP计算公式做出的变形。

 

 

设计基础知识:快速理解PPI、PX 、PT、DP、SP

将公式简化

设计基础知识:快速理解PPI、PX 、PT、DP、SP

 

大家可以将下方的表格的数值带入公式中,去理解简化的公式以及之间的关系。

 

设计基础知识:快速理解PPI、PX 、PT、DP、SP

 

留一个问题,猜猜为什么要优先计算DPI/160?

联系作者:

https://www.zcool.com.cn/u/18834828

设计基础知识:快速理解PPI、PX 、PT、DP、SP



属性标签: , , , ,

欢迎留言

页面生成消耗的时间 2.610 秒,此页面一共查询了 105 次数据库!缓存时间:2020-09-28 06:02:12你的IP为:116.179.32.223