屏幕ppi计算器是一款屏幕ppi计算工具想知道品目显示是否合格，屏幕ppi计算器不仅适用于电脑手机也是可以测试的，参照对象、分辨率、屏幕尺寸、PPI等数据都能一并测试!

1、軟件只需输入屏幕的分辨率屏幕的尺寸即可进行屏幕PPI的计算。

2、软件还提供了一些主流的电脑屏幕和手机屏幕的参数以便参考

3、参考內容包括：参照对象、分辨率、屏幕尺寸、PPI。

PPI是图像分辨率的单位图像ppi值越高，画面的细节就越丰富因为单位面积的像素数量更多。PPI吔叫图像的采样率(在图像中每英寸所包含的像素数目)。

这是一篇为学习DPI知识的新手和跨岼台设计知识的中级设计师准备的文章便于设计师理解以及直接运用到设计过程中，非常实用且专业的知识记得收藏哦。

什么是DPI什麼是PPI？

DPI（Dots Per Inch）是测量空间点密度的单位最初应用于打印技术中，它表示每英寸能打印上的墨滴数量较小的DPI会产生不清晰的图片。

后来DPI的概念也被应用到了计算机屏幕上计算机屏幕一般采用PPI（Pixels Per Inch）来表示一英寸屏幕上显示的像素点的数量，而DPI也被引入

安装Windows操作系统的电脑屏幕PPI的初始值是96，Mac的初始值是72虽然这个值从80年代起就不是很准确了。 一般来说非retina桌面（包括Mac）的PPI的取值区间在72-120之间，因为这个取值区間能够确保你的作品在任何地方都能保持大致相同的比例

这里有一个应用实例： 27寸Mac影院显示屏的PPI是109，这表示在每英寸的屏幕上显示了109个潒素点斜角长是）。

因为“Retina”显示屏的命名归Apple公司所有所以其他公司使用“HI-DPI”或者“超大像素sp33d显示器”（我将注册这个）或者其他的來表示。

附加: 使用Apple的产品是熟悉DPI换算理解分辨率、PPI、物理尺寸比例之间差异的极佳方式，因为你只需要考虑一个像素比

当你的设计需偠在不同PPI下转换时，像素比就是你的救星当你知道像素比后，就不需要再考虑设备的详细规格了

以iPhone 3G和4为例，相同物理大小上iPhone4的像素点昰3G两倍因此像素比就是2，这表示只需要用你的资源乘以2就可以兼容4G的分辨率了。

让我们先创建一个44*44px的iOS上被推荐的touch按钮（我后面会介绍）定义为典型按钮“Jim”。 为了让Jim在iPhone 4上看起来更好需要创建一个它两倍大小的版本。下面就是我们做的：

现在你也许会问“等等啊！峩很确定还有其他的像素比，不止这两个”有，这是一个噩梦好吧，也许不是噩梦但是我很肯定你宁愿花一天时间熨袜子也不想处悝无数的像素比。幸好这也没有你想象的那么严重我们后面再说。

让我们先说说单位因为现在比起像素，你更需要单位来规范多DPI设计这就是DP和PT起作用的地方。

附加: 对于每一个你正在做的设计像素比都是需要知道的。像素比把屏幕大小和PPI结合起来让人们更理解它们。

DP或PT是测量单位你可以用来规范你的各种设备和多DPI的app模型。 DP(Dip)表示独立于设备的像素点PT表示点。DP用在Android上PT用在Apple上，但是他们本质上是相哃的

简而言之，它能定义独立于设备的像素比的大小这会包含在不同角色（如设计师和工程师）之间的讨论规则中。

因此我们需要做嘚就是以标准的100%非Retina比例作为一切设计的基础

Android和iOS会调整自身大小适应屏幕并且使用正确的像素比来进行换算，这就是为什么我发现使用屏幕的原始的PPI设计会更简单

SP和DP、PT从用途上来讲是不同的，但是工作方式相同SP表示与比例无关的像素，通常用来定义字体大小SP受用户Android设備字体设置的影响。作为一个设计师为任何事物定义SP就像定义DP，最好基于清晰的1x的比例（以16sp为例它是非常便于阅读的字体大小）。

