UI設(shè)計(jì)中Sketch使用指南—入門篇

　　對(duì)于UI設(shè)計(jì)師而言，Sketch充滿了新鮮空氣。
 

　　我想說(shuō)：感謝sketch讓Photoshop不再是UI設(shè)計(jì)師必備軟件。這時(shí)候很多初學(xué)者的UI設(shè)計(jì)師對(duì)sketch充滿了興趣，甚至踴躍學(xué)習(xí)。下面AAA教育胡老師給大家分享一些UI設(shè)計(jì)中sketch使用指南—入門篇。
 

　　1.符號(hào)
 

　　Sketch具有大量的內(nèi)置功能，可讓您盡快從A轉(zhuǎn)到B。但是，如果您不了解這些功能怎么辦?甭著急胡老師來(lái)了。
 

　　如果您在Sketch中看到“符號(hào)”一詞，有沒(méi)有考慮過(guò)“什么是符號(hào)，我該如何使用它?” 符號(hào)實(shí)際上是Sketch上最強(qiáng)大的省時(shí)功能之一。如果您不使用它們，那么您可以也就完不成今天的工作!
 

　　符號(hào)只是可以反復(fù)使用的圖層。如果更改符號(hào)，則該符號(hào)的每個(gè)實(shí)例都會(huì)更新。因此，不再需要對(duì)一個(gè)畫板進(jìn)行調(diào)整，而只需要對(duì)其他10個(gè)畫板進(jìn)行相同的調(diào)整即可!
 

　　2命名圖層和畫板
 

　　一旦開(kāi)始涉足設(shè)計(jì)，您要擔(dān)心的就是圖層和畫板的命名!
 

　　但是許多初學(xué)者低估了保持邏輯和描述性命名方案的重要性。
 

　　首先，一個(gè)好的命名方案可以使文檔更容易瀏覽。想象一下您正在處理文件，然后過(guò)了一個(gè)月才再次打開(kāi)它是什么樣，所以命名也是良好習(xí)慣的一部分。
 

　　如果沒(méi)有正確命名的圖層和畫板，幾乎不可能記住什么地方。忘記搜索特定的圖層!
 

　　擁有正確命名的文件還意味著其他設(shè)計(jì)人員可以方便打開(kāi)和使用，并在您上次停下來(lái)的地方進(jìn)行提取，而不必浪費(fèi)時(shí)間進(jìn)行搜索。
 

　　正確命名的作用
 

　　好的命名方案不僅可以使文件易于瀏覽，而且還可以使導(dǎo)出過(guò)程更輕松!您是否知道，如果您將圖層，組或畫板命名為“assets/圖標(biāo)”，然后導(dǎo)出該圖層，它可以智能的將圖片導(dǎo)入適當(dāng)?shù)奈募A中。
 

　　3.不使用參考線，網(wǎng)格和布局
 

　　Sketch附帶了大量工具，可幫助您快速有效地設(shè)計(jì)UI。其中包括輔助線，網(wǎng)格和布局，所有這些都以不同的方式工作，但是在這里可以幫助您使設(shè)計(jì)保持對(duì)稱和對(duì)齊。
 

　　輔助線
 

　　輔助線可以將您創(chuàng)建設(shè)計(jì)元素可以捕捉到的結(jié)構(gòu)。輔助線不會(huì)在最終設(shè)計(jì)中導(dǎo)出，它們可以隨用隨拉。
 

　　您可以通過(guò)簡(jiǎn)單地從標(biāo)尺上單擊并將其拖到畫布的頂部和左側(cè)來(lái)創(chuàng)建輔助線。如果您沒(méi)有看到任何標(biāo)尺，轉(zhuǎn)到“畫布>>顯示標(biāo)尺”以啟用它們。
 

　　Sketch還具有稱為“智能輔助線”的功能。這些并不是您自己創(chuàng)建的，而是Sketch在您移動(dòng)對(duì)象時(shí)嘗試智能判斷距離和路線。
 

　　自己嘗試創(chuàng)建兩個(gè)形狀，然后再移動(dòng)其中之一。您會(huì)看到出現(xiàn)這些紅色虛線，以幫助您調(diào)整形狀。
 

　　Smart Guides可以節(jié)省大量時(shí)間，但有時(shí)可能會(huì)妨礙您的工作，或者有些麻煩。如果您不喜歡它們，可以通過(guò)單擊查看>>畫布>>顯示智能向?qū)?lái)關(guān)閉它們。
 

　　網(wǎng)格
 

　　網(wǎng)格由覆蓋整個(gè)畫板的線條組成，以便為您提供使事物保持一致的作用
 

　　您可以通過(guò)轉(zhuǎn)到布局>>網(wǎng)格設(shè)置來(lái)調(diào)整網(wǎng)格的間距和顏色。
 

　　版面
 

　　布局的工作方式與網(wǎng)格相似。他們的目的是幫助您保持一致。但是，布局不是傳統(tǒng)的網(wǎng)格線，而是提供了垂直和水平列，可用于使元素在整個(gè)設(shè)計(jì)中保持一致的對(duì)齊和正確的大小。
 

　　布局對(duì)于視口大小可能會(huì)根據(jù)瀏覽器或設(shè)備尺寸而變化的Web和移動(dòng)布局特別有用
 

　　4.不使用畫板模板
 

　　在Sketch中節(jié)省大量時(shí)間和麻煩的另一種方法是使用軟件附帶的預(yù)制畫板模板。
 

　　您只需單擊畫板工具(插入>>畫板)即可查看這些模板，然后您將在右側(cè)的檢查器中看到可用的模板。
 

　　Sketch提供了適用于iOS，Android，圖標(biāo)和其他內(nèi)容的有用的入門模板，這有助于避免猜測(cè)創(chuàng)建和不清楚尺寸。
 

　　5.使用插件
 

　　Sketch當(dāng)然是用于設(shè)計(jì)UI的功能強(qiáng)大的程序，但它不能完成所有工作!
 

　　這就是插件的來(lái)源：插件通過(guò)添加額外的功能來(lái)擴(kuò)展Sketch的功能。
 

　　我建議做的第一件事是下載Sketch Toolbox，它可以幫助您搜索和管理插件。
 

　　完成此操作后，花一些時(shí)間學(xué)習(xí)使用插件，看看那里有什么樣的功能!
 

　　我建議您使用Icon Font插件可以輕松地將圖標(biāo)添加到Sketch設(shè)計(jì)中，并建議使用Magic Mirror插件，可以設(shè)計(jì)漂亮的UI設(shè)計(jì)稿。
 

　　總結(jié)
 

　　在表面上看來(lái)sketch很簡(jiǎn)單，但是隱藏在背后的快捷，強(qiáng)大的功能更是數(shù)不勝數(shù)。學(xué)到精髓之后可以節(jié)省很多時(shí)間，并且可以提升您的設(shè)計(jì)水平。
 

　　如果您對(duì)sketch感興趣可以去AAA官網(wǎng)查看更多關(guān)于UI設(shè)計(jì)的文章！