首发于极光日报

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

简评:探索 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 中设计的更暗。

我们可以在代码中尝试修改 CAGradientLayerstartPointendPoint 来抵消这一差异:

// 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

日报扩展阅读:

编辑于 2018-02-05

文章被以下专栏收录