超全面總結(jié)！「完美」的字體系統(tǒng)搭建與維護(hù)指南

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

Ant Design 鏈接：Ant Design - An UI Design Language

先來簡單看看設(shè)計(jì)說明：

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

眾所周知，在 Sketch 中如果想要做到字體樣式的復(fù)用，那么必須采用字體共享樣式。而為了保持字體系統(tǒng)的可用性，維護(hù)組件與設(shè)計(jì)的可用性，必須確保字體樣式能夠覆蓋所有的使用場景，這樣才能夠使得每次使用的字體都與共享樣式關(guān)聯(lián)上。

將所有字體可能使用的四個(gè)參數(shù)（字號、字重、對齊方式、顏色）進(jìn)行排列組合，將獲得 7 * 3 * 3 * （ 2 * 4 +2 * 3 + 2 ） = 1008 種樣式。

如下圖所示：

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

樣式命名

如果上千個(gè)字體樣式不進(jìn)行組織規(guī)范，在落地使用時(shí)會是一個(gè)災(zāi)難。因此需要對字體樣式的命名進(jìn)行合理規(guī)范，保證現(xiàn)有 1008 個(gè)樣式能夠被輕松使用，并使其具有良好的修改能力與擴(kuò)展能力。

經(jīng)過一番探索后，我從字階、字重、對齊方式、字體顏色、字體類型五個(gè)參數(shù)組織字體樣式的命名。命名的次序如下：

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

因?yàn)椴煌淖煮w系統(tǒng)將會具有不同的顏色，從可擴(kuò)展性角度考慮，將顏色作為最后一位。

字體類型實(shí)際上是通過不同顏色來區(qū)分正文、標(biāo)題或者提示，因此將其作為顏色的子級，作為可選項(xiàng)。

同時(shí)為了保證字階、顏色、字體類型的次序與我們預(yù)期設(shè)定的順序保持一致，分別為每個(gè)參數(shù)添加前置序號。

樣式使用

雖然通過 5 個(gè)層級的規(guī)劃有效保證了字體系統(tǒng)的組織，但是 5 個(gè)層級的深度將會使得樣式的選擇非常不便。

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

快捷鍵 ? + ' 打開 Sketch Runner， apply 部分可以直接對選中圖層賦予樣式。

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

溫馨提示：在 Sketch Runner 中將 Always open with 的選項(xiàng)改為 Last ，每次開啟 Runner 將會維持上一次使用的標(biāo)簽。這樣便于多次的樣式修改。

另一方面，在 Sketch 中任意一個(gè)層級的樣式都是可以直接選擇，Sketch 將默認(rèn)采用后續(xù)層級中的第一個(gè)樣式。因此通過重命名把默認(rèn)最常用的「左對齊」、「黑色」與「Primary 類型」的樣式置于頂端。后續(xù)使用時(shí)可直接點(diǎn)擊第一層級的字體樣式。

樣式修改

一個(gè)設(shè)計(jì)系統(tǒng)的難能可貴之處在于它的擴(kuò)展性、修改能力。如果整個(gè)系統(tǒng)沒有辦法很好的響應(yīng)使用者的需求，根據(jù)使用者的需求進(jìn)行自定義，那么隨著時(shí)間的流逝和需求的增多，這個(gè)設(shè)計(jì)系統(tǒng)就會逐漸失去使用價(jià)值。

因此在一個(gè)字體系統(tǒng)中，如何高效的修改字體樣式，將會是一個(gè)非常重要的部分。這里的使用指南，它將賦能設(shè)計(jì)師更高效更輕松地支撐更多的業(yè)務(wù)場景。

字體與顏色

在本字體系統(tǒng)中顏色與字體是最容易修改的部分。需要修改所有的基準(zhǔn)字體，只需要全選「字體接口」畫板中的所有內(nèi)容，修改字體點(diǎn)擊同步樣式即可，字重會保持不變。

顏色修改也是類似，全選對應(yīng)顏色的字體單元，修改顏色，點(diǎn)擊樣式的同步按鈕即可。

