本章重点：

1. 你想学吗？

2.软件安装；

3.基本设计流程

4.复制一组简单的接口

5.学习资料

1. 你想学吗？

它是一款轻量级的矢量设计工具！与 PS 相比，它的功能有限，但如果你只是做 UI、设计应用、网页等，它完全可以满足你对图片的裁剪需求，而且比 PS 更高效。另外还有丰富的插件库，可以大大提高设计效率。

在平常的设计工作中它并不是必不可少，因为现在的UI设计师不光做GUI的工作，还会做平面海报、易拉宝，做这些的时候必须用到图像处理能力强的PS。如果你只是平面设计师，就不用考虑它了，因为它是一个更侧重UI设计的设计工具。

现在还有很多设计师在使用PS制作UI设计稿，虽然PS CC在2017版本中对图片的裁剪有了很大的提升，PS插件的数量也在增多，但是不可避免的一个问题就是PS生成的图片文件非常大，PS吃内存的问题很烦人，还有一个问题就是缓存文件数量多，相比较而言PS就不会有这样的问题了，虽然在绘制复杂图形方面还是稍显不足，但是这个问题是可以解决的，画出来的图形完全可以照搬过来。

另外它只能在苹果系统下使用。

2.软件安装

下载链接：

下载完成后可以在网页上找到解压密码（.info），解压后按照步骤操作即可。如果遇到问题可以回到下载页面，滚动到文章后面，里面总结了一些安装问题和解决方法。

3.基本设计流程

其实它是一个非常好用的工具软件，网上也有很多基础的教程教你如何使用。一般学习一个东西的时候，我都会先思考学习这个东西的目的是什么？在达到这个目标的路上会出现什么问题，这些问题又该如何通过我学的这个东西来解决？

一开始学习的目的是为了配合老师的作业，完成课程的动画制作，后来找课程学习的时候发现可以做的事情多了，尤其是APP项目，相比PS确实方便，效率高。

我们知道一个APP项目一般包括很多界面，界面之间也有一些通用的部分，我们不能随便开个新项目就开始画界面。任何工作都会有一定的方法论，而设计一个项目的方法论又是什么呢？带着这个问题，我看了很多教程，试图找到一个我认为合适的方法论，终于找到了。

也就是设计规范的构建sketch 图标打组，而这套规范的基础就是组件，我觉得只有熟练使用组件才算是学会了。

这里简单描述一下总体设计流程：

（1）将要设计的页面整合成思维导图，这样可以帮助你了解一共有多少页。每完成一页都要做标记。

（2）观察每个页面的原型，并将其解构为不同的元素和组件；

（3）根据上一步解构的要素，制定相关设计规范

- 字体样式规范

- 图标规格

- 其他相关规定

（4）根据上一步编制的规范，设计组件；

（5）使用组件组合成页面；

（6）最后进行统一调整。

如果你想进一步了解如何从头开始设计一个项目，你可以观看以下视频：

如果你想学习如何科学地使用组件来创建设计规范，你可以阅读以下文章：

4.复制一组简单的接口

现在你已经收集了足够的信息，对软件有了一定的了解，就可以开始操作了。一开始不要做太难的事情。找一些简单的界面来复制，比如下面这个：

按照上面说的设计流程，我们先观察这组页面，然后进行拆分，可以看到界面上主要有文字，图标，图片，接下来我们就根据这些来制定我们的设计规范。

第一步是制定文本规范。在界面的任意位置输入你需要使用的文本样式，并将它们一一保存为样式规范，然后就可以删除文本了。此时我们可以在菜单栏的“插入-文档”中找到我们刚刚保存的样式。

接下来就是设计图标了，根据观察，页面上的图标有两种尺寸，一大一小，我们可以新建一个图标页面，按照图标尺寸分类进行设计。

设计好之后，就把它们创建为基础组件吧。这里有个小技巧，就是命名的时候加上一个[ / ]，可以创造出组件的层级解构。比如命名两个组件为“icon/back-hover”和“icon/back-”，组件库就会显示如下：

设计完文本样式和图标组件后，我们就可以开始构建基本的界面了。

在界面设计的过程中，可以不断将相似的部分组合成新的组件，比如下面的标题：

底部的菜单图标也可以组成菜单组件，图片和文字也可以组成列表组件，我为这些页面创建的组件如下：

使用时，直接从下面的菜单中选择即可。

插入一个小插曲，在设计图片列表的时候sketch 图标打组，我不知道应该怎样设计如下图所示的投影。

在向一起学习动画的朋友寻求帮助后，他们给了我一个链接，完美解决了我的问题。

设计完成后就到了导出文件的时候了，选择需要导出的界面，软件右侧就会有相关的导出设置，非常方便。

这套简单接口的抄袭就到此结束了，在这个过程中我学到了以下几点：

· 文本样式设置

使用图形工具

组件创建

图像阴影处理

· 使用图像蒙版

5.学习资料

基础教程

- 老师语言幽默有趣，每集内容层层递进，通俗易懂。

高级教程

- 老师讲的很接地气，知识面很广，听她讲课总结，了解了之前的设计流程。

组件用法

- UP很专注，只讲组件，看得出来很专业，建议有一定基础的同学看一下

图标绘制

- 画图不是我的强项，不过这位up主分享的画图过程干净利落，很有动感，相信只要照着做，画图标也是没问题的。

如有侵权请联系删除！