你可能忽略掉的Sketch使用技巧

Sketch毕竟没有什么学习曲线,颇易上手,相应的也时常导致新手在一开始就忽略掉一些重要的、高频的使用小技巧,而将一些稍许费力耗时的方式一路沿用下去。这篇内容所针对的便是这样的情况。几乎没有进阶的要点,只针对初学的同学培养正确习惯,还望各位老司机们见谅。


Sketch毕竟没有什么学习曲线,颇易上手,相应的也时常导致新手在一开始就忽略掉一些重要的、高频的使用小技巧,而将一些稍许费力耗时的方式一路沿用下去。这篇内容所针对的便是这样的情况。几乎没有进阶的要点,只针对初学的同学培养正确习惯,还望各位老司机们见谅。

你可能忽略掉的Sketch使用技巧
下面进入正文。

关于对象、图层、画板的使用技巧

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

选中图形,按住 Command 键,然后通过上、下、左、右方向键即可按1像素为单位调整图形形状。同时按住 Command + Shift + 方向键,则可以按10像素为单位进行调整。

你可能忽略掉的Sketch使用技巧

2. 复制元素

选中某元素,按 Command + D 即可进行复制;复制出的新元素默认与原有元素的位置相同,且覆盖于原有元素之上。

此外,按住 Option 健,同时拖拽目标元素,同样可实现复制;保持复制出的新元素仍处于选中态,并连续使用 Command + D 快捷键,即可按照之前手动拖拽的距离为间隔单位实现多重复制。

你可能忽略掉的Sketch使用技巧

3. 智能选择

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

你可能忽略掉的Sketch使用技巧

4. 分组与解组

选中多个元素,按 Command + G 将其合并为一组。选中某个组,按 Command + Shift + G 则可实现解组。

你可能忽略掉的Sketch使用技巧

5. 组内单选

要选中某分组内的特定元素,无需到图层列表中寻找,按住 Command 键,同时用鼠标直接指向该元素,即可“穿透”分组,直接选中元素。

你可能忽略掉的Sketch使用技巧

6. 将画板的缩放比还原为100%

按 Command + 0,即可快速将画板的缩放比还原为100%。

你可能忽略掉的Sketch使用技巧

7. 调整缩放比,使所有的画板得以同屏呈现

按 Command + 1,即可快速将画板调整为恰当的缩放比,所有的画板得以同时呈现在视图当中。

你可能忽略掉的Sketch使用技巧

8. 使视图聚焦于选中的元素

按 Command + 2,即可将编辑区域的视图焦点快速移至处于选中态的元素或画板。

你可能忽略掉的Sketch使用技巧

9. 将元素置于图层序列的首位或末位

按住 Option 键,Sketch顶部工具栏里的“向前(Forward)”、“向后(Backward)”按钮会自动变为“最前(To Front)”、“最后(To Back)”,即可使选中的元素排列到图层序列的首位或末尾。

你可能忽略掉的Sketch使用技巧

10. 重命名图层

选中某元素,按 Command + R,该元素在图层列表中的条目即进入可编辑状态,此时输入新的图层名称即可。

你可能忽略掉的Sketch使用技巧

关于元素的编辑与导出

1. 测量元素间距

选中一个或多个元素,按住 Option 键,同时将鼠标指向要测量间距的目标元素。在移动元素时,也可同时按住 Option 键,即可在移动过程中即时查看元素距离特定元素或画板边缘的距离。

你可能忽略掉的Sketch使用技巧

2. 通过数字键设置元素的不透明度

选中元素,然后按一个或一组数字键即可直接设置其不透明度 (alpha 值),例如“1”代表10%,“5”代表50%,“9”代表90%,“75”代表75%,等等。

你可能忽略掉的Sketch使用技巧

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

你可以为元素的四角独立设置不同的圆角半径。选中该元素,在右侧面板的“半径 (Radius)”当中输入一组四个数字,由分号隔开,分别代表左上角、右上角、右下角、左下角的半径值,例如“10;20;30;40”。

你可能忽略掉的Sketch使用技巧

