當(dāng)我們面思路模糊的時(shí)候潛意識(shí)就覺(jué)得需要有個(gè)規(guī)范文檔的, 把一些常用的內(nèi)容, 比如：色值、大小、按鈕、背景顏色等都放在一起, 團(tuán)隊(duì)成員在有需要的時(shí)候能夠快速找到。

規(guī)范文檔

于是就上網(wǎng)搜了很多別人做的設(shè)計(jì)規(guī)范, 自己依葫蘆畫(huà)瓢做了一份, 滿(mǎn)心歡喜的給到開(kāi)發(fā)的時(shí)候，卻被告知很多東西都派不上用場(chǎng)，比如字體規(guī)范里寫(xiě)的一級(jí)標(biāo)題, 每個(gè)人所認(rèn)為的一級(jí)標(biāo)題是不一樣的, 所以光寫(xiě)一級(jí)標(biāo)題的話, 別人也不知道具體指的是哪里。

字號(hào)顏色適用場(chǎng)景

再比如圖片區(qū)域, 規(guī)范的太死了, 根本沒(méi)留適配的空間, 就像個(gè)標(biāo)注, 但其實(shí)現(xiàn)在看來(lái)作為標(biāo)注也是不合格的。

最后結(jié)局就是, 花了很長(zhǎng)時(shí)間做的規(guī)范只自嗨了自己, 實(shí)際上對(duì)于團(tuán)隊(duì)來(lái)說(shuō)一點(diǎn)作用都沒(méi)有。

事后一直在想什么樣的規(guī)范是適合小公司的我們呢? 又是什么樣的規(guī)范能夠真正節(jié)省團(tuán)隊(duì)時(shí)間、提高工作效率的呢?

時(shí)間和效率

而現(xiàn)在工作了幾年之后, 對(duì)這些有了更多的理解，所以就想把這些都總結(jié)記錄一下，算寫(xiě)給剛工作時(shí)候的自己，當(dāng)然也希望在寫(xiě)給自己的同時(shí)也能夠幫助看的人, 節(jié)省一些踩坑的時(shí)間

關(guān)于設(shè)計(jì)規(guī)范

在說(shuō)具體怎么做規(guī)范之前, 我想先就規(guī)范本身來(lái)說(shuō)明下, 講一下為什么需要做, 以及做了之后的好處、作用, 知其然知其所以然。

為什么要做規(guī)范

很多人在小公司的設(shè)計(jì)師都覺(jué)得, 整個(gè)公司只有自己一個(gè)設(shè)計(jì)師, 所有的設(shè)計(jì)稿都是自己一個(gè)人做的, 風(fēng)格肯定都是統(tǒng)一的, 所以沒(méi)必要花那么長(zhǎng)時(shí)間去做一個(gè)沒(méi)有用的東西。

但其實(shí)規(guī)范的本身并不是只給設(shè)計(jì)師用的, 他更大的作用是對(duì)于整個(gè)團(tuán)隊(duì), 比如方便和開(kāi)發(fā)之間的溝通, 幫助他們制作統(tǒng)一的組件, 以后用到的時(shí)候直接調(diào)用。

而對(duì)于設(shè)計(jì)師來(lái)說(shuō)，也不用重復(fù)做圖、重復(fù)標(biāo)注, 改動(dòng)一個(gè)的時(shí)候就能同步所有, 大大提高了工作效率。

而且有時(shí)候就算設(shè)計(jì)稿是同一個(gè)人的，也很難保證前后界面的參數(shù)是一致的，畢竟人的精力有限, 事情多的時(shí)候, 很容易出現(xiàn)記憶偏差。

可能你在前面顏色、圖標(biāo)、模塊間距做的是這樣的，到后面相同模塊的時(shí)候, 就會(huì)做成另外一個(gè)樣子。這種小問(wèn)題到后面再去修改不但浪費(fèi)時(shí)間, 還容易漏掉, 而前期花時(shí)間定義好規(guī)則，并整理好規(guī)范, 能夠有效避免這個(gè)問(wèn)題， 磨刀不誤砍柴工。

模塊間距

什么樣的規(guī)范才是好的

一個(gè)好的規(guī)范, 首先得有人愿意用, 否則你做的再好也都白費(fèi)了。咱們來(lái)?yè)Q位思考一下, 如果你是使用者, 你希望看到一個(gè)什么的規(guī)范文檔？

