Sketch作為一個(gè)新生的設(shè)計(jì)工具，雖然在功能上沒(méi)有Photoshop那么完備，但是勝在其輕量級(jí)，完美告別PS的卡頓和無(wú)處不在的加載條，再有畫(huà)布和多倍切圖等功能加持，成功上位成為UI設(shè)計(jì)師的首選制圖工具。更重要的是Sketch中還有個(gè)很便捷的操作功能，能在工作中極大的提高工作效率，那就是Symbol符號(hào)功能。

Symbol可以讓你在多個(gè)頁(yè)面和畫(huà)布上重復(fù)使用一組內(nèi)容文本或樣式，但是它們只能保存在一個(gè)Sketch文件內(nèi)，不能多個(gè)文件共享（下文再介紹一個(gè)插件即可在多個(gè)文件中共享Symbol內(nèi)容）。

1. 常用組件規(guī)范化

當(dāng)我們?cè)谧鲆惶譨pp界面或者網(wǎng)頁(yè)界面中，肯定會(huì)有很多共用的按鈕、圖標(biāo)、導(dǎo)航條等一些組件，這時(shí)候Symbol就要閃亮登場(chǎng)了，我們只要把繪制好的組件點(diǎn)擊了Create Symbol就可以生成一個(gè)Symbol，生成的Symbol內(nèi)容會(huì)自動(dòng)添加到Pages－Symbols頁(yè)面中，你可以在Symbols頁(yè)面中管理你新建的Symbol。

或許很多小伙伴一鍵Alt拖拽也能達(dá)到同樣的效果，但當(dāng)你完成所有界面設(shè)計(jì)之后，需求又讓你改某些組件的顏色，尺寸，文本內(nèi)容的時(shí)候，一鍵Alt就顯得不太友好了。但是使用Symbol就會(huì)完美避開(kāi)這個(gè)尷尬，你不用一個(gè)一個(gè)的去修改樣式內(nèi)容，只需要雙擊Symbol在Symbols頁(yè)面中修改起樣式內(nèi)容，其余頁(yè)面中引用了該Symbol內(nèi)容都將發(fā)生改變。

這樣組件化的制圖會(huì)讓整個(gè)設(shè)計(jì)界面的元素都更加規(guī)整和嚴(yán)謹(jǐn)，更加便于修改。

2. 界面集成化

設(shè)計(jì)界面時(shí)，總免不了會(huì)設(shè)計(jì)表格或列表，因其整體性的特點(diǎn)，在后期修改或者調(diào)整時(shí)就變成了牽一發(fā)而動(dòng)全身。在無(wú)形中加大了我們的工作量，那這時(shí)候Symbol又要閃亮登場(chǎng)了。

一套完整的界面控件肯定不會(huì)太少，如果全都建立Symbol肯定會(huì)加大文件的負(fù)擔(dān)，也不便于我們管理，這時(shí)候就要將Symbol重復(fù)利用起來(lái)。

如圖這種導(dǎo)航條，肯定會(huì)出現(xiàn)在不同的頁(yè)面，且每個(gè)頁(yè)面中都會(huì)顯示不同的點(diǎn)擊效果，如果要將導(dǎo)航條建立Symbol，那就要建立5個(gè)出于不同點(diǎn)擊狀態(tài)的導(dǎo)航條。但是sketch4.0版本又增強(qiáng)了Symbol的切換功能，讓一個(gè)Symbol就可以切換到不同的狀態(tài)。

首先確定導(dǎo)航欄有哪些元素，

圖例中的5個(gè)導(dǎo)航標(biāo)簽，都需要有默認(rèn)態(tài)和激活態(tài)，

每一個(gè)導(dǎo)航標(biāo)簽下方都有對(duì)應(yīng)的滑動(dòng)條，

右方的更多按鈕

tips：頁(yè)面中的圖標(biāo)或者形狀組件都最好都分別創(chuàng)建為Symbol-icon、Symbol-slider，等下就知道其方便之處了。

然后把所有元素的所有狀態(tài)都排列到一起，就像這樣：

圖層排列如下

然后建立為一個(gè)新的Symbol-navigation，在一個(gè)新的畫(huà)布中導(dǎo)入Symbol-navigation后，然后在右側(cè)就會(huì)顯示：

這是就可以清晰的看到，文本內(nèi)容都帶有輸入框，可自定義內(nèi)容。

tips：如果沒(méi)有輸入新的替換內(nèi)容，默認(rèn)就是創(chuàng)建文本內(nèi)容，如果想要隱藏文本內(nèi)容，輸入一個(gè)空格，就行。

這時(shí)我們就可以把除了跟進(jìn)項(xiàng)的默認(rèn)態(tài)及后面四個(gè)導(dǎo)航標(biāo)簽的激活態(tài)輸入空格，則會(huì)為空顯示：

接下來(lái)就來(lái)設(shè)置圖標(biāo)和滑動(dòng)條了。

點(diǎn)擊圖標(biāo)的篩選框：

可以看到所有創(chuàng)建為同等尺寸的Symbol-icon都在篩選框中，且可以選擇None，就為空顯示。這時(shí)我們就可以將激活態(tài)的圖標(biāo)為空顯示。同理設(shè)置滑動(dòng)條，把Slider2-5篩選框選擇為None

這樣一個(gè)跟進(jìn)頁(yè)的導(dǎo)航就成功完成了，同理于上述操作同樣可以切換到資料頁(yè)等導(dǎo)航，就不再贅述。

完成了這樣一個(gè)入門(mén)版的Symbol嵌套，就可以同理運(yùn)用到一些資料頁(yè)。

這種排版的資料頁(yè)是最普通也是最常見(jiàn)的，設(shè)計(jì)出圖肯定要默認(rèn)態(tài)、選中態(tài)、輸入態(tài)、輸入錯(cuò)誤多種樣式，使用Symbol也可以一鍵切換到不同的狀態(tài)中。

首先，確定好輸入框的各類(lèi)狀態(tài)，并分別建立對(duì)應(yīng)的Symbol－input：

就可以開(kāi)始制作單獨(dú)的資料條了，新建一個(gè)標(biāo)注，再引用任意一個(gè)剛剛創(chuàng)建的輸入框，再次建立為Symbol－item。

現(xiàn)在開(kāi)始引用Symbol－item到界面時(shí)，右側(cè)編輯項(xiàng)就會(huì)這樣顯示：

點(diǎn)擊input的篩選框，又會(huì)出現(xiàn)很多備選的input狀態(tài)，這是只需要在界面上選擇即可隨意切換狀態(tài)。

總結(jié)：制作一套系統(tǒng)界面時(shí)，在設(shè)計(jì)工作前期確定好Guideline后，在將各類(lèi)控件統(tǒng)一建立為Symbol，在后期制作頁(yè)面時(shí)，就只需往上推切就行，且很方便后期修改調(diào)整。

最后的最后，說(shuō)一句，Symbol不能多文件共享，但是目前Craft插件可以實(shí)現(xiàn)多文件共享，但親測(cè)并不好用，插件反應(yīng)慢且不穩(wěn)定，逼不得已的話并不推薦使用。

作者：點(diǎn)融網(wǎng)DDC