Sketch学习笔记01—画布与画板

Sketch笔记系列目录

最近在学习Sketch，学习之余我会通过笔记的形式将学习心得记录下来，大概会写上五六七八九十篇，具体多少篇，看心情吧。现在想写的，可能有下面这几篇，下面这些内容是我认为在学习Sketch过程中需要重点学习的内容，其他一些比较简单的例如图形、文字、图片、线条等等这些我就不讲了。
1. Sketch学习笔记01—画布与画板
2. Sketch学习笔记02—symbol组件
3. Sketch学习笔记03—template模版
4. Sketch学习笔记04—插件与库
5. Sketch学习笔记05—常用插件之Craft
6. Sketch学习笔记06—常用插件之Miaow
7. Sketch学习笔记07—常用插件之Kitchen
8. Sketch学习笔记08—常用插件之Sketch Measure

---

画布与画板的理解

因为之前我一直使用的原型工具是Axure，所以刚接触Sketch时会对它的画布与画板的概念有点不太理解。
下图中标记了Sketch的画布与画板，在Sketch中，画布是无限延伸的，我们可以将它理解为一个空间是无限大的画室，而画板就是支在画室里面的一个个画架板，用户可以在画板上预设的尺寸范围内进行创作。

画布与画板

添加画板

在Sketch中添加画板，它已经帮我们预设了iOS、Android、Web、paper常见的原型尺寸的画板，另外用户也可以选择custom自定义画板尺寸。用户选择好画板之后，就可以在画板上添加图形、图片、文字、线条等元素进行创作了。

添加画板

不添加画板添加矩形

上面刚提到了添加sketch预设的画板模版，但是实际工作中，通常需要通过连接线来标明页面与页面之间的跳转关系，而sketch中画板和画板是独立的，无法连接。因此，实际工作中，会通过在同一个大的画板中添加矩形，矩形与矩形之间连线来标明页面之间的跳转关系。

页面跳转连接

补充知识：原型尺寸

当我最开始使用Axure接触原型设计的时候，最困扰我的一个问题就是：我设计的原型的尺寸应该是多少？
在Sketch中，我们添加画板时，它很贴心的已经帮助我们预设了常用的移动设备和Web原型设计的尺寸。例如iphone8，Sketch帮我们预设的尺寸就是375pt x 667pt，单位是pt。问题来了，为什么是375 x 667，pt是什么？
在回答这个问题之前，我们先了解几个概念：
1. 手机物理尺寸单位—英寸；
2. 屏幕分辨率单位—像素；
3. 矢量设计；
我们通常了解到的一些手机参数描述iphone8是4.7英寸，分辨率是750px x 1334px。其中4.7英寸指的是iphone8屏幕对角线的实际物理长度，750px x 1334px指的是屏幕的发光点的数量。
4.7英寸的iphone8换算物理尺寸就是375pt x 667pt（points简称pt，1pt=1/72英寸），在iphone3GS的时代，1个pt里面就是1个像素点，而到了iphone8分辨率提高后，1个pt里面就是2个像素点。
当我们在做原型设计的时候，我们按照iphone8屏幕的物理尺寸进行设计就是375pt x 667pt，但是当我们通过Sketch导出来iphone8设计图给到前端开发工程师的时候，导出来的尺寸就是750px x 1334px（@2x，二倍图）。因为Sketch是矢量设计工具，所以可以导出来任意分辨率的设计图，而不会发生形变。

原型尺寸

以上就是对原型尺寸设计的解释，不知道有没有讲清楚，先说到这吧。byebye

参考资料：
1. 《Sketch交互设计之美》——夜雨