面向前端的設計規範-文字初探-Part2

沒有看過面向前端的設計規範-文字初探-Part1的同窗可能沒有上下文，我這邊簡單總結一下以前三點講的內容：

1、主字號：面向前端的設計規範推薦使用能夠被2整除兩次的「 16px 」做爲主字號；
2、字階：字號的增加若是符合一條曲線，可讓項目更有一致性，也更讓人理解；
3、行高：面向前端的設計規範，建議「 行高 = 字號+8 」；

以上理論均屬於推導過程，沒有通過實踐印證。

4、實踐

在通過以上玄學的推導以後。最終的目的仍是但願將其應用到咱們實際的項目當中。我急忙趕在在咱們設計的分享會以及前端的分享會上，去分享了以上純理論的推導過程。有趣的事情是，兩個組的同窗反映出的重點徹底不同。

設計的同窗，更多給的反饋是在思考我整個的推導過程是否在設計角度具備合理性，好比有的設計師，提出其實行高的增加更應該符合一條遞增曲線。

前端的同窗，更多的是在整個規範的可行性上有疑惑。他們比較擔憂不少設計的臨界點若是覆蓋不了，那這套理論是否是就 run 不起來了。

我自己是一個前端，因此我也有可行性上的顧慮。因而，我拿着咱們現有的設計稿，按照個人整個理論，作了一下設計的重構。

左邊是優化以前右邊是重構以後 「 灰色的背景是我寫的一個用來顯示設計稿的結構sketch插件 」。解釋一下我這邊重構作的事情，我把全部的行高，高度，間距都用臨近的 4 的倍數的值作了替換。能夠驚奇的看到，咱們從「 3個下間距+3個行高 」 變成了咱們 「 1個下間距 + 2個行高 」。能夠看到僅僅在這麼小的一個模塊中咱們就能夠省掉這麼多的變量，這對於前端來講是很是可喜的。

你們可能會以爲這樣的修改會不會對於設計稿視覺有特別大的衝擊。 下圖是我這邊去掉結構框以後的視覺對比：

能夠明顯看到，這裏影響最大的部分是書封和大標題的間距靠近了「 這裏能夠找設計師精進一下 」。而其它前端可喜的文字部分，我以爲影響是微乎其微的。

我把咱們網站幾個主要頁面都作了這樣的重構，我發現其實對視覺的影響真的比我想象中少不少。而這個偏偏可以證實這個看似玄學的推導實際上是有必定可行性的。簡單來講，一個對視覺重構衝擊很小，可是卻能給前端帶來很大收益的理論「 面向前端的設計規範 」，是值得在項目中推廣的。

5、行高的二次思考

在我重構設計稿的時候，對於間距影響的行高問題，我其實還有另外的發現。

上圖能夠看到，兩個徹底視覺同樣的設計稿，對於設計師來講，把左邊的圖修改爲右邊的圖就是修改一個行高的事。可是對於前端的同窗來講，須要修改「 行高、上間距、下間距、高度 」這四個變量。

好玩兒的事是，即便設計師不給文本設置行高，對於設計來講幾乎是沒有影響的。簡單的來講，sketch 由於沒有網頁中流的概念，因此行高幾乎是不影響單行佈局的。而後更好玩兒的點來了，就是前端能夠徹底不按照設計給的行高去還原設計稿。

既然設計脫離了行高，那麼是否是可讓設計直接就採用對於前端有利的行高規範呢？怎麼樣對前端有利呢？就是前端須要考慮的變量越少，對於前端就越有利。而這又回到了咱們以前講的「 行高 = 字號 + 8 」這個結論。

你想按照這個結論就是 12px 的文字行高就是 20px ，24px 的文字行高就是 32px 了，而這讓咱們的行高變成了一個常量，在咱們網頁中高度幾乎和行高是一致的，因此咱們的高度也變成了常量。回到剛纔上一段那個例子，咱們修改設計，就從以前要考慮的 4 個變量「 上間距，下間距，行高，高度 」變成了只須要考慮「 上間距和下間距 」這 2 個變量。而這對於前端來講修改的時間就幾乎減小了近1倍，而在最初測量的時候也相應的只須要測量上下間距就好，這又節約了時間。

雖然大多數狀況設計師是不須要考慮行高的？可是一遇到文本換行的時候，設計師就須要考慮了。以前給設計分享，他們挑戰「 行高 = 字號 + 8 」這個結論的點是說，這個結論在某些字號下是好看的，可是並不能覆蓋到全部。

那麼問題來了，前端但願行高是一個常量，而設計又以爲「 行高 = 字號 + 8 」這個覆蓋面不夠。那怎麼辦呢？其實能夠看到，咱們前端的點是但願行高是一個常量，和是否是符合這個「 行高 = 字號 + 8 」公式自己無關。只是說符合這個公式的行高，必定是一個常量。

那麼問題就很好解決了，是否是可讓設計師作到，每一個字號都只對應一個行高呢「 至少在同一個字體下 」？而這個行高正好是這個字號下，這邊文本換行時最合適的行高。這樣咱們即讓行高是一個常量，又覆蓋了全部的字號情況。無論這個文本是單行仍是多行，都能即迎合前端又符合設計。

也就說若是設計師給定，12px 的文字最合適的行高是 20px，那麼在這個項目中，12px 的文本無論在任何地方都必定是20px「同一個字體下」。

而這是我在二次對於行高的思考以後，給出的面向前端設計規範的建議：在一個項目中，同一個字體在任何一個地方，它的行高和它的字號都應該是一一對應且惟一的。

「github 文章地址」：github.com/ziven27/blo…