后续信息的呈现方式越来越多样化，UI/Web设计师遇到的东西越来越庞大。在这种情况下，很多基本成果很容易因为粗心而丢失，歧视和战争所设想的规范单元就是其中之一。IOSpt，CSSpt，Androiddp，ppi，px？？这些单位战的专有名词到底是什么？怎么用？
比如“pt(point，surface)”在iOS、CSS和传统观念中显示的是哪一个单位，但它们的实际意义是不同的；但是Android设想的单位是“dp”，不像px那么好理解，也就是我观察到，现在大多数人在研究UI思路的时候都会卡死。有的人教的好，就准备那么干，不断用px搞全国各地，那会搞一些考试成绩，比如:
概念稿导出的图纸、文件、资料、图片，不是技术工程师要求的确切规格，要么是不断要求复制，要么是放到画上后就恍惚了。
想象一下，一个老师拿着小屏幕模型的规格画一篇文章，一个技术工程师拿着一个大折叠机问:“怎么办？”」
卓越的技术工程师做他们想做的事，但手机一显示，字符就变小或变大。
我以为如果我能把不雅的概念巧妙地运用到过去，我会忍不住用死背单元中间的变换公式来计算。可惜我感觉收集去年单位的文章很间接，公式计算都写出来了，缺乏一个和谐的注释方法给读者。但也是一个单位。是大家教学方法的结果，培养了大部分人拿到课本就开始找公式计算的习惯。我多多少少期待着纠正那种情况，所以我有写那篇文章的主观因素。
你会创造发明，当你再次开始“掌握”一项工作时，它会变得越来越简单。
各种屏幕的分离
在开始注释重点之前，首先要明确咨询的范围。
本文的主次内容已经讨论了UI设计师如何在紧急情况下处理各种屏幕类型；屏幕尺寸多种多样，所以都是同样的尺寸，细节也不错。有的屏幕颗粒很细，有的细到眼睛看不到个人定义面。技术专业的远见者如何让自己的想法在各种屏幕上达到同样的感觉？先说“分辨率”。
分辨率和清晰度
分辨率(resolution)这个词的定义一直很单薄，各个领域也不尽相同，UI一直假设每个人都可以掌握为“只有当渲染器呈现图像的关键点时”。也就是说，显示单元越厚，屏幕越分散，分辨率越低。
大部分屏幕的成像单位都是像素，所以外观轻薄/分辨率的方法就是把握几度的坚固度(但一般是英寸)，看一看内衬里塞了多少锐度面。能塞得越牢，屏幕表面越薄。
这就好比人们在斤斤计较生牙稀疏的时候，会抓一圈公里，再看几个衬，就能看出生牙稀疏了。
比如现在iPhone公布了一款环形脚机，小屏幕宽度一英寸，图片尺寸10×10像素，标题为“iPhoneInch”:
桑德斯:“为了进一步加深任天堂的合作，iPhone再次从零开始创造了一款脚机。」
“郝说得对哟~呜~~~！”现场坐着打巴掌。
好的，折叠机的屏幕宽度是1寸，折叠机的宽度是10像素。如果你看了外观屏幕有多详细，你可以说:“屏幕的分辨率是每英寸10个像素。”换句话说，“iPhone寸的分辨率是10ppi。”
等等，什么是ppi单位？实际意思是“每英寸像素，每英寸塞进几个锐度平面(锐度)”。
因为销售市场的优质反应，大家买iPhone做什么都是正确的；去年iPhone还是老调重d，发布了S推广版——iPhoneInchS:
“那时候每个人都有史上最好的脚机，厉害~~”桑德斯讲完话，全场欢呼不断。
然后播放视频，介绍电影。
经过上一轮的努力，已经成为电影配音演员的CDO·乔尼·艾夫带着诱人的美国口音开始介绍素材:“我们采用了彻底的从头开始的思路，现在有了黄金版，让每个人的本质都能得到丰富的表达。”
看看钱宁兄弟的“重新设计”的定义，对大多数人来说是有所不同的。
然后桑德斯打电话给Phil，商业保险运营，垮台，评论硬件配置设置。
“当时是人人有史以来最好的屏幕，清晰度面的薄度增加到之前的两倍。只要能看见，就是眼底黄斑屏，让你识别不存在清晰度面。售价仅为9999美元。」
Ok，就是屏幕的宽和宽的清晰度翻倍到20×20像素。那么按照上一章的道学，那块屏幕的分辨率是20ppi。
好了，现在大家都在大城市做过计算了，我们学会了放下放了很久的上房圆脚机，回到老枯的iPhone7，拿把尺子量一量，看一看:
iPhone7的屏幕总宽度为2.3英寸，水平背部系统有750像素，也就是每英寸塞进750/2.3≈326像素，所以大家会说“iPhone7的分辨率是326ppi”。
关系如下:
△分辨率相关性
理解了今天的分辨率是什么，现在来看看画画时的情况。
IOSpt单元
还是保留更早的故事吧，因为iPhone又一次从无到有的创造了脚机。企业里的远见者要和技术工程师斗智斗勇，要做一个新的App发布。PM马上准备了几代机型让技术工程师测试:
“好，干得好，你想在上面画什么特殊的工具？”技术工程师看起来很不耐烦。
“谁都不好。”当假想的老师借出来的时候，他大吼一声:
“啊？就连你的决心都需要PEP，因为你是一个有远见的人！」
呵呵，技术工程师一定要去东北。
“嗯，我想我已经在上面画了一条分隔线。它是深灰色的。」
“小心？」
「1个像素」。」
“哈哈哈！你是个好员工。人行道要1px吗？去，看看当时发生了什么。”
两个脚机的画怎么会不一样？
本来一个屏幕的分辨率(锐度)越低，锐度面就会越薄越小。所以如果以px为单位做UI，不同分辨率的屏幕会显得不一样。那么如何解决呢？人们不断看到它。
技术工程师:“去吧，好工人，我告诉你一件事。现在我要告诉你一些事情。请看一下两只脚牵引器的画。”」
“看到右边银白色机器的白色面粉了吗？」
“是的~”
“从现在开始，以银白色机器的‘一个PX’为基础，把那个白面的大小作为新的极限规格单位，你们就叫它‘一个PT(点，面)’。如果你把它移到那里，它就有那么大，我现在就把它移到金色的机器上。”
“你看，在金色的机器上，为了更好的保持同样的大小，白面的宽度/宽度会各自包含『2px』，所以银色机器上原本的『1pt』就是『1px』，但是到了屏幕薄了一倍的住所，尺寸『1pt』就会表示『2px』。自古以来就不需要用px作为单位。这样好吗？」
“好~而且我也明白你现在不能向我要一份好工作！」
“好吧！你能帮我把分割线弄细点吗？」
“你要多细？」
“好‘方’！」
「⋯⋯」
没错，一个新单位pt(点)的诞生，就是为了处理差异，每个屏幕的px大小都会变化的测试结果。现在先让技术工程师和设计师给个方便休息。让我们来看看申请问题:
从左到左分为iPhone1、iPhone4、iPhone6Plus。
iPhone发布了第一代iPhone，延续到现在的iPhone7，屏幕的“锐度”进行了两次大的改造(注意是细化改造！屏幕大小没有问题)。第一次，iPhone4上市的时候，屏幕规格稳定，但是清晰度薄了一倍，所以就来了326ppi，被乔布斯称为“视网膜显示”。
第二次，iPhone6发布的时候，也展示了大尺寸的iPhone6Plus。加号不算太大，清晰度薄了三倍。在如今iPhone的所有材质中，如果iPhone6/7Plus的屏幕薄了三倍。
小心，你可以创造发明加401ppi，但不是原来iPhone163ppi的三倍，怎么可能薄三倍？为了确定哪个更适合你，请留到下次评论。总之，请记住，iPhone6/7Plus是当今屏幕薄三倍的机型。
好了，我们来回忆一下之前的小剧场:
技术工程师已经在第一屏放了一个1px的白面，告诉左边哪个面叫“1pt”，哪个面在新机里，“尺寸稳定”，但是宽度不到2px。所以，如果现在用“pt”作为大小单位，就不用再关心谁改了改的px。
已经存在的iOS世界也是如此。大家都在第一代iPhone上标注了一个白色像素，然后因其度数(或总宽度)小而称之为“1pt”。在有眼底黄斑屏，薄一倍的iPhone4上，它的小度数会包括眼底黄斑屏上的2px如果你在Plus上瘦了三倍，猜猜哪个小白粉里含有几个px？
如果你知道为什么是3px，那就恭喜你详细了解了你背后的机器。就那样。现在我们来看看Android。
Android的Dp单元
在安卓的世界里，很多脚机品牌的型号和规格都是很多很多，屏幕大小和稀疏也是一个规律；作为谷歌的老师，虽然要制定一套划分规则，但方法是设置很多“稀有度”:
如果你的屏幕分辨率下降了160ppi(注意)，你会称之为“MDPI(中等屏幕分辨率)”；如果你的屏幕分辨率下降了320ppi，那就叫“XHDPI，超高”，从图中推导出来。
注:安卓用的单位叫dpi，但为了更方便，大家都借用ppi。
然后就跟iPhone一样了。教人大致谷歌一下，大家都把MDPI的屏幕列为参照点，而且薄了一倍(上面写着1x)。大家已经在那个屏幕上挑了一个像素，做成了白色，然后把哪个小白面搬到XHDPI的2x屏幕上，它就会酝酿出一个包含2px的新单元。所以今天那个小白面的规格是酿造成新的单位，iOS叫“pt”吧？好吧，哪个新单位被我叫dp(密度无关像素)了！
所以iOS的pt和Android的dp真的不是不同的 *** 作原理。以它为单位画图，可以劝阻px带来的偏差。
网页想象中的Pt单元
除了iOS和Android，如果你也是一个有战斗网页想法的爱好者，你可以知道pt的哪个单位可以用在CSS中，但是结果已经先给出了:大家之前书里提到的CSS的pt单位和iOSpt确实有关系， *** 作方法都一样，放在一起看永远都不清楚！
pt的哪个单位字真正起源于传统的活字包装印刷，使用了隐含活字块的规格。在包装印刷大战设想的世界里，1pt=1/72英寸；CSS之所以有pt单元，是因为它是在网页打包打印/打印出来的时候真正用到的。
在网页设计中，屏幕呈现现实生活中的包装印刷，可以有两个不同的CSS来确定样式；定制和高质量的网页设计师会用代码写一份CSS，在它已经打包打印出来的时候会被计算机器使用(比如把丢失的风景图和字体样式颜色改成灰度，这样会更省钱)，而现实世界的单词级单位:pt到那个时候就已经投入使用了，所以CSS中的pt单位是真的没有你在屏幕上使用的！
适合屏幕呈现的CSS单位有em，rem，px？？这些，有喜好的爱好者可以自行停止。
结果
好了，单位的不雅概念明天文前会有注解，但是制图时单位的应用，以及工程制图已经做过时的注意事项会在下篇文章中讨论。如果那篇文章对你有帮助，分享给一大批人吧！
做推荐人
泰勒从13岁起就开始教授网页创意。iPhone出来后，他就开始打UI的主意，所以他是一个前端开发和想象力的物质幻想家。在教死期间，他曾师从雅虎，此后从中国商业集团和中国台湾省的初创企业中脱离出来，领导一支Web、iOS和Android的精英团队，做UI和客户体验老师。
他的https://fb.com/chihyueh.hu脸书
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）