Sketch 特訓(xùn) - 4

上期閱讀 Sketch 模板，發(fā)現(xiàn)了很多自己沒有留意過的細節(jié)，可見一直都蠻粗心的。今天花了一整天是把 Sketch Document 認真讀了一遍，下面把我認為最實用技巧分享給大家。一共 15 條吐血分享。

1.邊框圓角設(shè)置

默認矩形只能輸入一個圓角值，但是你可以用分號明確每一個圓角值，eg: 40;0;40;0. 代表左上，右上，右下，左下。

矩形圓角

2.隱藏/鎖定圖層操作

選中圖層， Shift-Command-H 隱藏圖層，Shift-Command-L 鎖定圖層。

3.選擇圖層

用過 Axure 的同學(xué)應(yīng)該知道，它有選擇圖層方式。其中一個是選擇區(qū)域完全包含圖層，該圖層才被選中，當(dāng)時覺的很好用。Sketch 其實也有這個功能，按住Alt+拖動鼠標(biāo)選擇，就可以了。

其次是當(dāng)一個圖層被另一個覆蓋的時候，先右擊選擇下方圖層，再按住 Alt+Cmd+鼠標(biāo)點擊移動，就可以直接移動下方圖層，很實用的功能。

3.等比例放大圖層

快捷鍵 Shift+K, 也可以點擊工具欄內(nèi)的按鈕進行操作。該工具會等比例縮放邊框?qū)挾取?/p>

4.錨點操作

跟 AI 一樣，Sketch 的錨點也是可以對齊和等距分布的。但是不像 AI 可以直接用白箭頭選擇。Sketch 需要回車進入編輯模式后，再按住Shift+鼠標(biāo)拖動 選擇目標(biāo)錨點。

當(dāng)操作錨點把手時，shift+鼠標(biāo)拖動，便可以按原定方向移動，不會出現(xiàn)抖動，很實用。如果按下alt，則會顯示隱藏的把手。

5.分解形狀圖層

當(dāng)你拼合多個形狀成單個組后，有時候想單獨改變某一部分顏色。這時候你可以把形狀在分解成單個圖層。Layer ? Paths ? Split, 以前一直沒有找到好的解決辦法。基本上你能想到的功能，一個好軟件都幫你考慮到了，只是你需要發(fā)掘它。

6.圖層樣式操作

Cmd + C后，Alt-Shift-Command-V，可以拷貝圖層樣式至新圖層，實用。另外，快捷鍵F可以隱藏填充色，B可以隱藏邊框。還有一個菜單，你可以拖拽某個圖層樣式改變其位置或刪除它。

7.文字按路徑排列

AI 是有 Type on path 這個功能的，以前以為 Sketch 不支持，又是我錯了。先建立 Path 圖層，然后創(chuàng)建文字層，選中文字后，菜單Type ? Text on Path，把文字拖到路徑上，Boom，奇跡就出現(xiàn)了。

8.圖層響應(yīng)式布局

Sketch 圖層有4個布局模式：

1. Stretch, 等比例的縮放
2. Pin to corner, 絕對定位
3. Resize object, 間距不變，長寬等比例縮放
4. Float in place, 長寬不便，間距定比例縮放

合理使用它們，可以讓你的設(shè)計秒變響應(yīng)式布局，真的點個贊。

9.圖層透明度

1-9 數(shù)字鍵控制圖層的透明度，從 10% - 90%。按 1 次 0 鍵透明度 0%，連按 2 次透明度100%。快速按下 9 鍵和 6 鍵，則設(shè)置透明度 96%，其他數(shù)值同理，不能更贊。

10.Background Blur

Sketch 支持覆蓋在圖片上的圖層設(shè)置背景模糊，可以有一種 IOS 的既視感。有圖有真相。注意給圖層設(shè)置一個透明度，才能看到模糊效果。

Background Blur

10.常用顏色列表

這也是個神細節(jié)，以前從來沒發(fā)現(xiàn)，直接上圖。

常用顏色列表

點擊紅框區(qū)域，可以顯示你最近使用過的顏色。

