Sketch作為一個為UI設計而生的工具，全矢量砰左、輕量級匿醒、像素級精準，非常適合做移動端應用類的界面設計和簡單的扁平圖標設計缠导。
他輕巧 優(yōu)雅 高效廉羔，三點相輔相成 。出道至今已經(jīng)強力地占據(jù)了一片設計師市場僻造，經(jīng)常被拿來跟PS對比蜜另。
下文是我通過一段時間的使用适室，對比PS，梳理了Sketch對我們而言的優(yōu)點和痛點举瑰，探討了下Sketch對提升工作效率是否有幫助捣辆，文末還附帶了一些延伸閱讀。
PART1 #Sketch的8大優(yōu)勢
1.小清新顏值高
簡潔高效 抗干擾
界面簡潔美好此迅，功能清晰汽畴。無懸浮面板，選擇一個對象/圖層（objects）就會展示對應檢查器（inspectors）耸序，不會有PS中處理大文件時各種開關(guān)窗口情況忍些。
2.使用暢快易上手
2.1 無限畫布&畫板-自由度高
不管有多少畫布（pages）都被包含在同一個文檔中坎怪，還可以在程序內(nèi)部進行搜索罢坝，便于管理大型項目
在一個畫布中可以平鋪無限個畫板（Artboard），這樣的全局視野搅窿，規(guī)劃自由度高嘁酿，也利于思考界面元素關(guān)系和維護界面設計的一致性，方便各種check
說明：Sketch文檔>Page>Artboard>Layer
在一個Sketch文檔中可以建立多個畫布（Page）男应，畫布中可以自由放置畫板（Artboard）闹司。
而每個元素/對象都作為一個圖層（layer），以圖層或組（group）的形式安置在artboard中沐飘。
2.2 無冷啟動時間-運行快
0啟動時間游桩，也就是沒有類似于PS的啟動畫面，節(jié)省了等待時間
由于多是矢量文件耐朴，因此體量小借卧，運行快。
2.3 簡化操作-交互體驗好
操作人性筛峭，各種貼心設計 谓娃，使眼與手在界面設計過程中更加輕松高效完成工作，上手指數(shù)超高蜒滩。
方便選擇
上文提到的Sketch中不同面板位置是固定的滨达，選中某個對象才會顯示對應的檢查器，不用在眾多屬性窗口中苦苦尋覓
鼠標掠過畫布中元素的時俯艰，左側(cè)圖層欄會出現(xiàn)藍色框?qū)沟竭x中的元素
左側(cè)分欄可以看到矢量圖形的的縮略圖捡遍，不用仔細閱讀面板信息即可準確選擇
簡而言之竹握，不懂PS/AI的小白上手sketch完全無礙
3.像素級精準
3.1像素級對齊
Sketch中在編輯路徑時画株，可以選擇三種對齊方式——
Don't round to nearest pixels 不自動對齊像素：編輯路徑時可以隨意移動節(jié)點
Round to half pixels 以半像素為單位對齊：可能出現(xiàn)半像素
Round to full pixels 以1像素為單位對齊像素：錨點全部像素對齊，避免鋸齒，可以節(jié)省設計濕大量微調(diào)時間谓传。
*圖片來源
3.2數(shù)值化編輯
矢量軟件的一大優(yōu)勢就是可以編輯精準蜈项，Sketch中可以實時調(diào)節(jié)形狀的半徑/數(shù)量等各個參數(shù)，數(shù)值化編輯讓設計更加精準和專業(yè)续挟。
基于公式運算的變形
PS中的標尺和矢量工具都很笨重紧卒，比如建立倍數(shù)關(guān)系的東西、按黃金分割分配比例诗祸、做菲波那切數(shù)列圖標什么的都很糾結(jié)跑芳。
而在sketch中甚至可以直接完成簡單運算：
*圖片來源
Sketch讓設計師更加關(guān)注數(shù)值，更理性有邏輯的去編排布局直颅，而不是隨意拖拽元素博个。
4.非破壞性編輯
隨時調(diào)節(jié)形狀的半徑/數(shù)量
在PS中如果需改變已建圖形的半徑就要重新建立形狀，而sketch則可以隨時編輯功偿。
*圖片來源
隨時編輯的布爾運算
跟PS和AI一樣盆佣，sketch也有聯(lián)合、相減械荷、相交共耍、差異這些布爾運算。
更方便的地方在于參與運算的子形狀都可以即時編輯养葵。每個路徑都可以隨時修改運算方式和層次等操作，方便管理復雜的形狀組合瘩缆。
比PS中的合并形狀更具自由度关拒，也更容易理解層級關(guān)系。
九宮切片自動化
導入位圖文件后可以調(diào)整九宮節(jié)點庸娱，直接實現(xiàn)九宮變形着绊，節(jié)省了人工完成的時間。
可視化漸變調(diào)節(jié)
由于是矢量文件熟尉，所以實現(xiàn)了參數(shù)可視化归露，在圖形可以看到直觀效果
復制旋轉(zhuǎn)
可以方便地建立旋轉(zhuǎn)圖形及編輯中心點
圖層樣式可無限累加
可逐層設置的多種混合模式，也就是說可以加外描邊的外描邊的外描邊的外描邊……
并可以任意調(diào)節(jié)各層樣式斤儿。另外剧包，描邊寬度也可以加錨點改變噠（同AI）
5.可調(diào)用的嵌套樣式
Sketch的明星功能符號（Symbol）和共享樣式(Shared style：layer styles&text styles)：
符號（Symbol）
就是共享元素，一次編輯往果，所有共用的地方全部生效疆液，就像是 Photoshop 里的智能對象，且生效范圍僅在每一個 .sketch 文件中陕贮。不同之處在于Sketch中改變一個元素副本大小所有都同步堕油，PS中智能對象的大小是獨立的；且Sketch的符號中文本是可以單獨編輯的。
符號被運用的最廣泛的地方可能是按鈕這樣的基本 UI 元素掉缺，舉個栗子卜录，在PS中建立兩個文字不同的圖標需要新建智能對象或者文字與按鈕分離，編輯時需要打開一個或兩個智能對象……Sketch中編輯就輕松很多眶明。
共享樣式(Shared style：layer styles&text styles)
圖層共享樣式PS中也能復制黏貼艰毒，然文字樣式的編輯和共享PS中并沒有。共享文字樣式等同于直接在軟件中調(diào)用文字規(guī)范赘来，非常有用的功能~
6.原生測量利器
十分好用的標尺工具
如果需要查看兩個元素之間的距離现喳，在選中第一個元素后按住Alt然后將光標指向第二個元素即可。
此時如果按住Alt并移動元素犬辰，便能在移動過程中時刻看到元素之間的距離變化
布局網(wǎng)格和參考線面板
參考線是PS CC前版本比較渣的點嗦篱，只能一條條來，不支持參考線面板（按比例建立多條）幌缝，做界面設計時基本要借助第三方插件
而在sketch中就很方便啦
7.靈活的切圖和輸出
批量輸出爽爆灸促，還可以自動畫出切片大小（slice）涵卵，切片輸出直觀方便 （包括上文提到的九宮變形）
可以導出 0.5x浴栽、1x、2x轿偎、3x典鸡、512W 和 512H 的版本，同時還可以自定義不同尺寸的后綴坏晦。
8.前景好迭代快
手機端配套支持
自帶的Sketch Mirror支持同步手機端萝玷，時時查看效果。
ios友好
ios各種支持的好昆婿，且內(nèi)置的ios模板 （artboard）球碉，各種文檔尺寸不用手動輸
CSS友好
Sketch是寫碼的設計師最愛，可能是代碼調(diào)用方便（仓蛆？）以下是Avocode（號稱是連接設計師與碼農(nóng)的橋梁）做的調(diào)研報告《How designer worked in 2015》中關(guān)于軟件使用比例的截圖睁冬。
可以理解會有不少創(chuàng)業(yè)型小團隊將sketch作為主力設計工具。
社區(qū)繁榮插件多
Sketch由于備受追捧看疙，社區(qū)的活躍度高豆拨，各種插件、資源查找方便能庆。
小團隊迭代快
作為為設計師存在的軟件辽装，據(jù)說非常愿意傾聽設計師意見，響應迅速相味、更新迭代快拾积。
PART2 #Sketch的3大痛點
1.弱爆的位圖處理能力
位圖處理就在兩個地方：
簡單的投影和模糊（4種模糊方式）
位圖編輯功能：兩個選區(qū)工具（魔術(shù)棒和選擇工具）殉挽、反選、裁剪拓巧、矢量填充和直接填充斯碌。
當然并沒有畫筆、濾鏡種種
且圖層樣式只有四種：填充肛度、描邊傻唾、投影、內(nèi)陰影（沒有常用的內(nèi)外發(fā)光 斜面浮雕）
所以說不適于做擬物類界面設計承耿，用Sketch挑戰(zhàn)繪圖向設計很低效
2.格式支持局限冠骄，難以團隊協(xié)作
不支持psd和ai文件，部分支持eps/svg
支持：除圖片文件jpg/png/tiff/pdf外加袋，可以導出eps/svg(可以與AI對接)
3.平臺和語言限制
Sketch在官網(wǎng)上的定位就是——Sketch- Professional Digital Design for Mac
首先需要Mac凛辣，且只有英文系統(tǒng) (可能會有中文字體支持問題)
如：無法方便地為一段中英混合的文字指定中英文字體（一個知乎上看到的槽點）
“比如說「你好Hello」這幾個字，在PS下可以先設為冬青黑职烧，再設為Avenir Next扁誓，它就是冬青黑的中文+ Avenir Next的英文。但Sketch不支持這樣的操作蚀之，為大段文字設置不同的中英文字體就是災難蝗敢。”
補充1：字體行高詭異
不同字體的實際行高也不一樣足删，做列表類界面的時候特別麻煩
另外 Sketch 的行高很有問題寿谴，我隨手找過幾個字體對比過，比如在行高設為 88px 時失受，每個字體的行高都不一樣讶泰，行高設為自動時不同字體文本框 padding 也是不同的。排版對齊很麻煩：
Photoshop 的文字有分「段落文本（Paragragh）」和「點文本（Point）」贱纠，Sketch中 對應的則是「Fixed」和「Auto」峻厚，看上去 Auto 對應的是 PS 里的 點文本响蕴，但是 Sketch 的文本框上下會留出一些留白間距谆焊，而 PS 則是沒有留白間距的處理，這樣一來浦夷，對齊的時候 PS 感覺會更精準一些
補充2：拼界面無明顯優(yōu)勢
運行超快的Sketch能否拿來拼（位圖）界面辖试？
導入了一套約18M的文件，其中包含jpg和png文件劈狐。移動位圖過程中有明顯卡頓罐孝，九宮切圖因為自動化所以會比（ps）較快，但無法做常用的位圖編輯肥缔，總體交互操作相較PS也沒有太多優(yōu)勢莲兢。
PAET3 #結(jié)論：不妨一試
誠然Sketch對位圖編輯是非常不友好的，完全不能與ps相提并論，因此現(xiàn)階段Sketch一定不是必要工具改艇。當然它的賣點本來就無關(guān)位圖收班，其針對UI設計的操作、交互模式大大提高工作效率谒兄。不過就像大家知道AI做矢量比PS高效摔桦，但就是不移步AI一樣（實際工作中位圖處理多過矢量)，軟件切換多少有心理成本承疲。另外還涉及到團隊協(xié)作問題邻耕，Sketch現(xiàn)如今在我司還如此孤立無援，且還要多背一臺MacBook燕鸽。
但是Sketch非常適合扁平化設計兄世，順應了設計理念：數(shù)值化編輯像素級精準等等， 而且矢量化設計也是一種趨勢绵咱。
好玩好用碘饼，上手成本低，值得一試悲伶。
作為一枚GUI總結(jié)一下艾恼，Sketch在以下幾方面可能有所助益：
1. 移動端APP和響應式網(wǎng)頁設計利器
全局化視野 精準的自動對齊 符號和共享樣式…顯然就是為此而生
2. 簡單的矢量化圖標?
通過布爾運算能處理的圖標都適合在Sketch中操作，輸出也快速方便
3. 簡易形（幾何組合造型）嘗試 ?
Sketch的數(shù)值化編輯麸锉、非破壞性編輯使得圖形組合的自由度非常高
4. 游戲界面風格稿前期設計
也就是刻畫之前的各階段：色彩搭配钠绍、布局調(diào)整、樣式設計
有利于聚焦在設計過程花沉、界面邏輯柳爽，而非細節(jié)。即避免失控（設計點偏離）以及在豐富的材質(zhì)中迷失碱屁。
*文件再導入PS會比較繁瑣：除非png等位圖格式磷脯，不然中需要ai做中轉(zhuǎn)
Abobe的反擊
以上歸納的很多點sketch優(yōu)勢實際上PS CC 2015都已經(jīng)有相應跟進，只不過同樣因為團隊協(xié)作等問題（大部分同事還是用PS 6乃至更原始版本）娩脾，沒有去開發(fā)新功能赵誓。
1.多畫板設定
想到PS CC也可以平鋪很多畫板的，可能由于我們處理的文件體量比較大柿赊，并沒有太多人用
新建畫板有三種方式：直接新建俩功、根據(jù)圖層新建、根據(jù)組新建
*從屬關(guān)系：ps文檔>畫板>組>圖層
2.參考線面板（Photoshop CC 2014.2）
通過形狀新建參考線功能碰声，可以一鍵創(chuàng)建參考線
還可以新建參考線面板诡蜓，即可以快速建立成套參考線，Adobe還給出了四種參考線預設：8列胰挑、12列蔓罚、16列椿肩、24列
3.快速切片功能
?新建基于圖層的切片，快速導出png豺谈。選中圖層右鍵“快速導出png”即可备绽。
4.圖層樣式疊加 （PS CC 2015）
最多可以疊加10個遥缕，缺點是由于樣式名字相同蝙茶，設置多層則不容易區(qū)分
*圖片來源：移步PS冷知識專輯
5.共享段落樣式款违、字符樣式 （待測試）
通過添加樣式可以快速改變字體， 類似于PPT团南，不過只支持文件內(nèi)部共享噪沙，不能導出。
6.原生移動端支持
原廠出品移動端同步：Adobe Previewcc吐根，不用再用PSplay什么的正歼，更加高速穩(wěn)定。
7.設計空間（Design Mode）
新推出的設計師模式操作模式拷橘，看上去也是萌萌噠局义。據(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)圓角的編輯功能，相當于Sketch中針對圓角形狀的非破壞性編輯兜畸。這些都是PS的定制型增效工具努释，按需手動添加即可碘梢。
對比Sketch和PS帶來的反思
1.設計是核心：厘清設計思路很重要
兩家都是用來實現(xiàn)設計想法的工具咬摇，最關(guān)鍵的還是設計和想法，sketch中的很多功能都是幫助設計師關(guān)注設計流程煞躬、把控層級的
2.主動優(yōu)化流程
PS CC后有很多有意思的功能和冷知識可能因為以前的使用慣性等原因沒有去開發(fā)
以及培養(yǎng)好的使用習慣肛鹏，比如圖層管理逸邦、資源整理
也許偶爾花點時間去優(yōu)化流程會是一大助力
新東西不妨嘗試看看，讓自己的系統(tǒng)更加flexible在扰，多多自我迭代缕减。
對Sketch和PS的研究都尚淺，歡~迎~吐~槽~
>戳一戳?
·Sketch的學習路徑和資源（見最高票回答）
>下載鏈接
