DPI和PPI认知

article/2025/5/6 14:44:35

DPIPPI

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.5×109 ≈2560,由此可知屏幕的分辨率为2560×1440px。

*我知道23.5×109不等于2560,实际上应该是23.486238532 英寸,用像素/厘米能更精确点。我就是举个栗子,你懂的。

PPI在设计中的影响

假设你设计了一个109×109px的蓝色方块,并且这个方块的物理尺寸为1×1英寸。如果你的屏幕是72PPI的,那这个方块看起来就要比实际的物理尺寸更大点,因为72PPI的屏幕要显示109px差不多需要1.5英寸才行。

屏幕分辨率

屏幕分辨率对用户感知你的设计影响老大了。幸好CRT显示基本已经被淘汰了,用户使用液晶显示器时基本都使用显示器的原生分辨率,这样看起来更舒服嘛。

分辨率就是屏幕上的像素数,例如2560×1440px的屏幕,屏幕横向有2560个像素,纵向有1440个像素,结合PPI的含义,你应该明白分辨率不是物理尺寸的定义。你可以有一个像你们家一面墙那么大的屏幕或者像你的脚趾盖那么大的一块屏幕,它们的分辨率都是可以是2560×1440px。

现在的液晶显示器都是有原生固定分辨率的(译者:我一般称为点对点分辨率),这根CRT显示器的原理不同,在这就不细掰扯了。

咱的27“Mac显示器有2560×1440px的点对点分辨率,109PPI。如果把屏幕分辨率调低,你就会发现屏幕上的窗口啊,icon啊啥的东西都变大了,因为23.5英寸上的像素变少了。

其实像素还是那么多像素,PPI还是那个PPI,它们就在那里不多不少。我说像素变少了的意思是当你把屏幕分辨率调低时,操作系统会通过拉伸来填充屏幕,这个时候CPU/GPU会用点对点的像素计算出来一套新的分辨率。

如果你想把27”Mac的分辨率设为1280×720px,GPU就会把4个像素当成1个像素用(2×2)。这能咋的?当然是变糊了!这还算好的呢,毕竟是可以整除的像素,如果你弄什么三分之一、四分之三这种幺蛾子,换算出来就有小数,那就更糊!不信你看下面的图。

例如下面这个例子,在点对点屏幕上拉一条1px的线,然后把屏幕分辨率降低一半,为填充屏幕,CPU必须以150%的形式展示视觉效果。相当于所有元素都变为之前的1.5倍,但是又没有半个像素,所以只能通过减低填充像素颜色的纯度达到目的。

这就是为啥在你用retina屏的Macbook Pro时如果要更改分辨率,系统会提示你此分辨率下的视觉效果(如下图),用户可以直观的感受到分辨率的变化。

用像素代表物理尺寸是非常主观的表现,但他们觉得这不算忽悠。

记住:如果你想在查看设计时尽可能保持像素完美,一定要将屏幕分辨率设置为显示器的点对点原生分辨率。虽然你可能觉得使用低分辨率更舒服些,但在像素层面查看设计时必须要尽可能精确。悲剧的是,有的人为了看的更清楚会使用辅助功能,这会让你的作品看起来丑的要死,好在这时候用户是为了看的更仔细而不是为了扣细节。

4K是啥?

最近你可能经常听到有人说4K,4K现在老时髦了。唠4K之前,咱们还是先说说HD(高清)是啥吧。

注意,HD其实是个很宽泛的简称,咱们只说说常见的分辨率。HD没有固定标准,基本上宽度为720px的都算是HD,有的分辨率也成为标准定义简称SD。

full HD(全高清)指的是1920×1080px分辨率的屏幕,大多数的电视和越来越多的高端手机都使用full HD分辨率(例如:此处无品牌赞助商)。

4K标准的最小分辨率是3840×2160px。4K也叫做QHD或者UHD(超高清)。简单的说,一块4K屏幕可以摆下4个1080P的屏幕。

4K的另一个常见分辨率是4096×2160px,一般用在投影仪或者专业相机上。

如果我的电脑用了4K显示器会咋的?

目前的操作系统都不支持4K,如果你在一个Chromebook或者macbook上用4K屏幕,它们会使用最高DPI模式,这样会以2倍的比例显示元素( 原文:it will use the highest DPI asset, in this case the 200% or @2x ones, and display them at normal ratio不知翻译的是否正确),虽然看起来不错但是特别的小。

请脑补:如果你把一个12寸的4K屏幕放在一个有12寸高分辨率屏幕的电脑上,所有元素看起来都会比以前小2倍。

– 4K就是4倍全高清.

– If current OS handles 4K but do not scale it. Meaning no 4K specific assets yet.(不知道如何翻译更通顺)

– 目前还没有4K分辨率的手机或平板电脑。

