源地址：http://mp.weixin.qq.com/s?__biz=MzA4MzI0MTkxOQ==&mid=200243366&idx=1&sn=1c73c5c2bc40c569720472b117cddb93&key=2f5eb01238e84f7e458a3d385f69535ccda762daed1386d0feae7dfd2e47cb18eda28d5a706867cd93c0b6ba51c76ded&ascene=0&uin=NTI2NDgzMzM1&devicetype=iMac+MacBookPro9%2C2+OSX+OSX+10.10.1+build(14B25)&version=11020012&pass_ticket=EIkvkqnf54kj6IyItD%2FMZP4HneZK%2BvuiwiGPxGW8t3ywwPDObmQTZF7tjpQDQB0s
由於微信不方便觀看，特轉載！
對於sketch,靜電的第一印象是google的 sketch up,一款3d建模草圖軟件。 那麼這次靜電提到的sketch，則是一款全新的設計軟件。一聽到設計軟件，大家的反應必須是adobe家的photoshop，illustrator等等等等。那麼今天靜電要爲大家介紹的，則是這款sketch。這款軟件的定位非常精準，首先，它是一款矢量製圖軟件；其次，這款軟件的目標用戶是APP設計師（當然用來設計網頁也是可以的）。到這裏大傢伙可能有點不解，既然photoshop這樣的工具已經可以滿足我們設計app效果圖的需求，那麼這款軟件又有什麼與衆不同之處以至於我們非要用呢？ 彆着急，聽靜電慢慢往下講。
Sketch 是一款適用於所有設計師的矢量繪圖應用。矢量繪圖也是目前進行網頁，圖標以及界面設計的最好方式。但除了矢量編輯的功能之外，我們同樣添加了一些基本的位圖工具，比如模糊和色彩校正。我們盡力讓 Sketch容易理解並上手簡單，有經驗的設計師花上幾個小時便能將自己的設計技巧在Sketch中自如運用。對於絕大多數的數字產品設計，Sketch 都能替代Adobe Photoshop，Illustrator 和 Fireworks。
--摘自《sketch用戶手冊》
引子-接受sketch的糾結過程
在sketch用戶手冊中，編者毫不掩飾sketch的強大功能，甚至說：對於絕大多數的數字產品的設計，sketch可以完全替代photoshop，illustrator和fireworks。 最初看到這些句子的時候，靜電有點不以爲然，但好奇心還是驅使靜電將這個程序下載下來，打開這個鑽石形狀的圖標，靜電看到一排看起來很簡單的圖標，在上邊可以拖動來畫各種形狀，但並沒有感受到更特別的地方。 由於工作忙，靜電在打開後沒多久便關閉了程序開始忙其他的事情。 就這樣大概十幾天時間就過去了。這段時間內，正值靜電負責設計的app改版後期，工作非常忙，而且要負責安卓和iphone兩個平臺的同時開發，工作量非常大。光是切圖，就有三四套，其中還不包括細節的調整工作。 靜電之前一直沒有標註效果圖的習慣，一來工作時間所迫，二來是偷懶。效果圖作完在手機上預覽感覺良好，就直接給到開發工程師，告知一些細節如何處理然後將切圖交付。然後等工程師完成後便坐在他們跟前來調整界面。
這是一個漫長而且非常磨人的過程，由於細節非常多，所以即使使用之前靜電講述的fireworks批量切圖法，依然可以把人搞的頭昏腦漲。而且由於沒有標註設計稿的字號，圖片尺寸，前端工程師全憑感覺開發。所以到他們認爲可以交付的程度，其實整個界面還是慘不忍睹的，在以前，靜電會搬個小椅子坐在他們跟前，與他們一起“目測”調整字號，圖片大小。 但，在這個過程中，靜電越來越發現，這種方式效率是及其低下的，一來浪費了雙方大量的時間來調整，二來由於都是目測調整，所以最終效果不太理想。
之前靜電一直認爲，標註效果圖是一件非常無意義的事情，但，這件事促使我開始反省，也許我是錯的。 在與開發工程師溝通後，靜電認爲設計稿標註是有章可循的，使用px標註的字號可以與安卓和ios平臺通過一定規律進行轉換爲dp或者sp，大多數其他間距也可以實現較爲精確的匹配。 所以靜電決定開始標記一些主界面的效果圖做嘗試。
標註效果圖是一項很繁瑣的工作，雖然我們可以嘗試使用一些標記軟件（靜電尋找的標記軟件是一款名爲markman的基於air開發的程序，這款軟件在初期爲我的標註工作帶來了很大幫助），但大部分標記軟件充其量就是一個標尺和取色器的結合體，可以滿足一部分的工作，但對於字號的標註一樣無能爲力，我需要在設計軟件中先查看字體屬性，然後再現打字到標註軟件中，效率啊效率，實在是讓人抓狂。最終，靜電看到了這款躺在我dock上已經十來天沒打開過的sketch。
首先靜電先去度娘了一下，發現已經有一些討論組和文章存在，但大部分是外文翻譯過來的。藉助這些文章，我瞭解到skech的獨特之處。
效果圖智能標記
sketch實現了軟件內的智能標記！這比用標記軟件還要方便好多倍。拋棄那些效果圖標記軟件吧.至於如何標記,靜電將在以後的文章中詳細講解.
第二點吸引靜電的，是他的切圖工具，藉助sketch的切片工具，我們可以輕鬆將一個圖標導出爲適用於ios和安卓的各種尺寸，你甚至不用理解大部分的原理（當然瞭解切圖尺寸的關係還是非常有用的，還不太瞭解的小夥伴可以查看靜電的設計教室第四篇），就可以順利的切出沒有毛刺，精確適配xxhdpi，xhdpi，hdpi，ios下一倍和兩倍的切片。
先進的對齊工具
雖然photoshop cc 2014版本改進了一些輔助對齊功能,但對比skech簡直就是小巫見大巫。sketch的對齊工具可以幫我們更輕鬆的對齊大部分的元素，絲毫不差。
artboard-一個文件完成整個工程的設計
sketch中沒有畫布的概念，整個空白區域都可進行創作，因爲他是基於矢量的。 但我們在某些時候需要一個“框”，來具象化我們的設計。在ps及其他設計軟件中，他叫畫布，但在skech中，他被賦予了一個新詞，artboard。我們可以在一張畫布上創建無數張artboard。這對於app的連貫性來說，是非常有幫助的，我們可以將一個app界面看做一個artboard，然後在一個界面中，對比和查看他們的不同之處，或者將他們的交互過程串聯起來。一切都非常方便。然後我們可以將這些artboard分別導出爲pdf或者分爲一個個的圖片文件，方便產品經理或開發者查看。一切只需要一到兩步的操作。
豐富的組件庫
有時候我們需要在設計稿中調用安卓或者ios系統自帶的控件，比如彈出的提示框，浮動鍵盤。但我們一定要自己再畫一次嗎？不必，sketch有豐富的素材庫，我們可以直接將需要的部分拖進來即可，這節省了我們大部分的時間，使我們可以將騰出來的時間用於更加核心的產品設計思考上。
設計稿可以在移動設備上即時預覽
sketch中自帶了一個mirror的功能,可以像psplay和photoshop的遠程連接工具一樣,將你的設計稿在移動設備上即時預覽查看.非常方便.
產品經理也可以輕鬆轉移到sketch
對於產品經理，sketch完全適用，用他來畫原型圖簡直輕而易舉，他豐富的組件庫和精確的尺寸控制讓我們的原型圖更逼真。更有利於交流和前期的展示。你甚至可以考慮將Axure 拋棄了。
下載Sketch,準備開啓新旅程
好的，介紹了幾點sketch最引人注目的特性。那麼靜電在這裏先放出他的下載地址(靜電寫文時,sketch的最新版本爲3.0.4)。下邊兩款軟件,大家一併先下載並安裝好.
sketch軟件下載地址:
http://www.bohemiancoding.com/sketch/
sketch toolbox 下載地址:
http://pan.baidu.com/s/1dD3VeUX
(由於這款軟件放在國外網盤上需翻牆,靜電直接費點力氣下載下來放到國內網盤,方便大家使用)
最後,靜電差點忘了,sketch現在還沒有windows版,想要體驗sketch的魅力,請大家買一臺mac設備吧. 下期,我們來認識一下skech的基本操作.