为什么上线的App没有Sketch里的设计稿好看？-CSDN博客

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

发现不同

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

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

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

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

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

为什么要关注细节？

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

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

App没有设计原稿好看有很多原因，我将探讨最微妙的原因——Sketch和iOS有不同的渲染方式。

转化中丢失的信息

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

字体
阴影
渐变

1、排版

字体和排版可以用很多方式实现，本文中我使用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有着较多的冗余宽度，则非常容易造成其他的还原错误。

2、阴影

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

例如上图的图片，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
复制代码

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

3、渐变

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

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

在设计稿中，橙色的渐变色更加偏向于水平方向的渐变，但是在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中的渐变是如何渲染的，如果你想深入了解的话，可以认真研究下这篇文章。