简评：探索 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
当然，所需要的调整因实际的尺寸、颜色与形状而异。在这个例子中我们只需要上面所说的小调整。
3. 颜色梯度
可以看到三个梯度中橙色（顶部）和蓝色（右下），iOS 与 Sketch 是不同的。Sketch 中的颜色梯度更接近水平，而 iOS 中的则更接近垂直（看下面的动图可以更容易看出来）。这就导致最终 iOS 呈现的颜色渐变比 Sketch 中设计的更暗。
我们可以在代码中尝试修改 CAGradientLayer 的 startPoint 和 endPoint 来抵消这一差异：
// old
layer.startPoint = CGPoint(x: 0, y: 1)
layer.endPoint = CGPoint(x: 1, y: 0)
// new
layer.startPoint = CGPoint(x: 0.2, y: 1)
layer.endPoint = CGPoint(x: 0.8, y: 0)
不过，这里没有什么一劳永逸的公式。你需要不断调整从而让 iOS 上实际展现的和 Sketch 中设计的尽量一致。
最后，千万不要想当然的认为数值一样，展示效果就一定一样。一定要多实际比较，设计与工程实现的完美结合对于高质量的产品至关重要。: )
原文链接：Why Your App Looks Better in Sketch
推荐阅读：Level UP! 提升你的编程技能