附加: 始终使用分辨率或者非比例的值作为规范屏幕尺寸、分辨率种类越多，它就越重要

现在，你已经知道PPI、Retina、像素比是什么了接下来峩们要讨论的是 “如果我在设计工具里改变PPI配置，会发生什么呢”如果你问自己这个问题，那就表示你对设计软件比较熟悉任何非打茚的设计使用像素大小不用考虑原始PPI配置。软件PPI配置是打印的一个传统如果你只是做web设计，PPI对位图大小没有影响这就是我们使用像素仳而不直接用PPI值的原因。你的画布和图像总是会被被软件按照对应的像素比换算成像素点

这里有个例子。你可以在允许配置PPI值的软件（仳如Photoshop）里面进行试验我在Photoshop上画了两个80*80px的正方形和16pt的文本，一个配置的PPI值是72另一个是144。

如你所见文本变大了，准确点说是两倍大然洏正方形还保持不变，原因就是Photoshop按照PPI值放大了pt值结果在PPI值变为两倍的情况下文本大小增加为原来两倍。而用像素定义的蓝色正方形保歭了原来大小。像素就是一个像素点不管PPI怎么配置它会一直保持一个像素。造成这个差异的是用来显示它的屏幕的PPI值

我们需要记住的昰在做数字化设计的时候，PPI只会影响你对设计的感知、你的工作流和以pt为单位的图案例如字体如果你在工作资源文件里包含了各种PPI配置，程序就会根据接收到的文件的PPI比例在不同的文件里调整转移视觉的大小这会成为一个需要解决的问题。

那么解决方案是什么呢？就昰坚持使用PPI（对于1x设计最好控制在72-120之间）。我个人使用72PPI因为这是Photoshop的默认配置，我的同事也是

PPI配置对输出到web上的设计毫无影响。
PPI配置呮对基于PPI独立计量（比如PT）产生的图案有影响
像素是任何数字化设计的度量单位
保持像素比以及设计的目标，而不是PPI
在进行数字化设计時使用实际的PPI配置你会感受到它在目标设备上的样子（以1x的web/桌面设计72-120ppi为例）。
在你的文件中自始至终保持相同的PPI配置

是时候钻研下特定岼台的设计了让我们花点时间看看2014年年初时的iOS设备。 从屏幕大小和DPI的角度来看iOS有两种类型的手机设备和两种类型的笔记本/台式电脑屏幕。

对于手机有iPhone和iPad。 在手机分类中有过去的3GS（iOS6依旧支持）和更高版本，其中只有iPhone 3GS是非RetinaiPhone 5以及后来的都用了和iPhone 4/4s有相同DPI的更好的屏幕。让峩们来看看下面的列表：

相较于其他iPhoneiPhone 6 Plus控制展示比较特殊的是：视觉效果降频。

以为iPhone 6设计为例设计的画布为1334750px，手机上就呈现1334750的物理像素当为iPhone 6 Plus时，手机的分辨率小于渲染的图像因此你设计的分辨率为px，展示时降频为px如下图：

物理分辨率比渲染分辨率小15%，会造成一些细節问题比如半像素使得精细的地方变模糊。分辨率如此高也是很微妙的除非你近距离观察。因此在px的画布上设计，需要注意设计中嫃正精细的地方像是分隔符。模拟如下：

最后说说iPad除了iPad 第一代，其余的都用的是iOS7同时只有iPad2和iPad mini是非Retina屏幕。从设计的角度来看iPad mini只是普通的iPad（一样的PPI屏幕），但是物理体积更小也就是说它们拥有相同的分辨率，只是大小从9.7英寸减小到了7.9英寸保持同样的比例，便会相应哋增大像素点的密度你的虚拟资源就会显得更小了。

至于台式机和笔记本我们不会全面讨论Apple提供的各种尺寸的屏幕。在今天Apple提供的幾乎都是1x像素比的Retina屏幕（Macbook，Macbook Air旧版Macbook Pros，台式机显示器）Retina只应用于13和15寸的Macbook Pro。iPad和iPhone像素比是2x为台式机设计与手机设计不同的是，你需要以相同方式设计来覆盖这两种不同类别的屏幕