對(duì)于我而言, 最重要的不是它做的多么細(xì)致、面面俱到、多么完美, 而是我看的懂, 我能夠30秒內(nèi)找到自己想要的東西, 并且能夠?qū)Ξ?dāng)前的工作有幫助。

所以說(shuō)規(guī)范要簡(jiǎn)單易懂、且有指導(dǎo)意義。

明確性

需要注意的地方

* 規(guī)范最好是當(dāng)主要界面的設(shè)計(jì)完成之后，再來(lái)制作，切記不要一開(kāi)始就著手制作規(guī)范。這樣很容易出現(xiàn)前期制定的規(guī)范在后續(xù)的頁(yè)面上沿用不了的情況。我一般是把每個(gè)底tab的一級(jí)頁(yè)面、再加上幾個(gè)二級(jí)、三級(jí)頁(yè)面都做好之后再開(kāi)始

* 也不要因?yàn)橐?guī)范而限制了自己的思維, 當(dāng)發(fā)現(xiàn)規(guī)范有問(wèn)題的時(shí)候, 要及時(shí)去修正, 而不是做了一次之后, 一直沿用, 永不修改

* 規(guī)范要 “因地制宜”, 切實(shí)可行, 不要流于形式

我們已經(jīng)了解了設(shè)計(jì)過(guò)程中規(guī)范的重要性，廢話不多說(shuō)，接下來(lái)就是干貨部分，想要了解我們?cè)谥谱饕?guī)范時(shí)需要從哪些方面著手的小伙伴，接下來(lái)就要仔細(xì)看咯，或者小本本做好記錄哦！

• 哪些需要優(yōu)先確定

尺寸

設(shè)計(jì)圖尺寸

雖說(shuō)現(xiàn)在大多數(shù)人都是以750 (@2x) 為設(shè)計(jì)稿, 但是也還是有人720 (@2x) 的尺寸, 或是375 (@1x) 的尺寸, 比如我就是用的720，所以設(shè)計(jì)之初最先要定一個(gè)統(tǒng)一的設(shè)計(jì)尺寸, 特別是多個(gè)設(shè)計(jì)師合作的時(shí)候, 千萬(wàn)不要想當(dāng)然的以為別人都和你一樣。

設(shè)計(jì)圖尺寸

間距大小

間距包括頁(yè)邊距、模塊與模塊之間的間距, 這種全局的間距大小必須要一致, 頁(yè)邊距的大小很好定, 基本上20、24、32居多, 根據(jù)產(chǎn)品特性定一個(gè)統(tǒng)一的就好。

間距大小

而模塊與模塊之間的間距就相對(duì)復(fù)雜一點(diǎn), 在定之前需要先確定模塊之間的分割方式, 是用線、還是面、還是留白, 然后再確定間距。

模塊間距

確定好模塊與模塊之間的分割方式后，還需要確定模塊內(nèi)部的，確定之后就要嚴(yán)格執(zhí)行比如規(guī)范定的模塊與模塊之間用線，模塊內(nèi)部之間用留白，那后續(xù)所有頁(yè)面都需要按照這個(gè)規(guī)則來(lái)（特殊情況除外）。

顏色

顏色包括基礎(chǔ)標(biāo)準(zhǔn)色（主色）、基礎(chǔ)文字色, 還應(yīng)該包括全局標(biāo)準(zhǔn)色（背景色、分割線色值等）這些都需要標(biāo)好色值以及使用的場(chǎng)景。

顏色屬性

當(dāng)顏色是漸變的時(shí)候, 也需要標(biāo)清楚漸變的顏色

漸變顏色

字體

不需要把所有頁(yè)面的字號(hào)都放到規(guī)范里, 只需要常用的字號(hào)、以及所使用的場(chǎng)景寫(xiě)清楚就好。

需要注意的是，使用場(chǎng)景要寫(xiě)一些帶有明確性指向的描述文字，比如頂導(dǎo)航標(biāo)題字號(hào)、Feed 正文、詳情頁(yè)標(biāo)題等。

字體樣式

還有一點(diǎn)也不能忘記，那就是行間距，不管是一行文字還是多行文字，我們都需要標(biāo)注清楚行間距，也就是行高，如果是段落的話還需要標(biāo)注段落間距。

字體適用場(chǎng)景

