专制处女座 之 Sketch
大家都在黑处女座，其实真是你们不理解处女座，我一直觉得处女座挺好的，真心的。所以我专门开了个新的专题叫作「专制处女座」，处女座们不要误解啊，我这个「专制」的意思是「专门制造」就是专门为处女座制造的内容，那谁，别再说我处女座了，我都为你(zi)们(ji)服务了。
OK，我们回到正题上来，今天要说的东西是 Sketch，话说这个已经红了一年多了的、切图仔专用软件为什么今天又被提起呢？原因是最近工作需要开始重新使用这个软件，之前我一直吐槽它的诸多问题：比如不稳定、BUG 多、中文排版支持差、无法满足像素控制强迫症的人去控制每个像素（也许是我特有的）等等问题，所以一直工作都是使用 Photoshop CC 2015，而这两天重新拾起这个软件的时候，强迫症又犯了，中文字体的支持问题很严重：一个是字体渲染问题；另外一个字体的 Ling Height 的问题。第一个问题之前在 「iOS 9字体的介绍与使用」中已经提到了解决方案（去掉Sub-pixel Antialias选项），但是第二个问题确一直没有好的办法，今天去研究了下终于可以自治自己的强迫症了。
Sketch与中文（仅 iOS 苹方字体）
Sketch 3.6 版本彻底解决了这个问题，小伙伴们不用看这部分了
我们先看下目前不同字体下的Ling Height的实际情况：
很明显虽然字体的大小、行高都是一样的，但是视觉的位置是完全偏差的，比如下图（第一条线是字体上边缘线，第二条是下边缘线，其实这样说也不准确，姑且这样称呼）：
（可以点开看大图更清楚一些）
这里的字体设定的行高均等于字体大小，上面一行的英文与中文黑体的边缘线与字体大小是一致的，而下面的中文不同的字体边缘都不一样，和字体相关。
这对于一般的切图仔都是难以接受的，更何况是处女座！Adobe 的渲染是基于自己的渲染方式，而Sketch的字体渲染等是基于苹果系统自身的，因此该更加符合 iOS 上的显示效果啊，于是我找攻城师大神测试了下 iOS9字体的字体行高计算方式与默认值，得到了这样的结果：
可以看到 SF UI Display 字体 和苹方 的默认行高竟然是不一样的，分别是1.4 和 0.0，这让我联想到上面对比不同的字体行高的问题。于是想到中文的排版就有了解决方案啦！如下：
1. 单行文字排版
单行文字的排版应该是 UI 设计中比较常用的一种，中文这样设置：
比如字体大小 x ，那么就设定行高为 x*1.4，这样我们就得到了这样的一个文本区域，然后在对这个文本区域在界面上对齐，由于 iOS 默认对苹方字体的行高就是1.4倍，这样最终的效果与设计图完全一致。那么另外一个问题来了，因为字体的上下存在间隙，那么文字本身的视觉距离与其他元素的距离就不是我们设定的距离了，实际距离会很大，处女座是受不了这个的！那么我们需要重新计算下多出来的部分，也就是 (x*1.4-x)/2=0.2x，得到这个数字后我们在排版的时候减去这个距离就可以。
（可以点开看大图更清楚一些）
而用Marketck标注的结果与设计也是一致的，不过这个地方有个技巧，计算的时候行高可能不是整数，这个时候取最近的偶数值比较好，更方便居中对齐等。
最新版本已经不用自己计算了！
最新版本的 Sketch 已经自动做了这样的处理了，不需要自己计算了，操作方法：
输入一段文字后，删除 Line 选项中的数值，然后回车，会自动计算行高了！
2. 段落文字排版
因为段落文字的内容为了美观易读，都需要设定一定的行高（个人一般使用1.5倍和1.75倍比较多）所以对这个部分就不需要单独处理了。
Sketch 的中文世界终于完美了。
上面的内容一定过滤掉了一批非处女座的设计师了，现在给处女座的设计师一点福利：
Sketch插件推荐
1. Marketch
这个简直就是标注神器啊。
2. Craft
这个是大名鼎鼎，小名 invision 公司开发的插件（有 PS 版本），功能上我就不多介绍了，你试用下就知道有多厉害了！
哦，我是射手座~
.
