橙子的橙子：現在越來越多的人選擇用 sketch 來做 UI界面，它相比 PS 來說，功能更高效，可以說是「專為界面設計而生」。如果把做界面比作削蘋果，那么 PS 是一把斧頭，sketch 則是水果刀，斧頭能做很多事情但是對于削蘋果這件事情來說，卻很麻煩，不如水果刀好用。
而且 sketch 學習成本很低，基本一兩天就能上手，加上它非常開放，支持第三方插件，這就出現了很多各式各樣的插件，方便了設計師的使用，提高了設計師的工作效率。那么下面就從兩個方面，來向大家介紹那些工作中真的會用到的 sketch 小技巧。
軟件自帶：
新建畫板、加減乘除、不透明度、快速查看間距、移動微調、圖層重命名、打組/解組、快速選擇、智能選擇、自定義工具欄、旋轉復制、畫板自適應、畫板折疊、設置快捷鍵、Test 樣式、圖層樣式、Symbols。
插件：
SketchI18N-master（漢化）、Sketch measure、Font-Packer-master。
一、軟件自帶
很多人只知道 sketch 有很多插件，但其實它也有很多自帶的功能非常好用，不亞于那些插件。
1. 新建畫板
當你一打開軟件的時候，想要新建一個畫板，可以按字母「A」，鼠標就會變成一個「+」號，可以自己隨意框選畫板的尺寸；也可以直接用界面右側提供的常用設備的尺寸，如iPhone 8、iPhone X 等。
不過直接在右側選擇預設的尺寸，畫板的位置是固定的，沒辦法把畫板新建到指定地方的時候，這個時候我們可以用鼠標直接框選畫板，然后再在右側調整畫板大小。
2. 加減乘除
做界面的時候經常會出現這樣的情況，要把一個圖形均分三等分、四等分的，或者說加上30px、40px，這時候要手動去計算，然后再去輸入，很浪費時間成本，而且對于數學不好的人來說，還容易算錯。
其實 sketch 自帶就有一些快捷方法，在右側尺寸大小的面板處，可以直接在尺寸后輸入「+」「-」「*」「/」，后面跟上數字，輸完之后確定，就可以得到想要的計算結果了。
3. 不透明度
當要改變一個元素的不透明度的時候，沒有必要到右側的參數面板來修改，可以直接按數字來調整，比如你想把不透明度改到65%，那么選中這個元素后，直接按數字65就好了，不滿意還可以重新輸入新的數字，當不透明度是整數的時候，可以直接輸入數字1234567890，就不用輸「80」「90」了。
4. 快速查看間距
都說做 UI 是在跟像素打交道，界面中各個地方的參數大小都不能有誤差，那這個時候我們就需要快速檢查兩個元素之間的間距大小，看看是不是統一。選擇其中一個元素，按住 option 不放，鼠標放到另一個元素上，就可以看到兩者之間的間距了。
5. 移動微調
大多數人只知道按住 shift 不放，選擇「上下左右」可以快速移動10px，但其實10px這個是可以更改的，對于移動端來說，普遍都會把參數做成8的倍數，那么微移10px 來說顯然不是那么合適，微移完了之后還得再調整一下。可以選擇「sketch-偏好設置-畫布」，把移動對象10px 改成8px，或者任意你想要的參數。
6. 圖層重命名
雙擊圖層或者 Command+R
7. 打組/解組
Command+G ，Command shift +G
8. 快速選擇
當我們把很多元素都打組之后，想要快速選擇組內的元素，常用的方法是雙擊元素，但如果組嵌套的特別多的話，就很難選中了，這個時候我們可以用快捷鍵幫助我們快速選擇，按住 Command 不放，鼠標點擊該元素。
9. 智能選擇
當很多元素在一起的時候，只想選中其中的幾個，如果一下子框選，很容易選到不想選中的，這時候智能選擇就派上用場了，按住 option 不放，鼠標框選元素，最終只有元素的范圍全部被框選中才會被選中。
10. 自定義工具欄
點擊頂部工具條空白處，選擇自定義工具欄，把自己常用的工具直接拖拽到頂部工具條上就好了。
11. 旋轉復制
記得剛開始用 sketch 的時候，一直都不知道怎么旋轉復制，都是在 AI 里做好，導入進來，后來才發現 sketch 是有這個功能的。
12. 畫板自適應
有的時候設計稿的尺寸超過一屏的時候，它的高度是根據內容變化的， 沒有一個固定值，一般做的時候都是先把元素排好，然后再手動調整畫板的大小，但很多時候容易出現幾像素的誤差，這時候就可以用軟件自帶的功能，來調整尺寸大小。圖層 - 畫板?- 調整大小以適應內容。（PS：其實可以把常用的功能設置成快捷鍵，后面會具體說到）。
13. 畫板折疊
左側畫板較多想要折疊的時候，可以選擇「顯示 - 圖層列表 - 折疊所有分組」。
14. 設置快捷鍵
sketch 里有些自帶的功能有快捷鍵，但是很多常用的卻沒有，比如上面說到的畫板折疊，它自帶沒有快捷鍵我們可以自己為他們設置。系統偏好設置?- 鍵盤 - 快捷鍵 - 添加?- 選擇應用程序 、輸入菜單標題、設置鍵盤快捷鍵?- 添加，這里所寫的菜單標題是對應這 sketch 里的功能命名，必須要完全一樣，這樣設置的快捷鍵才生效。
15. Test 樣式
這個就相當于一個全局統一的樣式，僅針對字體，當我們定義好產品內所用的字號之后，比如一級標題、二級標題、正文的字號，就可以把它做成 Test 樣式，這樣可以防止做到其他頁面的時候參數出錯，和之前的不一樣。
當要修改的時候，可以只修改一處，點擊 Update Text Style，就可以同步所有用到這個樣式的字體。
16. 圖層樣式
這個和 Test 樣式是一樣的，不過它針對的是圖形。
17. 圖片導出
當我們用2x作圖的時候，最后導出切圖的時候，會發現切圖的后綴名不對，導出1x才是實際的2x圖，導出1.5x才是實際的3x圖，但是它的后綴卻是@1x、@2x，容易讓人誤解，而這個時候，只需要做一點小小的改變就可以避免這個情況了。
在軟件界面的右下角選擇編輯預設，把默認里的導出參數改成1x、1.5x，后綴名改成@2x、@3x。
18. Symbols
眾所周知，sketch 最大的一個提高效率的方式就是組件化界面中所使用的元素，同一個界面出現的相同內容都做成組件，方便后期直接調用（自帶功能，不是插件）。
下面以 App 底部標簽欄為例，詳細說明下 Symbols 的用法：
需要注意的是：
元素想要切換成其他的，必須這兩個的大小完全一致才行；
文字可直接再修改，不過考慮到文字長短不一致，所以文字的寬度需要設置成最大顯示范圍；
二、插件
1. SketchI18N-master
漢化插件，一鍵安裝后界面就變成中文版了，更直觀，再也不用擔心不認識英文單詞了。
2. Sketch measure
字體
非常好用的一款切圖標注軟件，不過很多人在標注字體的時候，可能會出現這種情況，文字密密麻麻的，所有的參數都出現了，但其實仔細會發現很多參數都不需要，還占地方。
我自己剛開始的時候遇到這種情況，都是手動把不需要的刪除，直到后來才發現有快捷鍵，我們只需要在標注的時候按住「Alt」鍵，再點擊標注（紅框處）就會出現讓調整參數的界面，選擇需要標注的種類，以及標注信息所顯示的方位，上下左右等。
自動導出
如果每個頁面都自動標注的話，人力成本太大，所以我們可以用自動導出+手動標注相結合的方式，把重要的、容易忽略的信息手動標注一下，比如小屏幕怎么適配等，那些重復性的工作都交給自動導出吧。
雖說要自動導出+手動標注相結合，但我們也不能讓標注信息充滿整個屏幕，那樣會影響測試同學的觀看。所以當我們把標注信息標好之后，可以按住 ctrl、shift 不放，再按數字鍵 5，就可以把標注的信息變成一個小圓點，當開發打開 html 的文件后，鼠標移動上去才會顯示全部內容。
3. Font-Packer-master
經常會遇到這種情況，當你把你的文件發給其他人的時候，各種提示沒有字體，然后軟件自己還會幫你替換成其他的字體，而現在有了這個插件就能避免這個問題了，我們可以把頁面所用的字體一起打包發給其他人。
總結
以上就是我在用 sketch 的時候常用的插件以及一些使用小技巧，最后我想要說明的一點是，雖然sketch的插件很多，琳瑯滿目的，但是我們要學會從中找到適合自己的，我們要知道我們的目的是——在不影響最終界面效果的前提下，提高工作效率。當一個插件對界面效果以及工作效率沒有太大幫助的時候，那它就并不適合我們。
說一句老生常談的話，要想做出好作品，關鍵不在于工具，而在于想法。
歡迎關注作者的微信公眾號：「海鹽社」
「提升效率的Sketch技巧」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發表評論 為下方 13 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