如何評價 Ant Design 分享的『字型大小選擇』背後的數學/物理規律？

01-21

勺口勺：Ant Design 3.0 背後的故事（附演講視頻）
大家怎麼看？設計師的玄學還是？
相關問題：

參加第一屆螞蟻體驗科技大會 SEE Conf 2018 是什麼體驗？

我真的從沒想到我關注的音樂視覺設計科學這三個話題能出現在同一個問題裡面很感人 hhhhh

1. 視覺角度與字型大小選擇：

這就是個初中物理里最基本的概念，學過望遠鏡工作原理的都明白。放在這的目的……大概是讓看不懂三角函數的人覺得很厲害吧……

其實用更簡單的方法描述的話很容易理解：字體實際大小和屏幕離眼距離的比值需要固定，這樣人眼才會覺得字體的大小一樣。

2. 字型大小搭配：

原文說，這是模仿自然的音律，選定一系列 e 指數增長的字型大小。然而問題來了：

首先，音律中各個音的頻率可以看做是以 2 為底數增長的，正是這個 2 造成了樂音體系中最重要的純八度關係，而 e 這種無理數和音樂可以說是八竿子打不著。

其次，原文所說的三音階四音階五音階七音階的頻率都不是等分的（所以不是指數增長的），只有平均律（十二音階）才是等分、指數增長的。

所以，原文提到的這種以 e 為底、五等分的方式，和音樂完全無關，只是在炒一個看起來很高大上的噱頭，就像做了個設計圖之後編出的「XXX 象徵著 XXX」一樣。

但是拋開這些東西，這個概念的確有其優點：數學化地規定了每個字型大小的一系列固定字型大小搭配，實現了一套標準，省去了調整字型大小的麻煩。

3. 行高的選擇

個人認為這一部分很合理。

這個公式可以這樣理解：行高和字型大小的比值是隨著字型大小減小的，從字型大小很小時的黃金比 1.618 逐漸衰減到 1。

原因可以看原文的這張圖：

左圖小字型大小比較美觀，中間圖大字型大小比較美觀，所以把兩個公式之間做了一個擬合（右圖），產生了在字型大小較小時接近左圖、字型大小較大時接近中間圖的函數。

總之，雖然這樣任意規定一個函數得到的並不可能是最優解（況且個人審美也有差異），但這對於設計也是足夠了，而且的確是一種將設計標準化的比較好的思路。拋開吸引人的噱頭，其中的一些思想值得學習。

把字型大小的最佳實踐演算法化是值得讚賞的，但這背後個人感覺能延展出更多存在的問題需要進一步討論，這對於整個業界可能也是好事：

『主字型大小』究竟應該怎麼定義？是否只有一個主字型大小？而且，是否應該把正文字型大小作為主字型大小？視覺上是否有更加重要的、主導性的字型大小，比如二級標題和輔助字型大小的定義在我看來可能在視覺表達上的重要性比正文字型大小還高，而正文只是需要確保可讀性罷了；

此外，如果只是 Admin 系統開發(目前 Ant 應該也最多應用在此)的標準來看 12px 的字型大小其實依然不過時（想想日益增長的數據量級以及相對穩定的筆記本尺寸），而挺多內容型頁面的確至少得用 14px，這在 PC 及 Mobile 上都有著還算不錯的體驗；

個人也覺得這個演算法應該是從實踐推導出來的擬合結果，那麼問題就在這個最佳實踐是否真的是銀彈？
大多數的場景下直接由視覺根據核心場景給出一系列字型大小即可，那麼這種演算法的應用場景是哪裡？真的有頻繁變動主字型大小的需求么？
內容上行高隨著字型大小的變大而縮小這個是 OK 的，但直接使用計算結果的話可能就會破壞頁面的原有網格結構。計算出行高之後再對齊到網格可能會得到更好的結果，比如 38 / 46 / 54 的對齊到 8px 網格得到 40 / 48 / 56 會更讓我心安。
但行高這個真的有銀彈？我覺得排版專業的同學們是不會認可的，實際上各類的 UI 組件以及內容編排很可能會有不同的行高設計需求，行高的使用規範可能也需要進一步細化完善。

