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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
Sketch中10个惊为天人的骚操作
0.0°
《蓝湖征文活动》-参赛作品
2018-07-26 原创文章 经验/观点 举报 6118 24 23 2

Sketch是一款针对UI设计的优秀软件,它在交互层面做的很易操作,几乎所有的命令都会体现在面板上,只用鼠标都可以完成基本的工作内容。但是也正因为这样,它的一些更好用更便捷的操作和快捷键都比较隐晦,在平时的工作和学习中,我总结了一些sketch的神奇操作,通过这篇文章分享出来。


01 B&F

边框快捷键B,填充快捷键F,这两个快捷键其实就是Borders和Fills。

按下B可以添加边框,再按一下取消边框;按一下F可以添加填充,再按一下取消填充。因为本身sketch的界面很易于操作,用鼠标点击复选框也可以,但是用了快捷键才知道物理按键是真的爽。

Image title

动图演示


02 Control+C 可以直接吸取颜色

无论是Sketch还是Photoshop,我们在作图时经常用到的一个工具就是吸管工具,Photoshop可以吸取画面里面任何一处颜色;而sketch的吸管工具更加牛逼,它的操作是不限于这个软件内部的,它可以吸取屏幕上面任何一处的颜色。


通常我们将某个颜色吸取到形状上时,需要:选中形状——点开颜色面板——点击吸管工具——移动到想要吸取的颜色上——点击鼠标左键;

Image title

用吸管工具吸取颜色


但是,当我们使用Control+C这个快捷键时,需要:选中形状——按一下Control+C——移动到想要吸取的颜色上——点击鼠标左键。

Image title

用Control+C吸取颜色


虽然从操作步骤上看只少了一步,但使用快捷键这个方法,我们的视线只需要移动一次,就是从选中的形状到需要吸取的颜色;而使用吸管工具这个方法,我们的视线需要移动四次,这样非常影响工作效率。

当你习惯了这个快捷键之后,你会感觉,繁重的工作中仿佛增添了一道亮光。


03用矩形画分割线

在画列表以及弹窗等界面时,经常会需要画到分割线。但是由于sketch的默认属性,线条的线型是居中(center)的,所以这就会导致,我们画的线条在视觉上是对齐像素的,但是在数据上经常会显示0.5个像素的问题,当多个元素之间计算间距时,就会带来很大的麻烦;而且这也会导致数据上显示的和实际画面中的图形不一致。(好吧,说起来有点复杂,如果有碰到这个问题的设计师肯定一下就get到了)


不过解决的方法也很简单,就是用矩形工具来画一个1像素宽的线条,这样就可以既保证视觉上对齐,数据也是整数。

Image title

线性的分割线,虽然长度的数值是4,但其实视觉上实际占用了5个像素

Image title

矩形的分割线就不会存在这个问题,长宽以及坐标都是准确的


用弹窗来举个例子,首先我们看,左边使用“线”工具画的分割线,右边是用“矩形”工具画的分割线,他们在视觉上是完全一样的,也是对齐的。

Image title

完全对齐


但是在实际测量时,左边用“线”来分割的却出现了0.5个像素这种数值;右边是完全正常的整数,所以右边才是真正和视觉上一致的数据。

Image title

数据对比


所以我们再做分割线的时候,一定要用“矩形(Rectangle )”工具来画分割线,而不是用“线(Line)”工具直接画。


04 Command+Option+C & Command+Option+V (拷贝样式)

其实这个操作类似于Photoshop中的拷贝图层样式,我们在画图时,经常会好几处用到同一种样式,比如同样的描边,同样的渐变,同样的阴影,这个时候我们就可以用这个快捷键来操作。

这个快捷键可能很多人都知道,算不上惊为天人,不过它真的超好用,而且确实我也碰到过有的童鞋不知道,所以我写在这篇文章里。

Image title

复制样式


05 用复制粘贴来填充图片

在平时工作中,我们经常需要在界面中临时填充一些图片来保证界面的美观,这样也可以给人一个整体的感觉,团队在评审视觉稿的时候也会有一定的真实感。但是填充图片这个操作并不是特别方便,有的时候会非常耽误我们的时间。

填充图片其实是有一种非常快捷的方法的,就是利用“复制粘贴”与“填充图片”这两个操作相结合。

比如我们要把左边的这个图片填充到右边这个形状中,我们就可以这样操作。

Image title

复制粘贴填充图片


除了复制已有图片之外,我们还可以直接以截图的方式来填充图片。

Image title

截图粘贴填充图片


06 设置常用色彩

在sketch的色板中我们可以根据需要自行设定一些常用颜色,比如#333333,#f1f1f1等,这样我们在替换颜色的时候就不需要吸取颜色或者输入色值了,直接点击一下就OK了。

Image title

新建常用颜色和移除常用颜色


07 数值框可以简单的计算

在做UI设计的过程中,我们经常会需要计算,计算边距,计算长宽,计算位置等等。其实sketch中形状的位置长宽以及圆角,都是可以在数值栏中进行一些简单的计算。不过只有长宽、坐标和圆角的数值可以计算,透明度和色值等是不可以进行计算的。

Image title

简单的计算(+ - * /)


08 按住shift移动可以每次移动十个像素

这个操作就不用多说了,方便极了。不光是在sketch中,其实好多软件都有这个默认操作,比如在Final Cut Pro 里面,按住shift+移动就可以将剪辑的素材移动10帧。

如图(因为录屏显示问题,画面中的“问号”图标其实是我在按Shift+方向键)

Image title

只按方向键与按住shift+方向键


09 对齐的特别用法(锁定对齐)

sketch中的对齐是由左右上下居中五种对齐方式,但是在使用居中对齐时有一个问题:sketch无法以某个元素为中心来对齐。如图

Image title

自动居中对齐


其实sketch是可以的,比如我们想让AB两个形状以A为中心,居中对齐,方法就是先按Command+Shift+L把A形状先锁定,然后再选择B形状,在居中对齐就可以。如图Image title

锁定后居中对齐


10 收起所有图层

收起所有图层的命令是在,View-Layerlist-Collapse  All groups,对应的还有展开所有图层(Automatically Expand Groups)和展开选中图层(Reveal Selection)

Image title


收起和展开所有图层

因为在平时工作中我会经常检查画板的名称,所以会经常需要收起所有图层,最后的时候还会给画板排序,有了这个操作就可以节省很多时间。但是每次都要从菜单栏里面查找这个命令也很麻烦,所以最好给这个操作设置一个快捷键。(给sketch中的操作设置自定义快捷键的方法可以查看我这篇文章如何给sketch自定义快捷键












更新:2018-07-26

收藏

24人已收藏

隐匿的大V

WX:17183467735

  • 8

    作品

  • 49

    粉丝

  • 75

    关注

  • 分享骨骼动画最常用的三个插件
  • 如何将AE动画转为json文件?
  • 8大系列34款免费可商用中文字体分享
  • 如何给sketch自定义快捷键
相关标签

    猜你喜欢

      2018-07-26 原创文章 经验/观点 举报 6118 24 23 2

      Sketch中10个惊为天人的骚操作

      0.0°

      你确定要举报 Sketch中10个惊为天人的骚操作

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2018年07月26日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      23
      24
      2

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

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

      登录

      手机号

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

      登录
      第三方账号登录