本章重點(diǎn)：

1. 你想學(xué)嗎？

2.軟件安裝；

3.基本設(shè)計(jì)流程

4.復(fù)制一組簡單的接口

5.學(xué)習(xí)資料

1. 你想學(xué)嗎？

它是一款輕量級的矢量設(shè)計(jì)工具！與 PS 相比，它的功能有限，但如果你只是做 UI、設(shè)計(jì)應(yīng)用、網(wǎng)頁等，它完全可以滿足你對圖片的裁剪需求，而且比 PS 更高效。另外還有豐富的插件庫，可以大大提高設(shè)計(jì)效率。

在平常的設(shè)計(jì)工作中它并不是必不可少，因?yàn)楝F(xiàn)在的UI設(shè)計(jì)師不光做GUI的工作，還會做平面海報(bào)、易拉寶，做這些的時(shí)候必須用到圖像處理能力強(qiáng)的PS。如果你只是平面設(shè)計(jì)師，就不用考慮它了，因?yàn)樗且粋€(gè)更側(cè)重UI設(shè)計(jì)的設(shè)計(jì)工具。

現(xiàn)在還有很多設(shè)計(jì)師在使用PS制作UI設(shè)計(jì)稿，雖然PS CC在2017版本中對圖片的裁剪有了很大的提升，PS插件的數(shù)量也在增多，但是不可避免的一個(gè)問題就是PS生成的圖片文件非常大，PS吃內(nèi)存的問題很煩人，還有一個(gè)問題就是緩存文件數(shù)量多，相比較而言PS就不會有這樣的問題了，雖然在繪制復(fù)雜圖形方面還是稍顯不足，但是這個(gè)問題是可以解決的，畫出來的圖形完全可以照搬過來。

另外它只能在蘋果系統(tǒng)下使用。

2.軟件安裝

下載鏈接：

下載完成后可以在網(wǎng)頁上找到解壓密碼（.info），解壓后按照步驟操作即可。如果遇到問題可以回到下載頁面，滾動到文章后面，里面總結(jié)了一些安裝問題和解決方法。

3.基本設(shè)計(jì)流程

其實(shí)它是一個(gè)非常好用的工具軟件，網(wǎng)上也有很多基礎(chǔ)的教程教你如何使用。一般學(xué)習(xí)一個(gè)東西的時(shí)候，我都會先思考學(xué)習(xí)這個(gè)東西的目的是什么？在達(dá)到這個(gè)目標(biāo)的路上會出現(xiàn)什么問題，這些問題又該如何通過我學(xué)的這個(gè)東西來解決？

一開始學(xué)習(xí)的目的是為了配合老師的作業(yè)，完成課程的動畫制作，后來找課程學(xué)習(xí)的時(shí)候發(fā)現(xiàn)可以做的事情多了，尤其是APP項(xiàng)目，相比PS確實(shí)方便，效率高。

我們知道一個(gè)APP項(xiàng)目一般包括很多界面，界面之間也有一些通用的部分，我們不能隨便開個(gè)新項(xiàng)目就開始畫界面。任何工作都會有一定的方法論，而設(shè)計(jì)一個(gè)項(xiàng)目的方法論又是什么呢？帶著這個(gè)問題，我看了很多教程，試圖找到一個(gè)我認(rèn)為合適的方法論，終于找到了。

也就是設(shè)計(jì)規(guī)范的構(gòu)建sketch 圖標(biāo)打組，而這套規(guī)范的基礎(chǔ)就是組件，我覺得只有熟練使用組件才算是學(xué)會了。

這里簡單描述一下總體設(shè)計(jì)流程：

（1）將要設(shè)計(jì)的頁面整合成思維導(dǎo)圖，這樣可以幫助你了解一共有多少頁。每完成一頁都要做標(biāo)記。

（2）觀察每個(gè)頁面的原型，并將其解構(gòu)為不同的元素和組件；

（3）根據(jù)上一步解構(gòu)的要素，制定相關(guān)設(shè)計(jì)規(guī)范

- 字體樣式規(guī)范

- 圖標(biāo)規(guī)格

