在做app設計時，或者說開始任何一個新項目設計時理澎，建立設計規(guī)范是非常有必要的。下面我舉例來說明如何在sketch中建立一套高效曙寡、實用的設計規(guī)范糠爬。
首先說一下涉及到的軟件功能：
1、Create symbol举庶、symbol
2执隧、styled Text、Create new Text Style
其次說一下關于建立設計規(guī)范與設計頁面的先后關系镀琉，根據(jù)個人習慣和能力，可以選擇：
1蕊唐、先建立一個套設計規(guī)范屋摔，然后按照設計規(guī)范來設計頁面。
2替梨、先設計頁面钓试，根據(jù)設計的頁面整理出一套設計規(guī)范。
本次將選擇第二種方式講解副瀑，原因是這樣方便理解弓熏，且門檻很低，哪怕你是一個新手糠睡。
設計頁面就不在說了挽鞠，直接進入建立
準備工作1
整理好自己設計的頁面，按各個模塊排列好，根據(jù)自己的習慣滞谢，怎么排都行串稀。例如：
準備工作2
建立Symbols頁面。你可以選擇任意一個icon狮杨，點擊【Create symbol】，就會出現(xiàn)Symbols頁面到忽，點擊進Symbols頁面你可以看到剛才那個icon橄教。
現(xiàn)在我們要在Symbols頁面中整理我們的設計規(guī)范了。根據(jù)頁面的和項目的不同喘漏，最后建立的規(guī)范內(nèi)容多少和類型都有所差別护蝶。本次我從一個APP設計中挑選了如下幾個頁面作為例子來講解。
規(guī)范大致分為：顏色翩迈、字體持灰、字號、icon负饲、按鈕堤魁、導航、列表...等一切具有公共組件屬性的東西都可以放在設計規(guī)范中返十，現(xiàn)在我們將一項一項說妥泉。
第一部分：顏色
規(guī)范中的顏色一般分這幾類：主題色、背景色洞坑、文字色盲链、提示色。步驟如下：
1迟杂、建立80*80（尺寸隨意）的畫板刽沾，繪制一個矩形，填充上顏色對應的顏色排拷。
2侧漓、對該畫板進行命名，例如：顏色/主題色攻泼。（這個名字就是之后建立symbol的名字）
3火架、選擇畫板，點擊【Create symbol】忙菠。
有多少個顏色就重復多少次何鸡，最后你將會在頂部工具欄的symbol看到。
第二部分：icon
這個很簡單牛欢，將你所有用到的icon骡男，全部粘貼到Symbols頁面中，歸類排列好命好名傍睹，然后選擇畫板隔盛，點擊【Create symbol】即可犹菱。例如：
畫板命名技在之前的如何切圖中提到過：http://www.reibang.com/p/0d2430e4c9f8
第三部分：文字
1、這個也很簡單吮炕，先不用建畫板腊脱，將你用到文字都輸入進去，排列整體龙亲，有規(guī)律的命好名陕凹。整理好后，在建立畫板鳄炉，把這些內(nèi)容都框起來杜耙。比如：
最后整理出來的字體里可能有一些在設計圖上并沒有用到的，但是也要先放上去拂盯，比如：提示文字中白色的那個佑女，設計圖上并沒有用上，但為保證規(guī)范輸出物的統(tǒng)一性和之后的可擴展性谈竿，還是放上的比較好团驱。
2、選擇一個文字榕订，點擊右側(cè)屬性欄中No Text Style > Create new Style店茶，然后重命名即可。以此類推將所有文本都Create new Style劫恒。查找可點擊Styled Text贩幻，就能看到。
第四部分：通用模塊
我們暫且把任何具有一定規(guī)律和通用性的部分稱為通用模塊两嘴，比如：導航丛楚、表單、按鈕憔辫、卡片等趣些。以下將抽出幾塊內(nèi)容舉例說明怎么整理。
舉例1：標題欄
1贰您、首先分解元素坏平，此標題欄有四個元素組成分別是：文本、icon锦亦、背景舶替、分割線。文本和背景之前我們已建立好規(guī)范杠园。背景和分割線我們可以將它做在一起顾瞪，矩形加0.5px描邊。所以我們首先需要再建一個symbol。如圖：新建80px*48px的畫板陈醒，因為表單尺寸一般為48px惕橙，由于是做的1倍設計圖，所以描邊是0.5px钉跷。
2弥鹦、現(xiàn)在標題欄中所有的元素均已有對應的symbol。新建一個畫板750px*48px爷辙，點擊頂部工具欄中的symbol選擇對應的元素惶凝，放置到這個畫板里排列好。輸入文字犬钢，點擊右側(cè)屬性欄中No Text Style選擇對應的文字樣式。最后選擇畫板點擊【Create symbol】再生成一個symbol即可思灰。
symbol中的東西是可以改變大小的玷犹，比如：列表背景可根據(jù)需要的寬的設定它的尺寸。
舉例2：按鈕
1洒疚、同上歹颓，分解元素，補充缺失symbol油湖。次按鈕包含兩個元素巍扛，其中背景的色塊是缺失的，所以現(xiàn)在要新建一個按鈕背景symbol乏德，新建80px*48px的畫板撤奸，畫一個圓角矩形，填充上主題色喊括，將畫板命好名后選擇畫板點擊【Create symbol】即可胧瓜。
2、創(chuàng)建按鈕symbol郑什，新建80px*48px的畫板府喳，將所需元素放置在畫板中，排列好蘑拯，然后選擇文字钝满，點擊右側(cè)屬性欄中Rasizing > Fix Width，此功能是為保證創(chuàng)建的symbol在橫向拉伸時文字適中居中申窘。最后將畫板命好名后選擇畫板點擊【Create symbol】即可弯蚜。
舉例3：卡片
繪制所需矩形，用插件content Generator > Images > Apply from folder偶洋，選擇圖片熟吏。填充好之后將畫板命好名選擇畫板點擊【Create symbol】即可。
總結(jié)：
以上舉了三個例子，任何一塊內(nèi)容都能做成symbol牵寺，原理很簡單悍引，以最小的基本元素作為一個symbol，symbol+symbol組成新的symbol帽氓，每一個symbol都是一個變量趣斤，在使用的時候選擇替換即可黎休。根據(jù)項目的不同整理出來的內(nèi)容看起來也會有所差別势腮。例如：
