sketch?的優(yōu)劣

濟(jì)南/UI設(shè)計師/9年前/681瀏覽

版權(quán)

sketch?的優(yōu)劣

Sketch的前世今生
自從2010 年 Bohemian Coding公司推出了 Sketch，Sketch如今已經(jīng)到了39.1版本。Sketch 一開始只是小型矢量畫圖工具，后來才優(yōu)化成界面設(shè)計軟件。當(dāng)年的Sketch 2是拿過蘋果設(shè)計獎的。

Sketch的定位
Sketch如其是說是一款超越PS的繪圖軟件或者有點夸張。其實我使用時第一感覺是，這軟件太像keynote了吧。Mac軟件經(jīng)典的布局，數(shù)據(jù)表單式的檢查器，并沒有什么特別。但上手一周后，才發(fā)現(xiàn)Sketch作為UI設(shè)計軟件的首選，實在當(dāng)之無愧。

Sketch的定位并不是超越Photoshop。Photoshop涉及了太多領(lǐng)域，攝影后期、手繪插圖、平面設(shè)計和界面設(shè)計等，它已經(jīng)是變成一款大而全甚至有點臃腫的設(shè)計軟件了。

而視覺設(shè)計師用它作為UI設(shè)計軟件時，存在什么痛點呢？如果你曾設(shè)計過界面，發(fā)現(xiàn)設(shè)計界面花了1個小時，而切圖、標(biāo)注等工作需要同樣花你1個小時，你會發(fā)現(xiàn)一些批量和非設(shè)計的工作也占有工作時間的幾乎一半；當(dāng)設(shè)計稿越來越多，即使改一個字體，都得牽一發(fā)而動全身，每份設(shè)計稿都得一個一個字段調(diào)整，當(dāng)時可能自殺的心都有。

Sketch的定位便是為了解決這些問題。它是一款只在UI設(shè)計領(lǐng)域，有效率和便于協(xié)作的矢量繪圖軟件。

它減免設(shè)計師花在批量式的非設(shè)計工作的時間；
它幫助設(shè)計師聚焦他們真正需要關(guān)心的：頁面效果、擴(kuò)展性、控件庫、邏輯層次等；
它提高設(shè)計師與其他協(xié)作人員溝通的效率：產(chǎn)品經(jīng)理、交互設(shè)計師、開發(fā)工程師等。

Sketch的優(yōu)勢
1、提高非設(shè)計部分工作的效率?？煽焖佥敵?倍、2倍甚至自定義尺寸的切圖，可智能標(biāo)注任何元素。把一天需要做的任務(wù)，變成一分鐘的事。甚至連設(shè)計師不得不經(jīng)常按的Command+S都不需要按了，自動給你保存好。

2、幫助設(shè)計師聚焦他們真正關(guān)心的事情。UI設(shè)計師做設(shè)計稿的核心其實是：定義顏色、控件樣式、頁面結(jié)構(gòu)、字體和圖標(biāo)樣式等。每次的調(diào)整稿件，設(shè)計師最常經(jīng)歷的也是，把全局的顏色、字體、圖標(biāo)和控件再更新一次。

Sketch也是站在設(shè)計師的角度，把這些核心作為首要考慮的重點。比如全局控制的顏色庫、標(biāo)志庫、字體樣式等。只要你更新一個，全局運(yùn)用到的便會同步更新。

還有一個很有意思的點是，Sketch一份文件其實更多是一個項目的概念，而非一份設(shè)計稿。打開一份Sketch文件，其實是一系列稿件的匯總。

這種使用軟件的方式也會利于設(shè)計師轉(zhuǎn)換思維。例如同時看到多畫板，可以培養(yǎng)設(shè)計師的全局觀，觀察頁面的統(tǒng)一性和跳轉(zhuǎn)邏輯；全局控制字體、顏色和控件，可以培養(yǎng)設(shè)計師對拓展性和統(tǒng)一性的把控度。

3、不得不提的插件。Sketch開放了插件，讓眾多出色的插件也不停再完善Sketch。幫你批量命名圖層、智能標(biāo)注頁面、智能填充頭像和文字等，讓Sketch越來越能滿足不同人群的設(shè)計需求。

鏈接：https://www.zhihu.com/question/20715139/answer/22212865

自動保存
為了減少photoshop的崩潰的損失，每一個Ui設(shè)計師都會不停的command＋s，這其實是一件很殘忍的事，你可以打開自動保存，但你無法預(yù)估它的保存時間，但隨著文件越做越大，它來這么一下，你就得停下不動，這事尤其的蛋疼。sketch可以自動保存并且最關(guān)鍵的事，它不會打斷你，你不必神經(jīng)質(zhì)的每隔幾分鐘手便抽動一次。

矢量圖形
在sketch創(chuàng)建的圖形全部是矢量的，在放大縮小就很方便，不需要調(diào)整太多，還有一個很好的小功能，就是可以一鍵把0.幾的像素變成整數(shù)，而且可以很方便的在矢量視圖和像素視圖之間進(jìn)行切換。
可以很方便的創(chuàng)建一些重復(fù)形狀構(gòu)成的圖形。

測量工具
我們在用photoshop做界面設(shè)計時，為了元素位置的精確，需要用螞蟻線或者切片工具來測量元素與元素之間的距離，畫完螞蟻線或切片如果有變動，你還得再量一遍。在sketch在這點就會節(jié)省你很多時間，并且讓我們的設(shè)計更加精確，只要選中這個元素，按住alt鍵，然后再把鼠標(biāo)點選其他元素或者移動就可以實時的顯示上下左右之間的距離，這是我認(rèn)為sketch的一個最棒的功能。