显示器的刷新频率

此章节可能在理论上存在一些疑问,仅供参考和娱乐。

咱们先从PPI和屏幕分辨率的话题跳出来说点别的。你可能注意过在屏幕分辨率设置附近还有个刷新率的设置,它跟PPI没关系,它指的是屏幕每秒显示的图像的帧数,60Hz的刷新率就是每秒显示60帧,120Hz就是每秒显示120帧,以此类推。

在UI设计中,刷新率决定了你所做的动画看起来是否平滑且细致。注意,刷新率是由处理图形的设备决定的,就算你把一个120Hz的显示器接在小霸王游戏机上,它也不可能达到120Hz。

这还理解不了的话就看看下面的栗子吧。一个非常努力的霸王龙小明从A点跑到B点。在60Hz的屏幕上可以显示9帧,在120Hz的屏幕上可以显示18帧,当然在120Hz的屏幕上霸王龙小明看起来跑的更优雅更努力了。

注意:有人说超过60Hz人眼是无法察觉出区别的。放屁!别听他不懂装懂,一定要尽情鄙视他 凸(‵.′)凸。

啥是视网膜屏幕?

视网膜屏幕是在iPhone4发布时进入大众视野的,叫视网膜是因为屏幕的PPI高到人的肉眼完全无法看到像素点。

在iPhone4刚出来那时候这个说法是合理的,但随着屏幕做的越来越好,我们的眼神被炼的已经能看到屏幕上的像素了,尤其界面上的圆形元素更容易看到。

从技术上讲就是他们在物理尺寸与上一代相同的屏幕上塞了2倍的像素。

哇塞!不缩小元素的大小,相同尺寸屏幕上的元素精度提高了2倍。原来1个像素的空间现在有4个像素,像素数是原来的4倍。

再举个栗子。

图注:再其他的设备上很难表达出图上界面在iPhone 3GS和在iPhone 4上的区别。如果你想仔细对比,可以下载我这个demo放在两个手机里对比查看。

“Retina”是苹果公司的专有名词,其他公司只能用“HI-DPI”或者“超级劲爆极限像素显示屏”之类的词,或者完全不说这样的蠢话,只在你读设备说明的时候告诉你屏幕的尺寸和DPI。

注意:Apple产品的DPI转换和分辨率的差异非常好理解,因为只有一种倍数。

转换系数又是个啥?

当你的设计要在不同PPI的屏幕上展示时,转换系数简直就是葵花宝典。当你掌握了葵花宝典后,完全可以忽略设备的具体参数(也别完全忽略,毕竟大家都不是原作者这样的东方不败)。

咱们还是再把iPhone 3GS和iPhone 4请出来举举栗子。物理尺寸一样的屏幕长宽各塞进去2倍数量的像素,那这个转换系数就是2,就是说你的原件容纳了之前4倍数量的像素,所以你要把它的尺寸的长宽都扩大2倍。(这哥们车轱辘话真多啊,真的不是凑字骗稿费?)

假设你画了一个44×44px的iOS图标,然后给它赋予一个有生命力的名字,例如“赵四”。

为了让“赵四”在iPhone 4上看起来也很“赵四”,你要再画一个2倍大的,如下图。

是不是简单死了!现在“赵四.png”有两个版本的了,一个普通PPI下供3GS使用的,一个2倍大给iPhone 4使用的。

你可能会纳闷:“肯定不止只有这一种转换比例。”有啊,必须必的有啊,而且有多少比例就有多少噩梦。好了啦,不吓你们了。我确定一定以及肯定你们宁愿花一天时间洗袜子洗裤衩也不愿意去换算系数。幸好你们遇到了哥,有哥在就不用担心了。(才怪 =_=)

在谈跨DPI设计的规范前,要先说一下单位,讲一讲DP和PT的身世。

注意:

不知道转换系数还好意思说自己是射基湿,转换系数是混乱的屏幕尺寸和PPI世界的灯塔。

当我们谈3P时在谈些什么(DP、PT和SP)

DP和PT是用来定义应用在不同设备、不同DPI下的标准单位。

DP(叫DiP也行)就是Device independent Pixel(设备独立像素)的缩写,PT就是point。PT是apple家的东西,DP是android家的东西,其实就是一个人有两个名字。

总而言之言而总之,它能决定一个设备的转换系数。这在射基湿和程序猿讨(zheng)论(lun)设计标准时大有帮助。

我们再把之前做的按钮“赵四”请出来。

44px的“赵四”用在3GS上,88px的“赵四”用在retina屏上。在3GS上我们给“赵四”做一个20px的内边距,让它的地盘大一点,那么在retina屏上就要给出40px的内边距。在只做非retina屏幕设计时就不用算计retina屏幕应该用多少像素了。

