還記得在蘇寧的日子，被催著畫完圖，PS卡住，滿頭大汗的時(shí)候，設(shè)計(jì)總監(jiān)經(jīng)常會(huì)對(duì)我們說(shuō)：“誰(shuí)叫你們不用的？這么好用，怪誰(shuí)呢？”而且我們都有 Mac……當(dāng)時(shí)我大概在想，我們還不習(xí)慣，沒(méi)時(shí)間學(xué)。

為什么要使用它？

今天真的要強(qiáng)力推薦這款超輕量級(jí)的軟件給大家，再也不用擔(dān)心設(shè)計(jì)卡頓了，矢量設(shè)計(jì)完美！以后PS就是你的輔助工具了。

作為UI設(shè)計(jì)師而非平面設(shè)計(jì)師，你選擇它的機(jī)會(huì)應(yīng)該比PS大得多。

我們一開(kāi)始最困惑的可能就是如何切圖，沒(méi)有PSD怎么給前端用？關(guān)于切圖，我之前有一篇文章介紹過(guò)，不懂的可以去看看

這里需要說(shuō)一下標(biāo)準(zhǔn)導(dǎo)出，就是你可以導(dǎo)出一個(gè) HTML，前端開(kāi)發(fā)人員可以清晰的看到，可以下載使用圖片，可以檢查文字大小顏色等。需要強(qiáng)調(diào)的是，可以針對(duì)不同的終端設(shè)備導(dǎo)出不同的尺寸，非常省心。一鍵自動(dòng)生成 HTML 頁(yè)面，離線檢查所有設(shè)計(jì)細(xì)節(jié)，包括 CSS 樣式，這是它的強(qiáng)項(xiàng)之一。

如何使用它進(jìn)行UI設(shè)計(jì)？

基本操作

創(chuàng)建畫布

按住鍵盤上的A快捷鍵，即可創(chuàng)建畫布。已默認(rèn)設(shè)置了各種設(shè)備尺寸，您可以選擇移動(dòng)端、網(wǎng)頁(yè)端等。您也可以點(diǎn)擊下方的創(chuàng)建自定義尺寸。如果下次想使用已經(jīng)創(chuàng)建的自定義尺寸，只需選擇自定義即可，無(wú)需再次創(chuàng)建。

繪圖區(qū)域無(wú)限大，可以創(chuàng)建n個(gè)畫板。復(fù)制畫板按住alt鍵拖動(dòng)即可。如果需要復(fù)制很多畫板，按住alt再按cmd+d可以快速批量復(fù)制。

創(chuàng)建畫布后，您可以根據(jù)需要對(duì)其進(jìn)行操作。

這里需要注意一點(diǎn)，移動(dòng)端默認(rèn)的圖片大小是1x，有些人看到375*667可能會(huì)覺(jué)得有些奇怪。注意這里的單位是開(kāi)發(fā)者使用的pt，而不是px。乘以2就是750*。為什么要用1x的圖片來(lái)畫圖呢？原因很簡(jiǎn)單，一是占用文件資源少，方便切圖；二是對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，1pt=1px，不用再去換算，直接用就可以，完美還原設(shè)計(jì)稿。

圖層

層列表在頁(yè)面下面，可以有多個(gè)頁(yè)面，很強(qiáng)大。項(xiàng)目變更歷史可以一站式處理，不用擔(dān)心丟失舊草稿。如果老板說(shuō)又要用之前的草稿，你一笑置之就好，哈哈。

當(dāng)我們層數(shù)太多的時(shí)候，我們可以利用頁(yè)面底部的搜索功能，這個(gè)功能也是很強(qiáng)大的。

對(duì)于初學(xué)者來(lái)說(shuō)，使用起來(lái)還是有點(diǎn)難度的，比如當(dāng)頁(yè)面上有很多圖層的時(shí)候，很難準(zhǔn)確的選中一條細(xì)線，比如我要選中這個(gè)藍(lán)色的線段。

這里有個(gè)快捷鍵，按下cmd，點(diǎn)擊鼠標(biāo)，你會(huì)發(fā)現(xiàn)線段上會(huì)出現(xiàn)一個(gè)中軸，點(diǎn)擊選擇起來(lái)非常方便。文字也是一樣，按下cmd，點(diǎn)擊鼠標(biāo)劃過(guò)，文字會(huì)變成淡藍(lán)色，表示你選中了。那么對(duì)比一下不按cmd鍵直接點(diǎn)擊鼠標(biāo)，怎么樣？很強(qiáng)大吧！更多強(qiáng)大功能等你來(lái)探索！

