之前寫了一些關(guān)于APP原型文檔的文章：一款A(yù)PP的交互文檔從撰寫到交付

這次想寫下關(guān)于APP設(shè)計(jì)規(guī)范文檔的內(nèi)容，規(guī)范文檔這個(gè)東西，實(shí)際上大部分中小型公司沒有這方面的需求,也沒精力去制作這樣一個(gè)系統(tǒng)性的東西，所以文章篇幅不長。

但設(shè)計(jì)規(guī)范本身是個(gè)非常有助于保持產(chǎn)品品牌統(tǒng)一的好東西。

幾年以前寫設(shè)計(jì)規(guī)范文檔，都是一頁頁的手寫設(shè)計(jì)規(guī)范，效率低下，主要還是累~

最近又開始為新的產(chǎn)品項(xiàng)目撰寫設(shè)計(jì)規(guī)范了，時(shí)代進(jìn)步，生產(chǎn)技術(shù)也要進(jìn)步嘛~

于是我發(fā)現(xiàn)了個(gè)非常高效的設(shè)計(jì)規(guī)范制作工具：Mockplus摩客的設(shè)計(jì)系統(tǒng)。

它本身是個(gè)原型設(shè)計(jì)工具，在這個(gè)移動(dòng)互聯(lián)網(wǎng)的時(shí)代，做交互設(shè)計(jì)或者PM的朋友應(yīng)該經(jīng)常使用或者知道Mockplus。

但今天不談它的原型設(shè)計(jì)，去官網(wǎng)下載客戶端，10分鐘就上手，零門檻的原型工具。

主要想說的還是用它制作設(shè)計(jì)規(guī)范，首先它是個(gè)線上的制作系統(tǒng)；

為什么選擇用Mockplus的設(shè)計(jì)系統(tǒng)來制作設(shè)計(jì)規(guī)范呢？原因有二：

①系統(tǒng)本身提供了設(shè)計(jì)規(guī)范的大綱。

比如標(biāo)準(zhǔn)色、標(biāo)準(zhǔn)字、圖標(biāo)、布局等等這類大綱，幾乎囊括了一份設(shè)計(jì)規(guī)范文檔該有的所有內(nèi)容。

你只需要在對(duì)應(yīng)的標(biāo)簽下，自定義添加對(duì)應(yīng)的內(nèi)容就可以了；

因?yàn)槭蔷€上工具，制作完成后還可以分享鏈接或者直接導(dǎo)出PDF文件，便捷性和流通性比較高；

②有對(duì)應(yīng)的Sketch插件，可以在Sketch里直接調(diào)用自己創(chuàng)建的設(shè)計(jì)規(guī)范資源庫。

也就是說，你制作完設(shè)計(jì)規(guī)范后，下載Sketch插件；在Sketch里做設(shè)計(jì)的時(shí)候，就可以直接使用設(shè)計(jì)規(guī)范的資源庫，對(duì)應(yīng)的標(biāo)注色，標(biāo)準(zhǔn)字等等都可以在Sketch里一鍵使用。

這也是我比較看重的一點(diǎn)，設(shè)計(jì)規(guī)范是拿來用的，不是說我整理完了就放在這里讓人看了，這個(gè)功能是我最喜歡的一點(diǎn)。

上述兩點(diǎn)后文都會(huì)提到，這里只是先說下選擇它的原因。

當(dāng)然了，之前寫的文章也多次強(qiáng)調(diào)過：

工具只是提高效率的手段，重心還是設(shè)計(jì)的思想，所以別被工具束縛了自己。

那我們首先談?wù)勔恍└拍钚缘臇|西吧~

Part 1  設(shè)計(jì)規(guī)范的概況

設(shè)計(jì)規(guī)范文檔是個(gè)什么東西呢？

最簡單的理解就是，對(duì)產(chǎn)品的設(shè)計(jì)和體驗(yàn)進(jìn)行一個(gè)系統(tǒng)性整理和約定。

包括產(chǎn)品中使用的顏色，字體字號(hào)，各類控件樣式，布局樣式等等，都整理成一份可流通的文檔，這份文檔對(duì)之后的產(chǎn)品更新迭代起指導(dǎo)作用。

(下圖來自京東無線視覺規(guī)范，侵刪)

①設(shè)計(jì)規(guī)范的撰寫時(shí)間

先說說這個(gè)設(shè)計(jì)規(guī)范應(yīng)該什么時(shí)候開始寫呢

設(shè)計(jì)規(guī)范，一定是產(chǎn)品發(fā)展到了一定階段，才會(huì)開始撰寫制作的產(chǎn)物；

通常是主體界面完成，總進(jìn)度完成大概50%的時(shí)候，可以考慮嘗試整理設(shè)計(jì)規(guī)范了。

