Sketch式樣

檢查器會(huì)顯示出所選圖層的一切式樣選項(xiàng)。

從共享式樣開(kāi)始，接著是通用透明度、通用混合模式，再下面是填充、邊框、陰影、模糊和鏡像，我們會(huì)在本手冊(cè)中分章節(jié)一一介紹，但是現(xiàn)在我們想先討論幾個(gè)通用的小技巧。

輸入框

我們有一個(gè)很特別的輸入框，鼠標(biāo)懸停上去時(shí)你會(huì)看見(jiàn)上下兩個(gè)小剪頭出現(xiàn)在文本區(qū)域右邊，你可以單擊他們來(lái)增減圖形的大小。如果你按住 shift 則會(huì)以 10 為單位變化。如果你按住 option 鍵，則會(huì)以0.1 為單位變化。

Sketch

上下箭頭

一旦你開(kāi)始直接編輯輸入框，上下剪頭就會(huì)消失，但這個(gè)功能依然可用，你可以用鍵盤(pán)上的上下方向鍵配合 shift 或 option 鍵來(lái)完成。

運(yùn)算

輸入框另一個(gè)很棒的功能是可運(yùn)算，簡(jiǎn)單的入 +5 或 /2 這樣的四則運(yùn)算都沒(méi)有問(wèn)題，不同的運(yùn)算符號(hào)也是支持的。

模糊值

調(diào)整文本框大小更快的方式是直接拖拽文本框底部的手柄。如果你已經(jīng)很確定理想的文本框大小，只是想看看在畫(huà)布上的效果，這能幫你做最快的測(cè)試。

返回畫(huà)布

你將會(huì)在畫(huà)布和檢查器中來(lái)回操作，先在畫(huà)布上選中一個(gè)對(duì)象，去檢查器修改一些數(shù)值，然后再回到畫(huà)布。然而正常情況下應(yīng)用仍會(huì)關(guān)注在檢查器上，所以如果你想按 R 鍵來(lái)快速新建一個(gè)矩形，結(jié)果會(huì)是你在檢查器的輸入框中輸入了 R 。

絕大多數(shù)時(shí)候這都不會(huì)是你想要的，所以先按 return 鍵來(lái)確認(rèn)輸入框中的任何編輯。然后再按一次 return 鍵，即可返回到畫(huà)布中，并可以使用任何其他畫(huà)布專(zhuān)用的快捷鍵了。

拖放

任一邊框、填充或是陰影都可以被拖拽，只需在按鈕和輸入框的中間地單擊開(kāi)始拖拽即可。你可以通過(guò)這個(gè)方式來(lái)重新排列填充層，或是直接拖出檢查器已刪除某一填充。

刪去無(wú)用式樣

一個(gè)高效嘗試不同式樣的方法是添加多個(gè)邊框和陰影，然后選擇性的打開(kāi)或關(guān)閉一部分。也許是這個(gè)原因，我們發(fā)現(xiàn)很多設(shè)計(jì)師的檢查器里都有好幾個(gè)無(wú)用的式樣。

為了讓刪去無(wú)用式樣更方便，我們?cè)鎏砹艘粋€(gè)小垃圾桶圖標(biāo)，一旦檢查器中出現(xiàn)無(wú)用的式樣，這個(gè)垃圾桶就會(huì)顯示出來(lái)，單擊就可以刪去所有的無(wú)用式樣。

復(fù)制粘貼式樣

這并不是和檢查其完全相關(guān)的內(nèi)容，但你也可以使用編輯菜單，來(lái)在不同圖層之間復(fù)制粘貼式樣。如果你不想圖層始終保持鏈接，但又想共享其中一部分元素，這便是最好的選擇。

對(duì)齊

檢查器的最頂端是一些關(guān)于對(duì)齊的按鈕。右邊的6個(gè)按鈕是讓多個(gè)圖層相對(duì)自身對(duì)齊，只有一個(gè)圖層的情況下則是與當(dāng)前的畫(huà)板對(duì)齊。

左邊的對(duì)齊按鈕則是讓圖層垂直或水平分布，比如說(shuō)水平分布，最左和最右的兩個(gè)圖層會(huì)留在原地，其他圖層則會(huì)均勻的分布在他們中間。