工具

有時(shí)你的界面一片空白，不知道從哪里開(kāi)始。你可以點(diǎn)擊 中的 來(lái)打開(kāi)工具。

工具欄是常用工具的集合，也可以點(diǎn)擊左上角的加號(hào)創(chuàng)建一個(gè)，是一款輕量級(jí)的軟件，不熟悉的人可能會(huì)覺(jué)得界面太過(guò)簡(jiǎn)單，沒(méi)什么用，其實(shí)里面隱藏著很多功能。

比如這里可以右鍵點(diǎn)擊工具欄，有一個(gè)自定義工具欄，點(diǎn)擊打開(kāi)

你會(huì)發(fā)現(xiàn)，哇，有這么多隱藏的工具，而且還可以自定義操作，太神奇了！

形狀

隨意畫一個(gè)矩形，畫布的右側(cè)是它的，可以查看矩形的位置，大小，顏色等，可以自由的改變和變換，這些話你應(yīng)該能聽(tīng)懂，多試幾次就知道了。

默認(rèn)矩形可自由縮放。

雙擊矩形，會(huì)發(fā)現(xiàn)矩形變成了四周有四個(gè)圓，這就是可編輯狀態(tài)，有點(diǎn)像C4D中轉(zhuǎn)化為可編輯對(duì)象，可以隨意改變矩形的形狀，雙擊圓可以將直線轉(zhuǎn)化為曲線。

除了工具之外，工具欄還有很多其他功能，比如旋轉(zhuǎn)和變換形狀，以及在形狀之間進(jìn)行布爾運(yùn)算來(lái)獲得新的形狀等，你可以一一嘗試。這里說(shuō)的是旋轉(zhuǎn)復(fù)制工具，默認(rèn)情況下工具欄中沒(méi)有這個(gè)工具，需要打開(kāi)自定義工具才能獲得旋轉(zhuǎn)后的副本。

將其拖到工具欄并單擊完成。

先畫一個(gè)圓，然后點(diǎn)擊旋轉(zhuǎn)復(fù)制工具設(shè)置復(fù)制份數(shù)，就會(huì)得到這樣的形狀，大家可以用它來(lái)制作，是不是功能強(qiáng)大又方便呢？慢慢你就會(huì)愛(ài)上它了~

很多人對(duì)蒙版很關(guān)心，我們知道在中制作蒙版非常方便，那么中的蒙版在哪里呢？如何使用呢？

默認(rèn)工具欄中有一個(gè)蒙版，但您必須先選擇形狀或圖像才能激活蒙版。

我們需要將圖片嵌入到形狀中，上例中圖片是放在最上面，而在AI中圖片是放在形狀下面。選中圖片和形狀sketch修改畫板顏色，點(diǎn)擊蒙版工具?，F(xiàn)在觀察圖層，發(fā)現(xiàn)形狀和圖片已經(jīng)編組了，這里我改了個(gè)名字。到這里蒙版就完成了，很簡(jiǎn)單！

顏色

你可以直接在填充函數(shù)中改變形狀的顏色，或者用吸管畫出你想要的顏色，真的很強(qiáng)大！

值得注意的是，它不僅可以吸收軟件中已經(jīng)設(shè)置好的顏色，還可以吸收軟件之外的顏色。

當(dāng)然，它不僅功能強(qiáng)大，其復(fù)用功能實(shí)在貼心！打開(kāi)-Show ，為你的項(xiàng)目創(chuàng)建新的顏色規(guī)范，方便復(fù)用，界面顏色再也不會(huì)混亂。

這些顏色也在顏色面板中提供給您，例如網(wǎng)頁(yè)安全顏色，供您參考！

創(chuàng)建項(xiàng)目產(chǎn)品的顏色規(guī)范，主要包括默認(rèn)字體顏色、褪色字體顏色、強(qiáng)調(diào)色、邊框顏色、輔助顏色、背景顏色

這里需要特別說(shuō)明一下陰影顏色，建議使用#000，即全黑，然后降低不透明度，而不是直接設(shè)置灰度顏色，這樣可以保證陰影無(wú)論是在淺色還是深色背景上都有很好的視覺(jué)效果。

