[譯]爲何你的 APP 在 Sketch 上看起來更好: 探索 Sketch 和 iOS 的渲染差別

• 原文地址：Why Your App Looks Better in Sketch: Exploring rendering differences between Sketch and iOS
• 原文做者：Nathan Gitter
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：Ryden Sun
• 校對者：swants, atuooo

爲何你的 APP 在 Sketch 上看起來更好: 探索 Sketch 和 iOS 的渲染差別

找出兩幅圖的差別

你能找到下面兩幅圖之間的不一樣點嗎？

若是你仔細看，可能會注意到一些微妙的差異：

右面的這幅圖:

1. 有更大的陰影。
2. 有更深的漸變。
3. 「in」 這個單詞在段落的第一行。

左邊的這幅圖是 Sketch 的一張截圖，右邊的圖是 iOS 系統實際產出的圖。這些差異會在圖像渲染的時候出現。他們有徹底相同的字體，行間距，陰影半徑，顏色和漸變屬性 —— 全部的這些常量都是相同的。

你能夠看到，原始設計圖的某些方面在從設計圖到真實代碼的轉變過程當中有所丟失。咱們會對這些細節進行探索，所以你能夠知道去注意哪裏而且如何修復這些問題。

咱們爲何要關心

設計對於成功的移動 APP 來講是相當重要的。尤爲在 iOS 平臺，用戶已經習慣了 APP 運行順暢而且界面優美。

若是你是一個移動應用的設計者或者開發者，你知道小的細節對於終端的用戶體驗是多麼的重要。高質量的軟件只能從那些深切在意他們的做品的人們中產出。

APP 爲何有可能看起來並不像原始設計稿那樣好，這是有不少緣由的。咱們會調查更精細的緣由中的其中一個 —— Sketch 和 iOS 渲染時的不一樣。

轉化過程當中的丟失

某些特定類型的用戶體驗因素在 Sketch 和 iOS 上有顯著的不一樣。咱們將探索如下幾個因素：

1. 排版
2. 陰影
3. 漸變

1. 排版

排版有許多種實現方式，但在這個測試中我將會用 label 來實現（ Sketch 中的 「Text」 元素，iOS 中的 ‘UILabel’）。 讓咱們一塊兒來看一下其中的一些不一樣:

上面這個例子中最大的不一樣就是換行的位置。設計圖中的第三組以 「This text is SF Semibold」 開始的文字，在 「25」 後面進行換行，但在 app 中，換行是在 「points」 後進行的。這個相同的問題會發生在那些換行不一致的的文字段落中。 另外一個比較小的不一樣是 leading（行間距）和 tracking（字符間距）在 Sketch 中稍大一些。

當他們直接被覆蓋時，這些不一樣會被更容易看到：

那使用其餘的字體會怎樣呢? 將 San Francisco 字體替換成 Lato（一個更普遍使用的免費字體），咱們獲得了下面的結果：

效果好了不少!

行間距和字符間距仍舊存在一些不一樣，可是大致上是小了。不過要注意，若是文字須要和其餘元素對齊好比背景圖片，這些小的偏移量可能會至關明顯。

如何修復

其中的一些問題是和 iOS 的默認字體：San Francisco 有關的。當 iOS 渲染系統字體時，它會自動包括基於字號的字符間距。這個自動應用的字符間距表能夠在蘋果網站上得到。有一個 Sketch 插件叫作 「SF Font Fixer」，它在 Sketch 中反映出了這些值。若是你的設計稿用到了 San Francisco 字體，我十分推薦使用這個插件。

(邊注: 要一直記住在 Sketch 中將 text box（ Sketch 控件）牢牢包住文字四周。這個能夠經過選擇文字而且打開 「Fixed」 和 「Auto」 對齊來實現，接着重置 text box 的寬度。若是存在任何額外的空間，這會很容易致使不正確的值輸入到佈局中。)

2. 陰影

陰影並不像排版同樣有全局佈局的規則，它並無清晰的定義。

咱們能夠在上面的圖片中清晰的看到，陰影在 iOS 上默認的會大一些。在上面的這些例子中，這一點在長方形的邊框上形成了最明顯的不一樣。

陰影是比較棘手的，由於 Sketch 和 iOS 的變量是不同的。最大的不一樣是 ‘CALayer’ 沒有 「spread」 的概念，即便咱們能夠經過增大 layer 的面積使他包含整個陰影來解決。

陰影能夠在 Sketch 和 iOS 的不一樣上變化很普遍。我曾看到過一些陰影在 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. 漸變

漸變結果證實也是很麻煩。

三個漸變中，只有「橙色」（上）和「藍色」（右下）有所差別。

橙色的漸變在 Sketch 上看起來更加橫向，可是在 iOS 上更加的豎向。所以，總體的顏色漸變在最終的 app 上要比設計時更黑一些。

藍色漸變的不一樣更加的突出一些 —— 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 發佈了一個精彩的回覆，包含了連接來解釋漸變在渲染時是如何工做的。若是你想深刻源碼瞭解的話能夠去看一下！

本身親眼看看

我建立了一個演示 app，能夠在真機上簡單看一下這些不一樣。它包含了上面的這些例子，同時還有源碼和原始的 Sketch 文件因此你能夠任意的調整這些常量。

這是一個很好的辦法來在團隊內部加強意識 —— 只須要把你的手機給他們而後他們本身就會看到。簡單地觸摸屏幕上任意地方就能夠切換圖片（相似於上面的 gif 圖片）。

得到開源的演示 app: [github.com/nathangitte… Sketch -vs- iOS ](github.com/nathangitte… Sketch -vs- iOS )

Sketch vs iOS 演示 APP —— 本身試一下！

總結

不要假設一樣的值意味着一樣的結果。即便數值是匹配的，實際的視覺表現也可能不匹配。

在最後，任何設計在實現後都須要迭代。設計師和工程師良好地協做對於高質量最終產品是起決定性的。

---

喜歡這個文章？ 在 Medium 這裏留下一些掌聲👏👏👏 而且分享給你的 iOS 設計/開發朋友。想要持續獲取移動 app 設計/開發的最新信息？ 在 Twitter 上關注咱們： twitter.com/nathangitte…

感謝Rick Messer和David Okun對這篇文章的校訂。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。