《玩轉(zhuǎn)Sketch教程》是由夜雨出品的入門級(jí)免費(fèi)工具教學(xué)課程，該課程承諾內(nèi)容免費(fèi)觀看、課程配套資源免費(fèi)下載以及后續(xù)迭代課程更新免費(fèi)，是零基礎(chǔ)設(shè)計(jì)師上手Sketch的首選福利課程。

首發(fā)在網(wǎng)易云課堂，基于最新版Sketch61.1制作，迭代更新速度快。課程地址，點(diǎn)擊籃字直達(dá)，可以提前學(xué)習(xí)全部課程。

關(guān)注微信公眾號(hào)”愛(ài)交互“（iueuxd）即可下載相應(yīng)的配套教學(xué)素材，持續(xù)更新中~

1.矩形、多邊形等形狀工具的使用

1.1幾何形狀是界面設(shè)計(jì)中的常見(jiàn)元素

格式塔原理告訴我們，簡(jiǎn)單的整體更容易被人腦所理解。所以，矩形、圓形、多邊形等幾何形狀經(jīng)常在設(shè)計(jì)中出現(xiàn)。

1.2形狀工具一覽

在Sketch中，有矩形、圓角矩形、圓形、三角形、星型、多邊形等幾何形狀工具，下面主要講矩形和多邊形。

1.3矩形工具的使用

矩形工具是日常設(shè)計(jì)中應(yīng)用非常頻繁的工具，卡片、按鈕、輸入框等設(shè)計(jì)都離不開(kāi)它，重點(diǎn)注意它的圓角半徑設(shè)置。我們可以動(dòng)手畫(huà)一個(gè)矩形試試，點(diǎn)擊“矩形”工具，在中間畫(huà)布區(qū)域畫(huà)出一個(gè)矩形，然后在檢查器拖動(dòng)滑塊，改變矩形的圓角半徑。

另外，Sketch支持設(shè)置iOS獨(dú)有的平滑圓角，也就是說(shuō)，我們改變矩形的圓角半徑時(shí)，可以選擇“平滑角”選項(xiàng)。（注：iOS的平滑圓角會(huì)比普通的圓角似乎更平滑一些，圓角計(jì)算公式不同。）

還可以只把矩形其中的一個(gè)或者兩個(gè)角變成圓角，只需要分別定義好每個(gè)角的圓角半徑即可。例如在圓角半徑輸入框輸入：0;60;0;0，用“;”隔開(kāi)，意思是把第二個(gè)角的圓角半徑，設(shè)為60。角的順序，看下方截圖左邊的編號(hào)。

1.4多邊形邊數(shù)的設(shè)置

系統(tǒng)默認(rèn)的多邊形是五邊形，可以通過(guò)檢查器改變其邊數(shù)，變成六邊形、七邊形等。多邊形的設(shè)置很簡(jiǎn)單，先添加一個(gè)多邊形，然后在檢查器“側(cè)邊”處，拖動(dòng)滑塊，即可改變多邊形的邊數(shù)。

1.5對(duì)形狀進(jìn)行編輯

雙擊矩形、圓形、多邊形等形狀，即可添加/刪除編輯點(diǎn)，對(duì)形狀進(jìn)行編輯。下圖是一個(gè)形狀的編輯，步驟如下：

①雙擊形狀，以矩形為例，即可在任意邊的任意位置添加編輯點(diǎn)（鼠標(biāo)點(diǎn)擊）。

②或者刪除編輯點(diǎn)（選中后按鍵盤“delete”鍵）。

③拖動(dòng)任意編輯點(diǎn)，即可對(duì)形狀進(jìn)行編輯。

2.直線、鉛筆、矢量等線條工具的使用

2.1線條工具一覽

在Sketch中，有直線、箭頭、鉛筆、矢量等線條工具，這些線條工具也應(yīng)用廣泛，例如設(shè)計(jì)中的分割線、矢量圖形。

2.2直線工具的使用

直線可以調(diào)整其粗細(xì)，以及變成虛線的效果。使用直線工具畫(huà)出直線后，可以在檢查器調(diào)整邊框的“寬度”，調(diào)整其粗細(xì)。同樣地，在檢查器針對(duì)直線設(shè)置“虛線”和“間隔”值，即可以得到虛線效果。

2.3箭頭工具的使用

調(diào)整箭頭工具的端點(diǎn)，即可得到各種各樣的箭頭，箭頭通常用在交互說(shuō)明中。

另外，直線也可以變成箭頭。使用箭頭工具，畫(huà)出箭頭后，可以根據(jù)自己的需要，調(diào)整箭頭的端點(diǎn)（起點(diǎn)和終點(diǎn)），以便得到各式各樣的箭頭。

2.4鉛筆工具的使用

鉛筆工具，和生活中的鉛筆一樣，主要用來(lái)繪圖，對(duì)設(shè)計(jì)師的鼠繪能力有一定的要求。

2.5矢量工具的使用

矢量工具也可稱之為“鋼筆工具”，相比“鉛筆”，使用它畫(huà)出來(lái)的線條更偏向直線或者曲線，而不是鉛筆的隨意線條。

使用矢量工具，可以畫(huà)出多編輯點(diǎn)的連續(xù)曲線，可以基于“貝塞爾曲線”，改變編輯點(diǎn)的彎曲效果。

2.6知多點(diǎn)：Sketch中的貝塞爾曲線

貝塞爾曲線始于1962，由法國(guó)工程師皮埃爾·貝塞爾（Pierre Bézier）發(fā)明，被廣泛應(yīng)用于矢量圖形曲線。

在Sketch中，可以應(yīng)用4種類型的貝塞爾曲線：

①筆直（直角）：基于角度繪制圖形，可以拖動(dòng)下方的“半徑”滑塊將其變成圓角。

②斷開(kāi)鏈接：手柄控制點(diǎn)相互獨(dú)立，可以調(diào)整任意的角度。

③已投射（鏡像）：兩端的手柄控制點(diǎn)將相互映射，并與中心點(diǎn)保持相等的距離。

④不對(duì)稱：與“鏡像”類似，手柄控制點(diǎn)角度共享，但是與中心點(diǎn)的距離是非對(duì)稱的。

2.7知多點(diǎn)：打開(kāi)路徑和閉合路徑

在使用矢量工具時(shí)，可以選擇打開(kāi)或者閉合路徑：

①打開(kāi)路徑：不自動(dòng)連接起點(diǎn)和終點(diǎn)。

②閉合路徑：自動(dòng)連接起點(diǎn)和終點(diǎn)，形成封閉的路徑。

該系列課程已經(jīng)全部上架網(wǎng)易云課堂，完全免費(fèi)學(xué)習(xí)，基于最新版sketch61.1制作，迭代更新速度快。課程地址，點(diǎn)擊籃字直達(dá)，可以提前學(xué)習(xí)全部課程。

對(duì)交互設(shè)計(jì)有興趣的，可以購(gòu)買收費(fèi)課程《零基礎(chǔ)入行交互設(shè)計(jì)》學(xué)習(xí)。課程地址，點(diǎn)擊籃字直達(dá)，現(xiàn)在購(gòu)買，和夜雨1對(duì)1交流設(shè)計(jì)經(jīng)驗(yàn)。