記得在國美的那段日子，被催著做圖，ps卡動彈不得，滿頭大汗，設計經理經常對我們說：“誰讓你不用的，太好了你不用怪誰？” 而且我們都是mac……當時心里想的應該是是不是習慣了，嗯，沒時間研究。

為什么要使用它？

明天真的要強烈推薦給大家，這款超輕量級的軟件，再也不用怕設計卡頓了，矢量設計完美！ ps之后就是你的輔助工具了。

作為一個UI設計師，而不是平面設計師，你選擇的機會應該遠小于ps。

對于我們來說，一開始最苦惱的就是怎么切圖，沒有psd怎么給后臺呢？關于切圖，后面有文章介紹，不懂的可以去看一看

這里要說的是標準導入，就是可以導入一個html，后臺開發(fā)ios開發(fā)和開發(fā)都能看的一清二楚，可以下載使用圖片，查看文字大小和顏色你自己。 這里要特別指出的是，不同的終端設備可以導入不同的規(guī)格，省心省力。 您可以一鍵手動生成html頁面，并離線檢查所有設計細節(jié)，包括css樣式。 這是它的優(yōu)勢之一。

如何將其用于UI設計？

“基本操作”

創(chuàng)建畫布

按住鼠標 A 快捷鍵創(chuàng)建畫布。 默認情況下已經設置了各種設備規(guī)格。 您可以選擇移動端、網頁端等，也可以點擊下方創(chuàng)建自定義規(guī)格。 如果想重復使用上次已經創(chuàng)建的自定義規(guī)格，可以直接選擇自定義查看，不需要重復創(chuàng)建。

的繪圖區(qū)域是無限大的，可以創(chuàng)建n個繪圖板。 您可以通過按住 alt 鍵并拖動來復制繪圖板。 如果需要大量復制，可以在按住alt復制一份后按快捷鍵cmd+d快速批量復制。

創(chuàng)建畫布后，您可以隨意操作它

這里需要注意一點，聯通端的默認圖片是翻倍的。 有些人聽到375*667有點吃驚。 注意這里的單位是開發(fā)用的pt，不是px。 乘以 2 是 750*。 為什么要用 the 來畫圖呢？ 原因很簡單。 一是占用文件資源少，切圖方便。 第二，對于開發(fā)，1pt=1px，所以他們不需要轉換它。 他們可以直接使用它來完美還原設計稿。

視口

列表在pages（頁面）下，可以有多個pages（頁面），可以說是非常強大了。 工程修改歷史一應俱全，不用擔心舊稿丟失。 老板說用初稿比較好，有你在，哈哈。

當我們的視口太多的時候，我們可以使用頁面底部的搜索功能，這個功能也很強大。

對于菜鳥來說，用起來還是有點不適應。 比如當一個頁面的太多的時候，我想準確的選擇某條細腰線，很難選擇。 比如我要選中這條紅色的線段。

這里有個快捷方式，按住cmd點擊，你會發(fā)現直線上會出現一個坐標軸，點擊選擇很方便。 文字也是如此。 當你按住cmd鍵盤時，文字會變成淡黃色，表示你已經選擇了它。 然后看鍵盤直接點擊，不用按cmd鍵對比。 怎么樣，是不是很厲害！ 更多實力等你發(fā)現！

工具

有時你的界面是空白的，你無法啟動，顯示中有一個工具欄可以打開工具。

工具欄是一些常用的工具，也可以點擊左上角的減號來創(chuàng)建。 是一款輕量級軟件。 不熟悉的人可能會覺得界面太簡單，沒什么用。 雖然有很多隱藏功能。

比如這里可以右鍵工具欄，有一個自定義工具欄，點擊打開

你會發(fā)現隱藏的工具非常多，而且可以自定義操作，太棒了！

形狀

隨機繪制一個正方形，畫布左側是它的檢測器，可以查看正方形的位置、大小、顏色等，并可以自由變換變換。 這種文字應該是看得懂的，多試試就知道了。

默認圓圈可自由縮放

雙擊圓圈，你會發(fā)現圓圈周圍有四個圓圈。 這是一個可編輯的狀態(tài)，有點像在c4d中將其轉化為可編輯的對象。 可以任意改變正方形的形狀，雙擊圓可以將直線變成曲線。

