給iOS開發者的Sketch入門教程

作者： Robert Chen 譯者： Andy矢倉  

原文： Sketch Tutorial for iOS Developers

作為一名iOS開發者，我經歷過幾個沒有設計師的項目，結果就是，痛苦的一逼。
做這種類型的項目，設計是非常重要的，特別是迭代設計。
在每個項目最開始的時候，客戶其實并不知道自己想要什么。直接堆碼之前我們還是有點小小的設計知識更有助于你跟客戶撕逼的時候占上風，其實我們只是想更完美，難道不是嗎？

開始

模板 - Templates

畫板 - Artboards

你可以在Sketch這個無限大的畫布上繪制你想要的任何圖形，如果你要展現多個App屏幕的內容，那就要通過 畫板 這個東西。畫板組織一個固定的畫布圖層。當你導出畫板，所有的圖層將會合并成一個單一的文件。這里可以把它看做成Xcode里一個Storyboard的控制器場景(ViewController Scenes)。

通過執行以下步驟來創建一個新的畫板：

• 拖動畫布，移動到一個空白區域。

• 從左上方第一個功能按鈕 Insert ，單擊選擇 Artboard 。

• 在出現的右窗格中，選擇 iPhone6 尺寸。

復制，粘貼

基礎形狀 - Basic Shapes

首先，新開個文件或者在畫布上找個空白的地方插入一個畫板： Insert\Artboard
接著，我們來搞個圖形玩玩， Insert\Shape 選擇一個可用的形狀。

有了這些，你可以自己動手畫個機器人玩玩（過程中你可能需要調整下字體來達到相同的效果）。

制作圖形 - Styling a Shape

基礎的形狀雖然好，但是基本上不能給人留下深刻的印象，所以我們可以使用窗口右側的 Inspector 欄來編輯圖形的一些基礎屬性，比如顏色，邊框半徑啥的。這個東西你可以理解為 Xcode 的 Attributes Inspector 工具欄。

下面羅列的選項你可以多試試，熟悉一下：

• 位置/大小 - Position/Size：對于有的圖形或者畫布很難拖動調整，你就可以利用這個選項調整畫布，點擊 Size 選項中間的 小鎖圖標 可以鎖定比例，在調整大小的時候就會按照你想要的比例等比例縮放。

• 半徑 - Radius：這個選項應該不用解釋太多應該都懂，就是調增矩形邊角弧度半徑的的一個滑塊。

• 透明度 - Opacity：看名字也知道了，同上，不多解釋，下面會有很多示例。

• 填充 - Fills：使用顏色選擇器來改變圖層的填充色，也可以取消透明填充。

• 邊框 - Borders：設置邊框粗細和邊框顏色，也可以完全禁用它。

有了這些，你可以跟著下面的動態圖做學習下藥丸的制作：

• 使用快捷鍵 R 創建一個矩形。

• 通過調整矩形邊角半徑 Radius 到 100 讓其看起來像藥丸。

就如剛才說的一樣，你可以自己試試其他的設置，提升一下熟練度。

圖層列表 - Layer List

下列是圖層組管理常用的快捷鍵：

• ?G：選擇多個圖層拉進一個組。使用 ?-Shift-G 鍵取消組合。

• ?R：重命名選定的項目。Sketch里 回車鍵 只能展開組，不能重命名哈。

• ?-Option-Up/Down：快速移動在組內移動圖層，可以理解為iOS開發中視圖的層級 index 的移動。

• ?-Shift-L：鎖定圖層，讓其在畫布中不能被選擇，即便是在圖層列表選擇也不能編輯。這個功能將在下一節使用。

試試加些分組到你的 iPhone 畫板里，記得多練習下分組命名。

矢量工具 - Vector Tool

畫圓啊，矩形啊，線條這些都太low逼了，限制也比較多。接下來我們就試試矢量工具來把剛才這些基本圖形變變形。

用直線來畫圖形

您可以通過點擊創建任意多邊形，接下來試著做一個多邊形：

• 1.使用快捷鍵 V 激活矢量圖形工具。

• 2.開始畫梯形的邊角。

• 3.通過點擊起點閉合形狀。

• 4.點擊編輯按鈕 -  Edit ，拖動各個向量指向重新定位。