一般來說，大部分中小型企業(yè)整個(gè)部門，可能就搭配了1個(gè)啥都干的UI設(shè)計(jì)師；

這時(shí)候如果你一個(gè)人需要制作規(guī)范文檔，可以簡單做一下，基本上標(biāo)準(zhǔn)字體、字號(hào)、色值、控件等等都可以快速記錄下來作為規(guī)范文檔的內(nèi)容；

之后等項(xiàng)目完成，再補(bǔ)全規(guī)范文檔，作為后續(xù)版本的指導(dǎo)手冊(cè)。

那一些比較大型的公司和部門，可能不止一位設(shè)計(jì)師，比如我目前的設(shè)計(jì)團(tuán)隊(duì)一共7個(gè)人：4個(gè)UI，2個(gè)UE，1個(gè)平面。

那這時(shí)候，需要其中工作經(jīng)驗(yàn)豐富的設(shè)計(jì)師作為設(shè)計(jì)規(guī)范制作項(xiàng)目的主導(dǎo)者，規(guī)范好各個(gè)模塊，由其他人協(xié)助統(tǒng)一完成一份比較全面的設(shè)計(jì)規(guī)范文檔。

②設(shè)計(jì)規(guī)范的作用

就我目前編寫過的設(shè)計(jì)規(guī)范以及使用其他人的設(shè)計(jì)規(guī)范的經(jīng)驗(yàn)來看，

最常見也是最實(shí)用的作用有以下2點(diǎn)：

1.對(duì)設(shè)計(jì)師而言：為后續(xù)版本迭代和多人協(xié)作提供指導(dǎo)，保持產(chǎn)品的統(tǒng)一性；

一個(gè)項(xiàng)目，從V1.0一直升級(jí)到2.0、3.0……,很多時(shí)候即使同一位設(shè)計(jì)師在不同版本里做出的東西也可能會(huì)因?yàn)榘姹揪眠h(yuǎn)，記不清而不小心導(dǎo)致視覺風(fēng)格不統(tǒng)一；

而一個(gè)項(xiàng)目有時(shí)會(huì)好幾個(gè)設(shè)計(jì)師共同參與，甚至還有不同時(shí)間段先后參與到項(xiàng)目中的，每個(gè)人的設(shè)計(jì)風(fēng)格都不相同，這樣容易造成視覺界面的不統(tǒng)一，導(dǎo)致體驗(yàn)不佳。

所以統(tǒng)一的設(shè)計(jì)規(guī)范，能讓后續(xù)版本和不同設(shè)計(jì)師之間保持產(chǎn)品的視覺風(fēng)格統(tǒng)一。

2.對(duì)開發(fā)而言：提供標(biāo)準(zhǔn)化的組件樣式，減少開發(fā)重復(fù)時(shí)間

很多標(biāo)準(zhǔn)化的頁面控件完全可以做成設(shè)計(jì)規(guī)范里的標(biāo)注好的標(biāo)準(zhǔn)組件樣式，這樣就不需要每次設(shè)計(jì)師都要再標(biāo)注一遍給開發(fā)。

而且也可以避免有的開發(fā)粗心大意，兩個(gè)頁面的同類型組件樣式都寫的不統(tǒng)一。

③設(shè)計(jì)規(guī)范文檔的內(nèi)容

現(xiàn)在網(wǎng)絡(luò)上有非常多的知名產(chǎn)品的設(shè)計(jì)規(guī)范文檔，幾乎都可以上網(wǎng)搜到。

我目前看過差不多有上百份的產(chǎn)品設(shè)計(jì)規(guī)范文檔，總結(jié)下來，無外乎以下幾項(xiàng)：

標(biāo)準(zhǔn)色：產(chǎn)品用色、字體用色、背景用色、分割線用色，以及各種色值的使用場(chǎng)景；

標(biāo)準(zhǔn)字：字體、字號(hào)，字間距、行間距，以及各類使用場(chǎng)景；

圖  標(biāo)：圖標(biāo)大小、位置、樣式，以及各類使用場(chǎng)景；

公用控件：分級(jí)導(dǎo)航樣式、標(biāo)題欄樣式、輸入框、彈窗、按鈕、列表、toast、加載、loading、空白頁等等各類可作為設(shè)計(jì)規(guī)范的控件；

布  局：頁面布局樣式

模  塊：功能模塊樣式

基本上所有的設(shè)計(jì)規(guī)范文檔包含但不限于上述內(nèi)容，所以你感覺毫無頭緒，可以考慮從這幾方面著手。

④設(shè)計(jì)規(guī)范文檔的適用人群

和之前寫過的交互文檔需要人手一份一樣，設(shè)計(jì)規(guī)范文檔也是要傳達(dá)到團(tuán)隊(duì)的每個(gè)人手中；并不是UI設(shè)計(jì)師編寫完成后，就只由UI設(shè)計(jì)師來使用的。

