一.Sketch簡(jiǎn)介

Sketch 是一款適用于所有設(shè)計(jì)師的矢量繪圖應(yīng)用。矢量繪圖也是目前進(jìn)行網(wǎng)頁(yè)胧后，圖標(biāo)以及界面設(shè)計(jì)的最好方式芋浮。但除了矢量編輯的功能之外，我們同樣添加了一些基本的位圖工具壳快，比如模糊和色彩校正纸巷。我們盡力讓 Sketch容易理解并上手簡(jiǎn)單，有經(jīng)驗(yàn)的設(shè)計(jì)師花上幾個(gè)小時(shí)便能將自己的設(shè)計(jì)技巧在Sketch中自如運(yùn)用眶痰。對(duì)于絕大多數(shù)的數(shù)字產(chǎn)品設(shè)計(jì)瘤旨，Sketch 都能替代Adobe Photoshop，Illustrator 和 Fireworks竖伯。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? --摘自《sketch用戶(hù)手冊(cè)》

（1）Sketch是什么存哲？

Sketch是一款輕量、高效的矢量設(shè)計(jì)工具黔夭，它在矢量編輯基礎(chǔ)上宏胯，提供了基本的位圖樣式支持（例如模糊和顏色調(diào)節(jié)），支持矩形工具本姥、文字工具肩袍、布爾運(yùn)算等功能。你可以把它看做是簡(jiǎn)化版的Photoshop婚惫，矢量版的Axure rp氛赐。但需要注意的是，Sketch不是一款位圖編輯器先舷。這就是說(shuō)艰管，你如果想做的是照片修正、畫(huà)筆繪圖蒋川，這款軟件就不合適牲芋。

Part 1 Sketch的八大優(yōu)勢(shì)

1. 小清新顏值高

簡(jiǎn)潔高效 – 抗干擾

界面簡(jiǎn)潔美好，功能清晰。無(wú)懸浮面板缸浦，選擇一個(gè)對(duì)象/圖層（objects）就會(huì)展示對(duì)應(yīng)檢查器（inspectors）夕冲，不會(huì)有PS中處理大文件時(shí)各種開(kāi)關(guān)窗口情況。

▲ 軟件截圖（全屏）：左側(cè)欄為圖層區(qū)裂逐；右側(cè)欄為檢查器區(qū)

2. 使用暢快易上手

2.1 無(wú)限畫(huà)布&畫(huà)板 – 自由度高

不管有多少畫(huà)布（pages）都被包含在同一個(gè)文檔中歹鱼，還可以在程序內(nèi)部進(jìn)行搜索，便于管理大型項(xiàng)目

在一個(gè)畫(huà)布中可以平鋪無(wú)限個(gè)畫(huà)板（Artboard）卜高，這樣的全局視野弥姻，規(guī)劃自由度高，也利于思考界面元素關(guān)系和維護(hù)界面設(shè)計(jì)的一致性掺涛，方便各種check庭敦。

▲ 示意文件截圖（局部）：右側(cè)為隨意擺放的4個(gè)畫(huà)板

說(shuō)明：Sketch文檔>Page>Artboard>Layer

在一個(gè)Sketch文檔中可以建立多個(gè)畫(huà)布（Page），畫(huà)布中可以自由放置畫(huà)板（Artboard）鸽照。

而每個(gè)元素/對(duì)象都作為一個(gè)圖層（layer）螺捐，以圖層或組（group）的形式安置在artboard中颠悬。

2.2 無(wú)冷啟動(dòng)時(shí)間 – 運(yùn)行快

0啟動(dòng)時(shí)間矮燎，也就是沒(méi)有類(lèi)似于PS的啟動(dòng)畫(huà)面，節(jié)省了等待時(shí)間

由于多是矢量文件赔癌，因此體量小诞外，運(yùn)行快。

2.3 簡(jiǎn)化操作 – 交互體驗(yàn)好

操作人性灾票，各種貼心設(shè)計(jì) 峡谊，使眼與手在界面設(shè)計(jì)過(guò)程中更加輕松高效完成工作，上手指數(shù)超高刊苍。

方便選擇：