總之，Ant Design 這次算是給非設計人員提供了一個演算法化的解決方案，愛用不用；而設計師可以將之作為基礎或者參考，但具體如何為設計師所用也還沒有定論。理想情況下設計師可以通過界面配置生成一個設計語言直接作為基礎再調整使用，可能也是個不錯的方向。

周末觀看了一下這場分享的視頻，感覺非常不錯。

我的觀點：首先，這肯定不是先有了公式再推導出的「最優設計」。它山同學的分享里也說了，公式的參數也是他們團隊通過大量實踐以後確定下來的。所以我認為最終的設計輸出並不能認為是一種數學/物理規律「推導」出來的結論，而是通過觀察、嘗試，去把令人舒適的設計總結成規律，是對美、對和諧、對「自然」的「理解」。與我們大學裡做物理實驗通過大量的點去擬合曲線不同，這條曲線沒有標準答案。

至於為什麼用 $e^{frac{i}{5}}$ 之類的參數，我覺得更多地體現的是設計理念、為設計賦予的內涵。因為這裡的規律和自然常數、音階的物理意義並看不出直觀的聯繫，所以並不能夠算是「原理」，也不是某種「最優解」。但是能夠找到簡單的公式來表達設計規範的約束，參數還能體現想表達的設計內涵，我覺得本身就是挺美的。

傅里葉說數學是對大自然的揭示。排版追求的就是某種節奏感和韻律感。這種規律性不是絕對的，不同人群，在不同屏幕等使用環境下也許有不同的規律性，這是設計師值得探究的。 @章辰的回答太專業了，可以直接使用結論，這個工具就是以音階為參照的: Type Scale - A Visual Calculator

Minor Second (小二度)： 1.067

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

總體來說，我是比較認可 Ant Design 的大思路的。Design System 也是這一兩年我一直在實踐的設計方法。

但對於字體這塊，我對 Ant Design 的推導過程是有質疑的。

這個 PPI 統計，我表示質疑，不知道數據來源在哪？主流的瀏覽器統計都只有解析度的統計，並不能就此對應到 PPI 上。這『我們發現只有大約 37.6% 的顯示器 PPI 是小於 120 的，而 PPI 在 120－140 的顯示器的佔比大約為 40%。』是怎麼統計來的？
PPI（Pixels Per Inch）是一個物理值，舉例，13.3 寸 1920 * 1080 的筆記本，PPI 為 165.64，通常情況下用戶（或者系統）會調整其縮放比例為 125% 或 150%，此時瀏覽器中字體顯示區域是會對應變大的。但其 PPI 並沒有變，改變的是 DPI（Dots Per Inch），所以為什麼要以 PPI 來做判斷依據？

But，結論我是認可的，主字體由 12px 變為 14px 這是必然的，甚至正文字體調整到 15px / 16px 才更利於閱讀，只是覺得這個推導過程有瑕疵。

推導太華麗，但根基不穩，你懂我的意思吧？

當鹽不是玄學啦，UI 設計有一些基本的設計原則，如「親密性」「對比」原則，體現在字體排版上就是基本的字型大小、行高這些最基本的樣式。既然有規律可循，那麼一定是可以通過科學計算得出設計規範的，而且這些科學計算有時可以減少人為誤差。

除此以外，我更看重的是「科學定義設計」對設計資源和編碼的可維護性很重要，例如 Antd 的色板生成演算法，如果追求最完美的色板，那麼百餘種色值應該由設計師逐個調優，得到完整色板的，反映到代碼里，需要定義百餘個變數來記錄色值，這些色值調整的代價會非常高，使得設計不可控。設計師調整色板的色值也是有一定規律的，因此通過科學計算得到的色板會讓設計更可控。

前言

Robet Bringhurst 在他的字體樣式元素一書中有提出過，定義有規律的字階是構建設計秩序感的基礎。同時他又提出經典的字階和古典音階具備韻律上的相似性。在這個思想的基礎之上，有個叫做 Spencer 的人提出了一個冪函數的字體計算公式。用圖形化來表達就是這樣的。有了這一個公式，讓一粒 14px 的字體種子種發芽的想法就變得不是那麼的天馬行空了。