圓角矩形
sketch對圓角矩形的創(chuàng)建是很方便的，既可以控制四個角圓角大小，也可以雙擊，對單個圓角進(jìn)行調(diào)整，并且可以隨意調(diào)圓角矩形，圓角也不會變形，當(dāng)然photoshopcc也解決了這個問題，但它的操作很笨重。還有一個好處是，你可以點擊右邊的數(shù)值，并拖動鼠標(biāo)，可以實時看到圖形的變化。

方便的選擇元素
左側(cè)圖層和分組欄，可以看到矢量圖形的的縮略圖。
當(dāng)用鼠標(biāo)掠過畫布上的各個元素的時候，左側(cè)會出現(xiàn)一個藍(lán)色框?qū)沟轿覀冞x中的元素。

另外如果你是一個分層分組科學(xué)合理，命名規(guī)范的設(shè)計師的話，那sketch的搜索會讓你尋找界面元素的時候更加方便，并且隨著上下點擊會對焦到你選中的元素。

圖層樣式
sketch的圖層樣式和photoshop一樣，漸變，描邊，內(nèi)外陰影，不同的是sketch可以在一個圖形上添加最多四層完全不同的漸變，添加無限的描邊和內(nèi)外陰影。我們創(chuàng)建比較復(fù)雜的圖形質(zhì)感的時候也就更加方便。
文字的樣式也可以單獨的保存起來，方便對多個的文本進(jìn)行調(diào)整。
無論圖層樣式還是文字樣式都可以用alt＋command＋c或v進(jìn)行粘貼。

鋼筆工具
sketch的鋼筆工具也比photoshop好用，具體表現(xiàn)在可以方便控制像素對齊或半個像素對齊，而在photoshop中雖然也可以對一個像素對齊，但設(shè)置和切換很麻煩。
最棒的是，它可以畫完美的弧線，只要按住atl鍵拖動鼠標(biāo)即可。

網(wǎng)格工具
又是一個photoshop比較渣的點，photoshop不用第三方的網(wǎng)格插件基本就不可用，在sketch可以很方便的對網(wǎng)格進(jìn)行編輯，有傳統(tǒng)的方格，也有橫向和縱向組成的長方形。

文字渲染
這個點其實說的是sketch支持sub-pixel渲染，翻譯成中文可以說是次級像素，我隨便截圖給大家看一下，這種渲染方式是以前的舊技術(shù)，為低分辨率的顯示器而生，現(xiàn)在絕大多數(shù)的系統(tǒng)和屏幕都是有的，當(dāng)然有的同學(xué)要抬杠了，iOS的屏幕上沒有，實際上是有的，只是Apple默認(rèn)關(guān)閉，為什么關(guān)閉？1是iOS的現(xiàn)在的屏幕的像素密度不需要，剛才也說說了這是一個舊的技術(shù)，2是由于底層技術(shù)上的原因所以不支持。

效果圖鏡像
sketch是原生支持在iOS設(shè)備上查看設(shè)計稿的，可以下載iOS的App，就可以在iPhone，iPad實時查看設(shè)計稿了。

穩(wěn)定和效率
sketch可以添加無限的畫布，可以把界面全部在一個文件內(nèi)完成，有點像ppt，每頁都可以建立多個畫布，把多個界面平鋪，即便設(shè)計很多界面也不會覺得運(yùn)行效率上有所降低，由于都是矢量，所以文件體積也比photoshop小很多。所以最關(guān)鍵的一點就是穩(wěn)定，徹底把你從不停的command＋s解放出來，也不用在一個psd固定的1136X640內(nèi)只建幾個界面。

更新勤快
sketch工具是一個年輕小團(tuán)隊，更新比較勤奮，對于用戶的反饋也很及時。售價448元，安裝包不到10m，破解也是方便，但建議差錢的和不差錢的購買正版，拿出人民幣真正的支持這些能夠切實的解決問題的人。

支持eps和svg的導(dǎo)入
可以把psd內(nèi)的矢量文件轉(zhuǎn)成eps或svg格式，可以在sketch內(nèi)打開。

Sketch的劣勢
1、路徑繪圖。路徑描點的選擇，操作與路徑的修改，Sketch一直遜色于Photoshop。特別是對線段的選擇刪除，描點的切換、刪除和添加，還有單獨調(diào)整某個句柄，都還沒有Photoshop或Illustrator便捷。這導(dǎo)致我在繪制復(fù)雜圖形時，會在AI中繪制完畢后再粘貼到Sketch中。

2、不穩(wěn)定。Sketch并不算上是非常穩(wěn)定的軟件。經(jīng)常會出現(xiàn)莫名其妙的BUG。例如不同版本保存的源文件無法打開。調(diào)整Symbol寬高后，具體又在設(shè)計稿又不會更新等。但考慮到Bohemian開發(fā)人員一直很少，而繪圖軟件使用情景又很復(fù)雜，一百個人用可能會遇到一百個不同的 bug，盡管 Sketch 改進(jìn)速度很快，依然會給人感覺問題多多。

3、一些高級功能的缺失。比如畫布背景的調(diào)整（這關(guān)系到你判斷某些顏色的感覺）、查看顏色的LAB值、清除參考線等。