文本

選擇字體工具，點(diǎn)擊畫布，就會(huì)出現(xiàn)默認(rèn)的文本類型，雙擊就可以改成你想要的文字，右邊的可以更改字體粗細(xì)、顏色等，對(duì)于文本段落，直接在畫布中拖拽就可以了，這些都是基本操作，沒(méi)什么特別的，接下來(lái)就給大家展示一下有哪些獨(dú)特功能吧！

顏色可以存儲(chǔ)并重復(fù)使用，以獲得漂亮的顏色規(guī)范，但字體呢？當(dāng)然可以！您可以預(yù)先設(shè)計(jì)每種字體的值，并使用“樣式文本”功能保存它們，以便將來(lái)經(jīng)常使用。

選中已經(jīng)設(shè)置好的文本，在檢查器中新建一個(gè)文本樣式，并給它起一個(gè)好聽(tīng)的名字，比如“//12/100% Black”，注意一定要是反斜杠。

當(dāng)然，你也可以管理你的文本樣式

對(duì)于已經(jīng)按照規(guī)則創(chuàng)建的文本，可以在插入-文檔中查看重用

喜歡不喜歡？接下來(lái)我要使出大招了~

『 實(shí)用功能 』

第一次看到這個(gè)詞你肯定會(huì)覺(jué)得很陌生，翻譯成中文就是符號(hào)標(biāo)記

之前我們講了很多規(guī)范的東西，比如形狀規(guī)范、文字規(guī)范等，感受到了做UI工作帶來(lái)的巨大好處。這也是一種規(guī)范，它的作用就是保持設(shè)計(jì)的一致性，有利于規(guī)范UI，可以大大提高我們的工作效率。

接下來(lái)我們看看如何使用，很多人都做過(guò)后端系統(tǒng)，就以頭像圖標(biāo)出現(xiàn)的頁(yè)面為例，使用之前我們用遮罩制作的頭像，然后右鍵點(diǎn)擊頭像，選擇（創(chuàng)建組件），在彈出的框里輸入名字即可。

第一個(gè)名為“頭像/非純色”，位于“頭像”組中。

創(chuàng)建另一個(gè)“頭像/純色”并將其放入“頭像”組

文本組：文本/黑色；文本/藍(lán)色；文本/灰色；

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

由于時(shí)間關(guān)系，這里就不畫出文字組和背景組了，大家可以按照自己的喜好進(jìn)行組合。

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

創(chuàng)建的組合是可重復(fù)使用的，并且可以使用相同的方法在多個(gè)頁(yè)面上重復(fù)使用。

有人可能會(huì)想，這不就跟復(fù)制粘貼一樣嗎？有什么神奇的？別著急，見(jiàn)證奇跡的時(shí)刻即將到來(lái)。如果想把純色頭像組合換成非純色頭像組合，還用上面的方法重新組合嗎？如果只更換頭像/背景呢？這時(shí)候，我們就需要用到分組了。

右鍵選中純色頭像后，依次選擇“帶”→“頭像”→“非純色頭像”?？梢钥吹?，使用“/”標(biāo)準(zhǔn)命名后，自動(dòng)劃分了群組，更方便重復(fù)使用和替換操作。

維持

如何編輯？

1. 在畫布上雙擊創(chuàng)建的頁(yè)面，跳轉(zhuǎn)到該頁(yè)面

2.點(diǎn)擊pages下的頁(yè)面直接進(jìn)入

您可以在里面進(jìn)行修改，所有修改都會(huì)在重用的頁(yè)面生效。注意：需要選中要修改的組中的圖層，組不可修改，也不要取消組。選中圖層后，右側(cè)會(huì)出現(xiàn)圖層的屬性，修改完返回頁(yè)面，修改自然生效。

知識(shí)不止于此，需要反復(fù)練習(xí)sketch修改畫板顏色，才能大大提高工作效率。在大公司，往往有n個(gè)頁(yè)面，100多個(gè)頁(yè)面。突然遇到版本更新，需要改某個(gè)功能，如果一個(gè)頁(yè)面一個(gè)頁(yè)面改，確實(shí)很費(fèi)時(shí)間。在此期間，所有頁(yè)面會(huì)同時(shí)生效。真正做到一次設(shè)計(jì)，重復(fù)使用，把寶貴的時(shí)間花在創(chuàng)意設(shè)計(jì)上，而不是花在這些重復(fù)的組件上。

