恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Sketch中文使用手册-图层篇
0.0°
2020-06-28 自译外文 规范/资料 原作者: sketch官网 举报 2917 4 4 0

官网内容翻译,为了强迫自己做英文阅读的产物,如有问题还请指正哈!

历史文章:

Sketch中文使用手册-界面篇


图层基础

图层是Sketch中构建设计的基础,包含形状,编组,画板。


添加图层

若要创建图层,可以点击工具栏中的插入按钮,或者菜单看中的插入选项,然后选择需要创建的图层类型。


选择单个图层

单击画布上的图层或者在图层列表中点击图层名称即可选中图层,选中后你可以看到图层周围出现选择框。


你也可以通过点击图层名称选择图册

Tip:如果你看不见选择框,在「视图-画布-显示图层选择框」检查设置


选择多个图层

按住「shift」的同时用鼠标点选,可以同时选择多个图层,同样的按住「shift」点选已经选择的图层将会取消选择。


或者还可以通过在画布空白处点击拖拽来进行框选。

按住「Option」的同时进行框选,将只会选中那些完全被框进选区的图层。

按住「Shift」的同时进行框选,将会在已选的图层上进行增加或者删除。

按住「Command」的同时进行框选,将会删除选框中已选中的图层,添加选中选框中未选择的图层。

左边: 按住shift拖动. 右: 按住shift+option拖动


选中画板后,点击菜单栏中的「编辑-选择-选中画板中所有选项」即可选中某一个画板中的所有图层。


选择重合图层

选中某个图层后按住「Option」再次点选可以选中与之重合的下面一个图层。

但是如果相重合的图层超过了2个,就需要选中最顶上图层后右键在选项菜单中选择需要的图层。



图层编组

将图层编组后可以同时移动和组内图层大小,同时隐藏组内图层,或者同时调整它们的属性,比如不透明度和混合模式。


如何编组图层

选择多个图层后,通过快捷键「Command+P」或者菜单栏中「排列-编组」可进行编组。


如何解组图层

选中需要解组的编组后,通过快捷键「Command+Shift+G」或者菜单栏中「排列-接触编组」进行解组。


选择编组内的图层

在进行选择的时候,编组会被视为一个整体。要在编组中选中某一个图层,双击编组,然后就可以对编组内的图层进行选择了。


或者也可以通过按住「Command」点击需要选择的图层。

如果想要在全部文档内禁用这一功能,可以方便的选中编组的图层而不是需要双击选中,在菜单栏「Sketch-首选项-图层」中检查勾选「新编组」即可。

如果需要对单个编组禁用这一功能,选中该编组在检查器中勾选「点击选择组内容」即可。


移动图层

选中并拖动即可对图层进行移动,如果你想运动限制在一个特定的轴需要按住「Shift」同时点击拖动。

要移动一个被覆盖在其他图层之下的图层,首先确保已经选中该图层,按住「Command+Option」然后就可以点击拖动图层了。


Tip:Sketch会将移动中的图层自动对齐到临近的图层,如果没有的话,在菜单栏「视图-画布-显示所有参考线」进行勾选即可。


如何将多个图层排布整齐

选中所有需要整理的图层,点击检查器中的整理按钮,可以快速将多个图层均匀的排布到一个包含行和列的整齐的网格系统中,你也可以在检查器中更改图层之间的纵横间距。


进行智能分布图层

使用智能分布功能你可以快速调节多个图层之间行和列的间隔。选择两个或者两个以上的图层,然后点击并拖动图层之间的操手柄即可。如果把图层排布在一个网格之中,可以轻松的调整图层行与列之间的间隔。

但是如果图层之间不是均匀分布的,那只能分布图层并不能起作用。遇到这种情况可以手动调整图层之间的间距或者使用监视器的整理按钮。

为了更好的展示所选的比较小的元素,或者当选择内容被你缩放到距离你很远的地方时,智能分布的手柄后隐藏起来。


在智能分布内进行层位置交换

当选择了一组间隔均匀的图层时,每个图层中心都会出现一个圆形手柄,点击并拖动这个圆形手柄到所选的范围内的其他区域,而周围的图层会自动与你所移动的图层交换位置。

这种交换也适用于画板,方便重新排布画板的顺序。


复制图册

选中一个图层,然后通过快捷键「Command+D」可以在原图层的上方复制一个相同的图层,起位置和尺寸都会保持和原图层相同。


或者按住「Option」轻轻拖动图层同样也可以进行复制,且新图层会保持在原来的位置上。


排列图层

你可以通过检查器最上方的6个对齐按钮对图层进行排布。

从左到右分别是:水平分布,垂直分布,左对齐,水平对齐,右对齐,顶对齐,垂直对齐,底对齐。



如果你使用的是带Touch bar的Macbook,在选中某一个图层后,你也可以看到这些按钮。

如果选中的图层只有一个,使用这些按钮将会使这个图层以画板进行对齐。

