「完美」的字體系統搭建與維護指南
在設計系統中字體的重要性不再多說,這篇文章主要和大家聊聊設計系統中「完美」的字體系統是如何搭建與維護的。本字體系統的定義大量參考了 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 的特性)利用該功能可以輕鬆替換顏色,且不影響不透明度。但是這個功能會全局替換,可能會影響不需要替換的顏色,所以並不推薦。目前仍然採用一組一組手動替換的方式。
字階、字重
通過「圖層篩選」功能篩選字階或字重。選中後修改對應的字階或者字重,點擊同步。要修改幾處,就重複該操作幾次。或者使用 Automate 插件的 Replace Font 功能。
樣式名稱修改
或許有時候字體系統樣式的名稱需要根據業務場景進行修改,那麼這個時候可以利用 Sketch Master 插件進行批量修改。利用正則表達式的強大功能,甚至可完全重新設計命名層次結構。
例如需要將對齊方式與字重組合到一個單獨的級別。將 01 - Body /01 - Regular /01 - Left /01 - Black /xxx
替換成 01 - Body /01 - Regular / Left - Black /xxx
。如果手動替換,這肯定會是一個讓人掉頭髮的事情。
而利用正則表達式,只需查找 ^(.*?)/(.*?)/(.*?)/d+s-s(.*?)(/.*?)?
替換 $1/$2/$3 - $4$5
即可一鍵實現。
溫馨提示:正則表達式的學習可以參閱 《正則表達式入門》 這套教程。
文本內容修改
或許有時候字體系統介面的內容需要被批量替換。那麼可以使用 Find and Replace 插件、Content Generator 的 Replace text 功能。
添加樣式
如果需要添加新的樣式,例如新的品牌色,請選中一個字體單元,按住 Alt 拖拽到其他位置進行複製。
溫馨提示:請先組合再進行複製。如不組合,複製後 Sketch 默認會給圖層名稱添加「 Copy」的後綴,需要手動刪除。為了避免「 Copy」後綴,請先組合,再複製,最後取消組合。
選中字體單元後,修改其字體顏色為想要的顏色。接下來使用 Rename It 插件為圖層重命名,使用 「Find & Replace Layers」功能,查找末尾名稱,替換為想要修改的名稱。
溫馨提示:圖層的名稱將在下一步直接變成樣式的名稱。為了保持字體系統的名稱一致性,建議使用 「數字 - 屬性」的方式命名。同時便於 Sketch Runner 查找,建議使用英文,例如「07 - Decoration」。
如果希望利用正則表達式來替換圖層名稱,請使用 LayerRenamer 插件。
最後,選中修改完畢的字體單元,利用 Style Generator 插件快速生成字體的樣式。
溫馨提示:Sketch Style Generator 插件將基於圖層名稱自動生成共享樣式。
而字階與字重因布局限制,暫時沒有更加高效的方法來批量添加字體,需要手動修改字體單元,進而進行添加。
樣式的共享
通過 Shared Text Style 插件可以將字體樣式一鍵導出為 json 文件。
通過導入 Json 文件即可實現樣式的導入。
以上便是整個字體系統的搭建與維護指南,附上我製作的 sketch 文檔:https://pan.baidu.com/s/1dMmjG6 密碼:gyib
最後來一張全家福吧~
推薦閱讀:
※你可能不知道的Sketch小技巧 快捷鍵篇 (二)
※「原創教程」- Sketch 從零開始學(二)
※設計每周清單:Principle 3.0更新、Sketch 46n版本更新、漸變工具Granbient
※Sketch的產品再設計 – 如何提升完善型產品的體驗
※「原創教程」- Sketch 從零開始學(一)