Sketch手册:画布

画布

Sketch 里的画布区域是无限大的。画布预览模式有两种,你可以用矢量(分辨率无关)模式来查看画布,也可以打开像素模式来查看每一个像素导出后的样子。可在像素缩放章节查看到更多内容

Sketch手册:画布 - US - UI设计素材库

如果你想在画布中设置一个固定的边框,你可以直接用画板(Artboard)工具创造一个新的画板。

定位

画布中的定位是非常方便的,你可直接用鼠标滚轮滑动或 Macbook 的触摸板来控制方向。你还可按住空格键,然后按住鼠标左键来使用抓手工具移动画布。

最后,在没有任何对象被选中的时候,简单的使用键盘方向键也可以移动画布。

值得注意的是,Page Up / Page Down 是用来在页面当中切换的。

缩放

除此之外,你会在 Sketch 的视图(View) 菜单中找到很多用于缩放特定内容的快捷键。按住 command  键并滚动鼠标滚轮即可。

你也可以使用键盘 Z 键来快速放大某一特定区域,点击画布任一点拖拽出矩形区域即可。要回到上一个缩放状态,请使用 option  + Z + 点击。

查看更多方便的快捷键

command  + 2 缩放指定图层

command  + 3 将选中图层置于画布中央

本章节包含...

像素缩放

在 Sketch 里,你可用来你两种方式来查看你的作品,具体用哪一种则取决于你的创作了。

这两种模式执行菜单命令视图(View)> 画布(Canvas)当中切换,也可用快捷键 control  + P 来切换,当然,将这个按钮放在工具栏上也是可以的。值得注意的是,当你在 100% 的尺寸(实际尺寸)下,这个两个模式是没有任何区别的,只有当你放大图片时,才会显示。

Sketch手册:画布 - US - UI设计素材库
如果你很在意作品中每一个像素看起来的样子,那么像素模式就非常好的选择。你所看到的基本相当于先把作品导出为位图,再在看图应用中放大查看。

如果你不太在意上面这些那么矢量模式会更适合你,就算你放大,所有的图形也依然会有顺滑的曲线。

值得注意的是,有些像模糊或者投影类的效果,会强制将画布的一部分以像素模式显示,因为模糊类的效果本身就是一个基于像素的效果。

Sketch手册:画布 - US - UI设计素材库

显示像素网格

像素网格能让你在低对比度,或者无法用肉眼分辨出的情况下区分出那些变模糊的像素。执行菜单命令视图(View)> 画布(Canvas)> 显示像素网格(Show Pixels Grid)即可打开(快捷键 control  + X)。结合像素显示模式,没有精确对齐像素网格的内容在缩放到高于 600% 的情况下都可以被发现。

近一步了解如何精确对齐像素的内容,可阅读像素精度章节。

Sketch手册:画布 - US - UI设计素材库

标尺、参考线、网格

Sketch 里的这几个工具能帮你把图层准确的放在理想的位置,是沿着网格还是沿着一条直线,又或是在另两个图层正中间。

参考线

智能参考线在默认情况下是被打开的,可执行菜单命令视图(View)> 画布(Canvas)> 显示智能参考线(Show Smart Guide)切换打开和关闭状态。当你在调节一个图层的大小或移动位置时,Sketch 会自动帮你把这个图层与其它图层对齐。如果 Sketch 将某一图层自动与另一图层对齐,你会看见一条红线,两个图层便依据这条红线得知对齐的是什么位置。

Sketch手册:画布 - US - UI设计素材库

当对齐网格选项被打开时,当你移动任何内容时,它们都将自动对齐到网格,此时对齐智能参考线功能将失效。

标尺

Sketch 中的标尺在默认情况下是被隐藏起来的,要激活它,执行菜单命令视图(View) > 画布(Canvas)> 显示标尺(Show Rulers)或使用快捷键 control  + R。正如之前说的,Sketch 里的画布是无限大的,所以标尺也不是固定的。你可任意拖动标尺以便定义自己的坐标轴:

Sketch手册:画布 - US - UI设计素材库

如果你需要重新设置标尺原点,只需双击标尺交叉区域:

Sketch手册:画布 - US - UI设计素材库

你可在标尺上任一处双击鼠标,便可添加横向或者纵向参考线,只要标尺是被显示的,这些参考线也会一直被显示。想移动标尺,只需拖拽标尺区域。想要移动单个参考线,你必须在标尺中选中参考线再拖拽。想要移除手动参考线,则只需把参考线拖到两条参考线的交叉区域,噗的一声便会消失:

Sketch手册:画布 - US - UI设计素材库

鼠标右键点击标尺区域,可在关联的菜单中设置不同的标尺选项,当然,也可通过此选项移除所有横向或者纵向参考线。

网格

Sketch 支持两种不同的网格:常规网格和布局网格,你可根据所进行的创作来选择适合的网格,这两者的区别也非常显而易见:

常规网格

常规网格是典型的方形布局网格,它附带颜色块的大小,线的粗细等等这些属性。默认的常规网格是由长度为 20px 的小方块组成的,每 10 个小方块出现一条粗线条。

Sketch手册:画布 - US - UI设计素材库

执行菜单命令视图(View)> 画布(Canvas)> 显示网格(Show Grid)来打开网格,在这里你还会看见网格设置(Grid Settings)的选项。

布局网格

布局网格允许你定义列和行,这种布局非常适合做网页设计。

Sketch手册:画布 - US - UI设计素材库

在布局网格里,你可改变页面的总宽度,以及所含多少个纵列。同时你也可修改每一个横排的高度和纵列的宽度, 同时还有针对间距的选项。

Sketch 会尽力将网格放在画板的合适位置,不过一旦画板大小发生改变,网格内容可能会错位,这时你只需要按下 enter 键就可让网格对齐到画布中心。

你还可同时编辑多个画板的布局网格。

网格制作工具

如果你已经选择了某个层,并想分配均匀它们,你可执行菜单命令布局(Arrange)> 制作网格(Make Grid)。在这里,你可指定行或者列数,间距的值,来创建一个属于你的理想网格布局。

你也可使用这种方式来复制图层或者丢失的表格内容。

测量

Sketch 有一个超棒的内置工具,来确保你创作的内容都能整齐排列。这对与那些收到 Sketch 设计稿的开发人员来说也是个福音,他们可以轻松的查看每个元素之间的精确距离。

距离

当你按住键盘上的 option  键,Sketch 会帮你显示出你已选中的图层和你的鼠标现在所悬浮的图层之间的距离,一个简单的图例便能说明。

Sketch手册:画布 - US - UI设计素材库

同样的,在移动一个对象时,移动到和另外两个对象的距离相等,Sketch 也会给你提示。

Sketch手册:画布 - US - UI设计素材库

尺寸

以同样的方式,如果你在调节一个图层的大小,Sketch 也会帮你显示出具有相同长度或宽度的图形的数据。

Sketch手册:画布 - US - UI设计素材库

525