Sketch请叫我交互设计师sketch

关于sketch的技巧 再来一波🙈

2017-12-27  本文已影响251人  Shyanne_Z

嗯 今天的主角还没变 还是Sketch大大

好辣  咩哈哈ヾ(≧▽≦*)o

以后不整理Sketch了

感觉已经初步算入门了😂

如果我无聊的话

可能会啥时候把以下内容录个屏

给自己复习一下 🙈🙈

01

插件篇

1、动态按钮(Dynamic Button)

可以实现的功能:设置好边距后,动态适配内部文字。

首先,我们需要通过Dynamic Button插件来创建初始按钮。

新建一个文本对象,输入我们所需的按钮标题。

选中该文本对象,按“Cmd+J”,你会发现文本和一个自动生成的背景形状一起被打包到了名为“Dynamic group”的组里,而且文本图层被自动重命名为“20:20”。这2个数字代表着文本对象距离矩形背景的上下、左右边缘的距离。

如果我们需要将上下值设置为10,将左右值设置为20,那么你可以将文本图层重新命名为“120:20”,然后选中文本对象,按“Cmd+J”,这时按钮背景的尺寸会自动根据我们所设置的规格进行调 整。

创建完毕之后,无论你是想修改文本,还是修改边距,只需要再次按下“Cmd+J”,就会再次自动适配。

2、使artboard根据内容自动调整尺寸(Sketch Mate)

如当前artboard当中的实际内容已经超过了artboard自身尺寸,你无法看到列表当中的更多条目。

按“Ctrl+shift+A”,artboard便可以精确的根据现有内容的实际高度来重新调整自身尺寸了。

还可以适配artboard的宽度等其他内容。

3、图层排序(Sketch Mate)

可以实现按照文本内容进行排序。

选中所有需要排序的组,在菜单栏中点击“插件 > Sketch Mate > Sort > Sort Layers”,在弹出的对话框中选择“Text(A > Z)”。

因为我们的示例当中每个组里包含多个文本对象,所以接下来还需要选择以哪些文本为标准进行排序。

点击OK后,你的列表会瞬间完成重新排序。

你也可以尝试其他几种排序方式。

4.Rename it

选中你想要重命名的图层或 artboard(至少选中两个),

按“Ctrl+ Cmd+ R”,唤出Rename it的对话框,输入“名称+参数”。

参数在输入框下方有介绍,并且有预览。

不要多说了,好用的插件我说不完🙈

知道的也不全 咩哈哈 主要是懒

02

技巧篇

1.Symbol

Symbol、嵌套Symbol

不废话,废话太多就暴露我的无知🙈

「效率提升篇」Sketch中嵌套Symbol的使用

可以参考这篇文章 咩哈哈

2.Libraries(偶用的中文版的,被翻译成资源库)

独自工作,还是团队协作,Libraries功能都有其优势。

一个Library本质上就是一个普通的Sketch文件,其中的Symbols可以被其他Sketch文件调用。

如果你编辑了Library当中的Symbols,那么调用了该Library的其他Sketch文件便会收到更新通知,

你可以对变更进行预览、对比和确认,使这些Sketch文件所调用的Symbols自动更新至最新版本。

点击左下方的添加就OK辣

3.共享样式(Share Style)

我们可以透过右方检查器(inspector)来设定,这边纪录下所有关于这个元件的「样式」,包含颜色、阴影、透明度、混合模式等等,当我们今天使用了某个我们设定的样式,之后若要调整其他套用相同样式的元件,只要把要修改的部分调整好,样式表右方就会出现一个同步(sync)的符号,按下去,其他元件也会一起同步做修改。

4.一个斜线(/)分隔符

加上Sketch在命名上如果有用一个斜线(/)分隔(Ex:btn/primary/hover),

它会自动帮你创建子层资料夹,

所以这样我们就可以很方便的将我们的管理,

无论是样式,symbol,还是画板命名

5.通过快捷键调整图形的形状

选中图形,按住 Command 键,然后通过上、下、左、右方向键即可按1像素为单位调整图形形状。

同时按住 Command + Shift + 方向键,则可以按10像素为单位进行调整。

6.尽量减少「滑鼠点两下」的情境

例如编辑文字:选取文字后后直接按Enter、进入Symbol也是按下Enter直接进入。

7.智能选择

按住 Option 键,面向多个元素拉选择框,最终只有完全处于选择框内部的元素会被选中,而其他元素会被忽略。

8.单独调整某个位置上的圆角半径

你可以为元素的四角独立设置不同的圆角半径。

选中该元素,在右侧面板的“半径 (Radius)”当中输入一组四个数字,

