Sketch切图的正确姿势

Posted 2021-04-26 小白设计之路

    

Sketch被广泛应用于UI设计当中的原因不仅仅是因为它的精简和易操作性，其实最重要的还是在团队协作方面，下面简单的来总结一下我在工作过程中的经验总结。

为什么要选sketch？因为它会节省你很多不必要的时间，比如切图：有一款sketch的插件叫做zeplin，它可以根据你的设计图自动生成标注，简洁精炼，省去了自己切图标注的过程。

切图的时候要注意不要把画出来的icon直接不做任何处理就直接导出给技术，最好把切出去的每一个icon的大小数值定为整数，图标不够大的用空白区域弥补，这样就避免了切出去的图标大小不统一，甚至有小数点，搞的技术很烦，自己也模棱两可。

如何切图？以下图中的视频icon为例，一般都是把基本布局完成之后才开始切图，具体操作如下；

按照上述方法之后，如果细心你可能会注意到你切出来的图是由背景的，如图所示，那么我们如何解决尼？

接下来简单说一下生成标注的方法，简单讲述两种方法吧，先说第一种也就是我自己工作日常中最常用的方法，在你和你团队的前端工程师电脑里下载zeplin这个软件，之后由设计人员创建项目管理组，把对应项目组里前端的同事拉进来，接下来设计人员的设计图只需要快捷键command+e 就可以自动在zeplin上生成标注，如图所示，各个元素的各种规格一览无余，界面非常简洁，icon想用哪个就点哪个（前提是你必须要提前切好），真的是非常方便。

第二种是方法是下载一个叫sketch measure的插件，具体下载方法可以直接google搜索或者在知乎简书上直接搜索也行，用此插件最简单的方法是直接点击导出规范即可直接生成一个文件夹，里面会有一个标注的链接，点击链接即可查看标注，个人觉得不如zeplin方便。或者你也可以根据此插件的其他功能如图所示来自己进行标注。

好了今天的分享就到这，接下来的日子里我会不定时的把我工作中的学习经验分享给大家，希望大家可以一起努力，共勉！