三步學會用 Sketch 把24種樣式的「開關」裝進一個 symbol

希臘先賢赫拉克利特曾說過，人不能兩次踏入同一條河流。

但人卻可以把三種樣式、四種狀態、五種顏色的交互控制項「開關」裝進同一個 symbol。

希望大家通過閱讀本文，成為這樣的人。

閱讀信息：

• 閱讀時間：6m 20s
• 流量預估：2.6MB
• 操作時間：20m
• 軟體版本：v46.1

相關下載：

• 軟體下載：[Sketch 官方試用下載]
• 教學材料：[百度網盤 - 教學材料]

效果預覽：

上圖所有樣式的「開關」都是出自同一個 symbol，所謂「天下武功出少林」，大家往下看，只要理解一些概念就很好上手，不用zigong。

第一步，設置狀態：

首先，如圖所示，筆者列舉下控制項「開關」常見的四種狀態。

打開 Sketch 並繪製四個狀態的 symbol，然後在 symbol 頁統一設置四個 symbol 圖層的尺寸為「51 x 31」。

Tip：這裡涉及到一個知識點「nesting symbols」。即在 A symbol 中放置 B symbol，那麼 A symbol 在使用時會有一個可複寫的屬性 B，點開後可看見所有和 B symbol 同一尺寸的 symbol，點擊後可以替換原來的 B symbol。更具體的說明，可以參考 Sketch 官方文檔「Nested Symbols」。

再繪製一個 symbol，把之前的四個狀態中選取一個放置進去。這個尺寸不能和狀態 symbol 一樣，所以我們設置為「53 x 31」。Symbol 圖層命名為「?Status」，方便複寫時辨別內容。

階段檢測，插入上一小步中繪製的 symbol，會有上圖所示的效果。

第二步，設置顏色：

選取筆者生活中常見的五種顏色來給「開關」symbol 上色，它們涉及了我的衣食住行、喜怒哀樂。注意，這裡的微綠是「微信」綠，不是「微博原諒」綠。??????

Tip：命名方式，採用「／」進行分割，這樣在複寫時，同一「／」下的 symbol 會歸為一組。具體效果在隨後的動圖中可以查看。

根據前面的知識，我們在 symbol 頁統一設置五種顏色的尺寸為「10 x 10」。

如上圖所示，給「開關」的背景蒙上顏色。顏色 symbol 命名為「?Background Color」，方便複寫時辨別內容。

這時候，插入背景蒙上顏色的「開關」symbol，會有上圖所示的效果。

第三步，設置樣式：

重複第二步和第三步，繪製出三種設計風格的各個狀態的「開關」。注意 Material Design 中的開關按鈕和背景都要蒙上顏色圖層。可以參考下面各個設計規範中對「開關」的具體定義。建議尺寸如圖所示。

• [Switch - Components - Material design guidelines]
• [Switch - Clarity Design]
• [Switches - Controls - iOS Human Interface Guidelines]

最後，我們定義一個叫「Switch」的 symbol，萬劍歸宗。

這時候，插入「Switch」symbol，會有上圖所示的效果。可以變設計風格、狀態以及顏色。

我是 Teambition 的交互設計師徐小馬（微信：heiheilaugh），歡迎交流，請註明知乎 ID，希望大家能帶著問題或意見來找我。

如果覺得教程具有可操作性，不妨抽出一盤王者榮耀的時間跟著做一遍，一定能學會的。??????

素材分享：

• [Mockups4K: MacBook]
• [Material Design Icon Patterns]
• [Simple Line Icons]

Sketch 插件：

• 十分鐘了解兵器榜排行第一的 Sketch 插件 ：CRAFT
• 五分鐘了解谷歌全棧設計師打造的 Sketch 插件：Sketch Material
• 五分鐘了解微信團隊打造的 Sketch 插件 ：WeSketch

Graffle 教程：

• 三步學會用繪圖利器 OmniGraffle 繪製流程圖
• 三步學會用繪圖利器 OmniGraffle 搭建一篇新文檔

最後，多謝大家的時間，祝大家青出於藍

推薦閱讀：