转自:京东设计中心 JDC

 

配置程序自定义快捷键

那天薛老师问我,重置元件尺寸有没有快捷键?当时他在做一套规范,组件替换之后尺寸会变化,导致组件变形。每每都需要开右键菜单重置就很抓狂。”当然没有了。”至少 Sketch 原生没有配置。但也不是没办法,本段就会介绍如何通过 macOS 的设置功能配置程序自定义快捷键,让您的操作更加从容快捷。

 

  1. 打开 macOS 的系统偏好设置,选择键盘,快捷键,软件快捷键。
  2. 程序选择 Sketch,输入需要设置快捷键命令的路径及名称(可在顶部菜单栏查找),注意路径需使用->分隔(半角标点),不要加空格,命令的名称需和菜单完全一致。输入快捷键。
  3. 以“水平居中”为例进行示意。它的指令为:排列->对齐->水平居中(英文系统:Arrange->Align->Horizontally). 快捷键可设置为 Shift+Command+,

之后凡是需要使用这个功能,都可以通过这个快捷键触发。这个方法不仅可以给每个软件分配快捷键,还能定制系统级别功能的操作,大家可以根据自己的电脑使用习惯酌情设置。

巧用表情符号管理 Symbol 组件

随着项目越做越庞大,Sketch 文件中的组件也会越来越复杂。虽然可以通过“/”对组件分级分类,但是在密密麻麻的菜单里查找选择总难免花些光景。有个巧妙的方法可以大幅提高检索效率:表情符号。

表情符号面板的快捷键是 Control+CMD+Space,打开就能看到所有系统表情。将相应的表情符号插入于类别和原件名之前,在浏览时就能轻松地通过符号辨别组件了。比方说一个目录条目有正常,悬停,选中三种样式的组件。您可以将白灯,手,蓝灯三个表情符号写到组件标题中,如下图所示:

 

或者也可以用表情符号区分组件类别,比如用笔代表输入框,用钟表代表时间选择器。表情符号的玩法有很多,大家可以按自己的喜好配置组件。

切图的命名,导出和压缩

例如正在设计的网页有一个模块叫做“方案优势”,里面有4个分论点,对应的有相应的4个图标和4张背景图。我们可以将第一个的图标命名为:icon/benefits/icon_benefits_01performance,其他三个以此类推。如此命名的原理请见下图:

 

这样的命名方式也适合于组件和切图,它的优势在于:

  1. 选择图标时,图标会按照文件树分类,通过序号也更容易找到对应的图标。
  2. 导出的图标会按照文件结构放到各自的文件夹中,便于前端同事整理开发。
  3. 图标的命名不容易重复,避免导出后丢图,也减轻前端同事的压力,无需再逐个命名。

切图压缩推荐两款免费软件:ImageOptim 和 Crunch. 前者适合 JPEG 和小尺寸 PNG 的无损压缩,后者适合大尺寸 PNG 的无损压缩。如果对大幅 JPEG 背景图的体积有严格要求,可将 ImageOptim 设置为86%的有损压缩,图片体积通常可缩小80%以上。

整理压缩后的切图可使用免费压缩工具 Keka 打包为 ZIP. Keka 在配置后可清除 Mac 在文件夹中生成 .store 文件,避免使用微软系统的同事解压文件后发现大量垃圾文件。

自定义预览画板尺寸

在制作网页或桌面端项目时,有时会将画板宽度设置为1440px一类的尺寸。如果直接点击顶栏的预览查看页面效果,会发现设计图并没有被适配到1:1的比例,并且显示的是整张画布,无法查看滚动效果。

 

 

解决这个问题首先需要点选该画板,在右侧面板顶部点击“自定义”下拉框,选择“创建自定义尺寸…”,设置好名称和正确的预览宽高即可。再点击预览时页面就会以正确的比例和尺寸显示了。

其他介绍

  • 尽量不用隐藏:隐藏会导致图层消失,无法测量边距而且不能点选。如果是在配置元件的背景,可取消勾选背景图层的填充色。
  • 如果对图片的位置没有特别严格的要求,可在软件外适当裁切,在 Sketch 中新建形状,填充方式选择图片-充满。这时图片的显示方式和前端实现时所用的 cover 属性一致,更容易预测上线效果。
  • 尽可能减少蒙版的使用,它会显著提高画板里图层的复杂度,选择图层会变得非常困难。如果一定要用,可以将这个文件夹做成组件,降低画板复杂度。
  • 提高 Sketch 运行性能的方法:
  • 除非设计网页适配,否则避免使用过大的画板。尤其是在大画板上放画板的页面,Sketch 缩放时会非常卡顿。
  • 将单页内的画板分类,分散到多个页中。每页的画板越少,Sketch 在显示时需要计算的内容也越少,也就更加流畅。
  • 注意控制阴影,模糊等特效的大小。这个是任何设计工具都相通的,特效的数量和尺寸会导致软件实时渲染的工作量成倍增加。
  • 介绍一组特别的快捷操作,当然完整的快捷键列表请详见 官方指南
  • 先按住 Option 再拖动选区,可以只选中选区里的图层。
  • 先按住 Command 再拖动选区,可以穿透编组,选择编组内的图层。
  • 先按住 Option,拖动选区,再同时按住 Command,可穿透编组并只选择选区内的图层。这个操作尤其适合穿组框选表格中的内容。
  • 按住 Command 点击 Sketch 顶部的文件名,可显示文件所保存的文件夹,点击即可打开。这个操作适用于 Mac 上绝大多数软件,不用再担心找不到文件存储位置。