這些人包括但不限于PM、交互設(shè)計(jì)師、UI、開發(fā)、運(yùn)營等等。

⑤設(shè)計(jì)規(guī)范文檔的更新迭代

設(shè)計(jì)規(guī)范文檔是為了更好的幫助設(shè)計(jì)師和開發(fā)完成工作，而不是限制發(fā)揮；

對(duì)人來說：

設(shè)計(jì)師有時(shí)候根據(jù)新的業(yè)務(wù)需求設(shè)計(jì)的東西，和原有的設(shè)計(jì)規(guī)范文檔的內(nèi)容并不合適；

開發(fā)在實(shí)際開發(fā)中，也會(huì)出現(xiàn)一些文檔中規(guī)定的無法達(dá)成的情況；

對(duì)產(chǎn)品來說：

隨著版本一代一代的更新，設(shè)計(jì)規(guī)范中的內(nèi)容也逐漸會(huì)不適合現(xiàn)有的設(shè)計(jì)風(fēng)格和技術(shù)。

那這時(shí)要根據(jù)實(shí)際情況，合理的更新迭代設(shè)計(jì)規(guī)范文檔的內(nèi)容，而不是一成不變。

Part 2  使用Mockplus的設(shè)計(jì)系統(tǒng)制作設(shè)計(jì)規(guī)范

這是Mockplus的設(shè)計(jì)系統(tǒng)鏈接，注冊(cè)個(gè)賬號(hào)，進(jìn)去就可以使用了：

Mockplus的設(shè)計(jì)系統(tǒng) https://ds.mockplus.cn/?hmsr=wen9

這系統(tǒng)本身非常簡單，一目了然，沒有學(xué)習(xí)成本。

這里截圖給大家看看，快速了解之后可以去官網(wǎng)體驗(yàn)下自己動(dòng)手寫個(gè)設(shè)計(jì)規(guī)范。

①注冊(cè)之后，進(jìn)入設(shè)計(jì)系統(tǒng)

下圖是進(jìn)入設(shè)計(jì)系統(tǒng)后的頁面，包含一個(gè)系統(tǒng)提供的演示DEMO，一個(gè)添加自己規(guī)范資源庫的功能按鈕。

②查看演示DEMO內(nèi)容

下圖是演示DEMO的設(shè)計(jì)規(guī)范樣式：

左側(cè)是導(dǎo)航欄，包含了設(shè)計(jì)規(guī)范的內(nèi)容，也就是我們上文說的規(guī)范文檔的內(nèi)容；

你可以按照自身的需求自定義每個(gè)大類下的小標(biāo)簽，然后填入對(duì)應(yīng)的內(nèi)容；

右側(cè)上部是項(xiàng)目簡介，可以自由編輯，可以寫寫項(xiàng)目概況，使用方式，細(xì)則等等；

右側(cè)下部是顯示區(qū)，和左側(cè)到導(dǎo)航欄內(nèi)容呼應(yīng)，也是內(nèi)容的編輯區(qū)；

③創(chuàng)建自己的設(shè)計(jì)規(guī)范資源庫

點(diǎn)擊DEMO旁的“+”，就可以創(chuàng)建自家產(chǎn)品的規(guī)范資源庫；

空白庫里面內(nèi)容都是空的，你需要重頭開始編輯所有內(nèi)容；

示例庫就是演示DEMO的內(nèi)容，可以重新編輯該示例庫的內(nèi)容；

創(chuàng)建完自己的設(shè)計(jì)規(guī)范資源庫，剩下的就是在設(shè)計(jì)過程中，不斷的往資源庫里填入對(duì)應(yīng)的內(nèi)容就可以了。

當(dāng)所有的內(nèi)容都編輯完成后，點(diǎn)擊最右側(cè)導(dǎo)出按鈕，有三個(gè)選項(xiàng)，按需求導(dǎo)出即可；

又或者點(diǎn)擊分享按鈕，分享該設(shè)計(jì)規(guī)范的鏈接地址。

到此使用設(shè)計(jì)系統(tǒng)就可以完成一份設(shè)計(jì)規(guī)范文檔了。

而下載完Sketch插件后，在使用Sketch設(shè)計(jì)時(shí)，直接就可以調(diào)用資源庫里已經(jīng)編輯好的設(shè)計(jì)規(guī)范，這對(duì)保持產(chǎn)品的品牌統(tǒng)一性非常有幫助。

其實(shí)系統(tǒng)本身操作沒什么可說的，重要的是出現(xiàn)了這么一種能很大提升效率的工具，因?yàn)樽罱珠_始撰寫新的設(shè)計(jì)規(guī)范文檔，使用后覺得這個(gè)效率還是非常高的，所以分享給大家。

摹客設(shè)計(jì)規(guī)范：https://www.mockplus.cn/ds?hmsr=wen9