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

在最初CSS尚未流行起來的時候，網頁就是相似以 Word 的文本樣式呈現的。去掉各類花裏胡哨的樣式，和裝飾圖片以後，留下的文字纔是網頁原本的樣子，而這纔是咱們真正想要對用戶說的話。文字幾乎是網頁的靈魂。

最近一直在研究面向前端的設計規範。給我印象最深的來自「 Ant Design 3.0 背後的故事 」這篇文章，老實說裏面的那些數學公式看得我仍是比較心累的。可是裏面的觀點，倒是給了我很大的啓發。

在講文章以前我必需要提到的是，本文主要是在探究，面向前端的設計規範在文字方面的可行性。因此美是目的，但必定不是本文終點。咱們要追求的，是在美和工程化之間找到一個利益平衡點。

1、主字號

這是來自「 Ant Design 3.0 背後的故事 」的高級公式。其實原理很簡單，就是網頁主字號的選取和咱們用戶離顯示器的距離有直接關係。近大遠小，這就和你家客廳沙發和電視牆的距離影響着你買電視的大小是一個道理。最終「 Ant Design 」將主字號定在了覆蓋面更廣的 14px 。

理論是對的，可是「 Ant Design 」給出的這個結果和這個理論感受沒有什麼關係。僅僅是由於 14px 的字號能保證大約 77% 的顯示器用戶處於比較好的閱讀體驗，那把字號選在覆蓋面更高的 16px 不是更好嗎？

並且字號大小並非決定網頁可讀性的惟一條件，畢竟字體，顏色，間距等等之類的也一樣對閱讀有着不一樣程度的影響，我以爲最終主字體應該是全局博弈以後的結果。

回到咱們面向前端的設計規範來講，主字號的選擇實際上是很是簡單的。由於能做爲咱們主字號的字體，只有12px、14px、16px，這三個字體。 再大一點字看起來就很大，很像老年機了。 12px 可讀性又太差，那麼可選的就只剩下了 14px、16px 這兩種。結合當前本身的設計風格，想要呼吸感就用 16px ，想要緊湊一點就 14px ，這個就看設計師心情了。

可是前端這邊推薦 16px。由於 16 恰好是 2 的 4 次方，被縮小 3 倍也不會出現小數，這對於設計的縮放和拓展，以及最終瀏覽器的渲染都是很是友好的。巧的是 16px 也是咱們網頁默認文字的大小，不知道這個是否是冥冥之中註定的。

結論，面向前端的設計規範推薦主字號使用 16px。

2、字階

上圖是「 Ant Design 」基於 「 Robet Bringhurst 」提出的經典的字階和古典音階具有韻律上的類似性。以及 「 Spencer 」提出的一個冪函數的字體計算公式，選擇了以 14px 爲起點，給到的字階推演公式。

而後採用偶數原則和簡化記憶原則進行微調。獲得了他們本身準確字階線。並證明設計師用這樣的方式一共反覆嘗試了近 200 多張頁面的設計，覆蓋了後臺大部分類型的場景。能獲得以下結論：

• 新的字階在落地中能夠實現更爲和諧的界面結果；
• 設計師在使用這一套字階的時候明顯感受到設計決策的過程變的輕鬆不少；
• 不一樣的設計師產出頁面一致性都比之前有了明顯的提高；

真的很是佩服「 Ant Design 」團隊極致追求美學所做出的努力。可是，我想說的是看到這個我實際上是有一點慌的。由於我並不認爲字階和主字號有着必然的聯繫。你有了一個韻律，無論你從哪裏開始唱，韻律仍是那個韻律，只是起點不同而已。因此明顯感受以 14 爲基數有一點牽強。

