橙子的橙子：現(xiàn)在越來(lái)越多的人選擇用 sketch 來(lái)做 UI界面，它相比 PS 來(lái)說(shuō)，功能更高效，可以說(shuō)是「專為界面設(shè)計(jì)而生」。如果把做界面比作削蘋(píng)果，那么 PS 是一把斧頭，sketch 則是水果刀，斧頭能做很多事情但是對(duì)于削蘋(píng)果這件事情來(lái)說(shuō)，卻很麻煩，不如水果刀好用。

而且 sketch 學(xué)習(xí)成本很低，基本一兩天就能上手，加上它非常開(kāi)放，支持第三方插件，這就出現(xiàn)了很多各式各樣的插件，方便了設(shè)計(jì)師的使用，提高了設(shè)計(jì)師的工作效率。那么下面就從兩個(gè)方面，來(lái)向大家介紹那些工作中真的會(huì)用到的 sketch 小技巧。

軟件自帶：

新建畫(huà)板、加減乘除、不透明度、快速查看間距、移動(dòng)微調(diào)、圖層重命名、打組/解組、快速選擇、智能選擇、自定義工具欄、旋轉(zhuǎn)復(fù)制、畫(huà)板自適應(yīng)、畫(huà)板折疊、設(shè)置快捷鍵、Test 樣式、圖層樣式、Symbols。

插件：

SketchI18N-master（漢化）、Sketch measure、Font-Packer-master。

一、軟件自帶

很多人只知道 sketch 有很多插件，但其實(shí)它也有很多自帶的功能非常好用，不亞于那些插件。

1. 新建畫(huà)板

當(dāng)你一打開(kāi)軟件的時(shí)候，想要新建一個(gè)畫(huà)板，可以按字母「A」，鼠標(biāo)就會(huì)變成一個(gè)「+」號(hào)，可以自己隨意框選畫(huà)板的尺寸；也可以直接用界面右側(cè)提供的常用設(shè)備的尺寸，如iPhone 8、iPhone X 等。

不過(guò)直接在右側(cè)選擇預(yù)設(shè)的尺寸，畫(huà)板的位置是固定的，沒(méi)辦法把畫(huà)板新建到指定地方的時(shí)候，這個(gè)時(shí)候我們可以用鼠標(biāo)直接框選畫(huà)板，然后再在右側(cè)調(diào)整畫(huà)板大小。

2. 加減乘除

做界面的時(shí)候經(jīng)常會(huì)出現(xiàn)這樣的情況，要把一個(gè)圖形均分三等分、四等分的，或者說(shuō)加上30px、40px，這時(shí)候要手動(dòng)去計(jì)算，然后再去輸入，很浪費(fèi)時(shí)間成本，而且對(duì)于數(shù)學(xué)不好的人來(lái)說(shuō)，還容易算錯(cuò)。

其實(shí) sketch 自帶就有一些快捷方法，在右側(cè)尺寸大小的面板處，可以直接在尺寸后輸入「+」「-」「*」「/」，后面跟上數(shù)字，輸完之后確定，就可以得到想要的計(jì)算結(jié)果了。

3. 不透明度

當(dāng)要改變一個(gè)元素的不透明度的時(shí)候，沒(méi)有必要到右側(cè)的參數(shù)面板來(lái)修改，可以直接按數(shù)字來(lái)調(diào)整，比如你想把不透明度改到65%，那么選中這個(gè)元素后，直接按數(shù)字65就好了，不滿意還可以重新輸入新的數(shù)字，當(dāng)不透明度是整數(shù)的時(shí)候，可以直接輸入數(shù)字1234567890，就不用輸「80」「90」了。

4. 快速查看間距

都說(shuō)做 UI 是在跟像素打交道，界面中各個(gè)地方的參數(shù)大小都不能有誤差，那這個(gè)時(shí)候我們就需要快速檢查兩個(gè)元素之間的間距大小，看看是不是統(tǒng)一。選擇其中一個(gè)元素，按住 option 不放，鼠標(biāo)放到另一個(gè)元素上，就可以看到兩者之間的間距了。

5. 移動(dòng)微調(diào)

大多數(shù)人只知道按住 shift 不放，選擇「上下左右」可以快速移動(dòng)10px，但其實(shí)10px這個(gè)是可以更改的，對(duì)于移動(dòng)端來(lái)說(shuō)，普遍都會(huì)把參數(shù)做成8的倍數(shù)，那么微移10px 來(lái)說(shuō)顯然不是那么合適，微移完了之后還得再調(diào)整一下。可以選擇「sketch-偏好設(shè)置-畫(huà)布」，把移動(dòng)對(duì)象10px 改成8px，或者任意你想要的參數(shù)。

