专栏名称: 极小光

极小光，极光开发者旗下媒体，每天导读国外技术类文章，价值、思考、共鸣。官网： http://y0.cn/jiguangOfficial 欢迎关注专题：极光。你来投稿，投稿，投稿；我来传播，传播，传播。我已委托“维权骑士”（rightknights.com）为我的文章进行维权行动

为什么你的 iOS 应用在 Sketch 上看起来更棒

极小光 · 简书 · · 2018-02-07 13:59

正文

简评： 探索 Sketch 与 iOS 之间的显示差异。

你能发现下面两张图的差异吗？

如果你看得够仔细，你可能会注意到这样几个细微的差别，右边的图片：

有更大的阴影；
颜色更深；
单词 'in' 在第一行的末尾。

左边的图片来自 Sketch，右边的图片则来自 iOS 上的实际效果。它们有着完全相同的字体、行间距、颜色、渐变等等属性，但实际渲染出来却依然有所不同。

可以看到从原始设计到实际实现，有些地方可能会改变。这里我们就将探索一下这些细节，以便了解需要注意些什么和应该如何解决。

1. 排版

在这里我们对 Sketch 中的 "Text" 和 iOS 中的 UILabel 做一个比较：

在这个例子中，最大的区别就是换行符的不一致。用 GIF 能更容易的看出区别：

上面的字体是 San Francisco，那其他字体呢？现在换成 Lato 看看：

虽然依旧有细微的差别，但还是好多了！

这个问题的大部分原因都出在 iOS 的默认字体 San Francisco 上（关于 SF 的一些特性，感兴趣的同学可以自己搜索了解一下）。因此，你可以安装一个名为 " SF Font Fixer " 的 Sketch 插件。

2. 阴影

和排版不同，二者阴影的差别其实不算很大（iOS 上的阴影看起来要更大）。

但阴影确是相对比较棘手的。因为 iOS 和 Sketch 两者定义阴影的参数是不一样的，最大的区别是在 CALayer 上没有 'spread' 这个概念。

如果你想调整阴影，那就需要手动来修改了。通常，iOS 上的 shadow radius 需要降低，opacity 需要调高。

// old
layer.shadowColor = UIColor.black.cgColor
layer.shadowOpacity = 0.2
layer.shadowOffset = CGSize(width: 0, height: 4)
layer.shadowRadius = 10
// new
layer.shadowColor = UIColor.black.cgColor
layer.shadowOpacity = 0.3
layer.shadowOffset = CGSize(width: 0, height: 6)
layer.shadowRadius = 7

当然，所需要的调整因实际的尺寸、颜色与形状而异。在这个例子中我们只需要上面所说的小调整。