這是一種簡單快速的制定規(guī)格的方法，已在公司內(nèi)部實(shí)施并且非?？尚小＿m合中小型團(tuán)隊(duì)。

與材料設(shè)計(jì)/ANT設(shè)計(jì)等良好的設(shè)計(jì)規(guī)范一樣。

這里主要是關(guān)于如何快速創(chuàng)建設(shè)計(jì)規(guī)范。附件與項(xiàng)目文件和草圖插件。規(guī)范中使用的材料不是工作設(shè)計(jì)界面，但不影響內(nèi)容。這里沒有詳細(xì)描述設(shè)計(jì)規(guī)范的好處。

分析過去的痛點(diǎn)

摘要：規(guī)范的實(shí)現(xiàn)困難，效果低得多，通信成本增加，初衷偏離。

問題場(chǎng)景

一家公司擁有30名設(shè)計(jì)師，4名前端開發(fā)團(tuán)隊(duì)和PDF規(guī)范。有趣的是，設(shè)計(jì)師的設(shè)計(jì)草圖高度，字體大小和顏色使用有很多個(gè)人習(xí)慣。有時(shí)你可以重復(fù)現(xiàn)有的控件。然后開發(fā)爸爸，同樣可重復(fù)使用的導(dǎo)航欄，側(cè)邊欄等，已經(jīng)反復(fù)編寫代碼。在小型團(tuán)隊(duì)之間，他們有自己的控制庫，可以在UI被接受時(shí)解決，但這會(huì)增加成本。

我們可以減少這些問題嗎？有了這些問題，我也會(huì)探索一些經(jīng)驗(yàn)。這是我真正想要分享的內(nèi)容。

首先確保團(tuán)隊(duì)已經(jīng)在使用Sketch。為何使用Sketch？在這個(gè)問題上，主要原因是效率高。

先出設(shè)計(jì)草案是否首先超出規(guī)范？

我的大多數(shù)朋友都很困惑，我很困惑。但是，你還沒有設(shè)計(jì)它。你怎么知道你真正想要的顏色？我在這里推薦的是一些設(shè)計(jì)草案出來然后做規(guī)范，然后慢慢改進(jìn)。

您說如果公司已經(jīng)標(biāo)準(zhǔn)化，可以做什么，那么規(guī)范可以以不同的方式呈現(xiàn)。

規(guī)格生產(chǎn)

這主要基于iOS設(shè)計(jì)草案。說到Android，如果你想要精確，你需要2個(gè)設(shè)計(jì)草案和2個(gè)設(shè)計(jì)規(guī)范。

這是Sketch制作的設(shè)計(jì)稿。我只是做一個(gè)設(shè)置。

視覺規(guī)范

顏色：界面顏色/背景顏色/文字顏色/線條顏色

字體大?。簶?biāo)題詞/文本/輔助詞

行高

間距

關(guān)于小伙伴有疑問，上面的C1/C2代碼是什么意思？

此代碼主要是為了方便前端開發(fā)人員構(gòu)建UI庫。例如，我們的設(shè)計(jì)草圖的間距為20px，開發(fā)時(shí)可能是20px，它計(jì)算的單位不在一個(gè)通道中。如果J2代碼用于表示間距值，那么無論單位是什么，至少間距大小是一致的。當(dāng)開發(fā)詢問設(shè)計(jì)師某處有多少空間時(shí)，你可以告訴他它是J2，然后開發(fā)就會(huì)知道，哦，20dp。

互動(dòng)風(fēng)格

點(diǎn)擊表現(xiàn)

組件庫

元素圖層：按鈕

組件層：可以直接重用

例如，我們已經(jīng)完成了規(guī)范的設(shè)計(jì)，如何使用它？

需要分為2個(gè)方向，一個(gè)是UI，另一個(gè)是前端。

使用設(shè)計(jì)師規(guī)范

您可以直接在草圖上復(fù)制樣式，也可以直接復(fù)制Command C + V.您還可以調(diào)用其他同事的畫板并將其導(dǎo)入您自己的機(jī)器中。

插件名稱稱為草圖調(diào)色板。它可以在線搜索，可以下載。

前端開發(fā)規(guī)范用法

如果他們沒有草圖，他們可以使用插件Marketch導(dǎo)出html格式。

導(dǎo)出后，使用瀏覽器打開index.html。

這個(gè)演示文稿比PDF文件好嗎？左側(cè)是類別，右側(cè)是相關(guān)屬性。您也可以直接下載一些圖標(biāo)。

當(dāng)設(shè)計(jì)規(guī)范建立時(shí)，開發(fā)人員還構(gòu)建了自己的UI庫，然后繼續(xù)推進(jìn)沒有統(tǒng)一風(fēng)格的小尾巴。

如果您想稍后迭代設(shè)計(jì)草稿該怎么辦？

只是做一個(gè)類似的文檔。有很多方法，我相信每個(gè)人都可以解決它。

« 什么樣的內(nèi)容可以在網(wǎng)站營銷中快速傳播 | 拍賣干貨|案例分析搜索詞要求和高級(jí)應(yīng)用技能 »