为何UI设计稿与开发出的界面有差异？设计师必读技术干货

静电说：这是一篇技术流的干货，作者从开发者的角度给我们分析了为什么设计师在Sketch中设计出的设计稿与开发出来的效果会产生差异。不妨来读一读吧！所以，各位设计师小伙伴不要过分苛责开发工程师，有时候真不是他们的锅，但是他们在努力让你的设计稿变的更好。 良好的沟通与协作，是解决一些问题的关键。但是，咱们首先要明白，实现原理。

你可以看出下面两幅图像的差异吗？

如果你足够细心，应该可以看到一些细微的不同：

右图：有较大的阴影。具有较暗的渐变。在该段的第一行带有“ in”一词。

左图是Sketch的屏幕截图，右图是iOS上开发出来的真实样子。这些差异在渲染图形时会出现。它们具有完全相同的字体，行距，阴影半径，颜色和渐变属性-所有常量都相同。

如您所见，在从设计文件到实际代码的转换过程中，原始设计的某些细节可能会丢失。我们将探索其中的一些细节，以便您知道要注意什么以及如何解决它们。

为什么要在乎细节？

设计的好坏，对于移动应用是否成功，至关重要。尤其是在iOS上，用户习惯于运行良好且外观漂亮的应用程序。如果您是移动应用程序设计师或开发人员，那么您会知道小细节对于最终用户体验的重要性。高质量的软件只能来自对设计和开发都高度关注的人。有许多原因导致应用看起来可能不如原始设计好。接下来我们将探究更微妙的原因之一-Sketch和iOS之间的渲染差异。

某些类型的UI界面在Sketch和iOS真机上有明显的区别，下面我们重点说说这三个元素：1.版式  2.阴影  3.渐变色

No.1 排版

在开发过程中，我们可以用多种方式来实现排版效果，但是对于本文中的测试，我们会使用标签，也就是iOS开发过程中的Lable元素。接下来看看区别。

上面的实例中，最大的区别就是换行位置不一样。另一个比较小的区别就是，Sketch中的行距和字间距会稍大一些。接下来用动图来看看对比：

对于其他字体呢？用Lato（一种广泛使用的免费字体）代替San Francisco，我们得到以下结果：

这样是不是好多了？字间距行间距依然会有些许差异，但很小。请注意，如果文本要跟其他元素（如背景图像）对齐，那么这些小的偏移可能看起来很明显。

那么如何来修正这个问题呢？

这其中的一些问题与iOS的默认字体：San Francisco有关。当iOS呈现系统字体时，他会自动包含整个文本区域。名为SF Font Fixer的插件可以帮你修正这个问题，所以如果你使用San Francisco字体，我强烈建议你使用它。

（注：请记住，在使用Sketch设计的过程中，应使文本框贴紧文本。你可以通过选择和字体单位相同的行高来解决这个问题。因为多余的间距可以会在开发过程中导致错误的呈现效果。对于中文来说，目前暂无更好的方法解决，唯一的做法是在后期视觉走查阶段调整处理。）

No.2 阴影

与具有通用布局规则的版式不同，阴影的定义不太明确。我们看下图：

你会发现，在默认情况下，iOS中的阴影较大。这在矩形的顶部边缘，差异最大。阴影比较的难办，因为Sketch和iOS中的参数是不同的。最大的区别就是没有“Spread”这个概念，虽然我们可以通过增加包含阴影的图层大小来解决，但是效果依然不太好。

在Sketch和iOS开发的实现层面，阴影的差异很明显。有时候我们发现具有完全相同阴影参数的设计在Sketch中表现很棒，但是真实开发后，效果反而大打折扣。

如何解决这个问题？

阴影很难处理，需要手动调整以匹配原始设计。通常，阴影半径将需要较小，而不透明度则需要较高。各位设计师可以把这篇文给开发工程师看一下，说不定你的设计稿效果会更好。

No.3 渐变

在这三个渐变中，只有“橙色”（上）和“蓝色”（右下）不同。橙色渐变在Sketch中看起来更水平，但在iOS中看起来更垂直。最终应用程序中渐变的整体颜色比设计要暗。

在蓝色渐变中，差异更明显-iOS中的角度更垂直。此渐变由三种颜色定义：左下角为浅蓝色，中间为深蓝色，右上角为粉红色。（静电注解：产生这种现象的原因也有可能是色彩空间差异所致）

解决方法如下：

如果倾斜角度，则可能需要调整起点和终点。尝试稍微抵消startPoint和endPoint，CAGradientLayer以解决这些差异。

多进行视觉走查

而不是完全依赖代码

我构建了一个演示应用程序，以在实际设备上轻松查看这些差异。它包括上面的示例，以及源代码和原始Sketch文件，因此您可以根据自己的需求调整常量。

另外，一个很好的解决办法就是，多多进行视觉走查，把你做好的iOS真机效果交给开发工程师来查看。如果不合适，及时调整。

我把它放到了这个网址：https : //github.com/nathangitter/sketch-vs-ios  大家可以对这个差异有更明显的认知。

最后的结论

不要认为参数一样，最终实现出的结果就是一样的。就算数字完全匹配，视觉外观也可能有差异。 归根结底，任何设计后续都需要进行反复调整和迭代更新。设计师和开发工程师之间建立良好的协作关系对于实现高质量的产品，至关重要。

原文地址：https://medium.com/@nathangitter/why-your-app-looks-better-in-sketch-3a01b22c43d7

作者： Nathan Gitter

翻译：静电

▼

往期精彩回顾

▼

团队小流程不正规，设计师没有话语权？破解之道在这里！

【技巧分享】引导页如何设计，才能把用户顺利“引进门”？

十大用户体验设计失败案例，你知道吗？

国外疫情肆虐！设计师用可爱插画拯救世界？

Sketch64新版本发布啦！一篇文快速掌握新功能