上文提到的Sketch中不同面板位置是固定的既们，選中某個(gè)對(duì)象才會(huì)顯示對(duì)應(yīng)的檢查器，不用在眾多屬性窗口中苦苦尋覓

鼠標(biāo)掠過(guò)畫(huà)布中元素的時(shí)正什，左側(cè)圖層欄會(huì)出現(xiàn)藍(lán)色框?qū)?duì)焦到選中的元素

左側(cè)分欄可以看到矢量圖形的的縮略圖啥纸，不用仔細(xì)閱讀面板信息即可準(zhǔn)確選擇

▲ 選中右側(cè)元素”BHBH“，左側(cè)藍(lán)色框自動(dòng)對(duì)焦圖層婴氮。

簡(jiǎn)而言之斯棒，不懂PS/AI的小白上手Sketch完全無(wú)礙。

3. 像素級(jí)精準(zhǔn)

3.1像素級(jí)對(duì)齊

Sketch中在編輯路徑時(shí)主经，可以選擇三種對(duì)齊方式——

Don’t round to nearest pixels：不自動(dòng)對(duì)齊像素：編輯路徑時(shí)可以隨意移動(dòng)節(jié)點(diǎn)

Round to half pixels：以半像素為單位對(duì)齊：可能出現(xiàn)半像素

Round to full pixels：以1像素為單位對(duì)齊像素：錨點(diǎn)全部像素對(duì)齊荣暮，避免鋸齒，可以節(jié)省設(shè)計(jì)濕大量微調(diào)時(shí)間罩驻。

▲ 三種對(duì)齊方式

▲ 三種對(duì)齊方式的說(shuō)明圖? *圖片來(lái)源

3.2數(shù)值化編輯

矢量軟件的一大優(yōu)勢(shì)就是可以編輯精準(zhǔn)穗酥，Sketch中可以實(shí)時(shí)調(diào)節(jié)形狀的半徑/數(shù)量等各個(gè)參數(shù)，數(shù)值化編輯讓設(shè)計(jì)更加精準(zhǔn)和專(zhuān)業(yè)。

基于公式運(yùn)算的變形：

PS中的標(biāo)尺和矢量工具都很笨重砾跃，比如建立倍數(shù)關(guān)系的東西百揭、按黃金分割分配比例、做菲波那切數(shù)列圖標(biāo)什么的都很糾結(jié)蜓席。

而在Sketch中甚至可以直接完成簡(jiǎn)單運(yùn)算：

▲ 像 100 * 1.6 + 60 這樣的運(yùn)算可以在 Sketch 中進(jìn)行? *圖片來(lái)源

Sketch讓設(shè)計(jì)師更加關(guān)注數(shù)值器一，更理性有邏輯的去編排布局，而不是隨意拖拽元素厨内。

4. 非破壞性編輯

隨時(shí)調(diào)節(jié)形狀的半徑/數(shù)量：

在PS中如果需改變已建圖形的半徑就要重新建立形狀祈秕，而Sketch則可以隨時(shí)編輯。

▲ 圓角變形就是辣么簡(jiǎn)單 *圖片來(lái)源

隨時(shí)編輯的布爾運(yùn)算

跟PS和AI一樣雏胃，sketch也有聯(lián)合请毛、相減、相交瞭亮、差異這些布爾運(yùn)算方仿。

更方便的地方在于參與運(yùn)算的子形狀都可以即時(shí)編輯。每個(gè)路徑都可以隨時(shí)修改運(yùn)算方式和層次等操作统翩，方便管理復(fù)雜的形狀組合仙蚜。

比PS中的合并形狀更具自由度，也更容易理解層級(jí)關(guān)系厂汗。

▲ 每層與下一層發(fā)生布爾運(yùn)算

九宮切片自動(dòng)化

導(dǎo)入位圖文件后可以調(diào)整九宮節(jié)點(diǎn)委粉，直接實(shí)現(xiàn)九宮變形，節(jié)省了人工完成的時(shí)間娶桦。

▲ 九宮編輯

可視化漸變調(diào)節(jié)

由于是矢量文件贾节，所以實(shí)現(xiàn)了參數(shù)可視化，在圖形可以看到直觀效果衷畦。

▲ 圖形上方即有漸變操作桿直接調(diào)節(jié)