如果选中的图层是2个或者2个以上,Sketch将以其中最大的图层作为对齐的基准。如果希望以一个特定的图层作为对齐基准,选中基准图层然后通过快捷键「Command+Shift+L」锁定图层,同时按住「Shift」保证这个锁定的图层处于选中状态,然后在选择其他需要对齐的图层即可。

如果想使选中的多个图层与画板进行对齐,那么选中图层后按住「Option」然后在点击需要使用的对齐按钮即可。


分布图层

或者你也可以使用Ctrl +⌘+ V或Ctrl +⌘+ H,分别。

除了使用检查器最上面一行的对齐按钮来垂直和水平分布图层,还可以使用「Ctrl +Command+ V」或「Ctrl +Command+ H」来进行垂直或者水平分布。

或者,也可以使用栅格工具以固定的间距分布图层。

每种方法都将像素拟合考虑在内。


调整图层尺寸

要重新调整一个图层的尺寸,选中图层,然后点击拖动它的任意一个操作手柄,上下左右的手柄用来调整高度和宽度,角落的手柄可以同时调整宽度和高度。



按住「Shift」可以固定图层的长宽比例

按住「Option」可以固定图层的中心调整大小


在检查器中调整图层大小

选中图层后在检查器中同样可以调整图层大小


但是在默认情况下,这会以左上角为中心调整图册的大小,但是可以通过以下键盘快捷键来改变:

l   以左侧为中心放大

r   以右侧为中心放大

t   以顶部为中心放大

b   以底部为中心放大

c / m   以中心点进行放大


在检查器中还可以使用算术来调整图层大小或位置:

+   增加 (e.g. 50+10)

-    减去 (e.g. 45-5)

\*   乘(e.g. 128*2)

/     除 (e.g. 960/2)


另外,还可以使用百分比来更改图层相对于它所在的组或画板高度或宽度。例如,在960像素宽的画板中设置一个图层的高度为10%将会改变它的宽度为96px。

如果你要编辑圆角矩形的半径,可以使用;每个角指定不同的值(例如30;40;20;30)。

Tips:如果检查器中长宽值中间的锁事锁定的,那么将按照现有比例调整大小。


用快捷键调整图层尺寸

为了做更精确的调整,你也可以使用以下快捷键。

  • ⌘ + →     宽度加1px
  • ⌘ + ←     宽度减1px
  • ⌘ + ⇧ + →     宽度加10px
  • ⌘ + ⇧ + ←     宽度减10px


缩放图层

在图层上增加的任何样式(如笔触、边框半径或阴影大小)都将保持不变,如果想同时对这些样式进行缩放,可以选择「图层-变换-缩放」或者快捷键「Command+K」


在弹出的选项框中,可以选择以中心点,边或者角为中心调整大小。


调整尺寸

检查器中的调整尺寸功能可以限制调整画板组等父级时图层的变化方式。

Tips:默认情况下,在调整一个组或者组件的时候,Sketch也会同时改变其子图层的尺寸。

那么,如果想要图层作为画板的一部分进行缩放,可以点击画板,在检查器中勾选「根据尺寸适配内容」


若是需要增加调整尺寸时候的限制,在画板、组或符号中选择一个层后就可以在检查器中看到调整尺寸功能。

「靠边固定」功能可以设置图层与父级元素边缘的关系,「固定尺寸」功能则可以帮你设置父级图层在拉伸的情况下该图层的长款尺寸变化。在调整尺寸功能的最右边还有一个预览窗口,可以展示你选择的功能将如何影该图层的变化规则。



固定尺寸

调整尺寸功能可以限制一个图层的高度或者宽度(或者整体)在父级图层变化的情况下仍然保持原状。

比如你希望一个菜单栏在整个页面中始终保持同一个高度,那么菜单栏的高度就是北限制固定的而宽度则不需要,在水平方向上菜单栏可以适应更大的设备,但不会垂直拉伸。


靠边固定

靠边固定可以固定一个图层和它的父级某个边或者角的距离,即使父级图层尺寸变化也不会影响固定距离。

这是一个很实用的功能,比如在界面中有一个浮动操作按钮,固定它到父级左侧和顶部的距离就可以始终保持他在界面的角落里。

在这个例子中,按钮被固定了宽度和高度,并且固定了和父级顶部和左侧的距离,这样在父级调整大小时候,这个浮动按钮可以始终保持大小不变并且固定在图层左上角的位置上。



Powered by Froala Editor

更新:2020-06-28

收藏

4人已收藏

  • 6

    作品

  • 10

    粉丝

  • 53

    关注

  • Sketch中文使用手册-界面篇
  • ICON 练习
  • 【板绘临摹】日常练习
  • 作品集

    猜你喜欢

      2020-06-28 自译外文 规范/资料 原作者: sketch官网 举报 2917 4 4 0

      Sketch中文使用手册-图层篇

      0.0°

      你确定要举报Sketch中文使用手册-图层篇

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年06月22日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      4
      4
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录