f0 我們可以理解成為起始字型大小，也就是主字體，我們前面有推導出來為 14px。r 的值決定了這條曲線的趨勢，可以理解成字階的生長一個趨勢。這個數值的啟發來源於自然常數 e，這是一個無理數，大約等於 2.71828。n 則代表了我們如何在曲線上取對應的數字，決定這個數值大小的關鍵在於我們希望相鄰的兩個字型大小之間的差距是大還是小。Spencer 在他的文章中有提到過，建議 n 在選擇上可以參考音律的規則，比如說 3 音階、4 音階、5 音階、7音階等等，這樣可以令字階呈現出一種自然的節奏感。在做了大量的頁面落地試驗之後我們將這個數值定成 5。映射到音樂的世界中，正好是 5 音階。5 聲音階是很多古典樂遵循的規律，比如我國古代的宮商角徵羽。
我們將三個數值代入到前面公式之後，可以得到一組關於字階的原始數組。它們是基於 14px 的字體，以自然常數的生長律，同時用 5 聲音階的單元切分方式得出來的。

說實話我不是完全認可推導過程，字階我不太懂，不過音律略懂一點點，確實是一個數學問題，以下主要為引用~

音律和數學

音律要解決的是音階的確定問題。音組都是以「純八度」（倍頻）作為周期。給定一個基準頻率（音高） $F_0$ ，頻率區間 $[F_0, 2F_0]$ 即對應純八度。所以問題就約化為：通過一組規則映射出一個頻率區間 $[F_0, 2F_0]$ 內的其他頻率。

一個一般的音律可以表示成： $F(n_1, n_2, cdots) = g(n_1,n_2,cdots) F_0,qquad n_iinmathbb{Z}$

不同的映射函數 $g(n_i)$ 對應不同的律制，由「參數」 $n_1,,n_2,cdots$ 等來參數化（非常類似原子能級所對應的量子數）。如上所述，只需要確定一個純八度，即滿足 $1leq g(n_1,cdots) leq 2$ 內的參數取值即可。

世界音樂史發展至今，音律分別有五度相生律(又稱三分損益律)、純律、十二平均律三種，都是這個一般的音律映射關係的特殊形式。

三種律制：

五度相生律（雙參數 $m,n$ ）

$g(m,n) = mu^{m} u^{n} ,qquad mu=2, u=3, quad m,nin mathbb{Z}$
純律（三參數 $m,n,l$ ）
$g(m,n,l) = mu^{m} u^{n} lambda^{l} ,qquad mu=2, u=3,lambda=5,quad m,n,lin mathbb{Z}$
十二平均律（單參數 $i$ ）
$g(i)=mu^{frac{i}{N}} ,qquad mu=2,,N=12,quad iinmathbb{Z}$
十二平均律只有一個單參數 $i$ ， $i$ 取遍所有整數就給出了十二平均律中的所有音高。比如，i從1取到12就給出一個純八度中的十二個音高。這裡 $N=12$ 所以叫「十二」平均律。

關於參數：

這三種律制都有一個共同的參數 $mu=2$ 。其對應一個簡單的比例關係 2:1，即「倍頻」，意義是就是「純八度」。
五度相生律引入了第二個比例關係 3:2，對應「純五度」。
相應地，需要一個新的參數 $u=3$ 。所謂「五度相生」，本質上是用兩種比例關係 2:1和 3:2 來生成更多的比例，從而劃分音階。
純律是又引入第三種比例關係 5:4，對應「大三度」。
當然在 3:2 和 5:4 之間還有一個比例 4:3，但這個比例不是獨立的，因為 $4:3 = (2:1) imes (2:3)$
相應地，純律需要引入第三個參數 $lambda =5$ 。
在十二平均律中，只有 $mu=2$ 這個參數，相鄰半音之間的頻率關係是 $2^{frac{1}{12}}$ 倍，除了純八度的倍頻音，其他的音的頻率關係都不是整數比例關係，或者說不是有理數。這樣在樂器製作與調音時就會遇到困難。更易操作的音階序列是五度相生律，即自然音階序列。同時，似乎有理數的音高聽上去也更為和諧。
世界音樂史也是先有五度相生律，後有純律再發展出了十二平均律，因為無理數在數學史上的出現要晚於有理數上千年

