第四篇——Android 的切图与标注

简评:长篇设计师修真玄幻小说最终章👏👏👏

MDPI, HDPI, XHDPI, XXHDPI 以及 XXXHDPI

大家都知道 Android 是一个开源系统,不像 iOS 只有苹果自家的机器能跑,屏幕尺寸一直以来也比较稳定,而运行 Android 系统的设备的屏幕却各式各样非常跳脱,这也就是以往大家经常说 Android 设备碎片化严重的原因之一。不过这种碎片化严重的情况来到今天已经改善了非常之多,纵使 Google 对于 Andorid 开源的策略重来没有变过,但 OEM 们开始不约而同地开始使用不那么“奇形怪状”的屏幕了,且某些低分辨率的机型随着时日变迁也已经被淘汰殆尽了。倒是 iOS 在推出 Plus 机型之后 iOS 屏幕碎片化的问题也开始凸显起来了,个人认为目前两大平台的屏幕碎片化问题都存在且大家都差不多,大家在对 Android 产品进行设计的时候大可不必那么担心。

与 iOS 相似的是,设计师们同样也是需要输出不同倍率的切图,只不过需要输出的倍率更多罢了。程序员将会把所有不同倍率的切图都装在同一个安装包里面,在运行的时候系统会根据屏幕的分辨率来自动选用正确倍率的切图。

坦率地讲,假如我们要纠结到每块屏幕的逻辑分辨率的话,那么Android 阵营的碎片化真的是无比严重,但是我们知道,只要逻辑分辨率差的不太远的话,我们能够用同一个稿来进行设计、输出切图,其中的误差必不可能避免但将会在一个可接受的范围之内。对于Android 产品来说,一般我们都使用 360*640px 作为一倍稿进行设计。

目前为止还需要我们输出切图的分辨率有五种:代表 1 倍的 MDPI, 1.5 倍的 hdpi, 2 倍的 xhdpi, 3 倍的 xxhdpi 以及 4倍的 xxxhdpi(三星最近发布的 S8 就是这个倍率)。ldpi 和 tvdpi 以及可以不予考虑了。有一点需要提出的是,被淘汰的 tvdpi 这种分辨目前被很广泛地使用到了 运行 Android 系统的可穿戴设备上,例如前阵子很火的 Moto 360 智能手边,假如要设计手表上面的产品的话那么就得输出这个倍率的切图。

下面给出一张图,让大家看看各个档次的 DPI 的代表机型,某些机型年轻一点的小同学(例如我自己)可能连听都没过,大家看看就好,开拓开拓眼界,无需过分在意。

标注与切图——以 Chrome 浏览器为例

与 iOS 一样,我还是建议大家使用一倍稿进行设计,然后再输出各种倍率的切图就好,但是 Android 系统要求图片资源的命名与管理图片资源的方式是和 iOS 是完全不同的。

上篇我们简单的介绍了下 iOS 的图片资源的命名方式,很简单,就是文件名加上 @2X、@3X 这样的小标记。然而来到了 Andorid 平台我们就不这样命名了。

以下这张长图是 Android 工程文件管理图片资源的方式,我们可以看到里面有从 drawable-hdpi 到 drawable-xxxhdpi 数个文件夹,你没猜错,这些文件夹里面就放着设计师们精心设计出来的各种 .png 切图。

Android 系统会自动根据屏幕的属性来选则使用哪个文件夹里面的那套切图。譬如说在新出的盖乐世 S8 上面运行的话,那么系统就会自动选择使用 drawable-xxxhdpi 文件夹里面的图,新出的小米 6 的话,就会自动选用 drawable-xxhdpi 文件夹里面的图。

并且,我们输出的图片的名字全部都要是一样的,安装不同的倍率进行导出,并且不能带有后缀或其他标记,同个图切出来不同倍率五张资源,分别被放入了相应的文件夹里面。使用神奇 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 格式的图片资源。
  • 记住命名规则,同个图片资源的各个倍率的文件名都是一样。

相关阅读:

参考链接:Designer's guide to DPI

欢迎关注

  • 知乎专栏 「极光日报」,每天为 Makers 导读三篇优质英文文章;

  • 个人专栏: 「DesignCoder」 设计是一项工程;

  • 我的追波:Zhuyuxuan