4. 订制快捷键

你可以为自己常用的 Sketch 功能设置快捷键。进入 macOS 的系统偏好设置 – 键盘 – 快捷键,选择左侧列表中的“应用快捷键”,点击右侧的“+”按钮,在对话窗口的“应用程序”列表中选择 “Sketch”,在“菜单标题”中输入你所需的功能在 Sketch 菜单栏里的准确名称,然后设定自己的快捷键组合即可。

你可能忽略掉的Sketch使用技巧

5. 在属性检查器中使用数学运算符

Sketch 可以在右侧检查器面板的文本框当中执行数字运算。例如你想将当前矩形的宽度翻倍,那么可以在“宽度 (Width)”当中的数字后面输入“*2”,代表“乘以2”。

你可能忽略掉的Sketch使用技巧

6. 复杂图形

对于一些复杂的图形,例如多边形或星型,可以在右侧检查器面板中设置边 (Sides)或顶点 (Points)的数量。

你可能忽略掉的Sketch使用技巧

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

在 Sketch 的工具栏上右键单击,选择“订制工具栏 (Customize Toolbar)”,然后将“旋转复制 (Rotate Copies)”按钮拖入工具栏。

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

你可能忽略掉的Sketch使用技巧

8. 切片

切片工具 (快捷键“S”)可以拖拽出矩形区域,供你导出图形。但导出区域未必要覆盖到元素或画布整体,你可以把切片作为一种灵活的截屏工具进行使用。

你可能忽略掉的Sketch使用技巧

9. 导出元素、分组或画板

选中某个元素、分组或画板,在右侧检查器面板的底部点击“Make Exportable”,在展开的选项单当中选择导出规格、文件名后缀和文件格式,即可开始导出。

你可能忽略掉的Sketch使用技巧

10. 导出高分辨率素材

我们在设计界面时通常会按照字面意义的像素规格来设置画板 (1x规格),例如使用375×667的画板来设计4.7寸规格的界面。但你需要面向高像素密度的屏幕导出画板或局部素材 – 在“Make Exportable”选项单的“Size”当中输入“2x”或更高值即可。或者你也可以直接在这里输入所需导出的具体规格,例如“750px”等等。

你可能忽略掉的Sketch使用技巧

关于 symbols

1. 通过 symbols 实现元素复用

怎样判断是否要使用 symbols?答案在于目标元素的复用性。symbols 就像邮戳,制作了一个之后便可以反复使用。在 Sketch 中,当你修改了主 symbol,所有来自于该 symbol 的实例对象都会被自动更新,这能使设计稿的迭代效率得到极大提升。

你可能忽略掉的Sketch使用技巧

2. 创建 symbol

通过 symbols 将复用率较高的设计模式进行打包。举例来说,我们现在有一个卡片组件,其中包含一个圆形图片、一段文字描述以及一个按钮。完成布局设计,将它们打包成组,然后在工具栏中点击“Create Symbol”按钮即可。

你可能忽略掉的Sketch使用技巧

3. 通过属性覆写 (overrides) 对symbol进行订制

譬如我们将一个卡片模式打包成为symbol,在日常使用时通常需要在不修改主symbol的前提下更改每个实例当中的具体属性值,例如图片、文字等等。属性覆写功能 (overrides) 就是用来解决这个问题的。

将symbol插入到画板当中,保持选中态,右侧检查器面板当中会出现“Overrides”选项单。下图所示的范例共包含4项可覆写文本字段,你只需在这里进行修改,便能使该symbol衍生出的每一个实例对象都体现出不同的内容。

你可能忽略掉的Sketch使用技巧

4. 创建symbol之前,对图层进行重命名

为了使可覆写的属性在检查器面板当中呈现出恰当的属性名,例如“姓名”、“职能”等等,而不是在创建symbol时所使用的特定范例内容,你可以在打包创建symbol之前对图层进行重命名,使其与最终希望呈现出的属性名称一一对应。

你可能忽略掉的Sketch使用技巧

5. 为特定的元素禁用属性覆写

