從零開始學(xué)Sketch——進(jìn)階篇

Sketch是一款矢量繪圖應(yīng)用，而矢量繪圖無疑是目前進(jìn)行網(wǎng)頁、圖標(biāo)以及界面設(shè)計(jì)的最好方式。

在初識(shí)了Sketch的界面布局和基礎(chǔ)工具之后，我們就可以開始進(jìn)入高階的Sketch工具篇學(xué)習(xí)了。這篇文章主要會(huì)涉及Sketch模板、插件的使用，以及Sketch在具體使用過程中的一些技巧分享。

如果你曾接觸過PS、AI、Axure等軟件，那么接下來的內(nèi)容你應(yīng)該不會(huì)陌生，因?yàn)樗械脑O(shè)計(jì)軟件學(xué)習(xí)的路徑都是相似的，都是從認(rèn)識(shí)基本功能框架到外部資源整合運(yùn)用，最終形成個(gè)人風(fēng)格的一個(gè)過程。

Sketch模板

Sketch自帶模板

Sketch自帶模板也就是Sketch在file菜單欄下的template。

進(jìn)入Template

在使用的過程中，我們只需要將所需的模板復(fù)制到我們的Artboard中就好了。需要注意的是，在調(diào)整大小時(shí)需要固定長款比例。

Sketch自定義模板

在Sketchappsources網(wǎng)站中，有許多Sketch的模板可以下載，我們可以將這些控件導(dǎo)入到Sketch中。

亦或是在工作中，團(tuán)隊(duì)經(jīng)常用到一些固定的組件，為避免重復(fù)勞動(dòng)，我們可以把它們轉(zhuǎn)存為模板。這個(gè)復(fù)用的思維跟Axure中的自定義母版是一樣的。

具體的步驟如下：

Step 1：下載或自建一個(gè)Sketch文檔，內(nèi)含需要導(dǎo)入的模板；

Step 2：點(diǎn)擊File下的“Save as template”；

所有的Sketch文件都可以直接Save as template

Step 3：給你的自定義模板命名；

Step 4：點(diǎn)擊模板菜單欄目錄時(shí)就會(huì)出現(xiàn)你所自定義的模板了。

要運(yùn)用好模板，除了平時(shí)多加積累素材之外，還需要注意模板與模板之間的獨(dú)立不重復(fù)和規(guī)格的統(tǒng)一，比如iPhone手機(jī)頂端信號(hào)欄的寬度這樣的細(xì)節(jié)。

Sketch插件

插件是設(shè)計(jì)軟件必備的神器，無論是PS還是AI都有強(qiáng)大的插件庫，當(dāng)然Sketch也是如此。

安裝插件的方法

Sketch的插件多是技術(shù)大牛寫的，獲取的方法有三個(gè)：

方法一：下載Sketch Toolbox這個(gè)工具，在里面之間下載你所需要的插件庫，然后在Sketch工具欄中點(diǎn)擊Plugins就可以看到你下載的插件庫了；

Sketch Toolbox

方法二：在Github上搜索自己需要的插件名，然后直接打包下載就好了。

方法三：在Sketch的Plugin菜單下點(diǎn)擊manage plugins，在彈出的對(duì)話框中點(diǎn)擊“get plugins”。

點(diǎn)擊Get plugins，會(huì)跳轉(zhuǎn)到sketch的官網(wǎng)插件庫

推薦幾個(gè)超炫插件

關(guān)于插件，建議一開始的時(shí)候不要安裝太多。推薦以下幾個(gè)插件庫，可以滿足日常工作需求：

Content Generator：可以自動(dòng)填充類型圖片、姓名、聯(lián)系方式等信息，避免手動(dòng)輸入帶來的不便；

自動(dòng)填充用戶頭像.gif

Rename it：

這個(gè)插件的用途是批量修改圖形名稱。

比如上面那個(gè)動(dòng)圖，我們可以全選所有的矩形，然后點(diǎn)擊rename it插件，將其命名為“%N”，即可得到一串倒序排列的矩形命名。
主要的規(guī)則有：

