跳至主要內容

Design with Code

來用 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

還有人用多個 Artboard 來作 gif 動畫 XD

Plugins

好的工具就會有一堆外掛支援,Sketch 是使用 JSTalk 作為 plugin 主要語言。
推薦外掛管理工具 Sketch Toolbox 有超多外掛整理好,直接下載安裝到指定目錄!

Sketch_Toolbox_Screenshot

Command Line

另外一個我覺得也是 Sketch 厲害的地方就是可以使用 SketchTool 以 Command Line 方式將素材輸出,可以看這篇自動輸出素材到 Xcode 有很好的範例,真強大啊!

Paparazzi app

另一個也是我覺得很 cool 的應用,使用 Paparazzi 瀏覽網頁,把所有元素拉到 Sketch,boom! 好了~ 可以將現有頁面立刻使用 Sketch 設計。

##結論:
今天也不是要批評 Photoshop 有多麼不好用,只是專注在 UI Design 上,可能有其它比較好的選擇,如果要作 Web、App UI,或許 Sketch 是個非常好用的工具,但如果要修圖、調整影像、照片、栽切? 還是乖乖用強桿的 Photoshop 吧!

##缺點:
再怎麼好的工具多少還是有他的缺點的,Sketch 一開始我比較大的不習慣是沒有像 Photoshop 那樣多又方便的快速鍵,熟悉 Photoshop 快速鍵的一時會有點難轉換到 Sketch,需要一點時間上手~

##資源下載:
SketchAppSources
Sketch Tips
Sketch Tricks
SketchCasts
ustwo 提供的相關資源

也歡迎來 Sketch.tw FB 社團頁 來討論喔!
Happy UI Design!


本文使用到的素材:
iPhone GUI for Sketch
Content Generator for Sketch

標籤:

留言