所以為了避免團(tuán)隊(duì)的其他成員忽略了文字的行間距，我們需要在做規(guī)范的時(shí)候標(biāo)明，所有文字必須注明行間距。

圖標(biāo)

項(xiàng)目緊急而人員又不足的時(shí)候, 可能沒(méi)有那么多時(shí)間，去把所有的圖標(biāo)都畫(huà)的精細(xì)，那這個(gè)時(shí)候我們可以先定尺寸。

當(dāng)然這里說(shuō)的定尺寸不是讓你把頁(yè)面內(nèi)所有圖標(biāo)的尺寸都定好，而是說(shuō)優(yōu)先定幾個(gè)大的模塊，比如頂導(dǎo)航、底導(dǎo)航、個(gè)人中心的…

圖標(biāo)尺寸定義

等后續(xù)空閑的時(shí)候我們?cè)偃ゼ?xì)化這些圖標(biāo)，開(kāi)發(fā)也只需要換張圖, 不影響其他。

建議圖標(biāo)尺寸盡量不要過(guò)多，比如32、36、40、48 都有, 這樣會(huì)顯得凌亂無(wú)序, 而且這些完全可以統(tǒng)一成兩個(gè)大小的, 比如32、48的。

因?yàn)閳D標(biāo)是可以有留白區(qū)域的, 也就說(shuō)圖標(biāo)本身大小可以是40, 但是切圖尺寸是48。

圖標(biāo)大小統(tǒng)一：切圖尺寸和圖片大小

這樣做的好處就是圖標(biāo)大小種類(lèi)較少、方便記憶、也顯得專(zhuān)業(yè), 畢竟誰(shuí)也不希望最后整理出來(lái)的規(guī)范, 32的圖標(biāo)2個(gè)、36的圖標(biāo)2個(gè)、40的圖標(biāo)2個(gè), 這樣孤零零的多慘, 所以建議圖標(biāo)尺寸不要太多

按鈕

按鈕包括它的大小、色值、圓角度以及默認(rèn)、點(diǎn)擊、置灰狀態(tài)。

按鈕規(guī)范

前期在制定規(guī)范的時(shí)候, 我們可以先定大、中、小三個(gè)尺寸的按鈕樣式, 后期再根據(jù)實(shí)際情況做修改。

按鈕樣式和用途

如果你的 APP 內(nèi)很多按鈕都是文字 + icon的, 那么 icon 的大小以及它和文字之間的距離也是需要規(guī)范的。

按鈕文字和間距

圖片

圖片包括 APP 內(nèi)出現(xiàn)的所有圖, 一般情況下都是產(chǎn)品圖和頭像, 但是需要注意的是在制定規(guī)范之前, 要先把圖片比例定好, 常見(jiàn)的比例有 1:1、2:1、4:3、16:9 等等。

圖片尺寸

然后再把每個(gè)模塊所用的圖片大小以及它的比例標(biāo)清楚, 如果圖片有圓角度的話也需要注明。

圖片比例實(shí)例

頭像的尺寸可以定三個(gè)，大中小各一個(gè)，基本體量少的 APP 都?jí)蛴昧恕?/p>

頭像尺寸大小

建議 APP 內(nèi)的圖片比例兩到三個(gè)就好, 因?yàn)檫@涉及到后臺(tái)上傳, 比例不一樣的話, 要不然就是開(kāi)發(fā)需要對(duì)圖片進(jìn)行裁剪、要不然就是需要留不同的接口, 后期分別上傳, 無(wú)論哪一種,都是需要額外的人力成本, 所以不要給自己挖坑哦。

導(dǎo)航

頂導(dǎo)航

高度、字體大小、顏色、有沒(méi)有分割線, 有的話分割線色值 ; 帶不帶圖標(biāo)、多個(gè)圖標(biāo)之間的間距等等。

導(dǎo)航圖標(biāo)間距

底導(dǎo)航

底部導(dǎo)航樣式

二級(jí)導(dǎo)航

主要是一些篩選類(lèi)tab, 需要標(biāo)明文字大小、色值、選中后的橫線的大小, 這里橫線的樣式目前常見(jiàn)的有兩種, 一種是固定的短線, 不管上面文字多少, 都是顯示一樣的大小; 還有一種是和文字一樣長(zhǎng)的, 無(wú)論哪一種, 事先都需要定義一下規(guī)則。