以上內容來自：知乎用戶：純律、十二平均律和五度相生律是如何產生的？

回到 Ant Design 分享的『字型大小選擇』的規律：

字階和古典音階具備韻律上的相似性，因為十二平均律用 $2^{frac{i}{12}}$ 而字階選了 $e^{frac{i}{5}}$ ？
用了自然常數所以自然之美，N 取了 5 所以五聲音階然後就宮商角徵羽？

我想應該很多童鞋會質疑這點。。。

為了辨析這些概念，我們可以回顧一下，如果童鞋們有興趣的話，可以帶著以下的問題繼續閱讀：

為什麼十二平均律用 $2^{frac{i}{12}}$ ？
5 聲音階跟 $e^{frac{i}{5}}$ 這個 5 次根號有關係嗎？
宮商角徵羽這五音的來歷，他們之間的頻率比值是多少？

音律發展史

古代是沒有頻率這一個概念的，我們來說一說管弦。我們有管弦，西方也有管弦，原因很簡單，管和弦的震動方式比較一目了然，便於人們由它們來發現和諧的音符，就拿吉他舉例好了。

學過物理的同學都知道：同樣的弦，它的弦長和它震動的頻率是成反比的。也就是說如果某根弦我撥一下，它發出的聲音，和我按著它的一半，再撥一下發出的聲音，兩個聲音的頻率是 2:1，就也就是一個「純八度」的關係，第一個參數關係確認了，接下來怎麼辦？

【十二平均律、三分損益法、純律】音的不同生成方式：https://zhuanlan.zhihu.com/p/29163518

3:1。沒錯，我們於是按著一根弦 1/3 的地方再一次撥動，咳咳，一個小問題來了，這會把一根弦分成兩個部分，我們應該撥動哪一邊呢？仔細思考一下就會發現，如果是短的那邊，那它發出的聲音就比 1/2 處發出的聲音還要高了，超出了純八度，所以我們要彈長的那一邊。

嗯，它們之間的比例就是 3:2。事實果然如我們所料，這個音和最原始的音放在一起也極為和諧，也就是對應的「純五度」。

為了找接下來的比例關係，全世界各族人民陷入了不同的思考。

五度相生(三分損益)律

如果 2:1、3:2 的弦長都有不錯的結果，接下來就是找 1/4、1/5 的節點了吧，可是天不遂人意，4:3 弦長的還不錯，5:4 弦長的和諧度就差不少了。

【十二平均律、三分損益法、純律】音的不同生成方式：https://zhuanlan.zhihu.com/p/29163518

這時候有人就想到了，既然我們找到了與一開始的音很和諧的 2/3 弦長，我們再尋找這個音的 2/3 弦長的音，豈不是很有可能性？於是他們用 2/3 弦長再次 2/3 一下，得到了超過我們規定八度的 4/9(&<1/2) 弦長，所以需要把這根弦長乘 2 變成 8/9 弦長。也就是說，我們有一個全弦長，一個 2/3 弦長，再用 2/3 弦長乘以了 4/3 ， $1 imes (2/3) imes (4/3) ……$ 如此往複下去，這就是三分損益律啦~ (損表示 1-1/3，益表示 1+1/3)

在司馬遷的《史記》「律書第三」中寫到∶「……九九八十一以為宮。三分去一，五十四以為徵。三分益一，七十二以為商。三分去一，四十八以為羽。三分益一，六十四以為角。」

意思是取一根用來定音的琴弦，長為 81 單位，定為宮的音高。然後，我們將其長去掉三分之一，也就是將 81 乘上 2/3，就得到 54 單位，定為徵的音高。將徵音的竹管長度增加自己的三分之一，即將 54 乘上 4/3，得到 72 單位，定為商的音高。然後乘上 2/3 得 48 單位，為羽的音高。最後乘上 4/3 得 64 單位，為角的音高。大致如下圖所示：

一點也不好笑：為什麼宮商角徵羽是12356？https://www.zhihu.com/question/24983585/answer/29687036

把這五個音從低到高(按長度大小)重新排列後，就變為宮(81)、商(72)、角(64)、徵(54)、羽(48)五種音高，也稱為中國的五音。

未完待續

