移动端 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的标尺单位为点

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

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

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

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 便可。

• 标注以逻辑像素（即photoshop中的点）为单位
• 字体

Android平台：非汉字使用的是 Roboto 字体，汉字使用的是 Noto 字体。

• 行距

排版以 4dp 为基准，行距为 4dp 的倍数，20dp, 24dp, 28dp, 32dp等等

附：Material design 关于尺寸的章节

参考文章

全文完