前言
身為一名網站前端工程師，關於「工程師與設計師如何進行合作，進而能完成更好的作品」一直是個讓我感興趣的議題。
當然這個議題範圍相當廣泛，從規格規範、工作流程、彼此的換位思考，到各式能提昇效率的工具等等。
去年認識了幾位網頁設計領域相關的朋友，在工作之餘的分享小聚中，得知「Sketch」這個好用的應用程式，它似乎能改善工程師與設計師合作時遇到的許多痛點。
今年才來介紹 Sketch 是有些 Lag，不過還是紀錄一下我的試用過程吧。
合作時遇到的痛點
由於每間公司的工作流程，以及部門配置都不大一樣，因此每個人在這段合作過程中遇到的痛點也各有不同，就簡單列一些我遇過，以及從其他前端、設計朋友那邊聽過的吧。
- wireframe -> mockup -> prototype 一套標準，各自解讀。
- 工程師怎麼都不照 mockup 實做，出來的成果總是歪嘴眼斜。
- 少了設計眼的工程師，實做時對於色碼與間距總感受不到細微差異。
- 在工作流程中加入「設計師必須提供 mockup 及 design spec」的流程，但標註每個細項（間距、寬高、色碼等）實在是曠日廢時且無趣的工作。
- 標註出來的規格表密密麻麻，讓人看到脫窗，很可能還會漏標或是漏看。
- 設計師缺乏元件化的概念，每一個單元的按鈕都有不知道是不是手誤造成的些微差異，無法重複沿用。
- 想要針對設計稿進行討論再實做，但不知怎麼進行。
- 有些公司裡設計師不負責製成網頁，但是 PSD 圖層又亂得毫無章法，要切圖與排成網頁很讓工程師頭痛。
- 要準備 @2x 跟向量 SVG 切圖相當麻煩。
- 工程師拿到設計稿進行網頁實作時，PM 也沒提供文案，只能開 PSD 複製文字或是自己打。
- 需求是個 RWD 網站，但設計稿只做了桌面版的大小，其他規格總是被遺忘，只好自己腦補。
- 各種腦補。
等各式各樣的問題。
Sketch
嗯，不是那個作 3D 模型的 Google SketchUp，在 Google 搜尋常會誤搜到 SketchUp 的教學，哈哈。
那麼 Sketch 能幫助我們什麼呢？當然，必須先說的是，它並無法解決所有的痛點，有些問題其實不在工具。
Sketch 是一套 Mac Only（Windows 的朋友們抱歉了 :P）的向量 UI mockup 設計工具，比起最常被使用的 Adobe Photoshop 跟 Adobe Illustrator，Sketch 它：