symbol当中并非每一个元素都需要支持覆写功能,譬如那些永远不会发生内容变动的属性。如果不想该属性出现在symbol的检查器面板当中,只需在创建symbol之前在图层列表当中将该图层锁定即可(锁型图标)。

你可能忽略掉的Sketch使用技巧

6. symbols嵌套

“设计模式”当中本就包含着多层次的概念,这同样能体现到symbol的实现方式里。譬如我们首先定义了一个全局通用的按钮symbol,然后我们还需要一个全局通用的工具栏symbol,而这个工具栏当中又会用到刚刚定义的按钮,这时我们便可以将按钮symbol插入到工具栏当中,并一同打包创建为新的symbol,实现嵌套。如果按钮symbol得到样式更新,那么工具栏symbol当中的按钮样式便可自动更新。

你可能忽略掉的Sketch使用技巧

7. symbols的尺寸可变

你可以随意调整symbols实例对象的尺寸,而不用受制于symbol本身的规格。不过一旦将来主symbol的尺寸发生变化,所有实例都将统一更新为新的尺寸样式,而忽略掉你之前所做的调整。

你可能忽略掉的Sketch使用技巧

8. 从symbol中分离

要将某实例对象从原本的symbol当中分离 (譬如要基于该symbol的布局设计更为复杂的模式时),在该对象上右键单击,选择“Detach from Symbol”,这将使实例变为普通的图层组。

你可能忽略掉的Sketch使用技巧

 

原文地址:http://trydesignlab.com/blog/sketch-tips-maximize-productivity-objects-layers-artboards,作者:Patrick Multani

译者:C7210,交互设计师、UX设计热爱者、VR探索者、译者、猫奴、吉他手、鼓手,现就职于腾讯上海

译文地址:微信公众号【Be For Web】

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/22768/

(0)
CatherineCatherine
上一篇 2017-05-02 23:35
下一篇 2017-05-03 01:33