復(fù)制旋轉(zhuǎn)

可以方便地建立旋轉(zhuǎn)圖形及編輯中心點(diǎn)栗涂。

總覺(jué)得有點(diǎn)酷炫。

圖層樣式可無(wú)限累加

可逐層設(shè)置的多種混合模式祈争，也就是說(shuō)可以加外描邊的外描邊的外描邊的外描邊……

并可以任意調(diào)節(jié)各層樣式斤程。另外，描邊寬度也可以加錨點(diǎn)改變噠（同AI）

5. 可調(diào)用的嵌套樣式

Sketch的明星功能符號(hào)（Symbol）和共享樣式（Shared style：layer styles&text styles）：

符號(hào)（Symbol）

就是共享元素铛嘱，一次編輯暖释，所有共用的地方全部生效，就像是 Photoshop 里的智能對(duì)象墨吓，且生效范圍僅在每一個(gè) .sketch 文件中球匕。不同之處在于Sketch中改變一個(gè)元素副本大小所有都同步，PS中智能對(duì)象的大小是獨(dú)立的帖烘；且Sketch的符號(hào)中文本是可以單獨(dú)編輯的亮曹。

符號(hào)被運(yùn)用的最廣泛的地方可能是按鈕這樣的基本 UI 元素，舉個(gè)栗子，在PS中建立兩個(gè)文字不同的圖標(biāo)需要新建智能對(duì)象或者文字與按鈕分離照卦，編輯時(shí)需要打開(kāi)一個(gè)或兩個(gè)智能對(duì)象……Sketch中編輯就輕松很多式矫。

共享樣式（Shared style：layer styles&text styles）

圖層共享樣式PS中也能復(fù)制黏貼，然文字樣式的編輯和共享PS中并沒(méi)有役耕。共享文字樣式等同于直接在軟件中調(diào)用文字規(guī)范采转，非常有用的功能~

▲ 紫色文件夾即應(yīng)用了符號(hào)（來(lái)源：官網(wǎng)）

6. 原生測(cè)量利器

十分好用的標(biāo)尺工具

如果需要查看兩個(gè)元素之間的距離，在選中第一個(gè)元素后按住Alt然后將光標(biāo)指向第二個(gè)元素即可瞬痘。

此時(shí)如果按住Alt并移動(dòng)元素故慈，便能在移動(dòng)過(guò)程中時(shí)刻看到元素之間的距離變化：

▲ 對(duì)齊也變得非常容易

布局網(wǎng)格和參考線(xiàn)

參考線(xiàn)是PS比較渣的點(diǎn)，只能一條條來(lái)框全，不支持布局式參考線(xiàn)（按比例建立多條）察绷，做界面設(shè)計(jì)時(shí)基本要借助第三方插件，而在Sketch中就很方便啦津辩。

▲ 參考線(xiàn)批量一鍵設(shè)置

7. 靈活的切圖和輸出

批量輸出爽爆拆撼，還可以自動(dòng)畫(huà)出切片大小（slice）喘沿，切片輸出直觀方便 （包括上文提到的九宮變形）

可以導(dǎo)出 0.5x闸度、1x、2x摹恨、3x筋岛、512W 和 512H 的版本，同時(shí)還可以自定義不同尺寸的后綴晒哄。

▲ 一鍵導(dǎo)出多種尺寸和格式

8. 前景好迭代快

手機(jī)端配套支持

自帶的Sketch Mirror支持同步手機(jī)端，時(shí)時(shí)查看效果肪获。

IOS 友好

IOS 各種支持的好寝凌，且內(nèi)置的ios模板 （artboard），各種文檔尺寸不用手動(dòng)輸孝赫。

CSS友好

Sketch是寫(xiě)碼的設(shè)計(jì)師最?lèi)?ài)较木，可能是代碼調(diào)用方便（？）以下是Avocode（號(hào)稱(chēng)是連接設(shè)計(jì)師與碼農(nóng)的橋梁）做的調(diào)研報(bào)告《How designer worked in 2015》中關(guān)于軟件使用比例的截圖青柄。

可以理解會(huì)有不少創(chuàng)業(yè)型小團(tuán)隊(duì)將Sketch作為主力設(shè)計(jì)工具伐债。

