@燒燉：2018年的七夕是個星期五。晚上7點，設計師小王正在收拾東西，他和隔壁組的小姐姐約好了去看電影，打算7:30下班。正收拾著，收到了 Leader 發的消息：
時間只剩半小時了，小王該怎么辦？
幾乎每位設計師都有這樣的經驗：在做用戶界面設計時，我們很難能一次定稿，大部分工作時間都花在了改動上。
所以，提升設計師工作效率的關鍵，就在于減少設計改動的時間。
今天我要講的，就是利用 Sketch 的元件（Symbol）功能減少設計改動耗時，來大幅提高設計效率。
在 Sketch 漢化插件中，Symbol 被翻譯為「符號」。但鑒于 Sketch 與曾經如日中天的 Flash 中的 Symbol 作用十分相似，故下文中統一使用 Flash 官方中文版里 Symbol 的翻譯：元件。
所以，這篇文章的正經名字應該是：Sketch Symbol 深度指南。
一、入門：元件的基礎用法
如上圖所示，在三個畫板中都有同樣的圖標。這是在設計工作中常出現的情況，比如一套移動端界面中，不同頁面的底部 Tabbar 中都有著相同的圖標。
假如在設計評審后，需要統一修改這個圖標的顏色，又或是調整一些細節，怎樣操作最快呢？
一個個選中，再統一修改，選擇起來慢不說，還容易出現遺漏的情況。先修改一個，再復制粘貼，又會浪費不少的時間。
讓我們用 Sketch 的元件來簡化這漫長而枯燥的過程。
1. 創建、使用、編輯元件
創建一個新元件非常簡單。選中要轉化為元件的內容，點擊頂部工具欄的 Create Symbol 按鈕，就可以轉化為元件。
轉化為元件的內容，可以直接復制，或在頂部 Symbols 菜單中選擇使用。
在組件上雙擊，或在 Symbols 頁面找到對應元件，即可進行編輯。編輯完成后，文件內所有用到該元件的地方都會實時變化。
2. 元件的復制、分類、替換
如果想以某個元件為樣板，創建類似的元件，可以在 Symbols 頁面中直接復制。在左側列表中右鍵選擇 Duplicate ，或按住 Alt 拖拽畫板。
在給元件命名時，可以使用斜線「/」進行分類，將不同類型的元件組織起來。
在畫板中選擇一個元件，在右側的面板中可以將它替換為其他元件。替換的菜單中默認展開了當前元件所在的分類，便于在一個分類下進行切換。當然，也可以選擇其他分類下的元件進行替換。
掌握了元件的基本操作后，諸如「給所有頁面中的按鈕換個顏色」、「改一下底部標簽欄中的圖標，重新輸出一遍效果圖」這類問題，再不會浪費那么多時間了。
二、進階：元件的可變內容
將上述的元件基礎用法代入實際工作中，我們不難想到幾類問題：
- 把按鈕做成元件，在不同的場合，按鈕的文字可能會不一樣，該怎么辦？
- 要是把用戶頭像做成組件，怎樣在不同頁面中給頭像填充不一樣的圖片？
- 如果做一個帶圖標的按鈕組件，里面的圖標怎么替換？
別擔心，在 Sketch 中，元件的一部分內容是「可變」的。在每一處使用元件的地方，都可以在右側的 Overrides 面板中修改元件的可變內容。
元件的可變內容有文本、圖片、元件內的元件三種，讓我們一個個來看。
1. 可變的文本
元件內的文本默認都是可變的。對于不需要可變的文本，可以將它鎖定（如上圖中的「下載文件」文本）。
元件內的圖層名將被 Sketch 用做可變內容的標題，圖層的內容則被作為默認內容。
所以，如果你和我一樣，看那個「001.pdf」的標題很是難受，就可以像上面這樣修改。
2. 可變的圖片
元件內的可變圖片，可以通過將元件內圖形圖層的填充改為圖像模式來實現。
當然，可變圖片的透明度、填充方式（Fill/Fit/Stretch/Tile）等屬性也與元件內的設置保持相同。
3. 可變的子元件：元件內的元件
在元件內使用的元件被稱作子元件，在元件的 Overrides 設置中，可以選擇替換不同的子元件，也可以直接對子元件的可變內容進行設置。
在替換時， Sketch 只允許用同原始尺寸的元件進行替換。在替換后，子元件內同名的可變內容將被保留。
當我們將文字、圖片、子元件組合起來使用后，可以實現復雜的組件化。在做諸如信息流、聊天列表、會話界面這類包含復雜重復內容的設計時，就能事半功倍了。
三、高級：元件中的排版
在利用元件進行設計時，我們還會遇到一些和排版有關的問題，比如：
- 把語音對話氣泡做成元件，長度可變，右側的未讀紅點要怎樣處理？
- 將輸入狀態的文本框做成組件，有沒有辦法讓光標跟著文字走？
這些問題，大都可以使用 Sketch 中的「縮放控制」（Resizing）、「文本的內容跟隨」兩個特性來解決。
1. 縮放控制：位置與尺寸
在 Sketch 中，縮放控制（Resizing）是實現動態排版的主要方法。我們可以給每個圖層設置 Reszing 屬性，來控制圖層內容在縮放時的表現。在上圖中，可以直觀的看到 Resizing 在縮放時起到的作用。
具體的控制關系如下：
讓我們回到本章開始時第一個的問題：把語音對話氣泡做成元件，長度變化時右側的未讀紅點要怎樣處理？
為元件內的各個圖層設置不同的縮放屬性，就可以完美實現我們要的效果。如果將紅點做成了子元件，還可以切換是否顯示紅點。
2. 文本的內容跟隨
Sketch 的元件中有個很神奇的特性，我將其譯作「內容跟隨」。
如上圖，當文本被尺寸設置為 Auto 時，根據對齊方式的不同，其尺寸可變的一側（左對齊文字的右側，右對齊文字的左側，不包括居中對齊）的組或圖層會與文本保持固定的距離，距離限制為20px，超出這個距離的內容將不會跟隨。
內容跟隨甚至支持多個圖層的連續跟隨。利用這種特性，就可以做出固定間距、固定分隔圖形的文字導航欄。
3. 固定尺寸的深入研究
固定尺寸固定的究竟是什么？我們來做個實驗：
將元件內文本和光標打組，將組的寬度固定，并不會影響文本長度的自動變化，以及文本后方的內容跟隨。
結論是：在 Sketch 中，「固定寬度/高度」只會確保組/圖層的尺寸不會被「外部」縮放所改變，并不會限制其「內部」產生的尺寸變化，也不會影響其內部文本在尺寸變化后的「內容跟隨」。
四、關于Sketch 52 Beta...
在我正寫這篇文章的9月20日凌晨，Sketch 發布了52 Beta，更新了非常多的特性：
全新設計的軟件界面，用戶體驗更好；文字、組件可以與圖形進行布爾運算；最令人激動的是，組件內的可變內容（文本、圖層）支持直接修改樣式；并且還可以將外部數據（文本、圖片等）加載進 Sketch ，與設計內容進行關聯。
關于 Sketch 52 的這些新功能，在正式版發布后我會寫一篇文章專門講解。現在，讓我們先大概感受一下：
相信等到正式版發布后，體驗更好的新界面和實用的新功能可以讓我們的設計效率進一步提升。
五、一點建議：嘗試新的工作流程
在使用 PS、AI 做界面設計的時代，很多設計師會先做第一個元素，然后復制多份，再修改復制的內容。這樣的流程習慣一直延續到了 Sketch 時代。
而這種基于復制粘貼的傳統方式，一旦設計圖發生改動，就需要浪費大量的時間去進行調整。
現在，有了 Sketch 元件這個新武器，如果在一開始就將可能會重復出現、產生改動的內容做成元件，將能為后續的設計工作節省大量的寶貴時間。
有時會聽到一些設計師抱怨，說工作又多又煩，周末好不容易休息一下，根本沒時間學新技能。但或許，不愿意主動學習新技能，正是工作又多又煩的原因之一呢？
六、福利：送一個源文件
最后，分享一份我做的用于演示 Sketch Symbol 功能的源文件，包含聊天 App 會話列表、會話詳情兩個頁面的完整組件化示例，以及一個固定間距的 N宮格組件化示例。
源文件：https://pan.baidu.com/wap/init?surl=DQkcGY23kNPg_bAAvtLHbQ? 密碼：2dt8
歡迎關注作者的微信公眾號：「燒燉」
「提升效率的Sketch功能」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發表評論 為下方 13 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