移动端 UI 适配最佳实践（下）

前两篇更多的是理论部分，这篇主要是实践。

身为攻城狮的你，是否曾想过：如果设计师能按逻辑像素来标注，是多么美好！可现实是，你不得不拿着标注再除个 2 或 3

身为设计师的你，是否曾想过：攻城狮实现的 UI 能够和同设计稿一样，可现实是，你不得不忍受着，某些地方差几个像素或次像素

本篇可能不能解决所有问题，但希望能解决一部分问题

关于倍率的思考

前两篇谈到了逻辑像素和倍率，当 UI 元素的长度单位为逻辑像素时，系统在渲染时会根据倍率自动换算成物理像素。

正因为如此，攻城狮写布局文件时用逻辑像素为单位。攻城狮就想了：如果设计师给的标注是以逻辑像素为单位的，想必是极好的。设计师就想了，如果以逻辑像素标注是方便了你，可是对我有好处没？

答案是有的，大大的有！比如快速切出 2X，3X 的资源等等。那么问题来了，该怎么做？

How to

本文以 photoshop 为例。

photoshop 里默认点/派卡大小为 72 点 / 英寸，而新建文档时，设置分辨率为 72 像素 / 英寸（这也是默认值），那么在该文档上 1 英寸上有 72 个点、1 英寸上有 72 个像素，即 1 点 = 1 像素。如果改变分辨率会怎么样？我们试试。将分辨率设置为 216，此时文档上 1英寸还是 72 个点，但是 1英寸上有 216 个像素，即 1 点 = 3 像素。回忆下，前面已经讨论到：当倍率为 1 时，1 逻辑像素 = 1 像素；当倍率为 3 时，1 逻辑像素 = 3 像素。也就是说 photoshop 中的点就是逻辑像素。

聪明的你，已经明白了吧，更改文档分辨率即可更改倍率，这样就可以快速导出 2X，3X的图啦！来几张图

设置photoshop的标尺单位为点

设置photoshop的标尺单位为点 32px asset (32dp @ MDPI)

假设这是你的设计稿，如图所示，32px asset (32dp @ MDPI) 即 32 逻辑像素在倍率为 1 时，长度为 32 像素。 ImageSize

如上图所示：分辨率为 72 px/in，文档大小 32 points，像素大小 32 px ImageSize

将分辨率设置为 216 px/in（只更改这一个值），你会看到像素大小自动变为 96 px，而文档大小没有变化。此时，你的设计稿会怎样？（需要在矢量图层上设计，否则图会变虚，设计师们懂的） 96px asset (32dp @ XXHDPI)

96px asset (32dp @ XXHDPI) 即 32 逻辑像素在倍率为 3 时，长度为 96 像素所有单位为点

所有的单位都是以点为单位的，也就是攻城狮们需要的逻辑像素单位咯。既能够快速导出不同倍率的资源图，又能方便攻城狮们，皆大欢喜！

几点小建议

在矢量图层上设计且分辨率为 1X
文档（画布）大小的设置

画布设置

通常，对于手机，设计 5 英寸的，对于平板，设计 9 英寸的，就可以覆盖绝大多数机型了。例如：设计稿基于 360 x 640 dp，分辨率为 72 ppi，此时你想在 720 x 1280 px 的手机上看一看效果，很简单，这个倍率为 2 ，只需将分辨率设为 144 ppi ；那 1080 x 1920 px 呢？倍率为3咯，分辨率改成 216 ppi 即可。