「原創教程」- Sketch 從零開始學（一）

01-26

通過經典案例，手把手教你如何 0 起步，用 Sketch 製作 UI 界面。在教程中穿插對柵格系統、Symbol、Text Style、組件化管理等相關設計知識的介紹。從掌握怎麼設計，到明白為什麼這樣設計。本期會指導大家用 Sketch 臨摹 Airbnb。閑話少說，直接撈乾。

1.建立文檔

按 Command + N

2.建立 Artboard

按 A

因為是要做網頁，所以我們選擇 Desktop HD，這個 Artboard 的高度不太合適，不過沒關係我們到時候再調整。按 Command + 2 讓我們的 Artboard 居中顯示。

左鍵雙擊 Artboard 名稱可以進行修改。

3.設置柵格

點擊 View 選擇 Layout Settings，

按照以下參數設置，不要忘記按 Center。

按 Control + L 可以隨時打開/關閉柵格顯示。

4.設置 Text Style

按 T 點擊屏幕位置輸入 Headline 按照以下參數設置，色值選擇 #000000。

選擇 Create New Text Style，

將此 Text Style 命名為 Headline/L/S/L，同理建立整套 Text Style。

本套 Text Style 參照的是 Material Design 中文字體排版規範。

從中選擇了 Headline 24sp、Title 21sp、Subheading 16sp、Body 14sp、Caption 13sp。

字體採用 PingFang SC。最終成品：

為方便各位快速上車，我已經把整套 Text Style 建好了，本文最後提供下載，大家直接把資源中 Fonts 頁面的 Artboard 複製到我們的頁面中，即可拷貝到所有 Type Style。具體方法：

在我們的文檔中選擇 Organize Text Styles，

選中想要清除的 Text Style（可多選），點擊左下方的減號，我們之前建立的那個字體樣式就被清除了。

Tips：在拷貝新的 Text Style 之前一定要確認，文檔內沒有 Text Style，否則兩套 Text Stle 的合併會對文檔管理產生麻煩，譬如你無法分辨兩個同名的 Text Style 哪個是正確的。另外，在拷貝組件到你的文檔的時候也注意是否有 Text Style 隨之一起加入。

刪除樣式後，文字圖層前方的符號會由紫色變為灰色。

新建一個頁面，命名為 Fonts，把資源中的 Artboard 複製到我們的頁面中。此時可以按住 Command 點擊一個文字（比如 Healine），然後選擇 Organize Text Styles，確認 Type Style 拷貝成功。（是不是有種一夜致富的感覺）

5.建立導航欄

折騰了一堆準備工作，終於可以進行第一個組件的設計了。

回到 Page 1 頁面，按 R 在Artboard 中畫一個 1088x64 的矩形。

右鍵點擊矩形 Create Symbol 命名為 Lists/Navigation Bar。

我們轉戰到 Symbol 中，按 R 在 Lists/Navigation Bar 中畫一個 28x28 的矩形（滑鼠拖動的時候同時按住 Shift 是畫正方形），命名為Avatar，Radius 設置為 100，Borders 色值選擇 #000000/不透明度 12%/Outside，

Fills 選擇 Patten Fill，Choose Image。

選中頭像水平居中（右2），

按住 Alt 檢查 Avatar 的位置，確保距離右邊緣 24，你可以按住 Shift 用滑鼠左右調節，也可以用鍵盤左右調節，Shift+左右一次移動 10。

按 T 輸入 Text 1，Type Style 選擇 Body/L/S/R。解釋一下縮寫含義： L=Light，意思是亮底黑字；S=Single，意思是單行文字；R=Right，意思是文字右對齊。

Text 1 距離右側 Avatar 48，Resizing 選擇 Pin to corner，此處涉及響應式的知識，愛刨根問底的同學可以去之前「教程乾貨」- 我敢打賭你不知道Sketch 39的響應式新玩法 - 響應式系列二 - 知乎專欄中找營養，在此就不詳細說明啦。

Sketch 是有自動 Padding 功能的，也就是說 Text 2 的實際位置可以根據 Text 1 的實際長度自動算出。如果暫時不明白沒關係，後面應用 Symbol 的時候就會明白。然而 Sketch 這款軟體自動 Padding 功能兩個元素間距不能超過 20，此處又希望 Text 1 與 Text 2 之間距離為 48，所以我在每個文字之間加入了 24x14 的沒有填充色和描邊的矩形（此處為演示，調整成紅色），Resizing 為 pin to corner。矩形水平居中，與文字間距 12。這樣兩個文字間的距離就是 12+24+12=48。將 Text 1~6 與其間五個矩形 Command+G，命名為 Navigation。同樣，這個 Group 的 Resizing 為 pin to corner。