Sketch 3 向量 UI 製作軟體，無論 APP UI 還是 Website UI 都適用喲。
用習慣一套軟體時，其實是很難說服自己熟悉一套新軟體。第一次聽到 Sketch 時，也就左耳進右耳出的沒太在意。直到有一天逛到網路上的文章 “我用Sketch 設計Android app 的 工作流程”，不禁很想嘗試看看他的工作流程，希望能對自己摸索養成的 APP UI 設計流程來點改變。
因為 Flat UI Design 愈來愈流行的關係，逐漸的複雜的材質設計在網站、APP上已經不是那麼的常見，但仍然使用 Photoshop 設計 UI去拉一些平面的色塊、文字區塊總覺得煩瑣。Sketch 在定位上比較像 Adobe illustrator，全向量的環境，可以自由增加 Artboard，右側調整 layer 屬性的視窗佈局也與 Mac OS 的應用比較相像，也正好接手一個新 APP 跨 Android, iOS 雙系統的提案，剛好就利用這個機會好好的嘗試 Sketch 了。
以下分享一些近期使用 Sketch 的心得：
[ 切圖的好幫手 ] 由於是向量的環境，只要拉好你想要切圖的範圍，設定你想要匯出的檔案倍率，就可以自動匯出到你指定的資料夾。更不用說這樣的功能為需要製作 Android iOS 兩個版本的設計師，帶來多大的便利性。
[ 共用樣式很簡單 ] Sketch 有一個 Create Symbol 的功能，可以把某個圖層或群組作為一種共用的樣式。當你複製這個元件放到多個 artboard 上的任何位置，只要改一個、就可以修改每一個共用的顏色，大小，樣式，十分方便。
[ 開源的外掛、UI Kit ] 外掛眾多、UI Kit 資源充足，在設計上能夠帶來很大的便利性，Material UI Kit, iOS 各個 version 的 UI kit, Android UI kit 在網路上都可以找到很多的免費資源，而且在製作上也有很多外掛可以加快流程，不妨參考這篇文章： “來用 Sketch 畫你的 UI 吧”。
[ 搭配 Zeplin, 自動標示間距、大小 ] 大多數的 Front end 切版時，其實不會很計較當時在 UI 上做的是 5px 還是 6px，通常都是在製作網頁時依照當下的感覺直接從 CSS 微調。但如果你製作的是 APP UI 可能就免不了需要標示所有元件的大小與間距。Sketch 剛好可以將 Artbord 匯入至 Zeplin 自動產生所有標示，且不會一次顯示在畫面上，可以依照滑鼠的位置顯示目前需要的資訊。 (PS Zeplin 是邀請制，一個人加入後，可以邀請 3 個人喲～)
經過這次的經驗，之後 APP UI 應該都會用 Sketch 吧， Website 的提案，可能會依客戶屬性的不同，也逐漸都轉為 Skecth 製作，畢竟我買不起要付年費的 Creative Cloud 啊！再次在這裡感謝 KLP (Keep Learning Project)，只付了半價就享受到好用的 Sketch \O/
以下是 Sketch 相關連結：
- Sketch 官網
- Tutorials Video (from LevelUpTuts)
- Tutorials of Plugin Video (from LevelUpTuts)
- Sketch Resource
- Facebook 社團蠻常討論 Sketch
— — — — — — — — — — — — — — — — — — — — — — — — — — — — 分隔線 — — — — — — — — — — — — — — — — — — — — — — — — — — — —
喔耶～叉峰亂入 lol，在凱西老師的推薦之下，也開始嘗試了使用sketch 3這套驚人的介面開發軟體，目前sketch 3給我的感覺是它大量擷取了Photoshop和Illustrator的功能，而剛好這些功能都是在設計web或者是app時，很常用到的，因此如果是本來一直使用Photoshop或者是Illustrator的UI/UX designer，在一開始接觸sketch3時，絕對都能感受到這套軟體的貼心與高度便利。
另一方面，新的軟體在使用上多少還是會有所謂的過渡期，需要去學習和適應，我想就個人的使用習慣來和大家分享，目前有哪些部份感到不習慣，而希望找到相對應的解決方式。
[ 全螢幕瀏覽 ]我本來是習慣使用Photoshop進行設計，而通常在設計的過程中我非常仰賴cmd+F來觀看全螢幕模式，因為透過該模式可以暫時讓所有工具列隱藏，讓設計頁面完整地被呈現，而剛開始接觸sketch3時，我便為此傷透腦筋，找不到全螢幕模式，設計過程中一直覺得有點憋腳，直到我剛剛找到了他「cmd+.」，是的各位鄉親，就是command 加上英文的句點啦，發現的當下真的是跳起來歡呼了，而且原來他叫做簡報模式啦（又上了一課）。
資料來源：http://sketchshortcuts.com/
[ 顏色覆蓋 ]在Photoshop裡面同一個群組的元素會透過群組的概念收納，而當所有元素都被設定為同一種顏色時，只要使用顏色覆蓋就可，但是sketch3的群組並沒有辦法這樣設定，因此只能一個一個地為群組裡面的文字和圖形元素上色，但小弟斗膽揣測，解決方法應該是存在的，可能可以透過plugin，亦或者內建早就有，總之，小弟會持續努力找到解決方法的，另外看到這篇的網友們，若你們已有解決的方案，還請不吝提供呀。
[ 點選的精準度 ] 在sketch3工作區裡要移動各個元素，使用經驗跟Illustrator很接近，就是那種「隨點即移」的感覺，很直覺也很容易上手，不過當元素一多之後，反而會開始發生明明點擊的是標題字，但有反應的都是最外層的群組包，目前折衷的解決方式是：「如果欲點選的元素太小，會選擇使用zoom in的方式放大，藉此提升點選的精準度」，當然小弟也會持續地尋找，希望能有更方便的方式，來解決現階段面臨的小困擾。
>>總結：
我認為sketch3不僅僅是在操作上結合了adobe兩大軟體的優點，來打造出更適合UI/UX designer的繪圖軟體，而且還建立了大量plugin和UI kit這樣資源充足的環境，擴充性和支援度絕對是現時Photoshop和Illustrator所無法比擬的，
雖然目前我只有使用它來進行網站的提案設計，但從網站上各種介紹文章以及凱西老師分享的內容來看，在APP的設計開發上，似乎更能發揮出它驚人的本事，不只大幅度地減少UI/UX designer的繁瑣工作，同時也拉近了和開發者之間的距離（來電五十？），而還沒有使用過的朋友們，快來試用體驗sketch3的神奇吧。
See you~
