起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識手把手教你：如何制作設計規(guī)范？
設計規(guī)范的本身并不是只給設計師用的，他更大的作用是對于整個團隊，比如：方便和開發(fā)之間的溝通，幫助他們制作統(tǒng)一的組件，以后用到的時候直接調用。而對于設計師來說，也不用重復做圖、重復標注，改動一個的時候就能同步所有，大大提高了工作效率。
記得剛開始工作的時候，負責一個全新的項目， 團隊也只有我一個設計師， 經(jīng)常出現(xiàn)這樣的情況，開發(fā)要改一個參數(shù)的時候，總是習慣性的直接問我這個地方是什么顏色、主色調是什么、圖標是多大、分割線的顏色……那時候潛意識就覺得這些東西是需要有個規(guī)范文檔的，把一些常用的內(nèi)容，比如：色值、大小、按鈕、背景顏色等都放在一起， 團隊成員在有需要的時候能夠快速找到。
于是就上網(wǎng)搜了很多別人做的設計規(guī)范，自己依葫蘆畫瓢做了一份， 滿心歡喜的給到開發(fā)的時候，卻被告知很多東西都派不上用場。
比如：字體規(guī)范里寫的一級標題，每個人所認為的一級標題是不一樣的， 所以光寫一級標題的話， 別人也不知道具體指的是哪里。
再比如圖片區(qū)域，規(guī)范的太死了，根本沒留適配的空間，就像個標注，但其實現(xiàn)在看來作為標注也是不合格的。
最后結局就是，花了很長時間做的規(guī)范只自嗨了自己，實際上對于團隊來說一點作用都沒事后一直在想什么樣的規(guī)范是適合小公司的我們呢？又是什么樣的規(guī)范能夠真正節(jié)省團隊時間、提高工作效率的呢？
而現(xiàn)在工作了幾年之后，對這些有了更多的理解，所以就想把這些都總結記錄一下，算寫給剛工作時候的自己，當然也希望在寫給自己的同時也能夠幫助看的人，節(jié)省一些踩坑的時間。
關于設計規(guī)范?
在說具體怎么做規(guī)范之前，我想先就規(guī)范本身來說明下，講一下為什么需要做，以及做了之后的好處、作用，知其然知其所以然。
為什么要做規(guī)范
很多人在小公司的設計師都覺得，整個公司只有自己一個設計師，所有的設計稿都是自己一個人做的，風格肯定都是統(tǒng)一的，所以沒必要花那么長時間去做一個沒有用的東西。但其實規(guī)范的本身并不是只給設計師用的，他更大的作用是對于整個團隊，比如：方便和開發(fā)之間的溝通，幫助他們制作統(tǒng)一的組件，以后用到的時候直接調用。
而對于設計師來說，也不用重復做圖、重復標注，改動一個的時候就能同步所有，大大提高了工作效率。
而且有時候就算設計稿是同一個人的，也很難保證前后界面的參數(shù)是一致的，畢竟人的精力有限， 事情多的時候， 很容易出現(xiàn)記憶偏差可能你在前面顏色、圖標、模塊間距做的是這樣的，到后面相同模塊的時候， 就會做成另外一個樣子。
這種小問題到后面再去修改不但浪費時間，還容易漏掉，而前期花時間定義好規(guī)則，并整理好規(guī)范，能夠有效避免這個問題，磨刀不誤砍柴工。
什么樣的規(guī)范才是好的
一個好的規(guī)范， 首先得有人愿意用，否則你做的再好也都白費了。咱們來換位思考一下，如果你是使用者，你希望看到一個什么的規(guī)范文檔？
對于我而言，最重要的不是它做的多么細致、面面俱到、多么完美，而是我看的懂，我能夠30秒內(nèi)找到自己想要的東西，并且能夠對當前的工作有幫助。所以說規(guī)范要簡單易懂、且有指導意義。
需要注意的地方
規(guī)范最好是當主要界面的設計完成之后，再來制作，切記不要一開始就著手制作規(guī)范。這樣很容易出現(xiàn)前期制定的規(guī)范在后續(xù)的頁面上沿用不了的情況。
我一般是把每個底tab的一級頁面、再加上幾個二級、三級頁面都做好之后再開始。
也不要因為規(guī)范而限制了自己的思維，當發(fā)現(xiàn)規(guī)范有問題的時候，要及時去修正，而不是做了一次之后，一直沿用，永不修改。
規(guī)范要“因地制宜”，切實可行，不要流于形式。
哪些需要優(yōu)先確定?
尺寸
設計圖尺寸：
雖說現(xiàn)在大多數(shù)人都是以750 (@2x) 為設計稿， 但是也還是有人720 (@2x) 的尺寸， 或是375 (@1x) 的尺寸， 比如：我就是用的720。所以設計之初最先要定一個統(tǒng)一的設計尺寸，特別是多個設計師合作的時候，千萬不要想當然的以為別人都和你一樣。
間距大小間距包括頁邊距、模塊與模塊之間的間距，這種全局的間距大小必須要一致，頁邊距的大小很好定，基本上20、24、32居多，根據(jù)產(chǎn)品特性定一個統(tǒng)一的就好。
而模塊與模塊之間的間距就相對復雜一點， 在定之前需要先確定模塊之間的分割方式，是用線、還是面、還是留白， 然后再確定間距。
確定好模塊與模塊之間的分割方式后，還需要確定模塊內(nèi)部的，確定之后就要嚴格執(zhí)行比如規(guī)范定的模塊與模塊之間用線，模塊內(nèi)部之間用留白，那后續(xù)所有頁面都需要按照這個規(guī)則來（特殊情況除外。
顏色
顏色包括基礎標準色（主色）、基礎文字色，還應該包括全局標準色（背景色、分割線色值等）這些都需要標好色值以及使用的場景。
當顏色是漸變的時候，也需要標清楚漸變的顏色。
字體
不需要把所有頁面的字號都放到規(guī)范里，只需要常用的字號、以及所使用的場景寫清楚就好。
需要注意的是，使用場景要寫一些帶有明確性指向的描述文字，比如：頂導航標題字號、Feed 正文、詳情頁標題等。
還有一點也不能忘記，那就是行間距，不管是一行文字還是多行文字，我們都需要標注清楚行間距，也就是行高，如果是段落的話還需要標注段落間距。
所以為了避免團隊的其他成員忽略了文字的行間距，我們需要在做規(guī)范的時候標明，所有文字必須注明行間距。
圖標
項目緊急而人員又不足的時候，可能沒有那么多時間，去把所有的圖標都畫的精細，那這個時候我們可以先定尺寸。
當然這里說的定尺寸不是讓你把頁面內(nèi)所有圖標的尺寸都定好，而是說優(yōu)先定幾個大的模塊，比如：頂導航、底導航、個人中心的…
等后續(xù)空閑的時候我們再去細化這些圖標，開發(fā)也只需要換張圖，不影響其他建議圖標尺寸盡量不要過多，比如：32、36、40、48 都有，這樣會顯得凌亂無序，而且這些完全可以統(tǒng)一成兩個大小的，比如：32、48的。因為圖標是可以有留白區(qū)域的，也就說圖標本身大小可以是40，但是切圖尺寸是48。
這樣做的好處就是圖標大小種類較少、方便記憶、也顯得專業(yè)，畢竟誰也不希望最后整理出來的規(guī)范，32的圖標2個、36的圖標2個、40的圖標2個，這樣孤零零的多慘，所以建議圖標尺寸不要太多，
按鈕
按鈕包括它的大小、色值、圓角度以及默認、點擊、置灰狀態(tài)。
前期在制定規(guī)范的時候，我們可以先定大、中、小三個尺寸的按鈕樣式，后期再根據(jù)實際情況做修改。
如果你的 APP 內(nèi)很多按鈕都是文字 + icon的， 那么 icon 的大小以及它和文字之間的距離也是需要規(guī)范的。
圖片
圖片包括 APP 內(nèi)出現(xiàn)的所有圖，一般情況下都是產(chǎn)品圖和頭像，但是需要注意的是在制定規(guī)范之前，要先把圖片比例定好，常見的比例有1:1、2:1、4:3、16:9 等等。
然后再把每個模塊所用的圖片大小以及它的比例標清楚，如果圖片有圓角度的話也需要注明。
頭像的尺寸可以定三個，大中小各一個，基本體量少的 APP 都夠用了。
建議 APP 內(nèi)的圖片比例兩到三個就好，因為這涉及到后臺上傳，比例不一樣的話，要不然就是開發(fā)需要對圖片進行裁剪、要不然就是需要留不同的接口，后期分別上傳。無論哪一種，都是需要額外的人力成本，所以不要給自己挖坑哦。
導航
頂導航：
高度、字體大小、顏色、有沒有分割線，有的話分割線色值 ; 帶不帶圖標、多個圖標之間的間距等等。
底導航：
二級導航主要是一些篩選類tab，需要標明文字大小、色值、選中后的橫線的大小。
這里橫線的樣式目前常見的有兩種：
- 一種是固定的短線， 不管上面文字多少， 都是顯示一樣的大小；
- 還有一種是和文字一樣長的， 無論哪一種， 事先都需要定義一下規(guī)則。
卡片相關
卡片包括很多模塊，比如：卡片標題、卡片列表、一些基礎的卡片樣式，建議以高度為劃分，如果內(nèi)容差不多的話，建議統(tǒng)一一下高度。比如都是icon +文字，一個高度是72px，一個是80px，就可以統(tǒng)一成一個。
產(chǎn)品 list 等一些可復用的卡片樣式都可以做到規(guī)范里，統(tǒng)一樣式，后期修改起來也比較方便。
哪些可暫時確定，日后可再調整
前期的時候，因為各種各樣的原因，比如時間不夠、無法預知后面的情況等等，沒有辦法把所有的東西都定好規(guī)范，這時候我們可以對一些后期改動成本小的，暫時確定一下規(guī)范，后期需要修改的時候再統(tǒng)一修改。
圖標風格
在做圖標的時候，我們所必須做的是把圖標大小確定，對于圖標本身的樣式、風格、粗細等可暫時做幾個示意的樣式，等所有界面完成后，再來統(tǒng)一繪制。
很多時候我們并不清楚界面內(nèi)都需要什么樣的彈窗樣式，文字最多的有多少個，所以我們可以先定幾個最常用的，比如：雙向操作的（含確定、取消的）的彈窗、單向操作的（只有一個操作按鈕的）。
Toast 彈窗
后續(xù)做的過程中發(fā)現(xiàn)新的需求是現(xiàn)在已有的樣式，滿足不了的，就可以隨時添加或者修改。
哪些先不做?
空白頁插畫、缺省頁、占位圖等，這些可以先不用急著做，等項目都完成后，再來做就可以了。前期項目緊急的時候，不要把時間都花費在這些小的頁面里。
加分項?
目錄
目錄相當于一個索引，方便看的人對整個規(guī)范有一個大致了解，而且能幫助團隊成員快速的找到自己需要的。
版式統(tǒng)一
規(guī)范文檔既然是統(tǒng)一頁面布局，方便團隊協(xié)作的，那么它本身就應該統(tǒng)一，比如：每頁格式、標題大小、正文字號顏色等都需要保持一致，這樣才更能讓別人相信這是一個經(jīng)過深思熟慮做出來的規(guī)范文檔。
再比如：文檔里所有間距用綠色表示；元素用紫色表示；高度用紅色表示等等，讓每個顏色的存在都變的有規(guī)律可循。
總結?
規(guī)范的本身是為了提高團隊的工作效率，不要顧此失彼。小公司的產(chǎn)品不像大公司體量那么大，規(guī)范不需要完全照搬大公司的，而是要根據(jù)自己公司的實際情況，制作出一個適合自己的，扁平快的規(guī)范文檔，讓規(guī)范能真正發(fā)揮它的作用做規(guī)范就像找對象，永遠有更好的，但是更好的不一定是最合適的。
作者：橙子的橙子，公眾號：海鹽社
本文由 @橙子的橙子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載。
題圖來自Unsplash，基于CC0協(xié)議
厲害啊，我不懂美工，所以我做的原型美工直接淚奔，哈哈哈
寫的很好！