而後更好玩兒的地方是，我在知乎上看到關於「 Ant Design 」的評論的時候瞭解到，音階和天然常數 e「 2.71828 」是沒有關係的。並且三音階四音階五音階七音階的頻率都不是等分的（因此不是指數增加的），只有平均律（十二音階）纔是等分、指數增加的。這裏對錯咱們就不去深究了，也不是重點，只是想說明這個方程式從音律這個角度來講是不具備通用性的。然而巧的是我在後面的評論裏，直接發現了更符合音階理論的字階結論：

Major Second (大二度)： 1.125
Minor Third (小三度)： 1.200
Major Third (大三度)： 1.250
Perfect Fourth (純四度): 1.333
Augmented Fourth (增四度): 1.414
Perfect Fifth (純五度)： 1.500
Golden Ratio (黃金分割率): 1.618

就是文字直接按照上面的數字，遞增就能呈現與之對應的音階美感。既然都有告終論，那是否是到這裏就結束了呢？然而一切不是這麼的簡單。咱們分別以推薦的主字號 14，16 爲起點，進行音階換算能獲得以下的字階列表。

能夠看到音樂韻律之美，其實無非就是一條曲度不一樣的冪函數。曲度陡一點，音樂就明快，曲度換一點音樂就舒緩。照理來講根據產品風格咱們選擇那一條均可以。

然而能夠從上表結果能夠看出，若是咱們以最左邊小二度「 1.067 」做爲咱們字階韻律，取整以後咱們能獲得的序列變化很是的小基本是以步長爲 1px 的節奏遞增的。顯然這麼小的韻律變化，咱們人的肉眼是沒法辨別的。

若是咱們以最右的黃金分割率「 1.618 」做爲咱們字階韻律，咱們能獲得的可用字號太少了，這顯示是不夠用的。這樣咱們一下就將可選擇項限制在了從大二度到純五度這 6 個音階之中。可是在6個音階之中，最後獲得的字號當中基本都是小數和偶數。咱們還得基於偶數原則去微調這些曲線。

天哪，光是要理解這套理論，我就已經耗費掉大量腦細胞了，又談何推廣。這讓我深深讓我懷疑，直接將音階映射到字階的可行性。但有一點咱們是得認可的，就是若是咱們的文字增加有音階的韻律會顯得更美。對於音階的探討咱們暫時放一放。咱們嘗試換一種思路？

在我認爲工程化比較好的設計規範 「 Material Design 」 中對於行高有一個規則是「 4dp baseline Grid 」，就是全部文字的行高都是 4 的倍數，會大大下降排版的複雜度。

但是若是咱們的文字的大小，不是 4 的倍數的話，行高實際上是很難作到 4 的倍數的。因此根據這個理論，咱們字號的選擇就限制在了一個極其簡單的數學公式：「 字號=4n 」 之中。能夠看到最終可選的字號的數組就是： 0、四、八、十二、1六、20、2四、2八、3二、36 .... 可是能夠看到這個是一個線性增加的函數，並不能體現以前提到的音階的韻律之美。

因此咱們須要一條美的帶韻律的曲線，既然咱們是談論視覺爲啥不直接利用視覺的曲線呢？而要和相對較遠的音律扯上關係呢？

相信你們和我同樣，都知道公認的視覺美學中的「 黃金分割 」理論。而和黃金分割相關的曲線就是「 斐波那契數列 」了。

科普如下：斐波那契數列，又稱黃金分割數列指的是 一、一、二、三、五、八、1三、2一、34... 這個數列從第 3 項開始，每一項都等於前兩項之和。並且當 n 趨向於無窮大時，前一項與後一項的比值愈來愈逼近黃金分割 0.618「 或者說後一項與前一項的比值小數部分愈來愈逼近0.618 」。

因而咱們基於「 斐波那契數列 」和 「 字號=4n 」的數學公式，分別以0、四、八、12爲起點，能夠得到如下4個字階序列：

0爲起點：0、四、八、1六、2八、4八、80...

4爲起點：四、八、十二、20、3二、5二、84...

8爲起點：八、十二、1六、2四、3六、5六、88...

12爲起點：十二、1六、20、2八、40、60、92...