6. 圖層重命名

雙擊圖層或者 Command+R

7. 打組/解組

Command+G ，Command shift +G

8. 快速選擇

當(dāng)我們把很多元素都打組之后，想要快速選擇組內(nèi)的元素，常用的方法是雙擊元素，但如果組嵌套的特別多的話，就很難選中了，這個(gè)時(shí)候我們可以用快捷鍵幫助我們快速選擇，按住 Command 不放，鼠標(biāo)點(diǎn)擊該元素。

9. 智能選擇

當(dāng)很多元素在一起的時(shí)候，只想選中其中的幾個(gè)，如果一下子框選，很容易選到不想選中的，這時(shí)候智能選擇就派上用場(chǎng)了，按住 option 不放，鼠標(biāo)框選元素，最終只有元素的范圍全部被框選中才會(huì)被選中。

10. 自定義工具欄

點(diǎn)擊頂部工具條空白處，選擇自定義工具欄，把自己常用的工具直接拖拽到頂部工具條上就好了。

11. 旋轉(zhuǎn)復(fù)制

記得剛開(kāi)始用 sketch 的時(shí)候，一直都不知道怎么旋轉(zhuǎn)復(fù)制，都是在 AI 里做好，導(dǎo)入進(jìn)來(lái)，后來(lái)才發(fā)現(xiàn) sketch 是有這個(gè)功能的。

12. 畫(huà)板自適應(yīng)

有的時(shí)候設(shè)計(jì)稿的尺寸超過(guò)一屏的時(shí)候，它的高度是根據(jù)內(nèi)容變化的， 沒(méi)有一個(gè)固定值，一般做的時(shí)候都是先把元素排好，然后再手動(dòng)調(diào)整畫(huà)板的大小，但很多時(shí)候容易出現(xiàn)幾像素的誤差，這時(shí)候就可以用軟件自帶的功能，來(lái)調(diào)整尺寸大小。圖層 - 畫(huà)板?- 調(diào)整大小以適應(yīng)內(nèi)容。（PS：其實(shí)可以把常用的功能設(shè)置成快捷鍵，后面會(huì)具體說(shuō)到）。

13. 畫(huà)板折疊

左側(cè)畫(huà)板較多想要折疊的時(shí)候，可以選擇「顯示 - 圖層列表 - 折疊所有分組」。

14. 設(shè)置快捷鍵

sketch 里有些自帶的功能有快捷鍵，但是很多常用的卻沒(méi)有，比如上面說(shuō)到的畫(huà)板折疊，它自帶沒(méi)有快捷鍵我們可以自己為他們?cè)O(shè)置。系統(tǒng)偏好設(shè)置?- 鍵盤 - 快捷鍵 - 添加?- 選擇應(yīng)用程序 、輸入菜單標(biāo)題、設(shè)置鍵盤快捷鍵?- 添加，這里所寫(xiě)的菜單標(biāo)題是對(duì)應(yīng)這 sketch 里的功能命名，必須要完全一樣，這樣設(shè)置的快捷鍵才生效。

15. Test 樣式

這個(gè)就相當(dāng)于一個(gè)全局統(tǒng)一的樣式，僅針對(duì)字體，當(dāng)我們定義好產(chǎn)品內(nèi)所用的字號(hào)之后，比如一級(jí)標(biāo)題、二級(jí)標(biāo)題、正文的字號(hào)，就可以把它做成 Test 樣式，這樣可以防止做到其他頁(yè)面的時(shí)候參數(shù)出錯(cuò)，和之前的不一樣。

當(dāng)要修改的時(shí)候，可以只修改一處，點(diǎn)擊 Update Text Style，就可以同步所有用到這個(gè)樣式的字體。

16. 圖層樣式

這個(gè)和 Test 樣式是一樣的，不過(guò)它針對(duì)的是圖形。

17. 圖片導(dǎo)出

當(dāng)我們用2x作圖的時(shí)候，最后導(dǎo)出切圖的時(shí)候，會(huì)發(fā)現(xiàn)切圖的后綴名不對(duì)，導(dǎo)出1x才是實(shí)際的2x圖，導(dǎo)出1.5x才是實(shí)際的3x圖，但是它的后綴卻是@1x、@2x，容易讓人誤解，而這個(gè)時(shí)候，只需要做一點(diǎn)小小的改變就可以避免這個(gè)情況了。

