-卷首-

纯技术文章一篇。

经验之谈，比较干涩……

可以说很干！

照着做就对了。

| 在 1x 像素密度下做设计的好处

不在 1x 倍率下做设计也不是不行，只是到后面你会发疯，毕竟设计师中没几个人数学好的……

p.s. 此文所有论述基于软件 Sketch；基于我本人的项目经验并参考了一部分国外文章。

废话少说。为什么我建议大家在 1x 倍率下做设计，好处呢？？

好处1

- 避免计算

如果你不在 1x 倍率下做设计，等着你的将是无尽的计算！是的！无尽……我们知道，移动设备的屏幕五花八门，光 iOS 设备就 3 个倍率，安卓的主流倍率更是高达 5 个。相信我，如果你不听我的，那么在后期切图和标注这俩环节上你会无比痛苦，设计过程也不好受。

举个栗子：

假如你在 2x 倍率下做设计，将以下像素（px）转换成点（Pt）：字体为 36 px 大小，左右页边距为 40 px，“天头”（上边距）为 20 px。

好！我就问你，如果在 3x 倍率的屏幕中呢？这些数值怎么换算？？？要知道，程序员开发用得单位可不是 px 而是 pt（以 iOS 开发为例）！你大概要跟程序员说：“Hey！大哥，页边距可是 16.66 pt 了哟~~”——这大概疯了吧？

你看程序员 GG 会不会喷你~

好处2

- iOS 和 Android 统一了！

简直棒呆！iOS 和 Android 之间长度单位一一对应了！天啦！！简直不敢相信！

且慢，好像哪里不对？！iOS 开发单位是 pt，Android 的开发单位是 dp，怎么就一样呢？名字都不一样。相信我，这是经过计算的，pt 是在 163 ppi 下诞生的，与像素一一对应；dp 是在 160 ppi 下诞生的，与像素一一对应（见下图）也就是说，pt=1/163 inch，dp=1/160 inch。对，几乎一样！数值差异可能在小数点好几位后才体现，忽略不计咯~不要矫情。

http://blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/

好处3

- 切图直出！

好的，若你是在 2x 倍率下做得设计 ，想导出一些切图。对于 iOS，您需要导出 0.5x（实际是 1x），1x（实际是 2x）和 1.5x（实际是 3x）

玩数字游戏吗？？不搞乱就算阿弥陀佛了！！

对于 Android，有五种尺寸。您将导出为 0.5x（实际是 1x / mdpi），0.75x（实际是 1.5x / hdpi），1x（实际是 2x / xhdpi）1.5x（实际是 3x / xxhdpi）和 2x（实际是 4x / xxxhdpi）

然而，当在 1x 倍率下设计时，这一切都变得干净、清晰。以 1x 输出实际上得到的就是 1x  的切图！！简单、高效！

以下是 Sketch 中从 1x 和 2x 导出的对比

左边基于 1x 倍率，右边基于 2x 倍率

好处4

- 与开发 GG 使用的单位一致了！

程序员们开发时不使用像素为单位~他们用 pt 和 dp。

YES！在 1x 倍率下设计时，像素与 pt、dp 是一致的，所以你在 Sketch 里长度单位已然和程序员 GG 们一致了，这样的好处是你们终于可以无障碍交流了，因为你们使用了一致的长度单位。完全不需要换算！

反例，如果你在 2x 倍率下作图，你跟程序员描述一个 50 px 的长度时，他得除以 2，也就是 25 pt，然后才能用于他的开发环境！损人不利己是也……

好处5

- 预览无压力

不要以为在 1x 倍率下作图在手机上预览就会模糊。完全不用担心，不管你用 Sketch Mirror 还是 Skala Preview，都没问题~我保证！Perfect~

好处6

- 文件更小

您的设计文件将会更小，特别是包含一些位图图像时。如果您在 Sketch 中有许多画板，你的电脑难免会卡顿。但在 1x 倍率下，画板的尺寸就小了很多，电脑和人脑的压力自然也就小了很多~

好处7

- 防患于未然~

YES！天知道以后还会出什么倍率的手机，反正屏幕像素密度越来越大~~不用怕！反正在 1x 倍率下设计又不用的担心咯~~出图直接乘以系数就 OK 啦！

好处8

- 避免欺骗性

对的，在 2x 倍率下，也就是高像素密度的屏幕里，往往会有一些看上去很美的东西而导致设计师犯一些错误，比如，高分屏下总是能显示更多的细节，设计师往往会过于刻画它们，而忽视了当它们出现在 1x 倍率屏幕中的样子，其实往往那些细节就会丢失或失效。

总结

以上言论基于个人经验，因为我曾在此问题上吃过苦！是的，我有过一次以 2x 倍率为基准做设计，之后切图和标注的时候差点没烦死我自己，好在我们的开发很给力，自己写了一个程序来帮我计算并纠正。总之，如果你们使用 Sketch 做 UI 设计，记得新建画板的时候以一倍的倍率来设置（见下图所示，其实 Sketch 已经把这个列为默认尺寸了，不要自作聪明地去改它们就好），百利而无一害！相信我。

-写在最后-

我知道今天的推文有点干涩，似乎都是数字。。。。其实我数学也不好，希望大家花点时间消化一下，了解一些根本的东西我觉得对后面做设计是有好处的。如果还是不清楚，可以加我微信（prxt_16)详聊，我会在有空的时候给大家解答。

参考文献：

https://medium.com/shyp-design/design-at-1x-its-a-fact-249c5b896536

http://blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/

https://developer.apple.com/library/content/documentation/WindowsViews/Conceptual/ViewPG_iPhoneOS/WindowsandViews/WindowsandViews.html

https://developer.apple.com/ios/human-interface-guidelines/graphics/image-size-and-resolution/

http://sebastien-gabriel.com/designers-guide-to-dpi/