• 輸入 “%N” 將對(duì)象編號(hào)；
• 輸入“+”和“button”可以將所有選中的對(duì)象名變?yōu)橐詁utton結(jié)尾的命名；
• 輸入新的圖層名時(shí)，使用 “” 號(hào)代替原圖層名。如：big?button，表示的是保留原命名，并在一頭一尾加入big和button；
• 輸入 “%w” 或者 “%h” 來添加圖層的長和寬。

Sketch Measure插件：

這個(gè)插件可以添加圖形尺寸、距離、顏色和文本屬性的標(biāo)注，并會(huì)自動(dòng)把附注編組，方便你自己修改和管理。

圖形的長寬標(biāo)注

運(yùn)用Sketch Measure插件可以在團(tuán)隊(duì)合作的時(shí)候，可以更方便的把設(shè)計(jì)稿交付給相關(guān)同事。

Sketch Notebook：

給一個(gè)對(duì)象添加注釋、評(píng)論，可以更加自由地對(duì)設(shè)計(jì)稿進(jìn)行標(biāo)注和說明。

Sketch Color Swatches：

這個(gè)插件便于我們?cè)谠O(shè)計(jì)初期參考一些別的網(wǎng)站基礎(chǔ)配色。

配合Sip這款取色工具，我們可以直接獲得我們想要的網(wǎng)站配色。以簡書為例：

• 首先，吸取5個(gè)簡書官網(wǎng)的主色色值；

• 然后，在Swatch插件中輸入色值編號(hào)，得到色板。

Color Swatches: 輸入色值，得到色板

• Export as Flinto Document: 這個(gè)插件可以將我們的設(shè)計(jì)稿轉(zhuǎn)換為Flinto文件形式，以便在Flinto這個(gè)軟件中完成動(dòng)態(tài)交互設(shè)計(jì)，因?yàn)镾ketch是不提供動(dòng)態(tài)交互功能的。

當(dāng)然，現(xiàn)在也越來越流行Sketch+Keynote的結(jié)合了，說白了就是把Sketch里設(shè)計(jì)好的幀畫面和元件拖拽到Keynote里，然后用Keynote構(gòu)造原型。這也是一個(gè)不錯(cuò)的選擇哦！

Sketch Mirror

要說Sketch脫穎而出的理由，很重要的一點(diǎn)就是它滿足了實(shí)時(shí)在手機(jī)端查看的功能，這是Axure所不具備的。

在手機(jī)上下載Sketch Mirror這款A(yù)PP，然后在Mac端工具欄中點(diǎn)擊Sketch mirror，只要兩臺(tái)設(shè)備在同一wifi環(huán)境下，就可以同步查看了。

使用Sketch的快捷鍵

快捷鍵一覽表，感謝圖片作者：康上明學(xué)

實(shí)戰(zhàn)：制作圖片分享APP-個(gè)人展示頁

運(yùn)用模板和插件制作圖片分享APP個(gè)人展示頁

制作的步驟如下：

• 畫布設(shè)置與布局：選擇iPhone 5作為Artboard，將畫布分割為上下兩部分，用矩形分割，將元素分組；
• 打開template，選擇iOS design UI模板，負(fù)責(zé)頭部信號(hào)欄（白色）置于畫布頂端，并調(diào)整大?。?/li>
• 將圖片展示部分用20個(gè)小正方形分割，并用content generator插件填充自定義為“views”的風(fēng)景圖片，同時(shí)設(shè)置將頭像和封面照；
• 輸入文字，調(diào)整細(xì)節(jié)。

關(guān)于Sketch的進(jìn)階篇就介紹到這里。大家在平時(shí)的生活中可以多思考一下優(yōu)秀APP的頁面如果讓你來做，你的思路是怎樣的，然后去實(shí)踐、運(yùn)用，遇到不懂的地方就上論壇去問；同時(shí)，養(yǎng)成復(fù)盤每一個(gè)作品制作過程的習(xí)慣，想一想哪些地方可以優(yōu)化，哪怕是很小的細(xì)節(jié)改善，都能帶來很大的效率提升。

一起進(jìn)步吧！

#專欄作家#

粽小喵，微信公眾號(hào)：zong_xiaomiao，人人都是產(chǎn)品經(jīng)理專欄作家。騰訊產(chǎn)品經(jīng)理。一個(gè)學(xué)傳播出身的產(chǎn)品新人，愛好研究原型設(shè)計(jì)工具。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，不得轉(zhuǎn)載。