注：字體單元指代一組包含完整字階與對齊樣式的字體布局，為下圖藍(lán)色矩形框所示。

字體類型

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

字階、字重

通過「圖層篩選」功能篩選字階或字重。選中后修改對應(yīng)的字階或者字重，點(diǎn)擊同步。要修改幾處，就重復(fù)該操作幾次。或者使用 Automate 插件的 Replace Font 功能。

樣式名稱修改

或許有時(shí)候字體系統(tǒng)樣式的名稱需要根據(jù)業(yè)務(wù)場景進(jìn)行修改，那么這個(gè)時(shí)候可以利用 Sketch Master 插件進(jìn)行批量修改。利用正則表達(dá)式的強(qiáng)大功能，甚至可完全重新設(shè)計(jì)命名層次結(jié)構(gòu)。

例如需要將對齊方式與字重組合到一個(gè)單獨(dú)的級別。將 01 - Body /01 - Regular /01 - Left /01 - Black /xxx 替換成 01 - Body /01 - Regular / Left - Black /xxx。如果手動替換，這肯定會是一個(gè)讓人掉頭發(fā)的事情。

而利用正則表達(dá)式，只需查找 ^(.*?)/(.*?)/(.*?)/\d+\s-\s(.*?)(/.*?)? 替換 $1/$2/$3 - $4$5 即可一鍵實(shí)現(xiàn)。

溫馨提示：正則表達(dá)式的學(xué)習(xí)可以參閱 《正則表達(dá)式入門》 這套教程。

文本內(nèi)容修改

或許有時(shí)候字體系統(tǒng)接口的內(nèi)容需要被批量替換。那么可以使用 Find and Replace 插件、Content Generator 的 Replace text 功能。

添加樣式

如果需要添加新的樣式，例如新的品牌色，請選中一個(gè)字體單元，按住 Alt 拖拽到其他位置進(jìn)行復(fù)制。

溫馨提示：請先組合再進(jìn)行復(fù)制。如不組合，復(fù)制后 Sketch 默認(rèn)會給圖層名稱添加「 Copy」的后綴，需要手動刪除。為了避免「 Copy」后綴，請先組合，再復(fù)制，最后取消組合。

選中字體單元后，修改其字體顏色為想要的顏色。接下來使用 Rename It 插件為圖層重命名，使用 「Find & Replace Layers」功能，查找末尾名稱，替換為想要修改的名稱。

溫馨提示：圖層的名稱將在下一步直接變成樣式的名稱。為了保持字體系統(tǒng)的名稱一致性，建議使用 「數(shù)字 - 屬性」的方式命名。同時(shí)便于 Sketch Runner 查找，建議使用英文，例如「07 - Decoration」。

如果希望利用正則表達(dá)式來替換圖層名稱，請使用 LayerRenamer 插件。

最后，選中修改完畢的字體單元，利用 Style Generator 插件快速生成字體的樣式。

溫馨提示：Sketch Style Generator 插件將基于圖層名稱自動生成共享樣式。

而字階與字重因布局限制，暫時(shí)沒有更加高效的方法來批量添加字體，需要手動修改字體單元，從而進(jìn)行添加。

樣式的共享

通過 Shared Text Style 插件可以將字體樣式一鍵導(dǎo)出為 json 文件。

通過導(dǎo)入 Json 文件即可實(shí)現(xiàn)樣式的導(dǎo)入。

以上便是整個(gè)字體系統(tǒng)的搭建與維護(hù)指南，附上我制作的 sketch 文檔：https://pan.baidu.com/s/1smfeuPR 密碼：3ygg

最后來一張全家福吧。

歡迎關(guān)注作者的微信公眾號：arvindesign

「值得收藏的字體神器」

• 《設(shè)計(jì)神器Fontlab！讓手殘黨也能自己DIY字體》
• 《神器兩連發(fā)！快速生成文字云效果+預(yù)覽字體運(yùn)用效果的網(wǎng)站》
• 《神器兩連發(fā)！無腦建站神器+快速選字體的IDEO地圖》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備： http://hao.uisdc.com