「完美」的字體系統搭建與維護指南

在設計系統中字型的重要性不再多說，這篇文章主要和大家聊聊設計系統中「完美」的字體系統是如何搭建與維護的。本字體系統的定義大量參考了 Ant Design 的定義過程與設計成果，在此由衷表示感謝~

Ant Design 傳送門：Ant Design - An UI Design Language

先來簡單看看設計說明：

基本上是使用 Ant Design 的字號、字階和字重，然後重新選擇了字型顏色。

眾所周知，在 Sketch 中如果想要做到字型樣式的複用，那麼必須採用字型共享樣式。而為了保持字體系統的可用性，維護元件與設計計的可用性，必須確保字型樣式能夠覆蓋所有的使用場景，這樣才能夠使得每次使用的字型都與共享樣式關聯上。

將所有字型可能使用的四個引數（字號、字重、對齊方式、顏色）進行排列組合，將獲得

7 * 3 * 3 * （ 2 * 4 +2 * 3 + 2 ） = 1008

種樣式，如下圖所示：

那 1008 種樣式如何有效組織，如何合理地管理？接下來將會為你揭曉答案。

樣式命名

如果上千個字型樣式不進行組織規範，落地使用上會是一個災難。因此需要對字型樣式的命名進行合理規範，保證現有 1008 個樣式能夠被輕鬆使用，並使其具有良好的修改能力與擴充套件能力。

經過一份探索後，我從

字階、字重、對齊方式、字型顏色、字型型別

五個引數組織字型樣式的命名。命名的次序如下：

字階、字重與對齊方式是任何字體系統中通用的引數，從可用性角度考慮，將字階作為第一位引數，字重作為第二位引數，對齊方式作為第三位引數。

因為不同的字體系統將會具有不同的顏色，從可擴充套件性角度考慮，將顏色作為最後一位。

字型型別實際上是透過不同顏色來區分正文、標題或者提示，因此將其作為顏色的子級，作為可選項。

同時為了保證字階、顏色、字型型別的次序與我們預期設定的順序保持一致，分別為每個引數新增前置序號。

樣式使用

雖然透過 5 個層級的規劃有效保證了字體系統的組織，但是 5 個層級的深度將會使得樣式的選擇非常不便。

針對這個問題，目前有兩個方面的解決方案。在選擇樣式方面，利用 Sketch Runner 的 Apply 功能可以快速選擇樣式。

快捷鍵

⌘

‘

開啟 Sketch Runner， apply 部分可以直接對選中圖層賦予樣式。

輸入每個層級的首字母（大小寫均可），將快速篩選出對應的樣式。按下回車即可應用樣式。

溫馨提示：在 Sketch Runner 中將 Always open with 的選項改為 Last ，每次開啟 Runner 將會維持上一次使用的標籤。這樣便於多次的樣式修改。

另一方面，在 Sketch 中任意一個層級的樣式都是可以直接選擇，Sketch 將預設採用後續層級中的第一個樣式。因此透過重新命名把預設最常用的「左對齊」、「黑色」與「Primary 型別」的樣式置於頂端。後續使用時可直接點選第一層級的字型樣式。

樣式修改

一個設計系統的難能可貴之處在於它的擴充套件性、修改能力

。如果整個系統沒有辦法很好地響應使用者的需求，根據使用者的需求進行自定義，那麼隨著時間的流逝和需求的增多，這個設計系統就會逐漸失去使用價值。

因此在一個字體系統中，如何高效地修改字型樣式，將會是一個非常重要的部分，這裡的使用指南。它將賦能設計師更高效更輕鬆地支撐更多的業務場景。

字型與顏色

在本字體系統中修改顏色與字型是最容易修改的部分。需要修改所有的基準字型，只需要全選「字型介面」畫板中的所有內容，修改字型點選同步樣式即可，字重會保持不變。

顏色修改也是類似，全選對應顏色的字型單元，修改顏色，點選樣式的同步按鈕即可。

注：字型單元指代一組包含完整字階與對齊樣式的字型佈局，為下圖藍色矩形框所示。

字型型別

理論上文字型別的修改和顏色的修改應該一致，但是文字型別是不透明度的不同，如果直接修改 HEX 或 RGB，往往會把不透明度覆蓋掉。一種做法是「查詢/替換顏色」。（ sketch 48 的特性）利用該功能可以輕鬆替換顏色，且不影響不透明度。但是這個功能會全域性替換，可能會影響不需要替換的顏色，所以並不推薦。目前仍然採用一組一組手動替換的方式。