如何創建草圖樣式指南、庫和 UI 工具包

每個設計項目都可以從深思熟慮的風格指南中受益。 使用本教程構建 UI 工具包並同時創建自定義（和可重用）庫以進行快速原型設計。

無論是 Sketch 專家還是 Sketch 新手，設計師都會發現在 Sketch 中創建樣式指南可以成為他們設計工具箱的寶貴資源，可以節省大量時間。

樣式指南不僅有助於保持事物的一致性，而且還允許在多個文檔中更新顏色和圖標等元素，從而減少麻煩。 本教程逐步介紹了創建樣式指南和 UI 工具包的過程，並將讓設計師更好地理解 Sketch 符號，為他們的設計引用 Sketch 庫，並對其設計資產的組織充滿信心。

創建草圖樣式指南

“樣式指南是一個全面的'活文檔'，它跟踪項目的所有重複元素，從品牌規則到號召性用語按鈕的斜角量，”根據 UXPin 的說法。 風格指南可以包括從簡單的視覺元素到詞彙和認可的圖像的任何內容。 本教程涵蓋組織、顏色、圖標、字體、文本樣式和資產。

第一步：組織

1. 創建一個主文件夾來保存草圖文件、插件和其他必要的資產，如字體和圖標。 （插件將在教程結束時討論。）
2. 啟動一個新的 Sketch 文件並將其命名為“ Clientname Library”。 例如，如果您的客戶是 Toptal，那麼您的文件應命名為“Toptal Library”。

第二步：顏色

如果已經選擇了顏色，下一步就是將顏色轉換為符號。

1. 為此，請製作相同大小的正方形並相應地更改其顏色。 單擊“創建符號”並使用顏色/ @color-name標籤系統保存這些元素。 Color/@pink 、 color/@background-gray或color/@FFFFF是正確標籤的示例。 命名約定對於保持樣式指南井井有條很重要，因此應從一開始就建立並遵守所有內容的格式。
2. 完成後，將它們添加到樣式指南頁面。
3. 將色板保存在調色板的文檔部分。

有用的快捷鍵：R - 矩形工具，T - 文本工具，alt - 測量距離。

第三步：圖標

將圖標變成動態符號可以輕鬆地將它們的顏色更改為上面第二步中保存的任何顏色。 這意味著在將圖標放入設計後，可以使用畫布右側的“檢查器”通過一個稱為“覆蓋”的簡單下拉菜單更改顏色。

1. 將圖標另存為符號（如果可能，請使用 .svg 作為資產類型）。
2. 進入符號頁面，找到圖標，並使用先前保存的顏色中的默認顏色對其進行遮罩。 為此，將顏色符號覆蓋在圖標頂部，然後單擊工具欄中的“蒙版”（或右鍵單擊並從彈出菜單中選擇“蒙版”）。
3. 圖標被屏蔽後，通過取消選中檢查器中“填充”部分下的複選框來移除填充。
4. 組織樣式指南頁面中的圖標。 在同一部分中，指定活動和非活動圖標的顏色以及任何其他重要的顏色規範很有幫助。

第四步：文本樣式

一旦選擇了字體，就該指定文本樣式了：H1、H2、H3、H4、H5、正文、鏈接、標題、標籤等。關於網頁排版的一個很好的參考是 Typecast 的這篇博文。

1. 根據需要為盡可能多的樣式選擇大小、粗細、字符和行距。
2. 寫出一個單詞（當你按下 T，文本工具時，“Type Something”會自動出現）並格式化它以反映所選的樣式細節。
3. 單擊“創建新的文本樣式”。
4. 在樣式指南頁面中組織文本樣式。

第五步：資產

現在是有趣的部分。 是時候結合前面的所有步驟來創建一些資產了。 如果資產已經創建，為了保持一致性，最好使用您已經選擇的文本樣式、圖標和顏色重新創建它們。 例如，工作設計文檔中可能有許多不同顏色的灰色，而設計沒有考慮到，因此重新創建資產將保證所選顏色的一致性。 不要忘記保持命名一致，並確保在創建資產時將其添加到樣式指南頁面中。