圖層透明度快捷鍵

同樣不是嚴(yán)格和檢查器相關(guān)的功能，但每當(dāng)你選中一個(gè)圖層，你都可以按 1-9 的數(shù)字快捷鍵來(lái)快速將圖層透明度從 10% 調(diào)至 90%，按下0則會(huì)將透明度調(diào)至100%。

填充

Sketch 里你可以為圖形填充純色、漸變、圖片（或圖案）以及雜色。

填充選項(xiàng)從左至右分別是：

?純色

?線性漸變

?徑向漸變

?環(huán)形漸變

?圖案填充

?雜色填充

添加填充

你可以單擊第一個(gè)色彩填充旁邊的 + 按鈕來(lái)添加新的填充，每一個(gè)圖層都可以有無(wú)限的填充，填充會(huì)按照從下至上的順序疊加，每一層填充也都有自己可調(diào)節(jié)的混合模式和透明度。

圖案填充

你也可以在預(yù)設(shè)中選擇圖案來(lái)進(jìn)行圖案填充，或者你也可以自己添加一張圖片，平鋪 (Tile) 或者擴(kuò)展 (Fill) 的來(lái)填充。

?平鋪:圖像被不斷重復(fù)直至鋪滿整個(gè)區(qū)域

?擴(kuò)展 :圖像被放大直至占滿整個(gè)區(qū)域

雜色填充

雜色填充能為你的圖層增添細(xì)小紋理，讓乏味的填充和圖形變得更生動(dòng)獨(dú)特。

Sketch 3 現(xiàn)在包含了黑色、白色和彩色三種不同的雜色圖片，你還可以分別給他們?cè)O(shè)定混合模式。

邊框

除了文本之外的所有圖層都可以有多個(gè)邊框，你也可以給邊框設(shè)定不同的粗細(xì)、顏色和混合模式。

邊框選項(xiàng)從左至右分別是：
?純色填充

?線性漸變

?徑向漸變

?環(huán)形漸變

邊框位置

邊框可以出現(xiàn)在一個(gè)路徑的中間，內(nèi)部或外部，如果你有一個(gè)封閉的圖形，那么內(nèi)邊框會(huì)被繪制在圖形的輪廓以內(nèi)，外邊框則會(huì)在輪廓以外。

中心邊框則會(huì)剛好繪制在輪廓線上，一個(gè)開(kāi)放圖形只能運(yùn)用中心邊框，一條直線也只能運(yùn)用中心邊框，畢竟直線根本就不存在“內(nèi)外”的概念。

純色或漸變

一個(gè)邊框可以運(yùn)用純色或漸變色來(lái)填充，你可以在每個(gè)邊框的色彩檢查器里更改，比如從一個(gè)扁平顏色換成一個(gè)漸變的綠色。

編輯一個(gè)邊框漸變色和編輯填充漸變色是一樣的操作方法，你可以在漸變的章節(jié)了解更多。

虛線

矢量圖層會(huì)有幾個(gè)額外的邊框選項(xiàng)：虛線，更改結(jié)束點(diǎn)或合并點(diǎn)的圖形。想創(chuàng)作虛線，你可以先找到檢查器中的邊框區(qū)域 (Border)，單擊右上角的三角形圖標(biāo)，這時(shí)邊框面板會(huì)自動(dòng)擴(kuò)展出現(xiàn)幾個(gè)新的選項(xiàng)，其中最下面就有四個(gè)設(shè)置虛線的輸入框。

舉個(gè)例子，一個(gè)4-2的虛線圖形會(huì)畫(huà)出一個(gè)長(zhǎng)4個(gè)像素的線條，留出長(zhǎng)2個(gè)像素的間隔，接著再畫(huà)4個(gè)像素長(zhǎng)的線條并一只重復(fù)。一個(gè)5-4-3-2的虛線圖形則會(huì)畫(huà)出一個(gè)長(zhǎng)5個(gè)像素的線條，留出長(zhǎng)4個(gè)像素的間隔，接著再畫(huà)3個(gè)像素長(zhǎng)的線條，留出一個(gè)長(zhǎng)2個(gè)像素的間隔，并重頭再來(lái)一遍。

