发布时间：2022-3-13 分类： 行业资讯
的大小单位随着信息以更多样化的方式呈现，UI/Web设计人员面临的工作变得更加复杂。在这种情况下，许多基本功能很容易被忽视，分辨率和设计尺寸就是其中之一。 iOS pt，CSS pt，Android dp，ppi，px ??这些单位和名词是什么？如何使用它们？
例如，“pt（point）”单元出现在iOS，CSS和传统的图形设计中，但三者的含义是不同的; Android设计使用的单位是“dp”，这些单位并不像px那么简单，但我观察到现在，大多数人都会学习关闭UI设计。有些人学得不好，他们只是不认为这是一回事。他们继续使用px来对抗这个世界，这会产生一些问题，例如：
从设计草案中提交的文件材料不是工程师的正确尺寸。如果不总是需要重新导出，则图像会变得模糊。
设计师以小屏幕模型的大小绘制手稿。工程师拿了一部大手机，问道：“我该怎么办？”
工程师根据设计做到了这一点，但是一旦把它放在手机上，这个词就变得太小或太大了。
我认为如果你能巧妙地将这个概念应用到你的工作中，你不能只在单位之间转换公式。但遗憾的是，互联网上的大多数文章都是直接编写的，缺少一对。读者是友好的解释;但部分原因是我们的教育方法养成了大多数人在获得教科书时开始寻找公式的习惯。我希望或多或少地纠正这种情况，所以我写了这篇文章。理念。
你会发现，当你有耐心从一开始就“理解”一件事时，就会变得非常简单。
单独的屏幕
在我们开始解释细节之前，我们必须首先定义讨论的范围。
本文重点介绍UI设计人员如何处理各种屏幕类型;屏幕的大小各不相同，即使尺寸相同，细度也差，有些屏幕颗粒非常厚，有些对眼睛很好如何专业设计师可以在各种屏幕上实现近似体验个别像素？我们首先要看“决议”。
分辨率，像素密度
各个领域的决议一词的定义有细微差别。在UI设计中，我们可以理解“显示器显示图像细节的能力”。换句话说，成像单元越小越密，分辨率越高。
大多数屏幕的成像单元是Pixel，因此描述密度/分辨率的方法是获取固定长度（通常为吋）并查看内部粘贴了多少像素。固定长度的插头越多。表示此屏幕的点越精细。
这就像我们计算人口密度时一样，我们将捕获一平方公里的区域，然后看看里面有多少人，我们可以描述人口密度。
例如，现在Apple发布了一款非常漂亮的方形手机，屏幕尺寸仅为1英寸，屏幕尺寸为10倍; 10像素，名为“iPhone Inch”：
库克：“为了进一步加深与任天堂的合作，苹果再次发明了手机。”
“Ha口爱哟〜呜~~~！”观众站起来鼓掌。
好的，这款手机的屏幕长度为1英寸，长度为10像素。显然，如果我们想要描述屏幕的详细程度，我们可以说：“屏幕的像素密度是每英寸10像素。”或者换句话说，“iPhone英寸的分辨率为10 ppi”。
等一下，ppi的单位是多少？它的意思是“每英寸像素数，每英寸几个像素（像素密度）”。
因为市场反应良好，无论如何，Apple会做正确的购买事。来年，Apple将重新推出并推出升级版本—— iPhone英寸：
“这是我们有过的最好的手机，很棒〜”库克，观众欢呼。
然后播放产品介绍电影。
在最后一轮斗争中，权力的丧失被震惊了。作为电影配音演员的CDO Jony Ive开始介绍具有迷人英国空洞的产品：“我们已经完全重新设计，现在我们有一个黄金版本，让每个人的表现都得到充分表达⋯⋯⋯⋯
似乎钱宁兄弟“重新设计”的定义可能与大多数人不一样。
然后库克打电话给保险业务菲尔来解释硬件配置。
“这是我们历史上最好的屏幕。像素的密度是前一倍。只要看到它，它就是视网膜屏幕，所以你不能分辨像素，价格仅为9999美元。”
好吧，因为长度和宽度的像素加倍到20倍; 20像素，然后根据前面的说法，这个屏幕的分辨率是20 ppi。
好的，现在我们都会做出计算，让我们放下上面的盒子手机，然后回到旧的荣耀iPhone 7，拿尺子测量看看：
iPhone 7的屏幕宽度为2.3英寸，水平方向总共为750像素，这意味着它是750/2.3≈每英寸326像素，所以我们会说“iPhone 7的分辨率是326.Ppi”。
关系如下：
△分辨率关系
在了解了什么是分辨率之后，让我们看一下绘制时的情况。
适用于iOS的Pt单元
让我们继续前面的故事。自Apple再次重新发明手机以来，公司的设计师和工程师可能会受到影响并将新的应用程序放到货架上。 PM立即为工程师准备了两代模型进行测试：
“好的，艺术，你想把什么放在屏幕上？”工程师不耐烦地说。
“⋯⋯我不是一个漂亮的女人。”设计师在完成之前就尖叫着：
“啊？你必须教授决议，你就是设计师！”
哦，这位工程师必须来自南方。
“好吧，我必须在屏幕上放一个分隔线，灰色。”
“厚度怎么样？”
“1 px。”
“哦！只说你是一位艺术家，说1px？来吧，你可以看到它是什么。”
两部手机的屏幕怎么样不同？
事实证明，当屏幕的分辨率（像素密度）较高时，像素点将更密集和更小。因此，当我们使用px作为UI的单位时，不同的分辨率屏幕将以不同的方式显示。这种情况，如何解决？我们继续阅读。
工程师：“来吧，艺术，我告诉过你，我现在告诉你一些事情。看看这两部手机的照片。”
“左边的银色机器上有一个小红点吗？”
“关于喔〜”
“现在，基于银色机器的”1像素“，这个红点的大小被视为一个新的标准尺寸单位。你称之为”1磅（点，点）“。那里那么大，我是现在把它移到黄金机器上“
“看，在黄金机器上，为了保持相同的尺寸，红点每个将覆盖2个像素，因此银色机器上的原始1”点等于“1像素”，但达到了屏幕密度。两倍的地方，“1 pt”的大小将代表“2 px”。从现在开始，我们不会将px用作一个单元。这好吗？“
“好吧，但在理解之后我再也不能打电话给我的艺术家了！”
“好的！能帮到我的那条线能变厚吗？”
“你有多厚？”
“它有点厚！”
“⋯⋯”
所以，一个新的单位：pt（点）的诞生是为了解决px的大小在不同的屏幕上会发生变化的问题。让工程师和设计师休息一下，让我们看看应用程序。问题：
从左到右，iPhone第一代，iPhone 4和iPhone 6 Plus
苹果推出第一代iPhone，截至目前iPhone 7，屏幕的“像素密度”有两大变化（注意密度变化！我们这里无论屏幕大小如何），第一次出现在iPhone 4上，屏幕尺寸没有变化，但像素密度翻了一番，达到326 ppi，乔布斯称之为“Retina Display”。
第二次，iPhone 6推出时，大尺寸的iPhone 6 Plus出现了。 Plus不仅很大，而且像素密度也增加了两倍。目前，Apple的所有产品都只是iPhone 6/7 Plus。有三重密度屏幕。
您可能会发现Plus 401 ppi不是原始iPhone 163 ppi的三倍。怎么说它是三倍？这是为了避免吸收太晚，首先保留给下一个解释，总之，你应该先记住iPhone。 6/7 Plus目前提供三重密度屏幕。
好吧，让我们回想起小剧院：
工程师在第一个屏幕上放了一个1 px的小红点，说大小叫做“1 pt”。这一点被带到右边的新机器，“尺寸相同”，但长度和宽度变为2px。因此，如果您将来使用“pt”作为大小单位，则不必担心已更改的px。
在iOS世界中也是如此。我们在原始iPhone上标记了一个红色像素，然后说它的长度（或宽度）称为“1 pt”。这个红点有一个视网膜屏幕和两个密度。在iPhone 4上，它的长度将覆盖视网膜屏幕上的2px;如果你得到Plus的三倍密度，猜猜这个小红点的长度会覆盖几个px？
如果你知道为什么它是3px，恭喜你，你真的理解它背后的机制，就是这样。现在让我们来看看Android。
Android dp单元
在Android世界中，手机品牌型号要好得多，而且屏幕尺寸和密度也一塌糊涂。作为一名教师，谷歌必须制定一套统治世界的规则。该方法是制定几个“密度水平”：/p>
如果您的屏幕分辨率低于160 ppi（注意），我们将其称为“MDPI（中等分辨率）”;如果您的屏幕分辨率低于320 ppi，则称为“XHDPI，Extra -High（超高分辨率）”，其余部分按图形进行类比。
注意：Android使用的单位称为dpi，但为了方便沟通，我们仍然使用ppi
然后它和Apple一样。据了解Google，我们说我们将MDPI屏幕设置为基准。它是像素密度的两倍（写在顶部的1倍）。我们在这个屏幕上选择一个像素，使其成为红色，然后将其缩小。当红点移动到XHDPI的2x屏幕时，它将变为2px，因此这个小红点的大小将在未来变为新的单位。 iOS被称为“pt”，对吗？好吧，这个新的我称之为“dp（密度独立像素）”！
因此，iOS的pt和Android的dp实际上是相同的操作原理。使用它作为一个单元进行映射和通信，可以避免由px引起的偏差。
网页设计中的Pt单元
除了iOS和Android之外，如果你有网友设计的朋友，你可能知道CSS中还有一个pt单元，但是你可以得出结论，CSS的pt单元与iOS无关我们之前提到过。它的工作方式不同，因此总是不清楚是否要将它组合在一起！
单位词pt最初源自传统的字体打印，用于指示字体的大小。在印刷和平面设计领域，1 pt=1/72英寸;和CSS有pt。实际上，在打印/打印时必须使用网页。
在网页设计，屏幕显示和物理打印中，你可以有两种不同的CSS来决定风格;一个消息灵通的网页设计师会编写一个特殊的CSS并在打印时将其用于计算机（例如，删除背景图像，字体颜色更改为灰度，这更省墨。字符级单位物理世界：pt此时会派上用场，所以CSS中的pt单元不适合你在屏幕上使用它！
适合屏幕显示的CSS单元是em，rem，px ??等，感兴趣的朋友可以自己动手。
结论
好的，今天这篇文章已经完成了对单元概念的解释，以及单元在绘图时的应用，绘图时的注意事项，我们将在下一篇文章中再次研究。如果这篇文章对您有所帮助，请分享并让更多人一起工作！
作者介绍
Taylor自13岁起就开始自学网页设计，自iPhone问世以来，它已经接触到UI设计，使其成为前端和设计两栖产品设计师。在他的学生时代，他在雅虎实习。之后，他领导了外国和台湾初创公司的Web，iOS和Android设计团队，并担任UI和用户体验讲师。
他的Facebook：https://fb.com/chihyueh.hu