工具欄不僅有工具，還有很多功能，比如形狀的旋轉和變換，形狀之間的布爾運算得到新的形狀。 大家可以一一嘗試。這里要說的是旋轉中的復制工具，工具欄默認是沒有的。 您需要打開自定義工具才能獲得旋轉副本

將其拖放到工具欄，然后單擊“完成”

先畫一個圓，然后點擊旋轉復制工具設置復制的數量，就會得到這樣的圖形。 你可以用它來制作它。 是不是很強大很方便呢？ 你會逐漸愛上~

很多人都會很關心蒙版，我們知道用PS制作蒙版非常方便。 這里面的面具在哪里？ 如何使用？

默認工具欄中有一個遮罩。 前提是你要先選中形狀或圖片，蒙版才會被激活。

我們想把圖片嵌入到形狀中，這里圖片應該放在最上面，而在ai中，圖片應該放在形狀下面。 選擇圖片和形狀，然后單擊遮罩工具。 這時候觀察視口，發(fā)現形狀和圖片已經分組了。 這里我改名了。 這樣就完成了圖層，很簡單！

顏色

在填充中，可以直接修改圖形的顏色，也可以用吸管吸取自己想要的顏色。 可以說是非常的厲害了！

值得注意的是，除了軟件中已經設置好的顏色外，它還可以拾取軟件以外的顏色。

其實它不僅功能強大，它的復用功能才是真正的貼心！ 打開- Color，為你的項目創(chuàng)建一個新的顏色規(guī)范，方便復用，界面顏色就不會混淆了。

顏色面板中也為您提供了此顏色sketch 圖標打組，例如網頁安全色，供您參考！

為項目產品創(chuàng)建顏色規(guī)范，主要包括這些默認字體顏色、淡化字體顏色、強調色、邊框顏色、輔助顏色和背景顏色

這里需要特別說明一下陰影顏色。 建議使用#000全黑，然后降低不透明度，而不是直接設置灰度顏色。 因為這樣可以保證無論是深色背景還是白色背景，陰影都有很好的視覺效果。

文本

選擇字體工具，點擊畫布顯示默認的文字Type，雙擊更改為自己想要的文字，兩側檢測器可以修改字體的自重顏色等。文字段落可以拖拽在畫布上。 基本操作就這些，沒什么特別的，連接起來就會表現出來的奇特之處！

顏色可以存儲和重復使用以獲得漂亮的顏色規(guī)范，那么字體呢？ 其實你可以！ 可以預先設計好每種字體的值，借助功能保存起來，方便以后經常使用。

選中你已經設置好的文字，在檢測器中新建一個文字樣式，起個名字，比如“如屏方形/普通/12/100%黑色”注意一定要是反斜杠。

事實上，您還可以管理您的文本樣式

對于已經按照規(guī)則創(chuàng)建好的文本，可以在-中查看復用

是不是愛死了，接起來還得來個大招呢~

“易于使用的功能”

第一眼看到這個短語肯定會很陌生，英文翻譯是 mark

后來我們聊了很多規(guī)范的東西，比如形狀規(guī)范，文字規(guī)范，感覺UI的用處很大。 這也是一種規(guī)范。 它的作用是保持設計的一致性，所以有利于UI的標準化，對我們的提升有很大的幫助。 工作效率。

把它拿出來，看看它是如何工作的。 很多人做過后臺系統(tǒng)，以出現頭像圖標的頁面為例。 使用我們之前用蒙版創(chuàng)建的頭像，然后右擊頭像，選擇（創(chuàng)建組件），在彈出的框中輸入名稱。

第一個名為“/Non-Black”，分為“”組

再創(chuàng)建一個“/Black”，分到“”組

文字組：文字/藍色； 文本/黑色； 文本/黑色；

背景組：背景/黑色背景； 背景/非黑色背景；

時間上，文字組和背景組這里就不畫了，大家可以任意組合。

創(chuàng)建它并不重要，重要的是如何重用和維護它。

創(chuàng)建組合后，復用就完成了。 使用相同的方法，它可以在多個頁面上重復使用。

