來用 Sketch 畫你的 UI 吧

WelcometoSketch3_hero

在之前就聽說過這個黃黃的鑽石 Sketch 來畫 UI 相當好用，就趁當時 Sketch 3 推出時入手了，再親身體驗過後，我推薦用 Sketch 來畫你的 UI，以下跟大家簡單分享幾個我回不去 Photoshop 的特點:

超方便的圖片匯出

因應 Retina 的螢幕，Sketch 可以很方便的一次輸出多個倍數匯出，傳統用 Photoshop 可能得先輸出 2x 再去縮 1x，另一個好處是 Sketch 是向量的，可以先畫 1x 再輸出 2x 甚至更大 3x，若要支援甫推出的 iPhone 6 Plus 可說是無痛升級 3x!
註: 其實 Photoshop 也是可以向量，只是用起來不那麼方便!

我之前的作法給大家參考一下，由於我是使用 Macbook Retina 螢幕，所以我是先畫 2x，再去縮放 0.5 倍及 1.5 倍:
sk_image_output
sk_image_output2

另一個亮點就是不用特地隱藏其它圖層可以直接輸出我要的圖層，過往使用 Photoshop 得先隱藏某些圖層才能再輸出(Save to Web)，但若是用 Sketch 的 slice 切片功能還是得隱藏部份圖層就是。

輸出還有一個很方便的功能，就是在預覽區裡就可以直接使用拖拉輸出圖片了，一個動作就將檔案加到寄件附件裡!

相對間距顯示

按下 option 再移動可以方便的知道物件間距是多少，透過不同物件中移動可以很快速的知道相對的座標及間距或是否有置中。

多層的填色、外框、陰影

元素可以有很多層的填色、外框等，效果可以疊加，另一方面在單一元素的 A/B test 很好用啊~

建立可重用 symbols、text styles

這也是我覺得 Sketch 很大的一個亮點，把元素轉成 symbols，像是一個模組一樣可以重複使用，要修改是同步的，假如以一個 iOS App 來說，我有個畫面都各有一個褐色的 Navigation Bar，萬一要改成白色底、字體，在 Photoshop 要怎麼作?

背景模糊

我覺得這是針對 iOS7 來的吧!! 可以很輕易的不用在複製圖層打模糊就作這樣的效果!

Artboard

也算是一個 Sketch 的特色，一個檔裡可分很多 Page，而 Page 裡可以放很多 Artboard，可以想像 Artboard 是 App 中某個 Tab 裡每個流程畫面，而用 Page 來區分不同 Tab，另一個也是不錯用法就是利用不同的 Artboard 來作 app 的各種 size 的 icon。
sk_feature_artboard