Sketch 自学指南（初级版）
最近在学principle动效，于是顺便把sketch给学了。
本章要点：
1、要不要学Sketch；
2、软件安装；
3、基本设计流程
4、临摹一组简单界面
5、学习资料
1、要不要学Sketch
Sketch是一款轻量级的矢量设计工具！相比于ps来说，sketch的功能有限，但如果你只是单纯的做UI，设计app、web等，出图切图是完全足够的，而且比ps更加的高效。另外sketch有很丰富的插件库，可以大大的提高设计效率。
Photoshop和sketch在正常的设计工作中都不是必不可少的，因为当下UI设计师不会纯粹的只做GUI的工作，像平面类的海报，易拉宝都会做，在做这些的时候必然是使用图像处理比较强的ps。如果你单纯只是一个平面设计师，你可以不用考虑sketch了，因为sketch是更注重在UI设计方向的设计工具。
现在依然有很多设计师在使用ps制作UI方面的设计稿，虽然ps cc在2017版本的对于切图方面做了重大改进，ps的插件也在不断增加，但有一个不可避免问题就是ps出的图文件都很大，而且ps吃内存的问题很让人苦恼，还有一个问题就是大量的缓存文件。相比之下sketch不会存在这些问题，虽然sketch在绘制复杂的图形上还稍有欠缺，但是这个问题可以通过illustrator解决，在illustrator中绘制的图形完全可以复制到sketch中。
另，sketch只能在苹果系统下使用。
2、软件安装
下载地址：https://xclient.info/s/sketch.html
下载好后，可以在网页上找到解压密码（xclient.info），解压后按照步骤按照即可，如果有遇到什么问题，可以回到下载页面，拉到文章后面，有汇总了一些安装出现的问题和解决的方法。
3、基本设计流程
sketch其实是一款很容易上手的工具软件，网络上也有非常多的基础教程教大家怎么使用。一般学习一个东西，我会先去思考我学这个东西的目的是什么？通往这个目的的路上会出现哪些问题，这些问题如何通过我学的这个东西去解决？
一开始我学习sketch的目的是为了配合老师的作业，完成principle课程的动效制作。后面在找课程学习的过程中，发现sketch可以做更多的事情，尤其是在做APP项目上，对比ps真的便捷高效很多。
我们知道，一个APP项目一般都包括很多个界面，各个界面之间也会有一些通用的部分，我们不可能接到一个新项目就直接打开sketch画起界面来。任何的工作都会有一定的方法论，而用sketch来设计项目的方法论又是什么？带着这样的问题，我翻看了很多教程，想找到自己觉得合适的方法论，果然还是被我找到了。
那就是设计规范的构建，而这一套规范的根基就是sketch的组件。我觉得熟练掌握了组件的使用，才算是学会了sketch。
下面简单说下一般的设计流程：
（1）把要设计的页面整合成一份思维导图，方便了解具体有多少个页面，做完一个就标记一个；
（2）观察每个页面的原型图，解构拆分成不同的元素、组件；
（3）根据上一步解构出来的元素制定相关设计规范
- 字体样式规范
- 图标规范
- 其他相关规范
（4）根据上一步整理出来的规范设计组件；
（5）利用组件组合成页面；
（6）最后，统一调整。
想具体了解一个项目的设计是如何从无到有的，可以看下面这组视频：
https://www.bilibili.com/video/av38146253/?p=1
想了解如何科学利用组件创建设计规范的，可以看下面这篇文章：
https://mp.weixin.qq.com/s/zQvt39ubV5Z4zHuZg2_fKA
4、临摹一组简单界面
信息收集得差不多了，对sketch这个软件有个一定的了解，接下来开始真枪实弹的操作起来了。由于我平时时间比较紧张，白天要上班，晚上要带娃（还两娃），所以没法给自己整太复杂的东西，就找了一个简单的参考，如下：
根据前面提到的设计流程，先对这组页面进行观察，然后拆分。可以看到界面上主要有文字、图标、图片，接下来就从这几个来制作我们的设计规范。
首先是制定文字规范。在界面上任意地方把需要用到的文字样式都打出来，一个个保存成样式规范，然后就可以把文字删掉了，这时我们可以在菜单栏的“置入-文档”中找到刚刚保存好的样式。
接着是设计图标。根据观察，页面上有两种尺寸的图标，一种大的一种小的，我们可以新建一个icon的页面，在上面按照图标尺寸分类去设计。
设计好后把他们创建为基础组件。这里有个小的tips，那就是在命名时加个[/]可以创建组件的层级解构。比如命名两个组件名为“icon / back-hover”，“icon / back-normal”，在组件库中就会如下展示：
设计好文字样式和图标组件之后，我们就可以开始构建基础的界面了。
在设计界面的过程中，可以不断的把一些类似的部分再继续组成新的组件，比如下面这个标题：
还有底部的菜单图标也是可以组成一个菜单组件，图片和文字也可以组成一个列表组件，这几个页面我创建的组件如下：
使用时可以直接从下面这个菜单中选取。
另外插播一个小小的插曲，就是在设计图片列表时，我不懂在sketch下如何设计如下图的投影。
求助了一起学动效的小伙伴后，他们给我了一个链接https://oursketch.com/video/11 ，完美解决了我的问题。
设计完成后就是导出文件了，选择要导出的界面，在软件的右边就有相关的导出设置，还是很方便的。
这组简单界面的临摹就到此了，在这个过程中我学到了以下内容：
· 文字样式的设置
· 图形工具的使用
· 组件的创建
· 图片阴影的处理
· 图片蒙蔽的使用
5、学习资料
· 基础教程
- https://www.bilibili.com/video/av31976538/?p=3
- 老师语言幽默风趣、每集内容层层递进，方便理解。
· 进阶教程
- https://www.bilibili.com/video/av38146253
- 老师很实在、干货满满，前面那套设计流程我就是听了她的课程总结的。
· 组件使用
- https://space.bilibili.com/6970085/
- UP很专注，只讲组件，也可以看出很专业，推荐有一定基础的同学观看
· 图标绘制
- https://www.bilibili.com/video/av24541119/?spm_id_from=333.788.videocard.13
- 绘制图形不是sketch的强项，但是这个up主分享的绘制过程干净利落，动感十足，跟着做一遍相信在sketch里面绘制图标就没什么问题了。
