摹客設(shè)計(jì)系統(tǒng)Mockplus DS

Mockplus DS插件是一款為sketch用戶們提供的設(shè)計(jì)規(guī)范制定插件，這款插件可以讓設(shè)計(jì)師和開發(fā)之間的溝通更加簡單。Mockplus DS插件可以完成品牌和設(shè)計(jì)規(guī)范的管理、設(shè)計(jì)素材以及組件的管理，并保證在應(yīng)用上滿足一致性的要求。

功能特色：

資源

在云端管理你的所有設(shè)計(jì)資源，包括顏色、Logo、圖標(biāo)、文字、組件、度量元素、陰影等。你可以建立多個庫、分類和子分類來進(jìn)行管理。

設(shè)計(jì)

團(tuán)隊(duì)中的成員均可分享設(shè)計(jì)資源并遵守設(shè)計(jì)規(guī)范。可以在Mockplus和Sketch中，將設(shè)計(jì)元素上傳到設(shè)計(jì)系統(tǒng)形成規(guī)范，同時，也可將庫中的設(shè)計(jì)資源快速應(yīng)用到Mockplus和Sketch的設(shè)計(jì)中，并自動同步更新。

分享

一鍵分享設(shè)計(jì)規(guī)范給伙伴兒。
可以導(dǎo)出CSS、SCSS、LESS，應(yīng)用到前端開發(fā)。還可以自動導(dǎo)出各類版式的設(shè)計(jì)規(guī)范圖（UI Style Guide）。

使用說明：

編輯設(shè)計(jì)資源

在摹客設(shè)計(jì)系統(tǒng)中，進(jìn)入到設(shè)計(jì)資源編輯狀態(tài)，便可以對資源庫內(nèi)所有的設(shè)計(jì)資源進(jìn)行修改添加。

進(jìn)入編輯狀態(tài)

登錄設(shè)計(jì)系統(tǒng)后，打開已有的資源庫，將頂部編輯狀態(tài)開關(guān)設(shè)置為“ON”狀態(tài)，進(jìn)入設(shè)計(jì)系統(tǒng)資源編輯狀態(tài)。

內(nèi)容修改導(dǎo)航

通過左側(cè)導(dǎo)航欄選擇要修改或添加新的二級設(shè)計(jì)資源分類；也可以通過滾動右側(cè)頁面定位到要修改的設(shè)計(jì)資源處進(jìn)行編輯操作。

通用的設(shè)計(jì)資源編輯方法

單擊文本編輯修改文本內(nèi)容，通過左上角的九宮格按鈕可對資源進(jìn)行橫向與縱向的拖拽排序。點(diǎn)擊在設(shè)計(jì)資源末尾的加號便可在該分類下新建資源。點(diǎn)擊分類末尾的加號便可新建一個全新的二級資源分類。設(shè)計(jì)資源分類只能修改二級分類，不可修改一級分類以及添加三級分類。

標(biāo)準(zhǔn)字編輯

標(biāo)準(zhǔn)字可修改內(nèi)容有資源名稱、資源描述、字體、字重、字號、背景色、文字顏色、行高、對齊方式、下劃線、預(yù)覽文本、css名稱。需要注意的是，為保證設(shè)計(jì)系統(tǒng)的統(tǒng)一性，字體選擇只能在字體分類里添加的字體中選擇，如果你在下拉列表沒有發(fā)現(xiàn)想要的字體，請先通過字體分類添加字體。

度量編輯

度量分為弧度、尺寸、間距，此處以間距編輯為例�？删庉媰�(nèi)容為資源名稱、資源描述、數(shù)值、單位。其中度量的數(shù)值需要大于等于零。添加的尺寸資源將會運(yùn)用到陰影編輯中。

陰影編輯

陰影可編輯內(nèi)容有陰影名稱、陰影描述、X與Y的偏移值、顏色、模糊值、擴(kuò)展值、陰影位置、陰影數(shù)量。陰影數(shù)量是指陰影可通過多個陰影疊加形成最終陰影效果。需要注意的是，為保證設(shè)計(jì)系統(tǒng)的統(tǒng)一性，陰影參數(shù)的數(shù)值大小需要在度量 > 尺寸中先行設(shè)置才會出現(xiàn)在下拉列表中。

資源庫和資源分類

在摹客設(shè)計(jì)系統(tǒng)中，我們可以快速創(chuàng)建資源庫。資源庫中包含Logo、標(biāo)準(zhǔn)色、字體、標(biāo)準(zhǔn)字、圖標(biāo)、組件、圖片、度量及陰影九大設(shè)計(jì)資源。

新建資源庫

登錄設(shè)計(jì)系統(tǒng)后，點(diǎn)擊界面上的“+”號，即可創(chuàng)建資源庫。在新建資源庫界面可選擇創(chuàng)建“空白庫”和“示例庫”兩種。

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

示例庫：資源庫里面已內(nèi)置部分資源，可修改、添加或上傳。

資源分類

Logo

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

標(biāo)準(zhǔn)色

企業(yè)為了塑造自己獨(dú)特的品牌形象，通常會確定一種主色調(diào)并維護(hù)一套色彩體系。在制作原型及效果圖時，直接運(yùn)用到文字、邊框或背景色上，簡單方便。

字體

標(biāo)準(zhǔn)字體是企業(yè)形象識別系統(tǒng)中的基本要素之一。在設(shè)計(jì)系統(tǒng)里，可根據(jù)企業(yè)或品牌的個性制定專屬于自己的字體。在設(shè)計(jì)的時候，選中字體后再點(diǎn)擊制定的字體，就可以輕松應(yīng)用此樣式。

標(biāo)準(zhǔn)字

在不同場景下（如正文文字、菜單文字、提示文字等）的文字顏色和大小是不一樣的。在設(shè)計(jì)系統(tǒng)中，我們可以先制定好不同場景下的標(biāo)準(zhǔn)字，然后在設(shè)計(jì)過程中直接使用對應(yīng)場景下的字體樣式。

圖標(biāo)

在軟件系統(tǒng)開發(fā)中，需要用到各式各樣的圖標(biāo)。在設(shè)計(jì)系統(tǒng)的圖標(biāo)類別中，支持從外部導(dǎo)入SVG及PNG兩種格式的圖標(biāo)素材。

組件

設(shè)計(jì)系統(tǒng)對接了Mockplus和Sketch兩種設(shè)計(jì)工具，可以將工具中制作好的復(fù)合組件上傳到設(shè)計(jì)系統(tǒng)，之后還可以在Mockplus和Sketch中修改并同步更新這些組件。同時，支持從外部導(dǎo)入PNG, JPEG, JPG, SVG及GIF格式的組件。

圖片

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

度量

度量資源主要用于標(biāo)定軟件中的尺寸、間距等數(shù)值類規(guī)范。該類別下包含四個子分類（圓角值、內(nèi)容寬度、間距規(guī)范和陰影大�。�。

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

陰影

設(shè)計(jì)系統(tǒng)中支持定制陰影效果，主要通過設(shè)置X、Y、模糊、擴(kuò)展等數(shù)值，調(diào)試出相應(yīng)的陰影效果。

制定好相關(guān)設(shè)計(jì)規(guī)范后，可分享給其他伙伴或?qū)С鲆?guī)范圖。此外，還可以將Logo、標(biāo)準(zhǔn)字、標(biāo)準(zhǔn)色、圖標(biāo)、圖片、組件六種設(shè)計(jì)資源直接應(yīng)用到Mockplus和Sketch中。