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

01-29

書接上文「原創教程」- Sketch 從零開始學（一） - 知乎專欄，本期我們繼續指導大家用 Sketch 臨摹 Airbnb。

6.調整柵格

打開 Layout Setting 勾選 Rows，垂直方向的柵格就出現了，注意檢查參數是否與下圖一致。

7.建立標題文字

我們先從文字的顏色說起，參照的是 Material Design 背景和顏色選擇規範。

對於淺色背景下的深色文字，應該採用以下透明度級別：

重要文字的不透明度為 87％。
次要文字（在視覺層次結構中較低）的不透明度為 54％。
提示文字（如文字欄位和標籤中的提示文字）和禁用文字的視覺突出性較低，不透明度為38％。

對於我們這次臨摹的 Airbnb，Primary color（主色）是品牌的顏色，也就是 logo 的顏色 #FF7977。Accent color（強調色）為 #00a699。Accent color 的目的是為了突入，所以通常選擇品牌色的對比色。

還記得我們上一期導航中文字的不透明度么？當時並沒有設置，選擇的是默認的 100%，我們現在要進入 Symbols 頁，把 Lists/Navigation Bar 中的導航文字的 Opacity 調整成次要文字的不透明度 54%，以符合文字層級規範。調整後返回 Page1。

標題文字參照的是 Material Design 中文字體排版規範，選用的是 Display 2 這個級別。

因為這個級別並不常用，所以偷了個懶沒有加入到 Type Style 里。這裡我們按 T 在頁面中輸入相應文案。這裡注意一個細節，文本框的上沿和左右兩邊都應在柵格之上，只有這樣，我們的設計才是有規可循的。前麵粉色的文字色值選擇 #FF5A5F/不透明度 100%，Weight 為 Medium；後面黑色的文字色值選擇 #000000/不透明度 87%，Weight 為 Thin。

8.建立搜索組件

按 R 畫三個矩形，尺寸和位置注意調整到柵格上。由於前兩欄的欄位比第三欄的欄位要長，所以我按照 Airbnb 的布局這裡也沒有三等分，而是前兩欄略長一些，第三欄略短，分別是 368、368、352。它們的寬度綜合與 Layout Setting 中 Total Width 一致，都是 1088。高度設置為 78（16+14+16+16+16），五項數值分別代表的含義是：

16（第一行文字與組件上沿距離）
14（第一行文字選擇 Type Style 中的 Body/L/S/L）
16（第一行文字與第二行文字間距離）
16（第二行文字選擇 Type Style 中的 Subheading/L/S/L）
16（第一行文字與組件下沿距離）

具體參數請在文章末尾處下載課件查看。第一步我們創造了搜索框的布局，顏色描邊這些我都沒有調整，圖標我也只是用 24x24 的矩形暫時佔住位置。圖標的佔位矩形與組件下沿的距離是 12，這樣能保證這個圖標與第二行文字水平居中。

選中第一行文字，將它們的 Opacity 調整成主要文字的不透明度 87%；選中第二行文字中的「目的地城市」、「入住日期」、「退房日期」，將它們的 Opacity 調整成提示文字的不透明度 38%；選中第二行文字中的「1位訪客」，將它的 Opacity 調整成次要文字的不透明度 54%。

Tips：如果「地點」下面第二行的文案是「北京」，那麼第二行就不是提示文字，而是次要文字，不透明度 54%。

選中左邊第一個矩形，關閉它的 Fills 和 Borders，當然細思恐極的同學可以點擊旁邊的垃圾桶符號徹底刪了。然後點擊 Inter Shadows 右邊的加號，按下圖參數設置，注意不透明度 12%。不透明度的選擇，參照的是 Material Design 背景和顏色選擇規範。

Copy Style 左邊第一個矩形，選中右邊兩個矩形 Paste Style。

最右邊的矩形是不該有右邊線的，所以注意關閉掉它的 Inter Shadows。

按 R 畫一個 1088x78 的矩形，對齊到柵格上。調整它的圖層順序到三個矩形的下方。

選中搜索組件包含的所有元素，Command+G，命名為 Lists/Search Bar。

選中最底層的矩形，右鍵點擊選擇 Mask，這個功能其實就是對應 Photoshop 裡面的蒙版。

Tips：Group 內圖層 Mask 後，該圖層上方的 Group 內圖層都被置於 Mask 層中，對 Group 外圖層無影響；非 Group 內圖層 Mask 後，該圖層上方所有圖層都被置於 Mask 層中。

將 Mask 層按以下參數設置，Borders 和 Shadows 的色值選擇 #000000/不透明度 12%。

我們來解決一下搜索欄上圖標的問題。按下圖所示新建一個 Material Design 模板。

進入 Material Design Symbols 頁。在左下角的圖層搜索欄里輸入 Material/Icons，按住 Shift 全選這些圖標的 Symbol。注意，複製 Symbol 一定要確認你選中的是 Symbol，而不是 Symbol 中的元素。

複製到我們文件中的 Symbols 頁里。當然，盡量擺的有序，方便管理。

回到 Page 1，按下圖所示，右鍵點擊第二欄中 24x24 的矩形，Replace With 成相應的圖標。

將它的 Opacity 調整成次要文字的不透明度 54%。

如法炮製，將第三欄的 24x24 矩形也 Replace With 成相應的圖標。

別忘記將它的 Opacity 調整成次要文字的不透明度 54%。

按 R 畫一個 64x32 的矩形。

按 T 點擊屏幕位置輸入 Label。按下圖參數設置，色值選擇 #000000/不透明度 100%。

按住 Shift 選擇按鈕矩形和按鈕文字，在垂直和水平方向居中，Creat Symbol，命名為 Controls/Buttons。把 Label 的 Resizing 改成 Float in place。把 Artboard 右邊的 Symbol 層拖拽到 Symbols 頁里，注意不是 Artboard 里那個。

選擇 Artboard 里的 Controls/Buttons 將 Label 的文案改成「搜索」。把尺寸改成 152x46，距離搜索組件上、下、右邊沿 16。比 Airbnb 的按鈕寬了一些，但是好像沒什麼不好。

本期先到這兒，有啥建議或是看不懂的地兒歡迎評論或是加群討論，我們下期見！

課件下載: 「原創教程」- Sketch 從零開始學（二）

作者：SketchU&I（很慚愧，發一個微小的廣告）
SketchU&I QQ交流（you）群：110577764