为何上线的App没有Sketch里的设计稿好看？

本文翻译自Nathan Gitter 的文章 原文连接

---

发现不一样

你能看出这两张图的差异吗？

仔细看，你就会注意到细微的差异，右边的图片：

• 阴影范围更大；
• 渐变的颜色更暗；
• 段落中文字的第一行有一个单词“in”；

左边的图片是Sketch中的设计稿的截图，右边的图片是在iOS中的还原。这些差别会在图像渲染时出现，尽管两张图中用了彻底相同的字体、行间距、阴影半径、颜色和渐变属性。

如你所见，把设计稿转换成真实的代码时，一些细节就会丢失。接下来我会深刻探讨这些细节并告诉你如何作才能避免信息的丢失。

---

为何要关注细节？

设计对于一款应用的成功与否相当重要，尤为在iOS系统中，由于用户会更喜欢使用流畅和好看的App。

若是你是一个移动端app的设计师或者开发者，你就会知道细节对于用户体验的重要性。高质量的软件来自于开发者对于每一个细节的深度考虑。

App没有设计原稿好看有不少缘由，我将探讨最微妙的缘由——Sketch和iOS有不一样的渲染方式。

---

转化中丢失的信息

几种UI元素在Sketch和iOS中有显著的差别：

• 字体
• 阴影
• 渐变

一、排版

字体和排版能够用不少方式实现，本文中我使用UILabel进行测试验证（Sketch中用的是“Text”，iOS中用的Label）。

让咱们看一个例子：

上面例子中最大的区别是换行的位置。第三段的文字在Sketch中是从“25”开始断行，而在app中则从“point”断行。一样的问题也出如今文本段落中——断行不一致。

另外一个细微的差异是Sketch中的行距和字间距会稍微大一些。

下面的动图能够更清楚地看到两张图片的差别：

使用其余的字体会怎样呢？用Lato（另外一种经常使用的免费字体）替换掉San Francisco会获得下面结果：

好多了！

虽然他们的行距和字间距依然有差异，但这些差异很是细微。可是也要注意，若是文本须要与其余元素（例如背景图片）对齐，这些差别在视觉上就会被放大。

怎么解决？

形成以上问题的缘由，一部分是因为iOS的默认字体：San Francisco，当iOS渲染系统默认字体时，系统会自动的调整字间距，能够在苹果官网上找到，若是你的设计字体采用了SF,强烈推荐SF Font Fixer的Sketch插件Sketch plugin 能够解决这个比较烦人的问题。

小贴士：在设计时，尽可能让Text box适配文字所占的大小，不要用过大的Textbox，而且能够设置自动对其，而后再裁剪text的宽度，若是textbox有着较多的冗余宽度，则很是容易形成其余的还原错误。

二、阴影

不一样于字体排版有着通用的设计规则，阴影的设计则因人而异。

例如上图的图片，iOS中的默认阴影比较大，这使得上面的例子中矩形的顶部边缘的差别最大。

阴影的设置也是有小技巧的，iOS和Sketch的阴影参数也有着一些差别，主要的缘由是因为iOS中的CALayer中没有 “spread”的概念，尽管能够经过增大包含阴影的layer的大小来解决这个问题。

Sketch给出的设计稿与真实的应用中的阴影差别有多是很是大的，甚至有些在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
复制代码

固然，随着大小、颜色以及形状的不一样，参数的改变也是不同的，这里咱们仅仅须要作有限的几处改动。

三、渐变

渐变的还原也是一个使人头痛的问题。

下面三个渐变图中，只有橙色（上面）和蓝色（右下角）与设计稿是有差别的。

在设计稿中，橙色的渐变色更加偏向于水平方向的渐变，可是在iOS中却更偏向于垂直渐变，所以总体来讲，应用的颜色看起来要比设计稿中更暗。

这种差别在蓝色中更加明显，iOS中的渐变动偏向于垂直方向。蓝色的渐变是由三种颜色定义而成，左下角为浅蓝，中间为深蓝，右上角为粉色。

怎么解决？

所以，在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 发表了一篇很棒的文章，解释了在iOS中的渐变是如何渲染的，若是你想深刻了解的话，能够认真研究下这篇文章。

---

更多信息

文中所提到的iOS与Sketch的差别，我都经过Demo的方式进行展现，包括插图中的每一个例子，以及原始的Sketch文件，经过Demo,你能够更直观了解到这些差别。你能够展现给你的团队，这种方式能够更好的理解设计与开发区别，从而开发出更好的应用。

Demo的地址为:github.com/nathangitte…

---

小贴士

永远不要迷信相同的值会有着相同的结果，尽管数字相同，但其视觉表现是不一样的。 最后，每一个好的设计都是在不断的迭代中产生的，开发哥哥和设计小姐姐的良好协做，也是保证高质量产品的关键。