之前寫了一些關(guān)于APP原型文檔的文章：

一款A(yù)PP的交互文檔從撰寫到交付?http://www.ui.cn/detail/270000.html

這次想寫下關(guān)于APP設(shè)計(jì)規(guī)范文檔的內(nèi)容，規(guī)范文檔這個(gè)東西荆责，實(shí)際上大部分中小型公司沒有這方面的需求,也沒精力去制作這樣一個(gè)系統(tǒng)性的東西滥比，所以文章篇幅不長(zhǎ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è)什么東西呢黍氮？

最簡(jiǎn)單的理解就是唐含，對(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ī)范文檔誊稚，可以簡(jiǎn)單做一下，基本上標(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)營(yíng)等等僻弹。

⑤設(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/summer/?hmsr=cherry

這系統(tǒng)本身非常簡(jiǎn)單唱捣，一目了然两蟀，沒有學(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)目簡(jiǎn)介绿渣，可以自由編輯，可以寫寫項(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è)效率還是非常高的需了，所以分享給大家。

Part 3 Mockplus設(shè)計(jì)系統(tǒng)的比賽

這個(gè)活動(dòng)我覺得還是挺有意思的般甲，活動(dòng)時(shí)間是2018年7月20日~2018年9月5日肋乍。

詳情可以去這個(gè)鏈接下看看：

幕客設(shè)計(jì)系統(tǒng)大賽?https://ds.mockplus.cn/summer/?hmsr=cherry

這個(gè)我覺得大家可以嘗試參加一下，為什么呢敷存，你看下比賽規(guī)則就明白了：

從他們官方提供的10個(gè)知名APP里選一個(gè)住拭，用他們的設(shè)計(jì)系統(tǒng)整理出一套設(shè)計(jì)規(guī)范，就可以參加比賽了历帚。

這比賽有意思的地方就在于：

1.它不是設(shè)計(jì)能力的比賽，而是整理能力杠娱、細(xì)致能力的比賽挽牢。

很多設(shè)計(jì)比賽對(duì)新人不怎么友好，一些設(shè)計(jì)能力薄弱的朋友參加根本沒什么機(jī)會(huì)摊求；

但這個(gè)比賽我覺得對(duì)新人來說也挺不錯(cuò)的禽拔，對(duì)設(shè)計(jì)經(jīng)驗(yàn)本身要求不是太高。

只要你夠細(xì)心室叉，邏輯性夠強(qiáng)睹栖，這比賽還是很有吸引力的。

2.可以用這個(gè)設(shè)計(jì)系統(tǒng)練習(xí)設(shè)計(jì)規(guī)范的撰寫能力

設(shè)計(jì)系統(tǒng)本身羅列出了設(shè)計(jì)規(guī)范的提綱茧痕，你需要的就是把產(chǎn)品零散的東西整理出來野来。

就算不參加比賽，使用這個(gè)設(shè)計(jì)系統(tǒng)也可以用來練習(xí)撰寫設(shè)計(jì)規(guī)范的能力踪旷，可以有效的了解如何撰寫一份設(shè)計(jì)規(guī)范曼氛，以及一份規(guī)范有哪些內(nèi)容。

對(duì)個(gè)人幫助還是挺大的令野。

以上就是關(guān)于設(shè)計(jì)規(guī)范的一些內(nèi)容~

本文經(jīng)作者授權(quán)轉(zhuǎn)載舀患。

原文地址：http://www.ui.cn/detail/377262.html

原作者：精分青年鹵大濕，懂交互气破、愛設(shè)計(jì)聊浅、可編程的全棧設(shè)計(jì)師；目前就職于某軟件技術(shù)企業(yè)现使，任職UI設(shè)計(jì)師低匙，交互設(shè)計(jì)師。在通信朴下、安防努咐、智能TV、企業(yè)管理殴胧、直播等產(chǎn)品領(lǐng)域都有涉獵渗稍。喜歡總結(jié)分享自己的工作經(jīng)驗(yàn)和感悟佩迟，喜歡的話可關(guān)注大濕，UI中國(guó)ID：精分青年鹵大濕竿屹。