所以我们先以非retina屏幕的按钮当成DP/PT的标准参照。

在上图中“赵四”的大小是44DP,内边距是20DP。在任何PPI的屏幕上,“赵四”都是44DP。

Android和iOS都会通过转换系数让控件适应屏幕的尺寸,这就是为啥使用你屏幕默认的PPI做设计会更好。(如果不是我翻译的错误,完全没有感受到这两句话的因果关系)

SP跟DP不一样,但用法基本一样,SP是用来专门定义文字大小的。SP受用户android设备字体设置的影响,作为射基湿定义SP跟定义DP一样,把清晰易读的大小作为标准(例如16SP的字号易读性就非常强)。

分辨率的花样越多,DP、SP就越凸显出其价值。

关于PPI的设置

之前已经介绍过了PPI、retina和转换系数。现在必须要谈谈你们这些小调皮们经常会问的问题:如果我改变了设计工具里的PPI,会发生什么?

如果你以前就考虑过这个问题,那说明你对你的设计工具还挺熟悉的。我非了挺大劲才理解了这里面一些非常重要的东西。

所有非打印用像素的初始PPI配置

软件中的PPI配置是从印刷品时代继承而来。如果你只做Web设计,那PPI对你的设计基本没什么影响。

软件会把你的设计通过转换系数转换为合适的像素,这就是为什么我们使用转换系数而不是直接使用PPI的具体数值。

再举个栗子,你可以在Photoshop中画一个80px的方块,旁边放一行16PT大小的字,一张72PPI,一张144PPI。

你看,144PPI的画布上字比72PPI上大了1倍,但方块的大小基本没变化。因为Photoshop中PT的显示会根据PPI的值来决定,在2倍的PPI上就有2倍大的文本。那什么情况是以像素作为定义标准呢,看那个蓝色方块,它的大小就没变。一个像素就是一个像素,无论在什么PPI配置下,一个像素还是一个像素,它只受屏幕点对点像素PPI的影响。

以下内容很重要:在进行数字设计时,PPI只会作用在你思考你的设计时,你的工作过程中和在使用PT这种单位时例如字体。如果你的设计源文件中包含了各种不同PPI的配置,项目中会包含各种根据不同PPI转换出来的文件,这是个很大的麻烦。

怎么搞?坚定的使用一种PPI作为设计标准(建议在72~120PPI为1x)。我个人用72PPI,因为这是Photoshop默认的值,而且我的大多数同事也用这个。

注意:

– PPI配置对做web设计基本没有影响。

– PPI配置只会影响那些需要测量独立PPI的单位,例如PT。

– 像素是任何数码的度量单位。

– 记住转换系数和你的设计目的,而不是PPI。

– 做设计时使用通用的PPI配置,这样能让你更容易感知这个设计在目标设备上的效果。

– 设计时使用相同的PPI配置。


http://chatgpt.dhexx.cn/article/eBrCWc3b.shtml

相关文章

温情暖冬 | “家关爱”员工生日送福利,昊森感恩有你

时光飞逝,转眼十二月将近过半,为了进一步体现公司对员工的关怀和感谢,营造和谐、美好的公司氛围,在十月和十一月订单高峰期之后,昊森为在生日月的员工准备了别样的惊喜。 行政部门的“家长”带领大家将一份份伴手礼和满…

送一波福利

以下是内容截图: 扫描下面二维码,领取方式:微信公众号后台回复 “架构师”,即可免费获取百度云下载地址。

CSDN:博主为粉丝真心送福利——对比三大云产品窥探未来AI+云(云服务器、AI产品、云数据库、网站等)

CSDN:博主为粉丝真心送福利——对比三大云产品窥探未来AI云(云服务器、AI产品、云数据库、网站等) 导读:因博主与各大互联网公司均有合作,各种互联网产品,如云服务器、AI产品、云数据库、网站等,有任何相关需求均可找博…

【送福利啦~】海大各外卖电话

☆外卖电话☆: 蒸 功 夫 :695843 周 黑 鸭 :664242 多 又 快 :611228 小胖快餐:664875 小 二 哥 :644085 一日三餐:675505 沙县小吃…

送一波福利,给「沉默王二」的读者朋友们

点击上方“沉默王二”,选择“置顶公众号” 第一时间获取有趣有益的文字! 作者 沉默王二 一个有趣的程序员 「沉默王二」公众号运营到现在已经有一段时间了,在分享原创文章的同时也认识了很多志趣相投的朋友。一路走来,感觉颇不容易…

我的 2019:找工作 | 写作 | 挣钱,文末送年终福利

今天是 2019 年的最后一天,对于我来说,2019 年可以说是我高考进入大学以来,最重要的一年了。这一年,也是我收获最多的一年,其中最重要的收获应该就是『找工作』和『运营公众号』以及『挣到了人生的第一个10万』了。 工…