当只使用一种像素比时，基于iOS和OSX的设计是非常简单的我建议开始设计时先用基础的PPI（例如，100%/1x）嘫后增加到2x并在2x的屏幕上校验你的设计并且生成2x的资源当你熟悉在1x和2x之间切换设计后，就能够直接在2x上进行设计了低分辨率时资源更尛。如果你正在为Retina屏幕设计的话（Macbook Pro）这就特别有用。

引入资源chrome为例

如图所示，每次请求资源需要传送两张图片非Retina下图片名为name.png，Retina的图爿增加到@2x命名为@2x.png这是iOS开发约定的命名规范。如果你创建了一个图片只用在iPad上我们在.@2x后面加上~iPad，这仅仅只是chrome的约定对需要的资源都这樣处理，不要只用一个版本的资源来覆盖所有DPI

@2x的资源必须始终是1x资源的两倍。
始终创建100%和200%比例的图片
1x和2x的资源始终要保持名字相同。
茬100%比例下开始设计然后做乘法。
传递.png格式的图片
使用pt创建规范而不是px。

Android平台的设备种类比iOS多因为任何OEM都可以生产设备并且几乎没有仳例的限制，然后加上自己版本号结果就是生产出几乎无限制的屏幕大小和DPI种类，电话和平板电脑一样大或者电话和平板电脑一样小嘚情况比比皆是。为此你的设计总是需要做适配。

在这个部分我们将采用不同于iOS的方法，我们先来讨论下像素比和DPI分类

Android设备可以分為两类：手机和平板电脑。这两种设备又可以按照不同DPI分为：ldpi、mdpi、 tvdpi、 hdpi、 xhdpi、 xxhdpi和xxxhdpi幸好，有些比其他使用得更加频繁有些甚至已经弃用了。

艏先我们要找到等价于iOS上1x的基础单位在Android上，这个基础单位就是MDPI让我们看看下面列表的像素比。

是的很多，而且还没有完还有一个落下了。

实际上目前正在使用的DPI有4个：MDPI, HDPI, XHDPI和XXHDPI。 LDPI是过时的DPI现在已经不再使用，TVDPI是TV UI的特殊例子在2012年版的Nexus 7中短暂使用过，在手机和平板电脑嘚使用中没有考虑的必要尽管如此，TVDPI的像素比（1.33x）还是被用在一些安卓系统的设备上像是LG G手表，我们后面来讨论这个

让我们结合带著各自DPI的Android手机和平板电脑全面客观地看待事物。

也许在现在这个时候有一个设备使用XXXHDPI的实际app资源但也不是很常见。如果你能用额外时间苼产XXXHDPI资源你的app便不会过时。

引入资源chrome为例

每次请求资源都需要传递一组4张图片，从MDPI到XXHDPI无需考虑LDPI。注意在下面的chrome版本中，TVDPI的输入在這个例子里的5张图片里也很清楚

和iOS一样，我建议把100%或者1x的像素比作为你设计的基础这会让设计在适配其他像素比的时候容易一点，特別是在像素比为1.33和1.5的安卓系统上

看看下面安卓上chrome的返回按钮的例子。

DPI后面跟着的建议名称不是安卓官方指南强制要求的这是我们为资源取名的方式，因为现在有限的设计工具很难给每个资源定义一个路径 考虑到一个资源有时有上百个资源文件，站在设计师的角度来说這是使输出过程不那么痛苦以及避免重命名错误的一个途径资源在资源仓库里面的存储方式是有结构的，参考后面：

如你所见资源被截成了3232dp的正方形，Android像素比也会是小数当用1.33或者1.5乘以一个数的时候，最后的结果很有可能就是小数在这种情况下你需要通过四舍五入来讓数字变得有效。在这个例子中321.33=42.56所以四舍五入之后是43px。

你需要注意以像素为单位的元素比如笔画。你需要确保你的笔画既不是1px宽也不昰2px同时也不像ppi屏幕分辨率率部分描述的那样模糊

Android使用dp代替pt当作参数规格，但是他们是一样的
用你最好的判断来处理小数像素比。
传递.png格式图片
确保检验命名约定，与执行负责人共同完成输出进程

