如何透過Sketch提高設計工作效率(下)
核心功能、操作觀念、實用技巧、資源小補帖
關於上集
上一篇文章我們提到了製作 Symbol 的方法和一些快速鍵的運用等等，不知道對於大家有沒有幫助呢？還沒看過的的朋友可以點下面的連結前往上篇：
而這一篇就來聊一下一些做UI的小觀念與分享一些 Sketch 的相關資源吧！
7.插件 (Plugin)
插件的支援是 Sketch 相當重要的賣點之一，強大的社群資源以及眾多開發者不斷的投入之下，Sketch 插件目前呈現一個百花齊放的狀態，不時有新玩意釋出，雖然想用 Sketch 原生的武功打天下也不無不可，但是好好的運用這些插件，相信我～你的工作效率就會像開了加速器一般呢！
我們可以利用一個叫做Toolbox的工具來快速安裝以及管理插件，這邊我也推薦一下幾個我常用的插件：
- Runner： 正如他的官網說描述：Run Everything，這個插件可以幫助你快速的去你想去的地方，不管是開啟檔案、去某個畫板或圖層、新增Symbol 等等，總之就是可以可以省下我們找東西的時間，我覺得相當的方便。
- Icon Font：這個插件內建許多 icon 可以立即使用，包含 font-awesome 以及 material icons 等等，而且可以使用「編輯文字」的方式來調整樣式(這個icon本身就是一個字體)，所以可以讓我們在初期排版時快速放入一些icon示意內容，不過比較精細的 icon 我建議還是自己畫，畢竟畫一個容易識別且符合情境的 icon 也是UI設計師的任務之一，這個工具只是幫助我們放一些通用型 icon，讓開發端可以先從 font-awesome 之類的平台先抓來替代，我們畫的圖之後再補上就可以囉！
- Rename it：不知道你有沒有遇過這樣的經驗，同一個物件複製了好多個，檔案名稱的最後就會有無限個”xxx copy”，這時候我們就需要這個命名小工具來做一次性的命名處理，把相同類型的元件重新命名或加上編號，這個插件還提供了各種變數，讓你更靈活的去調整你的命名規則。
- Magic Mirror：這個插件做展示圖的時候的非常的方便，它可以相當輕易的把 Artboard 投影鏡射到你所選取的形狀圖層上，因此在製作有透視或是各種角度的 Mockup 都很好用，只不過這款插件若要取得較高畫質的鏡射是需要付費購買Pro版本的哦！
- Git Sketch：對於設計師來說，版本控管一直是一個很頭大的問題，以往都透過修改檔案命名來辨別(v1,v2,v..100)，但是隨著時間一長檔案會越來越多甚至覆蓋掉過去的版本，因此這個插件也導入了程式的版本控制(Git)的方式，讓設計師用簡單的插件就能做好版本管理，每天下班就是按下 Commit，收工！
- Slicer：我切！這個切圖插件除了可以快速幫你導出不同倍率的圖案之外，連不同裝置的後綴都幫你加好了，匯出後也會幫你分資料夾收好，匯出的 icon 也可以保留背景透明度，是個非常實用的插件。
8.製圖時的觀念與方向
做好圖層命名，好的命名習慣有幾個好處：
1.直覺好找、搜尋容易(不管是自己看或是和同事協作都是好棒棒！)
2.幫助自己釐清自己到底做了什麼東西，有時候設計很多頁面時會做到頭昏腦脹，這時在命名的過程常常就會發現一些不必要或可以合併的元件，順便保持圖層結構的乾淨。
3.串接原型工具(Prototype Tools)時可以省去不少時間，因為許多工具的運作規則都會根據命名而有所影響。
了解各種裝置的限制
隨著時代演進，現在介面的載體越來越多元，在UI設計上的考量也要越仔細，我們要知道我們的畫面在不同裝置間會如何呈現，例如做網頁的話我們必須要了解網格系統(Grid System)以及流體佈局(Fluid-Layout)基本概念，手機版網頁是否要乘載所有的資訊？如果是做手機App介面的話也要知道iOS和 Android 的使用邏輯與習慣，另外建議一定要搭配Sketch Mirror在手機上查看細節和字體大小，因為在電腦上做圖和眼睛真正在看手機的距離是不同的，所以每個裝置的規範或限制都必須要去了解。
建立專案的視覺規範(Style Guide)
正如前面所提到的，不管是建立 Symbol 或 Share Style 都是在加速我們的效率，而更重要的是經由這個過程來建立一套視覺規範，這不僅能幫助我們釐清我們整個產品的色彩模式、文字、元件結構等等，對於程式開發以及團隊其他成員來說也能有更一致的溝通畫面。有些人可能會覺得整理或製作這些規範有點花時間，不過我個人是認為「溝通成本」遠大於「製作成本」，前期的資料建立越完整，後期反覆修改調整的機會越小。
盡量減少檔案的大小
雖然說 Sketch 是個輕量級軟體，但常常可能一個專案會越做越大，遇過一些朋友把所有 Artboard 放在同一個 Page，這其實會造成軟體運作上不順暢，我的建議是把 Page 依照專案的功能做分類，除了可以讓管理更方便，也減少一點軟體運算的時間。
再來就是盡量不要用 Background Blur，這也是一個非常吃資源的效果，可以先把效果關閉，等到需要輸出時再打開就可以了。最後記得時常檢查圖層，刪除不必要的圖層，減少佔用系統空間。
9.關於協作工具
不管是和團隊裡的哪一個成員溝通，專案經理、設計師、老闆或是工程師，我們都希望用最少的時間做最有效率的溝通，而市面上已經有不少的平台或工具可以幫助我們降低溝通成本，下面這些是比較常見的工具：
導出與標註工具
Sketch Measure / Riry / Zeplin
不過這部分青菜蘿蔔各有所好，大家可以去試用看看感受一下這些平台的特色，沒有最好的工具，只有最適合當下專案或團隊習慣的工具。
10.Sketch資源小補帖
最後我來提供一些 Sketch 的相關資源，但資源實在太多了，所以我就列舉一些我常使用的給大家參考：
台灣
中國
國外
Sketchrepo / Sketchappsources / UI8 / Sketch App Rocks
另外推薦一個Chrome的插件Muz.li，讓你每天都有新的靈感可以發現！
總結
規劃很重要，雖然設計師是一個相對視覺化與感性的職業，但對介面設計師來說，理性的邏輯思維也是很重要的，UI設計是一個牽一髮動全身的過程，你絕對不會想在設計了100個頁面之後，為了改一個按鈕的顏色，手動重複調整十幾二十個頁面對吧？我們的生命應該浪費在更美好的地方才是～
最後陳腔濫調一下：「工具是死的，人是活的。」其實做UI的重點不外乎就是「效率」與「細心」，產出快、品質又好其實是一件相當不容易的事，我們應該更專注在設計本身，而不是被工具限制，所以建立一套良好的使用邏輯與習慣，相信不管在提升製圖的速度上或是與別人協作時都能夠如魚得水，事倍功半！
以上內容都是我的一點經驗之談(參雜許多個人習慣XD)，希望可以幫助到想學習Sketch的人，有任何指教或需要改正的地方請隨時留言給我，如果喜歡這篇文章的話也歡迎幫我點個喜歡或者分享給其他正在學習Sketch中的朋友，同時也歡迎大家多多交流自己使用的工具或小訣竅囉！
工商服務時間
最後小小的工商服務一下，我在八月時有在Hahow這個線上課程平台開設了UI設計入門的課程，若對UI設計有興趣想要初步了解的朋友也可以參考看看囉:D
也分享一些之前寫過的文章：
感謝你/妳花時間讀這篇文章，如果你覺得這篇文章寫得不錯或是有幫助到你，希望你能給我一點拍手鼓勵、也順便讓我知道你的想法，我會多加點油寫出更多內容的！
拍「1–5下」：感謝你喜歡這篇文章！
拍「5–15下」：代表你喜歡這類的文章，希望未來我可以寫更多相關主題。
拍「15–50下」：非常喜歡這篇文章，甚至會想要分享給朋友！Hi, 我是Simon，一名UI/UX產品設計師，目前正在東京工作。我熱愛分享，正試著從小事開始創造價值，興趣很多、話也不少，如果有合作/交流機會或任何想聊的事情，都不用客氣透過我的 E-mail (a97210230@gmail.com) 或直接用 Facebook 聯絡我，期待與你的相見 :)
