Sketch原型设计的11个实用建议

  • 经验类型经验/观点原作者:ANDY ORSOW

  • 经验属性自译外文
  • 经验版权不使用原创授权
17832 14 40 2015-01-25

波希米亚的朋友创建了Sketch软件,让你的原型制作更顺手。这里有一些 Sketch原型使用小技巧可以让你的设计工作更顺畅,快速和轻松。

1.快速选择画布尺寸

好吧,这个小技巧也许不应该出现在这个名单上,但它是最实用和重要的。Sketch提供了许多预定义画布,你只要输入快捷键“A”并选择需要的画布就可以了。

2.栅格化布局

Sketch可以非常简单的创建一个栅格图层。只要前往 View > Layout Settings 就可以设定栅格数量了,你可以按快捷键 Ctrl+L  查看你的默认栅格视图。

3.快速复制

多年来我在Illustrator中常使用这一招,同样可以应用到Sketch软件中。当你按住 Option键,然后单击并拖动一个元素,可以复制它。只要按 Cmd+D 就可以重复复制。

4.测量距离

注意细节才会让你的作品看起来更美观。测量网页上元素之间的距离只要按住键盘 Option。严格把控距离让绘图强迫症患者感觉好多了。

5.为了以后方便,使用共享样式

界面上有100个画布,你反复检查多次没有问题,即将要大功告成的时候,客户突然说:“能不能把所有的按钮换成蓝色?”

虽然这是个讨厌之极的任务,不过你在使用Sketch的时候就可以轻松的说“没问题!so easy!”,因为你所有的按钮都使用了共享样式。当你在创建UI元素的时候,你可以一次又一次的使用它,如果你想要修改,可以先选择 No Shared Style(不共享样式),然后点 Create New Shared Style(创建新共享样式),再给它起一个难忘的名字就可以了。

6.完全活用符号

符号对于Sketch 来说非常棒,我建议在常用的相似元素组中,使用符号功能是相当有意义的。如果你的画布上有很多说明注释、样式和选择组件,你可以使整个画布成为一个符号,复制画布并创建替换成你自己的版本。使用这种方法,你只需要修改自己的画布符合就行了,不会为了修改那些其他版本的符号而郁闷了。

7.边画边移动调整形状

这个技巧超级实用。当你绘制一个形状(例如,一个圈),第一次绘制的位置正好是你想要的很困难的。你创建一个形状,然后按住了 spacebar (空格键)就可以移动形状,松开 spacebar (空格键)可以继续调整尺寸。

8.瞬间调整透明度

这个功能在Photoshop中就有,但是很多人都不知道。使用小键盘 number keys (1–0) 可以快速设置10%间隔的不透明度。

9.使用“Scale”轻松缩放

我们都犯过这样的错误,你设计了一个按钮,但是它太大了。你有20px半径的倒角和4px的描边。如果你拖动四角缩小它,就不是你想要的结果了。所以使用 Scale  调整尺寸,这样就是你想要的效果啦。

10.最大化工作视图

如果你在使用一个较小的屏幕,几乎任何应用程序都会感到局促,Sketch也不例外。隐藏左、右面板,按下 Ctrl+Option+Cmd+3。或者,显示/隐藏左、右面板板分别按 Ctrl+Option+Cmd+1Ctrl+Option+Cmd+2

11.在InVision上访问Sketch 文件

你可以轻松访问Sketch 文件,并自动把你屏幕上的画板读出来。如果你想排除某个画板或页面,只需在层或网页名称上添加一个“-”减号,就像这样:“-modal exploration”。

听起来是不是很简单?看一段视频吧:演示视频

作者简介:

Andy Orsow  ——Invision设计师和产品运营,GIF专家和视频制作者。

------------------------------------------------------------------------------------

IFEC - 技巧小组:larens 翻译 

资源提供人:MartinRGB

原文地址:http://blog.invisionapp.com/11-tips-for-prototyping-with-sketch/?utm_source=designer_news&utm_medium=organic_content&utm_campaign=content

全部评论:14

  • edita

    2018-02-02 10:18

    Sketch配合国产摹客做原型还是非常给力的。

  • larens

    2015-07-02 09:09

    @DRR: 好吧,我是使用的正版

  • DRR

    2015-07-01 22:20

    @larens: 我不能够啊,不能啊QLQ 我是下载的破杰版本的

  • larens

    2015-06-23 09:49

    @DRR: 不会啊,你更新最新版本会让你输入手机的Ip,配对成功就可以使用了啊。

  • DRR

    2015-06-22 21:40

    请问MIRROR有用吗。 我下载了没法使用。。 很桑心 这个太不友好了

  • DRR

    2015-02-05 14:31

    @larens: 3q,我现在是直接复制用就等于相同的东西了,有点理解了,文件夹似乎就没法共享元素,然后,不知道是不是有自带的uikit 我似乎修改掉了..总之感谢,慢慢研究,sclale还不是特别会用

  • larens

    2015-02-03 14:31

    @DRR: 6.活用符号,这里的符号指的是一组共享的元素,例如相同的文字,背景,图形等,打组之后会形成一个紫色的文件夹样式,在不同的画布上调用后,修改其中任意一个元素,其他共享的文件夹元素都会改变。

    9.Scale的缩放主要是调整一组元素,或者是有描边的形状等,优势比较明显,例如事例中是一个按钮组,如果正常拉大小,会保持描边的粗细,缩小描边还是很粗,字号虽然变小,但是行高不变,缩小后,会发现文字只显示一半等。

  • DRR

    2015-02-02 16:17

    6.活用符号,不会,具体操作感觉没有看懂,这个有点类似PS智能对象(更好!)
    9.使用“Scale”轻松缩放 是版本得原因吗 radius 的现在放大缩小形状 完全不受影响,(唯一好处应该是知道比例,然后居中缩放。)另外:我尝试了下,Scale缩放不成功= =(不知道原因,直接点击然后Scale50%)

  • larens

    2015-01-28 16:13

    @讶鬼: 感谢支持~

  • 讶鬼

    2015-01-28 13:24

    这个必须支持,很多都非常实用,只知道其中1-2个基础的

  • larens

    2015-01-27 15:47

    @cantonadong: Gif制作技巧传送门:http://www.ui.cn/project.php?id=35854

  • cantonadong

    2015-01-27 14:07

    请问用什么做的gif?

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票