有人可能會疑惑，這不就是復制粘貼嗎？ 有什么神奇之處？ 別著急，見證奇跡的時刻即將到來。 如果你想把黑色頭像的組合改成非黑色頭像，你還用以前的方法重新組合嗎？ 如果只更換頭像/背景呢？ 這個時候我們就要用到分組了。

黑色頭像右擊后，依次選擇“替換”→“頭像”→“非黑色頭像”。 可以看出，借助“/”規(guī)范命名后，手動分組，更方便復用替換操作。

維持

如何編輯？

1.雙擊已經創(chuàng)建好的畫布跳轉到頁面

2.點擊pages下的page直接進入

可以在上面進行修改，所有的修改都會對復用的頁面生效。 注意：是選中組上方的視口進行更改。 團難改，不退團。 選擇視口后，會出現右側圖層的屬性。 改完之后，回到頁面，自然就改好了。

知識不止于此，需要反復練習，你會發(fā)現可以大大提高工作效率。 在大公司，往往有n頁，不到100頁。 突然發(fā)生版本更新，需要更改某個功能。 頁面同步生效。 真正可以設計一次，重復使用，把寶貴的時間花在創(chuàng)意設計上，而不是那些重復的組件。

刪除列

通過設置圍欄（布局參考線），可以根據需要選擇每列的長度（行間距）、間隔長度（裝訂線長度）和最里面的凈寬??（skew）

這時畫布上出現柵欄參考線，可以根據柵欄合理設置文字段落的長度、按鈕的長度、圖片的長度。 通過柵欄布局可以極大地統(tǒng)一頁面的布局設置，給人以和諧之美。 Ctrl+L 可以作為顯示/隱藏圍欄的快捷鍵。

這里可以使用后面提到的文字來刪除列。 確定文本的列寬方便確定控件的頂部和底部，通過柵欄確定左右。

比如你確認默認字號是20px，植物間距是1.5，那么列寬=20px*1.5=30。 這樣控件之間的上下寬度就可以設置為30px的倍數，比如30px、60px、90px等。 相同的寬度和列寬可以使頁面看起來更加和諧美觀。

小技巧

最后再說一個小tip。 如何解決自帶的組件無法整體按比例放大的問題？

現在是375*64，需要改成750*128，改尺寸后

解決方案：

點放大

結果

插入

插件很多，這里只介紹一款超級好用的---Craft

1：Craft是一套插件

允許您在設計時考慮到真實數據。 通過新的 Craft 管理它們以非常容易地更新。

首先在官網下載

需要登錄，先注冊

2：官網功能介紹

(1) 圖片

您可以輸入關鍵字sketch 圖標打組，這里的圖片供應商是和

使用來自 Getty 和 的高幀率圖像增強您的設計。 會有水印，需要注冊。

(2)寫意

一種快速、靈活的實時協(xié)作新形式.

(3) 原型

使用您的真實設計文件創(chuàng)建高保真原型。

(4)同步，從本地設計環(huán)境一鍵同步。

(5) Data，將真實數據帶入您的設計的終極插件。

快速錄入數據，可自定義存儲，方便上次使用

圖像也可以定義

更神奇的是，你可以通過網絡復制網頁上的文字

(6) 強大的復制功能（縱向）（橫向）復制個數和寬度

(7) 一開始以為是沒有功能，因為沒有開啟，需要開啟。

稍后會出現

寫在最后

這么好用的UI設計軟件，簡單易用，界面簡潔，功能強大，還不趕快用起來嗎？ 更多技能等你解鎖！

心動了就趕快下載安裝，加我為好友，邀您進入《設計書籍與電子侯家園》免費設計資源供您下載，一起去講解設計吧！ 互相學習，共同進步！

哪個？ 你沒關注“設計書店”公眾號嗎？ 這是我妹妹設計精美的有聲讀物，你空閑時間都做什么？ 趕快充電，學習設計知識，讓設計成為你生活中不可或缺的一部分。 躺在床上或輕軌上聽。 邊聽音樂邊聽設計知識，好可惜??！ 還有設計教程設計心得，等你來！

如有侵權請聯系刪除！