• 5.添加填充顏色 -  Fill 。

• 6.刪除邊框 -  Border 。

非常爽的是，因為Sketch可以讓你在事后重新定位每個矢量點，因此不需要你有很大的繪畫技巧就可以使用矢量工具。當你拖拽矢量點的適合還有跟 Storyboard 里面拖拽控件一樣，會有對齊提示，只不過這里是紅色的實現。

旋轉副本 - Rotate Copies

如果你以為這里就只是畫個梯形簡直圖樣，接著我們就使用旋轉副本功能來搞個風車耍耍。旋轉副本創建了復制圖形并給你創建了一圈，看起來有木有像個花瓣（像個毛）？又在瞎逼逼了，動手試試：

• 1.選擇菜單 Layer\Paths\Rotate Copies 。

• 2.輸入 3 ，制作三份副本（算上你畫的那個一個是四個）。

• 3.拖動白點，白點位置標示圓心，旋轉一圈，看看有沒有像銀行標志，手里劍，風車啥的。

Sketch的旋轉副本功能會自動創建一個循環副本，至于組合型，我們后面會講到。

剪刀 - Scissors

位于旋轉副本功能上面有個叫做 剪刀 - Scissors 的菜單選項。這里我們使用它投機倒把，創建一個WatchKit活動環耍耍：

• 1.創建一個圓（記住，使用快捷鍵 O 并按住 Shift 拖動出一個圓圈）。

• 2.取消填充 Fill 。

• 3.把邊框 Border 的值加大到 25 。

• 4.選擇菜單 Layer\Paths\Scissors 。

• 5. 剪斷 圓圈的左上部分。

• 6.旋轉邊框 Border 欄，點擊齒輪 Gear 按鈕。

• 7.在彈出的菜單里選擇圓端 rounded ends 選項。

這里說明一下，其實一個圓就是通過四個矢量點和四條矢量路徑回執而成，所以矢量路徑可以隨便干掉。

模式和操作棒 - Modes and Handles

• 直線模式 - Straight：這個模式沒有操作棒，意味著也沒有曲線變化，那當然也就是直線了。

• 對稱模式 - Mirrored：操作棒具有相同的長度，并形成一條直線，像飛機的機翼，操作棒是相互對稱的。所以使用這個模式創建的就是對稱曲線。

• 不對稱模式 - Asymmetric：操作棒任是一條直線，但它們可以有不同的長度。

• 不連續模式 - Disconnected：兩個操作棒相互獨立，既不對稱，長度也不相同。

貝塞爾曲線理論 - Bezier Curve Theory

其實你并不真的需要知道貝塞爾曲線背后的數學才能使用矢量工具 - 但是我偏不！ ：] 這里我有一個非數學的比喻，可以幫助了解計算機是怎么把這個東西畫到屏幕上的。
這里原作者使用了不恰當的棒球比賽模型來來舉例，里面沒有裁判，我也不太了解棒球規則，就不瞎逼逼了，按照我的理解來說。

• 1.綠色boy要直接沖回老家全壘打。

• 2.藍色boy去當然要截斷，沖向綠色boy，由于綠色boy是移動的，所以藍色boy的走位就是曲線運動。

• 3.然而下路的紅色boy心急比較重，不能眼看著綠色boy被干，當然要去KO藍色boy，所以紅色boy的走位也很風騷，也是曲線。

本壘和紅色boy的位置代表矢量點，綠色和藍色boy的位置就是操作棒。這樣紅色boy的運動軌跡就是 貝塞爾曲線 。

不知道這么說你們有明白了沒有，如果還沒明白，這里有個 可視化工具 ，自行解決了，貝塞爾說起來沒完沒了。

矢量操作棒上手

接下來我們動手創建一個地圖標記的圖標：

• 1.先在畫布上拉一個圓。

• 2.邊框 Border 設置為 15 。

• 3.進入編輯狀態（頂部工具條的 Edit ），選擇底部的矢量點。

• 4.把操作模式從 對稱模式 - Mirrored 改為 直線模式 - Straight 。

• 5.把底部的向量點向下拖動。

• 6.拖動 邊角 - Corners 滑塊的值到 35 （這里根據你圓的半徑自行更改，效果一樣就行）。

