開發間距 ≠ 設計間距 ?

注意字體行高!多是行高致使的和開發間距不一致。字體

因爲Android和iOS系統字體集中爲了保證屏幕顯示清晰易讀,字體寬度和圓度都有輕微提升。所以在默認的開發字體中是有行高保證的。插件

拿iOS舉例,能夠參看一下這篇文章《在iOS中如何正確的實現行間距與行高》設計

從中能夠看出,iOS想要達到設計稿的像素級還原仍是須要作不少工做的。3d


★ 在咱們設計過程當中只須要留意一下行高便可避免不一致的問題。cdn


使用默認的或者設置成和字號同樣的大小的行高最終和開發效果仍是有必定的差別的;blog

理論上來說包括上邊那篇文章也講到開發能實現和設計稿同樣的效果;支付寶

但爲了保證全部開發效果的統一,仍是建議儘可能從設計稿裏規範,畢竟不是全部開發都願意費勁去調幾像素的間距(而且每次都要調整);是從設計中調整行高,仍是從開發中減去行高,這也是工做協同溝通的一部分。開發

Android開發字體也是有行高的,因爲Android開源暫不作研究,但其實開發效果和iOS差距不大,若咱們是以iOS畫板作設計;get


對比表

下邊就拿iOS舉例,如何計算/設置字體行高:it


插件

針對這個問題,也有人開發了Sketch字體行高自動修復插件。

插件下載

Auto Fix iOS Text Line Height

Auto Fix Android Text Line Height


公式

除了查表和使用插件的方式外,我比較推薦這個方式,會更容易理解。

* 公式來自 支付寶體驗設計精髓 一書


能夠理解爲, 不管咱們使用了多大的字號,將其 除以 10 向上取整乘以 2 再加上 字號參數 就是當前字號的開發字體行高。


經常使用字體字號/行高對比表



END / THX

相關文章
相關標籤/搜索