關(guān)注“ba la ba la ux”，一起學(xué)習(xí)用戶體驗設(shè)計！

編者按：古語云：工欲善其事，必先利其器。 設(shè)計也是如此。 一款簡單易用的軟件可以使設(shè)計人員事半功倍。

它是設(shè)計師軟件庫的必備技能之一。 它是一個矢量繪圖應(yīng)用程序，矢量繪圖無疑是設(shè)計網(wǎng)頁、圖標(biāo)和界面的最佳方式。 趕快和巴拉軍一起獲得新技能吧！

01

界面

界面設(shè)計特別簡潔。 頂部的工具箱包含最重要的操作。 您可以使用左側(cè)的檢查器調(diào)整所選視口的內(nèi)容，兩側(cè)的窗口會列出文件中的所有視口，中間實際上是您正在創(chuàng)建的畫布。

沒有浮動面板sketch剪切蒙版快捷鍵，檢查器會根據(jù)你選擇的工具顯示需要的控件，讓用戶可以隨時在畫布上創(chuàng)作，不受打擾。

1.畫布

畫布的大小不受限制，可以向任意方向無限延伸，你將擁有絕對的自由規(guī)劃自己的創(chuàng)作區(qū)域。

如果你想在畫布中設(shè)置一個固定的相框，你只需要創(chuàng)建一個或多個新的畫板。 比如，在設(shè)計中國聯(lián)通的應(yīng)用界面時，很多設(shè)計師都會為應(yīng)用的每一屏創(chuàng)建一個畫板，然后進(jìn)行排列，方便查看。

您可以無限精確地以獨立于幀速率的模式查看畫布，或打開像素模式以查看每個像素在導(dǎo)入 JPG 或 PNG 文件后的外觀。 值得注意的是，某些效果（例如模糊）會以像素為單位手動顯示畫布的一部分，因為模糊本身是一種基于像素的效果。

二、檢查員

一方面，檢查器可以讓您對正在編輯的視口進(jìn)行參數(shù)調(diào)整——有時還可以調(diào)整您正在使用的工具。 當(dāng)您選擇一個視口時，您會注意到檢測器被劃分為幾個區(qū)域。

2.1 一般屬性

一般視口樣式都在頂部區(qū)域：視口的位置、透明度、混合模式和一些特殊選項 - 例如調(diào)整正方形的角直徑和六邊形的不同點模式。

2.2 樣式屬性

和 fill 屬性有自己的區(qū)域，可以勾選左上角的小框來展開它們并顯示具體的選項。 如果你點擊顏色按鈕，你會發(fā)現(xiàn)探測器掉到一邊，出現(xiàn)一個新的專用顏色探測器，你只需要點擊頂部的“返回”按鈕就可以回到主探測器。 當(dāng)您選擇其他視口時，您也會手動返回到主檢查器。

3.圖層列表

視口列表列出了頁面上的所有視口（和圖塊），每一層都會有一個小的預(yù)覽。 在這里您可以：查看包層是否被鎖定、不可見、被遮蓋或標(biāo)記為可導(dǎo)入； 重新排列視口，或向視口添加布爾運(yùn)算，例如按閣樓形狀劃分； 組視口或重命名它們以管理它們。

3.1 多頁面操作

支持多頁操作，可以在視口列表前面的按鈕上添加/刪除或切換到其他頁面（或使用鼠標(biāo)上的/切換）。 視口列表仍將僅顯示當(dāng)前頁面的視口。

3.2 畫板

在視口列表中，藍(lán)色背景的列是畫板。 您可以將畫板視為設(shè)計中的頂層對象，因此一個畫板不能嵌入另一個畫板。

3.3 掩蔽

在視口列表中，那些使用圖層的視口名稱前會有一個點，它們的遮罩將是緊靠下方?jīng)]有點的視口。 了解更多關(guān)于口罩的信息。

3.4 布爾運(yùn)算

每個形狀可以包含多個子路徑，它們將以組的形式顯示在視口列表中，并用下拉箭頭顯示具體的子路徑。 可以為每一層子路徑獨立設(shè)置布爾運(yùn)算，以確定哪些方法與其下一個視口結(jié)合。 視口列表可以清楚地說明子路徑的組合，同時方便您隨時調(diào)整和修改。

3.5 符號和共享樣式

符號是一個特殊的組，可以出現(xiàn)在一個文件的多個地方。 符號在電鍍列表中顯示為白色文件夾圖標(biāo) - 正常分組是白色文件夾。 了解有關(guān)符號的更多信息。

共享樣式可以使多個對象（圖形和文本）的樣式保持一致。 如果一個圖形或一段文字使用共享樣式，它們的小預(yù)覽圖標(biāo)將顯示為紅色而不是標(biāo)準(zhǔn)的黑色。 詳細(xì)了解共享樣式。

4.工具欄

工具欄包含您創(chuàng)作所需的所有工具。

在默認(rèn)工具欄中，第一組工具用于添加新圖層：形狀、圖片、符號等。

分組（Group）和取消分組（）可以讓你對文件進(jìn)行詳細(xì)的組織。

接下來的幾個工具用于編輯現(xiàn)有視口：()、()、通過布爾運(yùn)算合并視口以及在視口列表中向上或向下移動視口。

工具欄末尾的導(dǎo)入 () 按鈕也是一個剪切工具，您可以在其中將您的作品導(dǎo)入為一個或多個位圖或矢量文件。

與其他繪圖應(yīng)用程序不同，常用工具放置在頂部工具欄中，而不是垂直排列的工具箱，但如果需要，您可以通過右鍵單擊工具欄并進(jìn)入“自定義工具欄...”來添加它 (...)和快捷鍵。

