sketch文本行高，间距，标注，消除小数点

设计中遇到文本间距，小数点，标注偏差等问题，特进行汇总处理。

现在用sketch做页面的时候都会边做边按住Alt键进行测量，但是用sketch导出的时候出现偏差和小数点，我在网上查找资料进行参考和实操之后在这里做个梳理和归纳。

一、制定间距规则

在设计最一开始，最好给项目设定一个最小的基本的间距大小，例如 8pt／dp，或者10pt／dp，然后所有元素的距离都是这个基本间距的倍数，可以是0.5倍，可以是 2倍，也可以是1.5倍，这样整个设计的间距就会比较系统，你在设计元素之间的间距的时候，就有据可依，这个标准也可以直接和开发沟通，未来标注就更省事了。

例如，一个项目订立的间距单位，界面里的大多数距离，就是 8，16，24等这样以 8 的倍数的数值了。即使我手抖了，开发者发现设计里出现了一些 17，23 这样的数值，他们也自动会纠正为 16，24。虽然你的设计不太精确，但是可以保证出来的成品是精确的。

二、文本与文本之间的间距处理

在进行问题处理之前，我想先对行高做个解释。在sketch一倍图中，我们输入一行文字选中时，顶部和底部到边框距离有留白，那么行高就是文字的大小和顶部加底部留白的高度，如下图所示，文字大小为12，行高为18，顶部加底部的留白为18-12=6

问题1.多行文本和单行文本间距处理

多行文本的时候，设置行高为1.5倍（阅读更舒适），那么文字到边框会有留白(标红处)，下图为sketch一倍图，文字大小为16，行高为16x1.5=24（经常需要手动设置行高），上下留白为(24-16)÷2=4

单行文本把行高清零，如文字大小为16，行高为文字大小16，上下留白为零

现在要设置多行文本和单行文本之间的间距为8px,则两个文本框之间的距离为8-多行文本留白4=4则在sketch和sketch measure中测量距离为4px,如图所示：

问题2.多行文本和多行文本间距处理

根据问题一的原理，多行文本与多行文本之间的间距由上文本底部留白加文本之间的留白和下文本顶部留白。
例如一倍图中，多行文本字体大小为16，行高为24，顶部和底部留白为(24-16)÷2=4，设置多行文本和多行文本之间的间距为16px，则16-4-4=8，在sketch和sketch measure中测量距离为8，如图所示

问题3.单行文本和单行文本间距处理

单行文本和单行文本的行高都清零，即行高等于文字大小，那么想要设置的距离进行测量即可

二、测量出现小数点

如果在在进行页面设置前不进行像素对齐设置，则会出现小数点的情况

那么怎么消除小数点呢？

打开sketch工具栏，版本不同可能位置也不一样，把show pixels 和 round to pixel调出来，在设计页面的时候选中页面，在点击这两个工具，即可消除虚边和小数点。

注：使用 Show Pixel 按钮来检查一些设计元素是否会占据半个像素，而在真实设备上出现模糊毛刺的效果。

看看下面的一个图标，默认状态下看着是平滑的，似乎并没有什么问题，但是当你点击 Show Pixels 打开后，就会发现，中间的 + 有占据半个像素的情况，这样切图后在设备端显示就会有毛刺，不够精确，因此 Show Pixels 选项可以帮你检查一些元素，然后调整。

三、组的测量

我之前做页面的时经常会把icon和文本组到一个组里面，但是我发现导出后存在一个问题，在sketch里面测量，经常是单个元素与组进行测，而sketch measure里面则是单一元素进行的测量，容易出现偏差。在非表单类设计时，可以不需要把元素组在一起 。

四、表单类设计

在进行表单类设计时，如果元素较多，需要设置两行，那么根据眼动规律，第一行放置的信息要比第二行重要，在进行表单设计时，先做好布局，然后在框里填充内容上下居中对齐。这是UI设计中的惯例，不要轻易打破。

设计中遇到的问题及时解决处理，那么做常规页面会越来越快，可以把更多时间放在需要更多设计的页面，比如活动页、H5等

五、其他技巧

1、不要直接拉伸形状来改变大小，一律在右边属性栏里输入大小的数值。

2、线条不要用 Sketch 提供的 Line 元素来绘制，而采用 retangle （矩形）来代替。

3、在绘制元素，或者图标时，记住“双数对齐双数，单数对齐单数”。

感觉中间的 + 没居中对齐？你的感觉是对的，可是我保证这个 + 和正方形是采用了 Sketch 的剧中对齐按钮来对齐的，为什么呢？原因在于 + 的大小是 13 x 13，而外部正方形的大小是 24 x 24，怎么也对不齐的（如果不占据零点几个像素的话），因此中间的 + 大小改成 12 x 12 就解决了。

4、视觉对齐和像素对齐

看一个例子，上面两个图标，宽高都不一样，但是看起来是和谐的，可是要是分别让它们宽或者高一致，更好地实现像素对齐的话，就会特别别扭。

高度一致的时候，右边的就会大很多，特别不协调。当然这个是一个相差比较大的例子，在设计中会遇到很多这样要照顾视觉平衡的情况，特别是图标的大小，这就需要设计师的感觉出马了，而不是靠精确的数字。但是开发又是非常精确的一件事情，怎么做才好呢？对于图标或者占位图等元素，我的做法通常是给它们设定边界。

5、Sketch Meature和Fusion Cool导出标注时，Fusion Cool更为精准

6、善用辅助线

阅读：
使用 Sketch 设计时如何尽量做到像素精确，并聊聊视觉对齐和像素对齐