所謂的地圖標記就和上面示意圖一樣，點和圈之間的關系。后面的教程會對地圖標記做更詳細的介紹。

創建自定義圖標

• 1. 這個 是Logo的低像素版本。

• 2.把這張Logo扔進Sketch。

• 3.選中圖片，在右側的屬性編輯欄把 不透明 - Opacity 屬性改為 20% ，方便描邊。

• 4.使用快捷鍵 Command-Shift-L 把圖層鎖定，防止你不小心拖動了，鎖定之后圖層名稱旁邊會有小鎖的圖標。

• 5.快捷鍵 V 激活適量工具。

• 6.點擊Logo里圖形的每個頂點，半弧形的不用點，直接回到最開始的點來閉合矢量路徑。

• 7.在圖像路徑上雙擊即可進入編輯狀態。

• 8.重新定位沒有和圖形頂點重合的矢量點，我們要的就是完美（圖太小了別忘了放大后再定位）。

上述步驟搞完了我們現在可以開始搞剛從忽略的弧形了。這里我們將對剛才學到的模式進行活學活用。

• 1. 雙擊 起始點，模式會由 直線模式 - Straight 改為 對稱模式 - Mirrored 。

• 2.但是我們不是使用這個模式，切換到 不連續模式 - Disconnected 。

• 3.拉著右邊的操作棒變換弧形。

• 4.拉著左邊的操作棒和第二個矢量點重合，以免第一條直線變形。

• 5.如果第一個矢量點右邊的操作棒不能完美的畫出Logo對應的弧線，可以開啟Logo里弧形另外一邊的點，也就是倒數第二個點。

• 6.操作比作類似第一個矢量點的步驟，這里的目的只要把弧形調整完美即可。

這里運氣比較好，RW的Logo只有一條弧線，以此類推，你可以使用更多的點來描出更多復雜的曲線。有興趣可以去下載 Swift 的Logo來臨摹。過程中可以通過使用快捷鍵 Tab 來快速切換每個矢量點。

結合形狀

融合 - Union

融合 - Union 就是就是兩個圖形加起來，使用之前的藥丸和圓弄個云出來耍耍。

• 1.使用矩形創建一個小藥丸。

• 2.創建一個圓。

• 3.移動圓，使其和藥丸重合。

• 4.選中兩個圖形，點擊 融合 - Union 按鈕使其融合成一個圖形。

這里是不是很奇怪，兩個圖形的邊框直接就融合到一起了，這就是Sketch的神奇之處。

相差 - Subtract

相差是兩個圖形重合在一起，一個被另一個包含，所以大集合除去小集合還會有多余的，多余的就是相差的部分，如果不變理解，可以想象為數學減法，結果就是相減之后的部分。
雖然之前的地圖標記圖標看起來已經可以了，但是我們所謂社會主義的接班人，怎么可以這么輕易就完了呢，不行，還得在標記上戳個洞看起來才爽。那就利用剛才介紹的相差的知識這么干：

• 1.創建一個地圖標記圖標，這次不需要邊框，直接取消掉。

• 2.創建一個小圓圈，并拖入到標記里面去。

• 3.操作左側的圖層列表，把圓圈拖動到地圖標記圖層重疊到一個圖層下。

• 4.展開合并生成的新圖層。

• 5.確保圓圈圖冊在地圖標記圖冊上面。

• 6.這是圖層列表上地圖標記圖冊右側會有一個可彈出菜單。

• 7.菜單中選擇 相差 - Subtract 。

• 8.選中圓圈圖層，使用小箭頭微調位置即可。

這里總結一下知識點：

• 在圖層列表里可以拖拽合并生成新的圖層

• 當你合并圖層的時候，你基本不用操心，Sketch會幫你搞定你想要的。

• 對于這些過程，你只用保證孔在最前既可以，如果圖形小時，重新排列圖層位置順序即可。

填充、輪廓

這個節點，本教程為你準備了必須的 素材文件 。打開之后應該長這樣：

這套包含了單個示例和矢量圖標的素材方便你隨時查閱，這些素材都是在教程前后使用的。

Tab Bar 的圖標顏色變化是基于選中狀態，但是一些圖標有太多的空間，所以顏色變化太微妙。在這種情況下， 蘋果的人機界面指南 推薦使用單獨填充版本作為 selectedImage 。 RWDevCon 應用的樣本都有各自的 Tab Bar 獨立版本。