二級(jí)導(dǎo)航字體顏色大小定義

卡片相關(guān)

卡片包括很多模塊, 比如卡片標(biāo)題、卡片列表、一些基礎(chǔ)的卡片樣式, 建議以高度為劃分, 如果內(nèi)容差不多的話, 建議統(tǒng)一一下高度。

比如都是icon +文字，一個(gè)高度是72px，一個(gè)是80px，就可以統(tǒng)一成一個(gè)。

卡片形式

產(chǎn)品 list 等一些可復(fù)用的卡片樣式都可以做到規(guī)范里，統(tǒng)一樣式，后期修改起來(lái)也比較方便。

產(chǎn)品列表形式

哪些可暫時(shí)確定 日后可再調(diào)整

前期的時(shí)候，因?yàn)楦鞣N各樣的原因，比如時(shí)間不夠、無(wú)法預(yù)知后面的情況等等，沒(méi)有辦法把所有的東西都定好規(guī)范，這時(shí)候我們可以對(duì)一些后期改動(dòng)成本小的，暫時(shí)確定一下規(guī)范，后期需要修改的時(shí)候再統(tǒng)一修改。

圖標(biāo)風(fēng)格

在做圖標(biāo)的時(shí)候，我們所必須做的是把圖標(biāo)大小確定，對(duì)于圖標(biāo)本身的樣式、風(fēng)格、粗細(xì)等可暫時(shí)做幾個(gè)示意的樣式，等所有界面完成后，再來(lái)統(tǒng)一繪制。

圖標(biāo)icon

彈窗樣式

很多時(shí)候我們并不清楚界面內(nèi)都需要什么樣的彈窗樣式，文字最多的有多少個(gè)，所以我們可以先定幾個(gè)最常用的，比如雙向操作的（含確定、取消的）的彈窗、單向操作的（只有一個(gè)操作按鈕的）。

彈窗定義

Toast 彈窗

彈窗定義

后續(xù)做的過(guò)程中發(fā)現(xiàn)新的需求是現(xiàn)在已有的樣式，滿(mǎn)足不了的，就可以隨時(shí)添加或者修改。

哪些先不做

空白頁(yè)插畫(huà)、缺省頁(yè)、占位圖等，這些可以先不用急著做，等項(xiàng)目都完成后，再來(lái)做就可以了，前期項(xiàng)目緊急的時(shí)候，不要把時(shí)間都花費(fèi)在這些小的頁(yè)面里。

空白頁(yè)面

加分項(xiàng)

目錄

目錄相當(dāng)于一個(gè)索引，方便看的人對(duì)整個(gè)規(guī)范有一個(gè)大致了解，而且能幫助團(tuán)隊(duì)成員快速的找到自己需要的。

目錄

版式統(tǒng)一

規(guī)范文檔既然是統(tǒng)一頁(yè)面布局，方便團(tuán)隊(duì)協(xié)作的，那么它本身就應(yīng)該統(tǒng)一，比如每頁(yè)格式、標(biāo)題大小、正文字號(hào)顏色等都需要保持一致，這樣才更能讓別人相信這是一個(gè)經(jīng)過(guò)深思熟慮做出來(lái)的規(guī)范文檔。

統(tǒng)一板式

再比如文檔里所有間距用綠色表示；元素用紫色表示；高度用紅色表示等等，讓每個(gè)顏色的存在都變的有規(guī)律可循。

總結(jié)

規(guī)范的本身是為了提高團(tuán)隊(duì)的工作效率，不要顧此失彼。小公司的產(chǎn)品不像大公司體量那么大，規(guī)范不需要完全照搬大公司的，而是要根據(jù)自己公司的實(shí)際情況，制作出一個(gè)適合自己的，扁平快的規(guī)范文檔，讓規(guī)范能真正發(fā)揮它的作用。

做規(guī)范就像找對(duì)象，永遠(yuǎn)有更好的，但是更好的不一定是最合適的。第一次分享給大家覺(jué)得還不錯(cuò)的小伙伴幫忙投個(gè)選票吧，我會(huì)在以后的工作上繼續(xù)總結(jié)更多更好的設(shè)計(jì)規(guī)范給大家，希望對(duì)設(shè)計(jì)感興趣的你有幫助！

或者你有更多 的意見(jiàn)和建議都可以留言告訴我哦！愛(ài)你！