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

一款A(yù)PP的交互文檔從撰寫到交付

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

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

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

最近又開(kāi)始為新的產(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分鐘就上手，零門檻的原型工具拣挪。

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

為什么選擇用Mockplus的設(shè)計(jì)系統(tǒng)來(lái)制作設(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ī)范資源庫(kù)。

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

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

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

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

工具只是提高效率的手段戈次，重心還是設(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)作用。

(下圖來(lái)自京東無(wú)線視覺(jué)規(guī)范武氓，侵刪)

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

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

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

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

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

這時(shí)候如果你一個(gè)人需要制作規(guī)范文檔，可以簡(jiǎn)單做一下火惊，基本上標(biāo)準(zhǔn)字體求类、字號(hào)、色值屹耐、控件等等都可以快速記錄下來(lái)作為規(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ī)范的作用

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

最常見(jià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)致視覺(jué)風(fēng)格不統(tǒng)一；

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

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

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

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

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

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

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

我目前看過(guò)差不多有上百份的產(chǎn)品設(shè)計(jì)規(guī)范文檔，總結(jié)下來(lái)墓怀，無(wú)外乎以下幾項(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饶深、空白頁(yè)等等各類可作為設(shè)計(jì)規(guī)范的控件；

布 局：頁(yè)面布局樣式

模 塊：功能模塊樣式

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

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

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

這些人包括但不限于PM宪彩、交互設(shè)計(jì)師、UI讲婚、開(kāi)發(fā)尿孔、運(yùn)營(yíng)等等。

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

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

對(duì)人來(lái)說(shuō)：

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

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

對(duì)產(chǎn)品來(lái)說(shuō)：

隨著版本一代一代的更新块差，設(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/

這系統(tǒng)本身非常簡(jiǎn)單轧坎，一目了然，沒(méi)有學(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)后的頁(yè)面捎泻，包含一個(gè)系統(tǒng)提供的演示DEMO，一個(gè)添加自己規(guī)范資源庫(kù)的功能按鈕埋哟。

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

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

左側(cè)是導(dǎo)航欄笆豁，包含了設(shè)計(jì)規(guī)范的內(nèi)容，也就是我們上文說(shuō)的規(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ī)范資源庫(kù)

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

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

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

創(chuàng)建完自己的設(shè)計(jì)規(guī)范資源庫(kù)，剩下的就是在設(shè)計(jì)過(guò)程中刘急，不斷的往資源庫(kù)里填入對(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)用資源庫(kù)里已經(jīng)編輯好的設(shè)計(jì)規(guī)范，這對(duì)保持產(chǎn)品的品牌統(tǒng)一性非常有幫助边篮。

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

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

這個(gè)活動(dòng)我覺(jué)得還是挺有意思的凶杖，活動(dòng)時(shí)間是2018年7月20日~2018年9月5日胁艰。

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

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

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

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

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

1.它不是設(shè)計(jì)能力的比賽解虱，而是整理能力攘须、細(xì)致能力的比賽。

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

但這個(gè)比賽我覺(jué)得對(duì)新人來(lái)說(shuō)也挺不錯(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)品零散的東西整理出來(lái)。

就算不參加比賽宵蛀，使用這個(gè)設(shè)計(jì)系統(tǒng)也可以用來(lái)練習(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

原作者：精分青年鹵大濕瞳别，懂交互征候、愛(ài)設(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：精分青年鹵大濕。