@LUNA不停 ：Sketch作為一個為UI設計而生的工具，全矢量、輕量級、像素級精準，非常適合做移動端應用類的界面設計和簡單的扁平圖標設計。下文是我通過一段時間的使用，對比PS，梳理了Sketch對我們而言的優點和痛點，探討了下Sketch對提升工作效率是否有幫助。
它輕巧、優雅、高效，三點相輔相成 。出道至今已經強力地占據了一片設計師市場，經常被拿來跟PS對比。
Part 1 Sketch的八大優勢
1. 小清新顏值高
簡潔高效 - 抗干擾
界面簡潔美好，功能清晰。無懸浮面板，選擇一個對象/圖層（objects）就會展示對應檢查器（inspectors），不會有PS中處理大文件時各種開關窗口情況。
▲ 軟件截圖（全屏）：左側欄為圖層區；右側欄為檢查器區
2. 使用暢快易上手
2.1 無限畫布&畫板 - 自由度高
不管有多少畫布（pages）都被包含在同一個文檔中，還可以在程序內部進行搜索，便于管理大型項目
在一個畫布中可以平鋪無限個畫板（Artboard），這樣的全局視野，規劃自由度高，也利于思考界面元素關系和維護界面設計的一致性，方便各種check。
▲?示意文件截圖（局部）：右側為隨意擺放的4個畫板
說明：Sketch文檔>Page>Artboard>Layer
在一個Sketch文檔中可以建立多個畫布（Page），畫布中可以自由放置畫板（Artboard）。
而每個元素/對象都作為一個圖層（layer），以圖層或組（group）的形式安置在artboard中。
2.2 無冷啟動時間 - 運行快
0啟動時間，也就是沒有類似于PS的啟動畫面，節省了等待時間
由于多是矢量文件，因此體量小，運行快。
2.3 簡化操作 - 交互體驗好
操作人性，各種貼心設計 ，使眼與手在界面設計過程中更加輕松高效完成工作，上手指數超高。
方便選擇：
- 上文提到的Sketch中不同面板位置是固定的，選中某個對象才會顯示對應的檢查器，不用在眾多屬性窗口中苦苦尋覓
- 鼠標掠過畫布中元素的時，左側圖層欄會出現藍色框對對焦到選中的元素
- 左側分欄可以看到矢量圖形的的縮略圖，不用仔細閱讀面板信息即可準確選擇
▲?選中右側元素”BHBH“，左側藍色框自動對焦圖層。
簡而言之，不懂PS/AI的小白上手Sketch完全無礙。
3. 像素級精準
3.1像素級對齊
Sketch中在編輯路徑時，可以選擇三種對齊方式——
- Don't round to nearest pixels：不自動對齊像素：編輯路徑時可以隨意移動節點
- Round to half pixels：以半像素為單位對齊：可能出現半像素
- Round to full pixels：以1像素為單位對齊像素：錨點全部像素對齊，避免鋸齒，可以節省設計濕大量微調時間。
▲?三種對齊方式
▲?三種對齊方式的說明圖 ?*圖片來源
3.2數值化編輯
矢量軟件的一大優勢就是可以編輯精準，Sketch中可以實時調節形狀的半徑/數量等各個參數，數值化編輯讓設計更加精準和專業。
基于公式運算的變形：
PS中的標尺和矢量工具都很笨重，比如建立倍數關系的東西、按黃金分割分配比例、做菲波那切數列圖標什么的都很糾結。
而在Sketch中甚至可以直接完成簡單運算：
▲?像 100 * 1.6 + 60 這樣的運算可以在 Sketch 中進行 ?*圖片來源
Sketch讓設計師更加關注數值，更理性有邏輯的去編排布局，而不是隨意拖拽元素。
4. 非破壞性編輯
隨時調節形狀的半徑/數量：
在PS中如果需改變已建圖形的半徑就要重新建立形狀，而Sketch則可以隨時編輯。
▲?圓角變形就是辣么簡單?*圖片來源
隨時編輯的布爾運算
跟PS和AI一樣，sketch也有聯合、相減、相交、差異這些布爾運算。
更方便的地方在于參與運算的子形狀都可以即時編輯。每個路徑都可以隨時修改運算方式和層次等操作，方便管理復雜的形狀組合。
比PS中的合并形狀更具自由度，也更容易理解層級關系。
▲?每層與下一層發生布爾運算
九宮切片自動化
導入位圖文件后可以調整九宮節點，直接實現九宮變形，節省了人工完成的時間。
▲?九宮編輯
可視化漸變調節
由于是矢量文件，所以實現了參數可視化，在圖形可以看到直觀效果。
▲?圖形上方即有漸變操作桿直接調節
復制旋轉
可以方便地建立旋轉圖形及編輯中心點。
總覺得有點酷炫。
圖層樣式可無限累加
可逐層設置的多種混合模式，也就是說可以加外描邊的外描邊的外描邊的外描邊……
并可以任意調節各層樣式。另外，描邊寬度也可以加錨點改變噠（同AI）
5. 可調用的嵌套樣式
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中并沒有。共享文字樣式等同于直接在軟件中調用文字規范，非常有用的功能~
▲?紫色文件夾即應用了符號（來源：官網）
6. 原生測量利器
十分好用的標尺工具
如果需要查看兩個元素之間的距離，在選中第一個元素后按住Alt然后將光標指向第二個元素即可。
此時如果按住Alt并移動元素，便能在移動過程中時刻看到元素之間的距離變化：
▲?對齊也變得非常容易
布局網格和參考線
參考線是PS比較渣的點，只能一條條來，不支持布局式參考線（按比例建立多條），做界面設計時基本要借助第三方插件，而在Sketch中就很方便啦。
▲?參考線批量一鍵設置
7. 靈活的切圖和輸出
批量輸出爽爆，還可以自動畫出切片大小（slice），切片輸出直觀方便 （包括上文提到的九宮變形）
可以導出 0.5x、1x、2x、3x、512W 和 512H 的版本，同時還可以自定義不同尺寸的后綴。
▲?一鍵導出多種尺寸和格式
8. 前景好迭代快
手機端配套支持
自帶的Sketch Mirror支持同步手機端，時時查看效果。
IOS 友好
IOS 各種支持的好，且內置的ios模板 （artboard），各種文檔尺寸不用手動輸。
CSS友好
Sketch是寫碼的設計師最愛，可能是代碼調用方便（？）以下是Avocode（號稱是連接設計師與碼農的橋梁）做的調研報告《How designer worked in 2015》中關于軟件使用比例的截圖。
可以理解會有不少創業型小團隊將Sketch作為主力設計工具。
▲ ?Sketch的使用比例快要趕上PS
社區繁榮插件多
Sketch由于備受追捧，社區的活躍度高，各種插件、資源查找方便。
小團隊迭代快
作為為設計師存在的軟件，據說非常愿意傾聽設計師意見，響應迅速、更新迭代快。
Part 2 Sketch的三大痛點
1. 弱爆的位圖處理能力
位圖處理就在兩個地方：
簡單的投影和模糊（4種模糊方式）
位圖編輯功能：兩個選區工具（魔術棒和選擇工具）、反選、裁剪、矢量填充和直接填充。
當然并沒有畫筆、濾鏡種種，且圖層樣式只有四種：填充、描邊、投影、內陰影（沒有常用的內外發光 斜面浮雕）
所以說不適于做擬物類界面設計，用Sketch挑戰繪圖向設計很低效。
2. 格式支持局限，難以團隊協作
不支持：PSD和AI文件，部分支持eps/svg。
支持：除圖片文件jpg/png/tiff/pdf外，可以導出eps/svg（可以與AI對接）
3. 平臺和語言限制
Sketch在官網上的定位就是?——?Sketch- Professional Digital Design for Mac
首先需要Mac，且只有英文系統 （可能會有中文字體支持問題）
如：無法方便地為一段中英混合的文字指定中英文字體（一個知乎上看到的槽點）
“比如說「你好Hello」這幾個字，在PS下可以先設為冬青黑，再設為Avenir Next，它就是冬青黑的中文+ Avenir Next的英文。但Sketch不支持這樣的操作，為大段文字設置不同的中英文字體就是災難。”
字體行高詭異
不同字體的實際行高也不一樣，做列表類界面的時候特別麻煩。
另外 Sketch 的行高很有問題，我隨手找過幾個字體對比過，比如在行高設為 88px 時，每個字體的行高都不一樣，行高設為自動時不同字體文本框 padding 也是不同的。
排版對齊很麻煩
Photoshop 的文字有分「段落文本（Paragragh）」和「點文本（Point）」，Sketch中 對應的則是「Fixed」和「Auto」，看上去 Auto 對應的是 PS 里的 點文本，但是 Sketch 的文本框上下會留出一些留白間距，而 PS 則是沒有留白間距的處理，這樣一來，對齊的時候 PS 感覺會更精準一些。
▲?任意三種字體上對齊的結果
拼界面無明顯優勢
運行超快的Sketch能否拿來拼（位圖）界面？
導入了一套約18M的文件，其中包含jpg和png文件。移動位圖過程中有明顯卡頓，九宮切圖因為自動化所以會比（ps）較快，但無法做常用的位圖編輯，總體交互操作相較PS也沒有太多優勢。
▲?18M輸出文件
Part 3 結論：不妨一試
誠然Sketch對位圖編輯是非常不友好的，完全不能與PS 相提并論，因此現階段Sketch 一定不是必要工具。當然它的賣點本來就無關位圖，其針對UI設計的操作、交互模式大大提高工作效率。不過就像大家知道AI做矢量比PS高效，但就是不移步AI一樣（實際工作中位圖處理多過矢量)，軟件切換多少有心理成本。另外還涉及到團隊協作問題，Sketch 現如今在我司還如此孤立無援，且還要多背一臺MacBook。
但是Sketch非常適合扁平化設計，順應了設計理念：數值化編輯像素級精準等等， 而且矢量化設計也是一種趨勢。
好玩好用，上手成本低，值得一試。
作為一枚GUI總結一下，Sketch在以下幾方面可能有所助益：
1. 移動端APP和響應式網頁設計利器
全局化視野 精準的自動對齊 符號和共享樣式…顯然就是為此而生
2. 簡單的矢量化圖標
通過布爾運算能處理的圖標都適合在Sketch中操作，輸出也快速方便
3. 簡易形（幾何組合造型）嘗試
Sketch的數值化編輯、非破壞性編輯使得圖形組合的自由度非常高
4. 游戲界面風格稿前期設計
也就是刻畫之前的各階段：色彩搭配、布局調整、樣式設計
有利于聚焦在設計過程、界面邏輯，而非細節。即避免失控（設計點偏離）以及在豐富的材質中迷失。
Abobe的反擊
當然PS也已經向sketch學習，PS CC 2015推出Design Mode，看上去也是萌萌噠。
▲?Design Mode?*圖片來源
并沒有用過。看討論是說由于軟件體量悠久的操作習慣等問題只是小改，沒有多好用。 這個有空研究……
搜集資料的過程中還發現了CC不為人知（也許就我不知道）的功能Libraries panel （附教程）
▲?看圖秒懂
看圖秒懂，就是可以各種調用：色板、sketch的共享字體樣式、常用圖片是不是都在這里了 。這個有空研究……
想到PS也有一個版本是可以平鋪很多畫板的，但并沒有很多人用。
對比Sketch和PS帶來的反思
1. 設計是核心：厘清設計思路很重要
兩家都是用來實現設計想法的工具，最關鍵的還是設計和想法，Sketch中的很多功能都是幫助設計師關注設計流程、把控層級的，
2. 主動優化流程
PS更新后有很多有意思的功能和冷知識可能因為以前的使用慣性等原因沒有去開發；
培養好的使用習慣，比如圖層管理、資源整理；
也許偶爾花點時間去優化流程會是一大助力；
新東西不妨弄一弄，讓自己的系統更加Flexible，多多自我迭代。
對Sketch和PS的研究都尚淺，歡迎吐槽~
「Sketch教程合集持續更新中」
- 《SKETCH設計教室！從零開始學APP設計利器SKETCH（一）》
- 《SKETCH設計教室！從零開始學APP設計利器SKETCH（二）》
- 《SKETCH設計教室！帶你了解超好用的SKETCH插件》
- 《想要一稿過不加班？SKETCH絕配神器MIRROR搶先體驗》
- 《超實用！SKETCH大師最常用的3個實戰小技巧》
- 《前端神器！為網頁設計而生的15個優質SKETCH插件》
- 《SKETCH新手指南！10個幫你UI設計提速的SKETCH使用技巧》
- 《超能陸戰隊！手把手教你用SKETCH繪制萌萌噠的大白》
原文地址：jianshu
【優設網 原創文章 投稿郵箱：2650232288@qq.com】
================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量104萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
標志設計標準教程
已累計誕生 729 位幸運星
發表評論 為下方 2 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