這樣使用Sketch的Symbol功能，能極大提高你的工作效率！

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

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

1. 常用組件規范化

當我們在做一套app界面或者網頁界面中，肯定會有很多共用的按鈕、圖標、導航條等一些組件，這時候Symbol就要閃亮登場了，我們只要把繪制好的組件點擊了Create Symbol就可以生成一個Symbol，生成的Symbol內容會自動添加到Pages－Symbols頁面中，你可以在Symbols頁面中管理你新建的Symbol。

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

這樣組件化的制圖會讓整個設計界面的元素都更加規整和嚴謹，更加便于修改。

組件化開發好文：

1. 《這篇8000字長文，能幫你學會組件化設計與開發的思維方式》
2. 《進階必讀！可能是最全面的組件化開發與設計指南》

2. 界面集成化

設計界面時，總免不了會設計表格或列表，因其整體性的特點，在后期修改或者調整時就變成了牽一發而動全身。在無形中加大了我們的工作量，那這時候Symbol又要閃亮登場了。

一套完整的界面控件肯定不會太少，如果全都建立Symbol肯定會加大文件的負擔，也不便于我們管理，這時候就要將Symbol重復利用起來。

如圖這種導航條，肯定會出現在不同的頁面，且每個頁面中都會顯示不同的點擊效果，如果要將導航條建立Symbol，那就要建立5個出于不同點擊狀態的導航條。但是sketch4.0版本又增強了Symbol的切換功能，讓一個Symbol就可以切換到不同的狀態。

首先確定導航欄有哪些元素，

• 圖例中的5個導航標簽，都需要有默認態和激活態，
• 每一個導航標簽下方都有對應的滑動條，
• 右方的更多按鈕

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

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

圖層排列如下

然后建立為一個新的Symbol-navigation，在一個新的畫布中導入Symbol-navigation后，然后在右側就會顯示：

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

tips：如果沒有輸入新的替換內容，默認就是創建文本內容，如果想要隱藏文本內容，輸入一個空格，就行。

這時我們就可以把除了跟進項的默認態及后面四個導航標簽的激活態輸入空格，則會為空顯示：

接下來就來設置圖標和滑動條了。

點擊圖標的篩選框：

可以看到所有創建為同等尺寸的Symbol-icon都在篩選框中，且可以選擇None，就為空顯示。這時我們就可以將激活態的圖標為空顯示。同理設置滑動條，把Slider2-5篩選框選擇為None

這樣一個跟進頁的導航就成功完成了，同理于上述操作同樣可以切換到資料頁等導航，就不再贅述。

完成了這樣一個入門版的Symbol嵌套，就可以同理運用到一些資料頁。

這種排版的資料頁是最普通也是最常見的，設計出圖肯定要默認態、選中態、輸入態、輸入錯誤多種樣式，使用Symbol也可以一鍵切換到不同的狀態中。

首先，確定好輸入框的各類狀態，并分別建立對應的Symbol－input：

就可以開始制作單獨的資料條了，新建一個標注，再引用任意一個剛剛創建的輸入框，再次建立為Symbol－item。

現在開始引用Symbol－item到界面時，右側編輯項就會這樣顯示：

點擊input的篩選框，又會出現很多備選的input狀態，這是只需要在界面上選擇即可隨意切換狀態。

總結：制作一套系統界面時，在設計工作前期確定好Guideline后，在將各類控件統一建立為Symbol，在后期制作頁面時，就只需往上推切就行，且很方便后期修改調整。

最后的最后，說一句，Symbol不能多文件共享，但是目前Craft插件可以實現多文件共享，但親測并不好用，插件反應慢且不穩定，逼不得已的話并不推薦使用。

歡迎關注點融設計中心DDC微信公眾號：「ID：DR_DDC」

「Sketch 全方位使用指南」

1. PS 和 Sketch 哪個好用？丨《巔峰對決！新晉神器SKETCH VS. 經典老炮PHOTOSHOP》
2. 新手使用技巧丨《SKETCH新手指南！10個幫你UI設計提速的SKETCH使用技巧》
3. 達人使用技巧丨《幫到心坎了！一組實用熱門的SKETCH技巧幫你快速過稿》
4. 好用的Sketch 插件丨《快成一道閃電！讓你設計效率疾速提升的免費SKETCH插件》
5. Windows 用戶福利丨《用虛擬機體驗Sketch！為設計師準備的MAC OSX安裝指南》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com