11.漸變設(shè)置

在 Sketch 中，雙擊漸變顏色條，添加新的顏色節(jié)點，這個大家一般都知道，下面重點來了。按下 1-9 數(shù)字鍵可以設(shè)置節(jié)點的漸變位置，從10%-90%，真的是無微不至的細節(jié)。按下=，還可以把節(jié)點移到附件兩個節(jié)點的中間。還有，可以用左右鍵控制其位置移動(按住Shift移動距離加成，不能更贊，Sketch 的漸變比 PS 好用太多了。

這里分享一個漸變的技巧，下圖我選擇的三個IOS默認漸變色。

Linear gradient

通過查看它們的 H S B 值，數(shù)值如下：

• 紅色漸變：(339, 79, 96) -> (344, 100, 96)
• 橙色漸變：(42, 89, 98) -> (25, 90, 95)
• 藍色漸變：(197, 76, 98) -> (211, 84, 96)

再進一步分析：

• 三者 Saturation: [79, 89, 76]
• 三者 Brightness: [96, 98, 98]
• 三者 Hue 區(qū)間：[5, 17, 14]
• 三者 Saturation 區(qū)間：[21, 1, 18]
• 三者 Brightness 區(qū)間：[0, 3, 2]

會發(fā)現(xiàn)一個大致的規(guī)律，起始顏色都是高飽和度(80左右)，高明度顏色(95左右）。其次，終止顏色通常 Hue 變化在 10 左右，說明漸變色的色相不要相差太大。Saturation 通常變化在 10 左右，說明略加一點飽和度。最后，明度幾乎保持不變。

相信有了這個規(guī)律，大家都可以先調(diào)出一個視覺舒服的漸變了。然后再不斷嘗試出自己獨特風(fēng)格的顏色漸變。

12.重置共享樣式

相信大家經(jīng)常會設(shè)置圖層或文字共享樣式，但有的時候，我們改動了某一個樣式后，又想還原它，Sketch 提供了一個快捷方式，Alt+單擊同步按鈕，實用。如圖：

按住 Alt 鍵點擊哦

13.畫布操作

Sketch 一個很大的特色就是內(nèi)置了各種尺寸的畫布供設(shè)計師使用。當(dāng)我們導(dǎo)入一個畫布后，可以直接 Cmd + D 創(chuàng)建多個相同的畫布。

此外有一個個人操作畫布的心得：

1. ? + 2: 放大選中畫布，操作某一畫布的時候使用
2. ? + 1: 顯示所有畫布，切換畫布的時候使用
3. ? + 0: 將畫布放大到 100%，適合看最終顯示效果的時候的使用

一般是 1，2 反復(fù)切換，最后 3 來看效果。

14.圖層命名導(dǎo)出

這也是一個新大陸，如果你把某個圖層命名為如下格式 Folder/Name，導(dǎo)出圖層會直接把Name保存到Folder中。這樣就不用每次桌面整理一大堆圖片了，狂贊。

15.確保軟件快速運行

Sketch 最大的優(yōu)點就是運行速度快，節(jié)省時間，一般情況下不會出現(xiàn)卡頓的情況。有幾點注意，可以減少其功耗：

1. 少用 Shadow 樣式，可以最后添加
2. 少用 Blur 樣式，可以最后添加
3. 盡量不要使用 Covert to outline 功能，這方面 AI 比較給力
4. 畫布數(shù)量大時，請分開放到多個 Page 里。

總結(jié)

Sketch 團隊真的很贊。產(chǎn)品使用文檔做的比別人的產(chǎn)品還好用。為了實現(xiàn) Pixel Perfect 的設(shè)計，團隊開發(fā)了 Show pixel, Fit to pixel, Round to pixel, Show pixel grid 四大功能。從細節(jié)入手，追求卓越。

強烈建議大家自己閱讀一遍原文檔，可能是寫的最好的產(chǎn)品使用文檔。

文字描述上若有不清楚的，歡迎留言。希望能和您交流學(xué)習(xí)的收獲。我們下期見。