如果你是刚从PS转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的设计师,希望这篇文章能够帮到你(•̀ᴗ•́)و。