以下是一些建議的資產：

鈕扣

1. 製作這些動態符號，就像圖標一樣，用默認顏色屏蔽按鈕並移除填充。
2. 要始終保持文本居中，請將文本框的寬度跨越到與按鈕相同的寬度並將文本居中。
3. 為確保一致性，請務必使用保存的文本樣式。
4. 使用按鈕/按鈕名稱命名系統將這些元素保存為符號。
5. 使用覆蓋功能更改標籤和顏色。

搜索欄

1. 將調整大小約束應用於搜索字段，以及字段本身中使用的圖標和文本。
2. 不要忘記應用以前保存在文檔調色板中的文本樣式和顏色。
3. 將此元素保存為符號，使用search作為標題，或者如果您有不同類型的搜索，請遵守標籤系統，例如search/standard和search/no-icon 。

單選按鈕和復選框

1. 符號中可能有符號，測試它的一個好方法是創建智能單選按鈕和復選框資產。
2. 首先，製作按鈕資產本身。 使用checkbox/selected和checkbox/deselected作為示例標籤將此元素保存為符號。
3. 現在創建輸入。 在復選框符號旁邊添加佔位符文本，然後將整個資產轉換為符號。 由於現在這是一個輸入，因此建議將資產保存為這樣，因此一個好的標籤應該是input/checkbox/selected和input/checkbox/deselected 。

第六步：使用風格指南！

完成所有這些工作以創建樣式指南只有在它實際上使項目運行更順利時才有用。 創建完所有資產後，就可以將庫應用於正在設計的文​​檔了。 在 Sketch 中，轉到“首選項 -> 添加庫...”並添加庫文檔。

將庫添加到項目設計文件後，您可以在符號部分訪問庫及其符號。 您會注意到作為庫選項隨 Sketch 一起提供的 iOS UI 設計庫，以及最近導入的庫。

如果要更新符號，雙擊符號本身，您的庫文檔就會出現。 完成更改後，返回設計文檔並單擊右上角的更新按鈕。

獎勵：導入/導出文本樣式

文本樣式不會與庫一起保存，但 Sketch 的共享文本樣式插件解決了這個問題。 下載插件後，轉到庫文檔，然後進入菜單：“插件 -> 共享文本樣式 -> 導出...” 將此文件保存在與庫文檔相同的文件夾中。 然後，在您的設計文檔中再次進入菜單：“插件 -> 共享文本樣式 -> 導入文本樣式...”並導入剛剛保存的文件。 您的文本樣式將出現。

獎勵：導入/導出調色板

與文本樣式類似，文檔顏色不會通過 Sketch 庫保存，但 Sketch Palettes 插件解決了這個問題。 與上面大致相同，使用“插件 -> 草圖調色板 -> 文檔顏色 -> 保存調色板”導出調色板，然後使用“插件 -> 草圖調色板 -> 文檔顏色 -> 加載調色板”將其導入。 請記住將其保存在與其他庫文檔相同的文件夾中。

獎勵：字體

InVision 的 Craft 是一套插件，可將 Sketch 軟件提升到一個新的水平。 Craft 允許您用庫存照片替換圖像、原型和同步到 InVision、創建庫等。 如果下載了 Craft，在文檔中點擊“cmd-shift-c”，就會生成一個樣式表。 字體將在此處列出。

遵循上面概述的六個步驟將使大型和小型設計項目運行得更加順暢，最終結果將更加完美。 如果它們是獨特的或非常具體的，則樣式指南、庫和 UI 工具包可以用於一個客戶，或者如果標準 UI 元素不斷創建，例如線框和原型，則可以用於許多項目。 在開始時花時間正確創建這些 Sketch UI 組件將節省大量時間，並可能在許多項目中節省時間。

進一步閱讀 Toptal 設計博客：

• 為什麼初創公司需要風格指南
• 關於 Sketch 中的排版你可能不知道的事情
• 50 個最佳 Sketch 插件的終極清單
• Adobe XD 與 Sketch - 哪個 UX 工具適合您？
• 如何構建一個有效的設計框架（包括一個免費的 Sketch UI 框架）