码农也该懂点sketch

一、简单的了解一下sketch

sketch

sketch是一款轻量的，易用的矢量设计工具，有了它，可以让你进行更加简单高效的UI设计。

个人总结下接触sketch一段时间之后的感受：

1、PS比上手Sketch要难得多，这就意味着独立产品开发者，sketch是你更优的选择。

2、sketch包大小比ps要小很多，并不是一个数量级的，因此，对于硬盘容量捉襟见肘的你，sketch是你不二的选择。

3、sketch有大量的免费矢量图标供你下载，直接拿来复用，而且社区还非常活跃，即便你没有找到素材，也不要害怕，你总能够从一些技巧和文章中获得灵感，来自己进行设计，别怕，一点都不难。

二、作为移动端开发，我们如何用sketch

因为，据我们所知，根据我们的历史经验，我们平常工作中用某个工具的时候，80%的时间只在使用这个工具20%的特性上，因此，我这里也就重点来拨开sketch20%的特性对于我们来说是什么？

请按照我的步骤来，过程结束你会得到一个标注好的包，对应这个包，你就可以做出一个设计优美的App了。

1、新建一个新的sketch工程，如何大概长这样：

空白工程

2、上面什么都没有，就是一个空工程，试想一下，我们app是有一个一个的页面组成的，那么，我们是不是要插入一个页面呢？然后在页面里面填点元素还是什么的？

好，那么，我们点击insert，window的左上角那个，出现这样换一个面板，选择artbord，

artboard

3、然后，在window的右侧那里选择，你需要的尺寸，这里我选择iPhone8了，对于做Android开发的，你应该也理解为什么视觉出的图总是按照iPhone来出，因为他们也懒啊~~~

4、好的，选择好了之后，现在就可以看到面板中有这样一个artboard了：

添加了一个artboard之后

5、接下来的事情自然是给这个面板添加一些元素了，比如，我们做一个底部有三个tab的页，分别是《广场》《发现》《我的》：

添加tabbar

6、你也许觉得这么好看的tabbar是我自己化出来的，错！！！，这是我添加的而已，准确说，这是别人设计好的一个可复用的symbols，我直接拖过来的，看这里：

可复用的symbols

7、这些symbols哪里来的？嗯，是从sketch的插件中下载的，这里就引入了插件的下载：按住command+,

你就会进入，然后点击libraries，就会下载，然后傻瓜式的安装即可。

下载

安装

8、安装之后，你就可以使用这些symbols了，tabbar我们已经添加好，同样的步骤，我们添加一下导航栏：

导航栏，底部tab添加完毕

9，接下来当然是添加一个列表了，那我们就添加一个风云人物吧：

风云人物

10.ok，这个页面算是设计好了，接下来，我们就要输出设计文稿给开发狗（自己）开发了，那么，怎么输出呢？你需要下载一个插件 ：

就是这个sketch measure

安装这个插件即可，可以直接github上下载安装：https://github.com/utom/sketch-measure

11、接下来就改导出设计文稿了：在导出的过程中，需要注意一点，除了切图之外，其他的都是自动处理的，这里我们需要把底部的三个icon导出出来：

导出的方式是，选中要导出的icon，然后吧sketch measure工具打开，在点击一下那个刀的工具，然后在右侧选择要导出的分辨率，需要2倍图的可以点下那个3那个加号。

12、切完图之后，最后就导出吧：

导出规范

13，最终，你就可以看到sketch measure的输出了：

14，至此，你就可以开心的去做更具优美的设计做开发了。