四步上手設計神器 Sketch

02-09

有朋友問我能不能一下學會Sketch….冥思苦想後，終於總結出A.R.T.S四步上手法。

本文系sketch快速上手指南，適用於沒時間細細研究工具的同學。據內部線報，某寶UED全線交互&視覺，部分產品&開發已重度使用Sketch，甚至有小組專門開發相關插件。為了讓更多人體驗到Sketch的高效，以及回答『能不能一下就教會我怎麼用Sketch？』等老大難問題，我總結了使用Sketch的核心步驟，精簡為A.R.T.S四步。

1. 準備工具

一台Mac：希望PC同學看到這裡不要默默按下關閉… 話說Apple新一季正好到了，考慮一下？
Sketch軟體：雖說有試用版也有破解版，但699RMB的價格其實並不高。一個包包換一個設計師飯碗呢。而且軟體體積不到39M，跑起來飛快，啟動和等待時間幾乎忽略不計。實在不想花錢想先試試的話…天朝百度你懂的
Magic Mouse滑鼠（可選）：剛開始會覺得難用，但習慣後全方向移動畫布的感覺確實很贊。沒有觸控板的iMac強烈推薦。

2. ARTS 教程，只要四步

ARTS四個字母其實是Sketch的四個快捷鍵，也是使用流程中的四個重要步驟，分別對應 Artboard 「創建畫板」, Rectangle 「創建矩形」，Text 「創建文字」和 Slice 「創建切片」。這四個操作都可以在左上方的 Insert 新建菜單中找到，但記下這四個常用快捷鍵會極大地加快設計流程。

所以首次進入界面，不要被潔白的底色所困惑，請先按下A鍵，新建一個畫板。Sketch預設了很多尺寸的畫板，比如想設計 Iphone6 界面，按下A後直接選用右側的Iphone6即可。不要為畫板中默認被除以2的尺寸擔心，這是矢量作圖，後續切圖中你可以輸出任意你想要的尺寸。

如果預設中沒有想要的尺寸，你也可以在按下A後直接在界面中拖動滑鼠，建立任何尺寸的畫板，然後隨意地挪動它。所有畫板的尺寸，位置，和背景顏色，都可以在選中畫板後右側【屬性欄】中精確調整。你可以單擊畫板的名稱來選中畫板，或者在左側【圖層欄】中單擊它。

在完成多個畫板後，想把他們合到一張大的流程圖裡，並做好相應的標註和說明的話，你可以在所有畫板下新建一個大的畫板，把所有小畫板都裝起來，並在上面繪製相應的流程箭頭和說明。所有畫板都可以單獨輸出為一張圖，方法是選中畫板，在右側屬性欄中，點擊Export右側的加號，選擇想要的尺寸倍率和圖片格式，點擊右下角Export Artboard即可。

所有複雜的界面都由簡單的基本元素構成，作為交互來說，最常用的初始元素是矩形無疑。

單擊R並拖動滑鼠後，你會得到一個矩形為基本元素。單擊選中這個矩形後，即可在右側的屬性欄中任意改變它的位置尺寸，圓角半徑，透明度，顏色等。從一個簡單的矩形開始，他既可能成為一個重要元素的一部分（比如涉及千億流水的「購買」按鈕），也可以變成任意你能想像到的形狀。

雙擊這個矩形，即進入設計師們熟悉的貝塞爾曲線編輯(Edit)模式。選中已有的點即可編輯點的各項屬性，點擊矩形邊緣可以新增編輯點。按住shift或者直接拖動，即可選中並時移動多個編輯點。

如果想創建其他形狀的基本元素（比如圓形來表示頭像），也可以按下O並拖動來新建一個圓形（Oval），或者L來插入一條直線（Line）。多個圖形可以通過布爾運算迅速組合成新的圖形，方法包括「組合」，「相減」，「相交」和「相異」。這四個按鈕在上方工具欄，視覺同學用到它的次數會多一些。

Tips：如果想看到某個元素和其他臨近元素的距離，你可以選中它並按下alt。這能幫助設計師精確地調整布局。

文字是設計稿中必不可少的元素，合適的字體，尺寸和對齊方式足以花費設計師成噸的時間。

點擊T並拖動滑鼠來創建一段文字，文字常見的屬性都可以在右側調整。比較特殊的是寬度(Width)屬性，你可以選擇自動(Auto)來通過調節寬度以自適應高度，或者固定(Fixed)來固定文字寬高。注意在Fixed下，可能出現文字被裁剪的情況（特別是在增加字體大小之後）。

注意：Sketch對中文字體的顯示偶爾會出現小Bug，編輯時文字消失。大多數情況下切換寬度的兩個狀態就能刷新並解決這個問題。後續新版本有望解決。

