设备屏幕全解：设计师，你不该对你的屏幕一无所知
|
程序员在搭建界面的时候也会像我们设计师画图一样，首先会有一个画布，一个画布代表针对设备的一屏，程序员将会在这个画布内对界面进行搭建。针对 iPhone（6~7）而言，这个画布的最佳大小是375*667pt。下面这张图就是程序员的画布，长这样的，有点像 Sketch，注意红框里面的数字。
等等，不是说 iPhone（6~7）的分辨率是 750*1334px 吗？这个奇怪东西又是什么？这是 iPhone（6~7）的逻辑点分辨率（或称虚拟点分辨率），这个就是人们为了解决屏幕尺寸繁多而设计出来的一套机制。iOS 系统就是根据这个 375*667pt 的画布进行一个二倍放大渲染来填满 750*1334px 的屏幕的。这也是为什么那么多设计师推荐使用一倍图进行设计的原因，这样是最接近开发环境的，开发不需要换算就能直接照着你的设计稿设置各个元素的尺寸和位置。 比如说，你在 Sketch 里面使用一倍稿（375*667px 的画布）画了一颗 44*44 px 的按钮，对于开发来说，这颗按钮在画布上并不是 44px 大小，而是 44 pt。**的确，我们在输出按钮这张图的时候会输出成 88px（@2），或132px（@3）但是我们输出的只是一张 .png 的图片，是这颗按钮的“表皮”而已。**而对于开发来说，这颗按钮是一个控件，是界面的一个零部件，这个控件的大小就不能定义成几多几多 px 了，**px 是死的， pt 是活的，面对iPhone 7，44pt 将会被渲染成 88px 大小的一枚按钮，上面覆盖上了你输出的 @2.png 表皮，而面对 iPhone 7 Plus，它将会被渲染成 132px 大小的一枚按钮，上面覆盖上了你输出的 @3.png 表皮。**系统是以这样的机制，来保证能够使用一个布局文件来对不同分辨率、不同 PPI 的屏幕进行尽量正确的布局。 DP 或 DiP 也差不多是这个道理，只不过这个单位用于安卓开发。 SP 是 Scale-independent pixels 的缩写，大意是可放大像素的意思，这个单位多用在安卓设备的字体大小上面。它跟 DP、 PT 的概念差不多，能够面对不同的屏幕尺寸渲染出大小适合文字。 罗里吧嗦那么多，敢不敢来张图？此处只以 iPhone（6~7）来举例，其实其他设备也是这个原理，包括电脑、手机、平板电脑、甚至是智能手表。
跑 iOS 的设备主要两种，iPhone 和 iPad。（iPod thouch就不讨论了，基本上跟 iPhone 一样。） iPhonesiPhone 方面我们从非 retina 显示屏的 iPhone3G/S 讲到 iPhone 7/Plus。 苹果在推出 iPhone 4/S 的时候首次为自己的智能手机产品配备 retina 显示屏。需要注意的是它的屏幕尺寸与 iPhone 3G/S 一样，都是 3.5 寸，但分辨率却整整提升了四倍，也就是说同样大的屏幕塞进去了四倍的像素，PPI 是前者的两倍，达到了 326。iPhone 5/S/C 的屏幕达到了 4 英寸。值得注意的是，iPhone 5/S/C 屏幕横向还是与 iPhone 4/S 一样保持有 640 颗像素，横向物理尺寸也没变，同样都是 2.0 英寸，变的是纵向的尺寸。屏幕边长了一点点，PPI 维持不变。iPhone 6/7（Plus）屏幕分别为 4.7 英寸和 5.5 英寸。前所未有的尺寸，前所未有的分大小屏，前所未有逻辑分辨率，同时也是前所未有的物理分辨率。非 Plus 机型维持了 326 PPI，而 Plus 则去到了 401 PPI。更大的屏幕，更高的分辨率，iOS的设计师也是从这个时候开始需要输出 @3x 的切图了。
关于 Plus 机型，不得不仔细说说它的一个小特点。 （编辑：网站开发网_安阳站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
