♝點擊上方「互動設計學堂」關注我們,送電子書
現在越來越多的人選擇用sketch來做UI界面，它相比PS來說，功能更高效，可以說是「專為界面設計而生」。如果把做界面比作削蘋果，那麼PS是一把斧頭，sketch則是水果刀，斧頭能做很多事情但是對於削蘋果這件事情來說，卻很麻煩，不如水果刀好用。
而且 sketch 學習成本很低，基本一兩天就能上手，加上它非常開放，支持第三方插件，這就出現了很多各式各樣的插件，方便了設計師的使用，提高了設計師的工作效率。那麼下面就從兩個方面，來向大家介紹那些工作中真的會用到的 sketch 小技巧：
軟體自帶：
新建畫板、加減乘除、不透明度、快速查看間距、移動微調、圖層重命名、打組/解組、快速選擇、智能選擇、自定義工具欄、旋轉複製、畫板自適應、畫板摺疊、設置快捷鍵、Test 樣式、圖層樣式、Symbols；
插件：
SketchI18N-master（漢化）、Sketch measure、Font-Packer-master；
軟體自帶
很多人只知道 sketch 有很多插件，但其實它也有很多自帶的功能非常好用，不亞於那些插件的。
新建畫板
當你一打開軟體的時候，想要新建一個畫板，可以按字母「A」，滑鼠就會變成一個「+」號，可以自己隨意框選畫板的尺寸；也可以直接用界面右側提供的常用設備的尺寸，如iPhone 8、iPhone X 等。
不過直接在右側選擇預設的尺寸，畫板的位置是固定的，沒辦法把畫板新建到指定地方的時候，這個時候我們可以用滑鼠直接框選畫板，然後再在右側調整畫板大小。
加減乘除
做界面的時候經常會出現這樣的情況，要把一個圖形均分三等分、四等分的，或者說加上30px、40px的，這時候要手動去計算，然後再去輸入，很浪費時間成本，而且對於數學不好的人來說，還容易算錯。
其實 sketch 自帶就有一些快捷方法，在右側尺寸大小的面板處，可以直接在尺寸後輸入「+」「-」「*」「/」，後面跟上數字，輸完之後確定，就可以得到想要的計算結果了。
不透明度
當要改變一個元素的不透明度的時候，沒有必要到右側的參數面板來修改，可以直接按數字來調整，比如你想把不透明度改到65%，那麼選中這個元素後，直接按數字65就好了，不滿意還可以重新輸入新的數字，當不透明度是整數的時候，可以直接輸入數字1234567890，就不用輸「80「90」了。
快速查看間距
都說做 UI 是在跟像素打交道，界面中各個地方的參數大小都不能有誤差，那這個時候我們就需要快速插件兩個元素之間的間距大小，看看是不是統一。選擇其中一個元素，按住 option 不放，滑鼠放到另一個元素上，就可以看到兩者之間的間距了。
移動微調
大多數人只知道按住 shift 不放，選擇「上下左右」可以快速移動10px，但其實10px 這個是可以更改的，對於移動端來說，普遍都會把參數做成8的倍數，那麼微移10px 來說顯然不是那麼合適，微移完了之後還得再調整一下。可以選擇 sketch-偏好設置-畫布，把移動對象10px 改成8px，或者任意你想要的參數。
圖層重命名
雙擊圖層或者 Command+R
打組/解組
Command+G ，Command shift +G
快速選擇
當我們把很多元素都打組之後，想要快速選擇組內的元素，常用的方法是雙擊元素，但如果組嵌套的特別多的話，就很難選中了，這個時候我們可以用快捷鍵幫助我們快速選擇，按住 Command 不放，滑鼠點擊該元素。
智能選擇
當很多元素在一起的時候，只想選中其中的幾個，如果一下子框選，很容易選到不想選中的，這時候智能選擇就派上用場了，按住option 不放，滑鼠框選元素，最終只有元素的範圍全部被框選中才會被選中。
自定義工具欄
點擊頂部工具條空白處，選擇自定義工具欄，把自己常用的工具直接拖拽到頂部工具條上就好了。
旋轉複製
記得剛開始用 sketch 的時候，一直都不知道怎麼旋轉複製，都是在 AI 裡做好，導入進來，後來才發現 sketch 是有這個功能的。
畫板自適應
有的時候設計稿的尺寸超過一屏的時候，它的高度是根據內容變化的， 沒有一個固定值，一般做的時候都是先把元素排好，然後再手動調整畫板的大小，但很多時候容易出現幾像素的誤差，這時候就可以用軟體自帶的功能，來調整尺寸大小。圖層 — 畫板 — 調整大小以適應內容。（PS: 其實可以把常用的功能設置成快捷鍵，後面會具體說到）。
畫板摺疊
左側畫板較多想要摺疊的時候，可以選擇 顯示 — 圖層列表 — 摺疊所有分組。
設置快捷鍵
sketch 裡有些自帶的功能有快捷鍵，但是很多常用的卻沒有，比如上面說到的畫板摺疊，它自帶沒有快捷鍵我們可以自己為他們設置的。系統偏好設置 — 鍵盤 — 快捷鍵 — 添加 —選擇應用程式 、輸入菜單標題、設置鍵盤快捷鍵 — 添加，這裡所寫的菜單標題是對應這 sketch 裡的功能命名，必須要完全一樣，這樣設置的快捷鍵才生效。
Test 樣式
這個就相當於一個全局統一的樣式，僅針對字體，當我們定義好產品內所用的字號之後，比如一級標題、二級標題、正文的字號，就可以把它做成 Test 樣式，這樣可以防止做到其他頁面的時候參數出錯，和之前的不一樣。
當要修改的時候，可以只修改一處，點擊 Update Text Style，就可以同步所有用到這個樣式的字體。
圖層樣式
這個和 Test 樣式是一樣的，不過它針對的是圖形。
圖片導出
當我們用2x作圖的時候，最後導出切圖的時候，會發現切圖的後綴名不對，導出 1x 才是實際的2x圖，導出1.5x才是實際的3x圖，但是它的後綴卻是@1x、@2x，容易讓人誤解，而這個時候，只需要做一點小小的改變就可以避免這個情況了。
在軟體界面的右下角選擇編輯預設，把默認裡的導出參數改成 1x、1.5x，後綴名改成 @2x、@3x。
Symbols
眾所周知，sketch最大的一個提高效率的方式就是組件化界面中所使用的元素，同一個界面出現的相同內容都做成組件，方便後期直接調用（自帶功能，不是插件）。
下面以 App 底部標籤欄為例，詳細說明下 Symbols 的用法：
需要注意的是：
1. 元素想要切換成其他的，必須這兩個的大小完全一致才行；
2. 文字可直接在修改，不過考慮到文字長短不一致，所以文字的寬度需要設置成最大顯示範圍；
插件
SketchI18N-master
漢化插件，一鍵安裝後界面就變成中文版了，更直觀，再也不用擔心不認識英文單詞了。
Sketch measure
1. 字體
非常好用的一款切圖標註軟體，不過很多人在標註字體的時候，可能會出現這種情況，文字密密麻麻的，所有的參數都出現了，但其實仔細會發現很多參數都不需要，還佔地方。
我自己剛開始的時候遇到這種情況，都是手動把不需要的刪除，直到後來才發現有快捷鍵，我們只需要在標註的時候按住「Alt」鍵，再點擊標註（紅框處）就會出現讓調整參數的界面，選擇需要標註的種類，以及標註信息所顯示的方位，上下左右等。
2. 自動導出
如果每個頁面都自動標註的話，人力成本太大，所以我們可以用自動導出+手動標註相結合的方式，把重要的、容易忽略的信息手動標註一下，比如小屏幕怎麼適配等，那些重複性的工作都交給自動導出吧。
雖說要自動導出+手動標註相結合，但我們也不能讓標註信息充滿整個屏幕，那樣會影響測試同學的觀看。所以當我們把標註信息標好之後，可以按住 ctrl、shift 不放，再按數字鍵 5，就可以把標註的信息變成一個小圓點，當開發打開 html 的文件後，滑鼠移動上去才會顯示全部內容。
Font-Packer-master
經常會遇到這種情況，當你把你的文件發給其他人的時候，各種提示沒有字體，然後軟體自己還會幫你替換成其他的字體，而現在有了這個插件就能避免這個問題了，我們可以把頁面所用的字體一起打包發給其他人。
總結
以上就是我在用sketch的時候常用的插件以及一些使用小技巧，最後我想要說明的一點是，雖然sketch的插件很多，琳琅滿目的，但是我們要學會從中找到適合自己的，我們要知道我們的目的是——在不影響最終界面效果的前提下，提高工作效率。當一個插件對界面效果以及工作效率沒有太大幫助的時候，那它就並不適合我們。
說一句老生常談的話，要想做出好作品，關鍵不在於工具，而在於想法。
感謝閱讀！
歡迎投稿：jhsjxt@163.com
加老D私人微信18605817040，和老D一起學交互，老D會在朋友圈發精選文章和招聘信息
互動設計學堂已經開設了新的欄目-行知書院，旨在幫助小夥伴們來高效的學習現在市面上優秀的用戶體驗書籍比如《互動設計精髓》等等，同時結合老D的工作經驗來幫助你們從不同的高度和角度來解讀書中的內容。每天一課，積少成多。已有222位小夥伴加入。詳細了解行知書院