zeplin和sketch协作的三个小窍门

2018-02-01 10:52:19 阅读 4617 本文来源:沪江设计中心
分享至:

相信作为一个有追求的设计师,大家都用上了省时省力的神奇zeplin了吧,相比于其他的标注,它的优点就不用多说了,更新后的zeplin不仅支持photoshop,还可以

切图!
切图!
切图!

重要的事情说三遍。


听到这里,大家是不是都想用它了呢?UI设计师们赶紧用起来吧!

那么zeplin和sketch协作时有没有什么需要注意的问题呢?是不是在sketch中完成视觉稿后,直接command+E上传到zeplin就可以了呢?为了让开发人员更好的“读懂”视觉稿,接下来我就简单讲一些zeplin和sketch协作时的三个小窍门。


1、如何在sketch中排版,便于开发人员在zeplin中查看

作为UI设计师,最好懂得一些布局上的常识。例如在sketch里设计列表,首先需要画出一个矩形作为列表的行高,然后把文字内容、图片放在同一文件夹中,内容和图片在矩形里垂直居中,作为列表的一行。上传zeplin后,就会标注出行高,图片大小、图片边距,这些都是开发人员想知道的数值。例如下面左图,开发人员可直观快速的看出这个列表的行高。若是为省事直接用两条线隔开,上传后,就不能直接显示列表行高,而需要开发人员自己测量两条线的距离。

20180201103233325.jpg


2、体积感不同的icon上传zeplin时如何在sketch里处理

由于不同图标形状不同,外形尺寸也会不同。在排列图标时,完全的物理等距视觉上反而会产生不等距离的错觉。为解决这一问题,在sketch中设计图标时,需要建立一个能包容同类图标的最大图标尺寸的shared style,如图1中图标外围30x30的矩形框。我们可以保持外框的间距一致,如图2所示。图标视觉上大小和距离不等只需在框架内进行细微调整(图标线条切忌出现0.5的数值,否则切图后会出现虚边)。上传到zeplin后,开发人员查看标注就比较明确。

20180201103249784.jpg


那么如何建立shared style呢?

创建一个矩形(大小根据自己图标来定,建议矩形大于图标8-10px即可)不要描边,命名为bg;

20180201103317370.jpg

如下图,建立一个shared style;

20180201103332082.jpg

建好后,为方便查看图标,可以设置适当透明度,如下图;

20180201103424096.jpg

点击“F”键切换隐藏和显示填色,鼠标点击时可显示框架(与图层管理的小眼睛图标不同,小眼睛图标会隐藏整个图层)。

20180201103454791.jpg

在sketch里切图时,这一功能的作用最大。点击“F”键显示填色,然后再添加slice切片,此时添加的切片会是框架大小,“F”键隐藏颜色后导出切图,就可以得到透明背景的图标。

20180201103602137.jpg


3、要在zeplin里直接切图,在sketch里时怎么添加切片

在sketch里添加切片,在zeplin上就可以直接下载切图,这是zeplin最近更新的又一强大功能,只需对要切的图点击右下角的make exportable后面的+号即可为想要切的图添加切片,然后想要切的图上会出现一个切片的图标。

20180201103617999.jpg

当然,切图要在sketch里命名好,这样上传到zeplin,开发人员就可以直接下载切图,包含所需尺寸。所以平时工作中就要养成规范命名的好习惯,避免重复劳动。(注意,zeplin里ios项目的命名为驼峰式)

20180201104217783.jpg

对于大出切图范围的图要怎么切呢?比如下面这个光晕,形状大小已经大出画板,我们不需要切那么大的图,光晕用了渐变,切到光晕边就可以了。

20180201104235931.jpg

同样可以建一个shared style,我们可以利用点击“F”键可以隐藏颜色,把它作为一个mask,可以看到(下图)光晕的范围就在mask范围内,我们只切出这一部分就可以了。

20180201104255207.jpg

大家掌握了吗?希望可以帮到你哦。


本文转自沪江设计中心,作者肖美玲

责任编辑:mr

认可我的创作,就鼓励一下吧

0人打赏
分享至:

联系客服

故障反馈