@LUNA不停 ：Sketch作為一個為UI設(shè)計而生的工具，全矢量、輕量級、像素級精準(zhǔn)，非常適合做移動端應(yīng)用類的界面設(shè)計和簡單的扁平圖標(biāo)設(shè)計。下文是我通過一段時間的使用，對比PS，梳理了Sketch對我們而言的優(yōu)點(diǎn)和痛點(diǎn)，探討了下Sketch對提升工作效率是否有幫助。

它輕巧、優(yōu)雅、高效，三點(diǎn)相輔相成 。出道至今已經(jīng)強(qiáng)力地占據(jù)了一片設(shè)計師市場，經(jīng)常被拿來跟PS對比。

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

1. 小清新顏值高

簡潔高效 - 抗干擾

界面簡潔美好，功能清晰。無懸浮面板，選擇一個對象/圖層（objects）就會展示對應(yīng)檢查器（inspectors），不會有PS中處理大文件時各種開關(guān)窗口情況。

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

2. 使用暢快易上手

2.1 無限畫布&畫板 - 自由度高

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

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

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

說明：Sketch文檔>Page>Artboard>Layer

在一個Sketch文檔中可以建立多個畫布（Page），畫布中可以自由放置畫板（Artboard）。

而每個元素/對象都作為一個圖層（layer），以圖層或組（group）的形式安置在artboard中。

2.2 無冷啟動時間 - 運(yùn)行快

0啟動時間，也就是沒有類似于PS的啟動畫面，節(jié)省了等待時間

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

2.3 簡化操作 - 交互體驗好

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

方便選擇：

1. 上文提到的Sketch中不同面板位置是固定的，選中某個對象才會顯示對應(yīng)的檢查器，不用在眾多屬性窗口中苦苦尋覓
2. 鼠標(biāo)掠過畫布中元素的時，左側(cè)圖層欄會出現(xiàn)藍(lán)色框?qū)沟竭x中的元素
3. 左側(cè)分欄可以看到矢量圖形的的縮略圖，不用仔細(xì)閱讀面板信息即可準(zhǔn)確選擇

▲?選中右側(cè)元素”BHBH“，左側(cè)藍(lán)色框自動對焦圖層。

簡而言之，不懂PS/AI的小白上手Sketch完全無礙。

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

3.1像素級對齊

Sketch中在編輯路徑時，可以選擇三種對齊方式——

1. Don't round to nearest pixels：不自動對齊像素：編輯路徑時可以隨意移動節(jié)點(diǎn)
2. Round to half pixels：以半像素為單位對齊：可能出現(xiàn)半像素
3. Round to full pixels：以1像素為單位對齊像素：錨點(diǎn)全部像素對齊，避免鋸齒，可以節(jié)省設(shè)計濕大量微調(diào)時間。

▲?三種對齊方式

▲?三種對齊方式的說明圖 ?*圖片來源

3.2數(shù)值化編輯

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

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

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

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

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

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

4. 非破壞性編輯

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

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

▲?圓角變形就是辣么簡單?*圖片來源

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

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

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

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

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

九宮切片自動化

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

▲?九宮編輯

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

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

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

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

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

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

圖層樣式可無限累加

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

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

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

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

符號（Symbol）

就是共享元素，一次編輯，所有共用的地方全部生效，就像是 Photoshop 里的智能對象，且生效范圍僅在每一個 .sketch 文件中。不同之處在于Sketch中改變一個元素副本大小所有都同步，PS中智能對象的大小是獨(dú)立的；且Sketch的符號中文本是可以單獨(dú)編輯的。

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

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

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

▲?紫色文件夾即應(yīng)用了符號（來源：官網(wǎng)）

6. 原生測量利器

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

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

此時如果按住Alt并移動元素，便能在移動過程中時刻看到元素之間的距離變化：

▲?對齊也變得非常容易

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

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

▲?參考線批量一鍵設(shè)置

7. 靈活的切圖和輸出

批量輸出爽爆，還可以自動畫出切片大小（slice），切片輸出直觀方便 （包括上文提到的九宮變形）

可以導(dǎo)出 0.5x、1x、2x、3x、512W 和 512H 的版本，同時還可以自定義不同尺寸的后綴。

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

8. 前景好迭代快

手機(jī)端配套支持

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

IOS 友好

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

CSS友好

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

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

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

社區(qū)繁榮插件多

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

小團(tuán)隊迭代快

作為為設(shè)計師存在的軟件，據(jù)說非常愿意傾聽設(shè)計師意見，響應(yīng)迅速、更新迭代快。

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

1. 弱爆的位圖處理能力

位圖處理就在兩個地方：

簡單的投影和模糊（4種模糊方式）

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

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

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

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

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

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

3. 平臺和語言限制

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

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

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

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

字體行高詭異

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

另外 Sketch 的行高很有問題，我隨手找過幾個字體對比過，比如在行高設(shè)為 88px 時，每個字體的行高都不一樣，行高設(shè)為自動時不同字體文本框 padding 也是不同的。

排版對齊很麻煩

Photoshop 的文字有分「段落文本（Paragragh）」和「點(diǎn)文本（Point）」，Sketch中 對應(yīng)的則是「Fixed」和「Auto」，看上去 Auto 對應(yīng)的是 PS 里的 點(diǎn)文本，但是 Sketch 的文本框上下會留出一些留白間距，而 PS 則是沒有留白間距的處理，這樣一來，對齊的時候 PS 感覺會更精準(zhǔn)一些。

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

拼界面無明顯優(yōu)勢

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

導(dǎo)入了一套約18M的文件，其中包含jpg和png文件。移動位圖過程中有明顯卡頓，九宮切圖因為自動化所以會比（ps）較快，但無法做常用的位圖編輯，總體交互操作相較PS也沒有太多優(yōu)勢。

▲?18M輸出文件

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

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

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

好玩好用，上手成本低，值得一試。

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

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

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

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

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

3. 簡易形（幾何組合造型）嘗試

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

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

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

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

Abobe的反擊

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

▲?Design Mode?*圖片來源

并沒有用過。看討論是說由于軟件體量悠久的操作習(xí)慣等問題只是小改，沒有多好用。 這個有空研究……

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

▲?看圖秒懂

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

想到PS也有一個版本是可以平鋪很多畫板的，但并沒有很多人用。

對比Sketch和PS帶來的反思

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

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

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

PS更新后有很多有意思的功能和冷知識可能因為以前的使用慣性等原因沒有去開發(fā)；

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

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

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

對Sketch和PS的研究都尚淺，歡迎吐槽~

「Sketch教程合集持續(xù)更新中」

1. 《SKETCH設(shè)計教室！從零開始學(xué)APP設(shè)計利器SKETCH（一）》
2. 《SKETCH設(shè)計教室！從零開始學(xué)APP設(shè)計利器SKETCH（二）》
3. 《SKETCH設(shè)計教室！帶你了解超好用的SKETCH插件》
4. 《想要一稿過不加班？SKETCH絕配神器MIRROR搶先體驗》
5. 《超實(shí)用！SKETCH大師最常用的3個實(shí)戰(zhàn)小技巧》
6. 《前端神器！為網(wǎng)頁設(shè)計而生的15個優(yōu)質(zhì)SKETCH插件》
7. 《SKETCH新手指南！10個幫你UI設(shè)計提速的SKETCH使用技巧》
8. 《超能陸戰(zhàn)隊！手把手教你用SKETCH繪制萌萌噠的大白》

原文地址：jianshu

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量104萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com