2020-08-12 UI设计培训

UI设计培训 | 为什么Sketch做设计用一倍图?

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

Sketch与PS的区别

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

PX与PT的关系

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


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


比如大家看苹果8(二倍图)与苹果8 Plus(三倍图)的手机微信截图:苹果8中“朋友圈”字号为34px,在苹果8 Plus中“朋友圈”字号为51px,字号对比为2:3,但是iOS开发人员在写代码的时候,输入的是统一的字号数值17pt。

UI设计培训

所以大家能够发现,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,整数倍的导出非常快捷。

UI设计培训

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

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


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

UI设计培训

所以大家在绘制“上分割线”的时候,画一条高度为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的设计师,希翼这篇文章能够帮到你(?????)?。






林老师:0371-5556 6060
XML 地图 | Sitemap 地图