設(shè)計(jì)圈，特別是做 UI 設(shè)計(jì)的童鞋們，要是最近還沒有聽說過 Sketch，實(shí)在是太落伍了，很多設(shè)計(jì)師都已經(jīng)把主要的工作平臺(tái)徹底遷移到了 Sketch。那么，是什么讓他們放下了多年的 Photoshop，轉(zhuǎn)身投入了 Sketch 的懷抱呢？理由很復(fù)雜，但用一句話表達(dá)：再也找不到比 Sketch 更順手的設(shè)計(jì)軟件了！

本文作為一個(gè)系列，將為你介紹 Sketch 的點(diǎn)點(diǎn)滴滴，無論是你已經(jīng)在工作中開始使用 Sketch，或是正在猶豫要不要學(xué)習(xí) Sketch，本系列的目標(biāo)就是讓大家都能從入門到精通，改善所有設(shè)計(jì)師的工作效率。

好了，言歸正傳。本系列的第一篇：進(jìn)入一個(gè)全新的時(shí)代。對(duì)于那些還沒有深入接觸 Sketch 的童鞋們，本文將是一個(gè)入門引導(dǎo)，雖然沒有具體某一模塊或功能的介紹，但我試圖從 Sketch 那上百種吸引人的特性中，選出幾樣與你分享，讓你對(duì)它有一個(gè)大致的了解。

殺雞（UI 設(shè)計(jì)）真的不用牛刀（Photoshop）

很長一段時(shí)間以來，Photoshop 都是設(shè)計(jì)師最得心應(yīng)手的工具。然而，對(duì)于 UI 設(shè)計(jì)，特別是進(jìn)入移動(dòng)互聯(lián)網(wǎng)時(shí)代之后，Photoshop 顯然沒有把重心有任何的傾倒，一系列龐大的功能只有一小部分真正對(duì)于 UI 設(shè)計(jì)有所幫助，其它功能的存在，不僅大大影響了設(shè)計(jì)效率，也增加了無謂的復(fù)雜度。

Sketch 則是一款 Mac 原生的，從一開始就為 UI 設(shè)計(jì)打造的軟件。下面是 Sketch 的基本界面，幾乎所有常用的功能都可以直接一鍵直達(dá)，最棒的是，特準(zhǔn)于原生的 Mac 特性，在內(nèi)容編輯區(qū)內(nèi)，你可以方便地使用 TrackPad 自由地?zé)o限縮放、移動(dòng)，流暢度不知道比 Photoshop 高到哪去了。

Artboard：尺寸得心應(yīng)手

Artboard 和 AI 中的畫板概念很類似，你可以直接插入一個(gè) Artboard，Sketch 內(nèi)置了各類設(shè)計(jì)常用的尺寸，如 iPhone，iPad 的屏幕分辨率，響應(yīng)式設(shè)計(jì)的網(wǎng)頁尺寸，紙張大小，以及 iOS 和 Mac 圖標(biāo)的各類尺寸。

內(nèi)容元素只有在 Artboard 區(qū)域內(nèi)是可見的，而且，結(jié)合手機(jī)上的一款叫 Mirror 的 App，可以把每一個(gè) Artboard 在手機(jī)上顯示，而且還是實(shí)時(shí)的，這意味著，任何在 Mac 上做出的修改，馬上都可以在手機(jī)上看到。

切圖和導(dǎo)出簡直好用到流淚

很多設(shè)計(jì)師最痛苦的非專業(yè)工作可能就是導(dǎo)出各類圖片資源和素材了。在 Photoshop 里當(dāng)然可以做，但不借助于一些第三方插件的話，這個(gè)過程簡直無比痛苦。而 Sketch 的導(dǎo)出卻非常方便，如下面的截圖，只要選中整個(gè) Artboard 或某項(xiàng)元素，Sketch 會(huì)依次生成 @1，@2，@3，@1.5，@0.5 的圖片素材，一切就可以存出了。

查看距離只有一鍵之遙

在 Photoshop 里，要是想要查看兩個(gè)元素之間的距離，標(biāo)尺工具真的是心累。但在 Sketch 中，查看任何距離都只有一鍵之遙。

選擇你想要被度量的基準(zhǔn)物，然后按住 option 鍵，這時(shí)候，美好的事情發(fā)生了。如果你的焦點(diǎn)沒有懸停在任何元素上，Sketch 會(huì)自動(dòng)顯示基準(zhǔn)物距離畫布四周的距離。這時(shí)候，如果鼠標(biāo)懸停在任何元素上，Sketch 都會(huì)自動(dòng)顯示兩個(gè)元素之間的距離。

真正懂你的縮放

Sketch 一共提供了兩種類型的縮放。第一種就是最常見的拉伸。在 Sketch 中，這樣的拉伸會(huì)保留最基礎(chǔ)的圓角值，邊框粗細(xì)等基本信息，而把圖形進(jìn)行放大。第二種縮放則是 Scale 模式，這種縮放不僅僅放大的圖形，相應(yīng)的，圓角值，邊框粗細(xì)等都會(huì)被同比例地放大，矢量元素需要導(dǎo)出更高清的素材時(shí)，非常實(shí)用。

當(dāng)然了，Sketch 這些值得稱道的細(xì)節(jié)實(shí)在是太多了，一篇文章根本列不完。本文僅僅只是選出了冰山一角，讓你在忍受了多年 Photoshop 的折磨后，感受到一份真正為 UI 設(shè)計(jì)師打造的心意。

下一篇文章將為大家?guī)?Sketch 中的符號(hào)、類型文字的使用介紹，敬請(qǐng)期待。