能夠看到這4條線中，只有後兩條線是同時含有咱們經常使用的 12 和 16 字號的，而且可用的字號大於 4 個的，因此咱們可選的曲線就只剩下後面兩條了。能夠看到這兩條曲線的區別在於，字號之間的增加律。以8爲起點的字階，在0～100這個區間增加相對要慢一點，而12爲起點的字階要陡峭一點。這個感受能夠根據產品風格和設計喜愛選取就好。

咱們花了大量的時間，去找了各類曲線，無論是從音律仍是從視覺黃金分割的角度。這對於設計師字體的選擇有什麼指導意義呢？很簡單，當設計師定義了一條字階曲線以後，咱們就能理性的判斷某個字體是否是符合咱們的規範，更或者說換一個設計師也能經過這個曲線擴充咱們的字階序列。

而最終的結論，基於咱們面向前端的角度思考，咱們但願這個字號可以儘可能知足「 字號=4n 」。由於這能給前端減輕不少的佈局上的麻煩，和規避字號帶來的兼容性問題。也推薦設計師嘗試用一下我用「 斐波那契數列 」推導出的兩條，即符合美學又貼近前端，可是缺少實踐數據支撐的字階曲線。

3、行高

「Ant design 」對於行高的推導過程，和字階同樣，又太多不相關的變量，咱們這邊仍是不要深究了，可是結論「 行高 = 字號 + 8 」，這個理論光從「易懂」這個角度，就很是符合咱們面向前端的設計思想了。我這邊就嘗試從更多面向前端的角度去從新推導一下這個理論。

上圖左側全部的行高都是按照字號的 1.5 倍「 前端經常使用的行高字號比值 」設定的，然後面的行高是近似讓不一樣字號之間的間隙儘可能保持一致設定的。能夠很明顯的看到，右邊會相對舒服一點。爲何呢？

在我看來，咱們須要行高是爲了讓上一行的文字和下一行的文字之間有呼吸的空間。若是這個呼吸空間一致，那麼咱們會以爲更天然。你想若是你每次呼吸的節奏和平時不同了，那要不是你看到美女，要不就是生病了。而不一樣字號之間相同的字間隙也很是符合設計的四大原則中的「對齊」和 「重複」。基於這個邏輯咱們能夠獲得這樣一個公式：「 行高 = 字號 + n 」。而這個 n 咱們面向前端的設計規範但願是一個定值。

從右側咱們還能夠看到這樣一個規律，就是隨着字號增大，「 行高／字號」的這個比值是無限趨近於 1 的。咱們索性就那這個 1 做爲咱們的終點，因此咱們只須要找到咱們的起點就能解出咱們的方程。

咱們知道網頁中推薦的最小字號爲 12 因此咱們以這個字號做爲咱們的起點。那怎麼去求這個 N 呢？沒辦法咱們又不得不回到咱們惟一知道的美學理論「 黃金分割 」。咱們嘗試讓 「 12*1.618 = 19.416 」來做爲咱們的起點行高。不過怎麼又是小數，怎麼辦呢？

在介紹字階的時候我就提到「 Material Design 」 的「 4dp baseline Grid 」規範。這個規範裏面定義「 行高 = 4n 」。因此咱們將這個「 19.416 」調整到了最接近 4n 倍數的值「 20px 」 。而在我看來「 20px - 19.416px 」這不到 1px 的偏差在網頁環境中對於美學的影響，是徹底能夠忽略的。畢竟不多有瀏覽器能完美渲染小於 1px 的元素。 因而結合咱們之間的「 行高 = 字號 + n 」這個公式，咱們就能求出這個 n=8。

到這裏咱們經過徹底不一樣理論獲得了和「Ant Design」一致的結論：行高 = 字號 + 8 。

總結

還沒寫完，待續....

「 Update at 2018/05/01 」面向前端的設計規範-文字初探-part2

github 地址：github.com/ziven27/blo…