一、 Sketch 软件下载
下载地址：http://www.sketchcn.com/
网盘连接：https://pan.baidu.com/s/1TwPZOHktjUvwPhi0o4hd1w
密码：3xrw
二、Sketch 快捷键总结
三、Sketch 入门
四、基础视频
案例一
Sketch App
Code
Index.html
index_html.png
视频连接：https://www.youtube.com/watch?v=mcw4AViN7jw
这个案例的优点在于：非常基础，很容易上手，而且在视频中介绍了几个比较好用的插件，并提供了案例的源码以及插件的下载地址；作者的发音很清晰，语速也很适中，语言基础稍微好一点的都不用开字幕。
缺点： 案例内容和样式比较单一。
案例二
Sketch App
Code
Index.html
视频连接：https://www.youtube.com/watchv=vbLwuWfgOVg
优点：简单容易上手、涉及的知识点比较多但不深、简洁风看起来比较舒服
缺点：口音很迷而且没有字幕，不适合加速播放学习
五、进阶视频
Sketch App
Code
Index.html
视频连接：https://www.youtube.com/watchv=Z7jnXrmS1to
源码地址：https://github.com/liuyuelintop/sketchToSketch
优点：从原型设计到代码实现，逻辑清晰，涉及到的知识丰富，讲的也很细致，整个案例做下来可以极大地提高个人的实力和使用 Sketch 的熟练度，回头再看之前的案例很快就能完成复现。在案例中使用了 CSS 拓展语言 Sass 完成样式的定义，很大程度上提高了工作的效率。同时作者使用了一些查询样式的网站，记录下来会对我们有所帮助：
http://hslpicker.com/#ff0026
https://material.io/design/color/the-color-system.html#tools-for-picking-colors
http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32
缺点：这个案例由五个视频组成，时间比较长，对于小白快速入门不太友好，所以放在进阶这个板块里面。同时，作者在某些细节上过于纠结，会影响进度的进展；作者在发布视频之前应该没有仔细进行过备案，少了打磨，导致在视频中会出现比较多次样式数据的调整(代码也跟着调整)，这样也减缓了观看者的学习速度。
最后再推荐一个 Sass 基础入门的讲解视频：
https://www.youtube.com/watch?v=k7FQoM-XYXo
刘月林
写于湖北沙洋
2018/08/01
网友评论