Sketch从入门到精通-Sketch3 神奇的测量键

在做设计的时候经常离不开精准的测量,间距,字体的大小。尤其是在做移动端UI设计的时候,设计完的界面效果图还要输出标注规范给工程师们让他们去实现,这就离不开精准的测量。

在Sketch里面,有个神奇的测量键,你只需要按住Alt键,任意的移动鼠标就可以知道每个元素之间的间距大小,以及和画板之间的大小,上下距离等。

比如你想知道你的标题文字和左边的间距是多少,你只需要把鼠标点到标题文字上,然后按住Alt键,Sketch里就会自动显示出文字和左边距的数值大小,与顶部的数值大小和右边的数值大小。特别直观方便。依次复制N个同样的图形,也可以自动测量之间的间距距离。如下图:

shenqiceliangjian01

同样的,如果你在调节一个图层的大小,Sketch也会帮你显示出具有相同长度或宽度的图形的数据。

shenqiceliangjian02

­而且是自动显示的,但你一定要保证单个元素的边缘要整齐,有些文字的边缘框就不是百分百对齐,就需要把文字转曲,边缘框贴近文字,然后测量的间距才是最准确的。

但文字进行转曲后就无法进行更改,不易编辑,所以建议可以不对文字转曲,先画一个框,然后在把文字放到框里面,这样测量文字间距的时候,就以文字边缘画好的框之间来测量,就能更准确一些。

给工程师们标注图的时候,一定要切记半点像素都不能差,主要标好,元素间的间距,比如某一中心按钮距离左右的间距是固定不变的,那么就标好左右的间距是多少,选择一个固定不变的距离,去测量可变的距离,标好尺寸。

Sketch里面的插也很好用,并且很强大,我会下一章给大家讲解插件的神奇运用,会令你的工作效率提高很多倍很多倍。

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

(0)
TinadminTinadmin
上一篇 2015-08-28
下一篇 2015-08-28

相关推荐

  • 最火的Sketch 的开发商 Bohemian Coding 是怎样一个公司?

    TL;DR: Bohemian Coding 是一个高效务实而且懂得做产品的小团队。但也因为团队小开发实力有限主打产品 Sketch 仍存在不少问题。先从这个小公司的历史说起。Bohemian Coding 在 2008 年成立,主要专注于开发 Mac 软…

    2015-06-29
  • 关注 Web 设计

    相较于设计教程,这样的问答对于个人来说更有针对性,离我们日常的设计工作更近一些。我个人也有这样的体会,有时会有一两个问题长期停留在脑子里,得不到解决,偶然的碰到刚好涉及到这方面的文章,会有一下子豁然开朗的感觉。所以这样的形式也是非常有价值的。以下就是第1周的所有问题和答复,希望在设计对大家有所帮助。

    2015-01-03
  • 产品不能忽视

    在做交互稿或视觉稿的时候,为了让界面尽可能的真实,设计师们会虚拟一些内容放在页面上。但是当看到前端同学产出的demo时,设计师们又总是会觉得为啥和我当初做的页面那么不一样捏?设计师总喜欢把图做的很漂亮,在虚拟页面的内容时,使用漂亮的图片,把内容安排的恰到好处。但是当产出界面demo时,这个页面可能是个空内容的页面,也可能内容很多,导致布局错位。所以在设计界面时,一定不能忽视空状态、内容过多等极限状态。这些状态也许只会在初次使用时遇到,也许只会有很小一部分用户遇到,但是这些都影响着产品的细节品质。

    2014-12-28
  • 1989-2014 网页设计的演变

    转载:hejidaren 2015.03.13 www.shejidaren.com⤴ 估计很多做网页的同学还不了解网页的历史,它是什么时候出现的?而那时的网页又是怎样子的呢? 如果想了解下网页设计的简史,请往看吧,我建议每位网页设计师都应…

    2015-03-16
  • 视觉设计趋势预测 2015年-2016 年 (a)

    视觉设计是一门随着时代发展与社会变迁,随着人类认知提升与生活环境变化……

    2015-01-02
  • Apple Watch应用设计案例-QQ空间

    一、初期方案 设计初期,我们希望能够挖掘一些用户在手机端常用的点进行延伸,如:访客、礼物、动态。包括配色和图形设计也延伸了手机端的设计风格。 二、竞品分析 我们对Instagram和Twitter进行了研究,整体上是手…

    2015-07-15
  • 中国app产品UI在歪果仁眼里是怎么样子的?-Dan Grover

    小木导读:中美用户习惯的和文化的不同,造成了设计很多的不同。看惯了国内的设计,你了解外国人怎么看待我们的产品吗?接下来就可以带着疑问往下阅读。

    2014-12-30
  • Sketch汉化插件-SketchI18N最新版本

    安装使用 下载安装包,并解压,在安装包找到SketchI18N.sketchplugin 双击 SketchI18N.sketchplugin 完成安装 重启 Sketch 自动汉化后完成汉化 如果第三步没成功,试试 在 Sketch 中按快捷键 control command + x …

    2018-03-19
  • Origami五分钟入门秘籍

    早在Facebook推出Facebook Home时,相信强大的原型工具Quartz Composer就进入了很多设计师的法眼,无须编写代码就可以输出细腻丰富的动画,这个太刁了,和大家一样,彼时我也信誓旦旦励志要学会这个玩意儿,于是开…

    图形用户界面 2015-08-27
  • 设计的物理定律的动力响应

    动效作为当今提升网页感官效果的利器,在各种类型的网页中已经全面开花,如何做到自然流畅让用户感觉舒适的动画效果呢?今天就来跟大家聊一聊动效设计的物理法则,以及它是如何应用的。

    2014-12-27