由分号隔开,分别代表左上角、右上角、右下角、左下角的半径值,

例如“10;20;30;40”。

9.旋转复制 (万花筒效果)

在 Sketch 的工具栏上右键单击,选择“订制工具栏 (Customize Toolbar)”,

然后将“旋转复制 (Rotate Copies)”按钮拖入工具栏。

选中某元素,点击“旋转复制”按钮,输入需要复制出的元素数量,点击“OK”即可。

10、绘制图形时拖拽

快捷键:绘制图形过程中按住空格键

当你在绘制图形的时候,你很难一次画好并放置在正确的位置。所以,你要在绘制过程中按住空格键,那么你就可以在创建好之后立刻移动它到对的位置,然后继续调整尺寸。

11.智能缩放

智能缩放大法好,感触最深的一点是

可以保持symbol里面的边框不发生形变 嗯哼 没了

03

快捷键篇(✨✨✨✨

无论多少的技巧,还是快捷键最好用🤗

我是个快捷键控🤦‍♀️

在上次的基础上完善了一下下🤐

基本常用的应该全了🙈

用多了也不需要刻意去记了🤓

每一个都亲自验证并使用🤔

网上看到的很多,多少都有一两个是错误的👨🏽‍🎤

选择图层:Cmd+悬停/点击

移动:Space

选择父层:Esc

进入编辑模式:Enter

选择下一层:Tab

选择上一层:Shift+Tab

文档切换:Cmd+~(文档全屏时无效)

选中所有:Cmd + A

智能缩放:Cmd + K

搜索图层:Cmd + F

重新命名:Cmd+R(按enter确定)

关闭文档:Cmd+W

退出软件:Cmd+Q

新建文档:Cmd+ N

打开文件:Cmd+ O

演示模式:Cmd+.

偏好设置:Cmd+,

视图放大:cmd(+)+

视图缩小:cmd(+)-

快速放大缩小画布(Z放大,Alt + Z缩小)

图层列表开关: Option+Cmd+1

查看器开关 :Option+Cmd+2

工具栏开关 :Option+Cmd+T

蒙版开关:Ctrl+ Cmd + M

全屏模式:Ctrl+ Cmd + F(Mac通用)

对齐垂直平均:Ctrl+ Cmd + V

对齐水平平均:Ctrl+ Cmd + H

显示网格:Ctrl + G

布局开关:Ctrl + L

像素显示:Ctrl+ P 

像素网格:Ctrl+ X

标尺开关:Ctrl+ R

吸取颜色:Ctrl+C

透明度:数字键0-9

复制样式/复制图层:Cmd+C

粘贴图层:Cmd+V

粘帖样式:option+Cmd+V

粘贴到指定位置:Shift+Cmd+V

快速复制:option + 拖拽,Cmd + D

锁定物体解锁物体:shift + Cmd + L(强推)

隐藏物体显示物体:shift + Cmd + H(强推)

展开图层文件夹:shift + Cmd + J

对图形进行变换:shift + Cmd + T

对图形进行旋转:shift + Cmd + R

对切片进行导出:shift + Cmd + E

组合:Cmd+G;取消组合:shift+Cmd+G (同PS)

下移或上移:option + Cmd + Up/Down

置顶或置底:Ctrl + option + Cmd + Up/Down

切换填充和边框状态:F,B

查看距离:option

查看距离(忽略组):option+Cmd

Cmd+0:调整到 100% 视图(是数字 0 不是字母 O)

Cmd+1:显示所有画板 (Artboard)

Cmd+2:放大显示选中的对象

Cmd+3:不会放大,将选中的对象中心显示

插入画布 A;切片 S;矩形 R;圆角矩形 U;椭圆 O;线 L;钢笔 V;文本 T

文本编辑

文本粗体: Cmd + B

下划线: Cmd + U

斜体: Cmd + I

文本增大 :option + Cmd +(+)

文本减小 :option + Cmd+(–)

更换字体 :Cmd + T

将文本转为轮廓: Shift + Cmd + O

左对齐:Cmd + Shift + {

中对齐 Cmd + Shift + \

右对齐 Cmd + Shift + }

特殊字符 Ctrl + Cmd + Space

布尔运算

合并形状: option + Cmd + U

减去顶层: option + Cmd + S

形状相交:option + Cmd + I

减去重叠:option + Cmd + X

改变矢量点风格 1, 2, 3, 4

智能缩放

固定到顶部:Ctrl + W

固定到左侧:Ctrl + A

固定到右侧:Ctrl + D

固定宽度:Ctrl + J

固定高度:Ctrl + K

上一篇下一篇

猜你喜欢

热点阅读