現(xiàn)在越來越多的人選擇用它來做UI界面，相比PS，它的效率更高，可以說是“為界面設(shè)計而設(shè)計的”。如果說做界面就像削蘋果，那么PS就是一把斧子，然后就是一把水果刀。斧子可以做很多事情，但是削蘋果就很麻煩了，而且沒有水果刀那么好用。

學(xué)習(xí)成本很低，基本一兩天就可以上手。再加上它非常開放，支持第三方插件，這就導(dǎo)致了各種各樣的插件的出現(xiàn)，讓設(shè)計師使用起來更加方便，提高了工作效率。那么下面就從兩個方面給大家介紹一下在工作中真正會用到的小技巧：

軟件附帶：

創(chuàng)建新畫板、加、減、乘、除、不透明度、快速檢查間距、移動和微調(diào)、重命名圖層、分組/取消分組、快速選擇、智能選擇、自定義工具欄、旋轉(zhuǎn)和復(fù)制、畫板適配、畫板折疊、設(shè)置快捷鍵、測試樣式、圖層樣式等。

插件：

-(中文版), ,字體--;

軟件附帶

很多人只知道它有很多插件，但其實它還有很多內(nèi)置的功能非常好用，絲毫不比那些插件遜色。

創(chuàng)建新畫板

當你打開軟件想要創(chuàng)建新的畫板時，你可以按下字母“A”，鼠標會變成“+”號，可以隨意選擇畫板的大?。灰部梢灾苯邮褂媒缑嬗覀?cè)提供的常用設(shè)備的尺寸，比如8、X等。

加法、減法、乘法和除法

在做界面的時候經(jīng)常會出現(xiàn)這種情況：需要把一個圖形三等分或者四等分，或者增加30px或者40px，這時候就得手動計算然后輸入，這對于數(shù)學(xué)不好的人來說非常耗時，而且容易出錯。

其實內(nèi)置了一些快捷方法，在右側(cè)的尺寸面板中，直接在尺寸后面輸入“+、-、*、/”，后面跟著數(shù)字，輸入完之后確認，就可以得到想要的計算結(jié)果了。

不透明度

當你想改變某個元素的不透明度時，無需去右側(cè)的參數(shù)面板修改，直接通過數(shù)字來調(diào)整即可。比如你想把不透明度改為 65%，那么選中元素后，直接按數(shù)字 65 即可。如果不滿意，可以重新輸入新的數(shù)字。當不透明度為整數(shù)時，可以直接輸入數(shù)字，而不必輸入“80”或“90”。

快速查看間距

都說UI設(shè)計就是跟像素打交道，界面各個地方的參數(shù)大小都不能出現(xiàn)任何誤差。這時候我們就需要快速的塞入兩個元素之間的間距，看看它們是否均勻。選中一個元素，按住不放，將鼠標移到另一個元素上，就可以看到兩者之間的間距了。

移動端微調(diào)

大多數(shù)人只知道按住Shift并選擇“上下左右”可以快速移動10px，但實際上10px是可以改變的。對于移動端來說，參數(shù)一般都設(shè)置為8的倍數(shù)，所以微調(diào)10px顯然不是那么合適。微調(diào)完之后，你還要再調(diào)整一下。你可以選擇-首選項-畫布，將移動物體10px改為8px，或者任何你想要的參數(shù)。

重命名圖層

雙擊圖層或 +R

分組/取消分組

+G 、Shift +G

快速選擇

當我們對很多元素進行分組的時候，我們想要快速選中組內(nèi)的元素，常用的方法是雙擊元素，但是如果嵌套的組太多，選中起來就會比較困難，這時候我們可以用快捷鍵來幫助我們快速選中，用鼠標按住并單擊元素即可。

智能選擇

當元素很多在一起的時候，只想選中其中的幾個，如果一次性全部選中，很容易選到不想選的元素，這時候智能選擇就派上用場了，按住鼠標選中元素，最后只有選中了所有元素才會被選中。

自定義工具欄

點擊頂部工具欄的空白區(qū)域，選擇自定義工具欄，然后將常用的工具直接拖到頂部工具欄。

旋轉(zhuǎn)復(fù)印

記得剛開始用的時候不知道怎么旋轉(zhuǎn)和復(fù)制，就直接在AI里做了然后導(dǎo)入，后來才知道原來還有這個功能。

自適應(yīng)畫板

有時當設(shè)計尺寸超過一屏?xí)r，其高度會根據(jù)內(nèi)容而變化，沒有固定值，一般會先將元素排布好，再手動調(diào)整畫板大小，但這樣很容易出現(xiàn)幾個像素的誤差，此時可以使用軟件內(nèi)置的調(diào)整大小功能，圖層-畫板-調(diào)整大小以適合內(nèi)容。（PS：其實可以將常用功能設(shè)置為快捷鍵，后面會講到）。