其實簡單來講，在設計當中的數學並不是很具有真實的意義的，這就是像是說黃金比例分割一定很美么？不一定。你就算是在比例當中加個 0.01 ，你是看不出區別的。當然，一般情況下，黃金比例分割還是具有一定的美學。只不過你卻不知道為什麼~~~

但是在實際生產中，說白了，整個使用的過程更像是不完全歸納法。根據已有的數據和實踐，來推導出更多的數據。

舉個簡單的例子，我們可以很輕易的定義出 3 階的字體大小，但是很難定義出 10 階以上的，並且符合一定的美學。而數學在這裡起到的作用就是根據定義出來的 3 階，通過調整不同的參數來生成 10 階。但是勺子也講到了，就算是這樣生成的數據，也不是很完美的，因為不一定符合工程的要求，比如雙數字體，不能有小數等。所以用數學生成更多的階梯之後，還需要人工的調整。

至於是玄學還是什麼的。我只能用一句話來說，只要是有規律的，都符合一定的美學。我是這麼認為的。只不過不同的美適合的情況不一樣，喜歡的人也不一樣。antd 只不過選擇了一個大家都能接受的美學。

其實這種大家在實際中都會運用而已，比如說我寫自己的網頁的時候，會不由自主的使用 1.2 或者 0.75 這個倍率來縮放字體。只不過我沒有形成完備的公式而已。

總的來說，他們可能確定要使用公式來定義字型大小這個想法或許誰都可以想到，誰都可以用那個公式。但問題是，並不是誰都可以花很長的時間去確定公式裡面的參數的。這一點，antd 的團隊要給他們點贊。

5度相生律的原理是依據泛音列的第二泛音（純五度），公式只是解釋方式，知乎那個專用問題的高票答案有點顛倒了因果關係。

但是這樣排序發現最後一個音卻不是剛好高了第一個音八度（第一泛音）。所以極大的限制了創作的自由度，最後巴赫創造了十二平均律來代替，犧牲了兩個音之間的和諧度，換來了整體的和諧度與創作的自由

但在字階上，不存在一個整體周期就必須是八度的定義。所以用5度相生律的規則來確實是更合適的。

可以確定的是，人類在視覺中對尺寸的敏感度，和人類對音高的敏感度，都是依據比值而不是依據差值來的，但是這兩條敏感度函數有多大程度的重合，還沒有定論

參數化不是啥壞事啊，幾行代碼自動出海報才是對生產力的解放啊！其實很多商業設計作品生命周期並不長，從商業場景上講也沒那麼高的要求。設計師們熱衷於用「像素眼」調整各個細節，這也許不是壞事，但投入產出比一定偏低。給個由專業設計師把關的固定規則，產品經理、程序員甚至機器都可以快速製作那些不必精雕細琢的設計，這不挺好么。

萬物都有一個演變的過程。只是這個過程被誰掌握，掌握之後怎麼被賦予。

很感謝它山分享的思路。但是要理解思想，不能照搬的，因為實際產品中，字體大小和角度的問題遠遠要複雜。 h=2d*tan(a/2)裡面的constant d，a等需要根據實際來調整。舉一個栗子，我的產品中要客戶需要戶外cellphone和pad中的地圖交互，這類產品見我的譯文《為移動設備設計地圖》中所示，裡面的不同場景用戶和載體之間的距離d和角度a是不同的。

例如，產品是用於騎車或者機載設備，那麼d的距離一般要在辦公室中人眼和顯示器要遠一點，而且角度更是會很奇怪，因為在開車時候，設備是在用戶額右前方而不是正前方的。

另外，如果是在使用過程中，是移動設備，產生的交互也要更多，那麼包含字體的按鈕和canvas等在交互中的表現，例如可能會要更大一點便於點擊或者拖動。

哈哈哈哈哈哈哈哈哈哈這個必須強行回答一次?暫不評價，只想說定個人體會！

一直以為字型大小大小都是ui主觀性的開心就好，調大或縮小1px都是頭腦發熱！可是周末聽了它山的分享，卧槽，一切都不那麼簡單！！！

所以，自己的技術low到一定程度時，部分你覺得別人是神經質的事情可能真是你無知導致的......

（調侃）

利用了深度學習方法，最後調出來的參數