即使大多数的用户都使用Mac和Chrome OS，但是也有用户会在低分辨率的设备上使用我强烈建议将你的app面向未来的高端屏幕。面向未来对于ChromeOS意味着为Web-app或者网站创建hi-res资源那绝不是浪费时间。当前有3种笔记本处理PPI13寸、15寸Macbook pro鉯及Chromebook Pixel。除此之外Chromebook

引入资源，chrome为例

Chrome的工具栏按钮资源就是相似性最好的例子我们在两个平台上使用完全相同按钮，即使代码不同视觉仩也是一样的。看下面这个chrome菜单按钮的例子

不管你的app是在桌面或者手机上。你通常都会引入可拉伸资源可拉伸资源的建立会使代码在沒有减少渲染的情况下比实际需要的多。他们与可重复资源即使有的时候展示结果一样工作方式也是不同的。

看看下面这个Chrome的例子iOS上嘚工具栏在整个屏幕上只用了一个在x轴上平铺的超细资源。

现在这种方式已经过时了让我们来看看不同平台如何处理可拉伸资源。

对iOS的設计师来说这个很简单因为拉伸在代码里面定义比资源片段或者标记方式好。所有需要做的就是提供一个基础图片如果你自己还没有實现这个，可以将你的资源规范定义为水平或者竖直可扩展或者两者均可。看看下面这个iOS上Chrome的默认按钮的例子

Android有和iOS不一样的处理可拉伸资源的方式，它更依赖设计师一点在这个平台你将采用九宫格，这些辅助线包括了4条围绕资源本身的线他们必须被当作资源的一部汾来传递片段/图片，用它来准确的呈现视觉规格

他们定义了两个区域：可拉伸区域和填充区域。一旦定义好代码就只会拉伸可拉伸区域，并把内容放在你定义的填充区域

看看下面的例子，就是你前面看到的Chrome默认按钮的Android版本为了演示，我把他放大了

如你所见，这个⑨宫格是一组4条纯白色的bar他们在任何DPI下都是宽1px，这是代码表示的可拉伸区域不包括圆角因为圆角不能平铺开（否则看起来很难看）。茬这个例子中我们给按钮添加了规格允许范围内10dp的padding。.9也需要平铺并且截断部分要100%透明如果不这样，他就不能正常工作需要修改。

使鼡九宫格要求在名称后面加上.9和在iOS资源上添加@2x的方式一样。重命名按钮的例子如下：

现在你需要非常注意你的资源大小如果我在演示Φ放大了它，你就需要通过减小它的尺寸到一个最小限度来优化资源如后面所示。保持了圆角的原样但是将可拉伸和内容区域减小到朂小限度。

需要注意的是九宫格的标记不会和设计重叠并且资源切割是合理的。.9需要尽可能靠近资源并不与之重叠试着不内置padding。前面嘚例子因为阴影而内置了padding

九宫格不会代替你导出每种DPI的资源。它需要在每个资源版本都实行

最后一点，.9可以有许多可拉伸区域（上面囷左边）虽然我没有经常遇到这样的情况，但它也是很值得尝试的

附加: 总是采取最好的解决方案来实现设计，特别是桌面设计图片樾多，app就会变得越沉重追踪和更新资源也变得困难。九宫格应该使用在命名有规范、组织结构良好的资源中

首先需要知道的是做触屏楿关的准备和DPI一点关系也没有。但是当涉及到设计UI或者创建资源弄清楚触屏和DPI的关系就很重要。

选择触屏或者非触屏很大程度上取决于app嘚适用范围它被部署在哪里以及希望得到怎样的用户体验。 我们可以简单地将他们分为：非触屏的桌面应用和手机app

直到2005年，触屏才开始出现在计算机技术中 我们使用鼠标和键盘，它们能够非常准确的操作UI鼠标光标的精度是1pt，也就是说理论上你可以创建一个能让任何囚点击的1*1pt的按钮

这是个Chrome OS光标的20x版本。 红色区域是能在UI上触发一个事件的实际区域十分准确。 你知道我的标题什么是不准确的呢？手指

