為什麼你的 iOS 應用在 Sketch 上看起來更棒

02-12

簡評：探索 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 需要調高。

// oldlayer.shadowColor = UIColor.black.cgColorlayer.shadowOpacity = 0.2layer.shadowOffset = CGSize(width: 0, height: 4)layer.shadowRadius = 10// newlayer.shadowColor = UIColor.black.cgColorlayer.shadowOpacity = 0.3layer.shadowOffset = CGSize(width: 0, height: 6)layer.shadowRadius = 7

當然，所需要的調整因實際的尺寸、顏色與形狀而異。在這個例子中我們只需要上面所說的小調整。

3. 顏色梯度

可以看到三個梯度中橙色（頂部）和藍色（右下），iOS 與 Sketch 是不同的。Sketch 中的顏色梯度更接近水平，而 iOS 中的則更接近垂直（看下面的動圖可以更容易看出來）。這就導致最終 iOS 呈現的顏色漸變比 Sketch 中設計的更暗。

我們可以在代碼中嘗試修改 CAGradientLayer 的 startPoint 和 endPoint 來抵消這一差異：

// oldlayer.startPoint = CGPoint(x: 0, y: 1)layer.endPoint = CGPoint(x: 1, y: 0)// newlayer.startPoint = CGPoint(x: 0.2, y: 1)layer.endPoint = CGPoint(x: 0.8, y: 0)

不過，這裡沒有什麼一勞永逸的公式。你需要不斷調整從而讓 iOS 上實際展現的和 Sketch 中設計的盡量一致。

最後，千萬不要想當然的認為數值一樣，展示效果就一定一樣。一定要多實際比較，設計與工程實現的完美結合對於高質量的產品至關重要。: )

原文：Why Your App Looks Better in Sketch

日報擴展閱讀：

Google 編程技能提升指南