刪除列

通過(guò)設(shè)置柵欄（布局參考線），可以根據(jù)需要選擇每列的寬度（列寬）、間隔的寬度（裝訂線寬度）、最外面的寬度（偏移）。

此時(shí)畫布上會(huì)出現(xiàn)柵欄引導(dǎo)線，可以根據(jù)柵欄合理設(shè)置文本段落的寬度、按鈕的寬度、圖片的寬度，柵欄布局可以大大統(tǒng)一頁(yè)面的布局設(shè)置，給人一種和諧的美感，Ctrl+L可以快捷控制柵欄的顯示/隱藏。

上面說(shuō)的文字這里可以刪除，確定文字的行高方便確定控件的上下，左右可以通過(guò)柵欄來(lái)確定。

比如你設(shè)置默認(rèn)字體大小為20px，行距為1.5，則行高=20px*1.5=30。那么控件之間的上下間距可以設(shè)置為30px的倍數(shù)，如30px、60px、90px等等，相同的間距和行高可以讓頁(yè)面看起來(lái)更加和諧美觀。

尖端

最后告訴大家一個(gè)小技巧，內(nèi)置組件無(wú)法整體按比例放大，如何解決呢？

現(xiàn)在是375*64，需要改成750*128，改完尺寸后

解決方案：

點(diǎn)擊放大

結(jié)果

插件

插件有很多，這里只介紹一個(gè)很好用的一個(gè)--- Craft

1：Craft 是一套插件

它允許您在設(shè)計(jì)時(shí)考慮真實(shí)數(shù)據(jù)。使用新的 Craft 管理這些數(shù)據(jù)，使更新變得非常簡(jiǎn)單。

首先從官方網(wǎng)站下載

需要先登錄，注冊(cè)

2：官網(wǎng)功能介紹

（1）圖片

您可以輸入關(guān)鍵字。這里的圖片供應(yīng)商是

使用 Getty 和 的高分辨率圖像增強(qiáng)您的設(shè)計(jì)。可能帶有水印，需要注冊(cè)和登錄。

（2）自由繪畫

一種快速、靈活的實(shí)時(shí)協(xié)作新方法。

（3）原型

使用您的真實(shí)設(shè)計(jì)文件構(gòu)建高保真原型。

（4）同步：一鍵與原生設(shè)計(jì)環(huán)境同步。

（5）數(shù)據(jù)，將真實(shí)數(shù)據(jù)帶入設(shè)計(jì)的終極插件。

快速輸入數(shù)據(jù)，并可自定義存儲(chǔ)，方便下次使用

圖像也可以定義

更神奇的是，你可以通過(guò)網(wǎng)絡(luò)復(fù)制網(wǎng)頁(yè)上的文字

（6）強(qiáng)大的復(fù)印功能（縱向）（橫向）復(fù)印張數(shù)及間距

（7）一開(kāi)始以為沒(méi)有這個(gè)功能，結(jié)果發(fā)現(xiàn)并沒(méi)有啟用。

然后它出現(xiàn)了

最后的想法

如此好用的UI設(shè)計(jì)軟件，簡(jiǎn)單易用，界面簡(jiǎn)潔，功能強(qiáng)大，何不趕緊用起來(lái)？更多技巧等你來(lái)解鎖！

有興趣的趕緊下載安裝吧，加我為好友，我會(huì)邀請(qǐng)你進(jìn)入“設(shè)計(jì)書與電子后花園”免費(fèi)提供設(shè)計(jì)資源供你下載，一起探討設(shè)計(jì)吧！互相學(xué)習(xí)，共同進(jìn)步！

什么？你還沒(méi)關(guān)注“設(shè)計(jì)書單”公眾號(hào)？這里有小姐姐的幾本好聽(tīng)的設(shè)計(jì)有聲書。閑暇時(shí)你都做些什么呢？快來(lái)充充電，學(xué)習(xí)設(shè)計(jì)知識(shí)，讓設(shè)計(jì)成為你生活中不可或缺的一部分吧。躺在床上聽(tīng)，地鐵上聽(tīng)，邊聽(tīng)音樂(lè)邊聽(tīng)設(shè)計(jì)知識(shí)，太美妙了！還有設(shè)計(jì)教程、設(shè)計(jì)心得等你來(lái)！

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