平時大家在用 Sketch 做設計時,伴隨著專案的開展,會產生很多的字型樣式,堆積到最後難以管理。但 Sketch 的開發者早就料到這個問題,並給出 shared text 作為解決機制。本篇教程將手把手帶大家制作一個簡單的字型樣式庫。

閱讀資訊:

閱讀時間:約8分鐘

流量預估:28MB

操作時間:約40分鐘

相關下載:軟體下載 | 學習資料

相關教程:Library | 換色文字 symbol | Symbol 巢狀

效果預覽

「技法」五步學會用 Sketch 的功能 shared text 搭建字型樣式庫

第一步,設計字型樣式庫

「技法」五步學會用 Sketch 的功能 shared text 搭建字型樣式庫

首先需要明確你的目的,為專案尋找合適的字型,比如你是要做宣傳海報,還是要做網頁。明確你的目標使用者,比如你是面向兒童,還是新潮的青年,亦或者白領。

「技法」五步學會用 Sketch 的功能 shared text 搭建字型樣式庫

然後需要設計一系列合適的字號,這裡推薦給大家一個神器 Modular Scale。在這裡大家可以選擇合適的比例與基底,然後生成一系列字號。

很多產品都有自己的字型樣式規範,放幾個 給大家做參考:

Typography - Style

Human Interface Guidelines

Clarity Design

如果想更深入的瞭解設計字型樣式庫的方法,可以參考《成也排版敗也排版:一個選擇的過程》。

第二步,製作字型

樣式庫:

「技法」五步學會用 Sketch 的功能 shared text 搭建字型樣式庫

首先,根據第一步裡設計好的字型樣式庫,把不同的字號羅列出來,並將內容更改為該字號的用途。

「技法」五步學會用 Sketch 的功能 shared text 搭建字型樣式庫

然後將這些字號打包成組,複製成為三列,並設定好三種對齊方式。

tip

:這裡可以選中分組後,在右操作板勾選「Select group’s content on click」,即可像筆者一樣直接在畫板上框選物件。

「技法」五步學會用 Sketch 的功能 shared text 搭建字型樣式庫

最後我們設定幾個常用的文字色值,整個字型樣式庫就製作完畢了。

第三步,對字型樣式進

行命名:

因為筆者在做設計時,常根據用途來規定字號,然後設定色值,而對齊並沒有那麼重要,因此確定格式為「用途/色值/對齊」。

tip

:「/」在 Sketch 中可以用來自動分組。

「技法」五步學會用 Sketch 的功能 shared text 搭建字型樣式庫

我們需要裝一個外掛:Update Text Layer Name,用這個外掛可以讓文字圖層的圖層名稱和內容一致。

tip

:可以透過 Sketch 外掛 Runner 中的 install 安裝,也可以在官網的外掛庫裡尋找該外掛進行安裝。

「技法」五步學會用 Sketch 的功能 shared text 搭建字型樣式庫

使用上面安裝的外掛完成命名格式裡的「用途」命名。

tip

:在命名「用途」的時候,建議在前面加上英文小寫字母序號,這樣在顯示的時候就會按順序排列。

「技法」五步學會用 Sketch 的功能 shared text 搭建字型樣式庫

然後,我們需要安裝第二個外掛:Rename It,用這個外掛給文字圖層進行進一步命名處理。

「技法」五步學會用 Sketch 的功能 shared text 搭建字型樣式庫

按照圖中操作,並補齊圖中省去的重複操作部分,完成命名格式裡的「色值」和「對齊」。

當然,第三步和第二步可以穿插進行,但是這樣比較繞腦子,不方便製作教程。理解了原理的同學可以邊製作樣式庫邊命名,提升效率。

tip

:在命名「色值」的時候建議在前面新增“◼︎“,Sketch 在顯示共享文字樣式時可以預覽顏色,新增這個實心方塊可以方便使用者快速識別顏色。

第四步,錄入字

體樣式:

「技法」五步學會用 Sketch 的功能 shared text 搭建字型樣式庫

打掃乾淨屋子再請客。

在錄入我們整理好的字型樣式前,先把原來檔案中亂七八糟的共享字型樣式清空。

「技法」五步學會用 Sketch 的功能 shared text 搭建字型樣式庫

這裡我們需要安裝第三個外掛:Styles Generator,這個外掛可以將你選擇的所有文字樣式按每個樣式生成共享樣式。而在 Sketch 中選擇所有圖層後使用生成共享樣式功能,只會生成一個樣式。

「技法」五步學會用 Sketch 的功能 shared text 搭建字型樣式庫

如圖所示,使用外掛錄入製作好的共享文字樣式。這樣我們就大功告成了。

第五步,和團隊共享字

體樣式:

「技法」五步學會用 Sketch 的功能 shared text 搭建字型樣式庫

親測 library 無效,只好採用一個稍微笨拙的方式,首先儲存為 template 檔案。

「技法」五步學會用 Sketch 的功能 shared text 搭建字型樣式庫

找到系統中 Sketch 存放 Template 檔案的地址。

「技法」五步學會用 Sketch 的功能 shared text 搭建字型樣式庫

團隊共享一個堅果雲賬號,並將 Template 檔案同步到雲端。然後各自同步到自己電腦中 Sketch 存放 Template 檔案的地址。

這樣做團隊共享的缺點是一旦文字樣式庫有變動,組員的 Sketch 無法實時得到更新,必須從 template 新建檔案,並剪下字型樣式庫進自己的檔案覆蓋替換。

製作一個共享字型樣式庫,有助於規範團隊的設計輸出,也能提升設計師個人的輸出效率。筆者在教程開始時給的教學資料中有一個完整的共享字型樣式庫,需要安裝壓縮包中的字型才能使用。在我給出的樣式庫裡,預留了幾欄自定義色值的空位,並添加了說明。有耐心的同學可以開啟來慢慢琢磨。

其他文章

外掛:CRAFT | Sketch Material | WeSketch | Runner | Paddy | Diya

技法:Library | Colored Text | Symbol | Shared Text | Resizing | 流程圖 | 文件 | 表格

工具:InVison Studio | Nucleo | Feedly

案例:Swarm | YouTube | Uber | Oscar | Atlassian | Adobe | Adobe

感謝閱讀