在做app設(shè)計(jì)時(shí)，或者說開始任何一個(gè)新項(xiàng)目設(shè)計(jì)時(shí)，建立設(shè)計(jì)規(guī)范是非常有必要的。下面我舉例來說明如何在sketch中建立一套高效、實(shí)用的設(shè)計(jì)規(guī)范。
首先說一下涉及到的軟件功能：
1、Create symbol、symbol
2、styled Text、Create new Text Style
其次說一下關(guān)于建立設(shè)計(jì)規(guī)范與設(shè)計(jì)頁面的先后關(guān)系，根據(jù)個(gè)人習(xí)慣和能力，可以選擇：
1、先建立一個(gè)套設(shè)計(jì)規(guī)范，然后按照設(shè)計(jì)規(guī)范來設(shè)計(jì)頁面。
2、先設(shè)計(jì)頁面，根據(jù)設(shè)計(jì)的頁面整理出一套設(shè)計(jì)規(guī)范。
本次將選擇第二種方式講解，原因是這樣方便理解，且門檻很低，哪怕你是一個(gè)新手。
設(shè)計(jì)頁面就不在說了，直接進(jìn)入建立
準(zhǔn)備工作1
整理好自己設(shè)計(jì)的頁面，按各個(gè)模塊排列好，根據(jù)自己的習(xí)慣，怎么排都行。例如：
準(zhǔn)備工作2
建立Symbols頁面。你可以選擇任意一個(gè)icon，點(diǎn)擊【Create symbol】，就會(huì)出現(xiàn)Symbols頁面，點(diǎn)擊進(jìn)Symbols頁面你可以看到剛才那個(gè)icon。
現(xiàn)在我們要在Symbols頁面中整理我們的設(shè)計(jì)規(guī)范了。根據(jù)頁面的和項(xiàng)目的不同，最后建立的規(guī)范內(nèi)容多少和類型都有所差別。本次我從一個(gè)APP設(shè)計(jì)中挑選了如下幾個(gè)頁面作為例子來講解。
規(guī)范大致分為：顏色、字體、字號(hào)、icon、按鈕、導(dǎo)航、列表...等一切具有公共組件屬性的東西都可以放在設(shè)計(jì)規(guī)范中，現(xiàn)在我們將一項(xiàng)一項(xiàng)說。
第一部分：顏色
規(guī)范中的顏色一般分這幾類：主題色、背景色、文字色、提示色。步驟如下：
1、建立80*80（尺寸隨意）的畫板，繪制一個(gè)矩形，填充上顏色對(duì)應(yīng)的顏色。
2、對(duì)該畫板進(jìn)行命名，例如：顏色/主題色。（這個(gè)名字就是之后建立symbol的名字）
3、選擇畫板，點(diǎn)擊【Create symbol】。
有多少個(gè)顏色就重復(fù)多少次，最后你將會(huì)在頂部工具欄的symbol看到。
第二部分：icon
這個(gè)很簡(jiǎn)單，將你所有用到的icon，全部粘貼到Symbols頁面中，歸類排列好命好名，然后選擇畫板，點(diǎn)擊【Create symbol】即可。例如：
畫板命名技在之前的如何切圖中提到過：http://www.itdecent.cn/p/0d2430e4c9f8
第三部分：文字
1、這個(gè)也很簡(jiǎn)單，先不用建畫板，將你用到文字都輸入進(jìn)去，排列整體，有規(guī)律的命好名。整理好后，在建立畫板，把這些內(nèi)容都框起來。比如：
最后整理出來的字體里可能有一些在設(shè)計(jì)圖上并沒有用到的，但是也要先放上去，比如：提示文字中白色的那個(gè)，設(shè)計(jì)圖上并沒有用上，但為保證規(guī)范輸出物的統(tǒng)一性和之后的可擴(kuò)展性，還是放上的比較好。
2、選擇一個(gè)文字，點(diǎn)擊右側(cè)屬性欄中No Text Style > Create new Style，然后重命名即可。以此類推將所有文本都Create new Style。查找可點(diǎn)擊Styled Text，就能看到。
第四部分：通用模塊
我們暫且把任何具有一定規(guī)律和通用性的部分稱為通用模塊，比如：導(dǎo)航、表單、按鈕、卡片等。以下將抽出幾塊內(nèi)容舉例說明怎么整理。
舉例1：標(biāo)題欄
1、首先分解元素，此標(biāo)題欄有四個(gè)元素組成分別是：文本、icon、背景、分割線。文本和背景之前我們已建立好規(guī)范。背景和分割線我們可以將它做在一起，矩形加0.5px描邊。所以我們首先需要再建一個(gè)symbol。如圖：新建80px*48px的畫板，因?yàn)楸韱纬叽缫话銥?8px，由于是做的1倍設(shè)計(jì)圖，所以描邊是0.5px。
2、現(xiàn)在標(biāo)題欄中所有的元素均已有對(duì)應(yīng)的symbol。新建一個(gè)畫板750px*48px，點(diǎn)擊頂部工具欄中的symbol選擇對(duì)應(yīng)的元素，放置到這個(gè)畫板里排列好。輸入文字，點(diǎn)擊右側(cè)屬性欄中No Text Style選擇對(duì)應(yīng)的文字樣式。最后選擇畫板點(diǎn)擊【Create symbol】再生成一個(gè)symbol即可。
symbol中的東西是可以改變大小的，比如：列表背景可根據(jù)需要的寬的設(shè)定它的尺寸。
舉例2：按鈕
1、同上，分解元素，補(bǔ)充缺失symbol。次按鈕包含兩個(gè)元素，其中背景的色塊是缺失的，所以現(xiàn)在要新建一個(gè)按鈕背景symbol，新建80px*48px的畫板，畫一個(gè)圓角矩形，填充上主題色，將畫板命好名后選擇畫板點(diǎn)擊【Create symbol】即可。
2、創(chuàng)建按鈕symbol，新建80px*48px的畫板，將所需元素放置在畫板中，排列好，然后選擇文字，點(diǎn)擊右側(cè)屬性欄中Rasizing > Fix Width，此功能是為保證創(chuàng)建的symbol在橫向拉伸時(shí)文字適中居中。最后將畫板命好名后選擇畫板點(diǎn)擊【Create symbol】即可。
舉例3：卡片
繪制所需矩形，用插件content Generator > Images > Apply from folder，選擇圖片。填充好之后將畫板命好名選擇畫板點(diǎn)擊【Create symbol】即可。
總結(jié)：
以上舉了三個(gè)例子，任何一塊內(nèi)容都能做成symbol，原理很簡(jiǎn)單，以最小的基本元素作為一個(gè)symbol，symbol+symbol組成新的symbol，每一個(gè)symbol都是一個(gè)變量，在使用的時(shí)候選擇替換即可。根據(jù)項(xiàng)目的不同整理出來的內(nèi)容看起來也會(huì)有所差別。例如：
