Sketch作為一個為UI設(shè)計而生的工具，全矢量、輕量級、像素級精準(zhǔn)，非常適合做移動端應(yīng)用類的界面設(shè)計和簡單的扁平圖標(biāo)設(shè)計。
他輕巧 優(yōu)雅 高效，三點相輔相成 。出道至今已經(jīng)強力地占據(jù)了一片設(shè)計師市場，經(jīng)常被拿來跟PS對比。
下文是我通過一段時間的使用，對比PS，梳理了Sketch對我們而言的優(yōu)點和痛點，探討了下Sketch對提升工作效率是否有幫助，文末還附帶了一些延伸閱讀。
PART1 #Sketch的8大優(yōu)勢
1.小清新顏值高
簡潔高效 抗干擾
界面簡潔美好，功能清晰。無懸浮面板，選擇一個對象/圖層（objects）就會展示對應(yīng)檢查器（inspectors），不會有PS中處理大文件時各種開關(guān)窗口情況。
2.使用暢快易上手
2.1 無限畫布&畫板-自由度高
不管有多少畫布（pages）都被包含在同一個文檔中，還可以在程序內(nèi)部進行搜索，便于管理大型項目
在一個畫布中可以平鋪無限個畫板（Artboard），這樣的全局視野，規(guī)劃自由度高，也利于思考界面元素關(guān)系和維護界面設(shè)計的一致性，方便各種check
說明：Sketch文檔>Page>Artboard>Layer
在一個Sketch文檔中可以建立多個畫布（Page），畫布中可以自由放置畫板（Artboard）。
而每個元素/對象都作為一個圖層（layer），以圖層或組（group）的形式安置在artboard中。
2.2 無冷啟動時間-運行快
0啟動時間，也就是沒有類似于PS的啟動畫面，節(jié)省了等待時間
由于多是矢量文件，因此體量小，運行快。
2.3 簡化操作-交互體驗好
操作人性，各種貼心設(shè)計 ，使眼與手在界面設(shè)計過程中更加輕松高效完成工作，上手指數(shù)超高。
方便選擇
上文提到的Sketch中不同面板位置是固定的，選中某個對象才會顯示對應(yīng)的檢查器，不用在眾多屬性窗口中苦苦尋覓
鼠標(biāo)掠過畫布中元素的時，左側(cè)圖層欄會出現(xiàn)藍色框?qū)沟竭x中的元素
左側(cè)分欄可以看到矢量圖形的的縮略圖，不用仔細閱讀面板信息即可準(zhǔn)確選擇
簡而言之，不懂PS/AI的小白上手sketch完全無礙
3.像素級精準(zhǔn)
3.1像素級對齊
Sketch中在編輯路徑時，可以選擇三種對齊方式——
Don't round to nearest pixels 不自動對齊像素：編輯路徑時可以隨意移動節(jié)點
Round to half pixels 以半像素為單位對齊：可能出現(xiàn)半像素
Round to full pixels 以1像素為單位對齊像素：錨點全部像素對齊，避免鋸齒，可以節(jié)省設(shè)計濕大量微調(diào)時間。
*圖片來源
3.2數(shù)值化編輯
矢量軟件的一大優(yōu)勢就是可以編輯精準(zhǔn)，Sketch中可以實時調(diào)節(jié)形狀的半徑/數(shù)量等各個參數(shù)，數(shù)值化編輯讓設(shè)計更加精準(zhǔn)和專業(yè)。
基于公式運算的變形
PS中的標(biāo)尺和矢量工具都很笨重，比如建立倍數(shù)關(guān)系的東西、按黃金分割分配比例、做菲波那切數(shù)列圖標(biāo)什么的都很糾結(jié)。
而在sketch中甚至可以直接完成簡單運算：
*圖片來源
Sketch讓設(shè)計師更加關(guān)注數(shù)值，更理性有邏輯的去編排布局，而不是隨意拖拽元素。
4.非破壞性編輯
隨時調(diào)節(jié)形狀的半徑/數(shù)量
在PS中如果需改變已建圖形的半徑就要重新建立形狀，而sketch則可以隨時編輯。
*圖片來源
隨時編輯的布爾運算
跟PS和AI一樣，sketch也有聯(lián)合、相減、相交、差異這些布爾運算。
更方便的地方在于參與運算的子形狀都可以即時編輯。每個路徑都可以隨時修改運算方式和層次等操作，方便管理復(fù)雜的形狀組合。
比PS中的合并形狀更具自由度，也更容易理解層級關(guān)系。
九宮切片自動化
導(dǎo)入位圖文件后可以調(diào)整九宮節(jié)點，直接實現(xiàn)九宮變形，節(jié)省了人工完成的時間。
可視化漸變調(diào)節(jié)
由于是矢量文件，所以實現(xiàn)了參數(shù)可視化，在圖形可以看到直觀效果
復(fù)制旋轉(zhuǎn)
可以方便地建立旋轉(zhuǎn)圖形及編輯中心點
圖層樣式可無限累加
可逐層設(shè)置的多種混合模式，也就是說可以加外描邊的外描邊的外描邊的外描邊……
并可以任意調(diào)節(jié)各層樣式。另外，描邊寬度也可以加錨點改變噠（同AI）
5.可調(diào)用的嵌套樣式
Sketch的明星功能符號（Symbol）和共享樣式(Shared style：layer styles&text styles)：
符號（Symbol）
就是共享元素，一次編輯，所有共用的地方全部生效，就像是 Photoshop 里的智能對象，且生效范圍僅在每一個 .sketch 文件中。不同之處在于Sketch中改變一個元素副本大小所有都同步，PS中智能對象的大小是獨立的；且Sketch的符號中文本是可以單獨編輯的。
符號被運用的最廣泛的地方可能是按鈕這樣的基本 UI 元素，舉個栗子，在PS中建立兩個文字不同的圖標(biāo)需要新建智能對象或者文字與按鈕分離，編輯時需要打開一個或兩個智能對象……Sketch中編輯就輕松很多。
共享樣式(Shared style：layer styles&text styles)
圖層共享樣式PS中也能復(fù)制黏貼，然文字樣式的編輯和共享PS中并沒有。共享文字樣式等同于直接在軟件中調(diào)用文字規(guī)范，非常有用的功能~
6.原生測量利器
十分好用的標(biāo)尺工具
如果需要查看兩個元素之間的距離，在選中第一個元素后按住Alt然后將光標(biāo)指向第二個元素即可。
此時如果按住Alt并移動元素，便能在移動過程中時刻看到元素之間的距離變化
布局網(wǎng)格和參考線面板
參考線是PS CC前版本比較渣的點，只能一條條來，不支持參考線面板（按比例建立多條），做界面設(shè)計時基本要借助第三方插件
而在sketch中就很方便啦
7.靈活的切圖和輸出
批量輸出爽爆，還可以自動畫出切片大小（slice），切片輸出直觀方便 （包括上文提到的九宮變形）
可以導(dǎo)出 0.5x、1x、2x、3x、512W 和 512H 的版本，同時還可以自定義不同尺寸的后綴。
8.前景好迭代快
手機端配套支持
自帶的Sketch Mirror支持同步手機端，時時查看效果。
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è)型小團隊將sketch作為主力設(shè)計工具。
社區(qū)繁榮插件多
Sketch由于備受追捧，社區(qū)的活躍度高，各種插件、資源查找方便。
小團隊迭代快
作為為設(shè)計師存在的軟件，據(jù)說非常愿意傾聽設(shè)計師意見，響應(yīng)迅速、更新迭代快。
PART2 #Sketch的3大痛點
1.弱爆的位圖處理能力
位圖處理就在兩個地方：
簡單的投影和模糊（4種模糊方式）
位圖編輯功能：兩個選區(qū)工具（魔術(shù)棒和選擇工具）、反選、裁剪、矢量填充和直接填充。
當(dāng)然并沒有畫筆、濾鏡種種
且圖層樣式只有四種：填充、描邊、投影、內(nèi)陰影（沒有常用的內(nèi)外發(fā)光 斜面浮雕）
所以說不適于做擬物類界面設(shè)計，用Sketch挑戰(zhàn)繪圖向設(shè)計很低效
2.格式支持局限，難以團隊協(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) (可能會有中文字體支持問題)
如：無法方便地為一段中英混合的文字指定中英文字體（一個知乎上看到的槽點）
“比如說「你好Hello」這幾個字，在PS下可以先設(shè)為冬青黑，再設(shè)為Avenir Next，它就是冬青黑的中文+ Avenir Next的英文。但Sketch不支持這樣的操作，為大段文字設(shè)置不同的中英文字體就是災(zāi)難。”
補充1：字體行高詭異
不同字體的實際行高也不一樣，做列表類界面的時候特別麻煩
另外 Sketch 的行高很有問題，我隨手找過幾個字體對比過，比如在行高設(shè)為 88px 時，每個字體的行高都不一樣，行高設(shè)為自動時不同字體文本框 padding 也是不同的。排版對齊很麻煩：
Photoshop 的文字有分「段落文本（Paragragh）」和「點文本（Point）」，Sketch中 對應(yīng)的則是「Fixed」和「Auto」，看上去 Auto 對應(yīng)的是 PS 里的 點文本，但是 Sketch 的文本框上下會留出一些留白間距，而 PS 則是沒有留白間距的處理，這樣一來，對齊的時候 PS 感覺會更精準(zhǔn)一些
補充2：拼界面無明顯優(yōu)勢
運行超快的Sketch能否拿來拼（位圖）界面？
導(dǎo)入了一套約18M的文件，其中包含jpg和png文件。移動位圖過程中有明顯卡頓，九宮切圖因為自動化所以會比（ps）較快，但無法做常用的位圖編輯，總體交互操作相較PS也沒有太多優(yōu)勢。
PAET3 #結(jié)論：不妨一試
誠然Sketch對位圖編輯是非常不友好的，完全不能與ps相提并論，因此現(xiàn)階段Sketch一定不是必要工具。當(dāng)然它的賣點本來就無關(guān)位圖，其針對UI設(shè)計的操作、交互模式大大提高工作效率。不過就像大家知道AI做矢量比PS高效，但就是不移步AI一樣（實際工作中位圖處理多過矢量)，軟件切換多少有心理成本。另外還涉及到團隊協(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)?
通過布爾運算能處理的圖標(biāo)都適合在Sketch中操作，輸出也快速方便
3. 簡易形（幾何組合造型）嘗試 ?
Sketch的數(shù)值化編輯、非破壞性編輯使得圖形組合的自由度非常高
4. 游戲界面風(fēng)格稿前期設(shè)計
也就是刻畫之前的各階段：色彩搭配、布局調(diào)整、樣式設(shè)計
有利于聚焦在設(shè)計過程、界面邏輯，而非細節(jié)。即避免失控（設(shè)計點偏離）以及在豐富的材質(zhì)中迷失。
*文件再導(dǎo)入PS會比較繁瑣：除非png等位圖格式，不然中需要ai做中轉(zhuǎn)
Abobe的反擊
以上歸納的很多點sketch優(yōu)勢實際上PS CC 2015都已經(jīng)有相應(yīng)跟進，只不過同樣因為團隊協(xié)作等問題（大部分同事還是用PS 6乃至更原始版本），沒有去開發(fā)新功能。
1.多畫板設(shè)定
想到PS CC也可以平鋪很多畫板的，可能由于我們處理的文件體量比較大，并沒有太多人用
新建畫板有三種方式：直接新建、根據(jù)圖層新建、根據(jù)組新建
*從屬關(guān)系：ps文檔>畫板>組>圖層
2.參考線面板（Photoshop CC 2014.2）
通過形狀新建參考線功能，可以一鍵創(chuàng)建參考線
還可以新建參考線面板，即可以快速建立成套參考線，Adobe還給出了四種參考線預(yù)設(shè)：8列、12列、16列、24列
3.快速切片功能
?新建基于圖層的切片，快速導(dǎo)出png。選中圖層右鍵“快速導(dǎo)出png”即可。
4.圖層樣式疊加 （PS CC 2015）
最多可以疊加10個，缺點是由于樣式名字相同，設(shè)置多層則不容易區(qū)分
*圖片來源：移步PS冷知識專輯
5.共享段落樣式、字符樣式 （待測試）
通過添加樣式可以快速改變字體， 類似于PPT，不過只支持文件內(nèi)部共享，不能導(dǎo)出。
6.原生移動端支持
原廠出品移動端同步：Adobe Previewcc，不用再用PSplay什么的，更加高速穩(wěn)定。
7.設(shè)計空間（Design Mode）
新推出的設(shè)計師模式操作模式，看上去也是萌萌噠。據(jù)說穩(wěn)定性和性能總體體驗一般，期待更新版本。
*圖片來源
8.云端素材庫（Adobe Creative Cloud Libraries）
搜集資料的過程中還發(fā)現(xiàn)了CC鮮為人用的功能Libraries panel （附教程）
看圖秒懂，就是可以各種調(diào)用：色板、sketch的共享字體樣式、常用圖片是不是都在這里了 。還包含了云端Adobe圖庫（Adobe Stock）的調(diào)用。可能可以真正實現(xiàn)一次修改，到處同步了，團隊協(xié)作神器。
9.龐大的插件后宮
發(fā)展至今PS的插件、動作、材質(zhì)、形狀的眾創(chuàng)規(guī)模之巨大已經(jīng)不用贅述。比如插件Corner Editor可以實現(xiàn)圓角的編輯功能，相當(dāng)于Sketch中針對圓角形狀的非破壞性編輯。這些都是PS的定制型增效工具，按需手動添加即可。
對比Sketch和PS帶來的反思
1.設(shè)計是核心：厘清設(shè)計思路很重要
兩家都是用來實現(xiàn)設(shè)計想法的工具，最關(guān)鍵的還是設(shè)計和想法，sketch中的很多功能都是幫助設(shè)計師關(guān)注設(shè)計流程、把控層級的
2.主動優(yōu)化流程
PS CC后有很多有意思的功能和冷知識可能因為以前的使用慣性等原因沒有去開發(fā)
以及培養(yǎng)好的使用習(xí)慣，比如圖層管理、資源整理
也許偶爾花點時間去優(yōu)化流程會是一大助力
新東西不妨嘗試看看，讓自己的系統(tǒng)更加flexible，多多自我迭代。
對Sketch和PS的研究都尚淺，歡~迎~吐~槽~
>戳一戳?
·Sketch的學(xué)習(xí)路徑和資源（見最高票回答）
>下載鏈接
