平時大家在用 Sketch 做設計時,伴隨著專案的開展,會產生很多的字型樣式,堆積到最後難以管理。但 Sketch 的開發者早就料到這個問題,並給出 shared text 作為解決機制。本篇教程將手把手帶大家制作一個簡單的字型樣式庫。
閱讀資訊:
閱讀時間:約8分鐘
流量預估:28MB
操作時間:約40分鐘
相關下載:軟體下載 | 學習資料
相關教程:Library | 換色文字 symbol | Symbol 巢狀
效果預覽
第一步,設計字型樣式庫
:
首先需要明確你的目的,為專案尋找合適的字型,比如你是要做宣傳海報,還是要做網頁。明確你的目標使用者,比如你是面向兒童,還是新潮的青年,亦或者白領。
然後需要設計一系列合適的字號,這裡推薦給大家一個神器 Modular Scale。在這裡大家可以選擇合適的比例與基底,然後生成一系列字號。
很多產品都有自己的字型樣式規範,放幾個 給大家做參考:
Typography - Style
Human Interface Guidelines
Clarity Design
如果想更深入的瞭解設計字型樣式庫的方法,可以參考《成也排版敗也排版:一個選擇的過程》。
第二步,製作字型
樣式庫:
首先,根據第一步裡設計好的字型樣式庫,把不同的字號羅列出來,並將內容更改為該字號的用途。
然後將這些字號打包成組,複製成為三列,並設定好三種對齊方式。
tip
:這裡可以選中分組後,在右操作板勾選「Select group’s content on click」,即可像筆者一樣直接在畫板上框選物件。
最後我們設定幾個常用的文字色值,整個字型樣式庫就製作完畢了。
第三步,對字型樣式進
行命名:
因為筆者在做設計時,常根據用途來規定字號,然後設定色值,而對齊並沒有那麼重要,因此確定格式為「用途/色值/對齊」。
tip
:「/」在 Sketch 中可以用來自動分組。
我們需要裝一個外掛:Update Text Layer Name,用這個外掛可以讓文字圖層的圖層名稱和內容一致。
tip
:可以透過 Sketch 外掛 Runner 中的 install 安裝,也可以在官網的外掛庫裡尋找該外掛進行安裝。
使用上面安裝的外掛完成命名格式裡的「用途」命名。
tip
:在命名「用途」的時候,建議在前面加上英文小寫字母序號,這樣在顯示的時候就會按順序排列。
然後,我們需要安裝第二個外掛:Rename It,用這個外掛給文字圖層進行進一步命名處理。
按照圖中操作,並補齊圖中省去的重複操作部分,完成命名格式裡的「色值」和「對齊」。
當然,第三步和第二步可以穿插進行,但是這樣比較繞腦子,不方便製作教程。理解了原理的同學可以邊製作樣式庫邊命名,提升效率。
tip
:在命名「色值」的時候建議在前面新增“◼︎“,Sketch 在顯示共享文字樣式時可以預覽顏色,新增這個實心方塊可以方便使用者快速識別顏色。
第四步,錄入字
體樣式:
打掃乾淨屋子再請客。
在錄入我們整理好的字型樣式前,先把原來檔案中亂七八糟的共享字型樣式清空。
這裡我們需要安裝第三個外掛:Styles Generator,這個外掛可以將你選擇的所有文字樣式按每個樣式生成共享樣式。而在 Sketch 中選擇所有圖層後使用生成共享樣式功能,只會生成一個樣式。
如圖所示,使用外掛錄入製作好的共享文字樣式。這樣我們就大功告成了。
第五步,和團隊共享字
體樣式:
親測 library 無效,只好採用一個稍微笨拙的方式,首先儲存為 template 檔案。
找到系統中 Sketch 存放 Template 檔案的地址。
團隊共享一個堅果雲賬號,並將 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
感謝閱讀