[译]为何你的 APP 在 Sketch 上看起来更好: 探索 Sketch 和 iOS 的渲染差别

• 原文地址：Why Your App Looks Better in Sketch: Exploring rendering differences between Sketch and iOS
• 原文做者：Nathan Gitter
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：Ryden Sun
• 校对者：swants, atuooo

为何你的 APP 在 Sketch 上看起来更好: 探索 Sketch 和 iOS 的渲染差别

找出两幅图的差别

你能找到下面两幅图之间的不一样点吗？

若是你仔细看，可能会注意到一些微妙的差异：

右面的这幅图:

1. 有更大的阴影。
2. 有更深的渐变。
3. “in” 这个单词在段落的第一行。

左边的这幅图是 Sketch 的一张截图，右边的图是 iOS 系统实际产出的图。这些差异会在图像渲染的时候出现。他们有彻底相同的字体，行间距，阴影半径，颜色和渐变属性 —— 全部的这些常量都是相同的。

你能够看到，原始设计图的某些方面在从设计图到真实代码的转变过程当中有所丢失。咱们会对这些细节进行探索，所以你能够知道去注意哪里而且如何修复这些问题。

咱们为何要关心

设计对于成功的移动 APP 来讲是相当重要的。尤为在 iOS 平台，用户已经习惯了 APP 运行顺畅而且界面优美。

若是你是一个移动应用的设计者或者开发者，你知道小的细节对于终端的用户体验是多么的重要。高质量的软件只能从那些深切在意他们的做品的人们中产出。

APP 为何有可能看起来并不像原始设计稿那样好，这是有不少缘由的。咱们会调查更精细的缘由中的其中一个 —— Sketch 和 iOS 渲染时的不一样。

转化过程当中的丢失

某些特定类型的用户体验因素在 Sketch 和 iOS 上有显著的不一样。咱们将探索如下几个因素：

1. 排版
2. 阴影
3. 渐变

1. 排版

排版有许多种实现方式，但在这个测试中我将会用 label 来实现（ Sketch 中的 “Text” 元素，iOS 中的 ‘UILabel’）。 让咱们一块儿来看一下其中的一些不一样:

上面这个例子中最大的不一样就是换行的位置。设计图中的第三组以 “This text is SF Semibold” 开始的文字，在 “25” 后面进行换行，但在 app 中，换行是在 “points” 后进行的。这个相同的问题会发生在那些换行不一致的的文字段落中。 另外一个比较小的不一样是 leading（行间距）和 tracking（字符间距）在 Sketch 中稍大一些。

当他们直接被覆盖时，这些不一样会被更容易看到：

那使用其余的字体会怎样呢? 将 San Francisco 字体替换成 Lato（一个更普遍使用的免费字体），咱们获得了下面的结果：

效果好了不少!

行间距和字符间距仍旧存在一些不一样，可是大致上是小了。不过要注意，若是文字须要和其余元素对齐好比背景图片，这些小的偏移量可能会至关明显。

如何修复

其中的一些问题是和 iOS 的默认字体：San Francisco 有关的。当 iOS 渲染系统字体时，它会自动包括基于字号的字符间距。这个自动应用的字符间距表能够在苹果网站上得到。有一个 Sketch 插件叫作 “SF Font Fixer”，它在 Sketch 中反映出了这些值。若是你的设计稿用到了 San Francisco 字体，我十分推荐使用这个插件。

(边注: 要一直记住在 Sketch 中将 text box（ Sketch 控件）牢牢包住文字四周。这个能够经过选择文字而且打开 “Fixed” 和 “Auto” 对齐来实现，接着重置 text box 的宽度。若是存在任何额外的空间，这会很容易致使不正确的值输入到布局中。)

2. 阴影

阴影并不像排版同样有全局布局的规则，它并无清晰的定义。

咱们能够在上面的图片中清晰的看到，阴影在 iOS 上默认的会大一些。在上面的这些例子中，这一点在长方形的边框上形成了最明显的不一样。

阴影是比较棘手的，由于 Sketch 和 iOS 的变量是不同的。最大的不一样是 ‘CALayer’ 没有 “spread” 的概念，即便咱们能够经过增大 layer 的面积使他包含整个阴影来解决。

阴影能够在 Sketch 和 iOS 的不一样上变化很普遍。我曾看到过一些阴影在 Sketch 上看起来很好但在真机上几乎不可见，即便他们有如出一辙的参数。

如何修复

阴影很棘手，它须要手动的调节来匹配原始的设计图。一般地，阴影的半径须要变小同时不透明度须要变高。

// 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. 渐变

渐变结果证实也是很麻烦。

三个渐变中，只有“橙色”（上）和“蓝色”（右下）有所差别。

橙色的渐变在 Sketch 上看起来更加横向，可是在 iOS 上更加的竖向。所以，总体的颜色渐变在最终的 app 上要比设计时更黑一些。

蓝色渐变的不一样更加的突出一些 —— iOS 上的角度更加的偏向垂直。这个渐变是被三种颜色来定义的： 左下角的浅蓝色，中间的深蓝和右上角的粉色。

如何修复

若是渐变是须要角度的，那开始点和结束点可能须要一些调整。尝试根据这些不一样轻轻地偏移 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)
复制代码

这里没有什么魔法公式 —— 这些值须要不断的调整迭代知道两个结果在视觉上匹配。

Jirka Třečák 发布了一个精彩的回复，包含了连接来解释渐变在渲染时是如何工做的。若是你想深刻源码了解的话能够去看一下！

本身亲眼看看

我建立了一个演示 app，能够在真机上简单看一下这些不一样。它包含了上面的这些例子，同时还有源码和原始的 Sketch 文件因此你能够任意的调整这些常量。

这是一个很好的办法来在团队内部加强意识 —— 只须要把你的手机给他们而后他们本身就会看到。简单地触摸屏幕上任意地方就能够切换图片（相似于上面的 gif 图片）。

得到开源的演示 app: [github.com/nathangitte… Sketch -vs- iOS ](github.com/nathangitte… Sketch -vs- iOS )

Sketch vs iOS 演示 APP —— 本身试一下！

总结

不要假设一样的值意味着一样的结果。即便数值是匹配的，实际的视觉表现也可能不匹配。

在最后，任何设计在实现后都须要迭代。设计师和工程师良好地协做对于高质量最终产品是起决定性的。

---

喜欢这个文章？ 在 Medium 这里留下一些掌声👏👏👏 而且分享给你的 iOS 设计/开发朋友。想要持续获取移动 app 设计/开发的最新信息？ 在 Twitter 上关注咱们： twitter.com/nathangitte…

感谢Rick Messer和David Okun对这篇文章的校订。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。