▲? Sketch的使用比例快要趕上PS

社區(qū)繁榮插件多

Sketch由于備受追捧，社區(qū)的活躍度高致开，各種插件峰锁、資源查找方便。

小團(tuán)隊(duì)迭代快

作為為設(shè)計(jì)師存在的軟件双戳，據(jù)說(shuō)非常愿意傾聽(tīng)設(shè)計(jì)師意見(jiàn)虹蒋，響應(yīng)迅速、更新迭代快。

豐富的插件庫(kù)

Sketch支持第三方插件魄衅，第三方插件可以讓我們更高效地使用Sketch做設(shè)計(jì)峭竣，例如通過(guò)Sketch Measure插件，我們很容易為設(shè)計(jì)稿進(jìn)行標(biāo)注晃虫，方便前端開(kāi)發(fā)進(jìn)行效果實(shí)現(xiàn)皆撩。

artboard-一個(gè)文件完成整個(gè)工程的設(shè)計(jì)

sketch中沒(méi)有畫(huà)布的概念，整個(gè)空白區(qū)域都可進(jìn)行創(chuàng)作哲银，因?yàn)樗腔谑噶康摹?但我們?cè)谀承r(shí)候需要一個(gè)“框”毅访，來(lái)具象化我們的設(shè)計(jì)。在ps及其他設(shè)計(jì)軟件中盘榨，他叫畫(huà)布喻粹，但在skech中，他被賦予了一個(gè)新詞草巡，artboard守呜。我們可以在一張畫(huà)布上創(chuàng)建無(wú)數(shù)張artboard。這對(duì)于app的連貫性來(lái)說(shuō)山憨，是非常有幫助的查乒，我們可以將一個(gè)app界面看做一個(gè)artboard，然后在一個(gè)界面中郁竟，對(duì)比和查看他們的不同之處玛迄，或者將他們的交互過(guò)程串聯(lián)起來(lái)。一切都非常方便棚亩。然后我們可以將這些artboard分別導(dǎo)出為pdf或者分為一個(gè)個(gè)的圖片文件蓖议，方便產(chǎn)品經(jīng)理或開(kāi)發(fā)者查看。一切只需要一到兩步的操作讥蟆。

豐富的組件庫(kù)

有時(shí)候我們需要在設(shè)計(jì)稿中調(diào)用安卓或者ios系統(tǒng)自帶的控件勒虾，比如彈出的提示框，浮動(dòng)鍵盤(pán)瘸彤。但我們一定要自己再畫(huà)一次嗎修然？不必，sketch有豐富的素材庫(kù)质况，我們可以直接將需要的部分拖進(jìn)來(lái)即可愕宋，這節(jié)省了我們大部分的時(shí)間，使我們可以將騰出來(lái)的時(shí)間用于更加核心的產(chǎn)品設(shè)計(jì)思考上结榄。

設(shè)計(jì)稿可以在移動(dòng)設(shè)備上即時(shí)預(yù)覽

sketch中自帶了一個(gè)mirror的功能,可以像psplay和photoshop的遠(yuǎn)程連接工具一樣,將你的設(shè)計(jì)稿在移動(dòng)設(shè)備上即時(shí)預(yù)覽查看.非常方便.

產(chǎn)品經(jīng)理也可以輕松轉(zhuǎn)移到sketch

對(duì)于產(chǎn)品經(jīng)理中贝，sketch完全適用，用他來(lái)畫(huà)原型圖簡(jiǎn)直輕而易舉潭陪，他豐富的組件庫(kù)和精確的尺寸控制讓我們的原型圖更逼真雄妥。更有利于交流和前期的展示最蕾。你甚至可以考慮將Axure 拋棄了。

界面簡(jiǎn)單易上手

一款軟件是否好用老厌，上手難度是初學(xué)者首先需要接受的考驗(yàn)瘟则，Sketch界面簡(jiǎn)單易上手，大大降低了初學(xué)者的學(xué)習(xí)門(mén)檻枝秤，這也是Sketch一貫強(qiáng)調(diào)的：“我們提供一款輕量的軟件醋拧，希望設(shè)計(jì)師們專(zhuān)注于設(shè)計(jì)本身”。和Photoshop的界面對(duì)比淀弹，Sketch的界面十分簡(jiǎn)潔丹壕，這也是我極力推薦交互設(shè)計(jì)師學(xué)習(xí)這款軟件的原因，它不需要你花多少精力就能上手薇溃，并實(shí)際應(yīng)用到交互設(shè)計(jì)中菌赖。