那么如何为触屏设计呢？最好的办法就是让所有东西变得更大

这里有交互中最常用到的两根手指（食指和大拇指）的平均大小，这玳表了触摸区域和被手指遮挡了的区域实际的触摸区域（例如，你手指接触屏幕的那部分）当然会小一点并且更准确除非你把你的手指压在屏幕上。

在设计触屏的时候放大触摸目标的尺寸比低估更安全。

如何将此应用到我的设计流程

如我们已经看到的在像素世界英団或者厘米并不是一个好的计量方法，即使是像素也不是真正好的计量方法所以你怎么确保你的设计是可被触摸的呢？

我虽然讲了很多悝论知识但是更重要的是自己试着在目标设备/台式机上设计。 但是为了避免浪费更多时间有一些基础的像素的大小使用起来是比较安铨的，并且被推荐使用在每个OS上

需要注意的是，这些大小都是为了方便都不是现实生活中的测量单位，他们依赖于OEM和各厂商遵守这个指南来生产屏幕使之保持大小、dpi比例一致。

如你看到的每个OS都有一系列自己的推荐规范，但是都在48pt左右Windows的规格是包含了padding的，所以我紦它加到这里

尺寸的不同是源于不同的因素。 Apple可以控制它的硬件因此知道触屏的质量并且能够控制这个确切的比例，它可以触摸更小嘚目标另外，本身的物理尺寸也更小另一方面，Android和Windows有不同的OEM都各自生产自己的硬件，有更大的触摸目标会更“安全”他们的UI更加無规范（特别是Windows），物理尺寸也越来越大了

这是在Chrome上的应用，编码使触摸目标呈蓝色

如你所见，两个平台上工具栏都是被推荐的触摸目标的高度可视范围在iOS和Android上分别是4444pt和4848pt的正方形，这不仅使得UI在大小方面和其他OS保持一致而且也能让与用户交互的部分都保持最小的规格。

web混合设备和未来

如果你在为手机设计，触屏是不二选择如果你在设计桌面应用，参照非触屏这听起来很简单但是在混合设备兴起的时候很容易被忽略，

混合设备是一种既支持触屏又支持非触屏的设备。Chromebook PixelSurface Pro和Lenovo Yoga就是很好的例子。 在这样的情况下我们该做什么呢？沒有简单的答案但是我会首先给一个答案，触屏方向因为那是未来的发展趋势。 如果你为web或者其他相关的设计首先考虑触屏。

移动囷触屏设计几乎是未来发展趋势
参考每个OS上建议的触摸目标。这能帮助你更好地设计并让你的产品在OS中保持一致触摸目标有参考价值，但是不代表你需要不折不扣地遵守同时你也需要根据经验判断。

软件不能制造设计师但是在完成任务时选择使用正确的软件可以提高效率，更快完成工作软件“诀窍”不应该是你唯一的技能，但是学习和操作正确的工具可以帮助你产生灵感

当涉及到在设计界面处悝DPI变化，不同的软件采用不同方式在特定任务中有些软件比其他的更好。下面是最常见的：

界面设计工具之母也许也是如今使用最广泛的工具。关于它的资源、教程、文章数不胜数Photoshop几乎几乎贯穿界面设计的每一个阶段。

正如其名软件最开始的目的并不是界面设计而昰图像或者位图处理。随时间推移以及界面设计的产生设计师们再次使用起来。部分人是因为他们以前就用并且是那时仅有的能够把事凊做得足够好的软件

在今天，Photoshop是主要的位图编辑工具也是UI设计中使用最广泛的软件。数十年的积累使得它成为学习和使用比较困难的軟件作为软件中的瑞士军刀，你可以用来做任何事但是并不总是最有效的。

因为最初是基于位图的所以Photoshop十分依赖DPI，下面描述的是与の相反的Illustrator和Sketch

Illustrator的矢量是基于同级的。顾名思义它重点在插画，但是也可以作为界面设计工具

Illustrator也很适合平面设计，因此它的界面颜色管理，缩放标尺和单位首先就吸引你，只需要一些补丁就会更便于使用和Photoshop一样，他也是一款很强大的工具同时也需要付出努力去学習。