當你已經建立了一個矩形並寫了一段文字後，你可能想把他們編輯到一個組（比方說設計一個按鈕），你可以按住 shift 同時選中要成組的元素，隨後按下Command + G 來讓他們成組（或者右鍵選擇Group Seletion）。之後再單擊他們時，默認會選中這個組。雙擊這個組可以在組內選中內部元素。同時你也能看到左側的圖層欄中，它們被放到了一個文件夾中，並可以被拖動來改變顯示的前後順序。

Tips：你可以按住Command 並單擊滑鼠左鍵來快速選中組裡最深層的內容。這在跨組複選元素時非常有用。
Tips2：按住alt並拖動元素，可以複製這個內容到指定的位置。這對單個元素，成組元素，乃至畫板都有效。這也是ps和ai里通用的複製方式。
當你想切出畫板內的一個部分而非整個畫板的時候，切片工具便派上了用場。與PS繁瑣的切圖工具不同，Sketch的切圖工具非常簡單直觀，按下S並拖出一個矩形即可 – 這個簡單的虛線矩形即是一個導出切片。

和所有其他元素一樣，切片有自己的圖層，也可以在右側改變它的各種屬性，唯一不同的是可以在右下導出這個切片里的內容，導出圖默認會以切面的圖層名稱命名。
如果已經做好了一堆切片，可又想改動切片底下的內容怎麼辦？只需點擊左下角選擇切片圖層或普通圖層的互動開關（默認都可互動）。關閉了切片的互動開關後，即可在不影響切片的情況下改變普通圖層，需要切圖時再點亮開關即可。
切片的另外一個被許多人稱道的功能，便是它自由的輸出尺寸。點擊切片並在右側屬性欄內改變Size內x乘的數值，便可以輸出任意倍率的圖片。你甚至可以添加多個尺寸，一次性輸出1x, 2x, 3x, 0.9x 甚至是10x圖到一個文件夾。你還可以直接通過修改Suffix（後綴）來提前命名導出圖，比如導出button_@2x.png, 拖進xcode便可自動識別圖片，省去了ios開發的繁瑣命名工作。
另外，sketch也是難得的可以輕鬆導出svg格式的輕量製圖軟體。這些細微的細節整合起來，組成了方便快捷的Sketch輸出方式。
- Tips: 切片和畫板的導出預覽圖，可以直接拖拽出來添加到文檔里，連導出的步驟都省了。
3. 進階功能冊
以下是一些讓工作更愉快的進階小技巧，有興趣可以看一下＝）
3.1 版本管理
版本管理是有條理歸檔交互稿的重要方法。可以通過Pages(頁面)的方式實現。點擊左上角當前頁面右側的方形小icon，即可展開Pages管理面板。一個Page頁面可以理解為存放Artboard畫板的空間，每次小版本的迭代，可以在這裡直接複製一個Page以版本號命名重命名，內部的畫板都會被複制。交互同學應該會覺得很熟悉 – 這樣的版本管理方式與Axure相近；而視覺同學也可以避免建立多個文件來管理版本的方式
3.2 標尺，格子和參考線
標尺是精細化設計的必備工具。按下ctrl + R 快速顯示標尺（Ruler），或者單擊右上角View也可以直接設置顯示/隱藏標尺，或者格子(Grid)。在菜單內settings裡面進行更詳細的設置。拉參考線的方式是在標尺上單擊，且參考線只能在標尺上被移動。如果把參考線拉出視窗外，參考線即被刪除，這點與Axure不同需要留意。
3.3 蒙板
蒙板可以做出很多有趣的設計。希望用上層作為遮罩顯示出下層的內容，只需要選中兩個重疊的元素並點擊頂部的Mask（蒙板）即可，他們會被合併在一個文件夾內，且上方的元素會成為蒙板，有顯著的小圓點標誌。你可以隨時拖動新的元素進入文件夾底部來作為隱藏內容，或者右鍵圖層並選中「Use as mask」，來讓新的圖層作為蒙板。
3.4 符號
許多共用元素可以通過「符號」來進行批量調整。選中一個可以復用的組元素（如按鈕，輸入框，菜單欄等），點擊左上方創建符號（create symbol），即創建了一個通用樣式的組元素，且左側圖層欄中文件夾的顏色變為了紫色。之後的設計中，你隨時可以通過左上角「插入」->「插入符號」 insert symbol 插入已經做好的這個組元素。任何對這個組元素的調整都會立即同步到所有符號中。
3.5 同步到手機
設計師經常會將設計稿導入手機以查看真機效果。你可以花點小錢另外購置Sketch Mirror的手機應用，然後通過點擊右上角的Mirror按鈕來無縫把設計稿同步到手機中。也可以像我一樣使用Principle等應用，直接設計原型或動效來傳輸到手機里。當然，鑒於Sketch輕鬆愉快的切圖，把圖片導出並通過微信或者RTX發到手機，也並不是什麼太麻煩的事情。
3.6 插件
Sketch一向以簡潔和高效著稱，只列出設計師最需要，最常用的功能。然而如果有更進階的需求，設計師可以選用各式各樣的Sketch插件來滿足定製化的要求，如自動安卓切圖，自動生成.9圖，自動填充等。知乎和優設上有各式各樣的插件推薦，這裡只重點推薦Craft 和 Marketch
– Craft ，將時間省到極致