Part 2 Sketch的三大痛點(diǎn)

1. 弱爆的位圖處理能力

位圖處理就在兩個(gè)地方：

簡(jiǎn)單的投影和模糊（4種模糊方式）

位圖編輯功能：兩個(gè)選區(qū)工具（魔術(shù)棒和選擇工具）、反選沐序、裁剪琉用、矢量填充和直接填充。

當(dāng)然并沒(méi)有畫(huà)筆策幼、濾鏡種種邑时，且圖層樣式只有四種：填充、描邊特姐、投影晶丘、內(nèi)陰影（沒(méi)有常用的內(nèi)外發(fā)光 斜面浮雕）

所以說(shuō)不適于做擬物類(lèi)界面設(shè)計(jì)，用Sketch挑戰(zhàn)繪圖向設(shè)計(jì)很低效唐含。

2. 格式支持局限浅浮，難以團(tuán)隊(duì)協(xié)作

不支持：PSD和AI文件，部分支持eps/svg觉壶。

支持：除圖片文件jpg/png/tiff/pdf外脑题，可以導(dǎo)出eps/svg（可以與AI對(duì)接）

3. 平臺(tái)和語(yǔ)言限制

Sketch在官網(wǎng)上的定位就是 —— Sketch- Professional Digital Design for Mac

首先需要Mac，且只有英文系統(tǒng) （可能會(huì)有中文字體支持問(wèn)題）

如：無(wú)法方便地為一段中英混合的文字指定中英文字體（一個(gè)知乎上看到的槽點(diǎn)）

“比如說(shuō)「你好Hello」這幾個(gè)字铜靶，在PS下可以先設(shè)為冬青黑，再設(shè)為Avenir Next他炊，它就是冬青黑的中文+ Avenir Next的英文访锻。但Sketch不支持這樣的操作杯道，為大段文字設(shè)置不同的中英文字體就是災(zāi)難。”

字體行高詭異

不同字體的實(shí)際行高也不一樣雏蛮，做列表類(lèi)界面的時(shí)候特別麻煩。

另外 Sketch 的行高很有問(wèn)題俯逾，我隨手找過(guò)幾個(gè)字體對(duì)比過(guò)昆淡，比如在行高設(shè)為 88px 時(shí)嚼吞，每個(gè)字體的行高都不一樣，行高設(shè)為自動(dòng)時(shí)不同字體文本框 padding 也是不同的蹬碧。

排版對(duì)齊很麻煩

Photoshop 的文字有分「段落文本（Paragragh）」和「點(diǎn)文本（Point）」舱禽，Sketch中 對(duì)應(yīng)的則是「Fixed」和「Auto」，看上去 Auto 對(duì)應(yīng)的是 PS 里的 點(diǎn)文本恩沽，但是 Sketch 的文本框上下會(huì)留出一些留白間距誊稚，而 PS 則是沒(méi)有留白間距的處理，這樣一來(lái)罗心，對(duì)齊的時(shí)候 PS 感覺(jué)會(huì)更精準(zhǔn)一些里伯。

▲ 任意三種字體上對(duì)齊的結(jié)果

拼界面無(wú)明顯優(yōu)勢(shì)

運(yùn)行超快的Sketch能否拿來(lái)拼（位圖）界面？

導(dǎo)入了一套約18M的文件渤闷，其中包含jpg和png文件疾瓮。移動(dòng)位圖過(guò)程中有明顯卡頓，九宮切圖因?yàn)樽詣?dòng)化所以會(huì)比（ps）較快飒箭，但無(wú)法做常用的位圖編輯狼电，總體交互操作相較PS也沒(méi)有太多優(yōu)勢(shì)。

▲ 18M輸出文件

Part 3 結(jié)論：不妨一試