陰影

陰影和內(nèi)陰影會(huì)有相同的參數(shù)設(shè)置和工作原理，唯一的區(qū)別是陰影一個(gè)在圖形外部一個(gè)在圖形內(nèi)部。每個(gè)陰影都可以有自己的混合模式，你可以在顏色彈出窗口里調(diào)試。每個(gè)陰影同時(shí)還有一個(gè)擴(kuò)散值，它會(huì)增強(qiáng)對(duì)象的陰影效果。

值得注意的是，當(dāng)模糊半徑被設(shè)置為0的時(shí)候，文本圖層的內(nèi)陰影才是最好看的。擴(kuò)散并不適用于文本圖層。

模糊

Sketch為你提供了四種不同的模糊方式，你可以在模糊工具的區(qū)域中進(jìn)行選擇：

?高斯模糊（Gaussian Blur）：能讓你的圖層均勻的模糊

?動(dòng)態(tài)模糊 (Motion Blur)：僅向一個(gè)方向模糊，造成一種運(yùn)動(dòng)的錯(cuò)覺(jué)

?縮放模糊 (Zoom Blur) ：從一個(gè)特定的點(diǎn)向外模糊

?背景模糊 (Background Blur) ：將圖層下一層的內(nèi)容模糊

背景模糊

其他幾種模糊方式大家都很容易理解，背景模糊則可能需要一點(diǎn)解釋。

背景模糊是在蘋(píng)果發(fā)布 iOS 7之后添加的功能，你需要確認(rèn)有一個(gè)半透明的圖層在表面應(yīng)用了背景模糊，這樣下層的內(nèi)容才會(huì)出現(xiàn)模糊效果。

需要注意的是，模糊是一種非常消耗資源的渲染效果，圖層越大，模糊就需要占用更多的內(nèi)存空間和處理器能力。盡量少使用模糊，如果你一定要在背景模糊和普通模糊中選擇，那么選擇普通模糊吧。

色彩

Sketch里我們直接將拾色器放在了檢查器當(dāng)中。你可以選中一個(gè)圖形，進(jìn)入填充或者邊框選擇的面板，再點(diǎn)擊色彩按鈕，這時(shí)，通用檢查器將會(huì)滑到一邊，展現(xiàn)出一個(gè)新的色彩面板。色彩面板會(huì)根據(jù)你要編輯的顏色類(lèi)型（陰影顏色還是填充顏色，純色還是漸變色）顯示不同的選項(xiàng)，但是你會(huì)發(fā)現(xiàn)色彩面板很大空間都被拾色器占據(jù)著。

拾色器是基于HSB的色彩模式的r，色彩的飽和度和亮度分別按照水平和垂直方向變化。底下則有兩個(gè)滑動(dòng)條，分別供你調(diào)整色相和透明度。

你可以用色彩值輸入框來(lái)改變顏色，也可以直接拖拽拾色器里的小指示符。調(diào)整色彩的飽和度和亮度時(shí)，你可以按住 shift 鍵來(lái)限制只朝一個(gè)軸移動(dòng)。

HSL 色彩模式

緊接著你會(huì)看見(jiàn)一個(gè)十六進(jìn)制表示 (HEX) 的色彩數(shù)值，以及 RGB 模式的色彩值。你也可以直接單擊 RGB 的標(biāo)簽來(lái)切換至 HSBA 的色彩模式。

常用顏色

拾色器下面你會(huì)看見(jiàn)一排預(yù)設(shè)的顏色，這是 Sketch 自動(dòng)抓取的顏色，它會(huì)自動(dòng)分析你的文件，提取你用到最多的顏色在在這里。這樣你就能方便的重復(fù)使用顏色，而無(wú)需手動(dòng)的給每個(gè)顏色添加預(yù)設(shè)了。

漸變

想要給圖形設(shè)置漸變填充，你可以直接選中圖形，單擊填充按鈕，色彩工具就會(huì)顯示在檢查器中。想了解色彩工具的使用方式，請(qǐng)先閱讀色彩工具章節(jié)。在色彩面板的底部，你也可以選擇填充純色、漸變、圖案還是雜色。

你可以選擇線性漸變，徑向漸變或是環(huán)形漸變，但是他們?cè)?Sketch 中的工作原理都大致相同。

