为什么Sketch做设计用一倍图？

很多同学经常有这样的疑问“为什么Sketch预置的画板尺寸比PS里的要小？”，“为什么大部分人用Sketch做图采用一倍图？”今天就跟大家聊聊这其中的原因。

Sketch与PS的区别

由于Sketch是矢量绘图工具，与PS位图处理软件不同的地方在于：Sketch图像生成采用矢量图，在调整形状的时候可以进行缩放而不会损失质量。Sketch中iPhone8默认画板是一倍图尺寸375*667，PS中iPhone8默认为二倍图尺寸750*1334。

PX与PT的关系

px是像素，属于相对单位，而pt是点，是iOS开发过程中使用的单位，属于绝对单位。什么意思呢？就是说pt的值是不变的，px会随着屏幕像素密度的不同而发生变化。

iOS开发为了不同分辨率的设备统一正常显示，会提供三种不同尺寸的切图：一倍图@1x、二倍图@2x、三倍图@3x。一倍图中px与pt数值相等，二倍图中px数值是pt的2倍，三倍图中px数值是pt的3倍。

比如我们看iPhone8（二倍图）与iPhone8 Plus（三倍图）的手机微信截图：iPhone8中“朋友圈”字号为34px，在iPhone8 Plus中“朋友圈”字号为51px，字号对比为2：3，但是iOS开发人员在写代码的时候，输入的是统一的字号数值17pt。

所以我们能够发现，px是相对单位，pt是绝对单位。

设计采用一倍图的好处

1、与开发沟通无障碍

与我们设计师不同的地方在于，如果我们使用750*1334做图，在当前设计稿上标注px尺寸的话，开发工程师依然要在开发环境中换算为@1x尺寸的，比如标注了一个文字30px，开发在代码里写的时候会默默除以2，也就是15pt。

如果我们在Sketch里使用一倍图375*667来做图，开发直接把数据拿过去用就行，就不用除以2了，更加方便。

2、换算方便

如果是以二倍图设计，在换算三倍图时需要乘以1.5，相对比较麻烦。如果以@1x设计，在换算的时候只需要乘以2和3就可以得到@2x、@3x了。

3、文件体积更小

用Sketch做一倍图时，一个Page页面可以放置更多的画板，画板越多越方便设计师管理页面，保证设计规范执行更加到位。在Sketch里同时操作十几个画板很轻松，而基于位图处理的PS就没这么流畅了，在PS里放七八个画板就已经有些吃力了，文件体积以及对系统资源的消耗也很大，有时候卡的那叫一个心塞…

4、便于调用控件素材

Sketch自带的模版都是一倍图尺寸的，采用一倍图进行设计时，调用iOS和Android的系统控件直接使用就可以了。很多平台上的Sketch源文件素材也是一倍图尺寸的居多。

5、控件尺寸、间距把握更加自由

众所周知，我们采用二倍图尺寸进行设计时，需要保证控件大小、间距均为偶数，这样换算到三倍图时也是整数的。

当采用一倍图设计时，尺寸可以为奇数的，因为只要乘2和3就行，都是整数的，在做图的时候更加自由。

6、导出切图方便

我们可以在Sketch预设里设置好导出的规格尺寸，一倍图导出比二倍图更直观，三倍图的后缀就是@3x，二倍图的后缀就是@2x，整数倍的导出非常快捷。

注意一倍图中分割线的处理方式

我们在二倍图750*1334里绘制1px高的分割线，在一倍图375*667中会变成0.5px，直接绘制高度0.5px的Rectangle会出现不好对齐的情况。

在Sketch提供的iOS模版中，分割线是绘制了一条高度为1px的Rectangle，将Fill去掉，加上Inner Shadows，Y为0.5，其余值为0。

所以我们在绘制“上分割线”的时候，画一条高度为1px的Rectangle，用Inner Shadows，X为0，Y为0.5，Blur和Spread均为0。

在绘制“下分割线”的时候，用Inner Shadows，X为0，Y为-0.5，Blur和Spread均为0。

通过这样的方式可以很好的将0.5高度的分割线进行图层对齐。

总结

如果你在使用PS做图的话一般用二倍图设计，使用Sketch做图大部分采用一倍图（当然也可以用二倍图）。UI设计师使用一倍图为基准进行界面设计，主要是因为方便，便于理解。对开发来讲也不需要进行二次换算，效率也会得到提高。如果你是刚从PS转Sketch的设计师，希望这篇文章能够帮到你(•̀ᴗ•́)و。