相关推荐

  • 新用户首次体验有多重要?又该如何提升?

    一款优秀的移动产品应当有一套可靠的新手体验设计策略。不要把自己限制在产品里面,从核心价值入手准备——抓住每一次可以向用户传达价值的机会。不管是应用的广告或者一个引导页,抓住任何机会去诠释产品的价值与功能吧。

    2017-05-06
  • 塾乐教育-进阶提高设计思路的秘籍在这里!

    一直以来,我们始终想让知识变的更实用这5年,课程前后完善了几十个方案这篇文章,请认真阅读也许,会改变你的一生01为什么学设计一定要参加系统课程学习?01- 电商设计行业升级更新太快,如果不即时学习最新的知识。单靠自己平时工作的经验是无法满足中高端市场的需求的!通过学习,让你远远超过你的同行技术水平!02- 虽然互联网上免费知识层出不穷,但绝大部分都是挂羊头卖狗肉性质的不系统招生引流课程。给你一点甜头,再收取你高额培训费用!03- 一个人...

    2018-03-03
  • 如何识别和避免“暗黑用户体验”

    作者:Emily Stevens | 翻译:沙喵〜 审校:Moli用户体验设计是一门创造独特奇妙体验的学问——但设计的产出并不都是像彩虹一样美好灿烂的。即便是本质上强调用户友好的设计产业也会有黑暗的一面,而这些黑暗的欺骗性的设计模式比你想象的更为普遍。去年,用户体验设计公司Sigma点名指出,好几家知名零售商利用欺验性的暗黑用户体验设计从用户那儿赚了更多的钱。出现在耻辱榜上的有电商巨头Amazon、快时尚电商Boohoo.com(英国)...

    2018-03-20
  • 怎样做出引人入胜的用户体验

    发布者: mobileui 设计师 Irene Pereyra 总结了10大技巧帮助你实现令人惊叹的交互式用户体验。 近来,设计一款能够吸引并留住用户的web和App越来越成为一门学问。 由于很多人对于计算机数字领域不是很很了解,我会…

    2015-04-20
  • 最浓缩的概念:什么是用户体验,用户体验设计怎么做?

    如约而至,这是体验三篇文章中的最后一篇。本篇我会说明一下何为UE,及UED的本质是什么。其实,我相信很多人其实能感觉到体验是什么,但是一直没能用一句话来表达出准确的意思。那,在说明之前先说什么是User Experience Desgin(UED),为什么大多称之为UXD呢?

    2017-05-25
  • Axure 8.0手机页面拖动弹回效果

    Axure RP8.0教程 手机页面的拖动和弹回效果 。用户向上拖动页面,页面向上滑动。用户向下拖动页面,页面向下滑动。当用户拖动页面到最底部时,页面弹回显示第一屏。当用户拖动页面到最顶部时页面弹回显示最后一屏。步骤一.在部件库中拖入一个图片部件,双击打开浏览手机外壳图片,加入到工作区中,跳转这张手机外壳图的大小和位置。步骤二在手机内部框中制作一个列表页面,页面,使用到的部件有图片部件、标签部件、水平线部件、将这些部件相互组合,设计一下...

    2018-03-10
  • 产品插画设计中,都有哪些比喻技巧?

    Shopify是一家位于加拿大渥太华的电商软件开发公司,专门为中小零售商提供建立网店的Saas服务,能对接主流ERP系统,为客户提供打单、发货、运单号自动回传、订单业绩汇总、利润计算、仓储、采购及供货管理等一体化管理流程,按月收取咨询服务费用。
    本文作者对产品插画中“如何利用比喻来找准信息传达的关键,提供有价值的无形体验”有自己独特的见解,在视觉设计角度对大家应该有一些启示。

    2017-05-14
  • 灵兽奇谋之教你5招提升用户体验

    (来自梧桐树资本远方的祝福)007灵兽奇谋《灵兽奇谋》起源于我们携手100位行业大咖组成灵兽家族,每位家族成员都必须跟新零售007的粉丝们分享一篇,自己近年最干货的心得文章,可以是感悟,也可以是奇招,没有任何限制与约束,给予读者们干货与奇谋,是我们唯一的标准。每十篇奇谋为一季,2018年第一季,火热连载中。奇谋无高下,真诚见初心,谢谢每一位老师的付出,亦谢谢对面每一位乐于倾听的你。今晚灵兽奇谋来自灵兽家族代盐人兽哥,兽哥跟大家聊聊新零售...

    2018-02-11
  • Axure RP 8 入门手册 – 第6章(四)

    第9节检视功能-元件交互冰炫:小楼老师,我能跟你请教个问题吗?小楼:哇!看头像是很高冷的美女呀。冰炫:老师!你嘴好甜哦!你这样我会不好意思的!小楼:嘿嘿!你有什么问题呀?冰炫:哦……差点被你给夸得忘记问了!今天我在网上买饮料时候,看到网站上的选择饮料分类,选择的时候只能选中一种,被选中的分类标签会改变颜色,其它的恢复默认颜色。感觉有些像你刚才给Alice.讲的单选按钮组的效果。(图6-58)(图6-58)小楼:嗯,这个也是组的效果,但不...

    2018-04-23
  • 对于交互、视觉设计师来说,至少要了解的产品知识

    之前在设计体系规划里面有提到过,产品常识也是我们需要了解的内容,其中产品定位就是最基础,也是最重要的一个概念,因为项目后期的所有工作都是围绕产品定位所展开的。比如还是上面那个例子,使用人群是单身男女,我们将使用人群细分为:18-25岁、25-35岁、35-45岁和45岁以上的单身男女。最后将目标用户定为25-35岁的单身男女,当然为什么选取这部分人群需要一些理由,比如这部分群体的经济比较独立,年龄更适合步入婚姻的殿堂等等。比如我们的主要功能是即时通讯,那即时通讯会分为很多使用场景,比如上下班的路上、睡觉前,起床后等等。比如产品的特色是“更容易约会成功”,那为了达成这个大的产品目标,我们需要细化,将其分解成多个小的用户目标,如快速看到周围单身异性的信息状态、快速了解周围哪些异性对自己有兴趣等等。

    2017-05-09