摹客設計系統教程：資源庫和資源分類

來自專欄摹客產品設計專欄8 人贊了文章

摹客設計系統中，我們可以快速創建資源庫。資源庫中包含Logo、標準色、字體、標準字、圖標、組件、圖片、度量及陰影九大設計資源。

新建資源庫

登錄設計系統後，點擊界面上的「+」號，即可創建資源庫。在新建資源庫界面可選擇創建「空白庫」和「示例庫」兩種。

空白庫：資源庫裡面沒有任何資源，自己可添加或上傳。

示例庫：資源庫裡面已內置部分資源，自己可修改、添加或上傳。

資源分類

Logo

Logo代表著企業形象，在不同場景，我們可能會使用不同的Logo。在此分類下，我們可以添加不同場景的Logo。在設計過程中，可直接拖出使用。

標準色

企業為了塑造自己獨特的品牌形象，通常會確定一種主色調並維護一套色彩體系。在製作原型及效果圖時，直接運用到文字、邊框或背景色上，簡單方便。

字體

標準字體是企業形象識別系統中的基本要素之一。在設計系統里，可根據企業或品牌的個性制定專屬於自己的字體。在設計的時候，選中字體後再點擊制定的字體，就可以輕鬆應用此樣式。

標準字

在不同場景下（如正文文字、菜單文字、提示文字等）的文字顏色和大小是不一樣的。在設計系統中，我們可以先制定好不同場景下的標準字，然後在設計過程中直接使用對應場景下的字體樣式。

圖標

在軟體系統開發中，需要用到各式各樣的圖標。在設計系統的圖標類別中，支持從外部導入SVG及PNG兩種格式的圖標素材。

組件

設計系統對接了Mockplus和Sketch兩種設計工具，可以將工具中製作好的複合組件上傳到設計系統，之後還可以在Mockplus和Sketch中修改並同步更新這些組件。同時，支持從外部導入PNG, JPEG, JPG, SVG及GIF格式的組件。

圖片

通常情況下，軟體中的背景圖、banner、封面圖等可以作為圖片資源上傳到設計系統。目前支持PNG, JPEG, JPG, SVG及GIF格式的圖片。

度量

度量資源主要用於標定軟體中的尺寸、間距等數值類規範。該類別下包含四個子分類（圓角值、內容寬度、間距規範和陰影大小）。

說明：在陰影資源中需引用度量數值，請先制定好度量資源後再編輯陰影資源。

陰影

設計系統中支持定製陰影效果，主要通過設置X、Y、模糊、擴展等數值，調試出相應的陰影效果。

制定好相關設計規範後，可分享給其他夥伴或導出規範圖。此外，還可以將Logo、標準字、標準色、圖標、圖片、組件六種設計資源直接應用到Mockplus和Sketch中。

相關閱讀

最佳設計規範20例

獨家設計系統發布——摹客，定製你的設計規範！

關於設計規範，你不可不知的三件事

[設計]GUI設計規範的規範

5分鐘玩轉摹客設計系統

在Mockplus和Sketch中對接設計系統

分享和導出

資源庫和資源分類

開發和設計溝通有多難？ - 你只差一個設計規範

推薦閱讀：