简评: 探索 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 中设计的更暗
我们可以在代码中尝试修改 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)
不过, 这里没有什么一劳永逸的公式你需要不断调整从而让 iOS 上实际展现的和 Sketch 中设计的尽量一致
最后, 千万不要想当然的认为数值一样, 展示效果就一定一样一定要多实际比较, 设计与工程实现的完美结合对于高质量的产品至关重要: )
来源: http://www.jianshu.com/p/7aa5bbd5b177