其實是四個小組件和合集，分別可以『行列複製組內容』，『一鍵填充本地或在線圖片』，『規範生成和管理』以及『默認文字按類別』，連設計師從網上找示例圖片和想默認文字的時間都省掉了。另外Craft收購了我一直心心念的 SilverFlow，於是Craft 2.0很快連可交互原型都能做了。具體請看視頻（英文）
Craft主頁及下載地址：Craft by InVision LABS
– Marketch，設計和開發的終極分歧終端機
將設計稿一鍵轉化成前端網站（可傳送的本地文件），讓前端同學直接參考。之前曾經使用過zeplin小飛艇, 可以在線做同樣的事情。然而考慮到註冊成本和雲文件安全性，後來還是棄用了。Marketch則更好的解決了這個問題：不需要註冊即可瀏覽，而且保存成本地文件（當然是以開發者不商業化為代價…God Bless Programmers）。
Demo地址（生成效果）: http://tudou527.github.io/marketch/
Github 下載地址：GitHub - tudou527/marketch: Marketch is a Sketch 3 plug-in for automatically generating html page that can measure and get CSS styles on it.
4. 配套軟體集
再推薦幾個讓交互用 Sketch 更幸福的配套工具，其中有不少是對PS一樣支持的。
– Mac上的字體管理專家（收費，有試用版）

Mac上的字體管理神器，可以篩選字體，預覽字體效果，點擊即應用字體到Sketch，或收藏常用的字體。我試過搜索同類軟體的免費版，但最終還是沒有一款能匹敵它。最新版本甚至內置了多個圖標庫，直接從裡面就可以搜索svg格式的圖標並拖拽到sketch里用，顏色任調，雙擊還可以編輯形狀！用上這個功能後，我乖乖付費成為了人民幣玩家。
圖文介紹戳設計師們！超好用的字體管理工具RightFont
國內合作方字體管理工具 RightFont 中國特惠，6折史上最低價 - Pinapps - 知乎專欄
4.2 IconFont
– 矢量圖標搜索利器（免費）
vg 矢量圖標在線合集。雖然很不想為某寶做廣告，但是找扁平化圖標用這個網站確實方便。對交互能節省很多找圖標的時間，也能為輕量圖標製作找靈感。

網址： Iconfont-阿里巴巴矢量圖標庫
4.3 IconJar
– 專業圖標管家（收費，有破解版）
如果你有收集並使用圖標的習慣，那麼它是我用過最適合在mac上管理圖標素材的軟體。圖標可以輕鬆分組，並打包帶走。
介紹鏈接術業專攻！超方便的圖標素材管理工具Iconjar
4.4 Principle
– 1分鐘做動效（收費，有試用版）
高效製作頁面動效的工具，學習曲線非常平滑。它的設計思路是，繪製好初始幀和結束幀，軟體會自動計算並生成補間動畫（兩幀之間必須有相同元素）。產出可以同步到真機演示，也可導出成gif或者mov傳播。相比其他工具，Principle支持直接通過拖動sketch內的圖層或者文件夾到Principle中，連切圖的工作都省了。後續計劃再寫一篇Principle的上手（手動挖坑）

4.5 Silverflow（即將推出）
– 設計稿變原型(已加入Craft豪華午餐包)
一個開發中的插件，可以支持設計師在Sketch里直接做可交互原型。如前文所說，目前它家已經被大名鼎鼎的Invision團隊收購，加入了invision旗下的craft插件合集。以後做好的設計稿，可以直接在輸出成可交互Demo並導入到手機給其他人試用，不需要另外的原型工具…想想怎是一個贊字了得。
想了解更多，可以查看之前翻譯的介紹Silverflow的文章【新一代神器 Silver】
另外最近大熱的Adobe 家新秀 Experience Design (簡稱XD，莫名喜感)，也支持了原型的製作和同步，不過目前切圖，圖層等細節功能尚未完善。期待在原型製作領域有更多的好功能出現！
5. 最後的嘮叨
作為一個繪圖工具，Sketch實在太直觀了，很多功能保證你一看就會用。真難想像我居然花了這麼多字數來介紹他。其實，真正難的不是上手，而是用它開始畫第一個界面。還是那句話：工具只是工具，更重要的是你的idea。說這麼多，不如現在就開始，A一個畫板，結合一個工作項目來試一試它吧 – 會比你想像中的容易多了。
至於是否要替代Axure或者Photoshop, 我想它們間並不衝突，你可以都試用之後，再選擇「最適合自己的」作為生產工具。對我來說，Sketch兼顧了「快」和「精細」的要求。而「天下武功，唯快不破」。