Sketch UI设计用Sketch做UISketch

Sketch学习笔记: Page, Artboard和Group

2016-08-16  本文已影响2121人  LaurenQ

Page, Artboard和Group的层级关系

Sketch中的图有三个层级关系,用思维导图简略表示如下:

2016-08-16_16:19:27.jpg

1. Page

一个Page下边可以有多个Artboard和Group,Group可以从属于Artboard。

Page的画布是无限大的,可以随意添加Artboard、图形。

2016-08-16_16:23:26.jpg

2. Artboard

如上所示,Page之下的第二级就是Artboard。可以理解Artboard就是无限大的Sketch画布中的一块块区域;

在Axure中,我们如果想要在一页画布上呈现多个手机屏幕大小的区域,必须自己去定义母版、或者使用别人做好的组件,为了方便操作还得进行锁定之类的操作,其实不是很方便的。

在Sketch中,可以很方便地添加常用的Artboard,官方已经自带了。按住键盘上的A就可以快捷添加Artboard,右侧会出现常用的选择:

2016-08-16_16:10:58.jpg

3. Group

Group可以是 一些图形的集合:


2016-08-16_16:01:29.jpg

如图所示,如果你把三个图形选中并组合它们,它们会成为一个Group。你可以重命名这个Group,还可以把其他的图形拖进来。这个Group现在和其他的Artboard是同级的。
在一个Group里的的图形,鼠标移过时会显示蓝框范围:


2016-08-16_16:03:40.jpg

假设你画一个Artboard把这个Group所有的图形框起来,你会看到此Group被归于这个Artboard之下了;

2016-08-16_16:05:07.jpg

演示

我们现在用空白的Page3做添加Artboard的演示:

2016-08-16_16:11:45.jpg

按住A以后分别添加iPhone 6\iPhone 5c\Ipad Portrait:

2016-08-16_16:13:07.jpg

可以看到现在我们的Page3上已经有了这三个常用的移动端画布啦,可以开始设计了!

上一篇下一篇

猜你喜欢

热点阅读