誠(chéng)然Sketch對(duì)位圖編輯是非常不友好的补憾，完全不能與PS 相提并論漫萄，因此現(xiàn)階段Sketch 一定不是必要工具。當(dāng)然它的賣(mài)點(diǎn)本來(lái)就無(wú)關(guān)位圖盈匾，其針對(duì)UI設(shè)計(jì)的操作腾务、交互模式大大提高工作效率。不過(guò)就像大家知道AI做矢量比PS高效削饵，但就是不移步AI一樣（實(shí)際工作中位圖處理多過(guò)矢量)岩瘦，軟件切換多少有心理成本。另外還涉及到團(tuán)隊(duì)協(xié)作問(wèn)題窿撬，Sketch 現(xiàn)如今在我司還如此孤立無(wú)援启昧，且還要多背一臺(tái)MacBook。

但是Sketch非常適合扁平化設(shè)計(jì)劈伴，順應(yīng)了設(shè)計(jì)理念：數(shù)值化編輯像素級(jí)精準(zhǔn)等等密末， 而且矢量化設(shè)計(jì)也是一種趨勢(shì)。

好玩好用跛璧，上手成本低严里，值得一試。

作為一枚GUI總結(jié)一下追城，Sketch在以下幾方面可能有所助益：

1. 移動(dòng)端APP和響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)利器

全局化視野 精準(zhǔn)的自動(dòng)對(duì)齊 符號(hào)和共享樣式…顯然就是為此而生

2. 簡(jiǎn)單的矢量化圖標(biāo)

通過(guò)布爾運(yùn)算能處理的圖標(biāo)都適合在Sketch中操作刹碾，輸出也快速方便

3. 簡(jiǎn)易形（幾何組合造型）嘗試

Sketch的數(shù)值化編輯、非破壞性編輯使得圖形組合的自由度非常高

4. 游戲界面風(fēng)格稿前期設(shè)計(jì)

也就是刻畫(huà)之前的各階段：色彩搭配座柱、布局調(diào)整迷帜、樣式設(shè)計(jì)

有利于聚焦在設(shè)計(jì)過(guò)程物舒、界面邏輯，而非細(xì)節(jié)戏锹。即避免失控（設(shè)計(jì)點(diǎn)偏離）以及在豐富的材質(zhì)中迷失冠胯。

Abobe的反擊

當(dāng)然PS也已經(jīng)向sketch學(xué)習(xí)，PS CC 2015推出Design Mode景用，看上去也是萌萌噠涵叮。

▲ Design Mode *圖片來(lái)源

并沒(méi)有用過(guò)∩〔澹看討論是說(shuō)由于軟件體量悠久的操作習(xí)慣等問(wèn)題只是小改割粮，沒(méi)有多好用。 這個(gè)有空研究……

搜集資料的過(guò)程中還發(fā)現(xiàn)了CC不為人知（也許就我不知道）的功能Libraries panel （附教程）

▲ 看圖秒懂

看圖秒懂媚污，就是可以各種調(diào)用：色板舀瓢、sketch的共享字體樣式、常用圖片是不是都在這里了 耗美。這個(gè)有空研究……

想到PS也有一個(gè)版本是可以平鋪很多畫(huà)板的京髓，但并沒(méi)有很多人用。

對(duì)比Sketch和PS帶來(lái)的反思

1. 設(shè)計(jì)是核心：厘清設(shè)計(jì)思路很重要

兩家都是用來(lái)實(shí)現(xiàn)設(shè)計(jì)想法的工具商架，最關(guān)鍵的還是設(shè)計(jì)和想法堰怨，Sketch中的很多功能都是幫助設(shè)計(jì)師關(guān)注設(shè)計(jì)流程、把控層級(jí)的蛇摸，

2. 主動(dòng)優(yōu)化流程

PS更新后有很多有意思的功能和冷知識(shí)可能因?yàn)橐郧暗氖褂脩T性等原因沒(méi)有去開(kāi)發(fā)备图；

培養(yǎng)好的使用習(xí)慣，比如圖層管理赶袄、資源整理揽涮；

也許偶爾花點(diǎn)時(shí)間去優(yōu)化流程會(huì)是一大助力；

新東西不妨弄一弄饿肺，讓自己的系統(tǒng)更加Flexible蒋困，多多自我迭代。