ppi是什么意思啊300dpi和300ppi一样吗DPI和PPIDPI(Dots Per Inch)最初用于测量印刷品上每英寸的点密度,这意味着您的打印机在一英寸内可以打印多少个点。 DPI 值越小,图像的细节就越少。当DPI的概念用在电脑屏幕上时
DPI 和PPI
DPI(Dots Per Inch)最初用于测量印刷品上每英寸点数的密度,这意味着您的打印机在一英寸内可以打印多少个点。 DPI 值越小,图像的细节就越少。
当DPI的概念用在电脑屏幕上时,应该称为PPI(Pixels Per Inch)。同样:PPI 是计算机屏幕上每英寸可以显示的像素数。你说DPI大家都能理解。
Windows系统默认PPI为96,Mac OS系统默认PPI为72。
一般来说,非视网膜屏幕的台式电脑的PPI 在72 到120 之间。使用72 到120 之间的PPI 进行设计,基本上可以确保你的作品尺寸在大多数情况下看起来相似。
举个栗子:
27'Mac的PPI为109,意味着每英寸有109个像素。显示器的宽度(包括边框)为25.7英寸,屏幕的纯宽度差不多是23.5英寸,所以23.5109 2560,这表明屏幕分辨率为25601440px。
*我知道23.5109不等于2560。它实际上应该是23.486238532英寸。使用像素/厘米更准确。我只是给你举个例子,你知道的。
PPI 对设计的影响
假设您设计一个109109px 的蓝色正方形,该正方形的物理尺寸为11 英寸。如果你的屏幕是72PPI,那么盒子看起来会比实际物理尺寸大,因为72PPI 屏幕需要几乎1.5 英寸才能显示109px。
屏幕分辨率
屏幕分辨率对用户如何看待您的设计有巨大影响。幸运的是,CRT显示器已基本被淘汰。用户在使用液晶显示器时,基本都是使用显示器的原生分辨率,看起来比较舒服。
分辨率是屏幕上的像素数量。例如,对于25601440px的屏幕,屏幕水平有2560个像素,垂直有1440个像素。结合PPI的含义,大家应该明白,分辨率并不是物理尺寸的定义。你可以拥有一个像你家里的墙那么大或者像你的脚趾头那么大的屏幕,它们的分辨率可以是25601440px。
现在的液晶显示器都有原生固定分辨率(译者:我一般称之为点对点分辨率)。这种CRT显示器的原理各有不同,这里不再赘述。
我们的27英寸Mac显示器的点对点分辨率为25601440px,109PPI。如果你降低屏幕分辨率,你会发现屏幕上的窗口、图标等东西变大了,因为23.5英寸的显示器像素较少。
其实像素还是那么多,PPI还是那个PPI。它们就在那里,不多也不少。当我说像素较少时,我的意思是当您降低屏幕分辨率时,操作系统将拉伸以填充屏幕。这时CPU/GPU就会利用点对点的像素来计算出一组新的分辨率。
如果你想将27" Mac 的分辨率设置为1280720px,GPU 会将4 个像素视为1 个像素(22)。这有什么问题?当然是模糊的!这还不错嘛,毕竟,它们是可整除的像素。如果你制作像三分之一或四分之三这样的东西,转换将包含小数,这将使它更加混乱!如果你不相信我,请看下面的图片。
例如,在下面的例子中,在点对点屏幕上绘制了一条1px的线,然后屏幕分辨率降低了一半。为了填满屏幕,CPU 必须以150% 显示视觉效果。这相当于所有元素都变成原来的1.5倍,但是却没有半个像素,所以只能通过降低填充像素颜色的纯度来达到目的。
这就是为什么在使用视网膜屏幕的Macbook Pro 时,如果你想改变分辨率,系统会提示你该分辨率下的视觉效果(如下图),用户可以直观地感受到分辨率的变化。
用像素来表示物理尺寸是一种非常主观的表示,但他们并不认为这是谎言。
请记住:如果您希望在查看设计时保持尽可能完美的像素,请务必将屏幕分辨率设置为显示器的点对点原始分辨率。虽然您可能会觉得使用较低的分辨率更舒服,但在像素级别查看设计时尽可能精确非常重要。悲剧的是,有些人会使用辅助功能来看得更清楚,这会让你的作品看起来很难看。庆幸的是,此时用户看的比较仔细,没有去抓细节。
什么是4K?
最近你可能经常听到人们谈论4K。 4K现在既古老又时尚。在说4K之前,我们先来谈谈什么是HD(高清)。
请注意,HD 实际上是一个非常广泛的缩写。我们只讨论常见的解决方案。高清没有固定的标准。基本上,宽度为720 像素的任何内容都被视为高清。有些分辨率也成为标准定义,缩写为SD。
全高清是指分辨率为19201080px的屏幕。大多数电视和越来越多的高端手机都使用全高清分辨率(例如:这里没有品牌赞助商)。
4K标准的最小分辨率为38402160px。 4K 也称为QHD 或UHD(超高清)。简单来说,一个4K屏幕可以容纳四个1080P屏幕。
4K的另一个常见分辨率是40962160px,一般用于投影仪或专业相机。
如果我的电脑使用4K 显示器会发生什么?
当前的操作系统都不支持4K。如果您在Chromebook 或MacBook 上使用4K 屏幕,它们将使用最高DPI 模式,该模式将以2x 比例显示元素(原文:它将使用最高DPI 资源,在本例中为200% 或@2x) ,并以正常比例显示(不知道翻译是否正确),虽然看起来不错,但是很小。
请想一想:如果将12英寸4K屏幕放在12英寸高分辨率屏幕的电脑上,所有元素看起来都会比以前小2倍。
- 4K 是全高清的4 倍。
- 如果当前操作系统处理4K 但不缩放它。这意味着还没有4K 特定资产。 (不知道怎么翻译比较流畅)
- 目前还没有具有4K 分辨率的手机或平板电脑。
显示刷新率
本章可能存在一些理论问题,仅供参考和娱乐。
我们先跳出PPI和屏幕分辨率的话题,聊点别的。您可能已经注意到,屏幕分辨率设置附近有一个刷新率设置。和PPI没有关系。它是指屏幕上每秒显示的图像帧数。 60Hz 刷新率意味着每秒60 帧,120Hz 意味着每秒显示120 帧,依此类推。
在UI设计中,刷新率决定了你制作的动画是否显得流畅、细致。请注意,刷新率由处理图形的设备决定。即使你把120Hz的显示器连接到小霸王游戏机上,也达不到120Hz。
如果你还不明白,就看下面这个栗子。一只非常勤劳的霸王龙小明从A点跑到B点,它可以在60Hz屏幕上显示9帧,在120Hz屏幕上显示18帧。当然,霸王龙小明在120Hz屏幕上奔跑起来似乎更加优雅、更加努力。
注:有人说人眼无法察觉60Hz以上的差异。屁!当他不明白的时候,不要假装明白。你必须尽可能地鄙视他。 Tu(.) 凸起。
什么是视网膜屏幕?
当iPhone 4 发布时,视网膜屏幕就进入了公众视野。之所以称为视网膜,是因为屏幕的PPI非常高,以至于人眼根本看不到像素。
这个说法在iPhone 4刚出来的时候是有道理的,但是随着屏幕越来越好,我们的眼睛已经训练到可以看到屏幕上的像素,尤其是界面上的圆形元素更容易看清。
从技术上讲,他们将2 倍的像素塞进了与上一代物理尺寸相同的屏幕中。
哇!在不减小元素尺寸的情况下,同尺寸屏幕上元素的准确率提高了2倍。原来1个像素的空间现在有了4个像素,像素数量是以前的4倍。
再举个栗子。
注:很难表达iPhone 3GS 上的界面与其他设备上的iPhone 4 上的界面差异。如果你想仔细比较的话,可以下载我的demo,在两部手机上进行比较。
“Retina”是苹果公司的专有名词。其他公司只能使用“HI-DPI”或“Super Extreme Pixel Display”之类的词,或者他们根本不会说这种愚蠢的词,只有当你阅读设备描述时才会说。它会告诉您屏幕尺寸和DPI。
注意:苹果产品的DPI转换和分辨率的差异很容易理解,因为只有一个倍数。
换算系数是多少?
当你的设计要在不同PPI的屏幕上显示时,转换系数简直就是向日葵指南。当你掌握了葵花宝典之后,你就可以完全忽略装备的具体参数了(不要完全忽略,毕竟大家都不是原作者)。
我们就以iPhone 3GS 和iPhone 4 为例。如果物理尺寸相同的屏幕,长宽各有2倍的像素数,那么换算系数就是2,也就是说你原来可以容纳之前4倍的像素数,所以你得扩大它的尺寸在长度和宽度上。 2次。 (车祖鲁这家伙话多,真不是编造的话来骗取稿费吗?)
假设你画了一个4444px的iOS图标,然后给它起一个充满活力的名字,比如“赵四”。
为了让“赵四”看起来像iPhone 4上的“赵四”,你必须再画一个两倍大的,如下图。
是不是很简单呢?现在“Zhaosi.png”有两个版本,一种适用于正常PPI下的3GS,另一种适用于2倍大尺寸的iPhone 4。
你可能会想:“转化率一定不止一种”。是的,它一定在那里,有多少个比率就有多少个噩梦。好吧,我不再吓唬你了。我确信您宁愿花一天时间洗袜子和内裤也不愿转换因素。还好你遇到了哥哥,有他在,你就不用担心了。 (这很奇怪=_=)
在讲跨DPI设计规范之前,我们首先要讲一下DP和PT的单位和背景。
注意:
我不知道换算系数,但我好意思说我是放射技师。转换系数是屏幕尺寸和PPI 令人困惑的世界中的灯塔。
当我们谈论3P(DP、PT和SP)时我们在谈论什么
DP和PT用于定义不同设备和不同DPI中使用的标准单位。
DP(也叫DiP)是Device Independent Pixel的缩写,PT是点。 PT是Apple的东西,DP是Android的东西。事实上,一个人有两个名字。
总而言之,它可以决定一个设备的转换系数。这在与程序员讨论设计标准时会很有帮助。
我们把之前制作的“赵四”按钮拿出来。
44px的“赵四”用在3GS上,88px的“赵四”用在视网膜屏上。在3GS上,我们给“赵四”一个20px的padding,让它变大,所以在retina屏幕上我们需要给它一个40px的padding。仅针对非视网膜屏幕进行设计时,无需计算视网膜屏幕应使用多少像素。
所以我们首先使用非视网膜屏幕上的按钮作为DP/PT 的标准参考。
上图中,“赵四”的大小为44DP,填充为20DP。在任何PPI屏幕上,“赵四”都是44DP。
Android 和iOS 都使用转换系数来使控件适应屏幕尺寸,这就是为什么最好使用屏幕的默认PPI 进行设计。 (如果不是我的翻译错误,我根本感觉不到这两句话之间的因果关系)
SP与DP不同,但用法基本相同。 SP用于专门定义文本大小。 SP 受用户Android 设备的字体设置影响。定义SP为基准与定义DP相同,以清晰易读的尺寸为标准(例如16SP的字体大小就非常清晰)。
分辨率选择越多,DP和SP就越能凸显其价值。
关于PPI 设置
PPI、视网膜和转换系数之前已经介绍过。现在我要谈谈你们这些小顽皮经常问的问题:如果我改变设计工具中的PPI会发生什么?
如果您以前考虑过这一点,那么您对您的设计工具非常熟悉。我花了很多努力才明白这里一些非常重要的事情。
所有非打印像素的初始PPI 配置
软件中的PPI配置继承自打印时代。如果你只做网页设计,那么PPI对你的设计基本没有影响。
软件会通过转换因子将你的设计转换成合适的像素,这就是为什么我们使用转换因子而不是直接使用PPI的具体值。
另一个例子,您可以在Photoshop 中绘制一个80px 的正方形,并在其旁边放置一行16PT 大小的文本,其中一个为72PPI,另一个为144PPI。
你看,144PPI画布上的字比72PPI画布上的字大了一倍,但方块的大小却基本保持不变。因为Photoshop中PT的显示会根据PPI值来确定,在2倍PPI时,文字会变大一倍。那么为什么我们要用像素作为清晰度标准呢?看蓝色的方块,它的大小没有改变。像素就是像素,无论什么PPI配置,像素仍然是像素,它只受屏幕的点对点像素PPI影响。
请务必注意以下几点:在数字化设计时,PPI 仅影响您对设计、工作流程的看法,以及使用PT 等单位(例如字体)的方式。如果你的设计源文件中包含各种PPI的配置,那么工程中就会包含根据不同PPI转换的各种文件,这是一个很大的麻烦。
该怎么办?坚决以1PPI为设计标准(72~120PPI时建议为1x)。我个人使用72PPI,因为这是Photoshop 的默认值,我的大多数同事也使用这个值。
注意:
- PPI配置对网页设计基本没有影响。
- PPI配置只会影响那些需要测量独立PPI的单位,例如PT。
- 像素是任何数字的测量单位。
- 记住转换因子和您的设计目的,而不是PPI。
- 设计时使用常见的PPI配置,这将使您更容易感知设计在目标设备上的效果。
- 设计时使用相同的PPI 配置。
阅读这篇有趣的StackExchange 帖子。