设备屏幕全解：设计师，你不该对你的屏幕一无所知(4)

发布时间：2017-05-14 19:16 所属栏目：30 来源：woshipm.com

导读：并且，我们输出的图片的名字全部都要是一样的，安装不同的倍率进行导出，并且不能带有后缀或其他标记，同个图切出来不同倍率五张资源，分别被放入了相应的文件夹里面。使用神奇 Sketch Measure 进行批量导出，程序

并且，我们输出的图片的名字全部都要是一样的，安装不同的倍率进行导出，并且不能带有后缀或其他标记，同个图切出来不同倍率五张资源，分别被放入了相应的文件夹里面。使用神奇 Sketch Measure 进行批量导出，程序员会跪着感谢你的。

看起来可能会是这样的：

drawable-mdpi/[文件名].png

drawable-xhdpi/[文件名].png

drawable-xxhdpi/[文件名].png

drawable-xxxhdpi/[文件名].png

以下拿运行于 Android 平板 Nexus9 上的 Chrome 浏览器作为例子。Chrome 的安装包里面带有了这五种倍率的切图，然而运行在 Nexus9 这台平板电脑之上的时候，它选用了 xhdpi 这一档分辨率的切图来对自己进行适配。

这里有个非常重要的点大家一定要注意一下。1.5 倍倍率切出来的图片必然带有小数，如 33pt * 1.5 = 49.5px ，如此之大的小数会让图片的边缘非常模糊，简直不能忍。所以遇到这两个倍率，我们要手动将小数去掉，譬如就将尺寸改变为 50px，不过刚刚提到的神奇能够自动地进行这一项工作。为了你的身体健康，请千万别把 49.5*49.5px 的图片输出出来交给程序员。

太长了不想看说是说有七种分辨率的图要切，但是就目前市面上的设备来讲你只要关注 mdpi、hdpi、xhdpi、xxhdpi、 xxxhdpi 这五种已经够了。如针对可穿戴设备的话，那可能会用到 tvdpi。360*640px 作为一倍稿进行设计。做标注时使用 dp 作为单位（iOS 使用的是 pt，但实际上差不多一个意思）如果尺寸出现小数，那么请手动将小数去掉。使用 Sketch Measure 进行导出的话就不用手动去撸，插件会代劳。输出 .png 格式的图片资源。记住命名规则，同个图片资源的各个倍率的文件名都是一样。

作者：Zhuyuxuan，知乎专栏：「DesignCoder」设计是一项工程；追波：Zhuyuxuan

文章作者系 @Zhuyuxuan 未经许可，禁止转载。

（编辑：ASP站长网）