在軟件界面的右下角選擇編輯預(yù)設(shè)，把默認(rèn)里的導(dǎo)出參數(shù)改成1x、1.5x，后綴名改成@2x、@3x。

18. Symbols

眾所周知，sketch 最大的一個(gè)提高效率的方式就是組件化界面中所使用的元素，同一個(gè)界面出現(xiàn)的相同內(nèi)容都做成組件，方便后期直接調(diào)用（自帶功能，不是插件）。

下面以 App 底部標(biāo)簽欄為例，詳細(xì)說(shuō)明下 Symbols 的用法：

需要注意的是：

元素想要切換成其他的，必須這兩個(gè)的大小完全一致才行；

文字可直接再修改，不過(guò)考慮到文字長(zhǎng)短不一致，所以文字的寬度需要設(shè)置成最大顯示范圍；

二、插件

1. SketchI18N-master

漢化插件，一鍵安裝后界面就變成中文版了，更直觀，再也不用擔(dān)心不認(rèn)識(shí)英文單詞了。

2. Sketch measure

字體

非常好用的一款切圖標(biāo)注軟件，不過(guò)很多人在標(biāo)注字體的時(shí)候，可能會(huì)出現(xiàn)這種情況，文字密密麻麻的，所有的參數(shù)都出現(xiàn)了，但其實(shí)仔細(xì)會(huì)發(fā)現(xiàn)很多參數(shù)都不需要，還占地方。

我自己剛開(kāi)始的時(shí)候遇到這種情況，都是手動(dòng)把不需要的刪除，直到后來(lái)才發(fā)現(xiàn)有快捷鍵，我們只需要在標(biāo)注的時(shí)候按住「Alt」鍵，再點(diǎn)擊標(biāo)注（紅框處）就會(huì)出現(xiàn)讓調(diào)整參數(shù)的界面，選擇需要標(biāo)注的種類，以及標(biāo)注信息所顯示的方位，上下左右等。

自動(dòng)導(dǎo)出

如果每個(gè)頁(yè)面都自動(dòng)標(biāo)注的話，人力成本太大，所以我們可以用自動(dòng)導(dǎo)出+手動(dòng)標(biāo)注相結(jié)合的方式，把重要的、容易忽略的信息手動(dòng)標(biāo)注一下，比如小屏幕怎么適配等，那些重復(fù)性的工作都交給自動(dòng)導(dǎo)出吧。

雖說(shuō)要自動(dòng)導(dǎo)出+手動(dòng)標(biāo)注相結(jié)合，但我們也不能讓標(biāo)注信息充滿整個(gè)屏幕，那樣會(huì)影響測(cè)試同學(xué)的觀看。所以當(dāng)我們把標(biāo)注信息標(biāo)好之后，可以按住 ctrl、shift 不放，再按數(shù)字鍵 5，就可以把標(biāo)注的信息變成一個(gè)小圓點(diǎn)，當(dāng)開(kāi)發(fā)打開(kāi) html 的文件后，鼠標(biāo)移動(dòng)上去才會(huì)顯示全部?jī)?nèi)容。

3. Font-Packer-master

經(jīng)常會(huì)遇到這種情況，當(dāng)你把你的文件發(fā)給其他人的時(shí)候，各種提示沒(méi)有字體，然后軟件自己還會(huì)幫你替換成其他的字體，而現(xiàn)在有了這個(gè)插件就能避免這個(gè)問(wèn)題了，我們可以把頁(yè)面所用的字體一起打包發(fā)給其他人。

總結(jié)

以上就是我在用 sketch 的時(shí)候常用的插件以及一些使用小技巧，最后我想要說(shuō)明的一點(diǎn)是，雖然sketch的插件很多，琳瑯滿目的，但是我們要學(xué)會(huì)從中找到適合自己的，我們要知道我們的目的是——在不影響最終界面效果的前提下，提高工作效率。當(dāng)一個(gè)插件對(duì)界面效果以及工作效率沒(méi)有太大幫助的時(shí)候，那它就并不適合我們。

說(shuō)一句老生常談的話，要想做出好作品，關(guān)鍵不在于工具，而在于想法。

歡迎關(guān)注作者的微信公眾號(hào)：「海鹽社」

「提升效率的Sketch技巧」

• 《那些提高效率但不為人知的Sketch 冷知識(shí)（一）》
• 《那些提高效率但不為人知的Sketch 冷知識(shí)（二）》
• 《學(xué)會(huì)這4大Sketch 高階技巧，讓你的效率猛翻10倍！》