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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
云采整理翻译,sketch中文教程(六)
0.0°
2016-10-15 自译外文 教程 原作者: sketch官网 举报 2326 10 2 0

sketch官方中文教程

编组

除了像图形、位图、文本这样的基本图层外,Sketch 还有一些特殊图层类型,它们对图层的整理和导出等工作上非常有用。


你可对多个图层进行编组,并让它们以一个“层”的样子展现。你可以移动和改变组的大小,同时也可进入组修改每一个图层的属性。

Sketch 当中的编组工具是非常强大的,因为多个组可以再次建为新的组,一起移动或者改变大小。当你改变一个组的大小时,组当中的内容也会相应的调整大小。如果这个组中包含文本信息,那么文本的字体也会跟着缩放大小。

想要创建组,你需要先选中一个或多个图层,然后单击工具栏中的编组图标,Sketch 便会为你创建一个包含所选图层的组,当然也可直接在图层列表里拖拽图层,移动到不同的组里去。


编辑组

当一个组建立后,你可双击它去查看和编辑里面的内容,比如在组内移动单个图层或者直接新建图层。如果你选中了组外的任一对象,Sketch 会自动跳出组以便你选择文档中的其它图层。

此时如果你再选择某一组中的一个图层,Sketch 会自动帮你选中整个组。这和我们创作图形时的子路径是一样的。


穿透选择

默认下,你需要先双击选中组,再点击选中组里的图层。但是如果你按住 command ⌘ 键,你便可进入组,直接选择想要的图层。

如果你只想将编组工具用于组织图层列表,而不想每次都先双击,你可勾选组的属性检查器中直接选择(Click-through when selecting)选项。你也可在首选项中打开此选项,此时所有新建的组(之前建立的组无效)均可以使用穿透选择功能。


画板

Sketch 里的画板是在无限的画布中建立一块固定大小的画板,但这些画板完全是可选择的。

当设计一个响应式网页时,你会想针对不同大小的屏幕进行设计,这时你就可将每一个屏幕尺寸设定为一个画板。如果设计图标时,你会想限制自己在默认的图标尺寸中创作,同样可将不同的图标尺寸设定为画板。

画板会有一点像一个特殊的组,它们永远是开放的状态,你不用双击它才能选中内部元素。画板的大小也不会随着内容增多而自动扩展,如果你已给画板设定了一个固定大小,那么这个尺寸一直保留,直到你再次更改它。


添加画板

要添加新的画板,选择工具栏中的插入(Insert)> 画板(Artboard)或执行菜单命令,当然你也可使用快捷键 A 来创建它们。属性检查器预置了一些常用的画板尺寸,例如 iOS 设备尺寸,常用网页设计宽度,及图标尺寸。

点击这些预置内容即可将设定好的画板添加到画布中,也可选择预置画板组的标题,将所有组内画板都置入画布,你也可在检查器底部点击 + 按钮添加自己的预置画板。

如果你想添加多个刚才置入的新画板,可按 command ⌘ + D 的快捷键来重复添加画板。


移动画板

如果一个画板中已经有内容了,Sketch 就不会让你直接选中这个画板,这样你在建立大的选区时不必担心选中了画板。但有时候我们还是有移动画板的需求。

你可直接在图层列表中选中画板,然后在画布上拖拽,或是在属性检查器中更改它的位置和大小。还有一种方式,你也可直接在画布上点击拖拽某一画板左上角的标题,来移动它。


改变画板尺寸

画板可根据内部元素的多少来改变尺寸。只需要选中画板,然后在属性检查器中点击按钮适合大小(Resize to Fit)即可。这种方式尤其适合在手机上预览时需要精确高度来滚动的情况。

Image title


网格和标尺

每一个画板都是在画布上相对独立的创作空间,所以每个画板都有自己的标尺和网格选项。当你在一个画布上创作不同大小的画板时,这一点就会非常有用,例如响应式设计下每个断点的画板。

模板

另一个了解画板功能的例子就是官方内置在 Sketch 中的模板了,执行菜单命令文件(File)> 从模板新建(New from Template),如果你选择了 “Mac App Icon” 模板,就会看见官方为每种常用尺寸都创建好了画板。


页面

一个 Sketch 文档内可以包含多个页面(Page)。与其一个页面一个文档,不如将多个相关页面放在一个 sketch 文档中,这样的好处很多。

比如说元件和共享样式将在页面中通用,但不能跨文档使用。

另一个多页面的好处就是,虽然每个页面都可轻松编辑 12 个画板,但是取决于不同的内容、大小和数量,你会发现把过多的画板分布在多个页面中会高效很多。


画布

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

Image title

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


定位

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

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

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


缩放

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

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

查看更多方便的快捷键

command ⌘ + 2 缩放指定图层

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


像素缩放

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

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

Image title

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

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

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

Image title

显示像素网格

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

Image title


标尺、参考线、网格

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


参考线

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

Image title

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


标尺

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

Image title

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

Image title

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

Image title

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


网格


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

常规网格

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

Image title

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


布局网格

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

Image title

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

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

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


网格制作工具

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

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


测量

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


距离

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

Image title

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

Image title

尺寸

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

Image title


更新:2016-10-15

收藏

10人已收藏

CLD_李波

设计师

  • 20

    作品

  • 188

    粉丝

  • 2

    关注

  • 用自动布局的方式设计响应式卡片组件(含sketch文件)
  • 提高工作速度的 10 个 Figma 高级技巧
  • 这个要学起来|格式塔理论中的视觉原则
  • sketch插件安装、常用插件推荐

    猜你喜欢

      2016-10-15 自译外文 教程 原作者: sketch官网 举报 2326 10 2 0

      云采整理翻译,sketch中文教程(六)

      0.0°

      你确定要举报云采整理翻译,sketch中文教程(六)

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2016年10月15日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      10
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录