如果你選擇了線性漸變，你會(huì)看見(jiàn)圖層上出現(xiàn)了有兩個(gè)或多個(gè)點(diǎn)組成的漸變線，上面每一個(gè)點(diǎn)都是一個(gè)色彩滑塊，滑塊之間的顏色則會(huì)被繪制成平滑的色彩過(guò)渡。想要改變色彩滑塊的顏色，你可以先單擊選中它，這時(shí)你會(huì)在右邊的拾色器里看見(jiàn)你所選滑塊的顏色。只要選擇一個(gè)新的色彩值，你就能在畫(huà)布上看到相應(yīng)的改變。

在漸變線中間單擊，你就會(huì)看見(jiàn)一個(gè)新的色彩滑塊被添加。你可以移動(dòng)這些色彩模塊來(lái)調(diào)整漸變過(guò)程的平滑度，你也可以移動(dòng)漸變線的起點(diǎn)和終點(diǎn)來(lái)改變漸變的方向。

如果你想移除色彩滑塊，直接在畫(huà)布上選中它，再按下鍵盤(pán)上的 delete 鍵，或是 backspace 鍵即可。

徑向漸變

如果你選中了徑向漸變，那么漸變線上的第一個(gè)點(diǎn)便會(huì)是徑向漸變的中心，末端的點(diǎn)則會(huì)決定漸變的范圍。在漸變色的外圈上，你會(huì)發(fā)現(xiàn)另一的點(diǎn)，你可以拖拽它使?jié)u變范圍在正圓和橢圓當(dāng)中變化。

環(huán)形漸變

環(huán)形漸變會(huì)在圖層上以中心點(diǎn)順時(shí)針漸變。你可以在其中任意加減色彩滑塊，方法和線性漸變一樣，在漸變線上移動(dòng)或者拖拽色彩滑塊即可。

漸變條

Sketch 3 里我們添加了一個(gè)新的傳統(tǒng)樣子的漸變條，你能看見(jiàn)漸變的每一個(gè)節(jié)點(diǎn)，以及從左至右的變化，

快捷鍵

Sketch 3 里我們也添加了幾個(gè)快速放置節(jié)點(diǎn)的快捷鍵，你可以按下1-9的數(shù)字鍵來(lái)在漸變線的 10%-90% 的位置添加新的節(jié)點(diǎn)，所以如果按下 5，就能將節(jié)點(diǎn)添加在正中間。如果你想在兩個(gè)節(jié)點(diǎn)的正中間添加，則按下 = 鍵即可。

你還可以使用 tab 鍵快速的在不同節(jié)點(diǎn)中切換，用方向鍵（也可以同時(shí)按住 shift 鍵）移動(dòng)節(jié)點(diǎn)，

邊框漸變

Sketch里，我們同樣可以對(duì)描邊進(jìn)行漸變渲染，使用方法和填充漸變類(lèi)似，只需點(diǎn)擊邊框面板里的色彩按鈕，再重復(fù)以上的操作就好。

鏡像

鏡像會(huì)給你一個(gè)圖層是站在玻璃桌面上的感覺(jué)。你可以使用滑塊來(lái)調(diào)整鏡像的強(qiáng)度。第二個(gè)滑塊則會(huì)決定鏡像和原圖形之間的距離。如果你認(rèn)為滑塊無(wú)法提供足夠的靈活性，你也可以在一旁的文本框中輸入更大的數(shù)值。

需要注意的是，使用鏡像效果會(huì)讓這個(gè)對(duì)象被繪制兩次，其中會(huì)包含一些性能含義。

共享式樣

Sketch 2 中就有了共享式樣的功能，但是在 sketch 3 里得到了全面的提升。共享式樣現(xiàn)在在通用圖層選項(xiàng)和式樣選項(xiàng)中間的白色區(qū)域里。

你可以先選中一個(gè)圖形，然后在下拉面板中設(shè)置想要的式樣。你可以創(chuàng)建無(wú)數(shù)的式樣，也可以在現(xiàn)有的式樣中更換。在共享圖層中任一個(gè)做修改，其他的都會(huì)立即做出相應(yīng)的改變。