教你如何100%還原設計稿

前言

看過很多文章對於設計稿的還原，然後自己也找到了一個曲線救國的方法，打算把自己的方法做一個總結，如果需要其他的方法可以自己去找，我這裡就闡述一下自己的方法。如果有不對的地方請留言告訴我，這樣才知道自己哪裡做的不好~

設計稿的文本行高

這裡我主要使用的是 Sketch軟體，為了說明問題，我會用簡單的圖來說明。

使用 PingFang SC 字體做設計

第一行文案的字體是32px，Medium，PingFang SC ，line 是系統默認的45。

第二行文案的字體28px，Regular，PingFang SC ，line 是系統默認的40。

使用 SF Pro Text 字體做設計

第一行文案的字體是32px，Medium，SF Pro Text ，line 是系統默認的38。

第二行文案的字體28px，Regular，SF Pro Text ，line 是系統默認的34。

Xcode 的文本行高

當然作為設計師沒有必要會使用 Xcode，但是也應該懂一點，所以我這裡只是直接放一些說明問題的截圖。這裡都是1倍的開發邏輯尺寸，所以換算成設計的尺寸大小就是乘以2。

使用 PingFang SC 字體做設計

第一行文案的字體是16pt，中黑體（Medium），PingFang SC，line 是22.5。

第二行文案的字體14pt， 常規體（Regular），PingFang SC ，line 是20。

結論

得到的行高就是和 sketch 使用 PingFang SC 做的設計稿一模一樣。

使用 SF Pro Text 字體做設計

第一行文案的字體是16pt，Medium，SF Pro Text ，line 是系統默認的19.5。

第二行文案的字體14pt，Regular，SF Pro Text ，line 是系統默認的17。

實際稿

下面的圖是真實開發效果，所以 System 字體和 PingFang SC 字體還是有區別的。

結論

當開發使用System 時，就會出現字體行高問題，而且可以推斷這裡的 system 字體就是傳說中的 SF Pro 字體，首先跟設計稿使用 SF Pro 幾乎一模一樣，我這裡只是舉了這 2 個文字大小，大家可以多多驗證，可以發現幾乎一模一樣。正是這個原因才導致了行高問題的出現，而且 System 還有 Bold 字重，這就更說明了開發使用的 System 字體就是英文字體，因為蘋方字體是沒有 Bold 屬性。

用pingfang sc 還要考慮到中英文混排，目前來看 System 字體也不能區分中文和英文，但是為了安全起見，開發還是會選用 System 字體比較安全和方便。

最後總結

想要徹底解決這個行高的問題，可以有以下 3 種方法：

1. 讓開發繼續使用 System 字體，然後減去對應字型大小相應的行高偏差，這裡需要設計師對自己使用的字體做測試，然後把對應字型大小的偏差寫成表格告訴開發，讓開發根據對應的字體減去相應的偏差。只是字體會跟 PingFang SC 不一樣。
2. 讓開發使用 PingFang SC 字體開發，這樣可以保證字體幾乎100%還原，這樣就再也不用擔心設計稿還原度問題了。
3. 中英文分別單獨使用：中文只用 PingFang SC，英文使用 SF Pro 字體。
4. 設計師可以使用 Craft 插件設置每個字體樣式或者 Text Style，把行高都調節成跟開發使用 System 字體的行高，這樣在設計時候，直接使用自己定義好的字體樣式也可以解決這個問題。

感謝閱讀

我是丁香園的設計師周雪寶（微信：zxb663062），歡迎交流。