欢度端午个人空间送福利,快来领取吧!---获奖名单公布

欢度端午个人空间送福利,快来领取吧! 活动已经结束,非常感谢各位网友的大力支持和积极参与,个人空间所有工作人员在这对获奖的用户表示祝贺,对此次没能获奖的用户表示感谢,以后我们还会举办更多的活动来回馈大家。希望大家日后能一如既往的支持我们的工作,当然您对个…

中秋节前,送一波福利

为了回馈长期以来各位老铁对本号的关注支持,更好的去看paper,提高技术水平,直接给你送一个 2020新款苹果iPad !无论是自己用,还是当礼物送人,都比较不错的。 赠送规则 赠送规则 本号的读者众多,…

我的CSDN直播首秀来了:技术分享成就精彩程序人生(直播间还送福利哦)

2020博客之星评选活动刚刚落下帷幕,博客之星亚军获得者有感而发:技术分享之路让他收获良多,从一名没有互联网经验,未曾接触过分布式服务、大数据、高并发逆袭成为中通科技资深架构师,负责消息中间件、全链路压测、数据…

好友新书发布,祝贺(送福利)

冰河的新书《深入理解高并发编程》发布了,祝贺。 看了内容,极其系统,图文并茂,非常硬核,很赞。 受邀写推荐序,很荣幸。 新书上架,第一时间推荐给大家,也送一批福利,希望大…

牛学长国庆送福利来了,国庆狂欢,惊喜不断

牛学长为全球用户提供数字化产品解决方案。持续创造对用户有价值的数字化产品与服务,提高用户生活质量及办公效率! 国庆节到了!在此也从上真挚的祝福:祝愿我们的祖国繁荣昌盛,愿每一个 人的生活越来越美好&#xff0c…

抽奖送福利|8大福利任性送,快来抽它

2020 07 20 今天距2021年164天 这是ITester软件测试小栈第144次推文 点击上方蓝字“ITester软件测试小栈“关注我,每周一、三、五早上 07:30准时推送。 微信公众号后台回复“资源”、“测试工具包”领取测试资源。 本文1173字,阅读约需3分钟 Hi&#xff…

【美女送福利了win7主题】

主题描述:本主题是由主题世界win7主题下载独家原创制作而成 本地下载 迅雷下载 送福利了win7主题介绍 送福利了电脑桌面壁纸下载《鼠标右键另存为本地》 送福利了电脑桌面主界面效果图 送福利了电脑桌面开始菜单效果图 送福利了电脑桌面图标效果图 送福利了电脑鼠标…

小年 —— 送日历福利啦!(acwing)

acwing每日一题集日历除夕夜瓜分10000ac币啦! 手慢就没了┗|`O′|┛ 嗷~~ 上次在acwing上面留言送日历,结果送着送着,连老本都给送没了,这波集齐了把其他的也给发出来了 AcWing【集日历瓜分10000AC币活动】赠送1月日历…

【国庆送福利】我用python爬虫给女神送了一个大礼,含源码

这是本文的目录 前言开发工具相关模块:环境搭建App分析获取信息图片生成1、 生成礼物图片2、生成购买链接二维码 零基础Python学习指南👉Python学习路线汇总👈👉Python必备开发工具👈👉Python学习视频600合…

阿里云盘来袭,送几个福利码!手慢无!

“盼了好久终于盼到今天,梦了好久终于把梦实现!” 从内测到公测,差不多半年时间,他终于来了! ​ 3月22日,阿里云盘团队,宣布阿里云盘正式公测,伴随着公测的同时,针对新…

给大家送福利啦

温馨提示 请拖动到文章末尾,长按识别「抽奖」小程序。现金红包等你来拿。 月有阴晴圆缺,人有旦夕祸福。 首先,给大家道个歉,由于老家亲人出事,这几天的文章并没有认真写。 同时也非常感谢大家一路的支持,一…

给大家送一波福利

阅读文本大概需要 3.3 分钟。 今天父亲节,先给你们说点我老爸有趣的一件事。 大家都知道,我每月都送签名书籍给我的读者,每次出版社都要寄到我家,然后我拆完签名再一个个寄回去,本来没啥,也就麻烦些而已。 …

给大家送福利啦!

我创建的知识星球程序员突围,主要是技术为主,Android开发以及音视频开发,创建不到一个月已经140位球友加入,可以说我的星球每天都有大量这方面技术问题,我也乐此不疲在详尽回答着。 目前星球的主题112个,问…

给大家送福利

阅读文本大概需要 2 分钟。 是这样的,很多人都知道我有个知识星球,付费的,很火,评价相当高,每年一期,现在是第二期,可以算是互联网领域第一知识星球了,我也是知识星球第一批星主了&a…