畫板折疊

當左側(cè)畫板過多，想要折疊時，可以選擇視圖——圖層列表——折疊全部組。

設(shè)置快捷鍵

有些內(nèi)置功能有快捷鍵，但是很多常用的卻沒有。比如上面提到的畫板折疊就沒有快捷鍵sketch有沒有中文版，我們可以自己設(shè)置。系統(tǒng)偏好設(shè)置-鍵盤-快捷鍵-添加-選擇應(yīng)用程序，輸入菜單標題，設(shè)置鍵盤快捷鍵-添加。這里寫的菜單標題和這里的功能名是一一對應(yīng)的，必須完全一致，這樣設(shè)置的快捷鍵才會生效。

文本樣式

這個相當于一個全局統(tǒng)一的樣式，只是針對字體來說的。我們定義好產(chǎn)品里面用到的字體大小之后，比如一級標題、二級標題、正文的字體大小，就可以把它做成一個Text樣式。這樣可以防止做其他頁面的時候參數(shù)出錯，跟前面的不一樣。

當你想要進行更改時，只需修改一個地方，然后單擊刷新即可同步所有使用此樣式的字體。

圖層樣式

這與文本樣式相同，但它適用于圖形。

圖像導(dǎo)出

當我們使用2x畫圖時，最后導(dǎo)出切圖的時候會發(fā)現(xiàn)切圖的后綴是錯誤的，導(dǎo)出1x才是實際的2x圖片，而導(dǎo)出1.5x才是實際的3x圖片，但是它的后綴卻是@1x和@2x，這樣很容易讓人產(chǎn)生誤解，這時候只需要稍微改一下就可以避免這種情況了。

選擇軟件界面右下角的Edit ，將默認的導(dǎo)出參數(shù)改為1x、1.5x，將后綴改為@2x、@3x。

眾所周知，提高效率最大的一個方法就是將界面使用的元素進行組件化，將同一個界面中出現(xiàn)的相同內(nèi)容做成組件，方便后期直接調(diào)用（內(nèi)置函數(shù)，而非插件）。

下面以App底部標簽欄為例，詳細講解使用方法：

需要注意的是：

1. 如果要將一個元素切換到另一個元素，兩個元素的大小必須完全相同；

2、可直接修改文字，但考慮到文字長度不一致，需要將文字寬度設(shè)置為最大顯示范圍；

插件

-

中文插件，一鍵安裝后界面就變成中文版sketch有沒有中文版，更加直觀，再也不用擔(dān)心不認識英文單詞了。

1. 字體

這是一款非常好用的圖表標注軟件，但是很多人在標注字體的時候可能會遇到這種情況：文字密密麻麻，參數(shù)也都顯示出來了，但是仔細看就會發(fā)現(xiàn)很多參數(shù)是不需要的，很占空間。

一開始遇到這種情況，我都是手動把不需要的刪掉，直到后來才找到快捷鍵，我們只需要在標記的時候按住“Alt”鍵，然后點擊標記（紅框），就會彈出一個調(diào)整參數(shù)的界面，選擇需要進行的標記類型，以及標記信息應(yīng)該顯示的方向，比如上、下、左、右等。

2.自動導(dǎo)出

如果每一頁都自動標注的話，人力成本就太高了，所以我們可以采用自動導(dǎo)出和手動標注相結(jié)合的方式，把重要的、容易被忽略的信息，比如如何適配小屏幕等，手動標注出來，把那些重復(fù)性的工作留給自動導(dǎo)出去做。

雖然我們需要結(jié)合自動導(dǎo)出和手動標注，但是我們不能讓標注信息占滿整個屏幕，影響測試同學(xué)的查看。所以我們在標注好標注信息后，可以按住ctrl和shift，再按數(shù)字鍵5，將標注信息變成一個小圓點。當開發(fā)者打開HTML文件時，鼠標移到上面就會顯示全部內(nèi)容。

字體--

你經(jīng)常會遇到這種情況：當你把你的文件發(fā)給別人的時候，會各種提示沒有字體，然后軟件就會幫你用其他字體替換?，F(xiàn)在有了這個插件，你就可以避免這個問題了。我們可以把頁面用到的字體打包后發(fā)給別人。

總結(jié)

以上就是我經(jīng)常使用的插件以及一些使用技巧，最后我想說明一下，雖然插件有很多，但是我們要學(xué)會找到適合自己的，要知道我們的目的是為了提高工作效率，不影響最終的界面效果，當一個插件對界面效果和工作效率沒有太大的幫助時，它就不適合我們。

俗話說，想要創(chuàng)作好的作品，關(guān)鍵不是工具，而是思路。

如有侵權(quán)請聯(lián)系刪除！