ui设计的基础知识,小白也能变大神

像素与分辨率的关系
 

我认为许多设计师不理解分辨率和像素的原因是因为不理解英寸是什么。小时候家里的家里的电视机都说21寸大彩电、25寸大彩电、29寸大彩电等，包括手机，也说4.7英寸、5.0英寸等。但是显示屏毕竟是一个面，你用英寸来代表一个面，所以很多人把英寸误认为面积单位，也就是说，英寸代表平方英寸。
 

将英寸看成面积单位的设计师对分辨率会有完全不同的理解，事实上，这里的英寸指的是屏幕对角线的长度，而英寸实际上是长度的单位。
 

分辨率可分为两种类型：ppi和dpi:
 

Ppi:每英寸(长度)所包含的像素点数目。
 

Dpi:每英寸(长度)包含点的数目。
 

对于dpi，了解就可以了，ppi才是比较重要的。从以上定义可以看出，dpi和ppi之间没有太大区别，除了像素(px)是设计师的最小设计单位，点(pt)是iOS的最小开发单位。在日常生活中谈论二倍图、三倍图就是指屏幕上的一个点有两个或三个像素。一个设备需要使用二倍图还是三倍图取决于ppi与dpi的比率。(plus 中ppi/dpi=2.6，约等于3)
 

分辨率换算
 

正如我之前所说，设计师对dpi只要了解即可，真正需要掌握的是ppi。ppi能给我们带来什么样的帮助?因为像素的物理大小不是**的，它会随着屏幕ppii的不同而变化，掌握ppi将帮助我们避免犯错误。
 

例如，在iOS的设计规范中经常会看到44、88这些数字，44是怎么来的?事实上，iOS推荐最小可点击元素的大小为44*44像素。苹果1就是一个例子，因为苹果在设计规范提出时并不适应retina屏，在苹果4推出时才开始使用retina屏。当时，屏幕ppi是163px，用户可以在屏幕上点击的物理尺寸是7毫米-9毫米。让我们用7毫米来计算，一英寸长度里有163像素，一英寸有25.4毫米，那么7毫米里应该有多少像素?
 

简单的数学换算可以得出44.92px，这就是我们通常所说的44px。所以这个44px只是一个相对长度，它会随着屏幕ppi的变化而变化。如果不明白这一点，你可能会死抓着44px不变，在任何分辨率屏幕上使用44px，显然是错误的。