在剛才下載的素描文件里，有一個被稱為日歷入門的畫板，日歷圖標其中包含幾個幾何圖形合并的而來的圖標。就是一些簡單的幾何圖形拼湊而已，前面已經很好的演示過來。
下面我們來創建日歷圖標：

• 1.打開剛才的Sketch文件，在左側圖層列表展開 日歷入門 - Calendar Starter 畫板。

• 2.選中 日歷主體 - Calendar Body 部分和 分割線 - Separator 部分。

• 3.使用 相差 - Subtract 功能。

• 4.按住 Shift 再選中 Right Hole 圖層，還是使用 相差 - Subtract 功能。

• 5.同理，再把 Left Hole 圖層也重復上述步驟。

• 6.接著按住 Shift 再選中 Right Ring 圖層使用 融合 - Union 功能。

• 7.同理， Left Ring 圖層也這么照做。

通過相差和融合操作，現在的日歷入門的畫板上就只剩一個包含了剛才所有圖層的單圖層了，一切都看著泛綠。如果按照上述步驟操作之后和效果圖有什么出入，可以參照畫板下方的實例對照。
現在，來搞一個填充的圖標。是時候重新調整一下，讓其看起來像示例版本了。

• 1.在畫布上找到 日歷填充 - Calendar Fill 。

• 2.在圖層列表里展開 日歷填充 - Calendar Fill 。

• 3.再展開 日歷主體 - Calendar Body 圖層，并選擇 分割線 - Separator 圖層。

• 4.把 分割線 - Separator 圖層 高度 設置為 35 即可。

調整分割線高度的時候，Sketch不會有明確的高度指示，所以你可以選擇直接輸入數值。

圓形輪廓頭像

在應用中，往往用戶頭像都圓形邊框的。為了達到這種效果，我們將使用蒙版功能，這和相差功能很類似。但是，這不是從內掏空，而是從外延切掉。
下面我們來創建一個頭像：

• 1.在左側的圖層列表里展開 Greg Before 畫板。

• 2.在畫板里畫個圓出來，圓要足夠大，大到把整張臉都能遮住。

• 3.選擇名為 greg 的圖層和剛才創建好的圓形圖層。

• 4.確保頭像在蒙版的下面。

• 5.點擊 Mask 按鈕使用蒙版功能。

• 6.展開新合成的 圖層組 - greg ，然后選擇 蒙版圖層 - Mask 。

• 7.給蒙版圖層加上 邊框 ，使用四個方向鍵來移動蒙版位置。

跟相差功能在頂部剛剛相反，蒙版需要在圖層底部。

圖像導出

PNG

Sketch可以很容易的輸出各種尺寸的圖片：

• 1.在窗口右下方使用 圖層輸出 - Make Exportable 。

• 2.點擊 加號+ 增加一個@2x輸出。

• 3.再點擊 加號+ 增加一個@3x輸出。

• 4.最后點擊 導出Export 按鈕把三張圖片導出。

PDF

雖然每個圖像都可以導出@2x和@3x尺寸的圖，但是我們的 Xcode 早就支持 矢量圖像 ，而且還是 PDF 格式的矢量圖形，這就好比 帶了圖像的SVG 一樣。

• 1.在窗口右下方使用 圖層輸出 - Make Exportable 。

• 2.保持 1x 尺寸。

• 3.選擇 PDF 格式導出。

接下來我們把PDF格式的矢量圖形添加到Xcode的 素材管理分類 - Asset Catalog 里。

• 1.在 Xcode 里打開 Images.xcassets 。

• 2.創建一個新的 圖片集合 - New Image Set 。

• 3.在 屬性檢查器 - Attributes Inspector 中，把 縮放系數 - Scale Factors 從 Multiple 改為 Single Vector 。

• 4.把你的PDF扔進去即可。

有了這個矢量的PDF文件，Xcode會自動生成 @2x 和 @3x 圖，這樣不僅省去了PNG圖片還減少了圖片資源眾多管理，命名的麻煩，有沒有很爽的樣子？

結語

最后，非常感謝你們看完這邊教程，要是有什么不足或者意見，歡迎大家一起留言討論。