在《夜雨原創(chuàng)玩轉(zhuǎn)Sketch第一期：初識Sketch》中，我們對Sketch的功能特性、界面和基本操作有了一定的了解，這期我們需要學(xué)習(xí)的是基本工具的使用，涉及線條、幾何、文字工具三個類別。

注：玩轉(zhuǎn)Sketch系列教程適用于Sketch44或者更高級的版本。

1.線條工具

為了方便系統(tǒng)學(xué)習(xí)，我們把Sketch中直線、鋼筆、鉛筆都歸在線條工具中，再逐一講解。線條在生活中隨處可見，在交互設(shè)計中同樣使用頻繁，例如分割線、形狀勾勒等。

（1）直線工具

直線是交互設(shè)計中比較常見的工具，我們可以利用直線來做分割線或者標注等。在Sketch中，可以通過快捷工具欄“Line”或者“Insert”-“Shape”-“Line”（快捷鍵L）快速勾勒一條直線

然后，我們可以通過調(diào)整檢查器的“Thickness”調(diào)整直線的粗細。

假如，我們需要一條虛線，則在直線的基礎(chǔ)上點擊“Borders”所在的設(shè)置圖標，在彈出的面板中，改變第二個“Gab”數(shù)值即可得到一條虛線。由于直線是由無數(shù)個點組成的，我們可以理解為“Gab”是控制點和點距離遠近，而“Dash”是則是控制點的大小，通過調(diào)整“Gab”和“Dash”可以得到各種各樣的虛線效果。

通常，我們在做標記說明的時候，需要一個箭頭來指示方向，同樣在“Borders”設(shè)置彈出面板，在“Start Arrow”或者“End Arrow”選擇端點形狀為箭頭即可。

有時候，我們需要一條彎曲的線條而不是直線，則可以雙擊直線進入編輯模式，在直線的任意位置（例如中間）點擊添加一個點，再拖動點的位置即可。我們還可以利用檢查器的貝塞爾曲線來設(shè)置直線的彎曲效果，分別是Straight（直角）、Mirrored（鏡像）、Disconnected（斷開連接）和Asymmetric（不對稱）。

最后，我們重溫一下直線工具的使用方法：粗細、虛線、箭頭、彎曲。

（2）鋼筆工具

在直線工具中，我們利用貝賽爾曲線很容易地將直線轉(zhuǎn)換為曲線，但是描繪曲線的話，使用鋼筆工具更方便。如圖所示，可以通過快捷工具欄“Vector”或者“Insert”-“Vector”（快捷鍵V）使用鋼筆工具插入連貫的曲線。

配合貝塞爾曲線，能對鋼筆繪線進行修正，使其達到我們想要的弧度，應(yīng)用在曲線畫圖上，例如折線圖。

（3）鉛筆工具

鉛筆工具在交互設(shè)計中應(yīng)用得比較少，它的特點是能繪制無規(guī)則的圖形，例如制作獨特的簽名。如圖所示，可以通過快捷工具欄“Pencil”或者“Insert”-“Pencil”（快捷鍵P）使用鉛筆工具。

這里給大家介紹一個鉛筆工具的高級應(yīng)用，結(jié)合鉛筆工具的自由性和上文提及的虛線技巧，我們可以利用鉛筆繪制散點圖。具體步驟如下：

首先，使用鉛筆工具亂畫一通，有多亂畫多亂，如下圖所示

然后，設(shè)置鉛筆工具的線條為虛線效果，即可得到散點圖。

2.幾何工具

格式塔原理告訴我們，簡單的整體更容易被人腦所理解。所以，在交互設(shè)計當中，圓形、矩形以及其他幾何圖形出現(xiàn)的頻率最高。

（1）圓形工具

在第一期當中，我們就使用圓形工具創(chuàng)作了第一個作品，現(xiàn)在來重溫一下吧。通過工具欄的橢圓工具“Oval”插入，或者通過工具欄的“Insert”-“Shape”-“Oval”（快捷鍵O）插入一個圓形即可。

圓形通常應(yīng)用于圓環(huán)圖、圓形icon、圓形頭像（圓形頭像可參考筆者早前的文章《Sketch基礎(chǔ)教程：蒙版（Mask）的使用詳解》）等制作。如下圖所示，取消填充，改變邊框的大小即可快速得到一個圓環(huán)圖。另外，可以通過調(diào)節(jié)“Position”中的“Center”、“Inside”、“Outside”，來調(diào)整邊框所在的位置。

（2）矩形工具

矩形工具是應(yīng)用十分頻繁的工具之一，常見的卡片、按鈕、輸入框等都屬于矩形。通過工具欄的矩形工具“Rectangle”插入，或者通過工具欄的“Insert”-“Shape”-“Rectangle”（快捷鍵R）即可插入一個矩形。

日常，我們往往需要一個圓角的按鈕，有兩種解決方案，一種是通過“Insert”-“Shape”-“Rounded”插入一個圓角的矩形；另外一種方式是通過改變檢查器“Radius”的值來獲得圓角，“Radius”的值越大，圓角的彎曲程度越高。

（3）其他形狀

其他形狀可以通過“Insert”-“Shape”插入，日常用到的地方不多，視需求而定。

3.文字工具

文字工具絕對是交互設(shè)計中使用最多的工具，沒有之一，人類在漫長的歷史進化之中都離不開文字。通過工具欄的文字工具“Text”，或者通過工具欄的“Insert”-“Text”（快捷鍵T）即可插入文字。

（1）文字工具的基本設(shè)置

①文字類型

Sketch中自帶常用的字體庫，打開其他Sketch文件時，如果找不到該種類型的字體，會用其他字體替換；缺失的字體可以通過系統(tǒng)字典進行安裝，安裝完成后，在“Typeface”處切換字體類型即可。另外，可以通過“Weight”切換字重，即普通，加粗，細體等。

②對齊和寬度自適應(yīng)

Sketch中提供四種常見的文字對齊方式：左對齊、居中對齊、右對齊、兩端對齊，通過檢查器的“Alignment”選擇即可。其中“Width”選擇“Auto”和“Fixed”都使文本邊框適應(yīng)文字內(nèi)容。

③間距

如果要設(shè)置文字的間距，可以通過“Spacing”進行設(shè)置，“Character”、“Line”、“Paragrah”分別對應(yīng)字間距、行間距以及段落間距。

（2）文字工具的高級設(shè)置

點擊字重“Weight”下方的“Options”按鈕，即可看到針對文字的高級設(shè)置選項。

①下劃線和刪除樣式

如圖，在“Decoration”中可以設(shè)置文字的下劃線和刪除樣式。

②段落符號

段落符號可以在“List Type”中進行選擇。

③大小寫切換

通過“Text Transform”可以把小寫英文切換為大寫英文字母，雖然不建議這樣做，因為全部大寫的英文字母會變得讓人難以閱讀，用戶平時接觸大寫字母作為單詞組的較少，會導(dǎo)致閱讀的時間大大增加。

（3）文字轉(zhuǎn)換為圖形

有時候，我們可能會設(shè)計一款字體，或者針對字體做微小的改動，以期達到我們想要的廣告效果，那么使用Sketch的文字轉(zhuǎn)換為圖形的功能，將會變得十分方便。具體做法是，右鍵點擊文字，在呼出的菜單中選擇“Convert to Outlines”即可把文字轉(zhuǎn)換為圖形。