02

熱點功能

是一款功能強(qiáng)大的產(chǎn)品，因為功能太多，只介紹一些熱門功能。

1.布爾運(yùn)算

如果標(biāo)準(zhǔn)圖形中沒有你想要的圖形，則需要自己創(chuàng)建。 你的第一個想法似乎是用矢量工具手工繪制它sketch剪切蒙版快捷鍵，但你會發(fā)現(xiàn)很多復(fù)雜的圖形可以很容易地拆分成基本圖形。 布爾運(yùn)算只是為了幫助您實現(xiàn)這一點——將幾個基本形狀組合成一個復(fù)雜的形狀。

有4種不同的布爾運(yùn)算，您可以根據(jù)需要選擇：

?并集：合并的結(jié)果是兩個向量區(qū)域之和。

? by Shape()：該選項的結(jié)果是矢量的面積將從下一層的圖形中移除。

?與形狀區(qū)域相交（）：與形狀區(qū)域相交的結(jié)果將保留原始圖形的重疊部分。

?排除重疊形狀（）：排除重疊形狀的結(jié)果是只保留原始圖形中不重疊的部分，與“與形狀區(qū)域相交”的操作相反。

2.面膜

中的遮罩允許您有選擇地顯示視口的一部分。 比如你給一張圖片加上一個方形的遮罩，那么圖片就只會顯示方形里面的內(nèi)容。

所有的圖形都可以做成蒙版，只需要先選中圖形，然后進(jìn)入視口>使用圖形蒙版（Layer>），這個蒙版中的所有圖形都會被裁剪成蒙版的內(nèi)容來顯示。

?圖??形遮罩：如果前面的一系列操作聽起來很繁瑣，我們有更好的方法：同時在畫布上選擇一個圖形和一張圖片，選擇>Use the graph as a mask (Layer> "") ，可以直接使用這個形狀作為選中圖片的遮罩。 它們將被手動分組，其中的圖形視口將被屏蔽。

3.文字

使用操作系統(tǒng)的本機(jī)字體呈現(xiàn)，使文本看起來很棒。 使用本機(jī)字體呈現(xiàn)的好處在于，當(dāng)您為 Web 進(jìn)行設(shè)計時，您可以確保作品中的文本準(zhǔn)確無誤。 還支持文本樣式，因此您可以讓多個文本視口使用通用的字體、大小和字寬等。

?添加文字：您可以從工具欄中選擇文字工具。 當(dāng)光標(biāo)變成文本光標(biāo)時，單擊畫布中的任意位置以添加文本視口。 您會看到新的文本視口已被選中，因此請立即開始輸入。 您也可以單擊并拖動鍵盤以創(chuàng)建固定大小的文本框。 當(dāng)文本內(nèi)容小于文本框時，文本框的寬度會自動向下擴(kuò)展。 沒有固定規(guī)格的普通文本框會向后擴(kuò)展以容納文本內(nèi)容。

?改變文字大小：如果直接拖放文本框，文字本身的大小不會隨之改變，可以驅(qū)動文本框頂部的縮放搖桿來控制文本框和文字的大小一起

4.風(fēng)格

?對齊：探測器頂部有一些關(guān)于對齊的按鈕。 左邊的6個按鈕是讓多個視口相對于自己對齊，只有一個視口時與當(dāng)前畫板對齊。 左側(cè)的對齊按鈕用于使視口垂直或水平分布。 例如，如果你水平分布它們，最左邊和最右邊的兩個視口將留在原地，而其他視口將平均分布在它們之間。

?視口透明度快捷鍵：與探測器也沒有嚴(yán)格關(guān)系，但每次選擇視口時，可以按數(shù)字快捷鍵1-9快速調(diào)整視口透明度從10%到90%，按0會將透明度設(shè)置為 100%。

5.模糊

您可以在模糊工具區(qū)域中選擇四種不同的模糊方法：

?高斯模糊（Blur）：使視口均勻模糊

?模糊：只在一個方向模糊，造成運(yùn)動錯覺

?：從特定點向外模糊

?模糊：模糊視口下方圖層的內(nèi)容

6.漸變

要為圖形設(shè)置漸變填充，可以直接選中圖形，點擊填充按鈕，調(diào)色工具就會顯示在檢查器中。 要了解如何使用著色工具，請先閱讀有關(guān)著色工具的章節(jié)。 在“色調(diào)”面板的頂部，您還可以選擇使用黑色、漸變、圖案或雜色進(jìn)行填充。

您可以選擇線性漸變、徑向漸變或圓形漸變，它們在 .

7、導(dǎo)出視口3的新功能是可以直接導(dǎo)入到視口中，無需完善切割。

? VS ：導(dǎo)入視口的能力意味著畫布上的其他元素不會一起導(dǎo)入，如果它的表面有視口或背景視口，它們將不會包含在導(dǎo)入的文檔中。

此方法適用于導(dǎo)入圖標(biāo)或較大設(shè)計的小元素，但不適用于導(dǎo)入整個設(shè)計。

?導(dǎo)入視口：您可以單擊小 + 按鈕添加新的導(dǎo)入尺寸，默認(rèn)情況下它將是帶有 @2x 前綴的 2x 尺寸圖像，但可以根據(jù)需要更改。 如果你已經(jīng)在創(chuàng)建一個@px 作品，你也可以給它添加一個@2x 前綴，然后添加一個0.5 倍大小的 方法。

03

熱鍵

巴拉巴拉福利俱樂部：巴拉巴拉與伙伴們整理的快捷鍵全集！ 快來看看吧！

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