- 其他相關(guān)規(guī)定

（4）根據(jù)上一步編制的規(guī)范，設(shè)計(jì)組件；

（5）使用組件組合成頁面；

（6）最后進(jìn)行統(tǒng)一調(diào)整。

如果你想進(jìn)一步了解如何從頭開始設(shè)計(jì)一個(gè)項(xiàng)目，你可以觀看以下視頻：

如果你想學(xué)習(xí)如何科學(xué)地使用組件來創(chuàng)建設(shè)計(jì)規(guī)范，你可以閱讀以下文章：

4.復(fù)制一組簡單的接口

現(xiàn)在你已經(jīng)收集了足夠的信息，對軟件有了一定的了解，就可以開始操作了。一開始不要做太難的事情。找一些簡單的界面來復(fù)制，比如下面這個(gè)：

按照上面說的設(shè)計(jì)流程，我們先觀察這組頁面，然后進(jìn)行拆分，可以看到界面上主要有文字，圖標(biāo)，圖片，接下來我們就根據(jù)這些來制定我們的設(shè)計(jì)規(guī)范。

第一步是制定文本規(guī)范。在界面的任意位置輸入你需要使用的文本樣式，并將它們一一保存為樣式規(guī)范，然后就可以刪除文本了。此時(shí)我們可以在菜單欄的“插入-文檔”中找到我們剛剛保存的樣式。

接下來就是設(shè)計(jì)圖標(biāo)了，根據(jù)觀察，頁面上的圖標(biāo)有兩種尺寸，一大一小，我們可以新建一個(gè)圖標(biāo)頁面，按照圖標(biāo)尺寸分類進(jìn)行設(shè)計(jì)。

設(shè)計(jì)好之后，就把它們創(chuàng)建為基礎(chǔ)組件吧。這里有個(gè)小技巧，就是命名的時(shí)候加上一個(gè)[ / ]，可以創(chuàng)造出組件的層級解構(gòu)。比如命名兩個(gè)組件為“icon/back-hover”和“icon/back-”，組件庫就會顯示如下：

設(shè)計(jì)完文本樣式和圖標(biāo)組件后，我們就可以開始構(gòu)建基本的界面了。

在界面設(shè)計(jì)的過程中，可以不斷將相似的部分組合成新的組件，比如下面的標(biāo)題：

底部的菜單圖標(biāo)也可以組成菜單組件，圖片和文字也可以組成列表組件，我為這些頁面創(chuàng)建的組件如下：

使用時(shí)，直接從下面的菜單中選擇即可。

插入一個(gè)小插曲，在設(shè)計(jì)圖片列表的時(shí)候sketch 圖標(biāo)打組，我不知道應(yīng)該怎樣設(shè)計(jì)如下圖所示的投影。

在向一起學(xué)習(xí)動畫的朋友尋求幫助后，他們給了我一個(gè)鏈接，完美解決了我的問題。

設(shè)計(jì)完成后就到了導(dǎo)出文件的時(shí)候了，選擇需要導(dǎo)出的界面，軟件右側(cè)就會有相關(guān)的導(dǎo)出設(shè)置，非常方便。

這套簡單接口的抄襲就到此結(jié)束了，在這個(gè)過程中我學(xué)到了以下幾點(diǎn)：

· 文本樣式設(shè)置

使用圖形工具

組件創(chuàng)建

圖像陰影處理

· 使用圖像蒙版

5.學(xué)習(xí)資料

基礎(chǔ)教程

- 老師語言幽默有趣，每集內(nèi)容層層遞進(jìn)，通俗易懂。

高級教程

- 老師講的很接地氣，知識面很廣，聽她講課總結(jié)，了解了之前的設(shè)計(jì)流程。

組件用法

- UP很專注，只講組件，看得出來很專業(yè)，建議有一定基礎(chǔ)的同學(xué)看一下

圖標(biāo)繪制

- 畫圖不是我的強(qiáng)項(xiàng)，不過這位up主分享的畫圖過程干凈利落，很有動感，相信只要照著做，畫圖標(biāo)也是沒問題的。

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