设备屏幕全解：设计师，你不该对你的屏幕一无所知
发布时间：2017-05-15 18:08:19 所属栏目：产品 来源：woshipm.com
导读：副标题#e# 我们自称 UI/UX/PD/etc. 设计师，但是我们对自己手头上设备的屏幕去一无所知 — 沃兹基·硕德 什么是 DPI，什么又是 PPI ？ dpi、ppi、dp、pt、sp 等等这些个单位我们天天接触，但是真正理解这些单位的设计师恐怕并不太多，毕竟真的有点儿复杂，
|
并且，我们输出的图片的名字全部都要是一样的，安装不同的倍率进行导出，并且不能带有后缀或其他标记，同个图切出来不同倍率五张资源，分别被放入了相应的文件夹里面。使用神奇 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 未经许可，禁止转载。 （编辑：宁德站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